/* Type comes from /shared/css/platform-fonts.css (Manrope / Cormorant Garamond /
   IBM Plex Mono), linked ahead of this file on every landing. Formular was
   retired from the network on 2026-08-15 and now belongs to Short/IREM only. */
/* ============================================================================
   CenterWay landing component DS — ONE shared component system for the whole
   platform-author network (way21 / reset-day / dosha / consult / herbs).

   Extracted from the premium way21/reset-day pattern. Every landing links this
   plus shared/css/network-tokens.css (the token contract) and gets identical
   structure, spacing, type, cards, buttons, sections. Per-landing difference is
   ONLY: colour palette (network-tokens.css skin), photos/imagery, icons, copy,
   and which/how-many blocks a page composes.

   Colours resolve through the local dialect names (--ink/--indigo/--cta/…),
   which network-tokens.css maps to --cw-net-* (traceable to platform --cw-sem-*).
   Brand-divergent gradient/shadow tints are tokenised to color-mix(var(--…)) so
   this file carries no per-brand literals.
   Fonts and scale live in network-tokens.css.
   ============================================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--f-ui);
  color:var(--text);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* film grain + atmosphere */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(1100px 620px at 78% -8%, color-mix(in srgb, var(--indigo) 16%, transparent), transparent 60%),
    radial-gradient(900px 520px at -6% 22%, rgba(219,165,79,.06), transparent 55%),
    radial-gradient(800px 800px at 110% 90%, color-mix(in srgb, var(--indigo) 10%, transparent), transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* THE GUTTER IS A FLOOR, NOT A CONSTANT (2026-08-28).
   The pages now declare `viewport-fit=cover`, so on a notched phone held
   sideways the layout runs UNDER the sensor housing — the gutter has to grow
   past the notch on the side it lands on, or a line of text sits behind it.
   In portrait, and on every phone without a cutout, both insets are 0 and this
   is the gutter it always was. */
.wrap{max-width:var(--maxw);margin-inline:auto;
  padding-inline:max(var(--cw-page-gutter),env(safe-area-inset-left)) max(var(--cw-page-gutter),env(safe-area-inset-right));
  position:relative;z-index:1}
section{position:relative;z-index:1}
h1,h2,h3{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-weight:var(--f-display-weight,700);line-height:var(--f-display-leading,1.08);letter-spacing:var(--f-display-track,-.025em);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ============ TYPE SCALE ============ */
.kicker{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--indigo);display:inline-flex;align-items:center;gap:.6em;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--line-strong)}
h2.sec-title{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:24ch}
.sci-grid h2.sec-title{max-width:none}
.lead{font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--text-muted);max-width:62ch;line-height:1.66}

/* ============ BUTTONS ============ */
/* The button contract, network side. Every axis here is the platform's token
   (see docs/design-system.md → "Buttons"); only the colours are the skin's.
   This used to be padding-driven with NO min-height, at 1.02rem and a -2px
   lift, against the platform's 3rem / 1rem / -1px — four axes apart on what is
   meant to be one button. Height is a min, not a fixed: a wrapped label on a
   narrow phone still grows the control instead of clipping. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);
  font-family:var(--f-ui);font-weight:var(--btn-weight);font-size:var(--btn-fs);
  min-height:var(--btn-h);padding:0 var(--btn-px);
  border-radius:var(--r-btn);border:0;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
  text-align:center;line-height:1.1;white-space:nowrap;
}
/* Gold ramp, not a flat fill — the same accent → accent-pressed the platform
   runs. It stays inside the gold family: an older ramp ran into the deep green
   and muddied into olive. */
.btn-primary{background:linear-gradient(135deg,var(--cta),var(--cta-strong));color:var(--on-cta);box-shadow:var(--shadow-cta)}
.btn-primary:hover{transform:translateY(var(--btn-lift));box-shadow:var(--shadow-cta-hover)}
.btn-primary .arr{transition:transform .25s}
.btn-primary:hover .arr{transform:translateX(4px)}
/* The contract's `quiet`, not `secondary` — and the distinction is measured,
   not stylistic. `secondary` is a surface plate, which works on the platform
   because its canvas and its surface are different colours. Here they are the
   same: a plate measured **1.00** against the ground behind it, the button
   simply not there. That is the documented 1.08 failure again, so this takes
   the sunk fill plus --cw-mat-stroke-control, the one stroke token held to
   WCAG 1.4.11's 3:1 in both themes.

   The old recipe had the right instinct — it drew a boundary — with arbitrary
   parts: a 1.5px --line-strong, and a hover that swapped border, text AND
   background to the route green, a colour change no second action makes
   anywhere else in the product. */
.btn-ghost{background:var(--cw-mat-surface-sunk);color:var(--ink);border:1px solid var(--cw-mat-stroke-control)}
.btn-ghost:hover{transform:translateY(var(--btn-lift));box-shadow:var(--shadow-soft)}

/* ============ BRAND ROW ============ */
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:1.3rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.brand-mark{width:var(--cw-net-brand-mark,2.25rem);height:var(--cw-net-brand-mark,2.25rem);flex:0 0 auto;transition:opacity .25s}
.brand:hover .brand-mark{opacity:.75}

/* ============ HERO — text overlaid on full-width photo ============ */
.hero{position:relative;padding-top:clamp(18px,5vw,32px);padding-bottom:var(--sp-sec);overflow:hidden}

/* mobile: photo first; badge sits ON the photo just above the title */
.hero-grid{position:relative;display:flex;flex-direction:column}
.hero-visual{order:1;position:relative;z-index:1;width:100%;margin-top:0;pointer-events:none}
.hero-badge{order:2;position:relative;z-index:2;margin-top:-62%}
.hero-copy{order:3;position:relative;z-index:2;display:flex;flex-direction:column;margin-top:0}
.hero-actions{order:4;position:relative;z-index:2;display:flex;flex-direction:column;gap:.85rem}

/* One glass recipe for badge and chips alike — same warm tint, same ink text.
   This is the DAY tone: it applies wherever they sit on the cream page, which
   since the photo-hero rollout means desktop only. On mobile every landing runs
   the photo hero, where the same two components take the night tone instead —
   see the [data-cw-hero="photo"] block further down. The media floor (86%) is
   what lets this one hold dark ink over any photo content behind it. */
.hero-badge,.hero-chips span{
  display:inline-flex;align-items:center;font-size:var(--chip-fs);font-weight:600;
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--ink);background:var(--cw-net-mat-tint-media);
  backdrop-filter:var(--cw-net-mat-filter);-webkit-backdrop-filter:var(--cw-net-mat-filter);
  border:1px solid var(--cw-net-mat-stroke);box-shadow:var(--cw-net-mat-shadow-raised);
  padding:calc(var(--chip-py) + var(--chip-nudge)) var(--chip-px) calc(var(--chip-py) - var(--chip-nudge));border-radius:var(--r-pill);line-height:1;white-space:nowrap}
.hero-badge::before,.hero-chips span::before{content:"";position:absolute;inset:0;background-image:var(--cw-net-mat-grain);opacity:.6;pointer-events:none;z-index:-1}
.hero-badge{gap:.6em;margin-bottom:.85rem;align-self:flex-start}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--cta);box-shadow:0 0 0 3px rgba(219,165,79,.16)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:.65rem;line-height:1.1}
.hero h1 em{font-style:normal;color:var(--indigo)}
.hero-sub{font-size:clamp(.95rem,2.8vw,1.1rem);color:var(--text-muted);line-height:1.5;margin-bottom:1.25rem}

.hero-chips{display:flex;flex-wrap:wrap;gap:.45rem}

.hero-price{display:flex;align-items:baseline;gap:.5em}
.hero-price b{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:2.1rem;font-weight:700;color:var(--ink);line-height:1}
.hero-price small{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;color:var(--text-soft);text-transform:uppercase}

.hero-actions .btn{width:100%;justify-content:center}
/* CTA labels remain a single, readable action on every breakpoint. */
.hero-actions .btn,.sticky-cta .btn,.offer .btn-primary,.short-cta .btn,.fc-cta,.lead-form__submit,.lead-modal__submit{white-space:nowrap;line-height:1.1}

.hero-trust{display:flex;align-items:flex-start;gap:.5em;font-size:.84rem;color:var(--text-soft);line-height:1.44}
.hero-trust svg{flex:0 0 auto;color:var(--indigo);margin-top:2px}
.refund-policy-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.refund-policy-link:hover{text-decoration-thickness:2px}
.refund-policy-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* photo stage — full-portrait hero photo */
/* Fade the photo into the page with an OPAQUE cream overlay rather than an alpha
   mask. iOS Safari rasterises a hairline at a mask gradient's transparent edge
   (the bottom photo contour); painting cream over the lower photo avoids any mask
   compositing. The 0%-alpha stop uses transparent-cream (not the `transparent`
   keyword) so it doesn't interpolate through black and leave a dark fringe. */
.hv-stage{position:relative;width:100%;max-width:none;aspect-ratio:2/3;background:transparent}
.hv-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to bottom,color-mix(in srgb, var(--cream) 0%, transparent) 24%,color-mix(in srgb, var(--cream) 55%, transparent) 47%,var(--cream) 66%)}
.hv-wave{display:none}
.hv-glow{display:none}
/* The photo may be wrapped in <picture> to serve a portrait master to the
   full-bleed mobile hero. The wrapper is an inline box with no in-flow content
   (its img is absolutely positioned), so it is taken out of the flow entirely
   rather than left to generate a stray line box inside the stage. */
