/* =====================================================================
   SELAH - Marketing Site Design System
   Shared across every public page. Mirrors the app tokens so the marketing
   surface and the product read as one instrument - warm cream and forest ink,
   a single text-safe gold, Vollkorn + Source Serif 4 + Hanken Grotesk. Light (day)
   is the default; Compline (dark) supported. Calm, literary, anti-shame.
   ===================================================================== */

/* =====================================================================
   FONTS. Self-hosted.

   Served from this origin rather than fonts.googleapis.com for three
   reasons: a visitor's IP never reaches a third party (which a product
   that promises no surveillance cannot credibly do otherwise), the CSS
   @import that used to sit here was a render-blocking second round trip,
   and the Content Security Policy can stay closed to outside origins.

   All three families are variable fonts, so one file per family, subset,
   and style covers the whole weight range. unicode-range means a visitor
   downloads the latin-ext file only if the page actually needs it.
   ================================================================== */
@font-face{font-family:'Vollkorn';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/vollkorn-latin-italic-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Vollkorn';font-style:italic;font-weight:400 600;font-display:swap;src:url('fonts/vollkorn-latin-ext-italic-var.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Vollkorn';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/vollkorn-latin-normal-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Vollkorn';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/vollkorn-latin-ext-normal-var.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/source-serif-4-latin-normal-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/source-serif-4-latin-ext-normal-var.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/hanken-grotesk-latin-normal-var.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/hanken-grotesk-latin-ext-normal-var.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ============ TOKENS - LIGHT (day default) ============ */
:root{
  color-scheme:light;
  --bg:#FAF6EF;
  --bg-sunken:#F2EBDD;
  --surface:#FFFDF8;
  --surface-raised:#FFFEFB;
  --on-accent:#FFFDF8;
  --border:#E3D9C4;
  --border-strong:#C9BFA6;
  --text:#22301F;
  --text-soft:#434F3A;
  --text-faint:#454E3D;
  /* Two golds, one step apart, each accessible in the role it holds.
     --accent fills (buttons, pills, the mark): white sits on it at 7.02:1.
     --accent-text is gold used as ink on cream: 7.91:1 on the page and
     7.18:1 on the sunken sections, where the eyebrow used to sit at 4.25
     and fail AA outright. */
  --accent:#6E5417;
  --accent-strong:#5A4610;
  --accent-text:#5E4A12;
  --scroll-thumb:#6E5417;
  --control-border:#8C7F5E;
  --accent-soft:#C9A85C;
  --accent-wash:#F2E8D3;
  --positive:#3A5236;
  --caution:#63491B;
  --danger:#7C3428;
  --focus-ring:#5E4A12;
  --scrim:rgba(34,48,31,.55);

  --radius-card:16px;
  --radius-input:6px;
  --radius-btn:10px;
  --radius-sm:4px;
  --radius-pill:99px;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-gentle:cubic-bezier(.45,.05,.55,.95);

  --font-display:'Vollkorn',Georgia,'Times New Roman',serif;
  --font-body:'Source Serif 4',Georgia,serif;
  --font-ui:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  --shadow-l1:0 1px 2px rgba(34,48,31,.06);
  --shadow-l2:0 8px 30px rgba(34,48,31,.10);
  --shadow-l3:0 24px 60px rgba(34,48,31,.14);

  --maxw:1160px;
  --maxw-wide:1320px;
  --maxw-narrow:760px;
  --maxw-prose:680px;
}

/* ============ TOKENS - COMPLINE (dark) ============ */
:root.compline{
  color-scheme:dark;
  --bg:#12170F;
  --bg-sunken:#0D110B;
  --surface:#1A2115;
  --surface-raised:#222B1C;
  --on-accent:#12170F;
  --border:#33402B;
  --border-strong:#4A583E;
  --text:#EFE8D6;
  --text-soft:#C9CFC0;
  --text-faint:#A3AE93;
  --accent:#D9B25E;
  --accent-text:#D9B25E;
  --scroll-thumb:#8A6A1F;
  --control-border:#708262;
  --accent-strong:#E8C97E;
  --accent-soft:#8A6A1F;
  --accent-wash:#2E2A18;
  --positive:#9DBA8F;
  --caution:#D9B25E;
  --danger:#D98873;
  --focus-ring:#D9B25E;
  --scrim:rgba(0,0,0,.65);

  --shadow-l1:0 1px 2px rgba(0,0,0,.4);
  --shadow-l2:0 8px 30px rgba(0,0,0,.5);
  --shadow-l3:0 24px 60px rgba(0,0,0,.6);
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:16px;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--accent-wash);color:var(--text)}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-sm)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:1rem;top:1rem;z-index:300;background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-weight:600;padding:.6rem 1rem;border-radius:var(--radius-btn);transform:translateY(-300%);transition:transform .2s var(--ease)}
.skip-link:focus{transform:translateY(0)}

/* ============ THE BREATHING MARK ============ */
.selah-mark{display:inline-flex;align-items:flex-end;justify-content:center;gap:4px;flex:none}
.selah-mark span{display:block;width:5px;border-radius:3px;background:var(--accent-soft);animation:selah-breathe 7s ease-in-out infinite}
.selah-mark span:nth-child(1),.selah-mark span:nth-child(2){height:26px}
.selah-mark.lg span{height:44px;width:8px;border-radius:5px}
.selah-mark.sm span{height:18px;width:4px;border-radius:3px}
:root.compline .selah-mark span{background:var(--accent);opacity:.9}
@keyframes selah-breathe{0%,100%{transform:scaleY(1);opacity:.7}50%{transform:scaleY(1.05);opacity:1}}

.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--text);position:relative;flex:none}
.logo-mark .selah-mark span{height:13px;width:3px;border-radius:2px;background:var(--accent-soft)}
:root.compline .logo-mark{background:var(--accent)}
:root.compline .logo-mark .selah-mark span{background:var(--bg)}

/* ============ LAYOUT PRIMITIVES ============ */
.wrap{max-width:var(--maxw);margin-inline:auto;width:100%;padding-inline:1.5rem}
.wrap-narrow{max-width:var(--maxw-narrow);margin-inline:auto;width:100%;padding-inline:1.5rem}
.wrap-wide{max-width:var(--maxw-wide)}
.section{padding-block:clamp(3.5rem,8vw,7rem)}
.section.tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head.center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.85rem}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}

.h-display{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.08;font-weight:400;letter-spacing:-.02em}
.h1{font-family:var(--font-display);font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.12;font-weight:400;letter-spacing:-.018em}
.h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.18;font-weight:400;letter-spacing:-.015em}
.h3{font-family:var(--font-display);font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.3;font-weight:500;letter-spacing:-.01em}
.lead{font-family:var(--font-body);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;color:var(--text-soft);font-weight:400}
.body{font-family:var(--font-ui);font-size:1rem;line-height:1.6}
.body-serif{font-family:var(--font-body);font-size:1rem;line-height:1.7;color:var(--text-soft)}
.muted{color:var(--text-faint)}
.soft{color:var(--text-soft)}
.accent{color:var(--accent-text)}
.italic{font-style:italic}
.tnum{font-variant-numeric:tabular-nums}
/* Two-tone headline via solid colors (gold accent line), not gradient text. */
.grad-text{color:var(--accent-text)}
:root.compline .grad-text{color:var(--accent-strong)}

/* ============ HEADER / NAV ============ */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.site-header.scrolled{border-bottom-color:var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px}
.nav-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:500;font-size:1.15rem;flex:none;letter-spacing:-.01em}
.nav-brand:hover .logo-mark{transform:scale(1.05);transition:transform .2s var(--ease-gentle)}
.nav-links{display:flex;align-items:center;gap:.2rem}
.nav-links a{font-family:var(--font-ui);padding:.5rem .85rem;border-radius:var(--radius-btn);font-size:.9rem;font-weight:500;color:var(--text-soft);transition:color .15s,background .15s}
.nav-links a:hover{color:var(--text);background:var(--bg-sunken)}
.nav-links a.active{color:var(--accent-text)}
.nav-cta-group{display:flex;align-items:center;gap:.6rem;flex:none}
.nav-burger{display:none;width:42px;height:42px;border-radius:var(--radius-btn);background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;align-items:center;justify-content:center;flex:none}
.nav-burger:hover{background:var(--bg-sunken)}
.nav-burger svg{width:20px;height:20px}
.nav-theme{width:38px;height:38px;border-radius:var(--radius-btn);display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--text-soft);cursor:pointer;flex:none;transition:background .15s,color .15s}
.nav-theme:hover{background:var(--bg-sunken);color:var(--text)}
.nav-theme svg{width:18px;height:18px}

