/* ============================================================
   Shabba website, D1 look (2026-11-04)
   Mock-ups: <home>/plans/website-home-manifesto/mockups/ (home.html,
   ai-policy.html). Loads after style.css: part 1 points the old Riso
   tokens at D1 and switches the print motifs off on every page; part 2
   is the header and footer; part 3 the manifesto pages (home, AI
   policy); part 4 plain content pages (legal, blog, scripts, contact).
   Colours match the app's d1.css. Big poster type is for the website
   only (DESIGN.md says no poster headings in the app).
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
    --bg: #ffffff;
    --tint: #ebf2fa;
    --tint-2: #dbe6f3;
    --card: #ffffff;
    --ink: #1f1b1c;
    --ink-2: #424b56;
    --muted: #5d6875;
    --line: #e3e8ef;
    --line-2: #cfd8e3;
    --blue: #0864c0;
    --blue-hover: #0654a3;
    --blue-soft: #e4effb;
    --pink: #ff4fa8;
    --pink-text: #b0216f;
    --yellow: #ffe14d;
    --mark-dark: #6b5a00;
    --body: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --img-filter: none;
    --logo-filter: none;
    --gutter: 32px;
    --shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 12px 32px rgba(20, 30, 50, .08);

    /* The Riso names style.css still reads */
    --paper: var(--bg);
    --paper-2: var(--tint);
    --raised: var(--card);
    --rule: var(--line);
    --edge: var(--line-2);
    --control: var(--line-2);
    --row-line-style: solid;
    --row-line: var(--line);
    --grain-op: 0;
    --blob-op: 0;
    --hl: rgba(255, 225, 77, .85);
    --card-shadow-hover: var(--shadow);
}
:root[data-theme="dark"] {
    --bg: #12161c;
    --tint: #1a2029;
    --tint-2: #232b36;
    --card: #1a2029;
    --raised: #232b36;
    --ink: #eef2f7;
    --ink-2: #c3ccd7;
    --muted: #98a3b1;
    --line: #2a323d;
    --line-2: #3a4452;
    --blue: #6aaef5;
    --blue-hover: #8cc0f7;
    --blue-soft: #1d2c3f;
    --pink-text: #ff8cc6;
    --yellow: #ffe14d;
    --img-filter: invert(.92) hue-rotate(180deg) brightness(1.05);
    --logo-filter: invert(1) hue-rotate(180deg);
    --on-accent: #12161c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
    --hl: rgba(255, 225, 77, .24);
    --bs-link-color-rgb: 106, 174, 245;
}
@media (max-width: 720px) { :root { --gutter: 16px; } }

:root, [data-bs-theme] {
    --bs-body-bg: var(--bg);
    --bs-body-font-family: var(--body);
    --bs-border-color: var(--line-2);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
}

