/* CoreCheck+ — page CSS, verbatim from the APPROVED published build
   (hyperagent.com/s/JO0K4-dLYsUACzfRnAAPIQ, fetched 10 Aug 2026).
   This is the page's own second <style> block; the base design system that
   preceded it inline is now the shared /assets/elixium-base.css. */
/* ---------------------------------------------------------------------------
   PAGE-SCOPED ADDITIONS. Every value here is taken from a token that already
   exists in elixium-base.css — no new colours, sizes or visual language.
   elixium-base.css itself is untouched.

   .mtag      the men / women marker tags, and the "includes" chips on the
              system cards. Exact values of the existing `.price-card li .inc`
              badge, promoted out of that one scoped selector so it can be
              used inline.
   .inc-sep   modifier on that same badge, recoloured with the system's own
              --amber pair. Without it "purchased separately" is the same
              mint-green as "included", which would imply medication is part
              of the membership — the one thing the rules forbid implying.
   .chips     flex wrapper for a row of .mtag chips.
   .steps-3   .steps is repeat(4,1fr) at desktop. Two sections here have three
              steps, which would leave a hole in a four-column grid.
   .checks-2  .checks is a single column. Two sections here use it for short
              labels where one column would run absurdly long.
   .portal    narrow-viewport fix — see the comment on that rule.
   ------------------------------------------------------------------------ */