/* mobile drawer */
.mobile-drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);z-index:200;background:var(--surface);border-left:1px solid var(--border);transform:translateX(100%);visibility:hidden;transition:transform .3s var(--ease-gentle),visibility .3s;display:flex;flex-direction:column;padding:1.25rem;gap:.3rem;box-shadow:var(--shadow-l3)}
.mobile-drawer.is-open{transform:translateX(0);visibility:visible}
.mobile-drawer a{font-family:var(--font-ui);padding:.85rem 1rem;border-radius:var(--radius-btn);font-size:1rem;font-weight:500;color:var(--text)}
.mobile-drawer a:hover{background:var(--bg-sunken)}
.mobile-drawer .md-actions{margin-top:auto;display:flex;flex-direction:column;gap:.6rem;padding-top:1rem;border-top:1px solid var(--border)}
.drawer-backdrop{position:fixed;inset:0;background:var(--scrim);z-index:199;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.drawer-backdrop.is-open{opacity:1;visibility:visible}
.drawer-close{align-self:flex-end;width:36px;height:36px;border-radius:var(--radius-btn);background:transparent;border:none;color:var(--text-faint);cursor:pointer;display:grid;place-items:center;margin-bottom:.5rem}
.drawer-close:hover{background:var(--bg-sunken);color:var(--text)}

@media(max-width:960px){.nav-links{display:none}.nav-burger{display:flex}.nav-cta-group .btn-text{display:none}}
@media(max-width:560px){.nav{height:60px;gap:.5rem}.wrap{padding-inline:1rem}.nav-brand{font-size:1.02rem;gap:.45rem}.nav-brand .logo-mark{width:26px;height:26px}.nav-cta-group .btn{display:none}}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-weight:600;font-size:.9375rem;border:none;border-radius:var(--radius-btn);padding:.75rem 1.4rem;cursor:pointer;letter-spacing:-.01em;line-height:1.1;white-space:nowrap;transition:background .2s var(--ease),transform .15s var(--ease-gentle),box-shadow .2s;min-height:44px;text-decoration:none}
.btn:hover{background:var(--accent-strong);box-shadow:0 6px 22px color-mix(in srgb,var(--accent) 35%,transparent)}
:root.compline .btn:hover{background:var(--accent-strong)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.btn .ico{width:18px;height:18px;flex:none}
.btn-lg{padding:.9rem 1.6rem;font-size:1rem;min-height:48px}
.btn-sm{padding:.5rem .9rem;font-size:.875rem;min-height:36px}
.btn-block{width:100%}
.btn-secondary{background:transparent;color:var(--accent-text);border:1px solid var(--control-border)}
.btn-secondary:hover{background:var(--accent-wash);border-color:var(--accent);box-shadow:none}
.btn-ghost{background:transparent;color:var(--text-soft)}
.btn-ghost:hover{background:var(--bg-sunken);color:var(--text);box-shadow:none}
.btn-link{background:transparent;color:var(--accent-text);padding:.5rem 0;font-weight:600;gap:.3rem}
.btn-link:hover{box-shadow:none;text-decoration:underline}
.btn-text{background:transparent;color:var(--text-soft);padding:.5rem .9rem}
.btn-text:hover{background:var(--bg-sunken);color:var(--text);box-shadow:none}

/* ============ PILLS ============ */
.pill{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-ui);font-size:.75rem;font-weight:600;letter-spacing:.03em;padding:.3rem .7rem;border-radius:var(--radius-pill)}
.pill.season{background:var(--accent-wash);color:var(--text)}
/* Ink is the page's text colour, not the status colour: a status hue printed
   on a tint of itself lands around 5.7:1, and the meaning is already carried
   by the tint and the dot rather than by the letters' hue alone. */
.pill.positive{background:color-mix(in srgb,var(--positive) 18%,transparent);color:var(--text)}
.pill.positive .dot{background:var(--positive)}
.pill.muted{background:var(--bg-sunken);color:var(--text-faint);border:1px solid var(--border)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ============ LENS CHIPS ============ */
.lens-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.lens-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.84rem;font-weight:500;padding:.5rem .95rem;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--control-border);color:var(--text-soft);cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);user-select:none;min-height:40px}
.lens-chip:hover{border-color:var(--accent);color:var(--text)}
.lens-chip.selected{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-text)}
.lens-chip.selected .lc-check{display:inline-flex}
.lens-chip .lc-check{display:none;width:15px;height:15px;color:var(--accent-text)}

/* ============ CARDS ============ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.5rem;transition:transform .25s var(--ease-gentle),border-color .2s,box-shadow .2s}
.card.hover:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-l2)}
.card.raised{background:var(--surface-raised);box-shadow:var(--shadow-l1)}
.card.flush{padding:0;overflow:hidden}
/* Bare accent glyph, not a rounded filled icon-tile above the heading. */
.card-ico{color:var(--accent-text);margin-bottom:.9rem;display:block}
.card-ico svg{width:26px;height:26px}
.card h3{margin-bottom:.5rem}
.card p{color:var(--text-soft);font-family:var(--font-body);font-size:.95rem;line-height:1.6}

/* ============ HERO ============ */
.hero{position:relative;padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero-copy .h-display{margin-bottom:1.2rem}
.hero-copy .lead{margin-bottom:1.8rem;max-width:34rem}
.hero-note{margin-top:1.5rem;font-size:.82rem;color:var(--text-faint);display:flex;align-items:flex-start;gap:.5rem;line-height:1.5}
.hero-note svg{width:16px;height:16px;flex:none;color:var(--accent-text);margin-top:.1rem}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;top:-180px;right:-120px;background:radial-gradient(circle,color-mix(in srgb,var(--accent-soft) 22%,transparent),transparent 65%);filter:blur(8px)}
.hero-bg::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;bottom:-200px;left:-100px;background:radial-gradient(circle,color-mix(in srgb,var(--positive) 12%,transparent),transparent 65%);filter:blur(8px)}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}.hero-copy{max-width:40rem}}

/* ============ EMAIL CAPTURE ============ */
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

/* ============ INTERACTIVE SESSION DEMO (the moat) ============ */


/* Concept-prototype banner (audit: truthful status labeling) */
/* The notice bar inverts against the page so it reads as a frame rather than
   content. Inverting the same two tokens in Compline turns it into a bright
   strip above a dark page, so the dark theme gets a sunken surface and a gold
   rule instead: still clearly chrome, no longer a flashbang. */
.proto-banner{background:var(--text);color:var(--bg);font-family:var(--font-ui);font-size:.8rem;line-height:1.45;text-align:center;padding:.6rem 1rem}
:root.compline .proto-banner{background:var(--bg-sunken);color:var(--text-soft);border-bottom:1px solid var(--accent-soft)}
:root.compline .proto-banner strong{color:var(--accent-text)}
.proto-banner strong{font-weight:600}

/* Themed scrollbars. Gold thumb on a sunken track; auto-adapts to Compline
   via the token vars (which redefine on :root.compline). */
html{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--bg-sunken)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg-sunken)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:var(--radius-pill);border:3px solid var(--bg-sunken)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-thumb:active{background:var(--accent-strong)}
::-webkit-scrollbar-corner{background:var(--bg-sunken)}

/* session steps */
:root.compline .session-step.filled{background:var(--accent)}

.scripture{font-family:var(--font-body);font-size:1.1rem;line-height:1.75;text-align:left}
.scripture .drop-cap{float:left;font-family:var(--font-display);font-size:3.4em;line-height:.82;font-weight:400;color:var(--accent-soft);padding:.05em .12em 0 0}
:root.compline .scripture .drop-cap{color:var(--accent-strong)}
.scripture .verse{font-size:.62em;vertical-align:super;color:var(--text-faint);margin:0 .15em;font-family:var(--font-ui)}
.scripture-attr{font-family:var(--font-ui);font-size:.78rem;color:var(--text-faint);margin-top:1rem;text-align:left}
.reflection{font-family:var(--font-body);font-size:1rem;line-height:1.7;color:var(--text-soft);text-align:left;margin-top:1.25rem}
:root.compline .prayer-card-demo::before,:root.compline .prayer-card-demo::after{background:var(--accent)}

@media(max-width:520px){.demo-body{padding:1.25rem;min-height:auto}}

/* ============ SPLIT / GRIDS ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.split-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
@media(max-width:840px){.split{grid-template-columns:1fr}}
@media(max-width:720px){.split-3{grid-template-columns:1fr}}

/* ============ SEASONS GRID ============ */
.seasons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:840px){.seasons-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.seasons-grid{grid-template-columns:1fr}}
.season-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;transition:transform .25s var(--ease-gentle),border-color .2s,box-shadow .2s}
.season-tile:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-l2)}
.season-tile .st-name{font-family:var(--font-display);font-size:1.2rem;font-weight:500}
.season-tile .st-desc{font-family:var(--font-body);font-size:.9rem;color:var(--text-soft);line-height:1.55;flex:1}
.season-tile .st-link{font-family:var(--font-ui);font-size:.82rem;color:var(--accent-text);font-weight:600;margin-top:.25rem}

