/* home-goal.css: the goals section (#goal, landing-v3). The three goals one after another (Lose
   weight, Maintain, Build muscle) under a switch that stays in view, each goal's words and ticks, the sample chats (Cura's pane for Lose weight, the
   chart chat for Maintain, each with the general chat app behind a disclosure) and the Workout
   Builder preview card with its gear chips (builder.js). The chats are finished frames. Rebuilt from the
   reference design; every color is a tokens.css custom property or a mix of them.
   CSS draws each finished frame. First-frame rules and appear animations sit under .hp-motion
   (home-play.js) and :not(.hp-done), so with no script or reduced motion every word is there. */

/* All three goals show, one after another. The switch is a row of links on a full-width white band
   that stays in view under the header (68 px) while the section scrolls, so the goals pass under the
   band and never show around the pill; once it sticks, home-goal.js adds is-stuck and a hairline
   closes it off. home-goal.js also marks the goal on screen (aria-current) and puts the page's goal
   first. A jump lands each goal just under the band: the page's 76 px scroll padding plus 92 px
   here. The gear chips show only once builder.js has wired them (gear-live), so a control on screen
   always works. */
#goal:not(.gear-live) :is(.eq-l, .eq) { display: none; }

#goal .goal-sw { position: sticky; top: 68px; z-index: 40; display: flex; justify-content: center; padding: 10px clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--white) 94%, transparent); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); border-bottom: 1px solid transparent; transition: border-color 160ms ease; }
#goal .goal-sw.is-stuck { border-bottom-color: var(--line); }
#goal .seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; border-radius: 30px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-pill); }
.lp #goal .seg a { flex: 1 1 auto; justify-content: center; min-height: 46px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: var(--pill); font-size: 15px; font-weight: 650; color: var(--body); text-decoration: none; white-space: nowrap; transition: background-color 160ms ease, color 160ms ease; }
.lp #goal .seg a:hover { color: var(--ink); background: var(--canvas); }
.lp #goal .seg a[aria-current="true"] { color: var(--white); background: var(--ink); }
#goal .seg-soon { display: contents; }

#goal .sec-head .tm { display: block; }
#goal .goal-wrap { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 36px 64px; margin-top: 40px; scroll-margin-top: 92px; }
/* A control reached with Tab lands under the band too, never behind it (WCAG 2.4.11). */
#goal .goal-wrap :is(a, button, summary, .pane-t) { scroll-margin-top: 92px; }
/* Between two goals: room, and a hairline halfway. */
#goal .goal-wrap + .goal-wrap { margin-top: clamp(72px, 8vw, 112px); }
#goal .goal-wrap + .goal-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: calc(clamp(72px, 8vw, 112px) / -2); height: 1px; background: var(--line); }
/* Each goal is named above its title, so it reads on its own as the page scrolls. */
#goal .goal-k { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; margin-bottom: -4px; padding: 6px 14px 6px 11px; border-radius: var(--pill); background: var(--mint-light); color: var(--primary); font-size: 14.5px; line-height: 1.3; font-weight: 700; }
#goal .goal-k::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
#goal .goal-tx { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
#goal .goal-vis { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* Side by side (1024 px and up), the words stay in view under the switch while the taller chat
   scrolls past. Not narrower, where a goal can stack and sticky words would ride over its chat, and
   not in a window under 640 px tall, where the words (up to about 435 px) would not fit under the
   switch. */