/* ---------- 1b. base and print motifs off ---------- */
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    overflow-x: hidden;
}
body::before, body::after { content: none !important; }
.blob, .halftone, .tape, .stamp-tilt { display: none !important; }
main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--sans); letter-spacing: -.02em; }
a:hover { color: var(--blue-hover); }
hr { border-top: 1px solid var(--line); }
::selection { background: var(--yellow); color: #1f1b1c; }
.logo { display: block; filter: var(--logo-filter); }
.eng { filter: var(--img-filter); display: block; height: auto; }
.wrap, .site-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.site-wrap.narrow, .wrap.narrow { max-width: 860px; }

/* Buttons: D1, flat, rounded */
.btn-p, .btn-s {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: 10px;
    font: 600 14.5px/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-p { background: var(--blue); color: #fff; border: 0; }
.btn-p:hover { background: var(--blue-hover); color: #fff; }
:root[data-theme="dark"] .btn-p, :root[data-theme="dark"] .btn-p:hover { color: #12161c; }
.btn-s { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); padding: 0 16px; }
.btn-s:hover { background: var(--tint); color: var(--ink); }
.lg { height: 50px; padding: 0 24px; font-size: 16px; }

/* Bootstrap buttons used on older pages, in the same look */
.btn { border-radius: 10px; font-family: var(--body); font-weight: 600; box-shadow: none !important; transform: none !important; }
.btn-primary { --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: var(--blue-hover); --bs-btn-hover-border-color: var(--blue-hover); --bs-btn-active-bg: var(--blue-hover); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-primary:hover { color: #12161c; }
.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-dark {
    background: var(--card); color: var(--ink); border: 1px solid var(--line-2);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-dark:hover {
    background: var(--tint); color: var(--ink); border-color: var(--line-2);
}
.form-control, .form-select {
    border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink);
    box-shadow: none;
}
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.card { border-radius: 14px; border: 1px solid var(--line); box-shadow: none; background: var(--card); transform: none !important; }
.card:hover { box-shadow: none; }
.modal-content { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(20, 30, 50, .08), 0 18px 48px rgba(20, 30, 50, .16); background: var(--card); }

/* Overprint: blue ink with a pink plate a little off register */
.op { position: relative; display: inline-block; color: var(--blue); isolation: isolate; }
.op::after { content: attr(data-t); position: absolute; inset: 0; color: var(--pink); transform: translate(.04em, .035em); z-index: -1; pointer-events: none; }
/* Yellow marker behind a phrase */
.mark, mark.mark { background: linear-gradient(transparent 52%, var(--yellow) 52%, var(--yellow) 90%, transparent 90%); padding: 0 .08em; color: var(--ink); }
:root[data-theme="dark"] .mark { background: linear-gradient(transparent 52%, var(--mark-dark) 52%, var(--mark-dark) 90%, transparent 90%); }

/* ---------- 2. header ---------- */
.site-h { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-h .in { max-width: 1320px; margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 22px; position: relative; }
.site-h .brand { flex: none; }
.site-h .logo { height: 28px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a { padding: 8px 11px; border-radius: 8px; color: var(--ink); text-decoration: none; font: 600 14.5px/1.2 var(--body); border: 0; }
.site-nav a:hover { background: var(--tint); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--blue); background: var(--blue-soft); }
.site-nav .sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 8px; }
.site-nav a.quiet { color: var(--muted); font-weight: 500; font-size: 13.5px; }
.site-nav a.quiet[aria-current="page"] { color: var(--blue); }
.site-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: none; transform: none; }
.icon-btn:hover { background: var(--tint); color: var(--ink); box-shadow: none; transform: none; }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.menu-btn { display: none; }
@media (max-width: 920px) {
    .menu-btn { display: grid; }
    /* The menu drops over the page, so nothing below moves. */
    .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 14px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 18px 32px rgba(20, 30, 50, .08); }
    .site-nav.open { display: flex; }
    .site-nav a { padding: 12px 10px; font-size: 16px; }
    .site-nav a.quiet { font-size: 15px; }
    .site-nav .sep { width: auto; height: 1px; margin: 6px 0; }
}
@media (max-width: 560px) { .site-h .sign-in { display: none; } .site-h .btn-p { padding: 0 14px; } .site-h .in { gap: 12px; } }
@media (max-width: 380px) { .site-h .theme-toggle { display: none; } }

/* ---------- 2b. footer ---------- */
.site-f { margin-top: 0; padding: 0 0 48px; background: transparent; border: 0; color: var(--muted); font-size: 13.5px; }
.site-f .in { max-width: 1320px; margin: 0 auto; padding: 26px var(--gutter) 0; border-top: 1px solid var(--line); }
.site-f a { color: var(--muted); text-decoration: none; }
.site-f a:hover { color: var(--ink); text-decoration: underline; }
.site-f a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.f-top, .f-base { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.f-top { justify-content: space-between; }
.f-top .logo { height: 24px; width: auto; }
.f-base { margin-top: 18px; }
.f-base > span:first-child { margin-right: auto; }
.f-nav { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; }
.f-top .f-nav a { color: var(--ink-2); font-weight: 500; font-size: 14px; }
.f-link-btn { border: 0; padding: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.f-link-btn:hover { color: var(--ink); text-decoration: underline; }
.f-social { display: flex; gap: 14px; font-size: 16px; }
@media (max-width: 720px) { .f-base > span:first-child { width: 100%; } }

/* ---------- 2c. newsletter strip (every page) ---------- */
.newsletter-section { padding: clamp(40px, 6vw, 72px) 0; margin: 0; background: var(--tint); border: 0; }
.newsletter-section .site-wrap { max-width: 1320px; }
.newsletter-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); gap: clamp(24px, 5vw, 72px); align-items: center; padding: 0; background: none; border: 0; box-shadow: none; position: static; }
.newsletter-content .label { display: none; }
.newsletter-heading { font: 800 clamp(32px, 4.4vw, 60px)/.95 var(--sans); letter-spacing: -.035em; font-variation-settings: "wdth" 80; margin: 0 0 14px; color: var(--ink); }
.newsletter-description { color: var(--ink-2); font-size: 16px; margin: 0; max-width: 34em; }
.newsletter-description .hl { background: linear-gradient(transparent 52%, var(--yellow) 52%, var(--yellow) 90%, transparent 90%); color: var(--ink); }
:root[data-theme="dark"] .newsletter-description .hl { background: linear-gradient(transparent 52%, var(--mark-dark) 52%, var(--mark-dark) 90%, transparent 90%); }
.newsletter-email-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.newsletter-signup-row { display: flex; gap: 8px; }
.newsletter-signup-row .form-control { height: 46px; }
.newsletter-signup-row .btn { height: 46px; padding: 0 20px; }
.newsletter-form-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .newsletter-content { grid-template-columns: 1fr; } .newsletter-signup-row { flex-direction: column; } }

/* Cookie banner: a D1 card, bottom left */
.cookie-banner { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(20, 30, 50, .08), 0 18px 48px rgba(20, 30, 50, .16); background: var(--card); }

/* ============================================================
   3. Manifesto pages: home and AI policy (body.mf)
   ============================================================ */
.mf section { position: relative; }
.display { font-family: var(--sans); font-weight: 800; letter-spacing: -.035em; line-height: .9; margin: 0; color: inherit; }
.cond { font-variation-settings: "wdth" 75; }
.prose { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.prose p { margin: 0 0 1em; }
.prose strong { color: var(--ink); }
.cut { position: relative; color: var(--muted); white-space: nowrap; }
.cut::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 52%; height: .09em; background: var(--pink); border-radius: 2px; }

/* Panels: a slice of the app */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--ink); }
.panel .ph { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.panel .ph small { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.panel .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); }
.panel .ph + .prow { border-top: 0; }
.panel .prow.all { background: var(--blue-soft); border-top: 0; }
.panel .prow b { font-weight: 600; font-size: 14.5px; display: block; }
.panel .prow code { font: 12px var(--mono); color: var(--muted); background: none; padding: 0; }
.panel .pf { padding: 12px 18px; background: var(--tint); font-size: 13px; color: var(--muted); min-height: 44px; }
.sw { width: 40px; height: 24px; border-radius: 99px; background: var(--line-2); position: relative; border: 0; cursor: pointer; padding: 0; flex: none; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sw[aria-checked="true"] { background: var(--blue); }
.sw[aria-checked="true"]::after { transform: translateX(16px); }

/* -- home: 1. welcome -- */
.welcome { padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 84px); text-align: center; }
.welcome h1 { text-transform: uppercase; line-height: .86; }
/* Each line is sized to fill the content width (home.js); these are fallbacks. */
.welcome .fit { display: table; margin: 0 auto; white-space: nowrap; }
.welcome .l1 { font-size: 11.6vw; }
.welcome .l2 { font-size: 24vw; line-height: .82; margin: .02em 0 .04em; }
.welcome .l3 { font-size: 17.4vw; }
.pamphlet { position: relative; margin: 0; }
.pamphlet img { width: 100%; height: auto; max-width: 340px; border-radius: 6px; display: block; }
.pamphlet .estd { position: absolute; right: -22px; top: -22px; width: 92px; height: 92px; object-fit: contain; background: var(--bg); border-radius: 50%; padding: 14px; border: 1px solid var(--line); }

/* -- home: 2. we're -- */
.we { padding: clamp(56px, 8vw, 110px) 0; background: var(--tint); }
.we-lead { font: 600 clamp(22px, 2.4vw, 32px)/1 var(--sans); color: var(--ink-2); margin: 0 0 18px; }
.words { list-style: none; margin: 0; padding: 0; }
.words li { display: block; border-top: 1px solid var(--line-2); padding: 6px 0; }
.words li:last-child { border-bottom: 1px solid var(--line-2); }
.words .w { font-family: var(--sans); font-weight: 800; letter-spacing: -.04em; line-height: .95; text-transform: uppercase; }
.words .w1 { font-size: clamp(44px, 8vw, 128px); font-variation-settings: "wdth" 100; font-weight: 300; }
.words .w2 { font-size: clamp(56px, 11vw, 176px); font-variation-settings: "wdth" 75; }
.words .w3 { font-size: clamp(40px, 7vw, 112px); font-variation-settings: "wdth" 88; font-weight: 600; }
.words .w4 { font-size: clamp(38px, 6.6vw, 104px); font-variation-settings: "wdth" 100; font-weight: 400; }
.words .w5 { font-size: clamp(42px, 7.6vw, 120px); font-variation-settings: "wdth" 75; }
.words .w6 { font-size: clamp(40px, 7.2vw, 116px); font-variation-settings: "wdth" 100; font-weight: 800; letter-spacing: -.05em; }
.words .w7 { font-size: clamp(44px, 8.4vw, 136px); font-variation-settings: "wdth" 75; font-weight: 600; }
.we-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 360px); gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 860px) { .we-grid { grid-template-columns: 1fr; } .we .pamphlet { width: min(320px, 78%); margin: 0 auto; } }