/* ============ STEPS (how it works) ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.5vw,2rem)}
@media(max-width:840px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step-card{position:relative;padding-top:.25rem}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--accent-wash);color:var(--accent-text);font-family:var(--font-display);font-weight:500;font-size:1.15rem;margin-bottom:1rem}
.step-card h2,.step-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:500;margin-bottom:.5rem}
.step-card p{font-family:var(--font-body);font-size:.92rem;color:var(--text-soft);line-height:1.6}

/* ============ PRICING ============ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:920px;margin-inline:auto}
@media(max-width:840px){.pricing-grid{grid-template-columns:1fr;max-width:420px}}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:2rem;display:flex;flex-direction:column;position:relative}
.price-card.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-l2)}
.price-card.featured::before{content:"Founding members";position:absolute;top:-.7rem;left:2rem;background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-size:.75rem;font-weight:600;letter-spacing:.04em;padding:.28rem .7rem;border-radius:var(--radius-pill)}
.price-tier{font-family:var(--font-display);font-size:1.1rem;font-weight:500;margin-bottom:.4rem}
/* A range like "$199-499" must not break mid-figure, and it needs to shrink
   rather than wrap when the card is narrow, so all three tiers keep one
   baseline. */
/* The figure sits on its own line and the period suffix beneath it. Inline
   they would wrap unpredictably ("$199-499" plus "/yr by size" does not fit a
   card at every width), which pushed one tier's price row out of line with the
   other two. Stacking keeps all three baselines aligned at every breakpoint. */
.price-amt{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.6rem}
.price-amt .amt{font-family:var(--font-display);font-size:clamp(2.1rem,4.2vw,2.6rem);font-weight:400;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.price-amt .per{color:var(--text-faint);font-family:var(--font-ui);font-size:.9rem;line-height:1.4}
.price-free .amt{color:var(--positive)}
.price-desc{color:var(--text-soft);font-family:var(--font-body);font-size:.9rem;margin-bottom:1.5rem;min-height:2.6em;line-height:1.5}
.price-features{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.75rem;flex:1}
.price-feat{display:flex;align-items:flex-start;gap:.55rem;font-family:var(--font-ui);font-size:.88rem}
.price-feat svg{width:18px;height:18px;color:var(--positive);flex:none;margin-top:.05rem}
.price-feat.muted{color:var(--text-faint)}
.price-feat.muted svg{color:var(--text-faint)}
.price-anchor{text-align:center;font-family:var(--font-ui);font-size:.82rem;color:var(--text-faint);margin-top:1.5rem;line-height:1.55}

/* ============ FAQ ============ */
.faq-list{display:flex;flex-direction:column;gap:.75rem}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:var(--accent)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;font-family:var(--font-ui);font-weight:600;font-size:.95rem;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .fq-plus{width:22px;height:22px;flex:none;color:var(--accent-text);transition:transform .3s var(--ease-gentle)}
.faq-item[open] summary .fq-plus{transform:rotate(45deg)}
.faq-body{padding:0 1.25rem 1.25rem;font-family:var(--font-body);color:var(--text-soft);font-size:.95rem;line-height:1.65}
.faq-body p+p{margin-top:.75rem}

/* ============ FINAL CTA ============ */
.cta-final{position:relative;text-align:center;padding:clamp(3rem,6vw,5rem) 1.5rem;border-radius:clamp(18px,3vw,28px);overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.cta-final::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;top:-300px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,color-mix(in srgb,var(--accent-soft) 22%,transparent),transparent 65%);pointer-events:none}
.cta-final > *{position:relative;z-index:1}
.cta-final h2{margin-bottom:.75rem}
.cta-final p.lead{margin-bottom:2rem;max-width:34rem;margin-inline:auto}

/* ============ FOOTER ============ */
.site-footer{border-top:1px solid var(--border);padding-block:3rem 2rem}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:2rem;margin-bottom:2.5rem}
@media(max-width:840px){.footer-grid{grid-template-columns:1fr 1fr;gap:1.75rem}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .nav-brand{margin-bottom:.8rem}
.footer-brand p{font-family:var(--font-body);font-size:.875rem;color:var(--text-faint);max-width:22rem;line-height:1.6}
.footer-col h4{font-family:var(--font-ui);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);margin-bottom:.9rem}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col a{font-family:var(--font-ui);font-size:.875rem;color:var(--text-soft)}
.footer-col a:hover{color:var(--accent-text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.75rem;border-top:1px solid var(--border);font-family:var(--font-ui);font-size:.8rem;color:var(--text-faint)}
.footer-bottom a:hover{color:var(--text)}
.footer-social{display:flex;gap:.5rem}
.footer-social a{width:34px;height:34px;border-radius:var(--radius-btn);display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);color:var(--text-faint)}
.footer-social a:hover{background:var(--bg-sunken);color:var(--accent-text);border-color:var(--accent)}
.footer-social svg{width:16px;height:16px}

/* ============ PROSE (theology, about, blog) ============ */
.prose{max-width:var(--maxw-prose);margin-inline:auto}
.prose h1{margin-bottom:1rem}
.prose .meta{color:var(--text-faint);font-family:var(--font-ui);font-size:.875rem;margin-bottom:2.5rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.prose .meta .sep{opacity:.4}
.prose h2{margin-top:2.5rem;margin-bottom:.85rem;font-family:var(--font-display);font-size:1.5rem;font-weight:500;letter-spacing:-.015em}
.prose h3{margin-top:1.8rem;margin-bottom:.65rem;font-family:var(--font-display);font-size:1.15rem;font-weight:500}
.prose p{margin-bottom:1.1rem;line-height:1.75;color:var(--text-soft);font-family:var(--font-body);font-size:1.05rem}
.prose p:first-of-type{font-size:1.15rem;color:var(--text);line-height:1.65}
.prose strong{color:var(--text);font-weight:600}
.prose em{color:var(--accent-text);font-style:italic}
.prose ul,.prose ol{margin-bottom:1.1rem;padding-left:1.4rem;color:var(--text-soft);line-height:1.75;font-family:var(--font-body)}
.prose ul li,.prose ol li{margin-bottom:.4rem}
.prose ul li::marker{color:var(--accent-text)}
.prose ol li::marker{color:var(--accent-text);font-weight:600}
.prose blockquote{position:relative;margin:1.75rem 0;padding:1.5rem 1.75rem 1.5rem 3.25rem;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius-card);font-family:var(--font-display);font-size:1.15rem;font-style:italic;color:var(--text);line-height:1.6}
.prose blockquote::before{content:"\201C";position:absolute;left:1rem;top:.5rem;font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--accent-soft)}
:root.compline .prose blockquote::before{color:var(--accent-text)}
.prose blockquote p{margin-bottom:0;color:var(--text);font-size:1.15rem}
.prose code{font-family:ui-monospace,'SF Mono',monospace;font-size:.875em;background:var(--bg-sunken);border:1px solid var(--border);padding:.12rem .4rem;border-radius:var(--radius-sm);color:var(--accent-text)}
.prose hr{border:none;height:1px;background:var(--border);margin:2.5rem 0}
.prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}

/* ============ PAGE HEADER (interior pages) ============ */
.page-head{padding-block:clamp(2.75rem,5vw,4.25rem) clamp(1.75rem,3vw,2.75rem);text-align:center;position:relative;
  background:
    radial-gradient(120% 135% at 50% -25%, color-mix(in srgb,var(--accent-soft) 18%,transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-sunken) 0%, var(--bg) 100%)}
:root.compline .page-head{background:
    radial-gradient(120% 135% at 50% -25%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-sunken) 0%, var(--bg) 100%)}
.page-head .eyebrow{justify-content:center}
.page-head h1{margin-bottom:1rem}
.page-head .lead{margin-inline:auto;max-width:40rem}
.breadcrumb{display:flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-size:.82rem;color:var(--text-faint);margin-bottom:1.5rem;flex-wrap:wrap}
.breadcrumb .sep{opacity:.4}
/* WCAG 2.5.8: a standalone link is a target, and a 20px-tall one is under the
   24px floor. Padding does the work so the trail keeps its line rhythm. */
.breadcrumb a{display:inline-flex;align-items:center;min-height:24px;padding-block:.15rem}
.breadcrumb a:hover{color:var(--accent-text)}
.breadcrumb .cur{color:var(--text);font-weight:600}