.hv-stage picture{display:contents}
.hv-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  z-index:1;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.hv-stat{display:none}

/* ============ PHOTO HERO — mobile only, opt-in ============
   `data-cw-hero="photo"` swaps the mobile hero from "photo card, copy on cream"
   to a full-bleed photograph with the copy anchored to the bottom. Desktop
   (>=881px) is untouched: the two-column card layout below still owns it, so
   the portrait masters keep working without landscape re-shoots.

   Contrast is not left to the photo. The copy never sits on the image itself:
   it sits on .wrap::before, an opaque-enough scrim (92% of the brand dark) that
   composites to 0.045 relative luminance even over a pure white pixel — darker
   than the inverse panel ground the rest of the DS already asserts. That is the
   pair checked in scripts/guard-contrast.mjs; lower the 92% and it fails.
   The badge and chips DO get a variant here — the night tone, see below. */
@media(max-width:880px){
  [data-cw-hero="photo"] .hero,
  [data-cw-hero="photo"] .cwn--anchored ~ .hero{
    min-height:100svh;
    display:flex;align-items:flex-end;
    padding-top:0;padding-bottom:0;
    /* Ground for the part of the screen the photo layer does not cover — see
       --cw-hero-photo-height. With the default (full height) it never shows. */
    background-color:var(--cw-net-hero-scrim);
  }
  [data-cw-hero="photo"] .hero .wrap{position:relative;z-index:2;width:100%}
  /* The scrim under the copy: uniform, so every line has the same ground
     regardless of what the photograph does behind it. */
  [data-cw-hero="photo"] .hero .wrap::before{
    content:"";position:absolute;left:0;right:0;top:0;bottom:-1px;z-index:1;
    background:color-mix(in srgb, var(--cw-net-hero-scrim) 92%, transparent);
  }
  /* …and a fade strip above it, so the band does not start on a hard edge. */
  [data-cw-hero="photo"] .hero .wrap::after{
    content:"";position:absolute;left:0;right:0;bottom:100%;z-index:1;
    height:clamp(128px,24vh,224px);
    background:linear-gradient(to bottom,
      color-mix(in srgb, var(--cw-net-hero-scrim) 0%, transparent),
      color-mix(in srgb, var(--cw-net-hero-scrim) 52%, transparent) 62%,
      color-mix(in srgb, var(--cw-net-hero-scrim) 92%, transparent));
  }
  /* The band hugs its copy: the nav floats over the photograph, not over the
     text, so it needs no clearance here — and every idle pixel of dark band is
     a pixel the photograph does not get. The transition is the fade strip. */
  [data-cw-hero="photo"] .hero .hero-grid{padding:1.25rem 0 calc(1.75rem + env(safe-area-inset-bottom))}
  /* The photo layer lives inside .hero-grid in the markup, so it cannot simply
     inset:0 against the section. It is pinned to the wrap's bottom edge — which
     is the hero's bottom edge, since the hero carries no bottom padding here —
     and given the viewport's own width and height. That reaches full bleed
     without moving the element in the HTML. */
  [data-cw-hero="photo"] .hero .hero-visual{
    position:absolute;z-index:0;margin:0;
    left:50%;margin-left:-50vw;width:100vw;
    top:auto;bottom:0;height:100svh;
  }
  [data-cw-hero="photo"] .hero .hv-stage{position:absolute;inset:0;width:100%;aspect-ratio:auto}
  /* Art direction per landing. A portrait master fills the full height of this
     box (cover crops it horizontally, not vertically), so object-position alone
     cannot move the subject up out of the copy band — that needs a scale and a
     shift, the same two knobs the platform hero exposes. Defaults are neutral;
     a skin sets them when its crop needs it. */
  /* --cw-hero-photo-height shortens the image itself, not its layer: a tight
     portrait master covered into the full 100svh box gets cropped to 46% of its
     aspect and the face blows up. Held nearer the master's own proportion, the
     crop stays gentle and the hero's scrim colour fills the strip below — which
     the copy band covers anyway. */
  [data-cw-hero="photo"] .hero .hv-photo{
    border-radius:0;
    top:0;bottom:auto;height:var(--cw-hero-photo-height,100%);
    object-position:var(--cw-hero-photo-x,center) var(--cw-hero-photo-y,22%);
    transform:translateY(var(--cw-hero-photo-shift-y,0)) scale(var(--cw-hero-photo-scale,1));
    transform-origin:center top;
  }
  [data-cw-hero="photo"] .hero .hv-stage::after{
    background:linear-gradient(to bottom,
      color-mix(in srgb, var(--cw-net-photo-scrim) 34%, transparent) 0%,
      color-mix(in srgb, var(--cw-net-photo-scrim) 0%, transparent) 30%);
  }
  [data-cw-hero="photo"] .hero .hero-badge{margin-top:0}
  /* Badge and chips on the night tone — the same material as the nav bar, the
     other side of it. The day tone (cream at the 86% media floor + dark ink)
     was drawn to sit ON a photograph; on this band it sits on the 92% scrim
     instead, where an opaque warm pill reads as a sticker laid over the glass
     rather than as more of it — and, being the lightest thing on the screen,
     out-shouts the headline it is supposed to support. The night tone is a lift
     (see --cw-net-hero-glass), not a tint, because the band is already darker
     than any tint would take it. Ink follows the rest of the hero copy. */
  [data-cw-hero="photo"] .hero .hero-badge,
  [data-cw-hero="photo"] .hero .hero-chips span{
    color:var(--cw-net-hero-ink-soft);
    background:var(--cw-net-hero-glass);
    border-color:var(--cw-net-hero-glass-stroke);
    box-shadow:none}
  [data-cw-hero="photo"] .hero h1{color:var(--cw-net-hero-ink)}
  [data-cw-hero="photo"] .hero h1 em{color:var(--cw-net-hero-accent)}
  [data-cw-hero="photo"] .hero .hero-sub{color:var(--cw-net-hero-ink-soft)}
  [data-cw-hero="photo"] .hero .hero-price b{color:var(--cw-net-hero-ink)}
  [data-cw-hero="photo"] .hero .hero-price small{color:var(--cw-net-hero-ink-label)}
  [data-cw-hero="photo"] .hero .hero-trust{color:var(--cw-net-hero-ink-soft)}
  [data-cw-hero="photo"] .hero .hero-trust svg{color:var(--cw-net-hero-accent)}
  /* .btn-ghost is drawn for the cream page: ink text inside a light-grey rule.
     In the photo hero it lands on a dark photograph and falls to roughly 1.2:1
     — the secondary CTA was effectively invisible on consult, dosha and herbs
     (way21 and reset-day keep theirs further down the page, on cream). It gets
     the same treatment as the rest of the hero copy: hero ink, with the rule
     derived from it so the button stays a quiet second option. */
  [data-cw-hero="photo"] .hero .btn-ghost{
    color:var(--cw-net-hero-ink);
    border-color:color-mix(in srgb, var(--cw-net-hero-ink) 42%, transparent)}
  [data-cw-hero="photo"] .hero .btn-ghost:hover{
    color:var(--cw-net-hero-ink);
    border-color:color-mix(in srgb, var(--cw-net-hero-ink) 72%, transparent);
    background:color-mix(in srgb, var(--cw-net-hero-ink) 10%, transparent)}
  /* The band is sized by its copy, so copy length decides how much photograph
     is left. At the shared type scale a five-line sub-head took ~70% of the
     viewport on consult, herbs and dosha and the "atmosphere first" idea
     collapsed into a dark card with a strip of image above it. The photo hero
     therefore runs its own tighter scale on every mobile screen, not only on
     short ones — the copy is the same, it is set smaller and closer. Nothing is
     dropped or clamped: a hero's promise has to be readable in full. */
  [data-cw-hero="photo"] .hero h1{font-size:clamp(1.7rem,6.4vw,2.15rem);line-height:1.14;margin-bottom:.5rem}
  [data-cw-hero="photo"] .hero .hero-sub{font-size:.9rem;line-height:1.46;margin-bottom:.9rem}
  [data-cw-hero="photo"] .hero .hero-badge{margin-bottom:.6rem}
  [data-cw-hero="photo"] .hero .hero-chips{gap:.35rem;margin-bottom:.15rem}
  [data-cw-hero="photo"] .hero .hero-actions{gap:.55rem}
  [data-cw-hero="photo"] .hero .hero-trust{font-size:.78rem;line-height:1.4}
  [data-cw-hero="photo"] .hero .hero-price b{font-size:1.85rem}
  /* Art direction per skin. --cw-hero-photo-height is the lever that decides how
     much of the frame lands in the visible strip: the copy band covers the
     bottom of the layer, so a SHORTER image box puts more of the composition
     above the band, not less. way21 and reset-day keep the full-height default
     (their masters are portraits whose subject is already high in frame).
       herbs   — the packets and hands are the product and they sit mid-frame;
                 at full height only the head cleared the band.
       consult — portrait master, subject high, needs only a small lift.
       dosha   — got its own portrait master on 2026-08-18, so the horizontal
                 nudge that chased the group across the old 16:10 plate is gone.
                 The height knob stays and is doing the opposite of shrinking:
                 at 50svh the box turns square, cover crops the tall plate to
                 its middle, and the three centres land in the visible strip —
                 at full height they sit behind the copy band with nothing but
                 the grass showing above it.
     If a skin ever gets its own mobile master, revisit its line rather than
     stacking a second knob on top. */
  [data-cw-landing="herbs"] .hero{--cw-hero-photo-height:50svh}
  [data-cw-landing="consult"] .hero{--cw-hero-photo-height:72svh}
  [data-cw-landing="dosha"] .hero{--cw-hero-photo-height:50svh}

  /* Short viewports get one more step down. The price and CTA stay put. */
  @media(max-height:700px){
    [data-cw-hero="photo"] .hero h1{font-size:clamp(1.6rem,6vw,1.95rem);margin-bottom:.4rem}
    [data-cw-hero="photo"] .hero .hero-sub{font-size:.86rem;line-height:1.4;margin-bottom:.75rem}
    [data-cw-hero="photo"] .hero .hero-actions{gap:.5rem}
    [data-cw-hero="photo"] .hero .hero-grid{padding-top:.75rem}
  }
}

