/* home-sections.css: the homepage sections after the hero that are not the goals (#goal): #meet,
   #tried (which also carries how each answer is made, and the #how anchor), Dr. Kahal's note,
   #days, #team, #faq and #get-app (landing-v3).
   The Home card and visit prep replicas inside #days live in home-sections-days.css, with the
   breakpoints. Linked in the body before #tried, so it never holds up the hero.
   Every rule draws the finished frame. The rise-ins, dot pops, ladder ticks and the closing avatar
   play once through HomePlay (home-sections.js adds .hs-in when a root starts);
   their first-frame rules sit under .hp-motion, so with no script or with reduced motion every word
   is simply there. Upright Figtree only. */

/* #meet, right after the hero: one card in two halves. The statement sits on the hero's green, the
   only ground the yellow line is used on (yellow text is 1.6:1 on white), and the three steps sit on
   the canvas beside it, or under it at 1020 px and below. */
#meet .mt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-radius: 30px; overflow: hidden; background: var(--canvas); }
#meet .mt-head { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: clamp(40px, 5vw, 72px) clamp(28px, 4.5vw, 64px); color: var(--onDark); background: radial-gradient(620px 320px at 88% 0%, color-mix(in srgb, var(--mint) 20%, transparent), transparent 62%), linear-gradient(160deg, var(--hero-top), var(--hero-bottom)); }
#meet .mt-k { display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px 7px 12px; border-radius: var(--pill); background: var(--glass6); border: 1px solid var(--glass12); color: var(--mintL); font-size: 14px; font-weight: 600; }
#meet .mt-k i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 18%, transparent); }
#meet .mt-t { font-size: clamp(38px, 4.2vw, 58px); line-height: 1.02; font-weight: 800; letter-spacing: -0.034em; color: var(--onDark); text-wrap: balance; }
#meet .mt-t .em { display: block; margin-top: 4px; }
#meet .mt-p { max-width: 22em; font-size: clamp(17.5px, 1.5vw, 20px); line-height: 1.55; color: var(--onDarkDim); text-wrap: pretty; }
.lp #meet .mt-a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--onDark); font-size: 16.5px; font-weight: 650; text-decoration: none; }
.lp #meet .mt-a:hover { color: var(--ember); }
#meet .mt-steps { display: flex; flex-direction: column; justify-content: center; padding: clamp(14px, 2.2vw, 30px) clamp(24px, 3.5vw, 52px); }
#meet .mt-steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
#meet .mt-steps li:first-child { border-top: 0; }
#meet .mt-n { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--ember); color: var(--ink); font-size: 18px; font-weight: 800; }
#meet .mt-steps h3 { margin-top: 9px; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25; font-weight: 750; letter-spacing: -0.012em; color: var(--ink); }
#meet .mt-steps p { margin-top: 10px; max-width: 34em; font-size: 17px; line-height: 1.62; color: var(--body); text-wrap: pretty; }
/* The example questions read as messages you could send: the app's own bubble, small. */
#meet .mt-qs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#meet .mt-steps q { quotes: none; padding: 8px 14px; border-radius: 18px 18px 4px 18px; background: var(--primary); color: var(--text-on-dark); font-size: 15px; line-height: 1.35; font-weight: 600; }
/* Once the steps are in the middle of the screen the questions light up one after another, once: each
   glows mint and lifts as the one before it settles, about 1.7 s in all. Until they play they wait
   a little dimmed; with no script or reduced motion they are simply there. */
.hp-motion #meet .mt-qs:not(.hp-done):not(.hs-in) q { opacity: 0.55; }
.hp-motion #meet .mt-qs.hs-in:not(.hp-done) q { animation: qSpot 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hp-motion #meet .mt-qs.hs-in:not(.hp-done) q:nth-child(2) { animation-delay: 420ms; }
.hp-motion #meet .mt-qs.hs-in:not(.hp-done) q:nth-child(3) { animation-delay: 840ms; }
@keyframes qSpot {
  0% { opacity: 0.55; }
  35% { opacity: 1; transform: translateY(-2px) scale(1.04); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 45%, transparent), 0 12px 24px -12px color-mix(in srgb, var(--primary) 85%, transparent); }
  100% { opacity: 1; }
}

