/* Gabriel Free, the second consumer homepage, on the V3 Elemental Investor system.
   Layers on ../elemental-home-v4-investor/style.css (tokens, type, buttons, header, hero, plan cards, FAQ, footer),
   ../v3-shared/v3.css (inner-page components) and ../shared/free.css (the Talk to Gabriel sheet).
   Dark first, a light chapter after each dark one, one idea and one visual per chapter, and the layout changes
   from chapter to chapter so no two read alike. */

/* Lines break by sentence, never mid-sentence; body copy avoids one-word last lines */
.fr-ln{display:block}
@media (max-width:760px){.fr-lm{display:block}}
main p,main li,main h3,main dd,main dt{text-wrap:pretty}

/* ---------- 1. Hero: the listening profile ---------- */
.fr-hero{background:var(--abyss)}
.fr-hero .hero-bg img{object-position:100% 36%;filter:brightness(.92) saturate(.92)}
.fr-hero .hero-shade{background:
  linear-gradient(180deg,rgba(12,16,18,.55) 0%,rgba(12,16,18,.14) 11%,rgba(12,16,18,0) 20%),
  linear-gradient(90deg,rgba(13,17,19,.88) 0%,rgba(13,17,19,.74) 28%,rgba(13,17,19,.34) 50%,rgba(13,17,19,.04) 68%,rgba(13,17,19,0) 100%),
  linear-gradient(0deg,rgba(17,21,24,.72) 0%,rgba(17,21,24,0) 42%)}
.fr-hero .hero-copy{max-width:640px}
.fr-hero .lead{max-width:28em}
.fr-hero-note{margin-top:-6px;font-size:var(--fs-15);line-height:1.6;color:rgba(240,243,241,.82);max-width:34em}
.fr-hero-note b{font-weight:500;color:var(--pearl)}
/* Real requests you can tap: each opens the sheet with the question filled in */
.fr-tries{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;max-width:40em}
.fr-tries a{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:999px;border:1px solid rgba(240,243,241,.24);background:rgba(12,16,18,.34);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--pearl);font-size:var(--fs-15);text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s}
.fr-tries a:hover{border-color:rgba(240,243,241,.5);background:rgba(12,16,18,.5)}
@media (max-width:760px){
  .fr-hero{display:block;min-height:0}
  .fr-hero .hero-bg{position:relative;inset:auto;height:min(58svh,520px);min-height:360px;overflow:hidden}
  .fr-hero .hero-bg img{object-position:58% 14%;-webkit-mask-image:linear-gradient(180deg,#000 64%,rgba(0,0,0,.45) 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 64%,rgba(0,0,0,.45) 84%,transparent 100%)}
  .fr-hero .hero-shade{background:linear-gradient(180deg,rgba(12,16,18,.5) 0%,rgba(12,16,18,0) 16%)}
  .fr-hero .hero-in{margin-top:clamp(-84px,-9svh,-56px);padding-top:0;padding-bottom:44px}
  .fr-hero .hero-copy{gap:18px}
  /* each sentence holds one line on phones: "Try Gabriel for free." measures 7.69x its font size, so the size
     follows the column (44px from about 390, 42px at 375, 35px at 320) and no word drops to a line of its own */
  .fr-hero .h1{font-size:clamp(32px,calc((100vw - 2 * var(--gutter)) / 7.96),44px)}
  .fr-hero-note{margin-top:0}
  /* on this page the invite is a real second button on phones, not the V3 underlined link */
  .fr-hero .actions{gap:10px}
  .fr-hero .actions .btn-glass{align-self:stretch;height:54px;padding:0 24px;border-color:var(--glass-edge);background:var(--glass);text-decoration:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  /* phones: the buttons come before the example requests, so the main button stays in the first screen */
  .fr-hero .actions{order:2}
  .fr-hero .fr-tries{order:3;gap:6px}
  .fr-hero .fr-hero-note{order:4}
  .fr-tries a{min-height:40px;padding:0 12px;font-size:var(--fs-13)}
}

/* ---------- 2. Proof: four short facts on one quiet line under the hero ---------- */
.fr-trust{background:var(--abyss);color:var(--pearl);border-bottom:1px solid rgba(240,243,241,.06)}
.fr-trust-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 32px;margin:0;padding:28px 0;list-style:none}
.fr-trust-row li{position:relative;padding-left:26px;font-size:var(--fs-15);line-height:1.4;color:var(--silver)}
.fr-trust-row li::before{content:"";position:absolute;left:3px;top:.42em;width:10px;height:6px;border-left:1.5px solid var(--jade);border-bottom:1.5px solid var(--jade);transform:rotate(-45deg)}
@media (max-width:960px){.fr-trust-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;padding:26px 0}}
@media (max-width:420px){.fr-trust-row li{font-size:var(--fs-13)}}

/* ---------- 3. The one contrast ---------- */
.fr-contrast{padding-block:clamp(96px,11vw,168px)}
.fr-contrast-in{gap:30px;max-width:1140px}
.fr-statement-sub{max-width:44ch;font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.01em;color:var(--ash);text-wrap:balance} /* Tyler 10/7: short statement, the lens on its own line */
.fr-statement .nw{white-space:nowrap}
.fr-statement{margin:0;font-size:clamp(30px,3.9vw,54px);font-weight:300;letter-spacing:-.035em;line-height:1.14;color:var(--ink);text-wrap:balance}
.fr-statement .w{transition:opacity .25s linear}

/* ---------- 4. It starts from what you share: copy left, the app right ---------- */
.fr-ask-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,7vw,128px);align-items:center}
.fr-ask-copy{gap:24px}
.fr-connect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin-top:14px}
.fr-connect li{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.fr-ci{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(147,187,169,.1);color:var(--jade)}
.fr-ci svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fr-ct{display:flex;flex-direction:column;gap:4px;min-width:0;padding-top:1px}
.fr-ct b{font-size:var(--fs-15);font-weight:500;line-height:1.3;color:var(--pearl)}
.fr-ct small{font-size:var(--fs-13);line-height:1.45;color:var(--silver)}
.fr-ask-vis{display:flex;flex-direction:column;align-items:center;gap:20px;margin:0}
.fr-dev{width:min(100%,318px)}
.fr-dev img{height:auto}
@media (max-width:960px){.fr-ask-grid{grid-template-columns:1fr}.fr-ask-vis{order:2}}
@media (max-width:520px){
  .fr-connect{grid-template-columns:1fr;margin-top:8px}
  .fr-connect li:last-child{border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  .fr-ask-vis{align-items:stretch}
  .fr-dev{width:min(86vw,340px);max-height:520px;align-self:center;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
}

/* ---------- 5. It gets it done: Tyler picked B (the ledger), 10/4, merged with the lock-screen texts from the old 4b ----------
   The head pairs the promise with the three texts Gabriel sends first: the lock screen sits beside it on desktop, centred
   against the copy, and under it on phones. The ledger follows, full width, then the partner-pharmacies note. */
.fr-do-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(40px,7vw,128px);align-items:center}
.fr-do-head .fr-notes{justify-self:end;width:100%;max-width:520px}
@media (max-width:960px){.fr-do-head{grid-template-columns:minmax(0,1fr);row-gap:clamp(36px,6vw,48px)}.fr-do-head .fr-notes{justify-self:start;max-width:560px}}
/* desktop: the lock screen leads on the left, so this chapter doesn't repeat the copy-left layout of the ones around it */
@media (min-width:961px){.fr-do-head{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}.fr-do-head .fr-notes{order:-1;justify-self:start}}
/* the lock screen: three texts on the slate photo (.g-b), the way they arrive */
.fr-notes{position:relative;margin:0;overflow:hidden;border-radius:18px;background-color:var(--deep);background-position:center;background-size:cover;container-type:inline-size;box-shadow:inset 0 0 0 1px rgba(240,243,241,.08),0 40px 80px -40px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:clamp(28px,9cqi,64px);padding:clamp(40px,12cqi,88px) clamp(16px,6cqi,36px) clamp(32px,9cqi,64px)}
.fr-lock{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--pearl)}
.fr-lock-t{font-size:clamp(56px,17cqi,96px);font-weight:300;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fr-lock-d{font-size:var(--fs-15);color:var(--silver)}
.fr-note-list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.fr-note{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 14px 14px;border-radius:18px;background:rgba(18,23,26,.66);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:inset 0 0 0 1px rgba(240,243,241,.14);color:var(--pearl)}
.fr-note-orb{flex:none;width:36px;height:36px;border-radius:12px;background:var(--deep);display:grid;place-items:center;overflow:hidden}
.fr-note-orb img{width:32px;height:32px}
.fr-note-b{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.fr-note-top{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-13);color:var(--silver)}
.fr-note-top b{font-weight:500;color:var(--pearl)}
.fr-note-top i{font-style:normal;color:var(--dim)}
.fr-note-t{font-size:var(--fs-15);line-height:1.4;color:var(--pearl)}
.chalk .fr-notes{box-shadow:0 30px 60px -32px rgba(17,21,24,.6)}
@media (max-width:520px){.fr-notes{gap:28px;padding:40px 14px 30px}}
/* the mono lists: categories and lab types, dotted on a line, two columns on phones */
.do-list{display:flex;flex-wrap:wrap;gap:10px 29px;clip-path:inset(-6px -6px -6px 0);margin:0;padding:0;list-style:none;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;line-height:1.5;text-transform:uppercase;color:var(--ink)}
.do-list li{position:relative;white-space:nowrap}
/* the dot sits in the gap before each item; clip-path hides the one that lands at the start of a line, so no line ends on a dot */
.do-list li+li::before{content:"";position:absolute;left:-16px;top:calc(.75em - 1.5px);width:3px;height:3px;border-radius:50%;background:var(--jade)}
@media (max-width:760px){
  .do-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .do-list li{white-space:normal}
  .do-list li+li::before{display:none}
  .do-list li.do-wide{grid-column:1/-1}
}
/* "Coming soon" beside Testosterone until a partner prescribes it */
.fr-rx-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;border:1px solid rgba(54,94,76,.35);background:rgba(54,94,76,.07);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--emerald);vertical-align:1px;white-space:nowrap}
/* the ledger: rows of type on hairlines that run a little past the text, one key fact each; each row's rule draws
   in as it rises (the V3 reveal), and a faint emerald tint follows the pointer. It starts a little further down on
   desktop, so the lock screen's shadow clears its first rule. */