/* desktop — switch to side-by-side grid */
@media(min-width:881px){
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"badge photo" "copy photo" "actions photo";
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(28px,4.5vw,56px);
    row-gap:0;
    align-items:start;
    min-height:0;
  }
  .hero{padding-top:var(--sp-sec)}
  .hero-badge{grid-area:badge;align-self:start;justify-self:start;width:auto;margin-top:0;margin-bottom:1.4rem}
  .hero-copy{grid-area:copy;margin-top:0;margin-bottom:1.6rem}
  .hero-actions{grid-area:actions;align-self:start;gap:1rem}
  .hero-visual{
    grid-area:photo;
    position:relative;right:auto;top:auto;margin-top:0;
    width:auto;height:100%;align-self:stretch;
    display:flex;align-items:stretch;justify-content:center;
    pointer-events:auto;
    z-index:1;
  }
  .hero-visual::before{display:none}
  .hv-stage{max-width:none;width:100%;height:100%;aspect-ratio:auto;min-height:0;border-radius:var(--r-lg);overflow:hidden;-webkit-mask-image:none;mask-image:none}
  .hv-stage::after{display:none}
  .hv-wave{display:none}
  .hv-glow{display:none}
  .hv-photo{object-fit:cover;object-position:center 18%;-webkit-mask-image:none;mask-image:none}
  .hero h1{font-size:clamp(2.3rem,5vw,3.7rem);margin-bottom:1.2rem;line-height:1.08}
  .hero-sub{font-size:1.14rem;line-height:1.62}
  /* Sits directly on the photo — same glass family as the badge/chips, at the
     media floor: dark ink text holds contrast over any photo content, so this
     needs no separate dark variant. */
  .hv-stat{
    display:block;position:absolute;z-index:2;isolation:isolate;overflow:hidden;
    background:var(--cw-net-mat-tint-media);
    backdrop-filter:var(--cw-net-mat-filter);-webkit-backdrop-filter:var(--cw-net-mat-filter);
    border:1px solid var(--cw-net-mat-stroke);
    border-radius:var(--r-md);padding:.65rem .9rem;
    box-shadow:var(--shadow-med)
  }
  .hv-stat::before{content:"";position:absolute;inset:0;background-image:var(--cw-net-mat-grain);opacity:.6;pointer-events:none;z-index:-1}
  .hv-stat .lab{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;color:var(--indigo);text-transform:uppercase}
  .hv-stat .val{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:1.3rem;font-weight:700;color:var(--ink);line-height:1}
  .hv-stat.s1{top:4%;right:2%}
  .hv-stat.s2{bottom:6%;left:2%}
  .hero-sub{max-width:52ch}
  .hero-actions .btn{width:auto}
  .hero-price b{font-size:2.2rem}
}

/* narrow desktop / landscape tablet — normal title + balanced columns */
@media(min-width:881px) and (max-width:1199px){
  .hero-grid{grid-template-columns:1fr 1fr;column-gap:clamp(24px,3.5vw,44px)}
  .hero h1{font-size:clamp(2rem,3.6vw,2.6rem);margin-bottom:1.1rem;line-height:1.12}
  .hero-sub{font-size:1.02rem;line-height:1.5;max-width:46ch}
  .hero-badge{margin-bottom:1.2rem}
  .hero-copy{margin-bottom:1.3rem}
  .hero-actions{gap:.85rem}
  .hero-price b{font-size:2rem}
}

/* ============ MARQUEE STRIP ============ */
.strip{border-block:1px solid var(--line);background:var(--surface-cool);overflow:hidden;padding:.95rem 0}
.strip-track{display:flex;gap:3.5rem;white-space:nowrap;animation:marq 32s linear infinite;width:max-content}
.strip-track span{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);display:inline-flex;align-items:center;gap:1rem}
.strip-track span::after{content:"◆";color:var(--indigo-bright);font-size:.6rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ SECTION SHELL ============ */
.sec{padding-block:var(--sp-sec)}
.sec-head{margin-bottom:clamp(36px,5vw,60px);max-width:760px}
.sec-head .kicker{margin-bottom:1.1rem}
.sec-head .lead{margin-top:1.1rem}
.sec-alt{background:
  linear-gradient(180deg,var(--surface-cool),rgba(246,248,255,0)),var(--cream)}

/* ============ SEAM CONNECTOR ============ */
/* The only thing drawn between two blocks. Everything else in the gap is air —
   --sp-sec on each side, up to 264px of it — and the band underneath, which
   draws the seam but says nothing about it. This says something: the two blocks
   are one thought at two scales, so the reader should carry the first into the
   second rather than start over.
   Placed by hand, never by rule, and the rule it follows is not "every seam"
   but "the argument". Each landing opens by making one continuous case — the
   pain, the reframe that answers it, the structure that delivers the reframe,
   the structure at the next scale down — and the connector traces exactly that
   run and then lets go. Two or three per landing, at the top; everything below
   is evidence, author, proof, commerce and FAQ, where each block changes the
   subject and a connector would claim a continuity that is not there. herbs
   joins "three blends" to "why a blend at all" and its scenarios to the form;
   nothing joins proof to offer, however conventional that flow is.
   That is also what keeps it clear of the standing decision that the rail stays
   inside structural blocks and does not run the length of the page: a thread
   through the opening case is not a spine down the page, and one mark on all
   thirteen seams would be.
   Not a carrier either — it sits outside every <section>, which is exactly why
   scripts/guard-carriers.mjs (which splits on section boundaries) does not see
   it and should not.
   The glyph is drawn as a horizontal bridge: two ends joined by a dashed arc.
   Turned ninety degrees the ends become one above and one below, which is the
   direction the reader is actually travelling, and the arc bulges into the page
   rather than out into the margin. Centred on the page rather than on the left
   type axis: the seam it marks is full-bleed — the band changes across the whole
   width — so the mark belongs on the axis of the band, not on the axis of the
   text inside the blocks. On the left it read as something dropped at the edge
   of the page. Ink is the rail's dashed line at the same weight, so the two
   connective marks are visibly one language; it assumes a light band on both
   sides, which is true of all four placements. */
/* The seam stays at zero height so the band edge runs through the middle of the
   mark, and it adds no spacing of its own: the block rhythm between two blocks
   is --sp-sec on each side and nothing else, everywhere on the network.
   The mark is sized FROM that rhythm rather than in fixed rem. That is the whole
   rule, and it is the one thing this needed: --sp-sec is fluid and halves on a
   phone (132px -> 64px), so a fixed mark kept its size while the gap around it
   collapsed — at 390 a 48px mark left the blocks 14-31px of clearance and read
   as wedged between them rather than passing through. At 0.45 of the rhythm the
   mark is 58px against a 260px gap on a desktop and 29px against 128px on a
   phone: the clearance-to-mark ratio is 1.7 at both ends, so the thread sits the
   same way in the gap at every width, with no breakpoint and no second token. */
.seam{position:relative;height:0;z-index:2;pointer-events:none;
  max-width:var(--maxw);margin-inline:auto}
.seam .ico{position:absolute;top:0;left:50%;
  width:calc(var(--sp-sec) * 0.45);height:calc(var(--sp-sec) * 0.45);
  transform:translate(-50%,-50%) rotate(90deg);
  color:color-mix(in srgb,var(--indigo) 55%,transparent)}

/* ============ PROBLEM ============ */
.prob-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin-bottom:2.4rem}
.prob-card{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-md);padding:1.5rem 1.4rem;
  position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.prob-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-med)}
.prob-card .n{font-family:var(--f-mono);font-size:.74rem;color:var(--text-soft);letter-spacing:.1em}
.prob-card h4{font-family:var(--f-ui);font-weight:700;font-size:1.08rem;color:var(--ink);margin:.6rem 0 .4rem}
.prob-card p{font-size:.95rem;color:var(--text-muted)}
.prob-card .x{position:absolute;top:1.2rem;right:1.3rem;color:var(--line-strong);font-size:1.1rem}
.prob-punch{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--ink);
  /* 24ch was inherited from h2.sec-title, and it does not transfer: the heading
     sits inside .sec-head (760px) with a lead underneath, so a short measure
     reads as a title. This is a standalone punch line closing the block, and at
     24ch it took 33% of a 1160px row and broke into four lines — a column
     stranded in the left third rather than a statement across the block. 44ch
     is still a readable measure at 33px display type (~700px, two lines), and
     on a phone it exceeds the column, so the line simply fills the width there
     instead of wrapping short of it. */
  max-width:44ch;line-height:1.22;border-left:3px solid var(--cta);padding-left:1.4rem}

