/* ============================================================
   SOTERIA PUBLIC — Phase 3V
   The public presentation system for the three unauthenticated
   marketing pages: index.html, clinical.html, educational.html.

   This is Option B, the owner-selected STYLING-ONLY adoption.
   Every visible string, heading, heading order, section order,
   list item, claim, link and metadata value on those pages stays
   exactly as `main` has it. No new marketing, clinical,
   educational or authorization copy was introduced, and the
   proposed Clinical authority map and Educational learning-station
   labels were deliberately NOT built, because their labels would
   have been new public claims. See
   docs/soteria-sanctuary-p15-plan-v1.md.

   THREE PROPERTIES MAKE THIS FILE SAFE TO LOAD:

   1. Every selector is rooted at `body[data-ss-public]`, an opt-in
      that exists on exactly three pages. No bare element, utility
      or component selector appears anywhere below, so this file
      cannot reach markup that has not opted in.
   2. Every class this phase ADDS is prefixed `pub__`. Unprefixed
      class names below are the pages' own existing markup, styled
      in place; none is redefined for any other page.
   3. It is a REPLACEMENT, not a layer. The three public pages no
      longer link `style.css`, so presentation has a single owner
      and the `.site-header` / `.lede` / `.btn-*` classes they
      share with 19-27 authenticated pages can no longer couple
      them together.

   `style.css`, `soteria-sanctuary.css`, `app.js` and `print.css`
   are untouched by this phase and are pinned byte-identical.
   ============================================================ */