/* ============ COMPARISON TABLE ============ */
.compare-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-card)}
.compare-table{width:100%;border-collapse:collapse;min-width:660px}
.compare-table th,.compare-table td{text-align:left;padding:1rem 1.1rem;border-bottom:1px solid var(--border);vertical-align:middle}
.compare-table thead th{background:var(--bg-sunken);font-family:var(--font-ui);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint)}
.compare-table thead th.us{color:var(--accent-text)}
.compare-table tbody tr:hover{background:var(--bg-sunken)}
.compare-table tbody tr:last-child td{border-bottom:none}
.compare-table td.feature{font-family:var(--font-ui);font-weight:600;color:var(--text)}
.compare-table td.feature small{display:block;font-weight:400;color:var(--text-faint);font-size:.78rem;margin-top:.15rem;font-family:var(--font-body)}
.compare-yes{color:var(--positive);display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-ui);font-size:.85rem;font-weight:600}
.compare-no{color:var(--text-faint);display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-ui);font-size:.85rem}
.compare-mid{color:var(--caution);display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-ui);font-size:.85rem;font-weight:600}
.compare-us{background:var(--accent-wash);color:var(--accent-text);font-family:var(--font-ui);font-weight:600;font-size:.85rem}

/* ============ CHANGELOG ============ */
.changelog{display:flex;flex-direction:column;gap:0}
.change-entry{display:grid;grid-template-columns:160px 1fr;gap:1.5rem;padding:1.75rem 0;border-bottom:1px solid var(--border)}
.change-entry:last-child{border-bottom:none}
.change-date{font-family:var(--font-ui);font-size:.82rem;color:var(--accent-text);font-weight:600;font-variant-numeric:tabular-nums}
.change-entry h3{font-family:var(--font-display);font-size:1.1rem;font-weight:500;margin-bottom:.4rem}
.change-entry p{color:var(--text-soft);font-family:var(--font-body);font-size:.92rem;line-height:1.6}
.change-tag{display:inline-flex;font-family:var(--font-ui);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .5rem;border-radius:var(--radius-sm);margin-left:.5rem;vertical-align:.1em}
.change-tag.new{background:color-mix(in srgb,var(--positive) 18%,transparent);color:var(--text)}
.change-tag.policy{background:var(--accent-wash);color:var(--text)}
.change-tag.boundary{background:color-mix(in srgb,var(--positive) 18%,transparent);color:var(--text)}
@media(max-width:560px){.change-entry{grid-template-columns:1fr;gap:.5rem}}

/* ============ TOAST (shared) ============ */
@media(max-width:768px){.toast-stack{left:1rem;right:1rem;bottom:1rem}}
@keyframes toast-in{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.15s!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .selah-mark span{animation:none;opacity:1;transform:none}
  .hero-bg::before,.hero-bg::after{display:none}
}

/* ============ MISC UTILS ============ */
:root.compline .divider-gold{background:var(--accent)}
.mono{font-family:ui-monospace,'SF Mono',monospace}
.text-center{text-align:center}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}
.hidden{display:none!important}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:680px){.grid-2{grid-template-columns:1fr}}

/* honesty callout (used across pages) */
.honesty-note{display:flex;gap:.75rem;align-items:flex-start;padding:1.1rem 1.25rem;background:var(--bg-sunken);border:1px solid var(--border-strong);border-radius:var(--radius-card);font-family:var(--font-body);font-size:.9rem;color:var(--text-soft);line-height:1.6}
.honesty-note svg{width:18px;height:18px;flex:none;color:var(--accent-text);margin-top:.1rem}
.honesty-note b{color:var(--text);font-weight:600}

/* =====================================================================
   SELAH - WordPress theme additions
   Reading progress · scroll-to-top · ⌘K/"/" search modal · interior
   page utilities · CPT card grids · design-system page.
   ===================================================================== */

/* ============ READING PROGRESS ============ */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:150;pointer-events:none;background:transparent}
.reading-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent-soft),var(--accent));transition:transform .1s linear;will-change:transform}
:root.compline .reading-progress span{background:linear-gradient(90deg,var(--accent),var(--accent-strong))}

/* ============ SCROLL TO TOP ============ */
.scroll-top{position:fixed;bottom:1.5rem;right:1.5rem;z-index:140;width:46px;height:46px;border-radius:var(--radius-btn);display:grid;place-items:center;background:var(--surface-raised);border:1px solid var(--control-border);color:var(--accent-text);cursor:pointer;box-shadow:var(--shadow-l2);opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .3s var(--ease),transform .3s var(--ease-gentle),visibility .3s,background .15s}
.scroll-top.is-visible{opacity:1;visibility:visible;transform:none}
.scroll-top:hover{background:var(--accent-wash);border-color:var(--accent)}
.scroll-top svg{width:20px;height:20px}
@media(max-width:560px){.scroll-top{bottom:1rem;right:1rem;width:42px;height:42px}}

/* ============ SEARCH MODAL ============ */
.search-modal{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding:clamp(3rem,12vh,9rem) 1rem 2rem}
.search-modal.is-open{display:flex}
.search-backdrop{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.search-panel{position:relative;width:min(100%,620px);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-card);box-shadow:var(--shadow-l3);overflow:hidden;animation:pop .22s var(--ease-gentle)}
.search-input-row{display:flex;align-items:center;gap:.7rem;padding:1rem 1.15rem;border-bottom:1px solid var(--border);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.search-input-row:focus-within{border-bottom-color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent)}
.search-input-row:focus-within svg{color:var(--accent-text)}
.search-input-row svg{width:20px;height:20px;color:var(--text-faint);flex:none}
.search-input{flex:1;min-width:0;background:none;border:none;outline:none;font-family:var(--font-ui);font-size:1.05rem;color:var(--text)}
.search-input::placeholder{color:var(--text-faint)}
.search-esc{font-family:var(--font-ui);font-size:.75rem;font-weight:600;color:var(--text-faint);background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.25rem .5rem;cursor:pointer;flex:none}
.search-results{max-height:min(60vh,420px);overflow-y:auto;padding:.5rem}
.search-result{display:flex;align-items:baseline;gap:.75rem;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:.75rem .9rem;border-radius:var(--radius-btn);transition:background .12s}
.search-result:hover,.search-result.is-active{background:var(--bg-sunken)}
.search-result .sr-kind{font-family:var(--font-ui);font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-wash);padding:.18rem .45rem;border-radius:var(--radius-sm);flex:none;min-width:5.5rem;text-align:center}
.search-result .sr-body{min-width:0}
.search-result .sr-title{font-family:var(--font-ui);font-size:.95rem;font-weight:600;color:var(--text)}
.search-result .sr-blurb{font-family:var(--font-body);font-size:.82rem;color:var(--text-faint);margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-empty{padding:2rem 1rem;text-align:center;font-family:var(--font-body);color:var(--text-faint)}

/* ============ SESSION / ADVISOR / CHANGELOG CARD GRIDS ============ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.session-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.5rem;display:flex;flex-direction:column;gap:.65rem;transition:transform .25s var(--ease-gentle),border-color .2s,box-shadow .2s}
.session-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-l2)}
.session-card .sc-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-family:var(--font-ui);font-size:.75rem;color:var(--text-faint)}
.session-card .sc-scripture{font-family:var(--font-display);font-size:1.2rem;font-weight:500;line-height:1.25}
.session-card .sc-desc{font-family:var(--font-body);font-size:.9rem;color:var(--text-soft);line-height:1.55;flex:1}
.advisor-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.5rem;display:flex;flex-direction:column;gap:.4rem}
.advisor-card .ac-name{font-family:var(--font-display);font-size:1.2rem;font-weight:500;margin:0}
.advisor-card .ac-role{font-family:var(--font-ui);font-size:.82rem;font-weight:600;color:var(--accent-text)}
.advisor-card .ac-aff{font-family:var(--font-ui);font-size:.8rem;color:var(--text-faint)}
.advisor-card p{font-family:var(--font-body);font-size:.9rem;color:var(--text-soft);line-height:1.55;margin-top:.4rem}

/* ============ DESIGN SYSTEM PAGE ============ */
.ds-section{margin-block:clamp(2.5rem,5vw,4rem)}
.ds-section h2{margin-bottom:.4rem}
.ds-section .ds-note{font-family:var(--font-body);color:var(--text-soft);margin-bottom:1.5rem;max-width:44rem}
.ds-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.ds-swatch{border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:var(--surface)}
.ds-swatch .sw-color{height:72px}
.ds-swatch .sw-meta{padding:.6rem .75rem;font-family:var(--font-ui)}
.ds-swatch .sw-name{font-size:.82rem;font-weight:600}
.ds-swatch .sw-var{font-size:.75rem;color:var(--text-faint);font-family:ui-monospace,monospace}
.ds-type-row{padding:1rem 0;border-bottom:1px solid var(--border)}
.ds-type-row:last-child{border-bottom:none}
.ds-type-row .ds-type-label{font-family:ui-monospace,monospace;font-size:.75rem;color:var(--text-faint);margin-bottom:.35rem}
.ds-tokens{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}
.ds-token{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-input);font-family:ui-monospace,monospace;font-size:.78rem}
.ds-token .dt-val{color:var(--text-faint)}
.ds-demo-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ============ WAYS PAGE ============ */
.ways-cat{margin-block:clamp(2.25rem,4vw,3.25rem)}
.ways-cat-head{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.5rem}
.ways-cat-head .wc-num{font-family:ui-monospace,monospace;font-size:.8rem;color:var(--accent-text);font-weight:600}
.ways-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.way-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.25rem}
.way-card .way-n{font-family:ui-monospace,monospace;font-size:.75rem;color:var(--accent-text);font-weight:600}
.way-card p{font-family:var(--font-body);font-size:.92rem;color:var(--text-soft);line-height:1.6;margin-top:.5rem}