.ld{--bleed:min(24px,var(--gutter));margin:clamp(48px,6.4vw,96px) calc(-1 * var(--bleed)) 0;border-bottom:1px solid var(--rule)}
.ld-row{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(250px,.74fr);column-gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(32px,3.4vw,48px) var(--bleed)}
.ld-row::before{content:"";position:absolute;inset:0;z-index:-1;background-color:rgba(54,94,76,0);transition:background-color .35s var(--ease-out)}
.ld-row::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);transform-origin:0 50%}
.ld-row.rv::after{animation:ruleDraw .9s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms)}
@media (hover:hover){.ld-row:hover::before{background-color:rgba(54,94,76,.04)}}
.ld-n{font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;line-height:1;color:var(--emerald);font-variant-numeric:tabular-nums}
.ld-name h3{margin-top:18px;font-size:clamp(30px,2.8vw,40px);font-weight:300;letter-spacing:-.035em;line-height:1.06;color:var(--ink);text-wrap:balance}
.ld-body{display:flex;flex-direction:column;gap:18px;padding-top:30px}
.ld-body p{font-size:var(--fs-17);line-height:1.55;color:var(--ash);max-width:30em}
.ld-side{display:flex;flex-direction:column;align-items:flex-end;gap:24px;padding-top:30px;text-align:right}
.ld-fact{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ld-v{display:flex;align-items:baseline;gap:8px;font-size:clamp(38px,3.4vw,48px);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--emerald);font-variant-numeric:tabular-nums;white-space:nowrap}
.ld-v small{font-size:var(--fs-15);letter-spacing:0;color:var(--ash)}
.ld-c{font-size:var(--fs-15);line-height:1.4;color:var(--ash)}
/* the closer: Gabriel isn't tied to one pharmacy. A paper band on the ledger's three columns (title | words | the ask), so it reads as
   its own statement, not a fourth row. */
.ld-src{--bleed:min(24px,var(--gutter));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(250px,.74fr);column-gap:clamp(28px,4vw,64px);align-items:start;margin:clamp(28px,3vw,40px) calc(-1 * var(--bleed)) 0;padding:clamp(28px,3.4vw,44px) var(--bleed);border-radius:18px;background:var(--paper);border:1px solid rgba(200,206,206,.8)}
.ld-src .arrow-link{justify-self:end;color:var(--emerald);font-weight:500}
@media (max-width:1023px){.ld-src{grid-template-columns:minmax(0,1fr);row-gap:14px}.ld-src .arrow-link{justify-self:start}}
@media (max-width:760px){.ld-src{border-radius:0;border-inline:0}}
.ld-src-t{font-size:clamp(26px,2.4vw,34px);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--ink);text-wrap:balance}
.ld-src-b{display:flex;flex-direction:column;gap:12px}
.ld-src-b p{font-size:var(--fs-17);line-height:1.55;color:var(--ash);max-width:36em}
.ld-src-b .ld-src-fine{font-size:var(--fs-13);line-height:1.5}
/* the safety net sits right under the button; each row ends on one action */
.ld-assure{margin-top:-12px;font-size:var(--fs-13);line-height:1.4;color:var(--ash)}
.ld-side .arrow-link{color:var(--emerald);font-weight:500}
.ld-side .arrow-link span{transition:transform .2s var(--ease-out)}
.ld-side .arrow-link:hover span{transform:translateX(3px)}
@media (max-width:1023px) and (min-width:761px){
  .ld-row{grid-template-columns:minmax(0,1fr) auto;row-gap:16px}
  .ld-name{grid-column:1;grid-row:1}
  .ld-body{grid-column:1;grid-row:2;padding-top:0}
  .ld-side{grid-column:2;grid-row:1/3}
}
@media (max-width:760px){
  .ld-row{grid-template-columns:minmax(0,1fr);row-gap:18px;padding-block:32px 36px}
  .ld-name h3{margin-top:14px;font-size:26px}
  .ld-v{font-size:32px}
  .ld-body{padding-top:0}
  .ld-side{align-items:stretch;gap:22px;padding-top:4px;text-align:left}
  .ld-fact{align-items:flex-start}
  .ld-side .btn{width:100%;height:54px}
  .ld-assure{margin-top:-10px}
}
@media (prefers-reduced-motion:reduce){.ld-row.rv::after{animation:none}}

/* ---------- 5b. It books your care: a photo beside the promise, then three plain lists ---------- */
.fr-book-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,7vw,128px);align-items:center}
.fr-book-photo{margin:0;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--obsidian)}
.fr-book-photo img{width:100%;height:100%;object-fit:cover}
.fr-book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(56px,6vw,88px)}
.fr-book-k{margin:0 0 14px;font-family:var(--mono);font-size:var(--fs-12);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.fr-book-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.fr-book-list li{padding:13px 0;border-bottom:1px solid var(--line);font-size:var(--fs-17);line-height:1.35;color:var(--pearl)}
.fr-mark{margin-left:2px;color:var(--jade)}
.fr-book-steps{display:flex;flex-direction:column;gap:18px;margin:0;padding:18px 0 0;list-style:none;counter-reset:bk;border-top:1px solid var(--line)}
.fr-book-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;row-gap:2px}
.fr-book-steps li::before{grid-row:1/3;counter-increment:bk;content:counter(bk,decimal-leading-zero);padding-top:4px;font-family:var(--mono);font-weight:500;font-size:var(--fs-12);color:var(--jade)}
.fr-book-steps b{font-size:var(--fs-17);font-weight:500;color:var(--pearl)}
.fr-book-steps span{font-size:var(--fs-15);line-height:1.5;color:var(--silver)}
.fr-book-fine{margin-top:32px}
.fr-book-proof{display:flex;flex-direction:column;margin:10px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.fr-book-proof li{display:flex;flex-direction:column;gap:3px;padding:14px 0;border-bottom:1px solid var(--line)}
.fr-book-proof b{font-size:var(--fs-17);font-weight:500;color:var(--pearl)}
.fr-book-proof span{font-size:var(--fs-15);line-height:1.5;color:var(--silver);max-width:34em}
@media (max-width:960px){.fr-book-top{grid-template-columns:1fr}.fr-book-photo{max-width:620px}.fr-book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fr-book-grid .fr-book-col:last-child{grid-column:1/-1}}
@media (max-width:560px){.fr-book-grid{grid-template-columns:1fr}.fr-book-list li{font-size:var(--fs-15);padding:12px 0}}

/* ---------- 7. It fights for your money: two columns on the band, one number each ---------- */
.fr-money-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(48px,5vw,72px);border-top:1px solid var(--rule)}
.fr-money-col{display:flex;flex-direction:column;gap:12px;padding:clamp(28px,3vw,40px) clamp(24px,4vw,64px) 0 0}
.fr-money-col+.fr-money-col{padding-left:clamp(24px,4vw,64px);padding-right:0;border-left:1px solid var(--rule)}
.fr-money-col h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.fr-money-col>p{font-size:var(--fs-17);color:var(--ash);max-width:30em}
.fr-save,.fr-split{margin:auto 0 0;padding-top:28px}
.fr-save-l,.fr-split-l{margin-top:12px;font-size:var(--fs-15);line-height:1.5;color:var(--ash)}
/* Both halves use one device: a full-width bar, the number at the same display size, a short label beside it */
.fr-save-bar,.fr-split-bar{display:flex;height:clamp(56px,5vw,72px);border-radius:12px;overflow:hidden;background:var(--soft)}
.fr-save-you,.fr-split-you{display:flex;align-items:center;gap:6px;padding:0 20px;background:var(--emerald);color:var(--pearl);font-size:var(--fs-15)}
.fr-save-you{flex:1}
.fr-split-you{flex:0 0 75%}
.fr-slot,.fr-split-you b{font-size:clamp(26px,2.4vw,34px);font-weight:300;letter-spacing:-.03em}
/* The savings figure is Tyler's ballpark average (9/29): customers who switched insurance through Gabriel save
   about $300 a month. Replace it with the computed W9 figure when that exists. */