@media (min-width: 1024px) and (min-height: 640px) { #goal .goal-tx { position: sticky; top: 168px; } }
#goal .goal-h { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -0.028em; color: var(--ink); text-wrap: balance; }
#goal .goal-p { font-size: 18px; line-height: 1.6; color: var(--body); max-width: 30em; }
#goal .ticks { display: flex; flex-direction: column; gap: 12px; }
#goal .ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16.5px; line-height: 1.45; font-weight: 550; color: var(--ink); }
#goal .ticks .ic { margin-top: 1px; color: var(--primary); }

/* The sample chat: the app's chat screen in a card. */
#goal .mini { overflow: hidden; background: var(--canvas); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 44px 80px -44px color-mix(in srgb, var(--ink-deep) 50%, transparent); }
#goal .mini-t { display: flex; flex-direction: column; padding: 12px 16px 16px; }
#goal .mini-n { padding: 0 18px 14px; font-size: 12.5px; color: var(--cap); text-align: center; }
#goal .r-u2 .mu { margin-top: 8px; }
#goal .cpb p + p { margin-top: 8px; }
#goal .who .ic { color: var(--primary); }

/* Maintain's chart: two weeks inside the range, then today's reading above it. */
#goal .chart { margin-bottom: 10px; padding: 12px 12px 6px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
#goal .chart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--cap); }
#goal .chart-h b { font-size: 15px; font-weight: 700; color: var(--ink); }
#goal .chart svg { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
#goal .zone { fill: var(--mint-fill); }
#goal .zone-l { font-size: 10px; font-weight: 600; fill: var(--primary); }
#goal .trend { fill: none; stroke: var(--primary); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.45; }
#goal .wline { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 340; }
#goal .wdot { fill: var(--white); stroke: var(--primary); stroke-width: 2; }
#goal .tdot { fill: var(--ember); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; }
#goal .tring { fill: none; stroke: var(--ember); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
#goal .tlab { font-size: 11px; font-weight: 700; fill: var(--ink); }

/* Cura's chat for Lose weight and the general chat app's (the comparison's panes, as finished
   frames). Cura's action rows carry the app's ember mark, a short bar (markdownStyles.ts). */
#goal .cmp-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
#goal .pane { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-hero); }
#goal .gp { background: var(--white); }
#goal .cp { background: var(--canvas); border-color: var(--mint-line); box-shadow: 0 34px 70px -40px color-mix(in srgb, var(--primary) 55%, transparent); }
#goal .pane-sq { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--caption) 75%, var(--surface)); }
#goal .pane-nm { font-size: 16px; font-weight: 650; color: var(--ink); }
#goal .pane-t { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 16px 8px; }
#goal .pane-c { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 14px 14px; }
#goal .pane-in { flex: 1; min-width: 0; height: 46px; display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; background: var(--white); border: 1px solid var(--line); border-radius: 23px; font-size: 15px; white-space: nowrap; overflow: hidden; }
#goal .pane-in::after { content: ""; flex: 1 1 auto; }
#goal .pane-in > span { flex: 0 0 auto; }
#goal .gp .pane-in { background: color-mix(in srgb, var(--line) 50%, var(--surface)); border-color: color-mix(in srgb, var(--line) 50%, var(--surface)); }
#goal .ac-tx { display: none; }
#goal .pane-sd { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 23px; transition: opacity 160ms ease; }
#goal .gp .pane-sd { background: color-mix(in srgb, var(--caption) 85%, var(--surface)); color: var(--white); opacity: 0.55; }
#goal .cp .pane-sd { background: var(--ember); color: var(--ink); opacity: 0.45; }
#goal .gu { display: flex; justify-content: flex-end; padding: 6px 0 10px; }
#goal .gu p { max-width: 82%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: color-mix(in srgb, var(--line) 75%, var(--surface)); color: var(--ink); font-size: 15px; line-height: 22px; transform-origin: 100% 100%; }
#goal .g-p { padding: 4px 0; font-size: 14px; line-height: 21px; color: var(--body); }
#goal .g-h { padding: 8px 0 2px; font-size: 14.5px; line-height: 21px; font-weight: 700; color: var(--ink); }
#goal .g-li { display: flex; gap: 8px; padding: 3px 0 3px 4px; font-size: 14px; line-height: 21px; color: var(--body); }
#goal .g-mk { flex: 0 0 auto; min-width: 14px; color: var(--cap); }
#goal .g-p b, #goal .g-li b { font-weight: 650; color: var(--ink); }
#goal .cr + .cr { margin-top: 6px; }
#goal .acts { display: grid; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--canvas); }
#goal .act { display: flex; gap: 10px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }
#goal .act::before { content: ""; flex: 0 0 auto; width: 3px; height: 16px; margin-top: 3px; border-radius: 2px; background: var(--ember); }
#goal .vd-in { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
#goal .vd-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--pill); font-size: 14px; font-weight: 700; }
#goal .vd-pill.bad { background: color-mix(in srgb, var(--error) 9%, var(--surface)); color: var(--error); }
#goal .vd-pill.good { background: var(--sel); color: var(--primary); }
#goal .vd-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; line-height: 1.45; color: var(--body); }
#goal .vd-row span { display: inline-flex; align-items: center; gap: 6px; }
#goal .vd-row .x { color: var(--error); }
#goal .vd-row .ok { color: var(--success); }
#goal .vd-log { max-width: 34em; font-size: 14px; line-height: 1.5; color: var(--body); }
#goal .goal-vis > :is(.cmp-col, .mini), #goal .vs { width: min(100%, 520px); }

/* The general chat app sits behind a disclosure under each chat; its long reply scrolls inside
   its own screen, so opening it never pushes the page down by a whole essay. */
#goal .vs > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 10px 12px 10px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); font-size: 15.5px; line-height: 1.3; font-weight: 650; color: var(--ink); transition: border-color 160ms ease; }
#goal .vs > summary::-webkit-details-marker { display: none; }
#goal .vs > summary:hover { border-color: color-mix(in srgb, var(--primary) 22%, var(--line)); }
#goal .vs[open] > summary { border-color: color-mix(in srgb, var(--primary) 16%, var(--line)); }
#goal .vs-l { display: inline-flex; align-items: center; gap: 11px; }
#goal .vs-sq { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--caption) 75%, var(--surface)); }
#goal .vs-pm { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--canvas); color: var(--primary); transition: transform 220ms ease; }
#goal .vs[open] .vs-pm { transform: rotate(180deg); }
#goal .vs-b { padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
#goal .vs .pane-t { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 36px; -webkit-mask-image: linear-gradient(180deg, var(--ink) calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, var(--ink) calc(100% - 36px), transparent); }
#goal .vs-n { font-size: 13px; line-height: 1.4; color: var(--cap); text-align: center; }

/* Build muscle: the gear chips. */
#goal .eq-l { font-size: 16.5px; font-weight: 500; color: var(--body); }
#goal .eq-l b { font-weight: 750; color: var(--ink); }
#goal .eq { display: flex; flex-wrap: wrap; gap: 8px; }
#goal .eq button { min-height: 44px; padding: 0 16px; border-radius: var(--pill); border: 1px solid color-mix(in srgb, var(--primary-dark) 20%, transparent); background: var(--white); font-size: 15px; font-weight: 600; color: var(--ink); transition: background-color 160ms ease, color 160ms ease; }
#goal .eq button:hover { border-color: var(--ink); }
#goal .eq button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* The Workout Builder preview card. */
#goal .wb { width: min(100%, 400px); display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 30px; color: var(--onDark); background: linear-gradient(170deg, color-mix(in srgb, var(--hero-top) 88%, var(--primary)), color-mix(in srgb, var(--hero-bottom) 92%, var(--primary))); box-shadow: 0 44px 80px -40px color-mix(in srgb, var(--ink-deep) 65%, transparent); }
#goal .wb-top { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; color: var(--onDarkDim); }
#goal .wb-t { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
#goal .wb-s { margin-top: -8px; font-size: 14px; color: var(--onDarkDim); }
#goal .wb-tm { display: flex; justify-content: space-between; font-size: 13px; color: var(--onDarkDim); }
#goal .wb-tm b { color: var(--onDark); font-variant-numeric: tabular-nums; }
#goal .wb-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--glass12); }
#goal .wb-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ember); }
#goal .wb-now { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 7%, transparent); border: 1px solid var(--glass8); }
#goal .wb-tx { flex: 1; min-width: 0; }
#goal .wb-nl { font-size: 12.5px; color: var(--mintL); font-weight: 600; }
#goal .wb-mv { margin-top: 4px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
#goal .wb-rp { font-size: 14px; color: var(--onDarkDim); }
#goal .ring { position: relative; flex: 0 0 auto; width: 78px; height: 78px; }
#goal .ring svg { display: block; transform: rotate(-90deg); }
#goal .ring circle { fill: none; stroke-width: 6; }
#goal .ring .rt { stroke: var(--glass12); }
#goal .ring .rf { stroke: var(--ember); stroke-linecap: round; stroke-dasharray: 207.3; }
#goal .ring > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; line-height: 1.05; }
#goal .ring b { font-weight: 800; }
#goal .ring small { font-size: 10.5px; font-weight: 600; color: var(--onDarkDim); }
#goal .wb-tip { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--onDarkDim); }
#goal .wb-tip b { color: var(--mintL); }
#goal .wb-video { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: var(--pill); background: var(--glass8); border: 1px solid color-mix(in srgb, var(--surface) 14%, transparent); color: var(--onDark); font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; }
#goal .wb-video .ic { padding: 5px 4px 5px 6px; border-radius: 50%; background: var(--ember); color: var(--ink); }
#goal .wb-up { font-size: 13px; font-weight: 700; color: var(--onDarkDim); }
#goal .wb-li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--glass8); font-size: 14px; }
#goal .wb-li b { font-weight: 600; color: var(--onDarkDim); white-space: nowrap; }
#goal .wb-n { font-size: 12.5px; color: var(--onDarkDim); text-align: center; }
@media (max-width: 359px) { #goal .wb-vlong { display: none; } }

/* On a phone the switch stays one row and its band shorter: the "Coming very soon" tag is left to
   the goal's own label on screen, and kept for screen readers. A jump or a Tab lands under the
   shorter band. */
@media (max-width: 640px) {
  #goal .goal-sw { padding-top: 8px; padding-bottom: 8px; }
  #goal .seg { flex-wrap: nowrap; gap: 4px; }
  .lp #goal .seg a { flex: 0 1 auto; min-height: 44px; padding: 0 14px; font-size: 14px; }
  #goal .seg-soon .soon-tag { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  #goal .goal-wrap, #goal .goal-wrap :is(a, button, summary, .pane-t) { scroll-margin-top: 84px; }
}
@media (max-width: 380px) {
  .lp #goal .seg a { padding: 0 11px; font-size: 13.5px; }
}
/* In a window under 500 px tall (a phone on its side) the band does not stick: with the header it
   would take over a third of the screen. Its links still jump, and a goal lands under the header. */
@media (max-height: 500px) {
  #goal .goal-sw { position: static; }
  #goal .goal-wrap, #goal .goal-wrap :is(a, button, summary, .pane-t) { scroll-margin-top: 16px; }
}
/* On a phone the goals pictures (the chats and the Workout Builder card) draw at 90 percent,
   as the days pictures do, so each fits on one screen. */
@media (max-width: 560px) {
  #goal :is(.mini, .wb, .cmp-col) { zoom: 0.9; }
}
/* Narrow phones are short ones too: 85 percent, as the days pictures. */
@media (max-width: 380px) {
  #goal :is(.mini, .wb, .cmp-col) { zoom: 0.85; }
}

/* Motion, under the player's flag only: the ticks, the gear chips and the Workout Builder card. The
   chats are finished frames. */
/* Once a goal's ticks are in the middle of the screen each check pops and glows mint in turn,
   once and unhurried, so the eye runs down the list; the gear chips glow in turn the same way, so
   they read as choices to press. The words are there from the first frame (home-sections.js plays
   both). */
.hp-motion #goal .ticks.hs-in:not(.hp-done) li .ic { animation: tickPop 900ms cubic-bezier(0.25, 0.8, 0.3, 1.2) var(--tk-d, 0ms) both; }
#goal .ticks li:nth-child(2) { --tk-d: 380ms; }
#goal .ticks li:nth-child(3) { --tk-d: 760ms; }
.hp-motion #goal .eq.hs-in:not(.hp-done) button { animation: goalLight 620ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--eq-d, 0ms) both; }
#goal .eq button:nth-child(2) { --eq-d: 110ms; }
#goal .eq button:nth-child(3) { --eq-d: 220ms; }
#goal .eq button:nth-child(4) { --eq-d: 330ms; }
#goal .eq button:nth-child(5) { --eq-d: 440ms; }
#goal .eq button:nth-child(6) { --eq-d: 550ms; }
/* The card: the clock's bar glides between ticks; a chip press deals new moves in (d1 and d2
   alternate so each press restarts the animation). */
.hp-motion #goal .wb-bar i { transition: width 1000ms linear; }
.hp-motion #goal .wb.d1 :is(.wb-mv, .wb-tip p, .wb-li) { animation: goalDeal1 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hp-motion #goal .wb.d2 :is(.wb-mv, .wb-tip p, .wb-li) { animation: goalDeal2 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hp-motion #goal .wb:is(.d1, .d2) .wb-li:nth-child(2) { animation-delay: 70ms; }
.hp-motion #goal .wb:is(.d1, .d2) .wb-li:nth-child(3) { animation-delay: 140ms; }
.hp-motion #goal .wb:is(.d1, .d2) .wb-li:nth-child(4) { animation-delay: 210ms; }

@keyframes goalDraw { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
@keyframes goalRing { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes goalDeal1 { from { opacity: 0; transform: translateY(6px); } }
@keyframes goalDeal2 { from { opacity: 0; transform: translateY(6px); } }
/* The goals' pictures (each chat, and the Workout Builder card) start tipped back a little and
   straighten toward the visitor as they scroll up into view: flat once the picture's top is halfway
   up the screen, whatever its height. Like t3.codes' app picture, which does it on hover; a scroll does
   it here, so phones get it too. Scroll-driven, so it follows the scroll and needs no script; where
   the browser has no scroll timeline, or with reduced motion, the pictures simply sit flat. */
@supports (animation-timeline: view()) {
  .hp-motion #goal .goal-vis { perspective: 1800px; }
  .hp-motion #goal .goal-vis > :is(.cmp-col, .mini, .wb) { transform-origin: 50% 100%; animation: tiltIn linear both; animation-timeline: view(); animation-range: cover 0% cover 50vh; }
}
@keyframes tiltIn { from { rotate: x 7deg; scale: 0.96; } }
@keyframes tickPop { 40% { transform: scale(1.32); color: color-mix(in srgb, var(--mint) 70%, var(--primary)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mint) 90%, transparent)); } }
@keyframes goalLight { 40% { transform: translateY(-2px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 70%, var(--primary)), 0 8px 16px -8px color-mix(in srgb, var(--primary) 55%, transparent); } }