/* -- home: 3. not for everyone -- */
.not { padding: clamp(64px, 9vw, 130px) 0; }
.not .grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.not h2 { font-size: clamp(56px, 8.6vw, 140px); }
.not h2 .op { display: inline; }
.not .nope { font: 700 clamp(26px, 3vw, 42px)/1.15 var(--sans); letter-spacing: -.02em; margin: 0 0 28px; }
.honest { list-style: none; padding: 0; margin: 0; }
.honest li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); align-items: start; }
.honest li:last-child { border-bottom: 1px solid var(--line); }
.honest .num { font: 500 13px/1 var(--mono); color: var(--pink-text); padding-top: 6px; }
.honest b { display: block; font: 700 clamp(19px, 1.7vw, 23px)/1.25 var(--sans); letter-spacing: -.01em; }
.honest span { display: block; color: var(--muted); margin-top: 4px; font-size: 15px; }
.pigeon { width: clamp(90px, 10vw, 140px); margin: 26px 0 0 auto; }
@media (max-width: 860px) { .not .grid { grid-template-columns: 1fr; } }

/* -- home: 4. AI -- */
.ai { padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid var(--line); }
.ai .grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ai h2 { font-size: clamp(40px, 6vw, 96px); line-height: .95; }
.ai h2 .thin { font-weight: 300; color: var(--ink-2); }
.ai .after { margin-top: 24px; font: 600 clamp(20px, 2vw, 28px)/1.3 var(--sans); max-width: 26em; }
.ai .after a { color: inherit; }
@media (max-width: 860px) { .ai .grid { grid-template-columns: 1fr; } }