/* ============ SHIFT ============ */
.shift{background:var(--irem-grad-dark);color:#fff;border-radius:var(--r-lg);
  padding:clamp(40px,6vw,76px);position:relative;overflow:hidden}
.shift::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(600px 400px at 88% 10%,color-mix(in srgb, var(--indigo) 50%, transparent),transparent 60%),
  radial-gradient(500px 360px at 6% 100%,rgba(219,165,79,.22),transparent 60%)}
.shift>*{position:relative;z-index:1}
.shift .kicker{color:var(--irem-on-dark-muted)}
.shift .kicker::before{background:rgba(255,255,255,.35)}
/* 20ch is a fine measure for a display heading, but only relative to its own
   container. h2.sec-title carries the same idea inside .sec-head (760px), where
   24ch fills 82% and reads as a title. .shift h2 sits in a 1080px block, where
   20ch is 45% — way21's reframe, the most load-bearing line on the page, broke
   into three lines stranded in the left half. 26ch puts it at ~63%, two lines,
   and lines it up with the 60ch paragraph underneath. */
.shift h2{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);max-width:26ch;margin:1.1rem 0 1.2rem}
.shift h2 em{font-style:normal;color:var(--irem-gold-bright)}
.shift p{color:rgba(255,255,255,.82);max-width:60ch;font-size:1.1rem}
.shift-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:center;margin-top:2.6rem}
.vs-col{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:1.5rem}
.vs-col h5{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.vs-col.old h5{color:var(--irem-on-dark-muted)}.vs-col.new h5{color:var(--on-cta)}
.vs-col.new{background:var(--cta);border-color:var(--cta-strong);box-shadow:var(--shadow-cta)}
.vs-col li{list-style:none;font-size:.96rem;padding:.42em 0;color:rgba(255,255,255,.86);display:flex;gap:.6em}
.vs-col.new li{color:var(--on-cta)}
.vs-col.old li::before{content:"—";color:var(--irem-on-dark-faint)}
.vs-col.new li::before{content:"→";color:var(--on-cta)}
.vs-mid{display:flex;align-items:center;justify-content:center;color:var(--cta)}
.vs-mid svg{width:30px;height:30px;transform:rotate(-90deg)}
@media(max-width:760px){.shift-vs{grid-template-columns:1fr}.vs-mid svg{transform:none}}

/* ============ TRIAD / MECHANISM ============ */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:phase}
.phase{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-lg);padding:2rem 1.7rem;
  position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.phase:hover{transform:translateY(-4px);box-shadow:var(--shadow-med)}
.phase::after{content:"";position:absolute;left:0;top:0;height:4px;width:100%}
.phase.p1::after{background:linear-gradient(90deg,var(--cta),var(--irem-gold-soft))}
.phase.p2::after{background:linear-gradient(90deg,var(--indigo),var(--indigo-bright))}
.phase.p3::after{background:linear-gradient(90deg,var(--cta) 0%,var(--indigo) 100%)}
/* A phase card that opens with a photograph or a rail node does not get the
   stripe too: two horizontal openers stacked a few pixels apart, and over a
   photo the accent cuts the image with a colour it does not contain. The phase
   is already named in the kicker underneath. */
.phase:has(.ph-shot)::after,.phase:has(.ph-photo)::after,.phase:has(.rail-node)::after{content:none}
.phase .ph-n{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;color:var(--indigo);text-transform:uppercase}
.phase .ph-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin:.4rem 0 1.1rem;
  background:var(--chip);color:var(--indigo)}
.phase.p1 .ph-ico{background:var(--irem-gold-tint);color:var(--cta)}
/* phase 3 (integration) — slot blends p1 gold + p2 green/indigo tints */
.phase.p3 .ph-ico{background:linear-gradient(135deg,var(--irem-gold-tint) 0%,var(--chip) 100%);color:var(--indigo)}
.phase h3{font-size:1.55rem;margin-bottom:.7rem}
.phase .dl{margin-top:1rem;border-top:1px dashed var(--line);padding-top:1rem}
.phase .dl dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);margin-top:.7rem}
.phase .dl dd{font-size:.96rem;color:var(--text-muted)}
.triad-flow{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem;
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);flex-wrap:wrap}
.triad-flow b{color:var(--indigo)}.triad-flow .ar{color:var(--cta)}
@media(max-width:820px){.triad{grid-template-columns:1fr}}

/* One column, so the run turns vertical and the rail turns with it. A row rail
   collapsed into a stack leaves each card holding its own short horizontal dash
   with a dot in the middle of it — three of those stacked read as decoration
   applied three times, not as one sequence passing through three stops, which is
   the entire job of the primitive. Turned ninety degrees it does the job again:
   the line runs down the card's left margin past the node, stops at the card's
   own top and bottom edges (the card clips it), and the eye completes it across
   the grid gap — the same completion the row version already relies on. */
@media(max-width:820px){
  .triad .phase:has(.rail-node){padding-left:3.2rem}
  .triad .rail-node{position:absolute;top:0;bottom:0;left:1.55rem;width:16px;height:auto;margin:0}
  .triad .rail-node::before{top:-2.5rem;bottom:-2.5rem;left:50%;right:auto;
    border-top:0;border-left:1.5px dashed color-mix(in srgb, var(--indigo) 42%, transparent)}
  .triad .rail-node::after{top:2.5rem;left:50%}
}

/* ============ WEEKLY RHYTHM ============ */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:.7rem}
.day{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-md);padding:1.2rem 1rem;
  display:flex;flex-direction:column;gap:.7rem;transition:transform .3s,box-shadow .3s,border-color .3s;cursor:default}
.day:hover{transform:translateY(-4px);box-shadow:var(--shadow-med);border-color:var(--line-strong)}
.day .d-lab{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.day .d-name{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:1.25rem;font-weight:600;color:var(--ink);line-height:1.05}
.day .d-focus{font-size:.85rem;color:var(--text-muted);margin-top:auto}
/* The rail primitive: one dashed line through a row of nodes, node size
   carrying whatever intensity the row encodes. Built in CSS rather than the
   sprite `rail` symbol because these rows reflow (7 → 2 → 1 columns on way21,
   3 → 1 elsewhere) and a fixed-viewBox SVG cannot follow that without
   stretching its dots. The line bleeds to the card edges, so only the grid gap
   interrupts it and the eye completes the run — --rail-bleed is the host card's
   own inline padding. */
.rail-node{position:relative;height:16px;flex:0 0 auto;--rail-bleed:1rem}
.rail-node::before{content:"";position:absolute;top:50%;left:calc(-1 * var(--rail-bleed));right:calc(-1 * var(--rail-bleed));
  border-top:1.5px dashed color-mix(in srgb, var(--indigo) 42%, transparent)}
.rail-node::after{content:"";position:absolute;top:50%;left:50%;
  width:calc(7px + var(--i,.5) * 7px);aspect-ratio:1;border-radius:50%;
  background:var(--cta);transform:translate(-50%,-50%)}
/* .phase cards carry more inline padding than .day cards. */
.phase .rail-node{--rail-bleed:1.7rem;margin-bottom:1rem}
@media(prefers-reduced-motion:no-preference){
  .day:hover .rail-node::after,.phase:hover .rail-node::after{transform:translate(-50%,-50%) scale(1.15);transition:transform .3s}}
.week-note{margin-top:1.6rem;display:flex;gap:.8rem;align-items:flex-start;background:var(--chip-soft);
  border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.3rem;font-size:.96rem;color:var(--text-muted)}
.week-note svg{flex:0 0 auto;color:var(--indigo);margin-top:2px}
.week-note p{min-width:0;flex:1;overflow-wrap:break-word}
@media(max-width:980px){.week{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.week{grid-template-columns:1fr}}

/* The day rhythm stacks at 560px and the rail turns with it, for the same reason
   the triad's does — see the note there. Seven stranded dashes is a worse case
   than three: the run is the whole point of the block. The .day card has to take
   the positioning context and the clip here, since in the row version it needs
   neither. */
@media(max-width:560px){
  .week .day{position:relative;overflow:hidden;padding-left:3rem}
  .week .rail-node{position:absolute;top:0;bottom:0;left:1.4rem;width:16px;height:auto;margin:0}
  .week .rail-node::before{top:-1.4rem;bottom:-1.4rem;left:50%;right:auto;
    border-top:0;border-left:1.5px dashed color-mix(in srgb, var(--indigo) 42%, transparent)}
  .week .rail-node::after{top:50%;left:50%}
}

/* ============ SCIENCE ============ */
.sci-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center}
.sci-points{display:grid;gap:1rem;margin-top:1.8rem}
.sci-point{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-md);padding:1.15rem 1.3rem}
/* Badge = glass, same recipe as the hero chips (see .hero-badge above). */
/* The label was a glass pill, and glass was the wrong material for it twice
   over. Materially: it sat on a solid card, so there was nothing behind it to
   see through — the blur cost real paint and bought nothing, and the tint (a
   warm off-white at 76%) landed within a hair of the card it sat on, so the
   pill had no edge and the label floated in a smudge. Structurally: a boxed
   label inside a card is a second container for one piece of text, and the card
   is already the container. Every other card type in the network names itself
   with a bare mono line — .ph-n on the phase, .d-lab on the day — so this one
   does too, at the kicker's size rather than two steps under it. */