/* ============ PAGE / CONTENT ============ */
.section-alt{background:var(--bg-sunken)}

/* ============ APP SCREENSHOT SHOWCASE ============ */
/* The PNGs already include the device bezel + status bar, so we only add a
   soft float shadow and a warm glow behind the cluster. */
.app-phone{width:100%;height:auto;filter:drop-shadow(0 24px 48px rgba(34,48,31,.18));border-radius:34px}
:root.compline .app-phone{filter:drop-shadow(0 24px 48px rgba(0,0,0,.55))}

/* Staggered three-phone cluster (home). */
.app-cluster{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2vw,1.5rem);align-items:center;max-width:760px;margin-inline:auto}
.app-cluster .app-phone{transition:transform .4s var(--ease-gentle)}
.app-cluster figure{margin:0}
.app-cluster figure:nth-child(1){transform:translateY(1.5rem) rotate(-2deg)}
.app-cluster figure:nth-child(3){transform:translateY(1.5rem) rotate(2deg)}
.app-cluster figure:nth-child(2){z-index:2}
.app-cluster:hover figure:nth-child(1){transform:translateY(1rem) rotate(-3deg)}
.app-cluster:hover figure:nth-child(3){transform:translateY(1rem) rotate(3deg)}
.app-showcase-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.app-showcase-bg::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;top:-25%;left:50%;transform:translateX(-50%);background:radial-gradient(circle,color-mix(in srgb,var(--accent-soft) 22%,transparent),transparent 65%);filter:blur(10px)}
@media(prefers-reduced-motion:reduce){.app-cluster figure{transition:none}}
@media(max-width:640px){
  .app-cluster{grid-template-columns:1fr;max-width:280px;gap:2rem}
  .app-cluster figure:nth-child(1),.app-cluster figure:nth-child(3){transform:none}
}

/* Feature + single phone split (how-it-works, app). */
.app-split{display:grid;grid-template-columns:1fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.app-split.reverse{grid-template-columns:.8fr 1fr}
.app-split .app-phone-single{max-width:300px;margin-inline:auto}
.app-caption{font-family:var(--font-ui);font-size:.78rem;color:var(--text-faint);text-align:center;margin-top:1rem;line-height:1.5}
.app-caption b{color:var(--text);font-weight:600}
@media(max-width:840px){.app-split,.app-split.reverse{grid-template-columns:1fr}.app-split .order-first{order:-1}}

/* Even gallery grid (app page). */
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:start}
.app-grid figure{margin:0}
@media(max-width:900px){.app-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(max-width:460px){.app-grid{grid-template-columns:1fr;max-width:280px;margin-inline:auto}}
.app-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2rem);max-width:560px;margin-inline:auto;align-items:start}
@media(max-width:460px){.app-pair{grid-template-columns:1fr;max-width:280px}}

/* ============ HERO - REAL APP PHONES ============ */
.hero-phones{position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:1px;padding-top:1rem}
.hero-phones figure{margin:0}
.hero-phone-front{position:relative;z-index:2;width:min(78%,300px)}
.hero-phone-front .app-phone{filter:drop-shadow(0 30px 60px rgba(34,48,31,.22))}
:root.compline .hero-phone-front .app-phone{filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.hero-phone-back{position:absolute;z-index:1;width:min(62%,232px);top:2.4rem;right:2%;transform:rotate(5deg);opacity:.92;filter:saturate(.98)}
.hero-phone-back .app-phone{filter:drop-shadow(0 18px 44px rgba(34,48,31,.16))}
:root.compline .hero-phone-back .app-phone{filter:drop-shadow(0 18px 44px rgba(0,0,0,.5))}
.hero-phone-tag{position:absolute;z-index:3;bottom:1.25rem;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--accent-text);background:var(--surface-raised);border:1px solid var(--border-strong);padding:.4rem .8rem;border-radius:var(--radius-pill);box-shadow:var(--shadow-l2);white-space:nowrap}
.hero-phone-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:960px){
  .hero-phones{padding-top:0}
  .hero-phone-front{width:min(66%,280px)}
  .hero-phone-back{width:min(52%,210px);top:1.5rem;right:8%}
}
@media(max-width:520px){
  .hero-phone-front{width:min(80%,260px)}
  .hero-phone-back{display:none}
  .hero-phone-tag{bottom:.5rem}
}

/* =====================================================================
   SELAH - SECTION ATMOSPHERE
   Quiet, literary backgrounds that embody scripture / the app: parchment
   grain (Bible page), topographic contour rings (seasons / journey), an
   oversized faint scripture word (editorial watermark), and gold/sage glow
   meshes. All sit BEHIND text (z-index 0), theme-aware, motion-safe.
   ===================================================================== */
.has-atmo{position:relative;overflow:hidden;isolation:isolate}
.has-atmo > .wrap,
.has-atmo > .wrap-narrow,
.has-atmo > .wrap-prose{position:relative;z-index:1}
.atmo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* Parchment grain - warm paper, the literary/Bible surface. */
.atmo-parchment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;opacity:.05;mix-blend-mode:multiply;
}
:root.compline .atmo-parchment{opacity:.07;mix-blend-mode:screen}

/* Topographic contour rings - seasons, landscape, the journey. */
.atmo-contours{
  background:
    repeating-radial-gradient(circle at 12% 118%, transparent 0 46px, color-mix(in srgb,var(--accent) 6%,transparent) 46px 47px, transparent 47px 92px),
    repeating-radial-gradient(circle at 96% -12%, transparent 0 54px, color-mix(in srgb,var(--positive) 7%,transparent) 54px 55px, transparent 55px 108px);
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%, #000 55%, transparent 100%);
  mask-image:radial-gradient(120% 120% at 50% 50%, #000 55%, transparent 100%);
  opacity:.85;
}
:root.compline .atmo-contours{opacity:.7}

/* Gold + sage glow mesh - depth, the app's warm atmosphere. */
.atmo-mesh::before,.atmo-mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(14px)}
.atmo-mesh::before{width:min(60vw,640px);aspect-ratio:1;top:-32%;left:-8%;background:radial-gradient(circle,color-mix(in srgb,var(--accent-soft) 20%,transparent),transparent 66%)}
.atmo-mesh::after{width:min(52vw,540px);aspect-ratio:1;bottom:-34%;right:-6%;background:radial-gradient(circle,color-mix(in srgb,var(--positive) 12%,transparent),transparent 66%)}

/* Oversized faint scripture word - editorial watermark bleeding off an edge. */
.atmo-verse{overflow:hidden}
.atmo-word{
  position:absolute;right:-2%;bottom:-8%;white-space:nowrap;user-select:none;
  font-family:var(--font-display);font-weight:300;font-style:italic;
  font-size:clamp(7rem,26vw,24rem);line-height:.8;letter-spacing:-.04em;
  color:color-mix(in srgb,var(--accent) 6%,transparent);
}
:root.compline .atmo-word{color:color-mix(in srgb,var(--accent) 9%,transparent)}
@media(max-width:640px){.atmo-word{font-size:clamp(5rem,34vw,10rem);right:-6%;bottom:-4%}}

/* App-motif line illustrations. Faint, gold (token), corner-anchored, masked so
   they inherit the theme. Applied to a few pages for warmth without stock-photo
   slop (the brand anti-references forbid generic SaaS photography). */
