/*
* biblicast.ai — the SPM-ratified redesign on the app's Quiet system
* (A→BW-2026-09-04-02; source artboards at site/redesign-2026-09-04/, 5a861d7).
*
* Every colour here is a token from the app, not a taste: the ink ramp and
* AppSurface from `VerseCast/DesignSystem/DesignSystem.swift` (Ink Option 3,
* Option A accent), and the morning wash from `VersesAmbience.swift`. The site
* and the app now describe the same product in the same voice.
*
* The purple that shipped on 2026-08-16 is GONE from this file, everywhere,
* including from the pages the redesign did not draw — privacy, terms and 404
* take the same paper, ink, .doc card and footer, because a legal page in the
* old palette reads as a different company's.
*
* NO INLINE STYLES. The CSP we serve is `script-src 'self'` with no
* 'unsafe-inline', so every `style="…"` in the artboards became a class here.
* That is a constraint the site already lived by and the redesign does not get
* an exception: `ga-csp` asserts it, and a shipped page is grepped for `style=`.
*/
:root{
/* Ink ramp — measured against its ground, not chosen by eye. */
--ink:#2A2522; /* primary — 13.6:1 on page */
--ink-2:#4A433E; /* secondary — 8.9:1 on page */
--ink-3:#746B65; /* tertiary — 4.91:1 page, 4.52:1 grouped */
--ink-4:#8C837D; /* quaternary — 3.22–3.66:1: ICONS ONLY, NEVER TEXT */
--accent:#7A4A0E; /* Option A accent, on paper */
--accent-bright:#A66614;/* the same accent where it is a mark, not a word */
--page:#FBF8F3; /* AppSurface */
--grouped:#F4EEE6; /* grouped background */
--card:#FFFDFA;
--line:#E8E0D6;
--wash-top:#FDEFD8; /* VersesAmbience — morning */
--wash-mid:#FBF4E7;
--wash-bot:#FCF8F1;
--dusk-top:#FBE7C9; /* VersesAmbience — evening; the invite page's ground */
--dusk-mid:#FAEEDD;
--dusk-bot:#FDF7EF;
--accent-hairline:rgba(166,102,20,.30); /* the app's AppAccent.border30 */
--radius-card:16px;
--radius-doc:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:var(--page);color:var(--ink);line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
.serif{font-family:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.shell{max-width:1120px;margin:0 auto;padding:0 32px}
/* ---- nav ---------------------------------------------------------------- */
.nav{max-width:1120px;margin:0 auto;padding:26px 32px;display:flex;align-items:center;gap:28px}
/* GAP 0, not 8. With `gap:8px` a nav whose wordmark has no SVG treats the bare
* text node and cast as TWO FLEX ITEMS and renders "Bibli cast" — which
* is what privacy, terms and 404 showed. The space belongs to the glyph, so the
* glyph carries it. */
.wordmark{display:inline-flex;align-items:center;gap:0;color:var(--ink);font-weight:700;font-size:24px;letter-spacing:-.02em}
.wordmark svg{margin-right:8px}
.wordmark:hover{color:var(--ink)}
.wordmark b{color:var(--accent);font-weight:700}
.nav .spacer{flex:1}
.nav a.link{color:var(--ink-3);font-size:15px}
.nav a.link:hover{color:var(--ink)}
/* ---- hero --------------------------------------------------------------- */
.hero{background:linear-gradient(180deg,var(--wash-top) 0%,var(--wash-mid) 46%,var(--wash-bot) 100%)}
.hero-grid{max-width:1120px;margin:0 auto;padding:56px 32px 72px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero h1{font-size:58px;line-height:1.08;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.hero .lede{font-size:21px;line-height:1.45;color:var(--ink-2);max-width:480px}
.cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:8px}
.fineprint{font-size:14px;color:var(--ink-3)}
/* ---- App Store badge ---------------------------------------------------- */
/* Apple's black asset — the one filled control on the landing page. Until the
* app is live it is a NON-LINK (.soon), per HOSTING.md's launch-day swap: a
* dead link on a site Apple's reviewer reads is worse than an honest label. */
.badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border-radius:12px;padding:11px 21px;line-height:1.15}
.badge:hover{color:#fff}
.badge .badge-lines{display:flex;flex-direction:column;text-align:left}
.badge .badge-small{font-size:11px;color:#d8d8d8}
.badge .badge-big{font-size:18px;font-weight:600}
/* The badge is a real link since the 2026-09-04 launch swap. It had no focus
* style at all — and this file defines none anywhere — so a keyboard user got
* only the browser default over a black control, which is close to invisible.
* The ring is ink on paper, offset so it reads against the black. */
.badge:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px}
/* Retained: the pre-launch state HOSTING.md's swap can return to. */
.badge.soon{opacity:.92;cursor:default}
/* ---- phone frames ------------------------------------------------------- */
.phone{width:330px;height:716px;border-radius:46px;overflow:hidden;background:var(--ink);padding:8px;
box-shadow:0 24px 60px rgba(42,37,34,.14),0 2px 6px rgba(42,37,34,.08)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:38px}
.phone-center{display:flex;justify-content:center}
/* ---- today's verse ------------------------------------------------------ */
.verse{max-width:1120px;margin:0 auto;padding:72px 32px 8px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.verse-text{font-size:38px;line-height:1.3;color:var(--ink);max-width:760px}
.verse-ref{font-size:15px;color:var(--ink-3)}
/* ---- the Muse band ------------------------------------------------------ */
/* `A→BW-2026-10-02-14`: the ratified sentence and a badge in the App Store
badge's own form. No new ink, no new radius — it borrows `.badge` whole so
the two cannot drift apart. */
.muse-band{max-width:1120px;margin:0 auto;padding:32px;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.muse-band p{max-width:620px;font-size:16px;line-height:1.55;color:var(--ink-2)}
/* ---- cards -------------------------------------------------------------- */
.cards{max-width:1120px;margin:0 auto;padding:56px 32px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card)}
.card h3{font-size:17px;font-weight:600;color:var(--ink)}
.card p{font-size:15px;line-height:1.5;color:var(--ink-3)}
.icon-tile{width:36px;height:36px;border-radius:10px;background:var(--grouped);display:flex;align-items:center;justify-content:center}
/* ---- six styles --------------------------------------------------------- */
.band{background:var(--grouped);margin-top:72px}
.band-grid{max-width:1120px;margin:0 auto;padding:64px 32px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:center}
.band-copy{display:flex;flex-direction:column;gap:18px}
.band h2{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.band .lede{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:560px}
.styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}
.style{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card)}
.style-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.style-name{font-size:16px;font-weight:600;color:var(--ink)}
.pill{display:inline-block;border:1px solid var(--accent-hairline);color:var(--accent);border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap}
.style p{font-size:14px;line-height:1.5;color:var(--ink-3)}
/* ---- how it sounds ------------------------------------------------------ */
.steps{max-width:1120px;margin:0 auto;padding:72px 32px 0;display:flex;flex-direction:column;gap:28px}
.steps h2{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-align:center}
.step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.step{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card)}
.step-n{width:30px;height:30px;border-radius:999px;background:var(--grouped);color:var(--accent);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:17px;font-weight:600;color:var(--ink)}
.step p{font-size:15px;line-height:1.5;color:var(--ink-3)}
/* ---- closing cta -------------------------------------------------------- */
.close{max-width:1120px;margin:0 auto;padding:72px 32px 80px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
/* ---- footer ------------------------------------------------------------- */
footer{border-top:1px solid var(--line);margin-top:8px;padding:28px 32px;text-align:center;color:var(--ink-3);font-size:14px}
footer a{color:var(--ink-3);margin:0 10px}
footer a:hover{color:var(--ink)}
.copyright{margin-top:10px;color:var(--ink-3)}
/* ---- document pages (privacy, terms, support, 404, invite) -------------- */
.wrap{max-width:820px;margin:0 auto;padding:0 32px 72px}
.doc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-doc);padding:36px 40px;margin-top:28px}
.doc h1{font-size:36px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.doc h2{font-size:20px;font-weight:600;margin:28px 0 8px}
.doc p,.doc li{color:var(--ink-2);font-size:16px;line-height:1.65}
.doc ul{margin:8px 0 8px 22px}
.doc .meta{color:var(--ink-3);font-size:14px}
.doc details{border-top:1px solid var(--line);padding:14px 0}
.doc details:first-of-type{border-top:0}
.doc summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:17px}
.doc details p{margin-top:8px}
.page-head{padding:44px 0 0;text-align:center}
.page-head h1{font-size:40px;font-weight:700;letter-spacing:-.025em}
/* The Muse mark beside /muse's heading (2026-10-03). A rule rather than an
inline style because this site's CSP is `style-src 'self'` with no
'unsafe-inline' — a `style=` attribute here would be BLOCKED, and the icon
would sit on the text baseline. Scoped to the image inside this heading so
nothing else can inherit it. */
.page-head h1 img{vertical-align:middle;margin-right:14px}
.page-head p{color:var(--ink-3);margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:12px;padding:11px 20px;font-weight:600;font-size:16px}
.btn:hover{color:#fff;opacity:.92}
/* The invite page sits on the EVENING wash, as `Invite.dc.html` draws it — the
* morning wash is the landing page's. Same ambience the app uses at that hour. */
body.invite-page{background:linear-gradient(180deg,var(--dusk-top) 0%,var(--dusk-mid) 48%,var(--dusk-bot) 100%);background-attachment:fixed}
/* invite.js does `card.className = 'code-card'` — it REPLACES the class list,
* so the FILLED state must be fully described by `.code-card` alone. `.empty`
* is the shipped default and only ever removed.
*
* FILLED is the artboard's element: card paper, the ACCENT hairline, radius 18
* — a real code is the one thing on the page worth drawing attention to.
* EMPTY keeps the grouped ground and the paper hairline; that state was not on
* the artboard and it should recede, not announce. */
.code-card{background:var(--card);border:1px solid var(--accent-hairline);border-radius:var(--radius-doc);padding:20px;text-align:center;margin:22px 0}
.code-card.empty{background:var(--grouped);border-color:var(--line);border-radius:var(--radius-card)}
.code-card small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:8px}
#code{font-size:30px;font-weight:700;letter-spacing:.08em;color:var(--ink)}
.code-card.empty #code{font-size:16px;font-weight:600;letter-spacing:0;color:var(--ink-3)}
.invite{text-align:center;display:flex;flex-direction:column;align-items:center}
.invite h1{font-size:40px;line-height:1.14;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin-top:16px}
.invite .sub{font-size:18px;line-height:1.5;color:var(--ink-2);max-width:520px;margin-top:12px}
.invite .soon-note{font-size:14px;color:var(--ink-3);margin-top:8px}
.redeem-steps{text-align:left;margin-top:26px;width:100%}
.redeem-steps h2{font-size:19px;font-weight:600;margin-bottom:10px}
.redeem-steps ol{margin-left:20px;color:var(--ink-2);font-size:16px;line-height:1.7}
.mailrow{margin-top:18px}
/* Classes used by privacy.html, terms.html and 404.html — their MARKUP is
* untouched by the redesign, deliberately: those pages carry the ratified D5
* legal copy, and restyling must not become an excuse to edit a word of it.
* They pick up the new paper, ink, .doc card and footer through the classes
* they already use. */
.narrow{max-width:820px}
.eff{color:var(--ink-3);font-size:14px;margin-bottom:10px}
.notfound{text-align:center;padding:72px 0 24px}
.notfound h1{font-size:40px;font-weight:700;letter-spacing:-.025em}
.notfound p{color:var(--ink-2);margin-top:12px;font-size:17px}
.links{margin-top:22px}
.links a{color:var(--ink-3);margin:0 10px}
.links a:hover{color:var(--ink)}
.centered{text-align:center}
.lede{color:var(--ink-2)}
.faqs{margin-top:22px}
/* ---- responsive: the Mobile artboard is this page under ~700px ---------- */
@media (max-width:700px){
.shell,.nav,.hero-grid,.verse,.cards,.muse-band,.band-grid,.steps,.close,.wrap{padding-left:20px;padding-right:20px}
.hero-grid{grid-template-columns:1fr;gap:32px;padding-top:36px;padding-bottom:44px}
.hero h1{font-size:38px}
.hero .lede{font-size:18px}
.cards{grid-template-columns:1fr;padding-top:40px}
.muse-band{flex-direction:column;text-align:center;gap:18px}
.band-grid{grid-template-columns:1fr;gap:28px;padding-top:44px;padding-bottom:44px}
.styles{grid-template-columns:1fr}
.step-grid{grid-template-columns:1fr}
.verse-text{font-size:27px}
.band h2,.steps h2{font-size:27px}
.phone{width:268px;height:582px;border-radius:38px}
.phone img{border-radius:31px}
.doc{padding:24px 22px}
.nav{gap:16px;padding-top:20px;padding-bottom:20px}
.wordmark{font-size:21px}
}
/* The App Store hand-off line on /r/{code}. Hidden in markup and revealed by
* invite.js only when a code is present — so with JS off, or on /r with no
* code, the page is unchanged and promises nothing it will not do. */
.store-wait{margin:18px 0 0;color:var(--ink-2);font-size:15px;line-height:1.5}
.store-wait small{display:inline-block;margin-top:6px;color:var(--ink-3);font-size:13.5px}
/* ---- /muse (2026-09-24): the connector page's lists, code and table ------ */
.doc ol{margin:8px 0 8px 22px}
.doc ol li{margin:6px 0}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--ink);background:var(--grouped);border:1px solid var(--line);border-radius:6px;padding:1px 6px;word-break:break-all}
.doc .table-wrap{overflow-x:auto;margin:10px 0 14px}
.doc table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.doc th,.doc td{text-align:left;vertical-align:top;padding:9px 10px;border-top:1px solid var(--line);color:var(--ink-2)}
.doc th{color:var(--ink-3);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;border-top:0}
/* ---- /muse: "Give this message to Muse" (2026-10-03) --------------------- */
/* `A→BW-2026-10-02-36` §2, from the ratified mockup. The one card on the page
worth drawing the eye to: the accent hairline the invite page's code card
uses, on card paper. Everything else is the .doc card as it is. */
/* The one card on the page worth drawing the eye to: the accent hairline the
invite page's filled code card uses, on card paper. Everything else is the
.doc card as it is. */
.connect{border-color:var(--accent-hairline)}
.connect h2{margin-top:6px;font-size:24px;letter-spacing:-.015em}
.connect .lede{margin-top:6px}
/* The message itself: a tappable block. A