.sci-point .tag{display:block;margin-bottom:.55rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indigo)}
.sci-point p{font-size:.97rem;color:var(--text-muted)}
.sci-point p b{color:var(--ink)}
.sci-quote{background:var(--surface);border:0;border-radius:var(--r-lg);padding:clamp(28px,4vw,42px);box-shadow:var(--shadow-soft);position:relative}
.sci-quote .mark{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:5rem;line-height:.6;color:var(--line-strong);position:absolute;top:24px;left:24px}
.sci-quote blockquote{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-weight:600;letter-spacing:-.015em;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ink);line-height:1.32;position:relative;z-index:1;padding-top:1.4rem}
.sci-quote cite{display:block;margin-top:1.4rem;font-style:normal;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;color:var(--text-soft)}
@media(max-width:880px){.sci-grid{grid-template-columns:1fr}}

/* ============ AI ANALYSIS CARD ============ */
.ai-card{margin-top:clamp(28px,4vw,44px);background:var(--irem-grad-dark);border-radius:var(--r-lg);overflow:hidden;color:#fff;position:relative}
.ai-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% -10%,color-mix(in srgb, var(--indigo) 25%, transparent) 0%,transparent 55%);pointer-events:none}
.ai-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.1rem;padding:clamp(1.3rem,3vw,1.8rem) clamp(1.3rem,3vw,2rem);position:relative;z-index:1}
.ai-card summary::-webkit-details-marker{display:none}
.ai-card .ai-ico{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--irem-on-dark-soft)}
.ai-card .ai-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.ai-card .ai-kick{display:block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(207,211,245,.75)}
.ai-card .ai-title{display:block;font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-weight:700;font-size:clamp(1.15rem,2.6vw,1.4rem);line-height:1.2}
.ai-card .ai-chev{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:transform .3s;color:#fff}
.ai-card[open] .ai-chev{transform:rotate(180deg)}
.ai-body{position:relative;z-index:1;padding:0 clamp(1.3rem,3vw,2rem) clamp(1.6rem,3vw,2.2rem);border-top:1px solid rgba(255,255,255,.1)}
.ai-body>.ai-intro{font-size:1rem;line-height:1.7;color:rgba(255,255,255,.82);margin:1.5rem 0 .5rem}
.ai-part{margin-top:1.8rem}
.ai-part>h4{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:1.18rem;color:#fff;margin-bottom:.3rem;line-height:1.3}
.ai-part>h4 .ai-num{display:inline-block;margin-right:.55rem;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;color:var(--irem-on-dark-soft);white-space:nowrap}
.ai-part>p.ai-sub{font-size:.92rem;color:rgba(255,255,255,.6);margin-bottom:1rem;font-style:italic}
.ai-row{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;padding:.7rem 0;border-top:1px solid rgba(255,255,255,.07)}
.ai-row .ai-lab{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--irem-on-dark-label);white-space:nowrap;padding-top:.15rem}
.ai-row .ai-txt{font-size:.93rem;line-height:1.55;color:rgba(255,255,255,.82)}
.ai-row .ai-txt b{color:#fff}
@media(max-width:600px){.ai-row{grid-template-columns:1fr;gap:.2rem}}
.ai-concl{margin-top:1.8rem;padding:1.3rem 1.4rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--irem-gold-bright);border-radius:0 var(--r-sm) var(--r-sm) 0}
.ai-concl p{font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.85)}
.ai-concl p+p{margin-top:.7rem}
.ai-disclaim{margin-top:1.2rem;font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.5}

/* ============ RESULTS ACCORDION ============ */
.acc{display:grid;gap:.7rem;max-width:840px}
.acc-item{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-md);overflow:hidden;transition:box-shadow .3s,border-color .3s}
.acc-item[open]{box-shadow:var(--shadow-med);border-color:var(--line-strong)}
.acc-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1.1rem;padding:1.25rem 1.5rem;font-weight:700;font-size:1.06rem;color:var(--ink)}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary .num{font-family:var(--f-mono);font-size:.82rem;line-height:1;color:var(--indigo);width:1.8em;flex:0 0 auto;align-self:center}
.acc-item summary .chev{margin-left:auto;flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--chip-soft);border:1px solid var(--line);transition:transform .3s,background .3s;color:var(--indigo)}
.acc-item[open] summary .chev{transform:rotate(180deg);background:var(--chip)}
.acc-body{padding:0 1.5rem 1.4rem 1.5rem}
.acc-body ul{list-style:none;display:grid;gap:.5rem}
.acc-body li{position:relative;padding-left:1.5rem;color:var(--text-muted);font-size:.97rem}
.acc-body li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--cta)}
.faq .acc-body li{padding-left:0}
.faq .acc-body li::before{display:none}
.med-note{margin-top:1.6rem;font-size:.88rem;color:var(--text-soft);max-width:840px;display:flex;gap:.6em;align-items:flex-start}

/* ============ ICON / GRAPHIC PRIMITIVES ============ */
/* One <use> into /shared/img/cw-icons.svg. The glyph inherits currentColor;
   accent dots read --cw-icon-accent and fall back to currentColor when unset. */
.ico{flex:0 0 auto;display:block;color:inherit}
.ico-flip{transform:scaleX(-1)}
.gfx{flex:0 0 auto;display:block;color:var(--indigo);opacity:.5}

/* ============ FOUNDATIONS ============ */
.found{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.found-item{display:flex;align-items:center;gap:.9rem;background:var(--surface-cool);border:1px solid var(--line);border-radius:var(--r-md);padding:.8rem 1rem;transition:border-color .3s,transform .3s}
.found-item:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.found-item .ficon{width:50px;height:50px;border-radius:12px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.found-item .ficon img{width:36px;height:36px;object-fit:contain}
.found-item span{font-size:.92rem;font-weight:600;color:var(--ink-soft);line-height:1.25}

/* ============ AUDIENCE ============ */
.aud-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1.2rem}
.aud-yes,.aud-no{border-radius:var(--r-lg);padding:clamp(28px,3.5vw,40px)}
.aud-yes{background:var(--cta);border:2px solid var(--cta-strong);box-shadow:var(--shadow-cta)}
.aud-no{background:var(--surface-cool);border:1px solid var(--line)}
.aud-yes h3,.aud-no h3{font-size:1.5rem;margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem}
.aud-yes h3{color:var(--on-cta)}
.aud-li{display:flex;gap:.8rem;padding:.6rem 0;font-size:1rem;color:var(--text-muted);border-top:1px solid var(--line)}
.aud-yes .aud-li{color:var(--on-cta);border-top-color:rgba(255,249,244,.22)}
.aud-yes .aud-li svg path{stroke:var(--on-cta)}
.aud-li:first-of-type{border-top:0}
.aud-li svg{flex:0 0 auto;margin-top:3px}
@media(max-width:820px){.aud-grid{grid-template-columns:1fr}}

/* ============ INCLUDED ============ */
.inc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
/* Five cards in an auto-fit grid land as 4 + 1 orphan. Once there is room for
   all five, put them on one row instead. */
@media(min-width:1060px){.inc-grid--5{grid-template-columns:repeat(5,1fr)}}
.inc-card{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-md);padding:1.6rem 1.5rem;transition:transform .3s,box-shadow .3s}
.inc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-med)}
.inc-card .ic{width:48px;height:48px;border-radius:13px;background:var(--chip);color:var(--indigo);display:grid;place-items:center;margin-bottom:1rem}
.inc-card.is-plus{border-color:var(--cta)}
.inc-card.is-plus .ic{background:rgba(219,165,79,.13);color:var(--cta-strong)}
.inc-card .plus-tag{display:inline-block;font-size:.7rem;font-weight:700;color:var(--cta-strong);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.inc-card h4{font-family:var(--f-ui);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:.4rem}
.inc-card p{font-size:.93rem;color:var(--text-muted)}
.inc-link{display:inline-block;margin-top:.5rem;font-weight:700;color:var(--indigo);font-size:.93rem}
.inc-link:hover{color:var(--ink)}

/* Collapsible variant of "what's included": same card material as .acc-item,
   but each row carries a teaser, a detail body and (optionally) a photo. */
.inc-acc{display:grid;gap:.75rem}
.inc-item{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-md);overflow:hidden;transition:box-shadow .3s}
.inc-item[open]{box-shadow:var(--shadow-med)}
.inc-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem}
.inc-item summary::-webkit-details-marker{display:none}
.inc-item .ic{flex:0 0 auto;width:48px;height:48px;border-radius:13px;background:var(--chip);color:var(--indigo);display:grid;place-items:center}
.inc-item.is-plus .ic{background:color-mix(in srgb, var(--cta) 14%, transparent);color:var(--cta-strong)}
.inc-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.inc-head .plus-tag{font-size:.7rem;font-weight:700;color:var(--cta-strong);text-transform:uppercase;letter-spacing:.05em}
.inc-t{font-family:var(--f-ui);font-weight:700;font-size:1.06rem;color:var(--ink);line-height:1.3}
.inc-teaser{font-size:.92rem;color:var(--text-muted);line-height:1.4}
.inc-item summary .chev{margin-left:auto;flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--chip-soft);color:var(--indigo);transition:transform .3s,background .3s}
.inc-item[open] summary .chev{transform:rotate(180deg);background:var(--chip)}
.inc-body{padding:0 1.5rem 1.5rem 1.5rem;border-top:1px solid var(--line);margin-top:.25rem;padding-top:1.25rem}
.inc-copy p{font-size:.97rem;color:var(--text-muted);line-height:1.6}
.inc-copy ul{list-style:none;display:grid;gap:.5rem;margin-top:1rem}
.inc-copy li{position:relative;padding-left:1.5rem;color:var(--text-muted);font-size:.95rem;line-height:1.55}
.inc-copy li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--cta)}
.inc-copy li b{color:var(--ink)}
.inc-links{display:flex;flex-wrap:wrap;gap:1.25rem}
@media(max-width:760px){
  .inc-item summary{padding:1rem 1.25rem;gap:.75rem}
  .inc-body{padding:1rem 1.25rem 1.25rem}
}

