/*
Theme Name: CrystalPrivacy
Theme URI: https://crystalprivacy.example
Author: CrystalPrivacy
Description: Block theme (FSE) for CrystalPrivacy — verified trust for private communities. Ported from the Claude Design HTML prototypes in WPMockup/project. Header & footer are template parts; every page section is a reusable block pattern.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crystalprivacy
*/

/* ============================================================
   CrystalPrivacy — shared theme
   Ported from project/assets/crystal.css. Design tokens live in
   :root and respond to data-* on <html>. theme.json mirrors the
   palette/typography for the editor; this file is the source of
   truth for rendering. Page-local CSS that used to live in each
   prototype's <style> block is consolidated here, and a "Gutenberg
   bridges" section maps the custom look onto core block markup.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  /* ---- accent (tone) : default neon blue, matched to the hero animation ---- */
  --accent-h: 250;
  --accent:      oklch(0.73 0.155 var(--accent-h));
  --accent-soft: oklch(0.84 0.12 var(--accent-h));
  --accent-deep: oklch(0.56 0.17 var(--accent-h));

  /* ---- surfaces (cool near-black navy) ---- */
  --bg:        oklch(0.16 0.025 255);
  --bg-0:      oklch(0.13 0.022 255);
  --panel:     oklch(0.205 0.026 255);
  --panel-2:   oklch(0.245 0.03 255);
  --line:      color-mix(in oklch, var(--accent) 16%, transparent);
  --line-soft: color-mix(in oklch, var(--accent) 8%, transparent);

  /* ---- ink ---- */
  --ink:     oklch(0.97 0.012 250);
  --ink-mid: oklch(0.80 0.03 250);
  --ink-dim: oklch(0.66 0.03 252);

  /* ---- type ---- */
  --display: 'Tektur', sans-serif;        /* brand wordmark + micro-labels only */
  --heading: 'Space Grotesk', sans-serif; /* content headings */
  --body: 'Space Grotesk', sans-serif;

  /* ---- glow intensity (0–1, tweakable) ---- */
  --glow: 1;
  --glow-accent: 0 0 calc(28px * var(--glow)) color-mix(in oklch, var(--accent) calc(45% * var(--glow)), transparent);
  --glow-text:   0 0 calc(22px * var(--glow)) color-mix(in oklch, var(--accent) calc(38% * var(--glow)), transparent);

  --maxw: 1200px;
  --radius: 16px;
  --radius-lg: 24px;
}

/* ---- font pairings ---- */
html[data-body="sora"]  { --body: 'Sora', sans-serif; }
html[data-body="plex"]  { --body: 'IBM Plex Sans', sans-serif; }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient field behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -8%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(900px 600px at 4% 12%, color-mix(in oklch, var(--accent-deep) 12%, transparent), transparent 55%);
  opacity: calc(0.55 + 0.45 * var(--glow));
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  opacity:.5;
}

a{ color: inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background: color-mix(in oklch, var(--accent) 40%, transparent); color:#fff; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
.section{ padding: clamp(30px, 6vw, 30px) 0; position:relative; }
.section--tight{ padding: clamp(48px,6vw,80px) 0; }

/* ---------- type scale ---------- */
.eyebrow{
  font-family: var(--display);
  font-weight:600; font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color: var(--accent-soft); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background: currentColor; opacity:.6; }
.eyebrow--center::before{ display:none; }

h1,h2,h3{ font-family: var(--heading); font-weight:700; line-height:1.06; letter-spacing:-.03em; }
.h-display{ font-size: clamp(44px, 6vw, 80px); }
h2.h-sec{ font-size: clamp(32px, 4vw, 52px); letter-spacing:-.025em; }
h3{ font-size: clamp(21px, 2vw, 26px); letter-spacing:-.01em; }
.lede{ font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-mid); line-height:1.6; }
.grad{ color: var(--accent); text-shadow: var(--glow-text); }
.muted{ color: var(--ink-dim); }
.center{ text-align:center; }