body[data-ss-public] {
    /* ---- palette: the Sanctuary public set ---- */
    --pub-purple: #4A4378;
    --pub-purple-deep: #3B3563;
    --pub-purple-hover: #3F3966;
    --pub-ivory: #FAF8F4;
    --pub-paper: #FFFFFF;
    --pub-lavender: #EFEDF6;
    --pub-lavender-deep: #E3DFEF;
    --pub-sunken: #F3F0EA;
    --pub-ink: #242333;
    --pub-muted: #5C5870;
    --pub-line: #E4E0D8;
    --pub-line-strong: #CFC9BE;

    /* semantic, used only semantically */
    --pub-sage: #5F8C78;
    --pub-teal: #3E8583;
    --pub-amber: #C48632;
    --pub-amber-deep: #845818;
    --pub-amber-tint: #F7EAD6;

    /* PROTECTED clinical response vocabulary — never branding.
       Copied from style.css so the two cannot drift. */
    --pub-independent: #0E9F6E;
    --pub-prompted: #C57604;
    --pub-incorrect: #C0392B;
    /* the adaptive marker letter, for wherever a marker carries a
       letter. Ink #242333 clears green at 4.55 but misses amber at
       4.38, so this is ink darkened inside its own hue family. */
    --pub-marker-text-dark: #1B1A26;

    --pub-sans: 'IBM Plex Sans', system-ui, -apple-system, Arial, sans-serif;
    --pub-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

    --pub-r-sm: 8px;
    --pub-r: 10px;
    --pub-r-lg: 14px;
    --pub-r-xl: 16px;
    /* the protected corner — one corner answering differently */
    --pub-r-protected: 8px 8px 16px 8px;

    --pub-sh-control: 0 1px 2px rgba(36, 35, 51, .06);
    --pub-sh-card: 0 1px 3px rgba(36, 35, 51, .07);
    --pub-sh-lift: 0 12px 32px rgba(36, 35, 51, .18);

    --pub-tap: 48px;
    --pub-gut: 64px;
    --pub-measure: 1180px;

    margin: 0;
    background: var(--pub-ivory);
    color: var(--pub-ink);
    font-family: var(--pub-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body[data-ss-public] *,
body[data-ss-public] *::before,
body[data-ss-public] *::after { box-sizing: border-box; }

body[data-ss-public] h1,
body[data-ss-public] h2,
body[data-ss-public] h3,
body[data-ss-public] p,
body[data-ss-public] ul,
body[data-ss-public] ol,
body[data-ss-public] figure { margin: 0; }

body[data-ss-public] img { max-width: 100%; }

/* ---- the one accessibility correction this phase makes ---- */
body[data-ss-public] .pub__skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    min-height: var(--pub-tap);
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 0 0 var(--pub-r) 0;
    background: var(--pub-purple);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
body[data-ss-public] .pub__skip:focus { left: 0; }

body[data-ss-public] a:focus-visible,
body[data-ss-public] button:focus-visible {
    outline: 2px solid var(--pub-purple);
    outline-offset: 2px;
    border-radius: var(--pub-r-sm);
}
/* on a purple fill the purple ring would vanish */
body[data-ss-public] .nav-cta:focus-visible,
body[data-ss-public] .btn-cta:focus-visible,
body[data-ss-public] .pub__skip:focus-visible {
    outline-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(74, 67, 120, .6);
}

/* ---- typography ---- */
body[data-ss-public] h1 {
    font-size: 62px;
    line-height: 1.03;
    letter-spacing: -.045em;
    font-weight: 500;
    margin-bottom: 24px;
    text-wrap: balance;
}
body[data-ss-public] h2 {
    font-size: 42px;
    line-height: 1.09;
    letter-spacing: -.035em;
    font-weight: 500;
    margin-bottom: 18px;
    text-wrap: balance;
}
body[data-ss-public] h3 {
    font-size: 20px;
    line-height: 1.26;
    letter-spacing: -.018em;
    font-weight: 500;
    margin-bottom: 9px;
}
body[data-ss-public] .lede {
    max-width: 62ch;
    color: var(--pub-muted);
    font-size: 19px;
    line-height: 1.62;
    margin-bottom: 28px;
}
body[data-ss-public] a { color: var(--pub-purple-deep); text-underline-offset: 3px; }

/* ---- public header ---- */
body[data-ss-public] .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
body[data-ss-public] .pub__headband { border-bottom: 1px solid var(--pub-line); background: var(--pub-ivory); }
body[data-ss-public] .brand { display: inline-flex; align-items: center; min-height: var(--pub-tap); }
body[data-ss-public] .brand img { display: block; height: 34px; width: auto; }
body[data-ss-public] .site-nav { display: flex; align-items: center; gap: 6px; }
body[data-ss-public] .site-nav a {
    min-height: var(--pub-tap);
    display: inline-flex;
    align-items: center;
    padding: 0 17px;
    border-radius: var(--pub-r-sm);
    color: var(--pub-purple-deep);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
body[data-ss-public] .site-nav a:hover { background: var(--pub-lavender); }
body[data-ss-public] .site-nav a.nav-cta {
    margin-left: 8px;
    background: var(--pub-purple);
    color: #FFFFFF;
    box-shadow: var(--pub-sh-control);
}
body[data-ss-public] .site-nav a.nav-cta:hover { background: var(--pub-purple-hover); }

/* ---- actions ---- */
body[data-ss-public] .btn-cta,
body[data-ss-public] .btn-cta-quiet {
    min-height: var(--pub-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border-radius: var(--pub-r);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    font-family: inherit;
}
body[data-ss-public] .btn-cta {
    background: var(--pub-purple);
    color: #FFFFFF;
    box-shadow: var(--pub-sh-control);
}
body[data-ss-public] .btn-cta:hover { background: var(--pub-purple-hover); }
body[data-ss-public] .btn-cta-quiet {
    background: var(--pub-paper);
    color: var(--pub-purple-deep);
    border-color: var(--pub-line-strong);
}
body[data-ss-public] .btn-cta-quiet:hover { border-color: var(--pub-purple); }
body[data-ss-public] .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   HOME — the band system, kept in the page's own section order
   ============================================================ */
body[data-ss-public].marketing { max-width: none; padding: 0; }
body[data-ss-public] .band { padding: 88px 0; }
body[data-ss-public] .band-inner {
    width: min(var(--pub-measure), calc(100% - (var(--pub-gut) * 2)));
    margin: 0 auto;
}
body[data-ss-public] .band-title { margin-bottom: 40px; }
body[data-ss-public] .band-lede { color: var(--pub-muted); font-size: 18px; max-width: 62ch; }

body[data-ss-public] .band-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 14px 0;
    background: var(--pub-ivory);
    border-bottom: 1px solid var(--pub-line);
}

/* hero: the warm ivory canvas with the purple edge rail */
body[data-ss-public] .band-hero {
    position: relative;
    padding: 84px 0 76px;
    background: var(--pub-ivory);
}
body[data-ss-public] .band-hero::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 11px;
    background: var(--pub-purple);
}
body[data-ss-public] .hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 48px;
    align-items: center;
}
body[data-ss-public] .hero-copy { position: relative; z-index: 2; padding-left: 20px; }
body[data-ss-public] .hero-credit {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
}
body[data-ss-public] .hero-credit-mark {
    width: 50px; height: 50px;
    display: grid; place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--pub-purple);
    border-radius: 50%;
    background: var(--pub-lavender);
    color: var(--pub-purple-deep);
    font: 500 12px var(--pub-mono);
}
body[data-ss-public] .hero-credit > span:last-child { display: grid; line-height: 1.4; }
body[data-ss-public] .hero-credit strong { font-weight: 500; }
body[data-ss-public] .hero-credit span span { color: var(--pub-muted); font-size: 14px; }