/* -- home: 5. pay as you go -- */
.payg { padding: clamp(64px, 9vw, 130px) 0 clamp(40px, 5vw, 70px); background: var(--tint); }
.payg h2 { font-size: clamp(64px, 13.5vw, 230px); text-transform: uppercase; line-height: .82; letter-spacing: -.045em; }
.payg h2 .line2 { display: block; padding-left: .9em; }
.essay { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 300px); gap: clamp(20px, 4vw, 56px); margin-top: clamp(40px, 6vw, 80px); align-items: start; }
.big-num { font: 800 clamp(64px, 8vw, 120px)/.85 var(--sans); letter-spacing: -.05em; font-variation-settings: "wdth" 75; }
.big-num small { display: block; font: 500 13px/1.35 var(--mono); letter-spacing: 0; color: var(--muted); margin-top: 10px; font-variation-settings: normal; }
.big-num .of { color: var(--muted); font-weight: 300; }
.pull { font: 700 clamp(26px, 2.6vw, 38px)/1.12 var(--sans); letter-spacing: -.02em; margin: 0; border-left: 3px solid var(--pink); padding-left: 18px; }
.pull small { display: block; margin-top: 12px; font: 400 15px/1.5 var(--body); color: var(--muted); letter-spacing: 0; }
@media (max-width: 980px) { .essay { grid-template-columns: 1fr; } .big-num { display: flex; gap: 18px; align-items: end; } .big-num small { margin: 0 0 6px; } }
.choose { margin-top: clamp(56px, 8vw, 100px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.choose .opt { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 3vw, 36px); }
.choose .opt h3 { font: 800 clamp(34px, 4.4vw, 64px)/.95 var(--sans); letter-spacing: -.03em; margin: 0 0 10px; }
.choose .opt p { margin: 0; color: var(--ink-2); font-size: 16px; }
.choose .or { font: italic 300 clamp(28px, 3vw, 44px)/1 var(--sans); color: var(--muted); }
.choose-under { margin: 22px 0 0; text-align: center; font: 600 clamp(20px, 2vw, 28px)/1.3 var(--sans); }
@media (max-width: 720px) { .choose { grid-template-columns: 1fr; } .choose .or { text-align: center; } }
.nolist { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px clamp(24px, 4vw, 56px); }
.nolist li { font: 800 clamp(28px, 3.6vw, 56px)/1.1 var(--sans); letter-spacing: -.03em; font-variation-settings: "wdth" 80; white-space: nowrap; }
.nolist li span { font-weight: 300; color: var(--pink-text); margin-right: .15em; }

.nothing { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }
.nothing .intro { font: 600 clamp(22px, 2.4vw, 32px)/1.1 var(--sans); margin: 0 0 26px; color: var(--ink-2); }
.nothing .intro .op { font-weight: 800; }
.scen { list-style: none; margin: 0; padding: 0; }
.scen .b { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 3px 2px 0 var(--pink); justify-self: start; }
.scen li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: clamp(14px, 2.4vw, 32px); align-items: center; padding: clamp(16px, 2vw, 26px) 0; border-top: 1px solid var(--line); }
.scen li:last-child { border-bottom: 1px solid var(--line); }
.scen .q { font: 500 clamp(19px, 2vw, 28px)/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink-2); }
.scen .a { font: 800 clamp(30px, 4.6vw, 72px)/.95 var(--sans); letter-spacing: -.04em; white-space: nowrap; font-variation-settings: "wdth" 80; }
.scen .a sup { font-size: .45em; color: var(--pink-text); vertical-align: super; margin-left: .05em; }
.foot-note { margin: 18px 0 0 calc(28px + clamp(14px, 2.4vw, 32px)); color: var(--muted); font-size: 15px; max-width: 40em; }
.foot-note b { color: var(--pink-text); }
@media (max-width: 720px) { .scen li { grid-template-columns: 24px minmax(0, 1fr); } .scen .a { grid-column: 2; } .foot-note { margin-left: 0; } }