.atmo-book::before,.atmo-device::before,.atmo-community::before{
  content:"";position:absolute;background:var(--accent-soft);opacity:.16;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;
}
:root.compline .atmo-book::before,:root.compline .atmo-device::before,:root.compline .atmo-community::before{background:var(--accent);opacity:.22}
.atmo-book::before{width:clamp(140px,20vw,240px);aspect-ratio:120/96;left:-1.5%;bottom:-8%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 22C48 15 30 13 14 19v56c16-6 34-4 46 3'/%3E%3Cpath d='M60 22c12-7 30-9 46-3v56c-16-6-34-4-46 3'/%3E%3Cpath d='M60 22v59'/%3E%3Cpath d='M23 31l25-3M23 41l25-3M23 51l22-2'/%3E%3Cpath d='M72 28l25 3M72 38l25 3M75 49l22 2'/%3E%3Cpath d='M60 81v11'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M60 22C48 15 30 13 14 19v56c16-6 34-4 46 3'/%3E%3Cpath d='M60 22c12-7 30-9 46-3v56c-16-6-34-4-46 3'/%3E%3Cpath d='M60 22v59'/%3E%3Cpath d='M23 31l25-3M23 41l25-3M23 51l22-2'/%3E%3Cpath d='M72 28l25 3M72 38l25 3M75 49l22 2'/%3E%3Cpath d='M60 81v11'/%3E%3C/g%3E%3C/svg%3E")}
.atmo-device::before{width:clamp(84px,11vw,132px);aspect-ratio:60/96;right:4%;top:9%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='48' height='88' rx='9'/%3E%3Cpath d='M26 13h8'/%3E%3Cpath d='M25 32v15M31 32v15'/%3E%3Cpath d='M18 60h24M18 68h24M18 76h15'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='48' height='88' rx='9'/%3E%3Cpath d='M26 13h8'/%3E%3Cpath d='M25 32v15M31 32v15'/%3E%3Cpath d='M18 60h24M18 68h24M18 76h15'/%3E%3C/g%3E%3C/svg%3E")}
.atmo-community::before{width:clamp(150px,22vw,250px);aspect-ratio:120/72;left:-1%;bottom:-6%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='40' cy='22' r='12'/%3E%3Cpath d='M17 64c0-14 10-23 23-23s23 9 23 23'/%3E%3Ccircle cx='86' cy='26' r='10'/%3E%3Cpath d='M68 64c0-12 8-20 18-20s18 8 18 20'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 72'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='40' cy='22' r='12'/%3E%3Cpath d='M17 64c0-14 10-23 23-23s23 9 23 23'/%3E%3Ccircle cx='86' cy='26' r='10'/%3E%3Cpath d='M68 64c0-12 8-20 18-20s18 8 18 20'/%3E%3C/g%3E%3C/svg%3E")}
@media(max-width:640px){.atmo-book::before,.atmo-community::before{opacity:.08}.atmo-device::before{display:none}}

/* ============ IMPLEMENTATION PLAN PAGE ============ */
.ip-principles{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
@media(max-width:640px){.ip-principles{grid-template-columns:1fr}}
.ip-principle{display:flex;gap:.9rem;padding:1rem 0;border-top:1px solid var(--border)}
.ip-principle .ip-n{font-family:ui-monospace,'SF Mono',monospace;font-size:.8rem;font-weight:600;color:var(--accent-text);flex:none;padding-top:.15rem}
.ip-principle p{font-family:var(--font-body);font-size:.95rem;color:var(--text-soft);line-height:1.55;margin:0}
.ip-phases{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}
@media(min-width:900px){.ip-phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ip-phase{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:clamp(1.5rem,3vw,2.25rem);transition:border-color .2s,box-shadow .2s}
.ip-phase:hover{border-color:var(--border-strong);box-shadow:var(--shadow-l1)}
.ip-phase-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .9rem;margin-bottom:.35rem}
.ip-phase-tag{font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.ip-phase-meta{font-family:ui-monospace,'SF Mono',monospace;font-size:.76rem;color:var(--text-faint)}
.ip-phase h3{font-family:var(--font-display);font-size:1.4rem;font-weight:500;line-height:1.25;margin:.15rem 0 .6rem}
.ip-phase > p{font-family:var(--font-body);color:var(--text-soft);line-height:1.6;margin-bottom:1.15rem}
.ip-tasks{display:grid;grid-template-columns:1fr;gap:.55rem 1.75rem;margin:0 0 1.25rem;list-style:none;padding:0}
@media(min-width:1200px){.ip-tasks{grid-template-columns:1fr 1fr}}
.ip-tasks li{position:relative;padding-left:1.45rem;font-family:var(--font-ui);font-size:.9rem;color:var(--text-soft);line-height:1.5}
.ip-tasks li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:2px;border:1.5px solid var(--accent-soft)}
:root.compline .ip-tasks li::before{border-color:var(--accent)}
.ip-gate{background:var(--bg-sunken);border:1px solid var(--border-strong);border-radius:var(--radius-card);padding:1rem 1.25rem}
.ip-gate .ip-gate-label{font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);display:block;margin-bottom:.4rem}
.ip-gate p{font-family:var(--font-body);font-size:.9rem;color:var(--text-soft);line-height:1.55;margin:0}
.ip-gate .ip-fail{color:var(--danger);font-weight:600}
.ip-disciplines h2{margin-top:2.5rem}
.ip-disciplines h2:first-child{margin-top:0}

/* Keep the footer credit clear of the floating scroll-to-top button (desktop). */
@media(min-width:561px){.footer-bottom{padding-right:3.75rem}}

/* =====================================================================
   LAYOUT UTILITIES
   Small, named classes that replace the inline `style` attributes the
   templates used to carry, so every rule is themeable in one place.
   ================================================================== */
.section-ruled{border-top:1px solid var(--border)}
.split-centered{align-items:center}
.lead-tight{margin-bottom:1.5rem}
.eyebrow-center{justify-content:center}
.h-display-accent{color:var(--accent-text)}
:root.compline .h-display-accent{color:var(--accent-strong)}
.cta-final__action{margin-top:1.75rem;display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
.honesty-note--block{margin-top:2rem;max-width:44rem}
/* A caveat that has to be read before the thing it qualifies: above the grid,
   not after it, and marked as the first voice on the section. */
.honesty-note--lead{margin-top:0;margin-bottom:2rem;max-width:44rem;border-color:var(--control-border)}
.section-foot{margin-top:2.5rem;text-align:center}

/* Tick + text rows inside cards (commitments, leader view, why-drawer). */
.check-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.check-row{display:flex;gap:.55rem;align-items:flex-start;font-family:var(--font-ui);font-size:.88rem;line-height:1.55;color:var(--text-soft)}
.check-row__mark{flex:none;width:16px;color:var(--positive);margin-top:.15rem}
.check-row__mark svg{width:16px;height:16px;display:block}

/* Empty states: same spacing rhythm as the grids they replace. */
.empty-state{grid-column:1/-1;text-align:center;padding:clamp(2rem,5vw,3.5rem) 1.5rem;background:var(--bg-sunken);border:1px dashed var(--border-strong);border-radius:var(--radius-card)}
.empty-state__title{font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--text);margin-bottom:.5rem}
.empty-state__body{font-family:var(--font-ui);font-size:.9rem;color:var(--text-faint);max-width:38ch;margin-inline:auto;line-height:1.6}
.empty-state .btn{margin-top:1.25rem}

/* =====================================================================
   FORMS (Contact Form 7)
   One control geometry everywhere: padding-driven sizing, a shared 48px
   baseline, tokenised borders, and a visible focus ring in both themes.
   ================================================================== */
.hero-form{margin-top:1.75rem;max-width:32rem}
.form-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow-l1)}

.selah-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.selah-form .form-field--full{grid-column:1/-1}
@media(max-width:640px){.selah-form .form-grid{grid-template-columns:1fr}}

.selah-form .form-label{display:block;font-family:var(--font-ui);font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--text);margin-bottom:.4rem}
.selah-form .field-optional{font-weight:400;color:var(--text-faint);letter-spacing:normal}
.selah-form .form-help{font-family:var(--font-ui);font-size:.78rem;color:var(--text-faint);line-height:1.55;margin-top:.45rem}
/* The base reset makes every link inherit its surroundings, which is right in
   nav and wrong in prose: inside help and privacy text a link was rendering as
   plain grey with no underline, so the one route to the privacy notice was
   invisible and identifiable by nothing at all (WCAG 1.4.1). */
.selah-form .form-help a,
.selah-form .form-priv a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.selah-form .form-help a:hover,
.selah-form .form-priv a:hover{text-decoration-thickness:2px}

