/* ============================================================ Medical Arts — INTERIOR PAGE COMPONENTS Extends css/site.css. Uses ONLY the :root tokens defined there. Never introduce a raw hex outside this file's token references. Shapes: var(--r) 24 / var(--r-s) 16 / var(--r-b) 100 pill Motion: var(--ease), .reveal, prefers-reduced-motion respected ============================================================ */ /* ---------- INTERIOR HERO (same DNA as home hero, shorter) ---------- */ .phero{position:relative;min-height:clamp(420px,58vh,620px);display:flex;align-items:center;overflow:hidden;background:var(--ink);color:#fff} .phero video,.phero .pbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .phero .pbg{background-size:cover;background-position:center} .phero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,12,7,.9),rgba(15,12,7,.45) 52%,rgba(15,12,7,.12)),linear-gradient(to top,rgba(15,12,7,.6),transparent 52%)} .phero>.wrap{position:relative;z-index:3;width:100%;padding-top:96px;padding-bottom:22px} .phero .eye{color:var(--lime)} .phero h1{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff;max-width:18ch;margin:14px 0 0} .phero .sub{max-width:46ch;margin-top:18px;font-size:clamp(1rem,1.35vw,1.18rem);color:rgba(255,255,255,.9)} .phero .cta{display:flex;gap:14px;align-items:center;margin-top:26px;flex-wrap:wrap} /* compact variant: legal / utility pages, no media */ .phero.compact{min-height:auto;background:var(--ink)} .phero.compact>.wrap{padding-top:112px;padding-bottom:44px} .phero.compact h1{font-size:clamp(2rem,4vw,3.2rem)} /* tinted variant: category pages without video */ .phero.tint .pbg{opacity:.42} /* ---------- BREADCRUMB ---------- */ .crumb{position:relative;z-index:3;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.68)} .crumb a:hover{color:#fff} .crumb span{opacity:.5} .crumb-l{color:var(--muted);font-size:.82rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px} .crumb-l a:hover{color:var(--green-dk)} /* ---------- SECTION HEADS + UTILITY GRIDS ---------- */ .shead{max-width:70ch} .shead h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:600;margin-top:8px} .shead p{margin-top:12px;font-size:1.04rem;line-height:1.55} .g2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:980px){.g3{grid-template-columns:1fr 1fr}} @media(max-width:640px){.g2,.g3{grid-template-columns:1fr}} /* ---------- TILE (generic card, bento DNA) ---------- */ .tile{background:var(--oat);border-radius:var(--r);padding:26px;position:relative;overflow:hidden;transition:transform .3s var(--ease)} .tile:hover{transform:translateY(-4px)} .tile h3,.tile h2{font-size:1.18rem;font-weight:600} .tile p{font-size:.94rem;margin-top:8px;line-height:1.5} .tile .ficon{margin-bottom:14px} .tile.pale{background:var(--green-pale)}.tile.peach{background:var(--peach)}.tile.sky{background:var(--sky)} .tile.dark{background:var(--ink);color:rgba(255,255,255,.72)}.tile.dark h3{color:#fff} .tile.green{background:var(--green)}.tile.green h3,.tile.green p{color:#fff} .tile .num{font-family:'Poppins',var(--f);font-weight:700;font-size:1.5rem;color:var(--green-dk);margin-bottom:8px} .tile.dark .num{color:var(--lime)} /* ---------- ICON CHIP (matches .ficon on home bento) ---------- */ .ic{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.62);display:flex;align-items:center;justify-content:center;color:var(--green-dk);flex:0 0 auto;margin-bottom:18px} .ic+h3{margin-top:0} /* on a light section the white chip disappears, so tint it */ .tile .ic,.g3>div>.ic{background:var(--green-pale)} .ic svg{width:55%;height:55%} .tile.dark .ic,.tile.green .ic{background:rgba(255,255,255,.16);color:var(--lime)} /* ---------- PDP: media stage + buy box ---------- */ .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:start} @media(max-width:960px){.pdp{grid-template-columns:1fr}} .pstage{position:relative;border-radius:var(--r);overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#1d1a12,#0b0a06);aspect-ratio:1/1;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)} .pstage video,.pstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .pstage.light{background:#F2EEE4} .pstage .tag{position:absolute;top:16px;left:16px;z-index:3;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(18,15,7,.72);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:6px 12px;backdrop-filter:blur(6px)} .pspin{position:absolute;left:14px;bottom:14px;z-index:3;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.86);border-radius:100px;padding:6px 11px;transition:opacity .35s var(--ease)} .pstage:hover .pspin{opacity:0} .pthumbs{display:flex;gap:10px;margin-top:12px} .pthumb{width:74px;height:74px;border-radius:14px;overflow:hidden;background:#F2EEE4;border:2px solid transparent;cursor:pointer;flex:0 0 auto} .pthumb.on{border-color:var(--green)} .pthumb img,.pthumb video{width:100%;height:100%;object-fit:cover;display:block} /* the PDP hero now carries the page's only h1, so the buy box heading is an h2 and has to keep the identical treatment */ .buy h1,.buy h2{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.03} .buy .kicker{font-size:.82rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--green-dk)} .buy .lede{margin-top:14px;font-size:1.06rem;line-height:1.55;max-width:52ch} .buy .from{display:flex;align-items:baseline;gap:10px;margin-top:20px} .buy .from b{font-family:'Poppins',var(--f);font-size:2.1rem;font-weight:600;color:var(--ink);letter-spacing:-.02em} .buy .from span{color:var(--muted);font-size:.94rem} .bullets{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px} .bullets li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem;line-height:1.45} .bullets svg{width:18px;height:18px;flex:0 0 auto;color:var(--green);margin-top:2px} /* plan selector */ .plans{display:flex;flex-direction:column;gap:10px;margin-top:22px} .plan{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--hair);border-radius:var(--r-s);padding:16px 18px;cursor:pointer;font-family:var(--f);transition:border-color .2s var(--ease),background .2s,box-shadow .2s} .plan:hover{border-color:var(--green)} .plan.sel{border-color:var(--green);background:var(--green-pale);box-shadow:0 10px 26px -16px rgba(14,148,69,.7)} .plan .pl{font-weight:600;color:var(--ink);font-size:1rem} .plan .ps{display:block;font-weight:500;font-size:.84rem;color:var(--muted);margin-top:3px} .plan .pr{text-align:right;font-weight:700;color:var(--ink);white-space:nowrap} .plan .pr small{display:block;font-weight:500;font-size:.76rem;color:var(--muted)} .plan .save{position:absolute;top:-9px;right:14px;background:var(--lime);color:var(--ink);font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:100px;padding:3px 9px} .buy .btn-g{margin-top:20px;width:100%;justify-content:center} .buy .micro{font-size:.82rem;color:var(--muted);margin-top:10px;text-align:center} /* ---------- WHAT'S INCLUDED (spec-table DNA, light) ---------- */ .incl{border-top:1px solid var(--hair)} .incl .row{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--hair);font-size:1rem} .incl .k{color:var(--muted)} .incl .v{color:var(--ink);font-weight:600;text-align:right} .incl .v b{color:var(--green-dk)} /* ---------- COMPARISON TABLE ---------- */ .cmp{width:100%;border-collapse:collapse;margin-top:24px;font-size:.96rem} .cmp th,.cmp td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--hair);vertical-align:top} .cmp thead th{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:1px solid var(--hair)} .cmp tbody th{font-weight:500;color:var(--muted);width:30%} .cmp td{color:var(--ink);font-weight:500} .cmp .hi{background:var(--green-pale)} .cmp-wrap{overflow-x:auto;border-radius:var(--r);background:#fff;padding:4px clamp(6px,2vw,18px)} /* ---------- ISI / SAFETY + CALLOUTS ---------- */ /* the safety panel sits inside oat sections on most PDPs, so without an edge the card is the same colour as the band behind it and disappears. Same cure the .tile got: a hairline inset ring, no new token. */ .isi{background:var(--oat);border-radius:var(--r);padding:clamp(22px,3vw,34px);margin-top:22px;box-shadow:inset 0 0 0 1px rgba(24,21,9,.06)} .isi h3{font-size:1.05rem;font-weight:700;margin-bottom:12px} .isi p,.isi li{font-size:.86rem;line-height:1.65;color:var(--body)} .isi ul{margin:10px 0 10px 18px} .isi p+p{margin-top:10px} /* The left-border tinted callout that used to live here (.note / .note.warn) is gone. It was carrying five unrelated jobs across 21 placements: legal fine print, the state-exclusion list, emergency instructions, reassurance micro-copy, and a form confirmation. One box doing five jobs signals none of them, and the pattern itself is documentation furniture, not brand. Each job now has the treatment it actually needs, below. */ /* ---------- FINE PRINT (compliance copy, not a callout) ---------- Results-vary / FDA / availability language is fine print. Boxing it gave a disclaimer the same weight on the page as a benefit. `.fineprint` already exists in site.css for this copy on dark bands; `.rule` is the light-band variant, and it is exactly what it says: a hairline, then small quiet type. It de-emphasises through SIZE, the rule above it, and position, NOT through colour: --muted on --cream measures 3.58:1, and none of this copy is optional reading. --body is 9.03:1 and still reads as fine print beside 1rem body copy. Every one of these paragraphs is a required disclaimer. */ .fineprint.rule{margin-top:22px;padding-top:15px;border-top:1px solid var(--hair); font-size:.82rem;line-height:1.65;color:var(--body);max-width:78ch} .fineprint.rule b,.fineprint.rule strong{color:var(--ink2);font-weight:600} .fineprint.rule a{color:var(--green-dk);text-decoration:underline;text-underline-offset:3px} /* a second disclaimer under the same rule is a continuation, not a new block */ .fineprint.rule+.fineprint.rule{margin-top:10px;padding-top:0;border-top:0} /* ---------- STATE AVAILABILITY (data, not a comma wall) ---------- Four pages ran the same sixteen state codes inside a sentence. Sixteen comma-separated abbreviations is a table pretending to be prose: nobody scans it to find their own state. The sentence keeps the explanation; the codes become a set you can read in one pass. The pill is the same white-on-hair chip the full-name grid on shipping-states.html uses, so the two read as one component at two densities. */ .statebar{max-width:78ch} .statebar>p{font-size:.94rem;line-height:1.55;color:var(--ink2)} .statebar>p a{color:var(--green-dk);text-decoration:underline;text-underline-offset:3px} .states{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .states li{display:flex;align-items:center;gap:8px;background:var(--paper); border:1.5px solid var(--hair);border-radius:var(--r-b);padding:8px 15px; font-size:.84rem;font-weight:700;letter-spacing:.07em;color:var(--ink2);line-height:1} /* the same coral the full-name grid puts on its cross: this set is exclusions */ .states li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);flex:0 0 auto} .states abbr{text-decoration:none;border:0} /* full-name variant, moved off shipping-states.html so both densities of the same component live together */ .state-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0} .state-chip{background:var(--paper);border:1.5px solid var(--hair);border-radius:var(--r-b); padding:12px 10px;text-align:center;font-weight:600;color:var(--ink);font-size:.95rem; display:flex;align-items:center;justify-content:center;gap:8px} .state-chip svg{width:14px;height:14px;color:var(--coral);flex:0 0 auto} @media(max-width:640px){.state-grid{grid-template-columns:repeat(2,1fr)}} /* ---------- EMERGENCY ALERT ---------- The ONLY alert treatment on the site, and there are exactly two of them: contact.html and telehealth-consent.html. A solid band, not a tint, because when a tinted callout also carries billing copy and dose reassurance, the one message that has to stop someone reads as more of the same. Coral carries ink, not white: white on --coral is 3.03:1 and this is the one block on the site that can never be hard to read. */ .alert{background:var(--coral);border-radius:var(--r-s);padding:clamp(18px,2.4vw,24px) clamp(19px,2.6vw,26px); display:flex;gap:15px;align-items:flex-start;color:var(--ink2);font-size:.96rem;line-height:1.55} .alert .ai{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--peach); display:flex;align-items:center;justify-content:center;flex:0 0 auto} .alert .ai svg{width:19px;height:19px} .alert b{display:block;color:var(--ink);font-weight:700;font-size:1.06rem;letter-spacing:-.015em;line-height:1.3} .alert b+p{margin-top:6px} .alert p{color:var(--ink2)} @media(max-width:520px){.alert{flex-direction:column;gap:12px}} /* ---------- INLINE REASSURANCE (not a box) ---------- "Nothing is charged today", "your provider confirms your dose". This is micro-copy that belongs beside the thing it reassures about, with the same tick .bullets already uses, so it reads as one more thing that is handled rather than as an advisory notice. */ .assure{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;line-height:1.55;color:var(--ink2)} .assure>svg{width:18px;height:18px;flex:0 0 auto;color:var(--green);margin-top:2px} .assure b,.assure strong{color:var(--ink);font-weight:600} .assure a{color:var(--green-dk);text-decoration:underline;text-underline-offset:3px} .assure.on-dark{color:rgba(255,255,255,.86)} .assure.on-dark>svg{color:var(--lime)} .assure.on-dark b,.assure.on-dark strong{color:var(--paper)} /* ---------- FORM CONFIRMATION (a state of the form, not a notice) ---------- The contact form swaps itself for this, so it inherits the form's measure and sits exactly where the form sat. Same mark DNA as the funnel result screens. display:flex outranks the UA [hidden] rule, hence the explicit hide. */ .formdone{display:flex;gap:16px;align-items:flex-start;max-width:520px} .formdone[hidden]{display:none} .formdone .fd-mark{width:46px;height:46px;border-radius:50%;background:var(--green-pale); color:var(--green-dk);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .formdone .fd-mark svg{width:23px;height:23px} .formdone b{display:block;font-size:1.16rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.25} .formdone p{margin-top:8px;font-size:.94rem;line-height:1.55;color:var(--body)} .formdone:focus{outline:none} /* ---------- PROSE (legal, articles) ---------- */ .prose{max-width:74ch;font-size:1.02rem;line-height:1.72;color:var(--body)} .prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;margin:38px 0 12px} .prose h3{font-size:1.16rem;font-weight:600;margin:26px 0 10px} .prose p{margin-bottom:16px} .prose ul,.prose ol{margin:0 0 16px 22px} .prose li{margin-bottom:8px} .prose a{color:var(--green-dk);text-decoration:underline;text-underline-offset:3px} .prose strong{color:var(--ink);font-weight:600} .prose hr{border:0;border-top:1px solid var(--hair);margin:32px 0} .prose .meta{color:var(--muted);font-size:.88rem;margin-bottom:26px} .toc{background:var(--oat);border-radius:var(--r);padding:22px 26px;margin-bottom:30px} /* the contents rail is a navigation label, not document structure: as an

after the page

it skipped two heading levels on all eight article and legal pages. Same treatment, no heading. */ .toc h4,.toc .toc-t{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1.3;margin-bottom:10px} .toc a{display:block;padding:5px 0;color:var(--ink);font-weight:500;font-size:.94rem} .toc a:hover{color:var(--green-dk)} /* ---------- REVIEWS ---------- */ .rev{background:#fff;border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--hair)} .rev .stars{display:flex;gap:3px;color:var(--green)} .rev .stars svg{width:16px;height:16px} .rev p{font-size:1rem;line-height:1.5;color:var(--ink2)} .rev .who{font-size:.84rem;color:var(--muted);font-weight:600;margin-top:auto} .rev .badge{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-dk);background:var(--green-pale);border-radius:100px;padding:4px 10px;align-self:flex-start} /* ---------- PRICING TIERS ---------- */ .ptier{background:#fff;border:1.5px solid var(--hair);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;position:relative;transition:transform .3s var(--ease),border-color .2s} .ptier:hover{transform:translateY(-5px)} .ptier.feat{border-color:var(--green);box-shadow:0 24px 50px -30px rgba(14,148,69,.8)} /* --green is a decorative fill only (2.61:1 on white). Small white type sits on --green-cta (5.00:1), the token that exists for exactly this. */ .ptier .flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--green-cta);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:100px;padding:5px 14px;white-space:nowrap} .ptier h3{font-size:1.25rem;font-weight:600} .ptier .amt{font-family:'Poppins',var(--f);font-size:2.5rem;font-weight:600;color:var(--ink);letter-spacing:-.03em;margin:12px 0 2px} .ptier .amt small{font-size:.92rem;font-weight:500;color:var(--muted);letter-spacing:0} .ptier .btn{margin-top:20px;justify-content:center} .ptier .bullets{margin-top:16px;flex:1} /* ---------- STEPS / TIMELINE ---------- */ .tl{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;counter-reset:tl} @media(max-width:900px){.tl{grid-template-columns:1fr 1fr}}@media(max-width:560px){.tl{grid-template-columns:1fr}} .tl .s{position:relative;padding-top:30px} .tl .s::before{content:"";position:absolute;top:11px;left:0;right:0;height:1px;background:var(--hair)} .tl .s::after{counter-increment:tl;content:counter(tl);position:absolute;top:0;left:0;width:23px;height:23px;border-radius:50%;background:var(--green-cta);color:#fff;font-family:'Poppins',var(--f);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center} .tl .s h3{font-size:1.06rem;font-weight:600} .tl .s p{font-size:.92rem;margin-top:7px;line-height:1.5} .tl.on-dark .s::before{background:rgba(255,255,255,.18)} .tl.on-dark .s h3{color:#fff}.tl.on-dark .s p{color:rgba(255,255,255,.72)} /* ---------- FORMS ---------- */ .form{display:flex;flex-direction:column;gap:18px;max-width:520px} /* display:flex outranks the UA [hidden] rule, so a form swapped for a success panel would otherwise stay on screen */ .form[hidden]{display:none} .field{display:flex;flex-direction:column;gap:7px} .field label{font-weight:700;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .field input,.field select,.field textarea{font-family:var(--f);font-size:1rem;color:var(--ink);background:var(--paper);border:0;box-shadow:inset 0 0 0 1.5px var(--hair);border-radius:var(--r-s);padding:15px 17px;outline:none;transition:box-shadow .2s var(--ease),background .2s var(--ease)} .field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75} .field input:hover,.field select:hover,.field textarea:hover{box-shadow:inset 0 0 0 1.5px var(--muted)} .field input:focus,.field select:focus,.field textarea:focus{box-shadow:inset 0 0 0 2px var(--green-cta),0 0 0 4px var(--green-pale)} /* Same lesson as .btn:disabled in site.css: because this rule sets background, colour and border explicitly, the browser's own disabled rendering never shows. Three of these sit on the last screen before payment and looked fully live. Tokens only. */ .field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--oat);color:var(--muted);border-color:var(--hair);cursor:not-allowed} .field:has(input:disabled) label,.field:has(select:disabled) label,.field:has(textarea:disabled) label{color:var(--muted)} .field .hint{font-size:.8rem;color:var(--muted)} .field.err input,.field.err select,.field.err textarea{box-shadow:inset 0 0 0 2px var(--coral)} .field .msg,.form>.msg{font-size:.8rem;color:var(--coral)} .form .btn{align-self:stretch;justify-content:center;padding-top:16px;padding-bottom:16px;font-size:1rem} /* ---------- QUIZ / FUNNEL ---------- */ .qz{min-height:100vh;min-height:100svh;background:var(--cream);display:flex;flex-direction:column} .qz-top{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--hair)} .qz-top .in{max-width:760px;margin:0 auto;padding:14px clamp(18px,3vw,26px);display:flex;align-items:center;gap:16px} .qz-back{background:none;border:0;cursor:pointer;color:var(--muted);font-family:var(--f);font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:6px;padding:6px 4px} .qz-back:hover{color:var(--ink)} .qz-brand{display:flex;align-items:center;gap:9px;margin:0 auto} .qz-brand svg{width:26px;height:auto} .qz-brand span{font-family:'Poppins',var(--f);font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em} .qz-bar{height:3px;background:var(--hair);position:relative;overflow:hidden} .qz-bar i{position:absolute;inset:0 auto 0 0;background:var(--green);width:0;transition:width .45s var(--ease)} .qz-body{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:clamp(28px,6vh,64px) clamp(18px,3vw,26px) 80px} .qz-step{width:100%;max-width:640px;display:none;animation:qzin .4s var(--ease)} .qz-step.on{display:block} @keyframes qzin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .qz-step .qq{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.12} .qz-step .qh{margin-top:12px;font-size:1rem;color:var(--body);line-height:1.55;max-width:52ch} .qz-opts{display:flex;flex-direction:column;gap:11px;margin-top:26px} .qz-opt{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--hair);border-radius:var(--r-s);padding:17px 19px;cursor:pointer;font-size:1.02rem;font-weight:500;color:var(--ink);text-align:left;font-family:var(--f);transition:border-color .18s var(--ease),background .18s,transform .18s} .qz-opt:hover{border-color:var(--green);transform:translateX(3px)} .qz-opt.sel{border-color:var(--green);background:var(--green-pale)} .qz-opt .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--hair);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff} .qz-opt.sel .tick{background:var(--green);border-color:var(--green)} .qz-opt .tick svg{width:12px;height:12px;opacity:0} .qz-opt.sel .tick svg{opacity:1} .qz-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:26px} @media(max-width:520px){.qz-grid{grid-template-columns:1fr}} .qz-actions{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap} .qz-note{font-size:.84rem;color:var(--muted);margin-top:16px;display:flex;gap:8px;align-items:flex-start;line-height:1.5} .qz-note svg{width:15px;height:15px;flex:0 0 auto;color:var(--green);margin-top:2px} .qz-two{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:480px){.qz-two{grid-template-columns:1fr}} /* result / eligibility screens */ .qz-res{text-align:center;padding-top:10px} .qz-res .mark{width:74px;height:74px;border-radius:50%;background:var(--green-pale);color:var(--green-dk);display:flex;align-items:center;justify-content:center;margin:0 auto 20px} .qz-res .mark svg{width:34px;height:34px} .qz-res .mark.soft{background:var(--peach);color:var(--coral)} .qz-res h2{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:600;letter-spacing:-.03em} .qz-res p{margin:14px auto 0;max-width:46ch;font-size:1.02rem;line-height:1.55} .qz-bmi{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:22px;margin-top:24px;display:flex;justify-content:space-around;gap:16px;text-align:center;flex-wrap:wrap} .qz-bmi div b{display:block;font-family:'Poppins',var(--f);font-size:1.7rem;font-weight:600;color:var(--ink)} .qz-bmi div span{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600} .qz-disc{max-width:640px;margin:0 auto;padding:0 clamp(18px,3vw,26px) 40px;font-size:.74rem;line-height:1.65;color:var(--muted);text-align:center} /* ---------- CHECKOUT / ORDER SUMMARY ---------- */ .co{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);align-items:start} /* The checkout form cards borrow .tile for its radius and padding only. A marketing card's 4px hover lift moves the field the visitor is filling in, so the lift is off inside .co. .tile:hover stays correct everywhere else. */ .co .tile{transition:none} .co .tile:hover{transform:none} @media(max-width:900px){.co{grid-template-columns:1fr}} /* The order summary pins BELOW the checkout's own sticky bar, never under it. .qz-top is sticky at top:0 with an opaque cream background and z-index 20, and measures ~66px tall, so a bare top:24px parked the summary's "Your program" heading behind the bar for the whole scroll of the last screen before payment. 66 + the original 24px gutter = 90px. .co collapses to one column at 900px, so this only ever applies where the two-column layout is live. */ .osum{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:26px;position:sticky;top:90px} .osum h3{font-size:1.1rem;font-weight:600;margin-bottom:16px} .osum .li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:.96rem} .osum .li .n{color:var(--body)} .osum .li .a{font-weight:600;color:var(--ink);white-space:nowrap} .osum .tot{display:flex;justify-content:space-between;gap:14px;padding-top:16px;margin-top:6px;font-weight:700;font-size:1.14rem;color:var(--ink)} .osum .prod-mini{display:flex;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--hair);margin-bottom:8px} .osum .prod-mini .im{width:64px;height:64px;border-radius:14px;overflow:hidden;background:#0b0a06;flex:0 0 auto} .osum .prod-mini .im video,.osum .prod-mini .im img{width:100%;height:100%;object-fit:cover} .osum .prod-mini b{display:block;font-size:1rem;color:var(--ink)} .osum .prod-mini span{font-size:.85rem;color:var(--muted)} .trustrow{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:.85rem;color:var(--muted)} .trustrow span{display:flex;align-items:center;gap:7px} .trustrow svg{width:15px;height:15px;color:var(--green)} /* ---------- CLOSING CTA BAND (reusable) ---------- */ /* The band is a solid-colour section, so BUILD-CONTRACT §5 makes the brand glyph field mandatory on it. Carrying that in the component instead of asking every page to remember `class="tex-d"` is why 10 of the 17 bands were rendering as flat black slabs beside 7 textured ones. The rule below is the .tex-d body, so pages that already carry the class are unaffected. */ .ctaband{background:var(--ink);color:#fff;text-align:center;overflow:hidden;position:relative} .ctaband::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask:url(../img/tex.svg) 0 0/170px 170px;mask:url(../img/tex.svg) 0 0/170px 170px;background:#fff;opacity:.05} .ctaband>.wrap{position:relative;z-index:1} .ctaband h2{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:600;color:#fff;letter-spacing:-.03em;max-width:20ch;margin:0 auto} .ctaband p{color:rgba(255,255,255,.76);max-width:52ch;margin:16px auto 0;font-size:1.04rem;line-height:1.55} .ctaband .cta{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap} .ctaband .fine{font-size:.78rem;color:rgba(255,255,255,.45);margin-top:20px} /* ---------- TEAM / PROVIDER CARD (about) ---------- */ .person{background:var(--cream);border-radius:var(--r);padding:26px;display:flex;flex-direction:column} .person .ph{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--green-pale);margin-bottom:16px;display:flex;align-items:center;justify-content:center;color:var(--green-dk);font-family:'Poppins',var(--f);font-weight:600;font-size:1.6rem;letter-spacing:.02em} .person .ph img{width:100%;height:100%;object-fit:cover} .person h3{font-size:1.14rem;font-weight:600} .person .role{font-weight:600;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dk);margin-top:5px} .person p{font-size:.92rem;margin-top:9px;line-height:1.5} /* ---------- STAT STRIP ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px} @media(max-width:880px){.stats{grid-template-columns:1fr 1fr}} .stat{background:var(--oat);border-radius:var(--r);padding:26px;text-align:center} .stat b{display:block;font-family:'Poppins',var(--f);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:600;color:var(--ink);letter-spacing:-.03em} .stat span{font-size:.82rem;color:var(--muted);font-weight:600;letter-spacing:.03em;margin-top:6px;display:block;line-height:1.4} .stats.on-dark .stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)} .stats.on-dark .stat b{color:#fff}.stats.on-dark .stat span{color:rgba(255,255,255,.6)} /* ---------- ARTICLE / LEARN CARDS ---------- */ .post{background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease)} .post:hover{transform:translateY(-4px)} .post .im{aspect-ratio:16/9;background:#0f0e0b;overflow:hidden} .post .im img{width:100%;height:100%;object-fit:cover} .post .bd{padding:22px;display:flex;flex-direction:column;flex:1} .post .cat{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dk)} .post h3{font-size:1.12rem;font-weight:600;margin-top:8px;line-height:1.25} .post p{font-size:.92rem;margin-top:8px;line-height:1.5;flex:1} .post .rd{font-size:.82rem;color:var(--muted);margin-top:14px} /* an unwritten guide is not a link: no photo, no hover lift, and it reads as scheduled rather than as a card that failed to load */ .post.soon{background:var(--oat);border-color:var(--hair)} .post.soon:hover{transform:none} .post.soon .cat{color:var(--muted)} .post.soon h3{color:var(--ink2)} .post.soon .im{background:var(--green-pale);display:flex;align-items:center;justify-content:center} .post.soon .im span{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dk)} /* ---------- ACCESSIBILITY + MOTION SAFETY ---------- */ a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.qz-opt:focus-visible,.plan:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px} .skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-s) 0;font-weight:600} .skip:focus{left:0} @media(prefers-reduced-motion:reduce){.qz-step{animation:none}.tile:hover,.post:hover,.ptier:hover{transform:none}} /* programmatic focus target (quiz step headings) must not paint a default ring */ [tabindex="-1"]:focus{outline:none} /* ---------- FUNNEL: named stage rail + live BMI (research: TrimRx / Framework) ---------- */ .qz-rail{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px 0;flex-wrap:wrap} /* the display:flex above outranks the UA [hidden] rule, so the care lane could not hide the GLP-1 stage rail without this */ .qz-rail[hidden]{display:none} .qz-rail .st{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--muted);white-space:nowrap} .qz-rail .st i{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--hair);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:.6rem;background:#fff;transition:background .3s var(--ease),border-color .3s} .qz-rail .st.on{color:var(--ink)} .qz-rail .st.on i{border-color:var(--green);background:var(--green-pale)} .qz-rail .st.done i{background:var(--green-cta);border-color:var(--green-cta);color:#fff} .qz-rail .sep{width:14px;height:1px;background:var(--hair);flex:0 0 auto} @media(max-width:560px){.qz-rail .st span{display:none}.qz-rail .sep{width:20px}} .bmi-live{margin-top:20px;background:var(--green-pale);border-radius:var(--r-s);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .bmi-live.on{opacity:1;transform:none} .bmi-live b{font-family:'Poppins',var(--f);font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1} .bmi-live span{font-size:.84rem;color:var(--body);font-weight:600} .bmi-live .lbl{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px} /* ---------- BRANDED QUIZ MODAL (funnel as a pop-up on any page) ---------- */ .qm-back{position:fixed;inset:0;z-index:300;background:rgba(15,12,7,.62);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)} .qm-back.on{opacity:1;pointer-events:auto} .qm{position:fixed;z-index:301;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);width:min(96vw,720px);height:min(92vh,860px);background:var(--cream);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 100px -30px rgba(11,25,15,.7);opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)} .qm.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto} .qm-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--ink);color:#fff;flex:0 0 auto} .qm-head .mk{width:26px;height:auto;flex:0 0 auto} .qm-head b{font-family:'Poppins',var(--f);font-weight:600;font-size:1rem;letter-spacing:-.01em} .qm-head small{display:block;font-weight:500;font-size:.74rem;color:rgba(255,255,255,.66);margin-top:1px} .qm-head .sp{flex:1} .qm-x{background:rgba(255,255,255,.12);border:0;color:#fff;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .qm-x:hover{background:rgba(255,255,255,.22)} .qm iframe{flex:1;width:100%;border:0;display:block;background:var(--cream)} @media(max-width:600px){.qm{width:100vw;height:100dvh;border-radius:0;top:0;left:0;transform:none}.qm.on{transform:none}} @media(prefers-reduced-motion:reduce){.qm,.qm-back{transition:none}} /* ---------- INTERIOR HERO MOTION ---------- The homepage hero is a real video. Interior heroes carry the same feeling with a slow cinematic drift (Ken Burns) on the still, so no page feels dead next to the homepage. Direction varies per page so it never reads templated. Swap any .pbg for a