/* -- dark bands (proud to cost money, sensible AI use) -- */
.band-ink { padding: clamp(64px, 9vw, 130px) 0; background: var(--ink); color: var(--bg); }
.band-ink .display { color: var(--bg); text-transform: uppercase; line-height: .84; letter-spacing: -.045em; }
.band-ink .op { color: var(--yellow); }
.band-ink .prose { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.band-ink .prose strong { color: var(--bg); }
.band-ink .mark, :root[data-theme="dark"] .band-ink .mark { background: var(--yellow); color: #1f1b1c; padding: 0 .12em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.band-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(40px, 6vw, 72px); align-items: end; }
.band-big { margin: 0; font: 800 clamp(34px, 4.4vw, 68px)/1.12 var(--sans); letter-spacing: -.035em; font-variation-settings: "wdth" 80; }
@media (max-width: 860px) { .band-grid { grid-template-columns: 1fr; } }
.proud .display { font-size: clamp(60px, 11.5vw, 196px); }
.proud .nofree { font: 300 clamp(26px, 3.4vw, 52px)/1 var(--sans); margin: 18px 0 0; color: color-mix(in srgb, var(--bg) 70%, transparent); }

/* -- home: 6. the power you need -- */
.shots { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
.power { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.power .display { font-size: clamp(52px, 8vw, 132px); }
.power-sub { margin: 0 0 18px; font: 600 clamp(22px, 2.4vw, 34px)/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink-2); }
.power-soon { margin: 0; font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-2); }
@media (max-width: 860px) { .power { grid-template-columns: 1fr; } }

/* -- home: 6a. the first shot -- */
.first { padding: clamp(64px, 9vw, 120px) 0; background: var(--tint); }
.first-head { text-align: center; max-width: 1000px; margin: 0 auto clamp(32px, 4vw, 56px); }
.first-head .display { font-size: clamp(40px, 6vw, 96px); line-height: .95; }
.first-lede { margin: 18px auto 0; max-width: 34em; font: 500 clamp(19px, 1.8vw, 26px)/1.35 var(--sans); color: var(--ink-2); }
.carousel { max-width: 1180px; margin: 0 auto; }
.slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; }
.slides::-webkit-scrollbar { display: none; }
.slide { margin: 0; scroll-snap-align: center; }
.frame { border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 24px 60px rgba(20, 30, 50, .12); }
.slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.car-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 16px; align-items: center; margin-top: 18px; }
.car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.car-btn:hover { background: var(--bg); border-color: var(--blue); color: var(--blue); }
.car-btn svg { width: 20px; height: 20px; }
.car-cap { margin: 0; text-align: center; font-size: 15px; color: var(--ink-2); min-height: 2.9em; display: grid; place-items: center; }
.car-dots { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.car-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--line-2); cursor: pointer; }
.car-dots button[aria-current="true"] { background: var(--blue); box-shadow: 2px 1px 0 var(--pink); }
.longread { max-width: 680px; margin: clamp(48px, 6vw, 80px) auto 0; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.65; color: var(--ink-2); }
.longread p { margin: 0 0 1.1em; }
.lr-lead { font: 500 clamp(21px, 1.9vw, 26px)/1.45 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.longread h3 { font: 800 clamp(24px, 2.2vw, 32px)/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); margin: 1.8em 0 .5em; }
.steps { margin: 0 0 1.1em; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 14px 0 14px 52px; border-top: 1px solid var(--line-2); }
.steps li:last-child { border-bottom: 1px solid var(--line-2); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 13px; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font: 700 15px/32px var(--sans); text-align: center; box-shadow: 2px 2px 0 var(--pink); }
:root[data-theme="dark"] .steps li::before { color: #12161c; }
.steps b { color: var(--ink); }
.longread .cta { display: flex; justify-content: center; margin-top: 36px; }

/* -- home: always learning (AI) -- */
.learn { padding: clamp(72px, 10vw, 140px) 0; background: var(--bg); }
.learn h2 { font-size: clamp(52px, 10.5vw, 180px); line-height: .86; letter-spacing: -.045em; }
.learn h2 .l1, .learn h2 .l2 { display: block; }
.learn h2 .l2 { font-weight: 300; color: var(--ink-2); font-size: .52em; letter-spacing: -.03em; margin-top: .25em; padding-left: .06em; }
.learn-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(40px, 6vw, 80px); align-items: start; }
.learn-copy { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.65; color: var(--ink-2); max-width: 640px; }
.learn-copy p { margin: 0 0 1.1em; }
.learn-lead { font: 500 clamp(21px, 1.9vw, 26px)/1.45 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.learn-copy h3 { font: 800 clamp(24px, 2.2vw, 32px)/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); margin: 1.6em 0 .5em; }
.learn-panel { position: sticky; top: 96px; box-shadow: 8px 8px 0 var(--pink); }
.aitab { font-size: 14px; }
.at-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 74px 46px 62px 40px; gap: 10px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--line); }
.at-head { font-size: 12.5px; font-weight: 600; color: var(--muted); padding-top: 10px; padding-bottom: 10px; background: var(--card); border-top: 0; }
.at-row.on { background: color-mix(in srgb, var(--blue) 6%, var(--card)); box-shadow: inset 3px 0 0 var(--blue); }
.at-row b { font-weight: 600; color: var(--ink); line-height: 1.3; }
.at-row .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cb { width: 16px; height: 16px; border: 1.5px solid var(--line-2); border-radius: 4px; margin-top: 2px; background: var(--card); }
.cb.on { background: var(--blue); border-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.at-words { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.at-words i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.at-words i::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--line-2); border-radius: 3px; }
.at-words i.on { color: var(--ink); font-weight: 600; }
.at-words i.on::before { background: var(--blue); border-color: var(--blue); }
.why { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--tint); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.why .pill { margin-right: 4px; }
.pill { display: inline-block; font: 600 12px/1 var(--sans); padding: 4px 8px; border-radius: 99px; }
.pill.green { background: #dcf3e4; color: #17693a; }
.pill.amber { background: #fdeccc; color: #8a4b00; }
.pill.grey { background: #e7ebf0; color: #4b5563; }
:root[data-theme="dark"] .pill.green { background: rgba(34, 160, 90, .22); color: #8fe0b0; }
:root[data-theme="dark"] .pill.amber { background: rgba(230, 150, 30, .22); color: #f7c77a; }
:root[data-theme="dark"] .pill.grey { background: rgba(255, 255, 255, .1); color: #c3ccd7; }
.at-bar { display: flex; align-items: center; gap: 14px; margin: 10px; padding: 10px 10px 10px 16px; border-radius: 12px; background: #1f1b1c; color: #fff; font-size: 13.5px; }
.at-bar > span:first-child { flex: 1; }
.at-ai::first-letter { color: var(--pink); }
.at-bar .q { background: #0864c0; padding: 7px 12px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
@media (max-width: 520px) { .aitab .ph small { display: none; } .at-row { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; padding: 12px; } .at-row > :nth-child(n+4) { display: none; } .at-ai { display: none; } .at-bar { margin: 8px; gap: 8px; } }
@media (max-width: 900px) { .learn-grid { grid-template-columns: 1fr; } .learn-panel { position: static; } }

/* -- home: but that's not all -- */
.more { padding: clamp(64px, 9vw, 120px) 0; background: var(--tint); }
.more h2 { font-size: clamp(48px, 8vw, 132px); }
.more-lede { margin: 18px 0 0; font: 600 clamp(22px, 2.4vw, 34px)/1.2 var(--sans); color: var(--ink-2); }
.feats { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.feats li { padding: 18px 0; border-top: 1px solid var(--line-2); }
.feats b { display: block; font: 700 clamp(19px, 1.7vw, 23px)/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.feats span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 15.5px; }
/* Translate: Spanish first, English on hover, focus or tap; both share one cell so nothing moves. */
.tr { display: grid; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.tr .tr-es, .tr .tr-en { grid-area: 1 / 1; transition: opacity .15s; }
.tr .tr-en { opacity: 0; }
.tr:hover .tr-es, .tr:focus-visible .tr-es, .tr[aria-pressed="true"] .tr-es { opacity: 0; }
.tr:hover .tr-en, .tr:focus-visible .tr-en, .tr[aria-pressed="true"] .tr-en { opacity: 1; }
@media (max-width: 900px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feats { grid-template-columns: 1fr; } }

/* -- home: brass tacks, what's next -- */
.tacks { padding: clamp(64px, 9vw, 120px) 0; }
.tacks .longread { margin-top: 0; }
.tacks h2 { font-size: clamp(40px, 5.6vw, 84px); line-height: .95; margin-bottom: .45em; color: var(--ink); }
.next { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
.next-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.next h2 { font-size: clamp(52px, 8vw, 132px); }
@media (max-width: 860px) { .next-in { grid-template-columns: 1fr; } }

/* -- home: choose -- */
.choose-sec { padding: clamp(64px, 9vw, 130px) 0; background: var(--tint); }
.chooses { list-style: none; margin: 0; padding: 0; }
.chooses li { font: 800 clamp(34px, 5.6vw, 88px)/1 var(--sans); letter-spacing: -.035em; font-variation-settings: "wdth" 80; padding: .12em 0; border-top: 1px solid var(--line-2); }
.chooses li span, .choose-last > span:first-child { font-weight: 300; color: var(--muted); font-variation-settings: "wdth" 100; }
.choose-last { margin: 0; padding-top: .3em; border-top: 1px solid var(--line-2); font: 800 clamp(40px, 7vw, 116px)/.98 var(--sans); letter-spacing: -.04em; font-variation-settings: "wdth" 80; }
.choose-sec .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 52px); }

/* -- home: also from Shabba (quiet) -- */
.also { padding: 44px 0 44px; border-top: 1px solid var(--line); }
.also .grid { display: grid; grid-template-columns: 200px repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.also h2 { font: 700 15px/1.3 var(--sans); margin: 4px 0 0; color: var(--muted); letter-spacing: 0; }
.also a.item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; text-decoration: none; color: var(--ink); align-items: center; }
.also a.item img { width: 56px; }
.also a.item b { font-size: 16px; display: block; }
.also a.item span { color: var(--muted); font-size: 14px; }
.also a.item:hover b { color: var(--blue); }
@media (max-width: 760px) { .also .grid { grid-template-columns: 1fr; gap: 18px; } }

/* -- AI policy -- */
.pol-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 8vw, 110px); }
.pol-hero h1 { font-size: clamp(64px, 15vw, 248px); text-transform: uppercase; line-height: .82; letter-spacing: -.045em; white-space: nowrap; }
.pol-hero .lede { margin: clamp(28px, 4vw, 48px) 0 0; font: 600 clamp(22px, 2.4vw, 34px)/1.25 var(--sans); letter-spacing: -.015em; color: var(--ink-2); max-width: 26em; }
.pol-hero .lede b { color: var(--ink); }
.off { padding: clamp(64px, 9vw, 130px) 0; background: var(--tint); }
.off .grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.off h2 { font-size: clamp(64px, 11vw, 184px); text-transform: uppercase; line-height: .84; letter-spacing: -.045em; }
.off .prose { margin-top: clamp(24px, 3vw, 40px); }
.off .panel { box-shadow: 8px 8px 0 var(--pink); }
@media (max-width: 860px) { .off .grid { grid-template-columns: 1fr; } }
.leave-on { padding: clamp(64px, 9vw, 130px) 0; }
.leave-on h2 { font-size: clamp(48px, 7.4vw, 124px); line-height: .92; max-width: 12em; }
.leave-on h2 .thin { display: block; font-weight: 300; color: var(--ink-2); font-size: .5em; letter-spacing: -.02em; margin-bottom: .2em; }
.facts { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; }
.facts li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding: clamp(18px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); align-items: start; }
.facts li:last-child { border-bottom: 1px solid var(--line); }
.facts b { font: 700 clamp(24px, 2.6vw, 40px)/1.1 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.facts span { color: var(--ink-2); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; padding-top: 6px; }
.after-facts { margin: clamp(24px, 3vw, 40px) 0 0; max-width: 40em; }
@media (max-width: 860px) { .facts li { grid-template-columns: 1fr; gap: 4px; } }
.sensible .display { font-size: clamp(60px, 11vw, 188px); }
.sensible .aside { color: color-mix(in srgb, var(--bg) 62%, transparent); font-style: italic; }
.engine { width: clamp(120px, 14vw, 200px); margin-top: 28px; filter: invert(1); opacity: .85; }
:root[data-theme="dark"] .engine { filter: none; }
.pol-close { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 5vw, 64px); }
.pol-close .in { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 44px); }
.pol-close .in p { margin: 0; font: 600 clamp(20px, 2vw, 28px)/1.3 var(--sans); max-width: 30em; }
.pol-close .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.updated { font: 500 12.5px/1.4 var(--mono); color: var(--muted); margin-top: 18px; }

/* ============================================================
   4. Content pages: a page head in the same type, then the app's
   quieter reading style.
   ============================================================ */
.pg-head { padding: clamp(36px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); }
.pg-head h1 { font: 800 clamp(44px, 7vw, 112px)/.92 var(--sans); letter-spacing: -.04em; font-variation-settings: "wdth" 80; margin: 0; color: var(--ink); }
.pg-head .sub { margin: 18px 0 0; font: 500 clamp(18px, 1.7vw, 24px)/1.4 var(--sans); color: var(--ink-2); max-width: 36em; }
.pg-head .meta { margin: 14px 0 0; font: 500 12.5px/1.4 var(--mono); color: var(--muted); }

/* ---------- 4b. older templates in the D1 look ---------- */
/* No blobs, dots or drop caps */
.page-header::before, .page-header::after,
.script-header::after, .error-section::before, .error-section::after { content: none !important; display: none !important; }
.post-content p:first-of-type::first-letter { float: none; font: inherit; color: inherit; padding: 0; }
.mis::before { display: none; }
.mis { color: var(--blue); }

/* Page heads: big D1 type, no rule under them */
.page-header, .script-header, .post-header { border-bottom: 0; padding: clamp(36px, 5vw, 72px) 0 clamp(16px, 2vw, 28px); background: transparent; }
.page-title, .display-title, .script-title, .post-title {
    font-family: var(--sans); font-weight: 800; letter-spacing: -.035em; line-height: .95;
    font-variation-settings: "wdth" 80; color: var(--ink);
}
.page-header .page-title, .page-header .display-title, .script-header .script-title, .post-header .post-title { font-size: clamp(40px, 6vw, 88px); }
.page-header .lede, .page-header p, .script-header p { color: var(--ink-2); }
.section-title, .category-title, .scripts-cta-title { font-family: var(--sans); font-weight: 800; letter-spacing: -.025em; font-variation-settings: "wdth" 85; }
.category-title { border-bottom: 1px solid var(--line); }

/* Labels and badges: small, quiet, sentence case */
.label, .section-label, .stat-label, .blog-category {
    font: 600 12.5px/1.3 var(--body); letter-spacing: 0; color: var(--muted);
}
.blog-category { color: var(--pink-text); }
.badge, .stamp, .script-card-badge, .pricing-badge {
    font: 600 12px/1 var(--body) !important; letter-spacing: 0 !important; border-radius: 99px !important;
    padding: 5px 9px !important; border: 0 !important; background: var(--tint) !important; color: var(--ink-2) !important;
    transform: none !important; box-shadow: none !important;
}
.pricing-badge { background: var(--blue-soft) !important; color: var(--blue) !important; }
.table > thead th, .script-body table th, .post-content table th { font: 600 12.5px/1.3 var(--body); letter-spacing: 0; color: var(--muted); }

/* Cards and boxes: hairline, 14px corners, no offset shadow */
.feature-card, .script-card, .blog-card, .tool-card, .pricing-card, .plan-card, .contact-form-card, .sidebar-card,
.scripts-cta-box, .newsletter-signup-form, .contact-method, .testimonial-card, .faq-item, .legal-section,
.coming-soon-card, .usage-card, .topup-card, .payg-card, .alert, .toast, .accordion-item, .script-box, .cta-box {
    border-radius: 14px; border-color: var(--line);
}
.script-card:hover, .blog-card:hover, .tool-card:hover, .feature-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: none; }
.newsletter-signup-form { background: var(--card); border: 1px solid var(--line); box-shadow: none; padding: 22px; }
.form-label { font: 600 13.5px/1.3 var(--body); letter-spacing: 0; color: var(--ink); }
.script-box, pre { border-radius: 12px; }
.accordion-button { font-family: var(--body); font-weight: 600; }
.accordion-button:not(.collapsed) { background: var(--tint); color: var(--ink); box-shadow: none; }

/* Written content (blog posts, scripts, legal): the app's quiet reading style */
.post-content, .script-body, .legal-content { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.post-content h2, .post-content h3, .script-body h2, .script-body h3, .legal-section h2, .legal-section h3 {
    font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variation-settings: "wdth" 90;
}
.post-content h2, .script-body h2 { font-size: 28px; margin-top: 1.6em; }
.post-content h3, .script-body h3 { font-size: 21px; }
.post-content strong, .script-body strong { color: var(--ink); }