/* =====================================================================
   apply_story.css — the "story" apply-page layout
   Loaded only by welcome/tpl/apply/form_app_story.tpl.

   Three parts:
     1. Layout chrome  (.apply-story, .story-*)  — rail, stage, states, FAB
     2. Form restyle   — done by redefining the --ss-* tokens that
        _form_fields.tpl's inline styles already reference. No selector
        in here targets a form field by name.
     3. Content kit    (.st-*) — classes a host can use inside pg_invite
        sections. TinyMCE-safe: no <svg>/<section> needed; icons are
        CSS backgrounds. Every size >= 12px; muted greys pass AA on cream.

   Palette (from Rohit's Dharma Lab mockup, kept as the layout default;
   a pod-level override can redefine these on .apply-story later):
     ink   #1f3a2c   deep forest, headings / primary
     body  #43514a   prose
     cream #f2ecdf   page
     gold  #b0863a / #c8a765   accents, progress
     sage  #a7bcac   lines
     muted #5f6d63   captions (4.9:1 on cream)
   ===================================================================== */

.apply-story {
    --ink:   #1f3a2c;
    --ink2:  #2c5040;
    --body:  #43514a;
    --cream: #f2ecdf;
    --panel: rgba(255,255,255,.62);
    --line:  #e2d8c1;
    --gold:  #b0863a;
    --gold2: #c8a765;
    --sage:  #a7bcac;
    --muted: #5f6d63;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
    --disp:  "Cormorant Garamond", Georgia, serif;

    /* ---- form tokens: _form_fields.tpl inherits the page through these ---- */
    --ss-teal:        var(--ink);
    --ss-teal-light:  var(--ink2);
    --ss-teal-dark:   #16291f;
    --ss-gold:        var(--gold);
    --ss-sage:        #6f8677;
    --ss-coral:       var(--gold);
    --ss-cream:       rgba(255,255,255,.55);
    --ss-off-white:   #fbf8f1;
    --ss-light-gray:  #d9cfb6;
    --ss-gray:        var(--muted);
    --ss-dark-gray:   var(--body);
    --ss-charcoal:    var(--ink);
    --ss-success:     #4a7c59;
    --ss-warning:     var(--gold);
    --ss-lavender:    #8aa595;
    --border-radius:     10px;
    --border-radius-sm:  8px;
    --shadow-sm: 0 2px 8px rgba(31,58,44,.08);
    --shadow-md: 0 8px 22px rgba(31,58,44,.12);
    --shadow-lg: 0 14px 36px rgba(31,58,44,.16);

    position: relative;
    background: var(--cream);
    color: var(--body);
    font-family: var(--serif);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: clip;
}
.apply-story *, .apply-story *::before, .apply-story *::after { box-sizing: border-box; }
.apply-story a { color: inherit; }
.apply-story img { max-width: 100%; height: auto; }

/* rolling hills, fixed behind everything */
.story-scape {
    position: fixed; left: 0; right: 0; bottom: 0;
    width: 100%; height: auto;
    pointer-events: none; z-index: 0; opacity: .8;
}

/* ---------------------------------------------------------------------
   1. LAYOUT
   --------------------------------------------------------------------- */
.story-shell {
    position: relative; z-index: 1;
    display: flex; gap: 48px;
    max-width: 1180px; margin: 0 auto; padding: 0 32px;
}

/* rail */
.story-rail {
    flex: 0 0 200px; width: 200px;
    position: sticky; top: 0; align-self: flex-start;
    height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding: 24px 0;
}
.story-brand { display: block; margin: 0 0 22px 3px; text-decoration: none; }
.story-brand img { max-height: 44px; width: auto; max-width: 170px; }
.story-brand span {
    font-family: var(--sans); font-size: 12px; letter-spacing: 2.4px;
    text-transform: uppercase; color: var(--ink); font-weight: 700;
}
.story-powered { margin: 22px 0 0 3px; font-family: var(--sans); font-size: 12px; letter-spacing: .6px; color: var(--muted); }
.story-powered a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }

/* The signature: a path whose gold fill tracks how far the reader is. */
.story-path { list-style: none; margin: 0; padding: 0; position: relative; }
.story-path::before {
    content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1.5px;
    background: var(--sage); opacity: .55;
}
.story-path::after {
    content: ""; position: absolute; left: 15px; top: 16px; width: 1.5px;
    height: var(--progress, 0%); max-height: calc(100% - 32px);
    background: linear-gradient(var(--gold2), var(--gold));
    transition: height .4s ease;
}
.story-step a {
    display: flex; gap: 12px; align-items: center; padding: 8px 0;
    text-decoration: none; color: var(--muted); position: relative; z-index: 1;
}
.story-step .node {
    width: 31px; height: 31px; border-radius: 50%; flex-shrink: 0;
    background: var(--cream); border: 1.5px solid var(--sage); color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-weight: 600; font-size: 13px;
    transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.story-step .txt { font-family: var(--sans); font-size: 13.5px; transition: color .2s; }
.story-step a:hover .txt,
.story-step a:focus-visible .txt { color: var(--ink); }
.story-step a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.story-step.is-active .node { background: var(--ink); color: #f3ecd9; border-color: var(--ink); box-shadow: 0 0 0 5px rgba(31,58,44,.10); }
.story-step.is-active .txt { color: var(--ink); font-weight: 600; }
.story-step.is-done .node { border-color: var(--gold2); color: var(--gold); }

.story-step.bonus .node { background: transparent; border: none; box-shadow: none; }
.story-step.bonus .node::before {
    content: ""; width: 13px; height: 13px; background: var(--gold2); border-radius: 2px;
    transform: rotate(45deg); transition: background .2s, box-shadow .2s;
}
.story-step.bonus.is-active .node::before { background: #a9812a; box-shadow: 0 0 0 4px rgba(200,167,101,.22); }
.story-step.bonus .txt { font-family: var(--serif); font-style: italic; font-size: 15px; color: #8a6f2e; }
.story-step.bonus.is-active .txt, .story-step.bonus a:hover .txt { color: #7d6122; }

/* stage */
.story-stage { flex: 1 1 auto; min-width: 0; }
.story-section {
    min-height: 88vh; display: flex; flex-direction: column; justify-content: center;
    padding: 64px 0;
    border-top: 1px solid rgba(226,216,193,.7);
}
.story-section:first-child { border-top: 0; min-height: 100vh; }
.story-apply, .story-after { min-height: 0; justify-content: flex-start; }
.story-apply { padding-top: 72px; }
.story-inner { width: 100%; }

/* one-time reveal; a page arriving on a state (thanks/error) skips it */
.story-section .story-inner { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.story-section.is-visible .story-inner,
.apply-story.no-reveal .story-inner { opacity: 1; transform: none; }

/* footer */
.story-foot {
    display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 28px 0 120px;
    font-family: var(--sans); font-size: 12.5px; letter-spacing: .3px;
}
.story-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.story-foot a:hover { color: var(--ink); }

/* floating apply pill */
.story-fab {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 6;
    font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .4px;
    color: var(--ink); background: rgba(255,255,255,.88); backdrop-filter: blur(5px);
    border: 1.5px solid var(--gold2); border-radius: 30px; padding: 12px 28px;
    text-decoration: none; box-shadow: 0 8px 20px rgba(31,58,44,.14);
    transition: background .18s, color .18s, opacity .25s, transform .25s;
}
.story-fab:hover, .story-fab:focus-visible { background: var(--ink); color: #f3ecd9; border-color: var(--ink); }
.story-fab.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }

/* ---------------------------------------------------------------------
   Apply section: card, states, share
   --------------------------------------------------------------------- */
.story-card {
    max-width: 640px; background: #fff; border-radius: 14px;
    box-shadow: var(--shadow-lg); overflow: hidden; margin-top: 6px;
}
.story-card-hd {
    background: linear-gradient(135deg, var(--ink), var(--ink2)); color: #f3ecd9;
    font-family: var(--serif); font-weight: 500; font-size: 20px; text-align: center; padding: 18px 22px;
}
.story-card-bd { padding: 26px 28px 28px; }
.story-card--note .story-card-bd p { margin: 0 0 12px; }
.story-center { text-align: center; }
.story-alert {
    max-width: 640px; margin: 0 0 16px; padding: 12px 16px; border-radius: 10px;
    background: #fbeeea; border: 1px solid #e8c6bd; color: #7a2e1f; font-family: var(--sans); font-size: 14px;
}
.story-gift {
    max-width: 640px; margin: 22px 0 0; text-align: center; font-style: italic; font-size: 14.5px; color: var(--muted); line-height: 1.6;
}
.story-gift a { color: var(--ink); }
.story-share { max-width: 640px; text-align: center; margin: 30px 0 0; }
.story-share-hd { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 16px; margin: 0 0 12px; }
.story-share-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.story-share-btns a {
    font-family: var(--sans); font-size: 13px; font-weight: 600; color: #fff; text-decoration: none;
    padding: 9px 18px; border-radius: 7px;
}
.story-share-btns .fb { background: #3b5998; } .story-share-btns .tw { background: #222; }
.story-share-btns .li { background: #0a66c2; } .story-share-btns .wa { background: #25d366; }
.story-share-kit { display: inline-block; margin-top: 14px; font-family: var(--sans); font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold2); }

/* ---------------------------------------------------------------------
   2. FORM — beyond the tokens, only typography and control surfaces
   --------------------------------------------------------------------- */
.apply-story #registation-form { font-family: var(--sans); }
.apply-story #registation-form h5 { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); }
.apply-story #registation-form .form-label { font-size: 13.5px; color: #3a4a40; }
.apply-story #registation-form .form-control,
.apply-story #registation-form .form-select {
    font-family: var(--sans); font-size: 14.5px; color: var(--ink);
    background-color: #fff; border: 1px solid #d7cbb0;
}
.apply-story #registation-form .form-control::placeholder { color: #b9b3a3 !important; opacity: 1; }
.apply-story #registation-form .form-control:focus,
.apply-story #registation-form .form-select:focus {
    border-color: var(--gold) !important; box-shadow: 0 0 0 .2rem rgba(176,134,58,.16) !important;
}
/* pod_form.css strips the native arrow; form_app.tpl re-adds it inline, so do the same here */
.apply-story #registation-form select.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f3a2c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right .85rem center; background-size: 14px 10px;
    appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 2.4rem;
}
.apply-story #registation-form .form-check-input { border-color: #b9ad90; }
.apply-story #registation-form .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.apply-story #registation-form .form-check-label { font-family: var(--sans); }
.apply-story #registation-form .form-check-label small { font-size: 13px; }
.apply-story #registation-form button[type="submit"] { font-family: var(--sans); letter-spacing: .3px; }

/* agreements: one required line, a hairline, then the optional list. No cards. */
.apply-story .app-consent { font-family: var(--sans); margin-top: 6px; }
.apply-story .app-consent-item { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.apply-story .app-consent-item input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 2px 0 0; width: 20px; height: 20px;
    border: 1.5px solid #b9ad90; border-radius: 5px; background: #fff; cursor: pointer; position: relative; transition: background .15s, border-color .15s;
}
.apply-story .app-consent-item input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.apply-story .app-consent-item input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
    border: solid #f3ecd9; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.apply-story .app-consent-item input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.apply-story .app-consent-item label { font-size: 13.5px; line-height: 1.5; color: var(--body); cursor: pointer; margin: 0; }
.apply-story .app-consent-required label { color: var(--ink); font-size: 14px; }
.apply-story .app-consent a { color: inherit; text-decoration: underline; text-decoration-color: #b9b3a3; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.apply-story .app-consent a:hover { text-decoration-color: var(--gold); }
.apply-story .app-consent-optional { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.apply-story .app-consent-label { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.apply-story .app-consent-optional label { color: #4f5d53; }

/* ---------------------------------------------------------------------
   3. CONTENT KIT (.st-*) — used inside pg_invite sections
   --------------------------------------------------------------------- */
.st-label {
    font-family: var(--sans); font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase;
    color: #4f6a5a; font-weight: 600; margin: 0 0 12px;
}
.st-label .n { color: var(--gold); }
.st-h1 {
    font-family: var(--serif); font-weight: 340; font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.06; color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em;
}
.st-h1 .em { font-family: var(--disp); font-style: italic; font-weight: 600; font-size: 1.14em; letter-spacing: 0; }
.st-h2 {
    font-family: var(--serif); font-weight: 360; font-size: clamp(26px, 3.2vw, 40px);
    line-height: 1.1; color: var(--ink); letter-spacing: -.01em; margin: 0 0 16px;
}
.st-sub { font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 14px; }
.st-lead { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.72; color: #3f4d45; font-weight: 340; max-width: 620px; margin: 0 0 14px; }
.st-lead.sm { font-size: 15.5px; line-height: 1.62; }
.st-lead em, .st-lead .hl { color: var(--ink); font-style: italic; }
.st-note { font-family: var(--sans); font-size: 13px; color: var(--muted); margin: 14px 0 0; line-height: 1.55; }
.st-more {
    display: inline-block; margin-top: 12px; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--gold2); padding-bottom: 2px;
}
.st-btn {
    display: inline-block; background: var(--ink); color: #f3ecd9 !important; text-decoration: none;
    font-family: var(--sans); font-size: 14.5px; font-weight: 600; letter-spacing: .4px;
    padding: 13px 32px; border-radius: 8px; margin-top: 14px; border: 1.5px solid var(--ink);
    box-shadow: 0 8px 20px rgba(31,58,44,.22); transition: transform .15s;
}
.st-btn:hover { transform: translateY(-2px); }
.st-btn.ghost { background: transparent; color: var(--ink) !important; box-shadow: none; }
.st-btn.gold { background: #d9bd7c; color: var(--ink) !important; border-color: #d9bd7c; }

/* hero: gallery + text */
.st-hero { display: flex; gap: 44px; align-items: center; width: 100%; }
.st-hero .st-gal { flex: 0 0 31%; max-width: 236px; }
.st-hero .st-htext { flex: 1 1 auto; min-width: 0; }
.st-galwrap { display: flex; gap: 11px; }
.st-galcol { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.st-galcol.b { margin-top: 20px; }
.st-galcol img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; box-shadow: 0 5px 14px rgba(31,58,44,.14); display: block; }
.st-galnote { font-family: var(--sans); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; text-align: center; color: var(--muted); margin: 13px 0 0; }
.st-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; margin: 0 0 15px; font-family: var(--sans); }
.st-kick .brand { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--ink); }
.st-kick .tag {
    font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: #3f3110;
    background: linear-gradient(135deg, #e4cb89, #cdae6b); padding: 5px 12px; border-radius: 20px; box-shadow: 0 2px 6px rgba(176,134,58,.22);
}
.st-disc { font-family: var(--sans); font-size: 12.5px; letter-spacing: 2.3px; text-transform: uppercase; color: #3f5748; font-weight: 500; margin: 11px 0 15px; }
.st-disc .p { color: var(--gold); margin: 0 6px; }
.st-boxes { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.st-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 15px; }
.st-box b { font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--ink); }
.st-box span { font-family: var(--sans); font-size: 12.5px; color: #4f5d53; display: block; margin-top: 2px; line-height: 1.45; }

/* two-column: text | figure, with the quotes as a row beneath both.
   Markup is  .st-grid2 > div(text) + div(figure, caption, .st-quotes);
   the second div is flattened (display: contents) so its children can be
   placed on the grid -- the quotes can't sit in a tall right column
   without leaving the left column half empty. */
.st-grid2 { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto auto auto; gap: 8px 36px; align-items: start; max-width: 900px; }
.st-grid2 > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
.st-grid2 > div:nth-child(2) { display: contents; }
.st-figure { grid-column: 2; grid-row: 1; width: 100%; border-radius: 12px; box-shadow: 0 12px 28px rgba(31,58,44,.2); display: block; }
.st-cap { grid-column: 2; grid-row: 2; font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin: 2px 0 0; line-height: 1.5; }
.st-quotes { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.st-quote { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.st-quote p { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.5; color: #37453d; }
.st-quote p b { font-style: normal; font-weight: 600; color: var(--ink); }
.st-quote small { font-family: var(--sans); font-size: 12px; letter-spacing: .3px; color: var(--gold); font-weight: 600; }

/* voices (speaker tiles) + hosts */
.st-voices { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; max-width: 800px; }
.st-voice { display: flex; flex-direction: column; text-decoration: none; text-align: center; }
.st-voice img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 12px rgba(31,58,44,.14); transition: transform .2s; }
.st-voice:hover img { transform: translateY(-3px); }
.st-voice .vn { font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--ink); margin-top: 8px; line-height: 1.2; min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
.st-voice .vn .ext { color: var(--gold); font-size: 11px; margin-left: 3px; }
.st-voice .vt { font-family: var(--sans); font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 2px; }
.st-hosts { display: flex; flex-wrap: wrap; gap: 26px; max-width: 780px; }
.st-host { flex: 1 1 300px; display: flex; gap: 14px; align-items: center; }
.st-host img { width: 64px; height: 64px; border-radius: 11px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 12px rgba(31,58,44,.16); }
.st-host b { font-family: var(--serif); color: var(--ink); font-size: 15.5px; display: block; margin-bottom: 3px; }
.st-host p { margin: 0; font-size: 13px; line-height: 1.5; color: #4c5a51; }

/* arc (the week's timeline) */
.st-arc { display: flex; gap: 24px; max-width: 720px; margin-top: 4px; position: relative; }
.st-arc::before { content: ""; position: absolute; top: 29px; left: 13%; right: 13%; height: 1.5px; background: linear-gradient(90deg, var(--gold2), var(--sage), #8aa595); opacity: .6; }
.st-ms { flex: 1; text-align: center; position: relative; }
.st-ms-ic {
    width: 58px; height: 58px; border-radius: 50%; background: var(--ink); margin: 0 auto 13px; position: relative; z-index: 1;
    box-shadow: 0 6px 16px rgba(31,58,44,.25); background-repeat: no-repeat; background-position: center; background-size: 26px 26px;
}
.st-ms-ic.sun  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7d6a8' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='14' r='3.4'/%3E%3Cpath d='M12 6.5V4M6.5 14H4M20 14h-2.5M7.5 9.5 6 8M16.5 9.5 18 8M3.5 18h17'/%3E%3C/svg%3E"); }
.st-ms-ic.book { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7d6a8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-1.6-1.1-3.6-1.6-6-1.5v12c2.4-.1 4.4.4 6 1.5 1.6-1.1 3.6-1.6 6-1.5v-12c-2.4-.1-4.4.4-6 1.5zM12 6v12'/%3E%3C/svg%3E"); }
.st-ms-ic.moon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7d6a8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 15.5A7 7 0 0 1 9 6a6 6 0 1 0 8 9.5z'/%3E%3C/svg%3E"); }
.st-ms-date { font-family: var(--sans); font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 2px; }
.st-ms-sub { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin: 0 0 7px; }
.st-ms-title { font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink); margin: 0 0 5px; }
.st-ms-desc { font-size: 13px; line-height: 1.5; color: #4f6055; margin: 0; }

/* panel (partner invitation) + feature trio.
   Default: unboxed. A hairline with the rail's gold diamond sitting on it
   opens the section -- the same mark that labels "Partner" on the rail --
   then the copy sits directly on the page. `.st-panel.dark` opts into the
   full-bleed forest slab for a pod that wants it hero-weight. */
.st-panel { max-width: 740px; width: 100%; padding: 30px 0 0; position: relative; color: var(--body); }
.st-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.st-panel::after {
    content: ""; position: absolute; left: 0; top: -6px; width: 12px; height: 12px;
    background: var(--gold2); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 4px var(--cream);
}
.st-panel .st-label { color: var(--gold); }
.st-panel .st-h2 { color: var(--ink); font-size: clamp(22px, 2.4vw, 30px); }
.st-panel .st-lead { color: var(--body); font-size: 15.5px; max-width: 640px; }
.st-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 4px 0 20px; }
.st-feat { padding: 0; }
.st-feat b { font-family: var(--serif); color: var(--ink); font-size: 14.5px; display: block; margin-bottom: 4px; }
.st-feat p { font-family: var(--sans); margin: 0; font-size: 12.5px; line-height: 1.5; color: #4f6055; }
.st-ic {
    width: 34px; height: 34px; border-radius: 50%; background-color: #e6ece2; margin-bottom: 9px;
    background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
}
.st-ic.handshake { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a2c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l4-4 5 3 5-3 4 4M7 7v9l5 4 5-4V7'/%3E%3C/svg%3E"); }
.st-ic.group     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a2c' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 19c0-3 2.7-5 6-5s6 2 6 5M14 18c.4-2 2-3.5 4-3.5 1.6 0 3 1 3.5 2.5'/%3E%3C/svg%3E"); }
.st-ic.pin       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a2c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.5-6-11a6 6 0 0 1 12 0c0 5.5-6 11-6 11z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E"); }
.st-panel .st-btn.gold { background: transparent; color: var(--ink) !important; border-color: var(--ink); box-shadow: none; padding: 10px 24px; font-size: 14px; margin-top: 4px; }
.story-after { padding-top: 32px; padding-bottom: 24px; border-top: 0; }  /* the panel's own hairline+diamond is the divider */

/* opt-in dark slab */
.st-panel.dark {
    background: linear-gradient(160deg, #244430, #1a3126); border: 1px solid #38553f;
    border-radius: 18px; padding: 38px 42px; box-shadow: 0 22px 55px rgba(31,58,44,.3); color: #dde6dd;
}
.st-panel.dark::after { display: none; }
.st-panel.dark::before { background: none; height: auto; left: auto; content: ""; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(200,167,101,.22), transparent 70%); pointer-events: none; }
.st-panel.dark .st-label { color: #dcc07f; }
.st-panel.dark .st-h2 { color: #f4eeda; font-size: clamp(28px, 3.4vw, 40px); }
.st-panel.dark .st-lead { color: #dde6dd; font-size: 16px; }
.st-panel.dark .st-feats { gap: 18px; margin-bottom: 26px; }
.st-panel.dark .st-feat { background: rgba(255,255,255,.055); border: 1px solid rgba(200,167,101,.28); border-radius: 12px; padding: 16px 16px 18px; }
.st-panel.dark .st-feat b { color: #f4eeda; font-size: 15px; }
.st-panel.dark .st-feat p { color: #c4d0c5; }
.st-panel.dark .st-ic { background-color: rgba(200,167,101,.16); width: 40px; height: 40px; background-size: 20px 20px; }
.st-panel.dark .st-ic.handshake { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7d6a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l4-4 5 3 5-3 4 4M7 7v9l5 4 5-4V7'/%3E%3C/svg%3E"); }
.st-panel.dark .st-ic.group     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7d6a8' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 19c0-3 2.7-5 6-5s6 2 6 5M14 18c.4-2 2-3.5 4-3.5 1.6 0 3 1 3.5 2.5'/%3E%3C/svg%3E"); }
.st-panel.dark .st-ic.pin       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7d6a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.5-6-11a6 6 0 0 1 12 0c0 5.5-6 11-6 11z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E"); }
.st-panel.dark .st-btn.gold { background: #d9bd7c; color: var(--ink) !important; border-color: #d9bd7c; box-shadow: 0 8px 22px rgba(0,0,0,.22); padding: 13px 34px; font-size: 14.5px; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .story-shell { flex-direction: column; gap: 0; padding: 0 20px; }
    /* rail becomes a sticky chip strip */
    .story-rail {
        position: sticky; top: 0; z-index: 5; width: auto; flex: none; height: auto;
        padding: 10px 0 8px; margin: 0 -20px; padding-left: 20px; padding-right: 20px;
        background: rgba(242,236,223,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
        flex-direction: row; align-items: center; gap: 12px;
    }
    .story-brand { margin: 0; flex-shrink: 0; }
    .story-brand img { max-height: 30px; }
    .story-brand span { font-size: 11px; letter-spacing: 1.8px; }
    .story-powered { display: none; }
    .story-path { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-width: 0; }
    .story-path::-webkit-scrollbar { display: none; }
    .story-path::before, .story-path::after { display: none; }
    .story-step { flex-shrink: 0; }
    .story-step a { padding: 5px 11px 5px 6px; border-radius: 20px; border: 1px solid transparent; gap: 7px; }
    .story-step .node { width: 22px; height: 22px; font-size: 11px; }
    .story-step .txt { font-size: 12.5px; }
    .story-step.is-active a { background: #fff; border-color: var(--line); }
    .story-step.bonus .txt { font-size: 13px; }
    .story-section { min-height: 0; padding: 44px 0; scroll-margin-top: 58px; }
    .story-section:first-child { min-height: 0; padding-top: 28px; }
    .story-apply { padding-top: 44px; }
    .story-foot { padding-bottom: 96px; }
    .story-fab { bottom: 16px; padding: 12px 24px; }

    /* text first; the eight faces become one compact 4x2 strip under the CTA */
    .st-hero { flex-direction: column-reverse; gap: 26px; align-items: stretch; }
    .st-hero .st-gal { max-width: none; flex: none; }
    .st-galwrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .st-galcol { display: contents; }
    .st-galcol.b { margin-top: 0; }
    .st-galcol img { border-radius: 8px; }
    .st-galnote { margin-top: 10px; }
    .st-grid2 { grid-template-columns: 1fr; gap: 14px; }
    .st-grid2 > div:first-child, .st-figure, .st-cap, .st-quotes { grid-column: 1; grid-row: auto; }
    .st-quotes { grid-template-columns: 1fr; margin-top: 8px; }
    .st-voices { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .st-voice .vn { font-size: 12px; }
    .st-voice .vt { font-size: 11.5px; }
    .st-arc { flex-direction: column; gap: 22px; }
    .st-arc::before { display: none; }
    .st-feats { grid-template-columns: 1fr; }
    .st-panel { padding-top: 26px; }
    .st-panel.dark { padding: 28px 24px; }
}
@media (max-width: 480px) {
    .story-card-bd { padding: 20px 18px 22px; }

}

/* reduced motion: no reveal, no progress animation, no hover lift */
@media (prefers-reduced-motion: reduce) {
    .story-section .story-inner { opacity: 1; transform: none; transition: none; }
    .story-path::after { transition: none; }
    .st-btn:hover, .st-voice:hover img, .story-fab { transition: none; transform: none; }
    .story-fab { transform: translateX(-50%); }
}