.mtag{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#2f6a4c;background:var(--pale);padding:4px 8px;border-radius:6px;white-space:nowrap;vertical-align:middle;margin-left:6px}
.bg-deep .mtag,.bg-mid .mtag{color:var(--mint);background:rgba(149,213,179,.14)}
.price-card li .inc.inc-sep{color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-line)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chips .mtag{margin-left:0}
.chips-h{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-top:20px}
.bg-deep .chips-h,.bg-mid .chips-h{color:rgba(255,255,255,.5)}
/* elixium-base.css lightens .med-disclaimer on .bg-deep but not on .bg-mid,
   where the default ink-muted is unreadable. Mirrors the existing rule. */
.bg-mid .med-disclaimer{color:rgba(255,255,255,.55);border-color:rgba(149,213,179,.4)}

/* ---------------------------------------------------------------------------
   .checks ON A LIGHT BACKGROUND — worth raising upstream, same class of gap
   as the .portal fix below.
   elixium-base.css hard-codes `.checks span{color:rgba(255,255,255,.66)}` and
   gives the tick a mint stroke on a 14%-mint disc. That is correct on the dark
   sections it was written for, but on .bg-pale the descriptions are white text
   on a pale ground — effectively invisible — and the ticks nearly vanish too.
   This mirrors the on-light treatment the system already uses elsewhere
   (.on-light .eyebrow and .why-ic both switch to #2f6a4c / #1c4331).
   ------------------------------------------------------------------------ */
.bg-pale .checks span{color:var(--ink-muted)}
.bg-pale .checks .ck{background:rgba(47,106,76,.12)}
.bg-pale .checks .ck svg{stroke:#2f6a4c}

/* ---------------------------------------------------------------------------
   TREND FIGURE — photograph with a results card over it.
   The numbers are live HTML, not baked into the image. That is deliberate: the
   hero image arrived with four wrong values fused into its pixels and they
   cannot be corrected without regenerating the file. Text in markup stays
   legible at every width, is selectable and accessible, and can be edited in
   one place.
   The sparkline viewBox is 286x32 — the card's inner width — so it scales
   uniformly and the stroke weights and data dots never distort.
   ------------------------------------------------------------------------ */
.trend-figure{position:relative;margin-bottom:30px}
.trend-figure .im{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9}
.trend-figure .im img{width:100%;height:100%;object-fit:cover}
.trend-card{background:#fff;border:1px solid var(--line-light);border-radius:var(--r-md);padding:20px 22px;box-shadow:0 34px 74px -38px rgba(8,28,20,.55);margin:-46px 16px 0;position:relative}
@media(min-width:860px){
  .trend-card{position:absolute;top:32px;right:32px;width:330px;margin:0}
}
.trend-h{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:#2f6a4c;background:var(--pale);border-radius:6px;padding:5px 9px;display:inline-block}
.tm{padding:13px 0 4px;border-top:1px solid var(--line-light);margin-top:12px}
.tm .lbl{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.tm .vals{display:flex;align-items:baseline;gap:7px;margin-top:5px}
.tm .from{font-family:var(--font-display);font-weight:500;font-size:1.02rem;color:var(--ink-muted)}
.tm .arw{color:var(--sage)}
.tm .to{font-family:var(--font-display);font-weight:700;font-size:1.45rem;letter-spacing:-.02em;color:var(--ink);line-height:1}
.tm .u{font-size:.72rem;color:var(--ink-muted)}
.tm .spark{width:100%;height:32px;margin-top:10px;display:block}
.tm .spark polyline{fill:none;stroke:#2f6a4c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tm .spark circle{fill:#fff;stroke:#2f6a4c;stroke-width:2}

@media(min-width:700px){.checks.checks-2{grid-template-columns:1fr 1fr;column-gap:34px}}

/* ---------------------------------------------------------------------------
   SYSTEM CARDS AT TABLET WIDTH.
   elixium-base.css makes .cond-scroll a 240px snap-scrolling row below 900px
   and a three-column grid at 900px and up. The row is right on a phone — one
   card with the next peeking is a clear affordance. At tablet width it is not:
   at 820px you get three cards with the third sliced by the viewport edge, no
   peek, no visible scrollbar, and cards four and five stranded off-screen —
   on a viewport with ample room for a grid.
   Two columns from 620px closes the gap. Three columns there would drop each
   card to ~226px, narrower than the scroll row it replaced, and the chips
   would rag badly.
   ------------------------------------------------------------------------ */
@media(min-width:620px) and (max-width:899px){
  .cond-scroll{display:grid;grid-template-columns:1fr 1fr;gap:22px;overflow:visible;padding:4px 0 0;margin:0;scroll-snap-type:none}
  .cond-card{flex:none;width:auto;scroll-snap-align:none}
}

/* ---------------------------------------------------------------------------
   FEWER BOXES.
   The page had 31 bordered, same-radius cards. Two sections carry a genuine
   sequence, so they get shapes that express it instead of more cards:

   .tl       a real timeline — hairline rail, ring nodes, no chrome. Vertical
             on phones, horizontal from 820px. Used for the year of care.
   .bignum   ghost numerals and hairline rules. Deliberately NOT a second
             timeline; two timelines on one page is the same monotony in a new
             costume. Used for the draw prep.

   .step / .steps are no longer used on this page. They remain untouched in
   elixium-base.css for the rest of the site.
   ------------------------------------------------------------------------ */
.tl{display:grid;gap:0;list-style:none}
.tl-item{position:relative;padding:0 0 28px 28px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:5px;top:15px;bottom:0;width:1px;background:var(--line-mint)}
.tl-item:last-child::before{display:none}
.tl-dot{position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;border:2px solid var(--mint);background:var(--green-800)}
@media(min-width:820px){
  .tl{grid-template-columns:repeat(4,1fr);column-gap:30px}
  .tl-item{padding:32px 0 0}
  .tl-item::before{left:5px;right:-30px;top:5px;bottom:auto;width:auto;height:1px}
  .tl-dot{top:0}
}
.tl .when{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:9px}
.tl h3{font-size:1.14rem;margin-bottom:8px}
.tl p{color:rgba(255,255,255,.7);font-size:.93rem}

.bignum{list-style:none;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line-dark)}
@media(min-width:820px){.bignum{grid-template-columns:repeat(3,1fr);column-gap:44px}}
.bignum li{padding:26px 0;border-bottom:1px solid var(--line-dark);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
@media(min-width:820px){.bignum li{border-bottom:0}}
.bignum .n{font-family:var(--font-display);font-weight:700;font-size:2.1rem;line-height:.9;letter-spacing:-.03em;color:rgba(149,213,179,.3)}
.bignum h3{font-size:1.1rem;margin-bottom:7px}
.bignum p{color:rgba(255,255,255,.7);font-size:.93rem}

/* The two portal callouts were two more bordered cards. A hairline rule and a
   bare icon carry the same emphasis without another rectangle. */
.portal{background:none;border:0;border-top:1px solid var(--line-mint);border-radius:0;padding:24px 0 0;margin-top:38px;gap:16px;align-items:start}
.portal .pic{background:none;width:26px;height:26px;border-radius:0;margin-top:3px}
.portal .pic svg{width:26px;height:26px}

/* ---------------------------------------------------------------------------
   MEMBERSHIP SECTION — restructured for a calmer hierarchy.
   Three focal points only: the headline, the membership card, the comparison.
   Everything else supports them. Same type scale, same palette, same card
   language — this changes arrangement and weight, not the design system.

   .quiet     drops the med-callout's mint border and icon so it reads as a
              calm aside rather than a warning.
   .feat      the left column's feature grid. Plain weight, not bold, so every
              item carries equal visual weight; tighter than .checks, and no
              mint discs competing with the card's own ticks.
   .plist     the card's feature list: ticks only. .price-card li is built for
              name-plus-badge rows with rules between them, which is exactly
              the busyness this brief asks to remove.
   .compare   deliberately dark. A second white card would compete with the
              membership card for the same focal point; a translucent panel
              sits underneath it in the hierarchy instead.
   ------------------------------------------------------------------------ */
.med-callout.quiet{background:rgba(255,255,255,.035);border-color:var(--line-dark)}
.med-callout.quiet .h{margin-bottom:9px}

.feat{list-style:none;display:grid;grid-template-columns:1fr;gap:11px;margin-top:14px}
@media(min-width:640px){.feat{grid-template-columns:1fr 1fr;column-gap:28px}}
.feat li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.96rem;color:rgba(255,255,255,.86);line-height:1.45}
.feat svg{width:16px;height:16px;stroke:var(--mint);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}

.price-card .amt.tight{margin-bottom:10px}
.price-card .plist{list-style:none;display:grid;gap:13px;margin:0 0 28px}
.price-card .plist li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;padding:0;border:0;font-size:.98rem}
.price-card .plist svg{width:17px;height:17px;stroke:#2f6a4c;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}

.compare{background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--r-md);padding:24px 26px;margin-top:22px}
.compare h4{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);font-weight:400;margin-bottom:12px}
.compare .crow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-dark);font-size:.95rem;color:rgba(255,255,255,.82)}
.compare .crow:last-of-type{border-bottom:0}
.compare .crow b{font-family:var(--font-display);font-weight:600;color:#fff}
.compare .note{font-size:.83rem;color:rgba(255,255,255,.55);line-height:1.65;margin-top:14px}

/* more air between the two columns; top-aligned now the right column stacks */
@media(min-width:920px){.pricing-grid{gap:72px;align-items:start}}

/* ---------------------------------------------------------------------------
   MEMBER WALKTHROUGH — tabbed. Replaces three equal cards, which read as a
   feature list rather than a story.
   Real <button role="tab"> elements in a tablist, with arrow-key support and
   aria-selected, so it is operable from the keyboard and announced correctly.
   Tabs scroll horizontally below 900px per the brief.
   ------------------------------------------------------------------------ */
.tabs{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;margin-bottom:28px;padding:2px 6vw;margin-inline:-6vw}
.tabs::-webkit-scrollbar{display:none}
@media(min-width:900px){.tabs{padding:2px 0;margin-inline:0}}
.tab{flex:0 0 auto;background:transparent;border:1px solid var(--line-dark);color:rgba(255,255,255,.74);font-family:var(--font-body);font-weight:500;font-size:.95rem;padding:12px 22px;border-radius:100px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.tab:hover{color:#fff;border-color:var(--line-mint)}
.tab:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.tab[aria-selected="true"]{background:var(--mint);border-color:var(--mint);color:var(--green-950)}

.tpanel{display:none}
.tpanel.on{display:block;animation:tfade .42s cubic-bezier(.16,.8,.3,1)}
@keyframes tfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tpanel.on{animation:none}}
.tpanel-inner{background:rgba(255,255,255,.035);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:1fr;box-shadow:0 44px 90px -50px rgba(0,0,0,.7)}
@media(min-width:900px){.tpanel-inner{grid-template-columns:60% 40%}}
.tpanel .im{min-height:230px}
.tpanel .im img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:900px){.tpanel .im{min-height:450px}}
.tpanel .bd{padding:32px 30px 36px}
@media(min-width:900px){.tpanel .bd{padding:46px 42px;display:flex;flex-direction:column;justify-content:center}}
.tpanel .num{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--mint);margin-bottom:11px}
.tpanel h3{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-bottom:13px}
.tpanel .desc{color:rgba(255,255,255,.74);font-size:.99rem;margin-bottom:24px}
.tpanel ul{list-style:none;display:grid;gap:11px}
.tpanel li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.93rem;color:rgba(255,255,255,.8);line-height:1.5}
.tpanel li svg{width:15px;height:15px;stroke:var(--mint);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.tpanel .fine{font-size:.78rem;color:rgba(255,255,255,.5);margin-top:20px;line-height:1.6}

/* ---------------------------------------------------------------------------
   FLIGHT PLAN BADGE — overlaid on the care-plan photograph.
   Modelled on the real Hollow card: mint rule across the top, dark panel,
   focus area, plan items. Built in markup rather than baked into the picture,
   for the same reason as the trend card — the hero image's fused-in values
   can't be corrected, these can.
   Note it reads "Flight Plan" because that is what the product calls it; the
   tab above still says "Your care plan". See README.
   ------------------------------------------------------------------------ */
.tpanel .im{position:relative}
.hcard{position:absolute;left:22px;bottom:22px;width:min(285px,64%);background:rgba(8,20,14,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-dark);border-radius:var(--r-md);overflow:hidden;box-shadow:0 26px 62px -30px rgba(0,0,0,.85)}
.hcard .bar{height:3px;background:var(--mint)}
.hcard .in{padding:15px 17px 16px}
.hcard .hd{display:flex;align-items:center;gap:8px;margin-bottom:13px}
.hcard .hd svg{width:16px;height:16px;color:var(--mint);flex:0 0 auto}
.hcard .hd b{font-family:var(--font-display);font-weight:600;font-size:.94rem;color:#fff}
.hcard .lbl{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.hcard .foc{font-size:.83rem;color:rgba(255,255,255,.88);margin-bottom:13px}
.hcard ul{list-style:none;display:grid;gap:7px}
.hcard li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;font-size:.78rem;color:rgba(255,255,255,.74);line-height:1.4}
.hcard li svg{width:12px;height:12px;stroke:var(--mint);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.hcard .sig{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-dark);font-size:.7rem;color:rgba(255,255,255,.48)}

/* message variant — the care-team notification on tab 4 */
.hcard .mhd{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.hcard .ava{width:27px;height:27px;border-radius:50%;background:rgba(149,213,179,.16);display:flex;align-items:center;justify-content:center;color:var(--mint);flex:0 0 auto}
.hcard .ava svg{width:14px;height:14px}
.hcard .who{font-family:var(--font-display);font-weight:600;font-size:.83rem;color:#fff;line-height:1.15}
.hcard .ago{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:3px}
.hcard .msg{font-family:var(--font-display);font-weight:600;font-size:.88rem;color:#fff;margin-bottom:6px;line-height:1.3}
.hcard .msgb{font-size:.78rem;color:rgba(255,255,255,.72);line-height:1.45;margin-bottom:14px}
/* Depicted, not operable. A real control here would be a second CTA
   destination, which the one-entry-point rule forbids — so it is a <span>. */
.hcard .btnish{display:inline-flex;align-items:center;gap:7px;background:var(--mint);color:var(--green-950);font-family:var(--font-body);font-weight:600;font-size:.76rem;padding:8px 15px;border-radius:10px}
.hcard .btnish svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* On a phone the panel image is only ~230px tall, and an overlaid badge covers
   almost all of it. Below 620px the badge drops out of the overlay and sits
   under the photo, overlapping its lower edge — the same treatment the trend
   card uses. Both the picture and the card stay fully visible. */
@media(max-width:619px){
  .tpanel .im{min-height:0}
  .tpanel .im img{height:auto;aspect-ratio:3/2}
  .hcard{position:static;width:auto;margin:-44px 14px 0;box-shadow:0 20px 44px -26px rgba(0,0,0,.8)}
}

/* ---------------------------------------------------------------------------
   NARROW-VIEWPORT FIX for .portal — worth raising upstream.
   .portal in elixium-base.css is `grid-template-columns:auto 1fr` at every
   width. At 380px the 52px icon column leaves the copy about 185px wide, which
   rags badly and floats the icon away from the heading. Stacking it below
   560px fixes it. Kept here, page-scoped, rather than edited into
   elixium-base.css — that file is shared with the Membership site and has the
   same issue, so it should be fixed there deliberately, not as a side effect
   of this page.
   ------------------------------------------------------------------------ */
@media(max-width:560px){
  .portal{grid-template-columns:1fr;gap:16px;align-items:start}
}

/* ---------------------------------------------------------------------------
   HERO CROP ON NARROW SCREENS.
   elixium-base.css sets .hero-bg img to object-position:66% below 900px, which
   was tuned for the Membership hero. With this hero that window lands halfway
   through the results panel, slicing it mid-card and truncating the values —
   the same failure the base stylesheet's own comment describes for the old
   photo's chat bubble.

   The panel begins at roughly 69% across the source image. At 380px the visible
   window is about 514 source-pixels wide, so a 52% position frames
   approximately 531-1045: the subject's face is fully in, the panel is fully
   out. Phones get the portrait, desktop keeps the panel.
   ------------------------------------------------------------------------ */
@media(max-width:899px){
  .hero-bg img{object-position:52% center}
}