.selah-form input[type=text],
.selah-form input[type=email],
.selah-form input[type=url],
.selah-form select,
.selah-form textarea{
  display:flex;align-items:center;width:100%;min-height:48px;
  padding:.75rem 1rem;
  background:var(--surface-raised);border:1px solid var(--control-border);border-radius:var(--radius-input);
  color:var(--text);font-family:var(--font-ui);font-size:.9375rem;line-height:1.5;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.selah-form textarea{min-height:7.5rem;line-height:1.65;resize:vertical}
.selah-form select{appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454E3D' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px}
:root.compline .selah-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3AE93' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.selah-form ::placeholder{color:var(--text-faint);opacity:1}
.selah-form input:focus,
.selah-form select:focus,
.selah-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.selah-form input:focus-visible,
.selah-form select:focus-visible,
.selah-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.selah-form [aria-invalid=true],
.selah-form .wpcf7-not-valid{border-color:var(--danger)}

.selah-form .form-foot{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;align-items:flex-start}
.selah-form .form-priv{font-family:var(--font-ui);font-size:.8rem;color:var(--text-faint);line-height:1.6;margin:0}
.selah-form input[type=submit]{width:auto;min-height:48px}

/* Consent row. The tick is a real control, so it gets a real target: the label
   fills the row, the box is 20px on a 44px-tall line, and the hit area is the
   whole sentence rather than the square. */
.selah-form .form-consent{margin-top:.25rem}
.selah-form .form-consent .wpcf7-list-item{margin:0}
.selah-form .form-consent label{display:flex;align-items:flex-start;gap:.7rem;min-height:44px;padding:.5rem .75rem .5rem 0;
  font-family:var(--font-ui);font-size:.875rem;line-height:1.55;color:var(--text-soft);cursor:pointer}
.selah-form .form-consent input[type=checkbox]{flex:none;width:20px;height:20px;margin-top:.15rem;accent-color:var(--accent);cursor:pointer}
.selah-form .form-consent input[type=checkbox]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.selah-form .form-consent .wpcf7-list-item-label{display:block}
.selah-form .form-consent .form-help{margin:.15rem 0 0}
.selah-form .form-consent .wpcf7-not-valid-tip{margin-top:0}

/* The honeypot must be unreachable, not merely invisible: hidden from sight
   here, from assistive technology by aria-hidden, and from the keyboard by
   tabindex="-1" on the field itself (see the Selah Core CF7 definitions). */
.selah-form .hp-field{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* CF7's own response and validation chrome, restyled to the token system. */
.selah-form .wpcf7-not-valid-tip{display:block;font-family:var(--font-ui);font-size:.78rem;color:var(--danger);margin-top:.35rem}
.selah-form .wpcf7-response-output{margin:1.25rem 0 0;padding:.9rem 1.1rem;border:1px solid var(--border-strong);border-radius:var(--radius-btn);
  font-family:var(--font-ui);font-size:.875rem;line-height:1.6;color:var(--text-soft);background:var(--bg-sunken)}
.selah-form.sent .wpcf7-response-output{border-color:var(--positive);color:var(--positive)}
.selah-form.invalid .wpcf7-response-output,
.selah-form.spam .wpcf7-response-output,
.selah-form.failed .wpcf7-response-output{border-color:var(--danger);color:var(--danger)}
.selah-form .wpcf7-spinner{margin-inline-start:.75rem}
.selah-form.submitting input[type=submit]{opacity:.65;cursor:progress}
.form-missing{font-family:var(--font-ui);font-size:.9rem;color:var(--text-faint);padding:1rem 1.25rem;border:1px dashed var(--border-strong);border-radius:var(--radius-btn)}

/* =====================================================================
   THANK YOU
   ================================================================== */
.thanks-body{max-width:var(--maxw-prose);margin-inline:auto;text-align:center}
.thanks-body .selah-mark{display:inline-flex;margin-bottom:1.5rem}
.thanks-next{margin-top:2rem;padding:1.25rem 1.5rem;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius-card);
  font-family:var(--font-ui);font-size:.9rem;line-height:1.65;color:var(--text-soft);text-align:left}
.thanks-links{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* =====================================================================
   NAMED CLASSES FOR THE REMAINING INLINE STYLES
   ================================================================== */
/* The toggle shows the current mode, driven by the root class the pre-paint
   script sets, so the correct icon is right on the very first frame. */
:root:not(.compline) .nav-theme .ico-moon{display:none}
:root.compline .nav-theme .ico-sun{display:none}

.app-showcase{position:relative;overflow:hidden}
.app-showcase__note{margin-top:2.5rem}
.card-ico--danger{color:var(--danger)}
.honesty-note--inset{margin-top:.75rem}
.lens-chip--static{cursor:default}
.prose-flush{margin:0}
.card-note{font-family:var(--font-ui);font-size:.82rem;color:var(--text-faint);margin-top:.75rem}
.contact-alt{font-family:var(--font-ui);font-size:.9rem;color:var(--text-faint)}
.contact-alt a{color:var(--accent-text)}
.thanks-section{padding-top:clamp(4rem,10vh,7rem)}

/* Long-form documents stored in the editor. */
.doc-body{max-width:var(--maxw-prose);margin-inline:auto}

/* Footer headings are real headings now, styled to match the old <h4>. */
.footer-col__title{font-family:var(--font-ui);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:.9rem}
.footer-col__title--stacked{margin-top:1.75rem}
.footer-legal{display:flex;gap:1.25rem;flex-wrap:wrap}
.footer-legal a{font-family:var(--font-ui);font-size:.8rem;color:var(--text-faint)}
.footer-legal a:hover{color:var(--accent-text)}
.footer-credit{font-family:var(--font-ui);font-size:.8rem;color:var(--text-faint)}
.footer-credit a{display:inline-flex;align-items:center;min-height:24px}

/* Search modal: the empty and no-result notes share one look. */
.search-empty{font-family:var(--font-ui);font-size:.88rem;color:var(--text-faint);padding:1.5rem 1rem;text-align:center;margin:0}

/* =====================================================================
   REMAINING NAMED UTILITIES
   Replacements for the last of the inline style attributes.
   ================================================================== */
.selah-mark--block{display:inline-flex;margin-bottom:1.5rem}
.lead-centered{margin:1rem auto 2rem;max-width:34rem}
.action-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.action-row--center{justify-content:center}
.pill--start{align-self:flex-start}
.lens-chip--start{align-self:flex-start}
.scripture-attr--flush{margin:0}
.ds-demo-row--spaced,.ds-tokens--spaced{margin-bottom:1.25rem}
.split--spaced{margin-bottom:1.5rem}
.ds-form-demo{max-width:26rem}
.ds-shadow-demo{min-width:150px;text-align:center}
.ds-shadow-demo__var{font-size:.75rem}

/* =====================================================================
   SEARCH FORM
   The no-JavaScript search route, on the same control geometry as the
   Contact Form 7 fields so the two never look like different products.
   ================================================================== */
.search-form{max-width:34rem}
.search-form__row{display:flex;gap:.5rem}
.search-form__input{
  flex:1;min-width:0;min-height:48px;
  padding:.75rem 1rem;
  background:var(--surface-raised);border:1px solid var(--control-border);border-radius:var(--radius-input);
  color:var(--text);font-family:var(--font-ui);font-size:.9375rem;line-height:1.5;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.search-form__input::placeholder{color:var(--text-faint);opacity:1}
.search-form__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.search-form__row .btn{flex:none}
@media(max-width:480px){.search-form__row{flex-direction:column}.search-form__row .btn{width:100%}}

/* Card titles became links so sessions and advisors are reachable rather than
   orphaned. The link inherits the heading's type; only the hover state differs. */
.session-card .sc-scripture a,
.advisor-card .ac-name a{color:inherit;text-decoration:none}
.session-card .sc-scripture a:hover,
.advisor-card .ac-name a:hover{color:var(--accent-text)}
.session-card .sc-scripture a:focus-visible,
.advisor-card .ac-name a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* =====================================================================
   TOUCH TARGET FLOOR (WCAG 2.5.5)

   Every control gets a 44px minimum interactive area. Where the design
   calls for a visually smaller control, the box is grown with padding or
   an invisible inset pseudo-element rather than by scaling the artwork,
   so the look is unchanged and the tappable area is honest.
   ================================================================== */
.nav-theme,
.nav-burger,
.drawer-close,
.footer-social a{min-width:44px;min-height:44px}

.btn-sm,
.btn-link,
.search-esc,
.lens-chip{min-height:44px}
.btn-link,
.search-esc{display:inline-flex;align-items:center}

/* Text-only links that act as controls need the height without the bulk, so
   the padding is vertical only and the row keeps its rhythm. */
.nav-brand{display:inline-flex;align-items:center;min-height:44px}
.footer-legal a{display:inline-flex;align-items:center;min-height:44px}
.skip-link{min-height:44px;display:flex;align-items:center}

@media(max-width:560px){
  /* The compact header still has to clear the floor, so the icon buttons keep
     44px here rather than shrinking with the bar. */
  .nav-theme{width:44px;height:44px}
  .nav-burger{width:44px;height:44px}
  /* A control that spans the width is easier to hit than one that hugs its text. */
  .form-foot input[type=submit]{width:100%}
}

/* `small` inside an already-small table heading compounds down to ~10px, which
   is below the readable floor. The qualifier keeps its lighter weight and
   colour but not a size nobody can read on a phone. */
.compare-table thead th small{display:block;font-size:.75rem;font-weight:400;text-transform:none;letter-spacing:normal;margin-top:.2rem}

/* The cross-cutting disciplines are long-form technical prose. Half of a
   two-equal-column split left them at roughly 540px, which reads as a squashed
   gutter beside the heading. The heading becomes a narrow sticky rail instead,
   and the prose gets the rest of a wide container. */
.ip-split{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
@media(min-width:1000px){.ip-split{grid-template-columns:minmax(210px,270px) 1fr}}
.ip-rail{margin:0}
@media(min-width:1000px){.ip-rail{position:sticky;top:90px}}
.ip-disciplines{margin:0;max-width:none}
.ip-disciplines p{max-width:var(--maxw-prose)}
.honesty-note--inset-lg{margin-top:1.5rem}

/* Desktop navigation links are controls, not prose, so they carry the same
   44px floor as every other control rather than only looking tappable. */
.nav-links a{display:inline-flex;align-items:center;min-height:44px}

/* =====================================================================
   CONSENT

   All three choices sit on the bar at once and share one control size.
   Accept is the primary button because it is the most common answer, not
   because the others are discouraged: a decline styled as an afterthought
   is not a choice, and this site cannot make that trade.
   ================================================================== */
.consent{
  position:fixed;z-index:400;
  left:max(1rem,env(safe-area-inset-left));
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  width:auto;max-width:48rem;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.75rem;
  background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-card);
  box-shadow:var(--shadow-l3);padding:clamp(1.1rem,2.5vw,1.5rem);
  /* Animated rather than transitioned: an animation runs the moment the element
     is revealed, with no need for a second state flag and a wait for layout. */
  animation:consent-in .45s var(--ease-gentle) both;
}
.consent[hidden]{display:none}
@keyframes consent-in{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
.consent__body{flex:1 1 24rem;min-width:0}
.consent__title{font-family:var(--font-display);font-size:1.1rem;font-weight:500;margin:0 0 .35rem}
.consent__text{font-family:var(--font-ui);font-size:.85rem;line-height:1.6;color:var(--text-soft);margin:0}
.consent__text a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.consent__actions{display:flex;flex-wrap:wrap;gap:.6rem;flex:0 0 auto}

/* The scroll-to-top control would otherwise sit under the bar. */
.consent:not([hidden]) ~ .scroll-top{bottom:calc(max(1rem,env(safe-area-inset-bottom)) + 8.5rem)}

@media(max-width:640px){
  .consent{padding:1.1rem;gap:.9rem}
  .consent__actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  /* Accept spans the row above the two refusals, so no choice is buried. */
  .consent__actions .btn:first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .consent{animation-duration:.001s}
}

/* =====================================================================
   SAFE AREAS
   With viewport-fit=cover the page paints under a notch and under the
   home indicator, so anything anchored to an edge has to hold itself
   clear of them. In landscape on a notched phone the inset is horizontal,
   which is why the content gutter is padded too and not just the bottom.
   ================================================================== */
.wrap,
.wrap-narrow{padding-inline:max(1.5rem,env(safe-area-inset-left),env(safe-area-inset-right))}
@media(max-width:560px){
  .wrap,
  .wrap-narrow{padding-inline:max(1rem,env(safe-area-inset-left),env(safe-area-inset-right))}
}
.scroll-top{bottom:max(1.5rem,env(safe-area-inset-bottom));right:max(1.5rem,env(safe-area-inset-right))}
@media(max-width:560px){
  .scroll-top{bottom:max(1rem,env(safe-area-inset-bottom));right:max(1rem,env(safe-area-inset-right))}
}
.mobile-drawer{padding-bottom:max(1.25rem,env(safe-area-inset-bottom));padding-right:max(1.25rem,env(safe-area-inset-right))}
.site-footer{padding-bottom:max(0px,env(safe-area-inset-bottom))}

/* A session card's title link was a 27px-tall target inside a 200px card. The
   stretched pseudo-element makes the whole card the hit area, which is both the
   larger target and the behaviour a visitor already expects from a card. The
   inner scripture reference stays selectable because the overlay sits beneath
   the text layer. */
.session-card{position:relative}
/* `inset:0` resolves against the nearest POSITIONED ancestor, so nothing between
   the card and the link may be positioned, or the overlay collapses to the size
   of the heading instead of the card. */
.session-card .sc-scripture a::after{content:"";position:absolute;inset:0}
.session-card:has(.sc-scripture a:hover){border-color:var(--border-strong);box-shadow:var(--shadow-l2);transform:translateY(-3px)}
.session-card:has(.sc-scripture a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.session-card .sc-scripture a:focus-visible{outline:none}

/* =====================================================================
   SEASON AND SESSION PAGES
   ================================================================== */
.season-meta{margin-top:1.25rem}
.expect-list{display:flex;flex-direction:column;gap:1.1rem;margin-top:1rem}
.expect__title{font-family:var(--font-ui);font-size:.9rem;font-weight:600;color:var(--text);margin:0 0 .25rem}
.expect__body{font-family:var(--font-body);font-size:.92rem;line-height:1.6;color:var(--text-soft);margin:0}
.eyebrow__link{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.eyebrow__link:hover{color:var(--accent-strong)}

.session-intro{margin-bottom:2.5rem;max-width:var(--maxw-prose)}
.session-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2.25rem;counter-reset:step}
.session-step{max-width:var(--maxw-prose)}
.session-step__label{display:flex;align-items:center;gap:.6rem;font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);margin:0 0 .7rem}
.session-step__n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-wash);color:var(--accent-strong);font-size:.75rem;letter-spacing:0;flex:none}
:root.compline .session-step__n{background:var(--bg-sunken);color:var(--accent-text)}
.session-step__body{font-family:var(--font-body);font-size:1.02rem;line-height:1.75;color:var(--text-soft);margin:0}

/* The scripture step is set as the page's one piece of display typography, so
   the passage reads as the thing everything else is arranged around. */
/* No side stripe: this project's own design rules ban them, and the passage
   does not need one. A short gold rule above it and the shift into display type
   are enough to mark it as the thing the session is built around. */
.session-scripture{position:relative;margin:0;padding:2rem 0 1.5rem}
.session-scripture::before{content:"";position:absolute;top:0;left:0;width:2.5rem;height:2px;border-radius:2px;background:var(--accent-soft)}
.session-scripture p{font-family:var(--font-display);font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.55;color:var(--text);margin:0}
.session-scripture cite{display:block;margin-top:.9rem;font-family:var(--font-ui);font-size:.78rem;font-style:normal;color:var(--text-faint)}
.session-prayer{font-family:var(--font-display);font-style:italic;font-size:1.15rem;line-height:1.65;color:var(--text);background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.25rem 1.4rem;margin:0}
.session-step--journal .session-step__body{background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius-card);padding:1.1rem 1.25rem}

.why-card__lead{font-family:var(--font-ui);font-size:.9rem;line-height:1.6;color:var(--text-soft);margin:0 0 1.25rem}
.why-list{margin:0;display:flex;flex-direction:column;gap:1rem}
.why-list dt{font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.3rem}
.why-list dd{margin:0;font-family:var(--font-body);font-size:.95rem;line-height:1.65;color:var(--text-soft)}
.why-card__foot{margin:1.5rem 0 0}

/* Read-next cards on the confirmation page: the whole card is the target. */
.read-next{display:flex;flex-direction:column;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.4rem 1.5rem;text-decoration:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .25s var(--ease-gentle)}
.read-next:hover{border-color:var(--border-strong);box-shadow:var(--shadow-l2);transform:translateY(-3px)}
.read-next:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.read-next__title{font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--text)}
.read-next__dek{font-family:var(--font-body);font-size:.92rem;line-height:1.6;color:var(--text-soft)}
.read-next__go{font-family:var(--font-ui);color:var(--accent-text);margin-top:auto;padding-top:.5rem}
.consent-reset p{font-family:var(--font-ui);font-size:.92rem;line-height:1.6;color:var(--text-soft);margin:.5rem 0 1.25rem;max-width:56ch}

/* =====================================================================
   DRAFT NOTICE

   The caveat above the legal pages. It previously reused `.proto-banner`
   with an inline background override, which put `.prose strong` (forest
   ink) on a dark gold slab at 1.95:1. A caution note is not a place to
   be subtle, so it now has its own component with the lead-in carrying
   the accent and the body carrying full text contrast, in both themes.
   ================================================================== */
.draft-note{
  display:flex;gap:.75rem;align-items:flex-start;text-align:left;
  padding:1rem 1.25rem;margin:0 0 1.75rem;
  background:var(--accent-wash);border:1px solid var(--accent-soft);border-radius:var(--radius-card);
  font-family:var(--font-ui);font-size:.88rem;line-height:1.6;color:var(--text);
}
.draft-note svg{width:18px;height:18px;flex:none;color:var(--accent-strong);margin-top:.15rem}
/* Scoped through .prose so it beats `.prose strong`, which is what broke it. */
.prose .draft-note strong,
.draft-note strong{color:var(--accent-strong);font-weight:700}
:root.compline .draft-note{background:var(--bg-sunken);border-color:var(--accent);color:var(--text-soft)}
:root.compline .draft-note svg,
:root.compline .prose .draft-note strong,
:root.compline .draft-note strong{color:var(--accent-text)}