/* #tried: each effort card pairs what people do now (the warm tile, the plain line, the bold one)
   with what Cura does instead, on mint: how an answer is made, split across the four cards (what
   you share, the reviewed library, the walk-through, the doctor). Each card settles as it arrives,
   as the other cards do, with Cura's half already there: held back until the card played, a steady
   scroll passed four cards with empty lower halves. */
#tried .sec-head .tm { display: block; }
#tried .fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
#tried .fx { display: flex; flex-direction: column; gap: 16px; padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-deep) 4%, transparent); }
#tried .fx-p { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px 14px; }
#tried .tc-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--ember-soft); color: var(--ink); }
#tried .fx h3 { font-size: 21px; line-height: 1.2; font-weight: 750; letter-spacing: -0.012em; color: var(--ink); }
#tried .fx-p p { grid-column: 1 / -1; font-size: 16px; line-height: 1.5; color: var(--body); }
/* The plain line, then the bold one on its own row: the same two beats in every card. */
#tried .fx-p p b { display: block; margin-top: 2px; font-weight: 650; color: var(--ink); }
#tried .fx-a { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px 18px; border-radius: 18px; background: var(--mint-light); }
#tried .fx-k { display: flex; align-items: center; gap: 9px; font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--primary); }
#tried .fx-a > p:not(.fx-k, .fx-tag) { font-size: 15px; line-height: 1.55; color: var(--body); }
#tried .fx-ctx { display: flex; flex-wrap: wrap; gap: 6px; }
#tried .fx-ctx li { padding: 4px 10px; border-radius: var(--pill); background: var(--white); border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line)); font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); }
#tried .fx-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--pill); background: var(--white); font-size: 13.5px; line-height: 1.3; font-weight: 650; color: var(--primary); }
#tried .fx-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#tried .fx-flow .st { padding: 6px 12px; border-radius: var(--pill); background: var(--white); font-size: 13.5px; line-height: 1.3; font-weight: 650; color: var(--ink); }
#tried .fx-flow .ar { display: grid; place-items: center; color: var(--primary); }
/* Once Cura's half is in the middle of the screen it lights up, quickly and once: the Cura mark
   pops, the chips (what you share) and the walk-through steps glow mint in turn, then the tag. Two
   cards side by side reach the middle together, so the right one waits half a second and they play
   one after the other. Every word is there from the first frame; nothing waits on it. */
.hp-motion #tried .fx-a.hs-in:not(.hp-done) .fx-k .ic { animation: fxPop 520ms cubic-bezier(0.2, 0.9, 0.3, 1.3) var(--fx-base, 0ms) both; }
.hp-motion #tried .fx-a.hs-in:not(.hp-done) :is(.fx-ctx li, .fx-flow .st, .fx-tag) { animation: fxLight 620ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--fx-base, 0ms) + var(--fx-d, 0ms)) both; }
@media (min-width: 901px) { #tried .fx:nth-child(even) .fx-a { --fx-base: 500ms; } }
#tried .fx-ctx li:nth-child(1), #tried .fx-flow .st:nth-child(1) { --fx-d: 160ms; }
#tried .fx-ctx li:nth-child(2) { --fx-d: 250ms; }
#tried .fx-ctx li:nth-child(3) { --fx-d: 340ms; }
#tried .fx-ctx li:nth-child(4) { --fx-d: 430ms; }
#tried .fx-ctx li:nth-child(5), #tried .fx-flow .st:nth-child(3) { --fx-d: 520ms; }
#tried .fx-ctx li:nth-child(6) { --fx-d: 610ms; }
#tried .fx-flow .st:nth-child(5) { --fx-d: 880ms; }
#tried .fx-tag { --fx-d: 820ms; }
@keyframes fxPop { 40% { transform: scale(1.2); } }
@keyframes fxLight { 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); } }