/* ============ RESULT CARDS ============ */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1rem}
.res-card{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-md);padding:1.5rem;transition:transform .3s,box-shadow .3s}
.res-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-med)}
.res-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.res-n{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;color:var(--text-soft)}
.res-ic{width:40px;height:40px;border-radius:12px;background:var(--chip);color:var(--indigo);display:grid;place-items:center}
.res-card h3{font-family:var(--f-ui);font-weight:700;font-size:1.08rem;color:var(--ink);margin:1rem 0 .75rem}
.res-card ul{list-style:none;display:grid;gap:.5rem}
.res-card li{position:relative;padding-left:1.5rem;font-size:.95rem;line-height:1.55;color:var(--text-muted)}
.res-card li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--cta)}

/* ============ AUTHOR ============ */
.author{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:center;
  background:var(--surface);border:0;border-radius:var(--r-lg);padding:clamp(28px,4vw,52px);box-shadow:var(--shadow-soft)}
.author-photo{aspect-ratio:3/4;border-radius:var(--r-md);position:relative;overflow:hidden;background:var(--surface)}
.author-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.author-photo .ph-cap{position:absolute;left:12px;bottom:12px;z-index:2;background:rgba(255,255,255,.86);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.35em .8em;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;color:var(--indigo);text-transform:uppercase}
.author h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.4rem}
.author .role{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);margin-bottom:1.2rem}
.author-quote{margin:1.1rem 0;padding:.9rem 1.1rem;border-left:3px solid var(--indigo);background:var(--chip);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.98rem;color:var(--ink-soft);font-style:italic;line-height:1.5}
.author .reg{display:grid;gap:.7rem;margin-top:1.2rem}
.author .reg li{list-style:none;display:flex;gap:.8rem;font-size:.98rem;color:var(--text-muted)}
/* One glyph repeated down a list is decoration, not information — the shields
   came out 2026-08-17 and a typographic node keeps the list scannable. */
.author .reg li{position:relative;padding-left:1.1rem}
.author .reg li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--cta)}
/* consult's author block lost its portrait (it repeated the hero frame), which
   left the copy alone in a two-column grid with a dead right half. With no
   photo the block is one column, and the regalia use the width instead. */
.author:not(:has(.author-photo)){grid-template-columns:1fr}
@media(min-width:900px){.author:not(:has(.author-photo)) .reg{grid-template-columns:1fr 1fr;column-gap:2.4rem}}
@media(max-width:760px){.author{grid-template-columns:1fr}.author-photo{max-width:300px}}

/* ============ PROOF ============ */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-bottom:1.8rem}
/* A row of quote cards should share a height. Mix a screenshot in (dosha) and
   stretching drags the short quotes to the screenshot's height, leaving each
   one with a hand's width of empty card under the text. */
.proof-grid:has(.shot-card){align-items:start}
.review{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-md);padding:1.5rem;display:flex;flex-direction:column;gap:1rem;transition:transform .3s,box-shadow .3s}
.review:hover{transform:translateY(-3px);box-shadow:var(--shadow-med)}
.review .stars{color:var(--gold);letter-spacing:.15em;font-size:.95rem}
.review p{font-size:.98rem;color:var(--text);line-height:1.55}
.review .who{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.review .av{width:38px;height:38px;border-radius:50%;background:var(--chip);color:var(--indigo);display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:0 0 auto}
.review .who b{font-size:.92rem;color:var(--ink)}
.review .who small{display:block;font-size:.78rem;color:var(--text-soft);font-family:var(--f-mono)}

/* Real-message proof: the frame matches the prepared message screenshots, so
   their full content stays readable without empty side gutters or cropping. */
.testimonial-carousel{display:grid;gap:1.2rem}
.testimonial-carousel__intro{max-width:58ch}
.testimonial-carousel__stage{position:relative}
.testimonial-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2rem) / 3);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem 2.7rem .4rem;scrollbar-width:none}
.testimonial-carousel__track::-webkit-scrollbar{display:none}
.testimonial-slide{scroll-snap-align:start;margin:0;aspect-ratio:323 / 700;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-soft)}
.testimonial-slide img{display:block;width:100%;height:100%;object-fit:contain;background:var(--chip)}
.testimonial-carousel__nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:2.875rem;height:2.875rem;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-soft);cursor:pointer;transform:translateY(-50%)}
.testimonial-carousel__nav:disabled{opacity:.38;cursor:default}
.testimonial-carousel__nav svg{width:1.125rem;height:1.125rem}
.testimonial-carousel__nav--prev{left:0}
.testimonial-carousel__nav--next{right:0}
.testimonial-carousel__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem}
.testimonial-carousel__dot{width:.625rem;height:.625rem;padding:0;border:0;border-radius:50%;background:var(--line-strong);cursor:pointer;transition:transform 180ms ease-out,background-color 180ms ease-out}
.testimonial-carousel__dot.is-active{background:var(--cta);transform:scale(1.08)}
.proof-grid[hidden],.car[hidden],.proof-note[hidden]{display:none!important}
@media(max-width:1080px){.testimonial-carousel__track{grid-auto-columns:calc((100% - 1rem) / 2)}}
@media(max-width:640px){.testimonial-carousel__track{grid-auto-columns:84%;padding-inline:2.4rem}.testimonial-carousel__nav{width:2.75rem;height:2.75rem}}

/* ============ OFFER ============ */
.offer{background:var(--irem-grad-dark);color:#fff;border-radius:var(--r-lg);
  padding:clamp(40px,6vw,80px);text-align:center;position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;inset:0;opacity:.6;
  background:radial-gradient(520px 360px at 50% -10%,rgba(219,165,79,.28),transparent 60%),
  radial-gradient(600px 420px at 90% 120%,color-mix(in srgb, var(--indigo) 50%, transparent),transparent 60%)}
