/* The opening is its own composition. Concepts use demonstration content. */
.hero-icon { display: inline-block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.hero .eyebrow .hero-icon { width: 17px; height: 17px; fill: currentColor; stroke-width: 0; }
.hero-benefits .hero-icon { width: 23px; height: 23px; }
.board-shortcuts .hero-icon { width: 22px; height: 22px; }
.board-plan .hero-icon { width: 13px; height: 13px; }
.concept-task .hero-icon { width: 22px; height: 22px; }
.rail-icon .hero-icon { width: 24px; height: 24px; }
.hero {
  position: relative;
  isolation: isolate;
  --hero-bleed: calc((100% - 100vw + 16px) / 2);
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 30px;
  min-height: 776px;
  padding-block: 36px 20px;
  align-items: start;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 25px var(--hero-bleed) -25px;
  background: radial-gradient(ellipse at 77% 40%, #dfe9ff 0%, #f4f8ff 48%, transparent 73%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 var(--hero-bleed) -60px;
  background: url("assets/hero-cloud-bank.png") center bottom / 100% auto no-repeat;
  opacity: .64;
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 90%, transparent 100%);
}
.hero-copy { padding-top: 54px; align-self: start; position: relative; z-index: 4; }
.hero h1 { font-size: clamp(3.5rem, 5.45vw, 5.05rem); line-height: 1.03; letter-spacing: -.055em; max-width: 650px; }
.hero .eyebrow { margin-bottom: 26px; font-size: .73rem; letter-spacing: .15em; }
.hero .eyebrow > span { margin-right: 10px; font-size: 1rem; }
.hero-lede { font-size: 1.12rem; line-height: 1.65; color: var(--muted); margin-top: 28px; max-width: 470px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 30px; }
.hero-actions .text-link { font-size: .81rem; gap: 8px; }
.availability { display: flex; align-items: center; gap: 8px; font-size: .7rem; color: var(--muted); margin-top: 20px; }
.availability > span { width: 6px; height: 6px; border-radius: 50%; background: #73a898; }
.hero-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 34px; padding: 16px 12px; margin-left: -12px; border-radius: 19px; background: #ffffff85; }
.hero-benefits > div { display: flex; align-items: flex-start; gap: 10px; }
.hero-benefits > div > span { font-size: 1.45rem; line-height: 1.2; color: #8076e1; }
.hero-benefits strong, .hero-benefits small { display: block; }
.hero-benefits strong { font-size: .79rem; margin-bottom: 5px; line-height: 1.3; }
.hero-benefits small { font-size: .77rem; line-height: 1.5; color: #596682; }
.hero-world { height: 654px; position: relative; isolation: isolate; margin: 0; }
.scene-caption { position: absolute; bottom: -58px; left: 18px; right: -12px; text-align: center; color: #5c6986; font-size: .72rem; line-height: 1.5; z-index: 4; }
.hero-orbit { position: absolute; inset: 60px -20px 0; border-radius: 50%; background: radial-gradient(ellipse, #fff 15%, #d8e4ff80 50%, transparent 73%); z-index: -1; }
.hero-cloud { position: absolute; width: 253px; top: -12px; right: 80px; z-index: 0; transform: rotate(1deg); filter: drop-shadow(0 15px 25px #7873be15); }
.hero-note { position: absolute; left: 0; top: 18px; font-size: 1rem; transform: rotate(-7deg); }
.concept-board { position: absolute; width: 492px; right: -15px; top: 143px; padding: 23px 24px 25px 72px; background: linear-gradient(145deg,#fff,#f4f7ff); border: 7px solid #303649; border-radius: 30px; box-shadow: 15px 25px 60px #546b9b28; transform: rotate(3deg); z-index: 1; }
.concept-board header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.board-brand { font: 700 22px/1 var(--font-display); letter-spacing: -.07em; }
.board-brand > span { color: var(--brand); }
.concept-board header small { font-size: 8px; color: var(--muted); }
.board-date { margin-left: auto; padding: 6px 8px; border-radius: 8px; background: #edf0ff; color: var(--brand); font-size: 7px; }
.concept-board > h2 { font-size: 30px; text-align: center; }
.board-subtitle { font-size: 11px; text-align: center; color: var(--muted); margin: 8px 0 18px; }
.board-shortcuts { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin-bottom: 18px; }
.board-shortcuts a { display: flex; align-items: center; flex-direction: column; gap: 7px; border-radius: 13px; padding: 11px 3px; background: #e8edff; font-size: 10px; font-weight: 700; }
.board-shortcuts b { font-size: 22px; line-height: 1; color: #6b83d4; }
.board-shortcuts a:nth-child(2) { background: #eee9fe; }.board-shortcuts a:nth-child(2) b { color: #8874d2; }
.board-shortcuts a:nth-child(3) { background: #e5f5eb; }.board-shortcuts a:nth-child(3) b { color: #53a580; }
.board-shortcuts a:nth-child(4) { background: #fff0df; }.board-shortcuts a:nth-child(4) b { color: #d1944c; }
.board-shortcuts a:nth-child(5) { background: #ffedf4; }.board-shortcuts a:nth-child(5) b { color: #d3769f; }
.board-life-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 12px; }
.board-plan { padding: 16px 13px; background: #fff; border: 1px solid #e6eaf5; border-radius: 17px; }
.board-plan h3 { font-size: 13px; line-height: 1.3; margin-bottom: 14px; letter-spacing: -.03em; }
.board-plan a { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; padding: 13px 0; border-bottom: 1px solid #eef0f7; }
.board-plan a:last-child { border: 0; }.board-plan a > b { color: #98a4bc; }
.board-plan i { display: grid; place-items: center; width: 24px; height: 24px; font-style: normal; font-size: 12px; border-radius: 8px; color: var(--brand); background: #edf0ff; }
.board-plan span { flex: 1; line-height: 1.35; }.board-plan small { display: block; font-size: 8px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.board-food { background: #fff; border: 1px solid #e6eaf5; border-radius: 17px; overflow: hidden; }
.board-food img { width: 100%; height: 137px; object-fit: cover; object-position: 50% 65%; }
.board-food > span { display: block; padding: 15px 13px; position: relative; }.board-food small { font-size: 7px; letter-spacing: .06em; color: #7b866e; }
.board-food strong { display: block; font: 700 16px/1.16 var(--font-display); margin-top: 8px; }.board-food b { position: absolute; right: 12px; bottom: 12px; color: var(--brand); }
.board-label { position: absolute; bottom: -32px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 8px; }
.phone-frame { background: #202638; border: 6px solid #303649; border-radius: 31px; padding: 2px; box-shadow: 7px 20px 40px #394c7330; }
.hero-phone { position: absolute; width: 205px; left: -2px; right: auto; top: 120px; z-index: 3; transform: rotate(-6deg); transform-origin: center; }
.hero-phone figcaption { display: none; }
.concept-phone { background: linear-gradient(160deg,#f7f9ff,#fff); border-radius: 24px; padding: 12px 12px 14px; overflow: hidden; min-height: 0; }
.concept-status { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: 8px; font-weight: 700; padding: 2px 3px 19px; }
.concept-status i { position: absolute; width: 56px; height: 16px; top: 0; left: 50%; transform: translateX(-50%); border-radius: 10px; background: #202638; }
.concept-brand { display: flex; align-items: center; font: 700 20px/1 var(--font-display); letter-spacing: -.07em; }.concept-brand > span { color: var(--brand); }.concept-brand img { width: 38px; margin-left: auto; }
.concept-phone h2 { font-size: 20px; line-height: 1.05; margin-top: 6px; letter-spacing: -.035em; }.concept-date { font-size: 7px; letter-spacing: .07em; color: var(--brand); margin-top: 16px; }
.concept-workout-image { display: block; margin-top: 16px; background: #fff; border-radius: 14px; border: 1px solid #e2e7f2; overflow: hidden; }.concept-workout-image img { width: 100%; height: 139px; object-fit: cover; object-position: 50% 45%; }.concept-workout-image > span { display: flex; justify-content: space-between; padding: 10px 11px; font: 700 10px/1.3 var(--font-display); }.concept-workout-image b { color: var(--brand); }
.concept-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }.concept-metrics > div { display: flex; flex-direction: column; gap: 4px; border-radius: 13px; background: #eef0ff; padding: 11px 6px; text-align: center; font-size: 6px; color: var(--muted); }.concept-metrics b { font: 700 13px/1 var(--font-display); color: var(--brand); }
.concept-task { display: flex; align-items: center; gap: 7px; padding: 14px 0; }.concept-task i { font-size: 21px; color: var(--brand); font-style: normal; }.concept-task > span { font-size: 9px; font-weight: 700; flex: 1; }.concept-task small { display: block; font-size: 7px; color: var(--muted); font-weight: 400; margin-top: 4px; }
.concept-start { display: flex; justify-content: space-between; align-items: center; background: var(--brand); color: #fff; border-radius: 12px; padding: 12px 11px; font-size: 9px; font-weight: 700; }.concept-demo-label { display: block; text-align: center; font-size: 5px; letter-spacing: .08em; color: var(--muted); margin-top: 14px; }
.floating-food, .floating-move { display: none; }
.experience-rail { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(7,1fr); margin-top: -4px; padding: 26px 17px; border-radius: 28px; background: #ffffffd9; border: 1px solid #fff; box-shadow: 0 16px 55px #697bac13; backdrop-filter: blur(12px); }
.experience-rail a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 5px 13px; border-right: 1px solid #e5eafa; }.experience-rail a:last-child { border: 0; }.experience-rail a:hover strong { color: var(--brand); }
.rail-icon { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; line-height: 1; color: #6285dc; background: #e7efff; }.rail-icon--purple { background: #eee9ff; color: #8572d5; }.rail-icon--green { background: #e7f5ed; color: #4c9b7c; }.rail-icon--orange { background: #fff0dc; color: #d2964a; }.rail-icon--pink { background: #ffebf3; color: #cf79a0; }.rail-icon--indigo { background: #eeeefe; color: #6e71d4; }
.experience-rail strong { font: 700 1rem/1.2 var(--font-display); }.experience-rail small { font-size: .72rem; line-height: 1.4; color: var(--muted); max-width: 115px; }
@media(max-width:1280px) {
  .hero::before, .hero::after { left: var(--hero-bleed); right: var(--hero-bleed); }
  .hero { gap: 18px; }
  .concept-board { width: 448px; right: -10px; padding-left: 67px; padding-right: 20px; }
  .hero-phone { width: 192px; left: -4px; top: 120px; }.hero-cloud { width: 236px; right: 66px; }
  .board-plan h3 { font-size: 12px; }.board-plan a { font-size: 9px; }.board-food strong { font-size: 15px; }
  .hero-benefits { gap: 12px; }.hero-benefits > div { gap: 8px; }.hero-benefits strong { font-size: .79rem; }.hero-benefits small { font-size: .79rem; }
  .experience-rail { padding-inline: 8px; }.experience-rail a { padding-inline: 9px; }
}
@media(max-width:1050px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 45px; padding-bottom: 110px; gap: 28px; }
  .hero-copy { text-align: center; padding-top: 0; }.hero h1 { font-size: 4.8rem; margin-inline: auto; }.hero-lede { max-width: 580px; margin-inline: auto; }.hero-actions, .availability { justify-content: center; }.hero-benefits { max-width: 590px; margin: 30px auto 0; background: transparent; }.hero-benefits > div { justify-content: center; text-align: left; }
  .hero-world { width: min(680px,100%); height: 645px; margin-inline: auto; }.concept-board { width: 497px; right: 15px; top: 143px; padding-left: 74px; }.hero-phone { width: 205px; left: 36px; top: 125px; }.hero-cloud { width: 253px; right: 108px; top: -12px; }.hero-note { left: 55px; top: 29px; }
  .scene-caption { bottom: -73px; }.hero::before, .hero::after { left: var(--hero-bleed); right: var(--hero-bleed); }.hero::after { background-size: auto 620px; }
  .experience-rail { grid-template-columns: repeat(4,1fr); padding: 22px 18px; gap: 24px 0; }.experience-rail a:nth-child(4) { border: 0; }.experience-rail a:nth-child(n+5) { transform: translateX(50%); }.experience-rail small { max-width: 135px; }
}
@media(max-width:620px) {
  .hero { padding-block: 32px 34px; gap: 32px; }.hero h1 { font-size: clamp(3rem,12.1vw,4.4rem); line-height: 1.04; }.hero .eyebrow { font-size: .62rem; letter-spacing: .12em; margin-bottom: 22px; }.hero-lede { font-size: .95rem; max-width: 345px; margin-top: 22px; }.hero-actions { margin-top: 26px; gap: 17px; }.hero-actions .text-link { display: inline-flex; font-size: .77rem; }.hero-actions .button { min-height: 52px; padding: 13px 25px; }.availability { font-size: .64rem; margin-top: 18px; }.hero-benefits { display: none; }
  .hero-world { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; height: auto; padding-top: 70px; }.scene-caption { display: none; }.concept-board { display: none; }.hero-orbit { inset: 30px -5px 80px; }.hero-cloud { width: 172px; top: -6px; right: 5px; z-index: 4; }.hero-note { top: 13px; left: 17px; font-size: .87rem; }
  .hero-phone { grid-column: 1/-1; position: relative; inset: auto; width: min(295px,100%); margin: 0 auto; transform: rotate(-2deg); border-radius: 36px; border-width: 6px; }.concept-phone { padding: 17px 17px 19px; border-radius: 28px; }.concept-status { font-size: 9px; padding-bottom: 22px; }.concept-status i { width: 68px; height: 18px; }.concept-brand { font-size: 26px; }.concept-brand img { width: 46px; }.concept-phone h2 { font-size: 28px; margin-top: 8px; }.concept-date { font-size: 8px; margin-top: 20px; }.concept-workout-image { margin-top: 20px; border-radius: 18px; }.concept-workout-image img { height: 195px; }.concept-workout-image > span { font-size: 12px; padding: 12px 13px; }.concept-metrics { gap: 10px; margin-top: 17px; }.concept-metrics > div { font-size: 8px; padding: 14px 8px; }.concept-metrics b { font-size: 17px; }.concept-task { gap: 10px; padding: 18px 0; }.concept-task i { font-size: 27px; }.concept-task > span { font-size: 12px; }.concept-task small { font-size: 9px; }.concept-start { font-size: 12px; padding: 15px 14px; border-radius: 14px; }.concept-demo-label { font-size: 6px; margin-top: 16px; }.hero-phone figcaption { display: block; position: static; color: var(--muted); text-align: center; font-size: .7rem; padding-top: 18px; margin-bottom: -36px; transform: rotate(2deg); white-space: nowrap; }
  .floating-food, .floating-move { display: block; position: relative; inset: auto; width: 100%; transform: none; border: 5px solid #fff; background: #fff; border-radius: 19px; box-shadow: 0 12px 35px #7b7ba319; margin-top: 36px; padding: 0; overflow: hidden; }.floating-food > img, .floating-move img { width: 100%; height: 110px; object-fit: cover; border-radius: 14px; }.floating-move img { object-position: 50% 32%; }.floating-food > span { display: block; padding: 12px 7px 10px; }.floating-food small { font-size: .52rem; color: var(--muted); }.floating-food strong { font: 700 .91rem/1.2 var(--font-display); display: block; margin-top: 4px; }.floating-food b { position: absolute; right: 10px; bottom: 16px; font-size: .85rem; color: var(--brand); }.floating-move > span { display: block; font: 700 .91rem/1.2 var(--font-display); padding: 17px 7px 14px; text-align: left; }.floating-move b { color: var(--brand); float: right; font-size: .85rem; }
  .hero::after { background-size: auto 440px; inset: 170px var(--hero-bleed) -20px; opacity: .65; }.hero::before { left: var(--hero-bleed); right: var(--hero-bleed); inset-block: 220px 0; }
  .experience-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding: 20px 9px; border-radius: 22px; width: calc(100% - 28px); }.experience-rail a { flex: 0 0 145px; padding: 6px 17px; scroll-snap-align: center; transform: none!important; border-right: 1px solid #e5eafa!important; }.experience-rail a:last-child { border: 0!important; }.experience-rail strong { font-size: .95rem; }.experience-rail small { font-size: .72rem; }.rail-icon { width: 44px; height: 44px; font-size: 23px; }
}
@media(prefers-reduced-motion:reduce) { .hero * { transition: none; } }