/* ---------- buttons ---------- */
.btn{
  --bh: 52px;
  font-family: var(--display); font-weight:600; font-size:15px; letter-spacing:.01em;
  height: var(--bh); padding: 0 26px; border-radius: 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; border:1px solid transparent; transition: all .22s ease; white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{
  color:#04101f; background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  box-shadow: var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 0 38px color-mix(in oklch, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
.btn--ghost{
  color: var(--ink); background: color-mix(in oklch, var(--panel) 70%, transparent);
  border-color: var(--line); backdrop-filter: blur(8px);
}
.btn--ghost:hover{ border-color: color-mix(in oklch, var(--accent) 50%, transparent); color: var(--accent-soft); transform: translateY(-2px); }
.btn--lg{ --bh:58px; font-size:16px; padding:0 32px; }

/* ---------- cards / panels ---------- */
.panel{
  background: linear-gradient(180deg, color-mix(in oklch, var(--panel) 90%, transparent), color-mix(in oklch, var(--bg-0) 92%, transparent));
  border:1px solid var(--line); border-radius: var(--radius-lg);
  position:relative; overflow:hidden;
}
.panel--glow::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background: linear-gradient(150deg, color-mix(in oklch, var(--accent) 55%, transparent), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.chip{
  display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 13px;
  border:1px solid var(--line); border-radius:999px;
  background: color-mix(in oklch, var(--panel) 60%, transparent);
  font-size:12.5px; letter-spacing:.04em; color: var(--ink-mid);
  font-family: var(--display); font-weight:500;
}
.dot{ width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow:0 0 10px var(--accent); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index:50;
  border-bottom:1px solid transparent; transition: border-color .3s, background .3s;
}
.site-header.is-stuck{
  background: color-mix(in oklch, var(--bg-0) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
}
.nav{ height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:13px; flex:0 0 auto; }
.brand__mark{ width:46px; height:44px; filter: drop-shadow(var(--glow-text)); }
.brand__word{ font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-.01em; }
.brand__word .a{ color: var(--ink); }
.brand__word .b{ color: var(--accent); }
.nav__links{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav__links a{
  font-family:var(--display); font-weight:500; font-size:14px; letter-spacing:.01em;
  color: var(--ink-mid); padding:9px 14px; border-radius:9px; transition: color .2s, background .2s;
}
.nav__links a:hover{ color: var(--ink); background: color-mix(in oklch, var(--panel) 60%, transparent); }
.nav__cta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.nav__toggle{ display:none; }

@media (max-width: 940px){
  .nav__links, .nav__cta .btn--ghost{ display:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line); margin-top:40px;
  background: color-mix(in oklch, var(--bg-0) 70%, transparent);
}
.footer__top{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; padding:72px 0 56px; }
.footer__brand .brand{ margin-bottom:18px; }
.footer__brand p{ color: var(--ink-dim); font-size:15px; max-width:34ch; }
.footer__col h4{ font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-mid); margin-bottom:18px; }
.footer__col a{ display:block; color: var(--ink-dim); font-size:15px; padding:7px 0; transition:color .2s; }
.footer__col a:hover{ color: var(--accent-soft); }
.footer__bottom{
  border-top:1px solid var(--line-soft); padding:24px 0 36px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color: var(--ink-dim); font-size:13.5px;
}
@media (max-width: 860px){ .footer__top{ grid-template-columns: 1fr 1fr; gap:32px; } }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   INTERIOR PAGE BUILDING BLOCKS (template / sub-pages)
   ============================================================ */
.page-hero{ position:relative; padding: clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px); }
.page-hero__inner{ max-width:64ch; }
.page-hero h1{ font-size: clamp(40px,5.2vw,68px); margin:20px 0 20px; }
.page-hero .lede{ max-width:54ch; }
.breadcrumb{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-dim); font-family:var(--display); letter-spacing:.03em; margin-bottom:6px; }
.breadcrumb a:hover{ color:var(--accent-soft); }
.breadcrumb span{ opacity:.5; }

/* prose / generic content */
.prose{ max-width:72ch; }
.prose > * + *{ margin-top:22px; }
.prose h2{ font-family:var(--heading); font-weight:700; font-size:clamp(26px,3vw,34px); letter-spacing:-.03em; margin-top:48px; }
.prose h3{ margin-top:36px; }
.prose p{ color:var(--ink-mid); }
.prose a:not(.btn){ color:var(--accent-soft); border-bottom:1px solid color-mix(in oklch,var(--accent) 40%,transparent); }
.prose ul,.prose ol{ padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.prose ul li{ display:flex; gap:12px; color:var(--ink-mid); }
.prose ul li::before{ content:""; width:7px; height:7px; margin-top:10px; border-radius:50%; flex:0 0 auto; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.prose blockquote{ border-left:2px solid var(--accent); padding:6px 0 6px 22px; color:var(--ink); font-family:var(--display); font-size:20px; font-weight:500; line-height:1.5; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:44px 0; }

/* two-column doc layout with sticky aside */
.doc{ display:grid; grid-template-columns: 1fr 256px; gap:56px; align-items:start; }
.toc{ position:sticky; top:104px; }
.toc h4{ font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:14px; }
.toc a{ display:block; padding:7px 0 7px 14px; border-left:1px solid var(--line); color:var(--ink-dim); font-size:14px; transition:.18s; }
.toc a:hover{ color:var(--ink); border-left-color:var(--accent); }
@media (max-width: 900px){ .doc{ grid-template-columns:1fr; } .toc{ display:none; } }

/* feature row (alternating) */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.frow + .frow{ margin-top:clamp(56px,7vw,96px); }
.frow--flip .frow__media{ order:-1; }
.frow__copy h2{ font-size:clamp(28px,3.4vw,40px); margin:16px 0 16px; }
.frow__copy p{ color:var(--ink-mid); margin-bottom:22px; }
.frow .shot{ aspect-ratio:4/3; }
@media (max-width: 860px){ .frow{ grid-template-columns:1fr; gap:26px; } .frow--flip .frow__media{ order:0; } }

/* faq */
.faq{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.faq details{ border:1px solid var(--line); border-radius:14px; background:color-mix(in oklch,var(--panel) 55%,transparent); padding:0 22px; overflow:hidden; }
.faq summary{ cursor:pointer; list-style:none; padding:20px 0; font-family:var(--heading); font-weight:700; font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:22px; color:var(--accent); transition:transform .25s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--ink-mid); font-size:15px; padding:0 0 22px; max-width:64ch; }

/* simple form */
.form{ display:flex; flex-direction:column; gap:18px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field label{ display:block; font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.04em; color:var(--ink-mid); margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; background:var(--bg-0); border:1px solid var(--line); border-radius:11px;
  color:var(--ink); font-family:var(--body); font-size:15px; padding:13px 15px; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-dim); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:color-mix(in oklch,var(--accent) 60%,transparent); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 18%,transparent); }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr; } }

/* stat band */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.stat{ padding:30px 26px; text-align:center; }
.stat__k{ font-family:var(--display); font-weight:700; font-size:clamp(34px,4vw,48px); color:var(--accent); text-shadow:var(--glow-text); line-height:1; }
.stat__v{ color:var(--ink-dim); font-size:14px; margin-top:10px; }
@media (max-width:720px){ .stats{ grid-template-columns:1fr; } }

/* ---------- image placeholder slot ---------- */
.shot{
  position:relative; border:1px solid var(--line); border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, color-mix(in oklch, var(--accent) 6%, transparent) 0 2px, transparent 2px 11px),
    var(--bg-0);
  display:flex; align-items:center; justify-content:center; 
}
.shot__label{ font-family: ui-monospace, monospace; font-size:12px; letter-spacing:.06em; color: var(--ink-dim); text-transform:uppercase; }

/* ============================================================
   PAGE-LOCAL: HOME  (was inline <style> in project/index.html)
   ============================================================ */
.hero{ position:relative; padding-top: clamp(40px, 6vw, 84px); }
.hero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:48px; align-items:center; }
.hero__copy h1{ margin:22px 0 22px; }
.hero__copy .lede{ max-width:46ch; }
.hero__cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero__assure{ display:flex; gap:18px; margin-top:30px; flex-wrap:wrap; }
.hero__assure .chip .dot{ animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

.hero__art{ position:relative; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; }
.hero__art iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:132%; height:132%; border:0; background:transparent; pointer-events:none; }
.hero__halo{ position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, color-mix(in oklch, var(--accent) 22%, transparent), transparent 65%); filter: blur(20px); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(.9); opacity:.7; } 50%{ transform:scale(1.05); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero__art img,.hero__halo{ animation:none; } }

/* trust strip */
.strip{ border-block:1px solid var(--line-soft); }
.strip__row{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding:26px 0; }
.strip__item{ display:flex; align-items:center; gap:11px; color: var(--ink-mid); font-size:14.5px; }
.strip__item svg{ width:20px; height:20px; color: var(--accent); flex:0 0 auto; }

/* section head */
.shead{ max-width:62ch; margin-bottom:54px; }
.shead.center{ margin-inline:auto; }
.shead h2{ margin:18px 0 16px; }