.offer>*{position:relative;z-index:1}
.offer .guard{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--irem-gold-bright);border:1px solid rgba(232,162,90,.4);border-radius:var(--r-pill);padding:.5em 1.1em;margin-bottom:1.6rem}
.offer h2{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);max-width:20ch;margin-inline:auto;margin-bottom:1rem}
.offer h2 em{font-style:normal;color:var(--irem-gold-bright)}
.offer p{color:rgba(255,255,255,.84);max-width:54ch;margin-inline:auto;font-size:1.08rem;margin-bottom:2rem}
.offer-price{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-bottom:1.6rem}
.offer-price b{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:clamp(2.6rem,9vw,3rem);font-weight:700;color:#fff;line-height:1}
.offer-price small{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em;color:rgba(255,255,255,.6);text-transform:uppercase}
/* Full width in the offer block; size and padding stay the contract's — this
   ran 1.05rem/2.4em, a third button size on the same page. */
.offer .btn-primary{display:flex;width:100%;justify-content:center}
.offer-pay{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.4rem;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.offer-pay .pill{border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:.3em .6em}

/* ============ FORMAT GRID ============ */
.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
@media(max-width:700px){.format-grid{grid-template-columns:1fr}}
.format-card{border-radius:var(--r-lg);padding:2rem 1.8rem;position:relative;overflow:hidden;display:flex;flex-direction:column}
.format-card>*{position:relative;z-index:1}
.format-card.self{background:var(--irem-grad-dark);color:#fff}
.format-card.self::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 10%,rgba(232,162,90,.12) 0%,transparent 60%);pointer-events:none}
.format-card.premium{background:var(--surface);border:0;box-shadow:var(--shadow-soft)}
/* Same call as .sci-point .tag: the format card names itself with a bare mono
   line, not with a pill. Both pills were failing, each in its own way. On the
   dark card the pill was an 18%-white hairline around an inline-flex box that,
   as a flex item in a column card, stretched to the full width — an empty
   outlined field with the label parked at its left end, which is what an input
   looks like, not a label. On the light card it was the glass recipe over a
   solid surface: nothing behind it to see through, so the blur cost paint and
   bought nothing, and the tint landed within a hair of the card underneath.
   Ink moved onto the tokens actually asserted for these grounds — the on-dark
   label on the gradient card, the route green on the light one. */
.fc-badge{display:block;margin-bottom:1.1rem;line-height:1;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--irem-on-dark-label)}
.format-card.premium .fc-badge{color:var(--indigo)}
.fc-title{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:1.65rem;font-weight:700;color:#fff;line-height:1.15;margin-bottom:1.2rem}
.format-card.premium .fc-title{color:var(--ink)}
.fc-price{margin-bottom:1.5rem}
.fc-price b{display:block;font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:2.6rem;font-weight:700;color:#fff;line-height:1}
.format-card.premium .fc-price b{color:var(--ink)}
.fc-price small{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--irem-on-dark-label);margin-top:.2rem;display:block}
.format-card.premium .fc-price small{color:var(--text-muted)}
.fc-features{list-style:none;padding:0;margin:0 0 1.8rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.fc-features li{display:flex;align-items:flex-start;gap:.55rem;font-size:.93rem;color:rgba(255,255,255,.8);line-height:1.45}
.format-card.premium .fc-features li{color:var(--text-muted)}
.fc-features li::before{content:"✓";color:var(--irem-gold-bright);font-weight:700;flex:0 0 auto;font-size:.85rem;margin-top:.12em}
.format-card.premium .fc-features li::before{color:var(--indigo)}
.fc-cta{display:flex;width:100%;justify-content:center}
.fc-guarantee{display:flex;align-items:center;justify-content:center;gap:.4em;margin-top:1rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;color:var(--irem-on-dark-label)}
/* The Telegram action keeps its own fill — it names a destination, not a role —
   but its depth is the material's and its lift is the contract's. The two rgba
   literals it carried were a blue-grey mixed for an indigo this skin no longer
   uses: --indigo resolves to the route green. */
.btn-tg{background:var(--indigo);color:var(--cw-net-on-route);box-shadow:var(--shadow-soft)}
.btn-tg:hover{background:var(--indigo-bright);transform:translateY(var(--btn-lift));box-shadow:var(--shadow-med)}
/* ============ SHORT ENTRY ============ */
.short-block{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-lg);padding:clamp(2rem,4vw,2.8rem);display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem}
@media(min-width:700px){.short-block{flex-direction:row;align-items:center;gap:2.4rem}}
.short-text{flex:1}
.short-text h3{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:clamp(1.5rem,3vw,2rem);color:var(--ink);margin:.4rem 0 .8rem;line-height:1.2}
.short-text p{font-size:.95rem;color:var(--text-muted);line-height:1.6;max-width:48ch}
.short-text .notice{margin-top:.75rem;font-size:.86rem;color:var(--text-muted);opacity:.75;line-height:1.55;border-left:3px solid var(--line-strong);padding-left:.9rem}
.short-cta{flex:0 0 auto;width:100%;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.short-cta .btn{width:100%;justify-content:center}
.short-price-row{display:flex;align-items:baseline;gap:.45em}
.short-price-row b{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:1.9rem;font-weight:700;color:var(--ink);line-height:1}
.short-price-row small{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft)}
@media(min-width:700px){.short-cta{width:auto;align-items:flex-start}.short-cta .btn{width:auto}}

/* ---- audit cleanup: scoped rules replacing former inline styles ---- */
.lead.lead-sm{font-size:.95rem}
.sci-grid .sec-title,.sci-grid .lead{margin-top:1.1rem}
.format-card.premium .fc-guarantee{color:var(--text-muted)}
.author .a-name{margin-top:1rem}
.footer-col p{max-width:30ch}
.footer-bottom .pay-mark{height:52px;opacity:.85}

/* ============ PROTOCOL ============ */
.proto{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;position:relative}
.proto-step{background:var(--surface);border:0;box-shadow:var(--shadow-soft);border-radius:var(--r-md);padding:1.8rem 1.6rem;position:relative}
.proto-step .ph{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;color:var(--cta);text-transform:uppercase;margin-bottom:.7rem}
.proto-step h4{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:1.4rem;color:var(--ink);margin-bottom:.5rem}
.proto-step p{font-size:.95rem;color:var(--text-muted)}
@media(max-width:760px){.proto{grid-template-columns:1fr}}

/* ============ FAQ ============ */
.faq{max-width:840px}

/* ============ FOOTER ============ */
.footer{background:var(--text);color:rgba(255,255,255,.66);padding:clamp(48px,6vw,72px) 0 calc(2.4rem + 78px);position:relative;z-index:1}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer .brand{color:#fff;display:flex;margin-bottom:1rem}
/* The footer lockup is the nav lockup: same mark size, same wordmark face and
   scale. It used to run the display face at 1.3rem beside a 38px mark, which
   read as a second, larger logo rather than the same one. Scoped to the five
   platform-author landings — irem/short-b are a different author's pages that
   share this stylesheet. */
[data-cw-landing="way21"] .footer .brand,
[data-cw-landing="reset-day"] .footer .brand,
[data-cw-landing="herbs"] .footer .brand,
[data-cw-landing="consult"] .footer .brand,
[data-cw-landing="dosha"] .footer .brand{
  font-family:var(--f-ui);font-size:1rem;font-weight:700;letter-spacing:-.02em;gap:.6rem;align-items:center;
  /* Same lockup as the bar's night tone: gold mark, gold word. */
  color:var(--cw-net-hero-accent,#e5ae65)
}
.footer-col h5{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1rem}
.footer-col p,.footer-col a{font-size:.95rem;display:block;margin-bottom:.5rem;color:rgba(255,255,255,.7)}
.footer-col a:hover{color:var(--irem-gold-bright)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.6rem;font-size:.84rem;font-family:var(--f-mono);letter-spacing:.04em}
.footer-social{display:flex;gap:.8rem}
.footer-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.7);transition:.25s}
.footer-social a:hover{border-color:var(--irem-gold-bright);color:var(--irem-gold-bright);transform:translateY(-2px)}

/* ============ STICKY CTA (replaces header on all viewports) ============ */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;
  background-color:var(--cw-net-mat-tint);background-image:var(--cw-net-mat-grain);
  backdrop-filter:var(--cw-net-mat-filter);-webkit-backdrop-filter:var(--cw-net-mat-filter);
  border-top:0;box-shadow:var(--cw-net-mat-shadow-raised);
  /* GPU layer — prevents jitter on scroll in Safari */
  will-change:transform;transform:translateZ(0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sticky-cta.hidden{transform:translateY(110%)}
/* The one bar that sits on the home indicator. Its padding was symmetrical,
   which on an iPhone put the tap target's lower half under the system's own
   gesture strip: a press near the bottom edge of the button dismissed the page
   instead of buying anything. The bottom pad is now whichever is larger, the
   design's own .6rem or the inset the device asks for. */
.sticky-in{max-width:var(--maxw);margin-inline:auto;width:100%;
  padding:.6rem max(var(--cw-page-gutter),env(safe-area-inset-right)) max(.6rem,env(safe-area-inset-bottom)) max(var(--cw-page-gutter),env(safe-area-inset-left))}

/* THE BAR YIELDS TO THE KEYBOARD (2026-08-28).
   It is `position:fixed`, and on iOS a fixed element rides the visual viewport
   when the keyboard opens — so it parks itself directly over the field being
   typed into, which is the one moment it has nothing to offer: someone filling
   the lead form has already answered the call to action. It leaves on the same
   transform the scroll handler uses, so there is one way for this bar to be
   away rather than two. */
body:has(.lead-form :is(input,select,textarea):focus) .sticky-cta,
body:has(.lead-modal__input:focus) .sticky-cta{transform:translateY(110%)}
.sticky-cta .btn{width:100%;text-align:center}

/* ============ SOCIAL PROOF — carousels + lightbox ============ */
/* Generic scroll-snap carousel. Works without JS (native swipe/scroll);
   shared/js/proof.js adds arrow nav + screenshot lightbox on top. */
.car{position:relative}
.car-track{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding:.3rem .2rem 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent}
.car-track>*{scroll-snap-align:start;flex:0 0 auto}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.94);color:var(--indigo);display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--shadow-soft);transition:background .25s,color .25s,opacity .25s}
.car-nav:hover{background:var(--chip);color:var(--ink)}
.car-nav[disabled]{opacity:0;pointer-events:none}
.car-nav.prev{left:-8px}
.car-nav.next{right:-8px}
@media(max-width:760px){.car-nav{display:none}}

/* real-screenshot testimonial card */
.shot-card{width:min(74vw,264px);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow-soft);cursor:zoom-in;
  padding:0;transition:transform .3s,box-shadow .3s}
.shot-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-med)}
.shot-card img{width:100%;height:auto;display:block}
.shot-card figcaption{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-soft);padding:.55em .9em;border-top:1px solid var(--line)}

/* text quotes inside a carousel reuse .review cards at fixed width */
.car-track .review{width:min(84vw,340px)}

/* video testimonial card — poster + play; opens lightbox on click */
.vid-card{position:relative;width:min(74vw,264px);aspect-ratio:9/14;border:0;padding:0;
  border-radius:var(--r-md);overflow:hidden;cursor:pointer;background:var(--ink);
  box-shadow:var(--shadow-soft);transition:transform .3s,box-shadow .3s}
.vid-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-med)}
.vid-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.88}
.vid-card .vp{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.vid-card .vp span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,253,247,.92);color:var(--ink);box-shadow:0 6px 22px rgba(0,0,0,.3);
  transition:transform .25s}