.fr-split-g{flex:1;display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:var(--fs-13);color:var(--ink);text-align:center}
@media (max-width:860px){.fr-money-grid{grid-template-columns:1fr}.fr-money-col,.fr-money-col+.fr-money-col{padding:28px 0 32px;border-left:0}.fr-money-col+.fr-money-col{border-top:1px solid var(--rule)}}
/* Side by side, the two columns share rows (subgrid): the bars line up whatever the text around them wraps to */
@media (min-width:861px){
  .fr-money-grid{grid-template-rows:repeat(3,auto)}
  .fr-money-col{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;align-content:start}
  .fr-save,.fr-split{margin:0;padding-top:16px}
}

/* ---------- 8. How is it free? One centered answer, the receipt ---------- */
.fr-model-head{max-width:760px}
@media (max-width:760px){.fr-model-head.center{align-items:flex-start;text-align:left;margin-inline:0}.fr-model-head .lead{margin-inline:0}}
.fr-receipt{width:min(100%,640px);margin:clamp(48px,5vw,72px) auto 0}
.fr-receipt-in{padding:32px 36px 28px;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 44px 90px -40px rgba(0,0,0,.9)}
.fr-r-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px dashed var(--rule);font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.fr-r-head span:first-child{color:var(--ink)}
.fr-r-rows{margin:0}
.fr-r-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid rgba(200,206,206,.6)}
.fr-r-rows dt{font-size:var(--fs-15);line-height:1.4;color:var(--ink)}
.fr-r-rows dd{margin:0;font-size:var(--fs-15);font-weight:500;color:var(--ink);text-align:right;white-space:nowrap}
.fr-r-never dd{color:var(--emerald)}
.fr-r-foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:18px;margin-top:-1px;border-top:1px dashed var(--rule);font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}
.fr-r-foot b{font-family:var(--sans);font-size:var(--fs-h3);font-weight:300;letter-spacing:-.03em;text-transform:none;color:var(--ink)}
.fr-r-note{margin-top:18px;padding-top:16px;border-top:1px solid rgba(200,206,206,.6);font-size:var(--fs-13);line-height:1.6;color:var(--ash)}
.fr-r-note a{color:var(--ink);text-underline-offset:3px;white-space:nowrap}
@media (max-width:520px){.fr-receipt-in{padding:24px 20px 20px}.fr-r-rows div{flex-direction:column;gap:2px}.fr-r-rows dd{text-align:left}}