/* Dr. Kahal's note. Set upright, like production's quote and the reference. */
.qt-in { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 60px; max-width: 1080px; margin: 0 auto; }
.qt-ph { position: relative; flex: 0 0 auto; width: 176px; height: 206px; border-radius: 30px; overflow: hidden; background: var(--hero-top); box-shadow: 0 34px 60px -30px color-mix(in srgb, var(--ink-deep) 55%, transparent); }
.qt-ph picture, #team .tm-ph picture { display: block; height: 100%; }
.qt-ph img, .tm-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.qt-sec .qt-head { margin-bottom: clamp(22px, 3vw, 40px); }
.qt-tx { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.qt-mk { color: var(--mint); }
.qt-q { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.36; font-weight: 500; font-style: normal; letter-spacing: -0.016em; color: var(--ink); text-wrap: pretty; }
/* Her bold line carries the yellow underline, drawn as a background so it can draw itself: once the
   line is in the middle of the screen the underline runs through the sentence like a pen, line by
   line, as the words turn green with a brief warm glow (about 1.3 s, once). The line keeps its size,
   so nothing around it moves. With no script or reduced motion it is simply underlined. */
.qt-q strong { font-weight: 700; color: var(--primary); padding-bottom: 0.1em; background: linear-gradient(var(--ember), var(--ember)) 0 100% / 100% 0.12em no-repeat; }
.hp-motion .qt-q strong:not(.hp-done):not(.hs-in) { color: var(--ink); background-size: 0% 0.12em; }
.hp-motion .qt-q strong.hs-in:not(.hp-done) { animation: qtMark 1300ms cubic-bezier(0.45, 0, 0.25, 1) both; }
@keyframes qtMark {
  0% { color: var(--ink); background-size: 0% 0.12em; }
  55% { text-shadow: 0 0 14px color-mix(in srgb, var(--ember) 55%, transparent); }
  100% { color: var(--primary); background-size: 100% 0.12em; }
}
.qt-by { font-size: 15.5px; line-height: 1.5; color: var(--body); }
.qt-by b { color: var(--ink); font-weight: 700; }

/* A photo that fails to load shows a plain silhouette (home-sections.js adds .hs-noimg). */
.qt-ph .fallback, .tm-ph .fallback { display: none; position: absolute; inset: 0; place-items: end center; color: var(--sage); }
.qt-ph .fallback svg, .tm-ph .fallback svg { width: 82%; height: 82%; }
.qt-ph.hs-noimg picture, #team .tm-ph.hs-noimg picture { display: none; }
.qt-ph.hs-noimg .fallback, #team .tm-ph.hs-noimg .fallback { display: grid; }

/* #days: the three moments. The cards inside are in home-sections-days.css. */
#days .days-note { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--pill); background: var(--white); border: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--body); text-align: left; }
#days .days-note b { color: var(--ink); font-weight: 650; }
#days .days-note .ic { color: var(--primary); }
#days .days-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
#days .dc { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 12px; }
#days .dc-k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--primary); }
#days .dc-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
#days .dc h3 { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
#days .dc-p { font-size: 16.5px; line-height: 1.55; color: var(--body); }
#days .dc-n { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--cap); }
#days .dc-vis { margin-top: 8px; display: flex; flex-direction: column; }
#days .dc-vis > .arc, #days .dc-vis > .prep { flex: 1 1 auto; }

/* #team */
#team .team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#team .tm-c { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 26px; }
/* Three across, each portrait is square from the top of the photo (400 x 460): the head, neck and
   collar show, and only plain shirt below is left out, which keeps the cards within the screen. */
#team .tm-ph { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--hero-top); }
#team .tm-ph img { object-position: 50% 16%; }
#team .tm-b { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 26px; }
#team .tm-b h3 { font-size: 21px; line-height: 1.2; font-weight: 750; letter-spacing: -0.01em; color: var(--ink); }
#team .tm-r { font-size: 14px; font-weight: 650; color: var(--primary); }
#team .tm-p { margin-top: 4px; font-size: 15.5px; line-height: 1.6; color: var(--body); }
#team .tm-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 11px; border-radius: var(--pill); background: var(--sel); font-size: 13px; font-weight: 650; color: var(--primary); }

/* #faq: native details, so every answer opens with no script. */
#faq .fq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
#faq .fq { background: var(--white); border: 1px solid var(--line); border-radius: 18px; transition: border-color 160ms ease; }
#faq .fq[open] { border-color: color-mix(in srgb, var(--primary) 16%, var(--line)); }
#faq .fq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 16px 22px; border-radius: 18px; font-size: 18px; line-height: 1.35; font-weight: 650; color: var(--ink); }
#faq .fq summary::-webkit-details-marker { display: none; }
#faq .fq-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; }
#faq .fq[open] .fq-pm { transform: rotate(45deg); }
#faq .fq-a { padding: 0 22px 22px; max-width: 46em; font-size: 16.5px; line-height: 1.65; color: var(--body); }
#faq .fq-rev { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; font-size: 14px; color: var(--cap); }
#faq .fq-rev .ic { color: var(--primary); }

/* #get-app: the closing card. build.py rewrites the store badges between its markers. */
.fin { padding: 0 0 clamp(64px, 8vw, 112px); }
#get-app .fin-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; overflow: hidden; padding: clamp(52px, 7vw, 100px) clamp(24px, 5vw, 80px); border-radius: clamp(28px, 4vw, 44px); color: var(--onDark); text-align: center; background: radial-gradient(820px 420px at 50% 0%, color-mix(in srgb, var(--mint) 22%, transparent), transparent 66%), linear-gradient(170deg, var(--hero-top), var(--hero-bottom)); }
#get-app .fin-c .h2 { color: var(--onDark); }
#get-app .fin-c .h2 .em { display: block; }
#get-app .fin-c .lede { color: var(--onDarkDim); }
#get-app .store-row { justify-content: center; }
#get-app .cta-note { font-size: 15px; line-height: 1.4; color: var(--onDarkDim); }
#get-app .fin-mail { font-size: 15px; line-height: 1.5; color: var(--onDarkDim); }
.lp #get-app .fin-mail a { color: var(--onDark); font-weight: 650; text-underline-offset: 3px; }
.lp #get-app .fin-mail a:hover { color: var(--ember); }

/* Motion, first frames and plays. Each card or block is its own HomePlay root (data-hp="card"). */
/* The first frame stays readable: a card still below the screen is dimmed and lowered, never
   blank. It settles as it arrives (.hs-near, home-sections.js, which also sets the --hs-d cascade
   for cards arriving together), before its own film starts (.hs-in). */
.hp-motion .hs-rise:not(.hp-done):not(.hs-near):not(.hs-in) { opacity: 0.45; transform: translateY(14px); }
.hp-motion .hs-rise:is(.hs-near, .hs-in):not(.hp-done) { animation: hsSettle 620ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--hs-d, 0ms) both; }
@keyframes hsSettle { from { opacity: 0.45; transform: translateY(14px); } }
/* The closing avatar pops in, floats once, and rests. */
.hp-motion #get-app .fin-c:not(.hp-done):not(.hs-in) .fin-av { opacity: 0; }
.hp-motion #get-app .fin-c.hs-in:not(.hp-done) .fin-av { animation: popIn 520ms cubic-bezier(0.2, 0.75, 0.25, 1) both, hsFloat 4200ms ease-in-out 600ms forwards; }
@keyframes hsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }