/* Clasto — About page blocks. Loads after site.css, which owns the base, header and footer.
   Nothing here overrides those; it only adds page-level blocks.

   Deliberately omitted from the design's clasto-page.css:
   - the `.legal` grid (sticky contents + prose). The shipped legal pages use the older
     `.legal > .wrap > .legal-head/.legal-body` markup in site.css, and that grid would
     break them.
   - `.draft-note`. Nothing ships carrying a working-draft notice. */

/* ── shared page head ─────────────────────────────────────────────────────────── */
.page-head{padding:74px 0 40px;border-bottom:1px solid var(--border)}
.page-head .wrap{max-width:820px}
.page-head h1{margin:12px 0 16px;font-size:44px;overflow-wrap:break-word}
.page-head p.lead{font-size:18px;max-width:640px}
@media(max-width:700px){.page-head{padding:52px 0 32px}.page-head h1{font-size:32px}.page-head p.lead{font-size:16.5px}}

/* ── about: story columns ─────────────────────────────────────────────────────── */
.about-story .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;max-width:1040px}
.about-story .col-label{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--amber-dark)}
.about-story h2{margin-top:12px;font-size:30px}
.about-story .body p{font-size:16px;line-height:1.72;margin-bottom:16px}
.about-story .body p:last-child{margin-bottom:0}
.about-story .body p.big{font-size:19px;line-height:1.6;color:var(--text-primary)}
@media(max-width:900px){.about-story .wrap{grid-template-columns:1fr;gap:22px}.about-story h2{font-size:25px}}