/* workflow / trust loop */
.flow{ position:relative; }
.flow__track{ position:absolute; left:6%; right:6%; top:52px; height:2px; background: var(--line); border-radius:2px; overflow:visible; }
.flow__track::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size:42% 100%; background-repeat:no-repeat; animation: sweep 4.2s linear infinite; opacity: calc(.4 + .6*var(--glow)); }
@keyframes sweep{ 0%{ background-position:-42% 0; } 100%{ background-position:142% 0; } }
.flow__comet{ position:absolute; top:50%; left:0; width:11px; height:11px; margin-top:-5.5px; border-radius:50%; background: var(--accent-soft); box-shadow: 0 0 16px 3px var(--accent); animation: comet 4.2s linear infinite; }
@keyframes comet{ 0%{ left:0%; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ left:100%; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .flow__track::before,.flow__comet{ animation:none; } .flow__comet{ display:none; } }

.flow__steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; position:relative; }
.step{ padding:26px 22px 24px; }
.step__node{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:19px; color:#04101f; background: linear-gradient(180deg, var(--accent-soft), var(--accent)); box-shadow: var(--glow-accent); margin-bottom:20px; }
.step__app{ margin-bottom:12px; }
.step h3{ margin-bottom:9px; }
.step p{ font-size:14.5px; color: var(--ink-dim); line-height:1.55; }
.app-badge{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:7px; font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.04em; border:1px solid var(--line); }
.app-badge .dot{ width:6px; height:6px; }
.app-badge--verify{ color: var(--accent-soft); }
.app-badge--trust{ color: oklch(0.84 0.12 150); }
.app-badge--trust .dot{ background: oklch(0.78 0.15 150); box-shadow:0 0 8px oklch(0.78 0.15 150); }
.appname{ font-family:var(--display); font-weight:600; }

/* the two apps */
.apps{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.appcard{ padding:36px 34px; display:flex; flex-direction:column; }
.appcard__head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.appcard__ico{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background: color-mix(in oklch, var(--panel) 60%, transparent); }
.appcard__ico svg{ width:24px; height:24px; }
.appcard__name{ font-family:var(--display); font-weight:600; font-size:22px; }
.appcard__name b{ color: var(--accent); font-weight:600; }
.appcard__role{ font-size:13px; color: var(--ink-dim); letter-spacing:.03em; }
.appcard p{ color: var(--ink-mid); font-size:15px; margin-bottom:22px; }
.appcard ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:26px; padding:0; }
.appcard li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color: var(--ink-mid); }
.appcard li svg{ width:18px; height:18px; color: var(--accent); flex:0 0 auto; margin-top:2px; }
.appcard .shot{ aspect-ratio: 16/10; margin-top:auto; }

/* use cases */
.uses{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.use{ padding:28px 26px; }
.use__ico{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); margin-bottom:18px; color: var(--accent); }
.use__ico svg{ width:22px; height:22px; }
.use h3{ font-size:19px; margin-bottom:8px; }
.use p{ font-size:14px; color: var(--ink-dim); }

/* founders band (home) */
.founders{ display:grid; grid-template-columns: 1fr 1fr; gap:0; overflow:hidden; }
.founders__copy{ padding: clamp(38px,5vw,60px); }
.founders__copy h2{ margin:18px 0 18px; }
.founders__copy .lede{ font-size:18px; margin-bottom:28px; }
.founders__list{ list-style:none; display:flex; flex-direction:column; gap:16px; margin-bottom:34px; padding:0; }
.founders__list li{ display:flex; gap:14px; align-items:flex-start; }
.founders__list .n{ font-family:var(--display); font-weight:700; color: var(--accent); font-size:15px; flex:0 0 auto; width:26px; }
.founders__list strong{ display:block; font-family:var(--display); font-weight:600; font-size:16px; margin-bottom:3px; }
.founders__list span{ font-size:14px; color: var(--ink-dim); }
.founders__panel{ position:relative; border-left:1px solid var(--line); padding: clamp(38px,5vw,60px); display:flex; flex-direction:column; justify-content:center; background:
    radial-gradient(600px 400px at 80% 20%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 60%); }