.vid-card:hover .vp span{transform:scale(1.08)}
.vid-card .vl{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.6rem .9em .7em;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
  color:#fff;font-size:.85rem;font-weight:600;text-align:left;line-height:1.3}

/* caption under a proof block */
.proof-note{margin-top:.4rem;font-size:.85rem;color:var(--text-soft);display:flex;gap:.5em;align-items:flex-start}

/* lightbox (screenshots enlarge, videos play on request) */
.cw-lightbox{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:20px}
.cw-lightbox[hidden]{display:none}
.cw-lightbox__scrim{position:absolute;inset:0;background:rgba(12,14,18,.72);backdrop-filter:blur(4px)}
.cw-lightbox__body{position:relative;z-index:1;max-width:min(94vw,520px);max-height:92vh;display:flex}
.cw-lightbox__body img,.cw-lightbox__body video,.cw-lightbox__body iframe{
  max-width:100%;max-height:92vh;border-radius:var(--r-md);box-shadow:0 30px 80px rgba(0,0,0,.5);background:#000}
.cw-lightbox__body iframe{width:min(94vw,520px);aspect-ratio:9/16;border:0}
.cw-lightbox__x{position:absolute;top:-14px;right:-14px;z-index:2;width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(255,253,247,.95);color:var(--ink);font-size:1.35rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* ============ HERBS CROSS-SELL SUB-BLOCK (phases → /herbs) ============ */
.herbs-cross{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:.9fr 1.1fr;
  background:var(--surface);border:0;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-soft)}
.herbs-cross__photo{position:relative;min-height:240px}
.herbs-cross__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.herbs-cross__body{padding:clamp(1.6rem,3.4vw,2.4rem);display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
.herbs-cross__body h3{font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.18}
.herbs-cross__body p{font-size:.97rem;color:var(--text-muted);max-width:52ch}
.herbs-cross__body .btn{margin-top:.4rem}
@media(max-width:760px){.herbs-cross{grid-template-columns:1fr}.herbs-cross__photo{aspect-ratio:16/9;min-height:0}}

/* photo strip on phase cards (herbs landing) */
.phase .ph-photo{margin:-2rem -1.7rem 1.2rem;aspect-ratio:16/9;overflow:hidden}
.phase .ph-photo img{width:100%;height:100%;object-fit:cover}
.phase .ph-photo+.ph-n{margin-top:0}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.strip-track{animation:none}}

/* ============ LEGAL + UTILITY PAGES ============ */
body[data-cw-page="index2"],
body[data-cw-page="public-offer"]{
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(1200px 640px at 88% -6%, color-mix(in srgb, var(--indigo) 18%, transparent), transparent 58%),
    radial-gradient(860px 520px at -10% 18%, rgba(219,165,79,.08), transparent 52%),
    linear-gradient(180deg,#f8f4ea 0%,#f4f0e5 100%);
}

[data-cw-landing] .public-offer-page,
[data-cw-landing] .cw-legal-page{
  max-width:min(68rem,100%);
  padding:clamp(20px,4vw,40px);
}

[data-cw-landing] .public-offer,
[data-cw-landing] .cw-legal{
  max-width:820px;
  margin:0 auto;
  padding:clamp(26px,4vw,42px) clamp(18px,3.4vw,38px);
  border:1px solid color-mix(in srgb, var(--line-strong) .780%, transparent);
  border-radius:1.7rem;
  background:linear-gradient(180deg,rgba(255,255,255,.95),color-mix(in srgb, var(--cream) .920%, transparent));
  box-shadow:0 22px 60px color-mix(in srgb, var(--ink) .120%, transparent);
  color:var(--text);
  backdrop-filter:blur(10px);
}

[data-cw-landing] .public-offer h1,
[data-cw-landing] .public-offer h2,
[data-cw-landing] .cw-legal h1,
[data-cw-landing] .cw-legal h2{
  color:var(--ink);
  letter-spacing:-.03em;
}

[data-cw-landing] .public-offer h1,
[data-cw-landing] .cw-legal h1{
  font-size:clamp(2rem,5vw,3.2rem);
  margin:0 0 1rem;
}

[data-cw-landing] .public-offer h2,
[data-cw-landing] .cw-legal h2{
  font-size:clamp(1.28rem,2.6vw,1.8rem);
  margin:2rem 0 .7rem;
}

[data-cw-landing] .public-offer p,
[data-cw-landing] .public-offer li,
[data-cw-landing] .cw-legal p,
[data-cw-landing] .cw-legal li{
  font-size:clamp(1rem,1.35vw,1.08rem);
  line-height:1.72;
  color:var(--text);
}

[data-cw-landing] .public-offer a,
[data-cw-landing] .cw-legal a{
  color:var(--indigo);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--indigo-bright) .360%, transparent);
  text-underline-offset:.16em;
}

body[data-cw-landing].utility-page{
  background:
    radial-gradient(1000px 560px at 84% -8%, color-mix(in srgb, var(--indigo) 18%, transparent), transparent 56%),
    radial-gradient(760px 440px at 12% 100%, rgba(219,165,79,.09), transparent 54%),
    linear-gradient(180deg,#f7f4ea 0%,#f3efe4 100%);
}

[data-cw-landing] .utility-status-wrap{
  max-width:min(31rem,100%);
}

[data-cw-landing] .utility-status-card{
  border:1px solid color-mix(in srgb, var(--line-strong) .80%, transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.95),color-mix(in srgb, var(--cream) .920%, transparent));
  box-shadow:0 22px 58px color-mix(in srgb, var(--ink) .120%, transparent);
}

[data-cw-landing] .utility-status-kicker{
  color:var(--indigo);
}

[data-cw-landing] .utility-status-title{
  color:var(--ink);
}

[data-cw-landing] .utility-status-lead{
  color:var(--text-muted);
}

[data-cw-landing] .utility-status-actions a.btn.primary,
[data-cw-landing] .utility-status-actions a.btn.primary:visited{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

[data-cw-landing] .utility-status-actions a.btn:not(.primary),
[data-cw-landing] .utility-status-actions a.btn:not(.primary):visited{
  border-color:color-mix(in srgb, var(--line-strong) .90%, transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(241,245,240,.96));
}

[data-cw-landing] .hint,
[data-cw-landing] .cw-hint{
  border:1px solid color-mix(in srgb, var(--line-strong) .720%, transparent);
  background:linear-gradient(180deg,rgba(244,247,243,.92),rgba(239,244,240,.84));
}

/* ============ Premium lead-form modal ============ */
.lead-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.lead-modal[hidden]{display:none}
.lead-modal__backdrop{position:absolute;inset:0;background:color-mix(in srgb, var(--ink) .520%, transparent);backdrop-filter:blur(3px)}
.lead-modal__dialog{position:relative;width:100%;max-width:30rem;background:var(--surface);border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-med);padding:clamp(1.4rem,4vw,2rem);max-height:90vh;overflow:auto}
.lead-modal__x{position:absolute;top:.7rem;right:.9rem;display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0;background:transparent;line-height:1;color:var(--text-soft);cursor:pointer;border-radius:50%}
.lead-modal__x:hover{background:var(--surface-cool);color:var(--ink)}
.lead-modal__program{font-family:var(--f-ui);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cta-strong);margin:0 0 .3rem}
.lead-modal__title{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:1.4rem;color:var(--ink);margin:0 0 .4rem}
.lead-modal__sub{font-size:.95rem;color:var(--text-muted);margin:0 0 1.1rem;line-height:1.5}
.lead-modal__input{width:100%;box-sizing:border-box;margin-bottom:.7rem;padding:.8rem .95rem;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface-cool);border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.lead-modal__input:focus{outline:2px solid var(--cta);outline-offset:1px;border-color:var(--cta)}
textarea.lead-modal__input{resize:vertical;min-height:3.2rem}
.lead-modal__submit{width:100%;margin-top:.3rem;justify-content:center}
.lead-modal__status{margin:.7rem 0 0;font-size:.9rem;line-height:1.4}
.lead-modal__status[data-lead-status-kind="error"]{color:#a8321f}
.lead-modal__status[data-lead-status-kind="pending"]{color:var(--text-muted)}
.lead-modal__done{font-size:1rem;color:var(--ink);line-height:1.55;margin:.4rem 0 1.1rem}

/* ============ INLINE LEAD FORM (consult / herbs) ============ */
.lead-form{background:var(--surface);border:0;border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow-soft)}
.lead-form h3{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.15;color:var(--ink);margin-bottom:.45rem}
.lead-form__note{color:var(--text-muted);font-size:.95rem;line-height:1.5;margin-bottom:1.2rem}
.lead-field{display:block;margin-bottom:.85rem}
.lead-field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:.35rem}
/* Same reason as the platform's fields: the network bar is fixed to the top
   edge, so the browser's scroll-into-view has to stop short of it. */
.lead-input,.lead-modal__input{scroll-margin-block:5.5rem var(--cw-space-lg,1.5rem)}
.lead-input{width:100%;box-sizing:border-box;padding:.8rem .95rem;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface-cool);border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.lead-input:focus{outline:2px solid var(--cta);outline-offset:1px;border-color:var(--cta)}
textarea.lead-input{resize:vertical;min-height:5rem}
select.lead-input{appearance:none;-webkit-appearance:none}
.lead-form__submit{width:100%;justify-content:center;margin-top:.5rem}
.lead-form__status{margin:.8rem 0 0;font-size:.9rem;line-height:1.4}
.lead-form__status[data-tone="success"]{color:var(--indigo)}
.lead-form__status[data-tone="error"]{color:#a8321f}
.lead-aside{display:flex;flex-direction:column;gap:.7rem}
.lead-aside h3{font-family:var(--f-display);font-variant-numeric:var(--f-display-nums,normal);font-size:1.25rem;color:var(--ink)}
.lead-aside a{color:var(--indigo);font-weight:700}
.lead-aside a:hover{color:var(--ink)}
.lead-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.4rem;align-items:start}
@media(max-width:820px){.lead-grid{grid-template-columns:1fr}}