/* principles */
.principles{background:var(--navy-900)}
.principles .section-head h2,.principles h3{color:#fff}
.principles .section-head p{color:#9FB0C6}
.prin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.11);border-radius:10px;overflow:hidden}
.prin{background:var(--navy-900);padding:30px 26px}
.prin .num{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.11em;color:var(--amber);display:block;margin-bottom:14px}
.prin h3{font-size:17px;margin-bottom:8px}
.prin p{font-size:13.5px;line-height:1.65;color:#9FB0C6}
@media(max-width:860px){.prin-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prin-grid{grid-template-columns:1fr}}

/* status / roadmap ledger */
.status-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column}
.status-row{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--border)}
.status-row:first-child{border-top:1px solid var(--border)}
.status-row .when{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.status-row .what{font-size:15.5px;font-weight:600;color:var(--text-primary)}
.status-row .what span{display:block;font-size:13.5px;font-weight:400;color:var(--text-secondary);margin-top:4px;line-height:1.6}
.status-row .flag{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:#E7F3EC;color:#1B6E3C;white-space:nowrap}
.status-row .flag.next{background:var(--amber-tint);color:var(--amber-dark)}
.status-row .flag.later{background:#F1F4F9;color:var(--text-muted)}
@media(max-width:640px){.status-row{grid-template-columns:1fr auto;gap:6px 14px}.status-row .when{grid-column:1/-1}}

/* contact strip */
.contact-strip{padding:0 0 96px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;max-width:1040px;margin:0 auto}
.contact-cell{background:var(--card);padding:26px 24px}
.contact-cell .k{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:9px}
.contact-cell .v{font-size:15.5px;font-weight:600;color:var(--navy-800)}
.contact-cell a.v{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:2px}
.contact-cell a.v:hover{color:var(--amber-dark);text-decoration-color:var(--amber)}
.contact-cell p{font-size:13px;line-height:1.6;margin-top:7px}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- /afb campaign page
   Reuses the shared primitives (.wrap, .section-head, .field, .btn, .modal-stripe,
   .dark, .cta-final); only the two-column hero and the form card are new. */
.afb-hero{padding:56px 0 64px;background:linear-gradient(180deg,#FBFCFE 0%,var(--bg,#fff) 100%)}
.afb-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
.afb-hero-copy h1{font-size:44px;line-height:1.1;margin:14px 0 18px}
.afb-hero-copy p.lead{font-size:17px;line-height:1.6;color:var(--text-secondary);max-width:56ch}
.afb-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.afb-points li{position:relative;padding-left:28px;font-size:15px;color:var(--text-secondary);line-height:1.55}
.afb-points li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}

.afb-form-card{background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 18px 44px rgba(8,15,30,.10);overflow:hidden;position:sticky;top:96px}
.afb-form-body{padding:24px 26px 26px}
.afb-form-body h2{font-size:21px;margin:0 0 6px}
.afb-form-note{font-size:13px;color:var(--text-muted);margin:0 0 18px;line-height:1.5}
.afb-consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;cursor:pointer}
.afb-consent input{margin-top:3px;flex:0 0 auto;accent-color:var(--amber)}
.afb-consent span{font-size:13px;color:var(--text-secondary);line-height:1.5}
.afb-privacy{font-size:12px;color:var(--text-muted);margin:14px 0 0;line-height:1.5}
.afb-privacy a{color:var(--amber-dark);font-weight:500}
.afb-privacy a:hover{text-decoration:underline}
.afb-expired{background:#FFF4E3;border:1px solid #F0C88A;border-radius:8px;padding:12px 14px;
  margin:0 0 18px;display:flex;flex-direction:column;gap:4px}
.afb-expired strong{font-size:14px;color:#8A4A08}
.afb-expired span{font-size:13px;color:var(--text-secondary);line-height:1.5}

.afb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.afb-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:22px 22px 24px}
.afb-card h3{font-size:16px;margin:0 0 8px}
.afb-card p{font-size:14px;color:var(--text-secondary);line-height:1.6;margin:0}

.afb-lines{counter-reset:afb;list-style:none;margin:36px auto 0;padding:0;max-width:760px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.afb-lines li{counter-increment:afb;position:relative;padding-left:34px;font-size:15px;line-height:1.55}
.afb-lines li::before{content:counter(afb);position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:var(--amber);color:var(--navy-800,#0C1628);font-family:var(--mono);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.afb-rule{max-width:760px;margin:34px auto 0;padding:20px 22px;border-left:3px solid var(--amber);
  background:rgba(255,255,255,.05);border-radius:0 8px 8px 0}
.afb-rule-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber)}
.afb-rule p{margin:8px 0 0;font-size:16px;line-height:1.6}

.afb-thanks{max-width:560px;margin:0 auto}
.afb-thanks-failed{display:flex;flex-direction:column;gap:8px;text-align:center;
  background:#FFF4E3;border:1px solid #F0C88A;border-radius:10px;padding:26px 24px}
.afb-thanks-failed strong{font-size:18px;color:#8A4A08}
.afb-thanks-failed span{font-size:14px;color:var(--text-secondary);line-height:1.6}
.afb-thanks-spam{text-align:center;font-size:13px;color:var(--text-muted);margin:16px auto 0;max-width:560px}

@media(max-width:960px){
  .afb-hero-grid{grid-template-columns:1fr;gap:32px}
  .afb-form-card{position:static}
  .afb-hero-copy h1{font-size:34px}
  .afb-grid{grid-template-columns:1fr 1fr}
  .afb-lines{grid-template-columns:1fr}
}
@media(max-width:640px){
  .afb-grid{grid-template-columns:1fr}
  .afb-hero-copy h1{font-size:29px}
}

/* ------------------------------------------------------------------- /unsubscribe
   A page someone reaches when they want less from us. Plain, centred, no persuasion. */
.unsub{max-width:560px;margin:0 auto}
.unsub-prompt{text-align:center}
.unsub-prompt h1{font-size:26px;margin:0 0 12px}
.unsub-prompt p{font-size:15px;color:var(--text-secondary);line-height:1.6;margin:0 0 22px}
.unsub-invalid{background:#FFF4E3;border:1px solid #F0C88A;border-radius:10px;padding:24px;
  display:flex;flex-direction:column;gap:8px;text-align:center}
.unsub-invalid strong{font-size:17px;color:#8A4A08}
.unsub-invalid span{font-size:14px;color:var(--text-secondary);line-height:1.6}
.unsub-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px}
.unsub-note strong{font-size:13px;color:var(--text-primary)}
.unsub-note span{font-size:13px;color:var(--text-muted);line-height:1.6}
.unsub-back{text-align:center;margin-top:28px}

/* --------------------------------------------------------------- demo slot booking
   The slot picker inside the demo modal, and the booked-time line on the cancel and
   thank-you pages. */
.slot-zone{font-size:12px;color:var(--text-muted);margin:6px 0 0}
.slot-none{font-size:13.5px;color:var(--text-secondary);line-height:1.55;margin:0;
  background:#FFF4E3;border:1px solid #F0C88A;border-radius:8px;padding:12px 14px}
.slot-none span{display:block;color:var(--text-muted);font-size:12.5px;margin-top:4px}
.slot-taken{background:#FFF4E3;border:1px solid #F0C88A;border-radius:8px;padding:12px 14px;
  margin:0 0 16px;display:flex;flex-direction:column;gap:4px}
.slot-taken strong{font-size:14px;color:#8A4A08}
.slot-taken span{font-size:13px;color:var(--text-secondary);line-height:1.5}
.booked-when{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--amber-dark);
  letter-spacing:.02em;margin:0 0 14px}
.booked-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.booked-cancel{text-align:center;font-size:13px;color:var(--text-muted);margin:18px 0 0}
.booked-cancel a{color:var(--text-secondary);text-decoration:underline}
.booked-cancel a:hover{color:var(--navy-800)}