.rev{ text-align:center; }
.rev__label{ font-family:var(--display); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color: var(--ink-dim); }
.rev__big{ font-family:var(--display); font-weight:700; font-size: clamp(54px, 7vw, 84px); line-height:1; margin:14px 0 6px; color: var(--accent); text-shadow: var(--glow-text); }
.rev__sub{ color: var(--ink-mid); font-size:15px; max-width:30ch; margin:0 auto; }
.rev__split{ display:flex; gap:14px; margin-top:30px; }
.rev__split > div{ flex:1; border:1px solid var(--line); border-radius:14px; padding:18px 16px; }
.rev__split .k{ font-family:var(--display); font-weight:700; font-size:24px; }
.rev__split .v{ font-size:12.5px; color: var(--ink-dim); margin-top:4px; }

/* closing cta */
.cta{ text-align:center; padding: clamp(56px,7vw,90px) clamp(24px,5vw,72px); }
.cta h2{ font-size: clamp(34px, 4.4vw, 60px); margin-bottom:18px; }
.cta .lede{ max-width:52ch; margin:0 auto 34px; }
.cta__row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; gap:30px; }
  .hero__art{ width:min(440px,100%); margin-inline:auto; order:-1; }
  .flow__steps{ grid-template-columns:1fr 1fr; }
  .flow__track,.flow__comet{ display:none; }
  .apps,.founders{ grid-template-columns:1fr; }
  .founders__panel{ border-left:none; border-top:1px solid var(--line); }
  .uses{ grid-template-columns:1fr; }
}
@media (max-width: 560px){ .flow__steps{ grid-template-columns:1fr; } }

/* ============================================================
   PAGE-LOCAL: FOUNDERS  (was inline <style> in project/founders.html)
   ============================================================ */
.founders-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.founders-hero__art{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.founders-hero__art img{ width:100%; mix-blend-mode:screen; filter:drop-shadow(0 0 50px color-mix(in oklch,var(--accent) calc(36%*var(--glow)),transparent)); animation:float 9s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(-8px); } 50%{ transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce){ .founders-hero__art img{ animation:none; } }
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bigstep{ padding:30px 28px; }
.bigstep__n{ font-family:var(--display); font-weight:700; font-size:42px; color:var(--accent); text-shadow:var(--glow-text); line-height:1; margin-bottom:18px; }
.bigstep h3{ margin-bottom:10px; }
.bigstep p{ color:var(--ink-dim); font-size:14.5px; }
.start-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; }
.start-grid__copy{ padding:clamp(34px,4.5vw,52px); }
.start-grid__form{ padding:clamp(34px,4.5vw,52px); border-left:1px solid var(--line); background:radial-gradient(500px 360px at 90% 0%, color-mix(in oklch,var(--accent) 10%,transparent), transparent 60%); }
.start-grid__copy h2{ margin:16px 0 14px; }
.startlist{ list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:24px; padding:0; }
.startlist li{ display:flex; gap:12px; color:var(--ink-mid); font-size:15px; }
.startlist svg{ width:19px; height:19px; color:var(--accent); flex:0 0 auto; margin-top:2px; }
@media (max-width:980px){ .founders-hero{ grid-template-columns:1fr; } .founders-hero__art{ max-width:380px; margin-inline:auto; order:-1; } .steps3{ grid-template-columns:1fr; } .start-grid{ grid-template-columns:1fr; } .start-grid__form{ border-left:none; border-top:1px solid var(--line); } }

/* ============================================================
   GUTENBERG BRIDGES
   Map the custom look onto core block markup so the design holds
   up while content stays editable in the block editor.
   ============================================================ */

/* Structural groups keep their original classes (.section/.container/etc.).
   Neutralise core's own group/layout chrome so it doesn't fight our CSS. */
.wp-block-group{ margin-block:0; }
.section.wp-block-group,
.container.wp-block-group{ max-width:none; }
.container.wp-block-group{ max-width:var(--maxw); }

/* core heading block — keep our type scale (element selectors already match) */
h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading{ font-family:var(--heading); }