/* ---------- 9. The ladder: three rungs, brushed steel; Free leads ---------- */
.fr-rungs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(56px,6vw,88px)}
.fr-rung .pl-main{flex:1;padding-bottom:26px}
.fr-rung .pl-btn{margin-top:auto}
.fr-rung .pl-price small{margin-right:2px;font-size:var(--fs-15);color:var(--ash)}
.fr-rung-lead{border-color:var(--ink);box-shadow:0 30px 60px -40px rgba(17,21,24,.55)}
.fr-rung-line{font-size:var(--fs-15);line-height:1.5;color:var(--ink);min-height:4.5em}
.fr-rung-list{display:flex;flex-direction:column;gap:7px;margin:2px 0 18px;padding:14px 0 0;border-top:1px solid var(--rule);list-style:none}
.fr-rung-list li{position:relative;padding-left:24px;font-size:var(--fs-15);line-height:1.45;color:var(--ash)}
.fr-rung-list li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:1.5px solid var(--emerald);border-bottom:1.5px solid var(--emerald);transform:rotate(-45deg)}
.fr-crown-free{--tint:linear-gradient(110deg,#1a2023d6,#4b565a80 55%,#1a2023cc)}
.fr-crown-free::before{filter:saturate(0) contrast(1.2) brightness(.6)}
.fr-crown-plus{color:#1f2526;--tint:linear-gradient(110deg,#eef1efd9,#c9d0cd99 50%,#f3f5f4d9)}
.fr-crown-plus::before{filter:saturate(0) contrast(.9) brightness(1.35)}
.fr-crown-plus .metal-light{opacity:.5}
/* Card finishes, light to dark as the plans go up (Tyler 2026-10-11, as on /plus): pearl (Ask Gabriel), silver (Core,
   .fr-crown-plus above), graphite with jade (Plus). Emerald, Sapphire and Onyx are one line under the cards (.tier-budget). */
.fr-crown-pearl{color:#1f2526;--tint:linear-gradient(110deg,#fbfcfbeb,#e9eeecc2 50%,#fdfdfdeb)}
.fr-crown-pearl::before{filter:saturate(0) contrast(.65) brightness(1.75)}
.fr-crown-pearl .metal-light{opacity:.3}
.fr-crown-pearl .pl-rec{background:rgba(17,21,24,.06);border-color:rgba(17,21,24,.18);color:#1f2526}
.fr-crown-jade{color:var(--pearl);--tint:linear-gradient(110deg,#0f1719eb,#34423f99 55%,#0f1719e0);border-top:3px solid #93bba9;box-shadow:0 0 0 1px rgba(240,243,241,.06)}
.fr-crown-jade::before{filter:saturate(0) contrast(1.3) brightness(.55)}
.fr-crown-jade .pl-mark,.fr-crown-jade .pl-cap{color:#93bba9}
.tier-budget{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;color:var(--ash);font-size:15px}
.fr-crown-budget{--tint:linear-gradient(90deg,#10342ad6 0,#10342ad6 33.34%,#10243ad6 33.34%,#10243ad6 66.67%,#070a0be0 66.67%,#070a0be0 100%)}
.fr-crown-budget .pl-name{font-size:clamp(14px,1.25vw,18px);letter-spacing:.12em;line-height:1.2}
.fr-ladder-fine{margin-top:28px}
@media (max-width:1100px) and (min-width:761px){.fr-rungs{grid-template-columns:1fr;max-width:600px}.fr-rung-line{min-height:0}}
@media (max-width:760px){.fr-rungs{grid-template-columns:1fr;gap:12px}.fr-rung-line{min-height:0}.fr-rung .pl-crown{height:104px}.fr-rung .pl-main{gap:10px}.fr-rung .pl-btn{height:54px}.fr-rung-list{margin-bottom:12px}.fr-rung .fr-crown-free{height:auto;min-height:104px}.fr-crown-free .pl-rec{position:static;align-self:flex-start;margin-bottom:14px}}

/* ---------- 10. FAQ: the paid home's layout, headline left and questions right (faq-grid) ---------- */
.fr-faq .faq-head{position:static;gap:18px}
@media (max-width:860px){.fr-faq .qa{margin-top:clamp(40px,4vw,56px)}}

/* ---------- 11. Close: the orb on its own dark stage, set on a light band ---------- */
.fr-close{padding-block:clamp(88px,10vw,152px)}
.fr-close-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,4vw,64px);min-height:clamp(480px,44vw,600px);padding:clamp(40px,6vw,88px);border-radius:18px;background:var(--abyss);color:var(--pearl);box-shadow:0 44px 90px -44px rgba(17,21,24,.7)}
.fr-close-orb{position:relative;order:2;justify-self:center;width:min(100%,440px);aspect-ratio:1;pointer-events:none}
.fr-close-orb img,.fr-close-orb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.fr-orb-live{opacity:0;transition:opacity .9s var(--ease-out)}
.fr-orb-live.on{opacity:1}
.fr-close-copy{gap:22px;max-width:560px}
.fr-close-line{max-width:11em}
.fr-close-card .fr-close-lead{color:var(--silver);max-width:28em}
.fr-close-actions{margin-top:4px}
.fr-close-note{font-size:var(--fs-15);line-height:1.9;color:var(--silver)}
.fr-token{display:inline-block;padding:2px 8px;border:1px dashed var(--line2);border-radius:8px;font-family:var(--mono);font-weight:500;font-size:var(--fs-13);letter-spacing:.02em;color:var(--pearl);background:rgba(240,243,241,.03)}
.fr-close-card :focus-visible{outline-color:var(--jade)}
@media (max-width:860px){
  .fr-close-card{grid-template-columns:1fr;min-height:0;padding:28px 22px 32px;gap:8px}
  .fr-close-orb{order:0;width:min(62vw,280px)}
  .fr-close-actions{flex-direction:column;align-items:stretch}
  .fr-close-actions .btn{height:54px}
}

/* ---------- Phones: the sticky bar ---------- */
@media (max-width:379px){.sticky-cta .sc-t span{display:none}}

/* The $0 card lists what Gabriel does; Plus and the budget memberships include all of it */
.fr-rung-inc{margin-top:2px;padding-top:14px;border-top:1px solid var(--rule);font-size:var(--fs-13);color:var(--ink)}
.fr-rung-list.fr-rung-more{border-top:0;padding-top:0}

/* ---------- Hero mockup (?hero=thread, Tyler 9/29): a real iPhone, texting, on the same sky ----------
   The photo hero stays the default. With ?hero=thread the portrait gives way to its own sky colors (sampled from the
   photo) and a real photograph of an iPhone 17 Pro held head-on in one hand (Pixeden, cut out with its own masks). The
   live iMessage screen (402 x 874 pt, light mode) sits on the photographed screen, between two layers from the same
   photo: the hand and phone underneath, the Dynamic Island, bezel edge and fingertips on top. page.js scales the stage
   and plays four texts. */
.fr-thread{display:none}
html[data-hero-variant=thread] .fr-hero .hero-bg,
html[data-hero-variant=thread] .fr-hero .fr-tries{display:none}
html[data-hero-variant=thread] .fr-hero{background:linear-gradient(180deg,#94a3b1 0%,#a7b2bd 24%,#b5bbc3 44%,#8f98a0 64%,#3b444b 86%,#111518 100%)}
html[data-hero-variant=thread] .fr-thread{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;margin:0}
/* the stage: the photo at 460 x 767 css px, scaled as one piece */
.fr-phone{--k:.9;position:relative;flex:none;width:calc(460px * var(--k));height:calc(767px * var(--k))}
.fr-stage{position:absolute;left:0;top:0;width:460px;height:767px;transform-origin:0 0;transform:scale(var(--k))}
.fr-iphone,.fr-iphone-top{position:absolute;left:0;top:0;max-width:none;pointer-events:none;user-select:none}
/* the hand and phone, cut from the photo's backdrop; the forearm runs on down and right, off the hero's edges, and
   fades out just above the hero's bottom (page.js sets --cut there, in this image's own px) */
.fr-iphone{left:-13.18px;top:37.53px;width:707px;height:1101.5px;-webkit-mask-image:linear-gradient(180deg,#000 calc(var(--cut,100%) - 120px),transparent var(--cut,100%));mask-image:linear-gradient(180deg,#000 calc(var(--cut,100%) - 120px),transparent var(--cut,100%))}
.fr-iphone-top{z-index:2;left:71.93px;top:45.8px;width:316px;height:676.5px}
/* ---- the iMessage screen, in iPhone points ---- */
.fr-ios{position:absolute;left:0;top:0;z-index:1;width:402px;height:874px;transform-origin:0 0;display:flex;flex-direction:column;overflow:hidden;border-radius:58px;background:#fff;color:#000;font-family:-apple-system,"SF Pro Text",BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
.fr-ios p{margin:0}
.ios-status{flex:none;display:flex;align-items:center;justify-content:space-between;height:56px;padding:8px 34px 0 52px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.ios-icons{display:flex;align-items:center;gap:6px;color:#000}
.ios-icons svg{fill:currentColor}
.ios-nav{flex:none;position:relative;display:flex;justify-content:center;height:106px}
.ios-back,.ios-video{position:absolute;top:10px;display:flex;align-items:center;justify-content:center;height:38px;border-radius:19px;background:rgba(120,120,128,.12);color:#000}
.ios-back{left:16px;gap:7px;padding:0 13px 0 11px;font-size:15px;font-weight:600}
.ios-video{right:16px;width:46px}
.ios-contact{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:2px}
.ios-contact img{width:58px;height:58px;border-radius:50%;background:#1b2023;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.ios-name{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:12px;background:rgba(120,120,128,.12);font-size:13px;font-weight:600;letter-spacing:-.01em}
.ios-name svg{color:#8e8e93}
/* a text longer than the screen scrolls up as it grows, the way iMessage does (page.js) */
.fr-thread-body{flex:1;display:grid;min-height:0;padding:2px 14px 8px;overflow:hidden;scroll-behavior:smooth}
/* once it has scrolled, older messages fade under the header, like iOS's scroll edge */
.fr-thread-body.edge{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px);mask-image:linear-gradient(180deg,transparent 0,#000 30px)}
.fr-scene{grid-area:1/1;display:flex;flex-direction:column;justify-content:flex-start;gap:3px;min-height:0}
.fr-scene[hidden]{display:none}
.fr-scene > *{flex-shrink:0}
/* on phones the view stops above the compose bar: this spacer (--hide, from page.js) lets a long text scroll its newest
   message up above that line */
.fr-scene::after{content:"";flex:none;height:var(--hide,0px)}
.ios-kind{align-self:center;font-size:13px;line-height:1.3;color:#8e8e93}
.fr-stamp{align-self:center;margin:6px 0 8px!important;font-size:13px;line-height:1.3;color:#8e8e93}
.fr-stamp b{font-weight:600}
/* chat text one step up from the default size (Settings > Display > Text Size), so it reads at hero scale */
.fr-b{position:relative;max-width:78%;padding:9px 15px 10px;border-radius:21px;font-size:20px;line-height:1.26;letter-spacing:-.015em;text-wrap:pretty}
.fr-b-me{align-self:flex-end;margin-right:5px!important;background:#0a84ff;color:#fff}
.fr-b-g{align-self:flex-start;margin:4px 0 0 5px!important;background:#e9e9eb;color:#000}
/* the bubble tails, drawn the way iMessage draws them */
.fr-b-me::before,.fr-b-g::before{content:"";position:absolute;bottom:0;width:20px;height:20px}
.fr-b-me::after,.fr-b-g::after{content:"";position:absolute;bottom:0;width:26px;height:20px;background:#fff}
.fr-b-me::before{right:-7px;background:#0a84ff;border-bottom-left-radius:16px 14px}
.fr-b-me::after{right:-26px;border-bottom-left-radius:10px}
.fr-b-g::before{left:-7px;background:#e9e9eb;border-bottom-right-radius:16px 14px}
.fr-b-g::after{left:-26px;border-bottom-right-radius:10px}
.ios-read{align-self:flex-end;margin:1px 8px 2px 0!important;font-size:13px;color:#8e8e93}
.fr-typing{align-self:flex-start;position:relative;display:flex;gap:5px;margin:4px 0 0 5px!important;padding:13px 15px;border-radius:20px;background:#e9e9eb}
.fr-typing::before{content:"";position:absolute;left:-3px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#e9e9eb}
.fr-typing::after{content:"";position:absolute;left:-9px;bottom:-7px;width:6px;height:6px;border-radius:50%;background:#e9e9eb}
.fr-typing i{width:9px;height:9px;border-radius:50%;background:#8e8e93;animation:frDot 1.1s infinite ease-in-out}
.fr-typing i:nth-child(2){animation-delay:.15s}
.fr-typing i:nth-child(3){animation-delay:.3s}
@keyframes frDot{0%,70%,100%{opacity:.4;transform:none}35%{opacity:1;transform:translateY(-2px)}}
/* a link Gabriel texts, the way iMessage shows it: the page's preview image, then the page's title and site. The image
   is the order page's own status card (Gabriel sends these links today; each order page needs that preview image) */
.fr-link{align-self:flex-start;display:flex;flex-direction:column;width:80%;margin:4px 0 0 5px;border-radius:18px;overflow:hidden;background:#e9e9eb;color:#000}
.fr-link-img{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;aspect-ratio:1.91/1;padding:14px 16px 15px;background:radial-gradient(120% 90% at 85% 0%,#4a5660 0%,rgba(74,86,96,0) 60%),linear-gradient(165deg,#2a3238 0%,#14191c 100%);color:#f0f3f1}
.fr-link-brand{position:absolute;left:16px;top:14px;font:500 10.5px/1 var(--sans);letter-spacing:.26em;color:rgba(240,243,241,.8)}
.fr-link-pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#6ee48d}
.fr-link-pill::before{content:"";width:8px;height:4.5px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.fr-link-t{margin-top:2px;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.fr-link-m{font-size:14.5px;color:rgba(240,243,241,.72)}
.fr-link-m s{margin-left:4px}
.fr-link-m b{font-weight:600;color:#6ee48d}
.fr-link-cap{display:flex;flex-direction:column;gap:1px;padding:9px 14px 11px}
.fr-link-cap b{font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.fr-link-cap span{font-size:13px;color:#8e8e93}
.ios-compose{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:6px 14px 0}
.ios-plus{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(120,120,128,.12);color:#6c6c70}
.ios-field{flex:1;display:flex;align-items:center;justify-content:space-between;height:38px;padding:0 13px 0 15px;border-radius:19px;border:1px solid #d1d1d6;font-size:17px;color:#c7c7cc}
.ios-field svg{color:#8e8e93}
.ios-home{flex:none;align-self:center;width:142px;height:5px;margin:17px 0 9px;border-radius:3px;background:#000}
/* ---- the example buttons under the phone ---- */
.fr-scene-tabs{position:relative;z-index:3;display:flex;gap:6px}
.fr-scene-tab{position:relative;overflow:hidden;height:34px;padding:0 13px;border-radius:999px;border:1px solid rgba(240,243,241,.24);background:rgba(12,16,18,.36);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:rgba(240,243,241,.78);font:500 13px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:color .2s,border-color .2s}
.fr-scene-tab:hover{color:var(--pearl)}
.fr-scene-tab.on{color:var(--pearl);border-color:rgba(240,243,241,.55)}
.fr-scene-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--jade);transform-origin:left;transform:scaleX(0)}
.fr-scene-tab.on::after{transform:scaleX(var(--p,0))}
/* the rule the compounded prices need, next to them */
.fr-thread-note{position:relative;z-index:3;max-width:34em;margin:0;font-size:12.5px;line-height:1.5;color:rgba(240,243,241,.66);text-align:center;text-wrap:balance}
/* ---- playing: each step appears in turn (reduced motion shows the whole text at once) ---- */
.fr-thread.play .fr-step:not(.in){display:none}
.fr-thread.play .fr-step.in{animation:frIn .36s var(--ease-out) both}
.fr-thread:not(.play) .fr-typing,.fr-thread:not(.play) .ios-read{display:none}
@keyframes frIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
/* ---- layout ---- */
@media (min-width:961px){
  html[data-hero-variant=thread] .fr-hero{align-items:center}
  html[data-hero-variant=thread] .fr-hero .hero-in{width:100%;align-items:center;gap:48px;padding-top:96px;padding-bottom:40px}
  html[data-hero-variant=thread] .fr-hero .hero-copy{flex:1}
  /* the phone sits in from the frame's right edge (Tyler 9/29: a little more centered), more on wider screens */
  html[data-hero-variant=thread] .fr-thread{margin-right:clamp(0px,calc((100vw - 960px) * .25),120px)}
}
@media (max-width:960px) and (min-width:761px){
  html[data-hero-variant=thread] .fr-hero .hero-in{flex-direction:column;align-items:flex-start;gap:36px}
  html[data-hero-variant=thread] .fr-thread{align-self:center}
}
@media (max-width:760px){
  html[data-hero-variant=thread] .fr-hero{display:block;min-height:0;background:linear-gradient(180deg,#8f9ba7 0%,#6f7a84 16%,#4a545c 34%,#262e33 58%,#111518 100%)}
  html[data-hero-variant=thread] .fr-hero .hero-in{margin-top:0;padding-top:calc(92px + env(safe-area-inset-top,0px));padding-bottom:36px;flex-direction:column;align-items:stretch;gap:18px}
  html[data-hero-variant=thread] .fr-hero .hero-copy{display:contents}
  html[data-hero-variant=thread] .fr-hero #fr-title{order:1}
  html[data-hero-variant=thread] .fr-hero .lead{order:2}
  html[data-hero-variant=thread] .fr-thread{order:3;align-items:stretch;gap:12px}
  html[data-hero-variant=thread] .fr-hero .actions{order:4}
  html[data-hero-variant=thread] .fr-hero .fr-hero-note{order:5}
  /* on phones the photo turns upright, grows so the screen reads, and shows its top; page.js sets the numbers */
  .fr-phone{width:auto;height:min(118vw,520px);margin:0 calc(-1 * var(--gutter));overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent 100%);mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent 100%)}
  .fr-scene-tabs{overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .fr-scene-tabs::-webkit-scrollbar{display:none}
  .fr-scene-tab{flex:none;height:32px;padding:0 11px;font-size:12.5px}
}
/* short phones: the buttons stay in the first screen, and the phone follows them */
@media (max-width:760px) and (max-height:760px){
  html[data-hero-variant=thread] .fr-hero .actions{order:3}
  html[data-hero-variant=thread] .fr-thread{order:4}
}

/* ---------- 5. Design review: three new concepts for "Skip the paperwork" (?do=bento|goal|chores, Tyler 10/4) ----------
   With no parameter the section is the current design above, unchanged: every rule below is scoped to html[data-do…]
   (set by the script at the top of the section) or styles markup that only shows with it. HTML, CSS and inline SVG only,
   no photos. When Tyler picks, the winner's rules stay, and the strip, the other concepts and these switches go. */
.do-v,.do-lead,.design-review{display:none}
html[data-do=bento] .do-bento,html[data-do=goal] .do-goal,html[data-do=chores] .do-chores{display:block}
html[data-do] .fr-do-head{display:block}
html[data-do] .fr-do-head .fr-notes,html[data-do] .fr-do .ld,html[data-do] .fr-do .ld-src,html[data-do] .fr-do-head .lead{display:none}
html[data-do] .fr-do-head .lead.do-lead{display:block}
.do-v{margin-top:clamp(40px,4.4vw,64px)}

/* the review-only strip, at the top of the section (removed when Tyler picks) */
html[data-do-review] .fr-do.sec{padding-top:clamp(16px,2vw,28px);scroll-margin-top:68px}
html[data-do-review] .design-review{display:block;margin-bottom:clamp(56px,8vw,124px)}
.design-review-in{display:flex;flex-wrap:wrap;align-items:center;column-gap:2px;border-bottom:1px dashed var(--rule);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;line-height:1;text-transform:uppercase;color:var(--ash)}
.design-review-in>span:first-child{margin-right:6px}
.design-review a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;color:var(--ash);text-decoration:none}
.design-review a:hover{color:var(--ink)}
html:not([data-do]) .design-review a[data-do-link=current],html[data-do=bento] .design-review a[data-do-link=bento],html[data-do=goal] .design-review a[data-do-link=goal],html[data-do=chores] .design-review a[data-do-link=chores]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
@media (max-width:400px){.design-review-in>span[aria-hidden]{display:none}.design-review a{padding:0 6px}}

/* shared by the three: the mono label, the "Sample" tag on sample UI, the arrow links */
.do-k,.do-sample{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--emerald)}
.do-v .arrow-link{color:var(--emerald);font-weight:500}
.do-v .arrow-link span{transition:transform .2s var(--ease-out)}
.do-v .arrow-link:hover span{transform:translateX(3px)}

/* ---- Concept 1: the bento board. From 1100px four columns: A (prescriptions, dark) two by two, B and C beside it,
   D under them. 761-1099px two columns, A and D full width. Phones: one column. ---- */
.bt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bt-tile{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(22px,2vw,28px);border-radius:18px;border:1px solid rgba(200,206,206,.8);background:var(--paper);color:var(--ink)}
.bt-a{grid-column:1/3;grid-row:1/3}
.bt-b{grid-column:3;grid-row:1}
.bt-c{grid-column:4;grid-row:1}
.bt-d{grid-column:3/5;grid-row:2}
/* A: the one that converts. The ask, the price, the requests as glass pills, the button */
.bt-a{justify-content:space-between;gap:32px;padding:clamp(26px,2.8vw,44px);border-color:var(--obsidian);background:var(--obsidian);color:var(--pearl)}
.bt-a .do-k{color:var(--jade)}
.bt-a :focus-visible{outline-color:var(--jade)}
.bt-a-top{display:flex;flex-direction:column;gap:18px}
.bt-a-t{max-width:13em;font-size:clamp(28px,2.8vw,40px);font-weight:300;letter-spacing:-.035em;line-height:1.08;color:var(--pearl);text-wrap:balance}
.bt-price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:10px}
.bt-from,.bt-per{font-size:var(--fs-15);line-height:1.3;color:var(--silver)}
.bt-price b{font-size:clamp(56px,5vw,72px);font-weight:300;letter-spacing:-.045em;line-height:.9;color:var(--jade);font-variant-numeric:tabular-nums}
.bt-per{flex-basis:100%}
.bt-a-foot{display:flex;flex-direction:column;gap:28px}
.bt-pills{display:flex;flex-wrap:wrap;gap:8px}
.bt-pills a,.bt-soon{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 17px;border-radius:999px;font-size:var(--fs-15);line-height:1.2;white-space:nowrap}
.bt-pills a{border:1px solid rgba(240,243,241,.14);background:rgba(240,243,241,.08);color:var(--pearl);text-decoration:none;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out)}
.bt-pills a:hover{background:rgba(240,243,241,.15);border-color:rgba(240,243,241,.36)}
.bt-soon{border:1px dashed rgba(240,243,241,.22);color:var(--silver)}
.bt-soon-t{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.bt-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.bt-assure{font-size:var(--fs-13);line-height:1.4;color:var(--silver)}
/* B and C: one big fact, one small sample, one ask */
.bt-big{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:6px;margin-top:10px}
.bt-big b{font-size:clamp(38px,3.3vw,48px);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--emerald);font-variant-numeric:tabular-nums}
.bt-big span{font-size:var(--fs-15);line-height:1.35;color:var(--ash)}
.bt-vis{position:relative;margin:16px 0 0;padding:12px;border-radius:12px;background:var(--chalk)}
.bt-vis-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 2px 2px;font-size:12px;line-height:1.2;color:var(--ash)}
.bt-vis-top .do-sample{line-height:1.2}
.bt-vis-top-r{justify-content:flex-end;padding-bottom:0}
.bt-cap{margin-top:8px;font-size:var(--fs-13);line-height:1.35;color:var(--ash)}
.bt-link{align-self:flex-start;margin-top:auto;padding-top:10px}
/* B: Gabriel texts first; one reply reorders */
.bt-chat{display:flex;flex-direction:column;gap:6px}
.bt-msg{max-width:92%;padding:9px 13px 10px;border-radius:17px;font-size:14px;line-height:1.35;letter-spacing:-.005em}
.bt-msg-g{align-self:flex-start;border-bottom-left-radius:6px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(200,206,206,.7)}
.bt-msg-me{align-self:flex-end;min-width:56px;border-bottom-right-radius:6px;background:var(--obsidian);color:var(--pearl);font-weight:500;text-align:center}
.bt-done{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;padding-right:2px;font-size:var(--fs-13);font-weight:500;line-height:1.2;color:var(--emerald)}
.bt-ck{flex:none;width:16px;height:16px}
.bt-ck circle{fill:var(--emerald);stroke:var(--emerald);stroke-width:1.2}
.bt-ck path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12;stroke-dashoffset:0}
/* C: a range, no numbers. The grey track is normal, the emerald band optimal; "You" sits in range, not optimal */
.bt-range{padding:12px 12px 12px 16px}
.bt-scale{position:relative;height:62px;margin:-2px 6px 0 2px}
.bt-normal,.bt-opt{position:absolute;top:26px;height:8px;border-radius:999px}
.bt-normal{left:0;right:0;background:var(--rule)}
.bt-opt{left:28%;width:30%;background:var(--emerald)}
.bt-you{position:absolute;left:80%;top:23px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--chalk)}
.bt-scale i{position:absolute;font-style:normal;font-size:12px;line-height:1;white-space:nowrap}
.bt-normal i{left:0;bottom:calc(100% + 8px);color:var(--ash)}
.bt-opt i{left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);font-weight:500;color:var(--emerald)}
.bt-you i{left:50%;top:calc(100% + 7px);transform:translateX(-50%);font-weight:500;color:var(--ink)}
.bt-range .bt-cap{margin-top:2px}
.bt-types{display:flex;flex-wrap:wrap;gap:4px 19px;clip-path:inset(-6px -6px -6px 0);margin-top:14px;font-size:var(--fs-13);line-height:1.5;color:var(--ink)}
.bt-types li{position:relative;white-space:nowrap}
.bt-types li+li::before{content:"";position:absolute;left:-11px;top:calc(.75em - 1.5px);width:3px;height:3px;border-radius:50%;background:var(--jade)}
/* D: not tied to one pharmacy. The words, and three licensed pharmacies compared, the best one picked */
.bt-d{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"t t" "c v";grid-template-rows:auto 1fr;column-gap:clamp(20px,2vw,28px);align-items:start}
.bt-d-t{grid-area:t;margin-bottom:14px;font-size:clamp(24px,2.1vw,30px);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--ink);text-wrap:balance}
.bt-d-copy{grid-area:c}
.bt-d .bt-ph{grid-area:v}
.bt-d-p{font-size:var(--fs-15);line-height:1.55;color:var(--ash)}
.bt-fine{margin-top:10px;font-size:var(--fs-13);line-height:1.5;color:var(--ash)}
.bt-d .bt-vis{margin:0}
.bt-ph{padding:12px;container-type:inline-size}
.bt-ph-row{display:grid;grid-template-columns:16px repeat(3,minmax(0,1fr));column-gap:12px;align-items:center}
.bt-ph-head{padding:2px 8px 8px;font-size:12px;line-height:1.2;color:var(--ash)}
.bt-ph-head span{justify-self:start;white-space:nowrap}
.bt-ph-head .do-sample{justify-self:start;font-size:12px;line-height:1.2}
.bt-ph-list{display:flex;flex-direction:column;gap:4px}
.bt-ph-list li{min-height:46px;padding:8px;border-radius:8px}
.bt-ph-n{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;line-height:1.25;color:var(--ink)}
.bt-best{row-gap:6px}
.bt-best .bt-ph-n{grid-row:1/3}
.bt-best i{grid-row:2}
.bt-best>b{grid-column:2/-1;grid-row:1;font-size:12px;font-weight:500;line-height:1.2;color:var(--emerald)}
.bt-radio{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--rule);background:#fff}
.bt-ph-list i{position:relative;height:5px;border-radius:999px;background:rgba(200,206,206,.6);overflow:hidden}
.bt-ph-list i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ash);transform:scaleX(var(--v));transform-origin:0 50%}
.bt-best{background:#fff;box-shadow:inset 0 0 0 1px rgba(54,94,76,.42)}
.bt-best i::after{background:var(--emerald)}
@media (max-width:1099px){
  .bt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bt-a,.bt-d{grid-column:1/-1;grid-row:auto}
  .bt-b{grid-column:1;grid-row:auto}
  .bt-c{grid-column:2;grid-row:auto}
}
@media (max-width:1099px) and (min-width:761px){
  .bt-a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(28px,4vw,48px);row-gap:28px}
  .bt-a-top{grid-column:1;grid-row:1}
  .bt-price{grid-column:1;grid-row:2;align-self:end}
  .bt-a-foot{grid-column:2;grid-row:1/3;justify-content:flex-end}
}
@media (max-width:760px){
  .bt{grid-template-columns:minmax(0,1fr);gap:12px}
  .bt-b,.bt-c{grid-column:1}
  .bt-tile{padding:22px 20px}
  .bt-a{gap:26px;padding:26px 20px 24px}
  .bt-a-t{font-size:clamp(22px,6.15vw,25px)}/* one sentence a line on phones (360-390px) */
  .bt-price b{font-size:56px}
  .bt-a-foot{gap:24px}
  .bt-pills a,.bt-soon{padding:0 15px}
  .bt-act{align-items:stretch}
  .bt-act .btn{width:100%;height:54px}
  .bt-d{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "c" "v";grid-template-rows:auto}
  .bt-d .bt-ph{margin-top:18px}
  .bt-d-t{margin-bottom:12px}
}
@media (max-width:340px){.bt-pills a,.bt-soon{padding:0 13px;font-size:14px}}

/* ---- Concept 2: pick your goal. Four across from 1100px; three from 761px, with weight loss across two; two on phones.
   The whole card is the link ---- */
.gl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gl-grid>li{display:flex;min-width:0}
.gl-card{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto auto;min-height:clamp(150px,12.4vw,172px);padding:22px 22px 22px 24px;border-radius:18px;border:1px solid rgba(200,206,206,.8);background:var(--paper);color:var(--ink);text-decoration:none;transition:border-color .2s var(--ease-out)}
.gl-tag{grid-column:1/-1;grid-row:1;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--emerald)}
.gl-name{grid-column:1;grid-row:3;font-size:clamp(26px,2.2vw,30px);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.gl-fact{grid-column:1;grid-row:4;margin-top:8px;font-size:var(--fs-15);line-height:1.4;color:var(--ash)}
.gl-fact b{font-weight:500;color:var(--emerald);font-variant-numeric:tabular-nums}
.gl-arrow{grid-column:2;grid-row:3/5;align-self:end;width:22px;height:22px;margin:0 0 1px 16px;fill:none;stroke:var(--emerald);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.gl-card:hover{border-color:var(--ink)}
.gl-card:hover .gl-arrow{transform:translateX(3px)}
.gl-also{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;margin-top:12px;font-size:var(--fs-15);line-height:1.4;color:var(--ash)}
.gl-also a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:rgba(37,42,43,.35);text-underline-offset:4px;transition:text-decoration-color .2s}
.gl-also a:hover{text-decoration-color:var(--ink)}
.gl-dot{color:var(--rule)}
.gl-trust{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,4vw,64px);row-gap:16px;align-items:center;margin-top:clamp(18px,2vw,28px);padding-top:clamp(24px,2.4vw,32px);border-top:1px solid var(--rule)}
.gl-checks{grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px clamp(20px,2.4vw,40px)}
.gl-checks li{position:relative;padding-left:26px;font-size:var(--fs-15);line-height:1.45;color:var(--ink)}
.gl-checks li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;border-left:1.5px solid var(--emerald);border-bottom:1.5px solid var(--emerald);transform:rotate(-45deg)}
.gl-fine{grid-column:1;font-size:var(--fs-13);line-height:1.5;color:var(--ash)}
.gl-act{grid-column:2;grid-row:1/3}
@media (max-width:1099px) and (min-width:761px){
  .gl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gl-lead{grid-column:span 2}
  .gl-checks{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .gl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .gl-card{grid-template-rows:auto 1fr auto auto;min-height:124px;padding:16px 14px 16px 16px}
  .gl-tag{display:none}
  .gl-arrow{grid-row:1;align-self:start;width:20px;height:20px;margin:0 0 0 8px}
  .gl-dot{display:none}
  .gl-name{grid-column:1/-1;font-size:22px}
  .gl-fact{grid-column:1/-1;margin-top:6px;font-size:var(--fs-13)}
  .gl-trust{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .gl-checks{grid-template-columns:minmax(0,1fr)}
  .gl-act{grid-column:1;grid-row:auto}
  .gl-act .btn{width:100%;height:54px}
}

/* ---- Concept 3: without and with Gabriel. One panel, two columns on a neutral hairline; a strip of what's handled ---- */
.ch-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:18px;border:1px solid rgba(200,206,206,.8);background:var(--paper);color:var(--ink)}
.ch-col{display:flex;flex-direction:column;min-width:0;padding:clamp(26px,2.8vw,40px) clamp(24px,3.6vw,56px)}
.ch-w{border-left:1px solid var(--rule)}
.ch-list{margin-top:18px;border-top:1px solid var(--rule)}
.ch-list li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-17);line-height:1.4}
/* the strike: a 1.5px line drawn under each line of the words (clone gives every wrapped line its own) */
.ch-list span{color:var(--ash);background:linear-gradient(rgba(37,42,43,.6),rgba(37,42,43,.6)) no-repeat 0 58%/100% 1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ch-one{margin-top:18px;font-size:clamp(44px,4.2vw,56px);font-weight:300;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.ch-checks{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.ch-checks li{position:relative;padding-left:28px;font-size:var(--fs-17);line-height:1.45;color:var(--ink)}
.ch-checks li::before{content:"";position:absolute;left:3px;top:.45em;width:11px;height:6px;border-left:1.5px solid var(--emerald);border-bottom:1.5px solid var(--emerald);transform:rotate(-45deg)}
.ch-act{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:auto;padding-top:28px}
.ch-foot{grid-column:1/-1;display:flex;align-items:center;gap:12px 20px;padding:16px clamp(24px,3.6vw,56px) 18px;border-top:1px solid var(--rule)}
.ch-foot-k{flex:none;font-size:var(--fs-15);line-height:1.4;color:var(--ash)}
.ch-pills{display:flex;flex-wrap:wrap;gap:8px}
.ch-pills a,.ch-soon{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-size:var(--fs-15);line-height:1.2;white-space:nowrap}
.ch-pills a{border:1px solid var(--rule);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s var(--ease-out)}
.ch-pills a:hover{border-color:var(--ink)}
.ch-soon{border:1px dashed var(--rule);color:var(--ash)}
.ch-price{font-size:var(--fs-15);line-height:1.4;color:var(--ash)}
.ch-price b{font-weight:500;color:var(--emerald)}
.ch-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);margin-top:clamp(24px,2.6vw,36px)}
.ch-cell{display:flex;flex-direction:column;min-width:0;padding-top:18px;border-top:1px solid var(--rule)}
.ch-fact{margin-top:8px;font-size:clamp(21px,1.8vw,24px);font-weight:300;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.ch-fact span{font-size:var(--fs-15);letter-spacing:0;color:var(--ash)}
.ch-cell .arrow-link{align-self:flex-start;margin-top:auto;padding-top:4px}
.ch-src{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(24px,3vw,48px);row-gap:8px;margin-top:clamp(20px,2.4vw,32px);padding-top:20px;border-top:1px solid var(--rule)}
.ch-src p{font-size:var(--fs-15);line-height:1.55;color:var(--ash)}
.ch-src b{font-weight:500;color:var(--ink)}
.ch-src .ch-fine{font-size:var(--fs-13);line-height:1.5}
@media (max-width:960px){.ch-foot{flex-direction:column;align-items:flex-start}.ch-src{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.ch-strip{grid-template-columns:minmax(0,1fr)}.ch-cell+.ch-cell{margin-top:16px}}
@media (max-width:760px){
  .ch-panel{grid-template-columns:minmax(0,1fr)}
  .ch-w{border-left:0;border-top:1px solid var(--rule)}
  .ch-col{padding:24px 20px 26px}
  .ch-foot{padding:18px 20px 20px}
  .ch-pills a,.ch-soon{padding:0 15px}
  .ch-list{margin-top:14px}
  .ch-list li{padding:12px 0;font-size:var(--fs-15)}
  .ch-one{margin-top:14px;font-size:44px}
  .ch-checks{margin-top:22px;gap:10px}
  .ch-checks li{font-size:var(--fs-15)}
  .ch-act{align-items:stretch;padding-top:26px}
  .ch-act .btn{width:100%;height:54px}
}

/* ---- Motion: each sample plays once as it comes into view (page.js adds .go). html[data-do-anim], set before the
   section paints and only with motion on, holds the first frame; without it (reduced motion, ?motion=off, no
   JavaScript) everything rests finished. Nothing loops. ---- */
html[data-do-anim] .bt-chat:not(.go) .bt-msg-me,html[data-do-anim] .bt-chat:not(.go) .bt-done{opacity:0;transform:translateY(8px)}
html[data-do-anim] .bt-chat:not(.go) .bt-ck path{stroke-dashoffset:12}
.bt-chat.go .bt-msg-me{transition:opacity .45s var(--ease-out) .5s,transform .45s var(--ease-out) .5s}
.bt-chat.go .bt-done{transition:opacity .45s var(--ease-out) 1.2s,transform .45s var(--ease-out) 1.2s}
.bt-chat.go .bt-ck path{transition:stroke-dashoffset .4s var(--ease-out) 1.45s}
html[data-do-anim] .bt-range:not(.go) .bt-you{left:5%}
.bt-range.go .bt-you{transition:left 1.4s cubic-bezier(.3,.7,.2,1) .35s}
html[data-do-anim] .bt-ph:not(.go) .bt-ph-list i::after{transform:scaleX(0)}
html[data-do-anim] .bt-ph:not(.go) .bt-best{background-color:rgba(255,255,255,0);box-shadow:inset 0 0 0 1px rgba(54,94,76,0)}
html[data-do-anim] .bt-ph:not(.go) .bt-best i::after{background-color:var(--ash)}
html[data-do-anim] .bt-ph:not(.go) .bt-best .bt-ck circle{fill:#fff;stroke:var(--rule)}
html[data-do-anim] .bt-ph:not(.go) .bt-best .bt-ck path{stroke-dashoffset:12}
html[data-do-anim] .bt-ph:not(.go) .bt-best b{opacity:0}
.bt-ph.go .bt-ph-list i::after{transition:transform .7s var(--ease-out) .25s,background-color .3s linear 1.15s}
.bt-ph.go .bt-ph-list li:nth-child(2) i::after{transition-delay:.37s,1.15s}
.bt-ph.go .bt-ph-list li:nth-child(3) i::after{transition-delay:.49s,1.15s}
.bt-ph.go .bt-best{transition:background-color .35s var(--ease-out) 1.1s,box-shadow .35s var(--ease-out) 1.1s}
.bt-ph.go .bt-best .bt-ck circle{transition:fill .3s var(--ease-out) 1.15s,stroke .3s var(--ease-out) 1.15s}
.bt-ph.go .bt-best .bt-ck path{transition:stroke-dashoffset .4s var(--ease-out) 1.35s}
.bt-ph.go .bt-best b{transition:opacity .4s var(--ease-out) 1.35s}
html[data-do-anim] .ch-list:not(.go) span{color:var(--ink);background-size:0% 1.5px}
.ch-list.go span{transition:background-size .5s var(--ease-out),color .6s linear;transition-delay:calc(.3s + var(--n,0) * 180ms)}
@media (prefers-reduced-motion:reduce){.do-v *,.do-v *::before,.do-v *::after{transition:none!important}}
/* bento (Tyler picked it 10/4): on wide screens the price stays with the headline and the categories and request sit at the bottom */
@media (min-width:1100px){.bt-a{justify-content:flex-start}.bt-a-foot{margin-top:auto}}

/* Tyler 10/8 (Doctronic review): a composer-first hero and "What it costs" (Doctronic review).
   Built on the page's own tokens (home style.css, free style.css) and the page's earlier .fr-tries pills.
   Round 2 (Tyler): tighter. Two buttons, no note under the box, five quiet price tiles. */
.fr-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the box ---------- */
.fr-askbox{position:relative;display:flex;align-items:flex-end;gap:10px;width:100%;max-width:560px;margin:4px 0 0;padding:9px 9px 9px 20px;border:1px solid rgba(240,243,241,.3);border-radius:24px;background:rgba(12,16,18,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 24px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .2s var(--ease-out),background .2s}
.fr-askbox:focus-within{border-color:rgba(147,187,169,.85);background:rgba(12,16,18,.62)}
.fr-askbox textarea{flex:1;min-width:0;min-height:30px;max-height:168px;margin:0;padding:8px 0;border:0;background:transparent;color:var(--pearl);font:400 18px/1.45 var(--sans);resize:none;outline:none}
.fr-askbox textarea:placeholder-shown{white-space:nowrap;overflow:hidden}
.fr-askbox textarea::placeholder{color:rgba(240,243,241,.62)}
.fr-askbox-send{flex:none;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--pearl);color:var(--obsidian);cursor:pointer;transition:background .2s,transform .15s}
.fr-askbox-send:hover{background:#fff}
.fr-askbox-send:active{transform:scale(.96)}
.fr-askbox-send svg{width:20px;height:20px}
.fr-askbox-send:focus-visible{outline:2px solid var(--jade);outline-offset:3px}

/* two buttons right under the box (style.css hid .fr-tries when the iPhone hero became the default) */
html[data-hero-variant=thread] .fr-hero .fr-tries{display:flex}
.fr-hero .fr-tries{max-width:560px;margin-top:-8px}
.fr-hero .fr-tries a{min-height:38px;padding:0 14px;font-size:14px;color:rgba(240,243,241,.9)}

/* ---------- what it costs: five quiet tiles, number first ---------- */
.fr-prices{background:var(--abyss);color:var(--pearl)}
.fr-prices .frame{padding-top:30px;padding-bottom:30px;border-top:1px solid rgba(240,243,241,.08)}
.fr-prices-k{margin:0 0 18px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fr-prices-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.fr-prices-row li{display:flex;flex-direction:column;gap:8px;min-width:0}
.fr-p-v{font:300 32px/1 var(--sans);letter-spacing:-.02em;color:var(--pearl);white-space:nowrap;font-variant-numeric:tabular-nums}
.fr-p-v small{margin-right:6px;font-size:13px;font-weight:400;letter-spacing:0;color:var(--silver)}
.fr-p-v small.per{margin:0 0 0 2px}
.fr-p-l{font-size:14px;line-height:1.35;color:var(--silver)}
@media (max-width:1100px){.fr-p-v{font-size:28px}}

/* ---------- phones: the box comes first, in the first screen; the phone follows ---------- */
@media (max-width:760px){
  html[data-hero-variant=thread] .fr-hero .fr-askbox{order:3;max-width:none}
  html[data-hero-variant=thread] .fr-hero .fr-tries{order:4}
  html[data-hero-variant=thread] .fr-thread{order:6}
  .fr-askbox textarea{font-size:17px}
  .fr-prices .frame{padding-top:26px;padding-bottom:26px}
  .fr-prices-row{grid-template-columns:1fr 1fr;gap:22px 16px}
  .fr-prices-row li:first-child{grid-column:1/-1}
  .fr-p-v{font-size:26px}
  .fr-p-l{font-size:13px}
}
@media (max-width:420px){.fr-askbox textarea{font-size:16px}}


/* ---------- "Stop overpaying": one small ask under each column (Tyler 10/8); a tap starts the chat ---------- */
.fr-cta{align-self:start;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:8px;padding:0 16px;border:1px solid rgba(37,42,43,.24);border-radius:999px;color:var(--ink);font:500 14px/1 var(--sans);text-decoration:none;transition:border-color .2s,background .2s}
.fr-cta:hover{border-color:var(--emerald);background:rgba(54,94,76,.06)}
.fr-cta span{transition:transform .2s var(--ease-out)}
.fr-cta:hover span{transform:translateX(3px)}
@media (min-width:861px){
  .fr-money-grid{grid-template-rows:repeat(4,auto)}
  .fr-money-col{grid-row:span 4}
}

/* With "How is it free?" gone, the two light sections meet: one normal gap between them, not two */
.fr-money{padding-bottom:clamp(40px,4vw,64px)}
.fr-money + .fr-ladder{padding-top:clamp(40px,4vw,64px);border-top:0}

/* ---------- One way to talk in the hero (Tyler 10/10) ----------
   Phones: Text Gabriel first, light and full width, above the box, with what it does under it. Computers: the box
   leads, and texting is one quiet line under the two asks, named by its number. In the DOM the row sits before the
   box, so phones keep that order and computers move it last. */
.fr-hero .fr-text{order:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:2px}
.fr-text-alt{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:14px;color:rgba(240,243,241,.72)}
.fr-text-alt a{color:var(--pearl);text-underline-offset:3px;text-decoration-color:rgba(240,243,241,.45);font-variant-numeric:tabular-nums}
.fr-text-alt a:hover{text-decoration-color:var(--pearl)}
.fr-text-alt .tg-ico{width:16px;height:16px;margin:0;opacity:.8}
.fr-text-note{margin:0;font-size:13px;color:rgba(240,243,241,.72);text-align:center}
@media (hover:none) and (pointer:coarse){
  .fr-hero .fr-text{order:0;align-items:stretch;margin-top:0}
  .fr-hero .fr-text .btn{height:54px;font-size:16px}
}
@media (max-width:760px){
  html[data-hero-variant=thread] .fr-hero .fr-text{order:5}
}
@media (max-width:760px) and (hover:none) and (pointer:coarse){
  html[data-hero-variant=thread] .fr-hero .fr-text{order:3}
}