/* the inverted spine bands. Production carries two; the first is the
   problem statement and the second the origin statement, so each gets
   its own treatment rather than one repeated dark slab. */
body[data-ss-public] .band-dark { background: var(--pub-purple-deep); color: #FFFFFF; }
body[data-ss-public] .band-dark h2 { color: #FFFFFF; }
body[data-ss-public] .band-dark p { color: rgba(255, 255, 255, .86); }
body[data-ss-public] .stated { max-width: 64ch; }
body[data-ss-public] .stated p + p { margin-top: 16px; }

/* Problem band. Production sets this passage on an INVERTED ground and
   leaves the right half of the measure empty; that emptiness is the
   composition, and it only reads as deliberate against a dark field.
   An earlier draft here lifted the band to paper and kept the empty
   right half, which made the section look unfinished rather than quiet
   — so the inverted ground stays, in the deeper of the two Sanctuary
   purples. The origin band further down uses the lighter one, and the
   two are separated by three intervening sections, so neither reads as
   a repeat of the other. */
body[data-ss-public] .pub__problem { background: var(--pub-purple-deep); color: #FFFFFF; }
body[data-ss-public] .pub__problem h2 { color: #FFFFFF; }
body[data-ss-public] .pub__problem p { color: rgba(255, 255, 255, .88); font-size: 18px; }
body[data-ss-public] .pub__problem .stated {
    position: relative;
    padding: 18px 0 10px 42px;
    border-left: 3px solid rgba(255, 255, 255, .5);
}
body[data-ss-public] .pub__problem .stated::before {
    content: "";
    position: absolute;
    left: -10px; top: -8px;
    width: 17px; height: 17px;
    border: 2px solid rgba(255, 255, 255, .62);
    background: var(--pub-purple-deep);
    transform: rotate(45deg);
}

body[data-ss-public] .band-tint {
    background: var(--pub-paper);
    border-block: 1px solid var(--pub-line);
}
body[data-ss-public] .band-cta { background: var(--pub-purple); color: #FFFFFF; text-align: center; }
body[data-ss-public] .band-cta h2 { color: #FFFFFF; }
body[data-ss-public] .band-cta .band-lede {
    color: rgba(255, 255, 255, .86);
    margin: 0 auto 26px;
}
body[data-ss-public] .band-cta .btn-cta { background: #FFFFFF; color: var(--pub-purple-deep); }
body[data-ss-public] .band-cta .btn-cta:hover { background: var(--pub-lavender); }

body[data-ss-public] .band-footer {
    padding: 34px 0;
    background: var(--pub-ivory);
    border-top: 1px solid var(--pub-line);
    color: var(--pub-muted);
    font-size: 14px;
}
body[data-ss-public] .site-footer { display: flex; }

/* ---- how it works: one connected path, staggered ---- */
body[data-ss-public] .steps-grid {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}
body[data-ss-public] .steps-grid::before {
    content: "";
    position: absolute;
    left: 24px; top: 40px; bottom: 40px;
    width: 3px;
    background: var(--pub-purple);
}
body[data-ss-public] .steps-grid li {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    padding: 18px 0;
}
/* The measure has to name the paragraph explicitly: production writes
   the body copy as a direct `li > p`, not inside a wrapper, so a rule
   that reached only `li > div` left it running the full 1180px band. */
body[data-ss-public] .steps-grid li > h3,
body[data-ss-public] .steps-grid li > p,
body[data-ss-public] .steps-grid li > div { max-width: 62ch; }
body[data-ss-public] .step-num {
    position: relative;
    z-index: 1;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border: 8px solid var(--pub-ivory);
    border-radius: 50%;
    background: var(--pub-purple);
    color: #FFFFFF;
    font: 500 13px var(--pub-mono);
}
body[data-ss-public] .steps-grid h3 { grid-column: 2; margin-top: 12px; }
body[data-ss-public] .steps-grid p {
    grid-column: 2;
    color: var(--pub-muted);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pub-line);
}

/* ---- what it does today: an anchored bento, not six equal cards.
        The anchor is the FIRST .feature, which is production's own
        "Four data types". Its selector is written at the same depth
        as the generic rule so the purple ground cannot be lost to a
        later, more specific neighbour — the defect that produced
        white-on-ivory text in the study. ---- */
body[data-ss-public] .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
body[data-ss-public] .feature-grid .feature {
    position: relative;
    min-height: 220px;
    padding: 28px;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-r-protected);
    background: var(--pub-ivory);
}
/* the offset bracket that echoes the protected corner */
body[data-ss-public] .feature-grid .feature::after {
    content: "";
    position: absolute;
    right: -7px; bottom: -7px;
    width: 36px; height: 36px;
    border-right: 1px solid var(--pub-purple);
    border-bottom: 1px solid var(--pub-purple);
}
body[data-ss-public] .feature-grid .feature p { color: var(--pub-muted); }
body[data-ss-public] .feature-grid .feature:first-child {
    grid-row: span 2;
    background: var(--pub-purple);
    border-color: var(--pub-purple);
    color: #FFFFFF;
}
body[data-ss-public] .feature-grid .feature:first-child::after { content: none; }
/* the sixth capability closes the composition rather than leaving a
   half-empty row beside the anchor */
body[data-ss-public] .feature-grid .feature:last-child { grid-column: 1 / -1; min-height: 0; }
body[data-ss-public] .feature-grid .feature:first-child h3 { color: #FFFFFF; }
body[data-ss-public] .feature-grid .feature:first-child p { color: rgba(255, 255, 255, .88); }
body[data-ss-public] .section-note {
    display: flex;
    gap: 10px;
    margin-top: 26px;
    padding: 10px 14px;
    border-left: 3px solid var(--pub-purple);
    background: var(--pub-lavender);
    color: var(--pub-purple-deep);
    font-size: 13.5px;
    max-width: 62ch;
}

/* ---- see it work: the video slot, kept and dressed in-system ---- */
body[data-ss-public] .media-frame {
    margin-top: 30px;
    border-radius: var(--pub-r-xl);
    overflow: hidden;
}
body[data-ss-public] .media-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 300px;
    padding: 36px;
    border: 1px dashed var(--pub-line-strong);
    border-radius: var(--pub-r-xl);
    background: var(--pub-sunken);
    color: var(--pub-purple-deep);
    text-align: center;
}
body[data-ss-public] .media-empty strong { font-weight: 500; font-size: 17px; }
body[data-ss-public] .media-empty p { color: var(--pub-muted); max-width: 46ch; font-size: 14px; }
body[data-ss-public] .media-frame video { display: block; width: 100%; }

/* ---- how it works in the room: three frames from one family ---- */
body[data-ss-public] .shots {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
body[data-ss-public] .shots::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: 42%;
    height: 2px;
    background: var(--pub-purple);
    opacity: .3;
}
body[data-ss-public] .shot { position: relative; z-index: 1; margin: 0; }
body[data-ss-public] .shot:nth-child(2) { margin-top: 58px; }
body[data-ss-public] .shot:nth-child(3) { margin-top: 16px; }
body[data-ss-public] .shot-img {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 268px;
    padding: 32px;
    border: 1px solid var(--pub-line-strong);
    background: var(--pub-paper);
    box-shadow: var(--pub-sh-card);
    color: var(--pub-purple-deep);
    text-align: center;
}
/* related, deliberately non-identical geometry */
body[data-ss-public] .shot:nth-child(1) .shot-img { border-radius: 46% 30% 40% 26% / 38% 34% 30% 44%; }
body[data-ss-public] .shot:nth-child(2) .shot-img { border-radius: var(--pub-r-xl) 60px var(--pub-r-xl) 60px; }
body[data-ss-public] .shot:nth-child(3) .shot-img {
    border-radius: var(--pub-r-lg);
    clip-path: polygon(0 0, 88% 0, 100% 14%, 100% 100%, 12% 100%, 0 86%);
}
body[data-ss-public] .shot-img strong { font-weight: 500; font-size: 17px; }
body[data-ss-public] .shot-img p { color: var(--pub-muted); font-size: 14px; max-width: 30ch; }
body[data-ss-public] .shot figcaption { margin-top: 16px; color: var(--pub-muted); }

/* ---- who it's for: two substantial pathways ---- */
body[data-ss-public] .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
body[data-ss-public] .card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid var(--pub-line);
    border-left: 6px solid var(--pub-purple);
    border-radius: var(--pub-r-protected);
    background: var(--pub-paper);
    box-shadow: var(--pub-sh-card);
}
body[data-ss-public] .card:last-child { background: var(--pub-lavender); border-color: var(--pub-lavender-deep); border-left-color: var(--pub-purple); }
body[data-ss-public] .card h3 { font-size: 24px; }
body[data-ss-public] .card p { color: var(--pub-muted); margin-top: 8px; }
body[data-ss-public] .card a {
    align-self: flex-start;
    margin-top: 22px;
    min-height: var(--pub-tap);
    display: inline-flex;
    align-items: center;
    padding: 0 22px;
    border-radius: var(--pub-r);
    background: var(--pub-purple);
    color: #FFFFFF;
    font-weight: 500;
    text-decoration: none;
    box-shadow: var(--pub-sh-control);
}
body[data-ss-public] .card a:hover { background: var(--pub-purple-hover); }

/* ============================================================
   HOME HERO ARTWORK
   The phone preview is production's own markup. The Slim Sanctuary
   Pebble and the Balanced Wave are added as DECORATIVE inline SVG
   (aria-hidden), carrying no text and no claim.
   ============================================================ */
body[data-ss-public] .hero-preview { position: relative; padding-left: 96px; }
body[data-ss-public] .phone {
    position: relative;
    z-index: 2;
    width: 270px;
    border: 8px solid var(--pub-ink);
    border-radius: 26px;
    background: var(--pub-ivory);
    box-shadow: var(--pub-sh-lift);
    overflow: hidden;
}
body[data-ss-public] .phone-screen { padding: 14px; }
body[data-ss-public] .pv-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-r);
    background: var(--pub-paper);
}
body[data-ss-public] .pv-ring {
    width: 10px; height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pub-teal);
}
body[data-ss-public] .pv-label {
    font: 500 11px var(--pub-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pub-muted);
}
body[data-ss-public] .pv-clock {
    font: 500 17px var(--pub-mono);
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
body[data-ss-public] .pv-target { font-weight: 500; font-size: 14px; margin-top: 12px; }
body[data-ss-public] .pv-phase {
    font: 500 11px var(--pub-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pub-purple-deep);
    margin-top: 3px;
}
body[data-ss-public] .pv-graph {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-r-sm);
    background: var(--pub-paper);
}
/* production hardcodes the pre-Sanctuary indigo in the gradient stops;
   CSS wins over an SVG presentation attribute, so the artwork is
   recoloured without touching the markup. */
body[data-ss-public] .pv-graph stop { stop-color: var(--pub-purple); }
body[data-ss-public] .pvg-fill { fill: url(#pvFill); }
body[data-ss-public] .pvg-line {
    fill: none;
    stroke: var(--pub-purple);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body[data-ss-public] .pvg-dot,
body[data-ss-public] .pvg-lead { fill: var(--pub-paper); stroke: var(--pub-purple); stroke-width: 2; }
body[data-ss-public] .pvg-ripple { fill: var(--pub-purple); opacity: .18; }

/* PROTECTED clinical response vocabulary. Production's strip and
   response bars carry no letters, so no letter treatment is applied
   here; the fills are reproduced exactly and used nowhere else. */
/* The response strip carries its meaning in a LETTER as well as a fill, so
   colour is never the sole carrier. One construction serves all three: the
   protected fill is untouched and only the FOREGROUND adapts to it, because
   no single letter colour clears 4.5:1 on all three grounds — white fails on
   Independent (3.39) and Prompted (3.52), and the dark neutral fails on
   Incorrect (3.16). Measured pairings: 5.07 / 4.88 / 5.44.
   8 markers at 22px with 5px gaps is 211px, inside the 226px the phone
   screen gives it at its narrowest, so the strip stays on ONE line. */
body[data-ss-public] .pv-strip { display: flex; gap: 5px; margin-top: 10px; }
body[data-ss-public] .pv-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}
body[data-ss-public] .pub__mk {
    font: 600 12px/1 var(--pub-mono);
    color: var(--pub-marker-text-dark);
}
body[data-ss-public] .pv-ind { background: var(--pub-independent); }
body[data-ss-public] .pv-pro { background: var(--pub-prompted); }
body[data-ss-public] .pv-inc { background: var(--pub-incorrect); }
/* written at the same depth as the rule it must beat, never with !important */
body[data-ss-public] .pv-inc .pub__mk { color: #FFFFFF; }
body[data-ss-public] .pv-btn { height: 26px; border-radius: var(--pub-r-sm); margin-top: 7px; }
body[data-ss-public] .pv-btn-ind { background: var(--pub-independent); }
body[data-ss-public] .pv-btn-pro { background: var(--pub-prompted); }
body[data-ss-public] .pv-btn-inc { background: var(--pub-incorrect); }

/* ---- the Slim Sanctuary Pebble ---- */
body[data-ss-public] .pub__pebble {
    position: absolute;
    left: 0; top: 34px;
    z-index: 2;
    width: 80px;
    height: auto;
    display: block;
    overflow: visible;
}
body[data-ss-public] .pub__pb-cast { fill: rgba(36, 35, 51, .13); }
body[data-ss-public] .pub__pb-shell { fill: #F7F4EC; stroke: #CFC7B8; stroke-width: 1.1; }
body[data-ss-public] .pub__pb-shade { fill: #E6E0D4; opacity: .55; }
body[data-ss-public] .pub__pb-light { fill: #FDFCF8; opacity: .9; }
body[data-ss-public] .pub__pb-wall { fill: #9C93C4; }
body[data-ss-public] .pub__pb-wall-lo { fill: #BEB6E0; }
body[data-ss-public] .pub__pb-hole { fill: var(--pub-ivory); }
body[data-ss-public] .pub__pb-pad-edge { fill: #9E95C4; }
body[data-ss-public] .pub__pb-pad { fill: #C3BBE3; }
body[data-ss-public] .pub__pb-pad-hollow { fill: #AEA5D3; opacity: .55; }
body[data-ss-public] .pub__pb-groove { fill: #A79ECB; }
body[data-ss-public] .pub__pb-seam { fill: var(--pub-purple-deep); opacity: .62; }

/* ---- the Balanced Wave: one thin open path, three restrained
        nodes, passing behind the session screen ---- */
body[data-ss-public] .pub__wave {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
body[data-ss-public] .pub__wave-path {
    fill: none;
    stroke: var(--pub-purple);
    stroke-width: 2.4;
    stroke-linecap: round;
}
body[data-ss-public] .pub__wave-node {
    fill: var(--pub-paper);
    stroke: var(--pub-purple);
    stroke-width: 2.4;
}

/* ---- the statement cascade on the origin band ---- */
body[data-ss-public] .pub__statement { position: relative; overflow: hidden; background: var(--pub-purple); }
body[data-ss-public] .pub__statement .band-inner { position: relative; z-index: 2; }
body[data-ss-public] .pub__cascade {
    position: absolute;
    right: 0; top: 0;
    z-index: 1;
    width: 46%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
body[data-ss-public] .pub__sc-band { fill: none; stroke: url(#scBand); stroke-width: 42; stroke-linecap: round; }
body[data-ss-public] .pub__sc-echo { fill: none; stroke: #D8D2EE; stroke-opacity: .3; stroke-width: 10; stroke-linecap: round; }
body[data-ss-public] .pub__sc-hair { fill: none; stroke: #F6F3FF; stroke-opacity: .7; stroke-width: 1.6; }

/* ============================================================
   CLINICAL AND EDUCATIONAL
   Both pages keep their production structure exactly: an h1, a
   lede, an h2, a three-item list and a sign-in line. The list
   items receive card / station styling; their text and order are
   untouched, and no label, role or authority string is added.
   ============================================================ */
body[data-ss-public] .pub__sub { padding: 0 0 72px; }
body[data-ss-public] .site-header.pub__sub-inner {
    width: min(var(--pub-measure), calc(100% - (var(--pub-gut) * 2)));
    padding: 14px 0;
}
body[data-ss-public] .pub__sub-head + * { margin-top: 0; }
body[data-ss-public] .pub__sub-inner {
    width: min(var(--pub-measure), calc(100% - (var(--pub-gut) * 2)));
    margin: 0 auto;
}
body[data-ss-public] .pub__sub-head {
    position: relative;
    padding: 76px 0 60px;
    background: var(--pub-ivory);
}
body[data-ss-public] .pub__sub-head::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 11px;
    background: var(--pub-purple);
}
body[data-ss-public] .pub__sub-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 48px;
    align-items: center;
}
body[data-ss-public] .pub__sub-copy { padding-left: 20px; }
body[data-ss-public] .pub__sub h2 { margin-top: 62px; margin-bottom: 28px; }
body[data-ss-public] .pub__sub ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
/* Top-aligned, and only as tall as the longest of the three needs to
   be. An earlier draft anchored the text to the BASE of a 168px panel,
   which left a band of dead space above every one- and two-line item
   and read as a rendering fault rather than a composition. */
body[data-ss-public] .pub__sub li {
    min-height: 128px;
    display: flex;
    align-items: flex-start;
    padding: 26px;
    border: 1px solid var(--pub-line);
    background: var(--pub-paper);
    box-shadow: var(--pub-sh-card);
    font-size: 17px;
    line-height: 1.4;
}
body[data-ss-public] .pub__sub .pub__signin {
    margin-top: 34px;
    color: var(--pub-muted);
}
body[data-ss-public] .pub__sub .pub__signin a {
    display: inline-flex;
    align-items: center;
    min-height: var(--pub-tap);
    color: var(--pub-purple-deep);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Clinical: protected-corner panels beneath an open shelter contour */
body[data-ss-public] .pub__clinical li { border-radius: var(--pub-r-protected); }
body[data-ss-public] .pub__clinical li:nth-child(2) {
    border: 2px solid var(--pub-purple);
    background: var(--pub-lavender);
}
body[data-ss-public] .pub__shelter {
    position: relative;
    height: 380px;
}
/* Both shelter layers keep the DEFAULT xMidYMid meet. They used to differ
   — the contour stretched while the tile layer preserved its aspect — and
   the two drifted apart into separate coordinate spaces, which left the
   ground line floating away from the tiles it belongs under. Sharing one
   space costs a little side margin on wide containers and buys exact
   registration at every width, with no icon distortion anywhere. */
body[data-ss-public] .pub__shelter > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    pointer-events: none;
}
body[data-ss-public] .pub__sh-arc { stroke: var(--pub-lavender-deep); stroke-width: 34; stroke-linecap: round; opacity: .95; }
body[data-ss-public] .pub__sh-echo { stroke: var(--pub-lavender-deep); stroke-width: 11; stroke-linecap: round; opacity: .75; }
body[data-ss-public] .pub__sh-line { stroke: var(--pub-purple); stroke-width: 2.4; stroke-linecap: round; opacity: .85; }

/* ---- Clinical hero: three tiles under the shelter (Phase 3W) ----
   The shelter contour stretches with its container, so it keeps
   `preserveAspectRatio="none"`. Icons must NOT stretch, so they live in
   their own overlay that keeps the default `xMidYMid meet` — the tile
   layer scales uniformly and letterboxes instead of distorting. The two
   layers agree closely on aspect (viewBox 1.40 against a container that
   measures ~1.43 at every breakpoint), so the composition holds together.

   The tiles carry information already on the page — the three existing
   "What you get" items — as pictures only. No label, no letter, no word,
   and nothing that names a role or an authority. */
body[data-ss-public] .pub__ct {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    pointer-events: none;
}
body[data-ss-public] .pub__ct-thread {
    fill: none;
    stroke: var(--pub-purple);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: .8;
}
/* protected-corner vocabulary: three small corners, one deliberately larger */
body[data-ss-public] .pub__ct-face {
    fill: var(--pub-paper);
    stroke: var(--pub-line-strong);
    stroke-width: 1.4;
}
/* the graph leads the composition by SIZE and edge weight only */
body[data-ss-public] .pub__ct-lead {
    stroke: var(--pub-purple);
    stroke-width: 1.8;
}
body[data-ss-public] .pub__ct-stroke {
    fill: none;
    stroke: var(--pub-purple);
    stroke-width: 2.2;
    stroke-linecap: round;
}
body[data-ss-public] .pub__ct-fill {
    fill: var(--pub-lavender);
    stroke: var(--pub-purple);
    stroke-width: 2.2;
    stroke-linejoin: round;
}
body[data-ss-public] .pub__ct-press { fill: var(--pub-purple); stroke: none; }
body[data-ss-public] .pub__ct-bar { fill: none; stroke: var(--pub-lavender-deep); stroke-width: 7; stroke-linecap: round; }
body[data-ss-public] .pub__ct-axis { fill: none; stroke: var(--pub-line-strong); stroke-width: 1.6; }
body[data-ss-public] .pub__ct-series {
    fill: none;
    stroke: var(--pub-purple);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* teal reads as live activity. The response vocabulary — green, amber,
   red — is never spent on decoration. */
body[data-ss-public] .pub__ct-live { fill: var(--pub-teal); stroke: none; }
body[data-ss-public] .pub__ct-node {
    fill: var(--pub-paper);
    stroke: var(--pub-purple);
    stroke-width: 2;
}

/* Educational: terraced stations over a quiet classroom grid */
body[data-ss-public] .pub__educational li {
    box-shadow: none;
    filter: drop-shadow(0 6px 14px rgba(36, 35, 51, .09));
}
body[data-ss-public] .pub__educational li:nth-child(1) {
    border-radius: var(--pub-r-lg);
    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
body[data-ss-public] .pub__educational li:nth-child(2) {
    border-radius: var(--pub-r-lg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
}
body[data-ss-public] .pub__educational li:nth-child(3) {
    border-radius: var(--pub-r-lg);
    clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%, 0 34px);
}
body[data-ss-public] .pub__classroom {
    position: relative;
    height: 380px;
    overflow: hidden;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-r-xl) var(--pub-r-xl) 48px var(--pub-r-xl);
    background: var(--pub-lavender);
}
body[data-ss-public] .pub__classroom > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    pointer-events: none;
}
body[data-ss-public] .pub__cl-grid { stroke: var(--pub-line); stroke-width: 1; opacity: .3; }

/* ---- Educational hero: three terraced stations (Phase 3W) ----
   The grid keeps `preserveAspectRatio="none"`: it is a background field
   and SHOULD fill its bordered box. The stations take the default meet,
   so they scale uniformly and the angular silhouettes never skew. Each
   station carries one of the three existing "What you get" items as a
   picture only — no label, no letter, no word.

   The cut corners echo the same three cuts the written cards below
   already use, so the hero and the list speak one vocabulary. */
body[data-ss-public] .pub__st {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    pointer-events: none;
}
body[data-ss-public] .pub__st-contour {
    fill: none;
    stroke: var(--pub-purple);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: .55;
}
body[data-ss-public] .pub__st-face {
    fill: var(--pub-paper);
    stroke: var(--pub-line-strong);
    stroke-width: 1.4;
    stroke-linejoin: round;
}
body[data-ss-public] .pub__st-plate {
    fill: var(--pub-lavender);
    stroke: var(--pub-purple);
    stroke-width: 2;
    stroke-linejoin: round;
}
body[data-ss-public] .pub__st-mark {
    fill: none;
    stroke: var(--pub-purple);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body[data-ss-public] .pub__st-rule {
    fill: none;
    stroke: var(--pub-line-strong);
    stroke-width: 1.8;
    stroke-linecap: round;
}
body[data-ss-public] .pub__st-node { fill: var(--pub-purple); stroke: none; }

/* ============================================================
   RESPONSIVE — the breakpoints style.css already uses
   ============================================================ */
@media (max-width: 1100px) {
    body[data-ss-public] { --pub-gut: 40px; }
    body[data-ss-public] h1 { font-size: 52px; }
    body[data-ss-public] h2 { font-size: 36px; }
}
@media (max-width: 900px) {
    body[data-ss-public] .hero-split,
    body[data-ss-public] .pub__sub-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    body[data-ss-public] .hero-copy,
    body[data-ss-public] .pub__sub-copy { padding-left: 0; }
    body[data-ss-public] .hero-preview { padding-left: 88px; }
    body[data-ss-public] .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-ss-public] .feature-grid .feature:first-child { grid-row: auto; }
    body[data-ss-public] .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-ss-public] .shots::before { content: none; }
    body[data-ss-public] .shot:nth-child(n) { margin-top: 0; }
    body[data-ss-public] .pub__sub ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    body[data-ss-public] { --pub-gut: 20px; }
    body[data-ss-public] h1 { font-size: 38px; letter-spacing: -.03em; }
    body[data-ss-public] h2 { font-size: 28px; }
    body[data-ss-public] .lede { font-size: 16px; }
    body[data-ss-public] .band { padding: 56px 0; }
    body[data-ss-public] .band-hero { padding: 40px 0 44px; }
    body[data-ss-public] .band-hero::before,
    body[data-ss-public] .pub__sub-head::before { width: 6px; }
    body[data-ss-public] .pub__sub-head { padding: 40px 0 40px; }
    body[data-ss-public] .site-header { gap: 14px; }
    body[data-ss-public] .site-nav { width: 100%; justify-content: space-between; gap: 4px; }
    body[data-ss-public] .site-nav a { padding: 0 12px; font-size: 14px; }
    body[data-ss-public] .nav-cta { margin-left: 0; }
    body[data-ss-public] .cta-row { display: grid; gap: 10px; }
    body[data-ss-public] .cta-row .btn-cta,
    body[data-ss-public] .cta-row .btn-cta-quiet { width: 100%; }
    body[data-ss-public] .feature-grid,
    body[data-ss-public] .shots,
    body[data-ss-public] .cards,
    body[data-ss-public] .pub__sub ul { grid-template-columns: minmax(0, 1fr); }
    body[data-ss-public] .hero-preview { padding-left: 0; padding-top: 104px; }
    body[data-ss-public] .pub__pebble { width: 71px; top: 0; }
    body[data-ss-public] .phone { width: 100%; max-width: 288px; }
    body[data-ss-public] .steps-grid li { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
    body[data-ss-public] .steps-grid li:nth-child(2),
    body[data-ss-public] .steps-grid li:nth-child(3) { margin-left: 0; }
    body[data-ss-public] .steps-grid::before { left: 22px; }
    body[data-ss-public] .step-num { width: 48px; height: 48px; border-width: 6px; }
    body[data-ss-public] .card a { align-self: stretch; justify-content: center; }
    body[data-ss-public] .pub__shelter,
    body[data-ss-public] .pub__classroom { height: 240px; }
    body[data-ss-public] .site-footer { flex-direction: column; gap: 6px; }
    body[data-ss-public] .pub__sub li { min-height: 0; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    body[data-ss-public] *, body[data-ss-public] *::before, body[data-ss-public] *::after {
        animation: none !important;
        transition: none !important;
    }
}