/* core buttons → CrystalPrivacy .btn look.
   className on the wp:button wrapper (.btn--primary / .btn--ghost / .btn--lg)
   selects the inner link, so primary+lg / ghost+lg combos work. */
.wp-block-button__link{
  --bh:52px;
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.01em;
  height:var(--bh); min-height:var(--bh); padding:0 26px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; border:1px solid transparent; transition:all .22s ease; white-space:nowrap;
  background:none; color:var(--ink);
}
.wp-block-button.btn--primary .wp-block-button__link{
  color:#04101f; background:linear-gradient(180deg, var(--accent-soft), var(--accent));
  box-shadow:var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.4);
}
.wp-block-button.btn--primary .wp-block-button__link:hover{
  transform:translateY(-2px);
  box-shadow:0 0 38px color-mix(in oklch, var(--accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.5);
}
.wp-block-button.btn--ghost .wp-block-button__link{
  color:var(--ink); background:color-mix(in oklch, var(--panel) 70%, transparent);
  border-color:var(--line); backdrop-filter:blur(8px);
}
.wp-block-button.btn--ghost .wp-block-button__link:hover{
  border-color:color-mix(in oklch, var(--accent) 50%, transparent);
  color:var(--accent-soft); transform:translateY(-2px);
}
.wp-block-button.btn--lg .wp-block-button__link{ --bh:58px; font-size:16px; padding:0 32px; }

/* core list block inside our feature cards / prose — drop default markers,
   our card CSS (.appcard li / .startlist li / .prose ul li) handles layout */
.appcard .wp-block-list,
.startlist.wp-block-list,
.prose .wp-block-list{ padding:0; margin:0; }

/* core details block → reuse .faq summary styling */
.faq .wp-block-details{ border:1px solid var(--line); border-radius:14px; background:color-mix(in oklch,var(--panel) 55%,transparent); padding:0 22px; overflow:hidden; }
.faq .wp-block-details summary{ cursor:pointer; list-style:none; padding:20px 0; font-family:var(--heading); font-weight:700; font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq .wp-block-details summary::-webkit-details-marker{ display:none; }
.faq .wp-block-details summary::after{ content:"+"; font-size:22px; color:var(--accent); transition:transform .25s; }
.faq .wp-block-details[open] summary::after{ transform:rotate(45deg); }
.faq .wp-block-details p{ color:var(--ink-mid); font-size:15px; padding:0 0 22px; max-width:64ch; margin:0; }

/* let the editor canvas inherit the dark surface so authoring matches the front end */
.editor-styles-wrapper{ background:var(--bg); }

/* ============================================================
   CrystalPrivacy — stylesheet ADDITIONS
   Append to your existing theme style.css. Nothing here restyles
   what you already have; these rules only cover markup that the
   corrected Founders template introduces.
   ============================================================ */

/* ---- Available community features panel ---- */
.features{padding:clamp(32px,4vw,44px)}
.features__title{font-size:21px;margin-bottom:10px}
.features__note{color:var(--ink-dim);font-size:14.5px;margin-bottom:26px;max-width:52ch}
.features__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.features__list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-mid)}
.features__list svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto;margin-top:3px}
@media (max-width:620px){.features__list{grid-template-columns:1fr}}

/* ---- Tier card row (flat-fee section) ---- */
.tier-cards{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;margin-top:34px}
.tier-cards img{width:250px;max-width:100%;height:auto;display:block;border-radius:14px}

/* ---- Stat band: values are words/prices now, not short figures ---- */
.stat__k{font-size:clamp(23px,2.3vw,29px);line-height:1.2}

/* ============================================================
   Block-editor reconciliation
   Core wraps our classes on OUTER elements, so a few rules need
   to reach the inner node the browser actually paints.
   ============================================================ */

/* wp:group adds .wp-block-group; make sure it can't flatten our layout classes */
.wp-block-group.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:28px}
.wp-block-group.section{padding:clamp(72px,9vw,132px) 0;position:relative}
.wp-block-group.section.section--tight{padding:clamp(48px,6vw,80px) 0}
.wp-block-group.founders-hero,.wp-block-group.steps3,.wp-block-group.stats{display:grid}
.wp-block-group.faq{display:flex;flex-direction:column;gap:12px}
.wp-block-group.start-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden}
@media (max-width:980px){.wp-block-group.start-grid{grid-template-columns:1fr}}

/* wp:details — native accordion, styled like our <details> FAQ */
.faq .wp-block-details{border:1px solid var(--line);border-radius:14px;background:color-mix(in oklch,var(--panel) 55%,transparent);padding:0 22px;overflow:hidden}
.faq .wp-block-details summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--heading);font-weight:700;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq .wp-block-details summary::-webkit-details-marker{display:none}
.faq .wp-block-details summary::after{content:"+";font-size:22px;color:var(--accent);transition:transform .25s}
.faq .wp-block-details[open] summary::after{transform:rotate(45deg)}
.faq .wp-block-details p{color:var(--ink-mid);font-size:15px;padding:0 0 22px;max-width:64ch}

/* wp:buttons — core puts our .btn--* classes on the wrapper, not the <a> */
.wp-block-button > .wp-block-button__link{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;height:52px;padding:0 26px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;transition:all .22s ease}
.wp-block-button.btn--lg > .wp-block-button__link{height:58px;font-size:16px;padding:0 32px}
.wp-block-button.btn--primary > .wp-block-button__link{color:#04101f;background:linear-gradient(180deg,var(--accent-soft),var(--accent));box-shadow:var(--glow-accent),inset 0 1px 0 rgba(255,255,255,.4)}
.wp-block-button.btn--primary > .wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 0 38px color-mix(in oklch,var(--accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.wp-block-button.btn--ghost > .wp-block-button__link{color:var(--ink);background:color-mix(in oklch,var(--panel) 70%,transparent);border-color:var(--line);backdrop-filter:blur(8px)}
.wp-block-button.btn--ghost > .wp-block-button__link:hover{border-color:color-mix(in oklch,var(--accent) 50%,transparent);color:var(--accent-soft);transform:translateY(-2px)}

/* ============================================================
   CrystalPrivacy — pricing block fix
   Append to style.css. Also see the DELETE note at the bottom.
   ============================================================ */

/* ---- Introductory pricing card + feature grid (Founders page) ---- */
.pricing-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:stretch}
.pricecard{padding:clamp(32px,4vw,44px);display:flex;flex-direction:column;justify-content:center;text-align:center;background:radial-gradient(520px 380px at 50% 0%, color-mix(in oklch,var(--accent) 13%,transparent), transparent 62%), linear-gradient(180deg, color-mix(in oklch,var(--panel) 90%,transparent), color-mix(in oklch,var(--bg-0) 92%,transparent))}
.pricecard__label{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft)}
.pricecard__price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:8px;margin:18px 0 14px}
.pricecard__from{flex-basis:100%;font-family:var(--display);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:2px}
.pricecard__amt{font-family:var(--display);font-weight:700;font-size:clamp(56px,7vw,80px);line-height:1;color:var(--accent);text-shadow:var(--glow-text)}
.pricecard__per{font-family:var(--display);font-size:19px;color:var(--ink-mid)}
.pricecard__note{color:var(--ink-dim);font-size:14.5px;margin:0 auto 28px;max-width:34ch}
.pricecard .btn{align-self:center}
@media (max-width:980px){.pricing-grid{grid-template-columns:1fr}}

/* ---- Introductory pricing in the home-page founders panel ---- */
.rev__price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.rev__from{flex-basis:100%;font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.rev__amt{font-family:var(--display);font-weight:700;font-size:clamp(54px,7vw,84px);line-height:1;color:var(--accent);text-shadow:var(--glow-text)}
.rev__per{font-family:var(--display);font-size:18px;color:var(--ink-mid)}

/* ---- wp:group wrapper on the pricing grid ---- */
.wp-block-group.pricing-grid{display:grid}

/* ============================================================
   DELETE from your style.css — I sent this by mistake and it
   overrides your own section spacing with the old values:

     .wp-block-group.section{padding:clamp(72px,9vw,132px) 0;position:relative}
     .wp-block-group.section.section--tight{padding:clamp(48px,6vw,80px) 0}

   Your base `.section{padding:clamp(30px,6vw,30px) 0}` already
   applies to `.wp-block-group.section` — the extra rule only wins
   on specificity and reverts your change. Replace with this if you
   want the position context:
   ============================================================ */
.wp-block-group.section{position:relative}

