/* ============================================================
   THE RAD FAMILY DESIGN SYSTEM v1.0 — canonical token block
   (verbatim from radlife.ai/index.html — NO new palette, NO new
   colors; this page only adds layout/components built from these.)
   "Refuse in code, made visible." — calm slate, mint goes,
   indigo connects, and amber is the line nothing crosses
   without a human.
   ============================================================ */
:root{
  /* NEUTRALS — the Deep Slate ramp */
  --slate-950:#07090D; --slate-900:#0B0F14; --slate-850:#0E131A;
  --slate-800:#11161F; --slate-750:#151B25; --slate-700:#1A2230;
  --hairline:#232C3A; --hairline-strong:#303B4D;
  /* INK */
  --ink:#E8EEF6; --ink-dim:#9DAAB8; --ink-faint:#7E8C9C; --ink-ghost:#3A4453;
  /* GO / safe / allowed / reversible */
  --mint:#5EE6B0; --mint-deep:#2BB789; --mint-ink:#04130D;
  --mint-glow:rgba(94,230,176,.16); --mint-line:rgba(94,230,176,.30);
  /* HELD / refused-in-code / human-only / the line (THE SCARCE ACCENT) */
  --amber:#F2C46B; --amber-deep:#D49A2E; --amber-ink:#1B1304;
  --amber-glow:rgba(242,196,107,.18); --amber-line:rgba(242,196,107,.42);
  /* BRAND / family / links / connective tissue */
  --indigo:#8B9BFF; --indigo-deep:#6470E8; --indigo-ink:#0A0E1F;
  --indigo-glow:rgba(139,155,255,.16); --indigo-line:rgba(139,155,255,.30);
  /* DANGER — destructive only */
  --rose:#FF7A88; --rose-glow:rgba(255,122,136,.16);
  /* THE ONE SIGNATURE GRADIENT */
  --grad-family:linear-gradient(110deg,var(--mint) 0%,var(--indigo) 100%);
  --grad-held:linear-gradient(180deg,var(--amber) 0%,var(--amber-deep) 100%);
  /* RADII */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  /* ELEVATION */
  --e-1:0 1px 0 rgba(255,255,255,.04) inset,0 1px 2px rgba(0,0,0,.4);
  --e-2:0 1px 0 rgba(255,255,255,.05) inset,0 8px 24px -12px rgba(0,0,0,.6);
  --e-3:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px -24px rgba(0,0,0,.7);
  --e-glow-amber:0 0 0 1px var(--amber-line),0 0 40px -8px var(--amber-glow);
  --e-glow-mint:0 0 0 1px var(--mint-line),0 0 40px -8px var(--mint-glow);
  /* MOTION */
  --ease-go:cubic-bezier(.22,.61,.36,1);
  --ease-stop:cubic-bezier(.7,0,.84,0);
  --ease-release:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.14s; --t-base:.28s; --t-slow:.55s; --t-freeze:.9s;
  /* TYPE SCALE */
  --fs-display:clamp(2.6rem,6vw,4.4rem); --fs-h2:clamp(1.8rem,3.6vw,2.7rem);
  --fs-h3:1.3rem; --fs-lede:clamp(1.05rem,2.2vw,1.35rem); --fs-body:1rem;
  --fs-sm:.875rem; --fs-eyebrow:.75rem; --fs-mono:.8125rem;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* SPACING */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  /* LAYOUT */
  --maxw:1120px; --gutter:clamp(20px,5vw,24px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--slate-900);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-body);line-height:1.6;
  font-optical-sizing:auto;font-feature-settings:"cv11" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  position:relative;overflow-x:hidden}

/* ---- Ambient canvas (shared family signature) ---- */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--indigo-glow) 1px,transparent 1px),
                   linear-gradient(90deg,var(--indigo-glow) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%);}
.bg-glow{position:fixed;top:-25%;left:50%;transform:translateX(-50%);width:900px;height:700px;
  max-width:100vw;z-index:0;pointer-events:none;filter:blur(40px);
  background:radial-gradient(circle,var(--indigo-glow),transparent 60%);}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}

/* ---- Type ---- */
h1{font-size:var(--fs-display);font-weight:850;letter-spacing:-.025em;line-height:1.02;margin:var(--s4) 0 var(--s5)}
h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0 0 var(--s4)}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin:0}
.g{background:var(--grad-family);-webkit-background-clip:text;background-clip:text;color:transparent}
.code-voice{font-family:var(--font-mono);letter-spacing:-.01em;font-variant-ligatures:none}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--indigo);
  display:inline-flex;align-items:center;gap:8px}
.zap{filter:drop-shadow(0 0 8px var(--indigo))}
a{color:var(--indigo);text-decoration:none}

/* ---- Keyboard a11y (family-standard) ---- */
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--indigo);color:var(--indigo-ink);font-weight:800;
  padding:10px 16px;border-radius:var(--r-sm);box-shadow:var(--e-2);text-decoration:none}
.skip-link:focus{left:var(--gutter);top:var(--s3)}

/* ---- The Valve (shared family heartbeat) ---- */
.valve{width:18px;height:18px;border-radius:50%;border:2px solid var(--amber);
  box-shadow:var(--e-glow-amber);position:relative;flex:none}
.valve::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--amber);opacity:.5}
@keyframes valve-pulse{0%,100%{opacity:.55;box-shadow:var(--e-glow-amber)}
  50%{opacity:1;box-shadow:0 0 0 1px var(--amber),0 0 56px -6px var(--amber-glow)}}
.valve.is-held{animation:valve-pulse 1.1s var(--ease-go) infinite}

.section{padding:var(--s7) 0;scroll-margin-top:80px}
.surface-2{background:linear-gradient(180deg,var(--slate-750),var(--slate-800));
  border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--e-2)}

/* ============================================================
   HERO — "Permission-as-a-Service." + the cloud-PaaS pun
   The amber line runs vertically down the hero's left edge:
   the seam every product shares, here as the page's spine.
   ============================================================ */
header{padding:clamp(64px,10vw,118px) 0 var(--s7);text-align:center;scroll-margin-top:80px;position:relative}
.lede{color:var(--ink-dim);font-size:var(--fs-lede);line-height:1.5;max-width:680px;margin:0 auto var(--s5)}
.hero-cat{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--s4);
  font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:500;color:var(--amber);
  border:1px solid var(--amber-line);background:var(--amber-glow);border-radius:var(--r-pill);padding:6px 14px}
.hero-cat .valve{width:13px;height:13px}
.hero-sub{color:var(--ink);font-weight:700;font-size:var(--fs-lede);margin:0 auto var(--s2);max-width:640px}
.paas-line{color:var(--ink-faint);font-family:var(--font-mono);font-size:var(--fs-sm);
  max-width:620px;margin:0 auto var(--s5);line-height:1.55}
.paas-line b{color:var(--amber);font-weight:500}
.microtrust{color:var(--ink-faint);font-size:var(--fs-sm);margin-top:var(--s5)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s6)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-sm);
  border-radius:var(--r-pill);padding:11px 20px;text-decoration:none;
  transition:transform var(--t-fast) var(--ease-go),box-shadow var(--t-base) var(--ease-go),border-color var(--t-fast) var(--ease-go)}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--grad-family);color:var(--slate-950);box-shadow:var(--e-2)}
.btn--ghost{color:var(--ink-dim);border:1px solid var(--hairline-strong);background:var(--slate-800)}
.btn--ghost:hover{border-color:var(--indigo-line);box-shadow:var(--e-glow-mint)}
.btn .mono{font-family:var(--font-mono);font-weight:500}

/* The single horizontal Amber Line under the hero — the family seam */
.amber-seam{position:relative;height:2px;max-width:560px;margin:var(--s7) auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--mint) 12%,var(--mint) 40%,var(--amber) 60%,var(--amber) 88%,transparent)}
.amber-seam::after{content:"";position:absolute;right:12%;top:50%;width:14px;height:14px;border-radius:50%;
  transform:translate(50%,-50%);background:var(--amber);box-shadow:var(--e-glow-amber)}
.seam-legend{display:flex;justify-content:center;gap:var(--s5);margin-top:var(--s4);
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);flex-wrap:wrap}
.seam-legend .go{color:var(--mint)} .seam-legend .held{color:var(--amber)}

/* ============================================================
   THE SHARED VERB — illustrative, clearly-labeled spec snippet
   ============================================================ */
.verb .head{text-align:center;margin-bottom:var(--s6)}
.illus-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s4);
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--amber-line);background:var(--amber-glow);
  border-radius:var(--r-pill);padding:4px 11px}
.verb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:start}
.codeblock{background:var(--slate-850);border:1px solid var(--hairline);border-radius:var(--r-lg);
  box-shadow:var(--e-2);overflow:hidden;position:relative}
.codeblock::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-held);box-shadow:0 0 20px var(--amber-glow)}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--hairline);background:var(--slate-800)}
.code-bar .fname{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--ink-dim)}
.code-bar .lbl{font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber)}
pre.code{margin:0;padding:var(--s5);overflow-x:auto;font-family:var(--font-mono);
  font-size:var(--fs-mono);line-height:1.7;color:var(--ink-dim);font-variant-ligatures:none}
pre.code .cmt{color:var(--ink-ghost)}
pre.code .key{color:var(--indigo)}
pre.code .str{color:var(--mint)}
pre.code .held{color:var(--amber)}
pre.code .fn{color:var(--ink)}

/* the verdict playground — three illustrative actions -> three verdicts */
.playground{display:flex;flex-direction:column;gap:var(--s4)}
.pg-card{background:linear-gradient(180deg,var(--slate-750),var(--slate-800));
  border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--e-2);padding:var(--s5)}
.pg-card h3{margin-bottom:var(--s2)}
.pg-card .pg-sub{color:var(--ink-faint);font-size:var(--fs-sm);margin:0 0 var(--s4)}
.pg-actions{display:flex;flex-direction:column;gap:var(--s2)}
.pg-act{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--ink-dim);
  background:var(--slate-850);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:10px 13px;transition:border-color var(--t-fast) var(--ease-go),background var(--t-fast) var(--ease-go)}
.pg-act:hover{border-color:var(--hairline-strong)}
.pg-act[aria-pressed="true"]{border-color:var(--indigo-line);background:var(--slate-800);color:var(--ink)}
.pg-act .seg{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-ghost)}
.pg-act[data-verdict="go"] .seg{background:var(--mint);box-shadow:0 0 10px var(--mint-glow)}
.pg-act[data-verdict="held"] .seg{background:var(--amber);box-shadow:0 0 10px var(--amber-glow)}
.pg-act[data-verdict="never"] .seg{background:var(--rose);box-shadow:0 0 10px var(--rose-glow)}
.pg-verdict{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hairline);
  font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.6}
.pg-verdict .row{display:flex;gap:var(--s2);align-items:baseline}
.pg-verdict .k{color:var(--ink-faint);min-width:88px}
.pg-verdict .decision{font-weight:700}
.pg-verdict.is-go .decision{color:var(--mint)}
.pg-verdict.is-held .decision{color:var(--amber)}
.pg-verdict.is-never .decision{color:var(--rose)}
.pg-verdict .v{color:var(--ink-dim)}
.verb-note{margin-top:var(--s5);color:var(--ink-faint);font-size:var(--fs-sm);line-height:1.6;text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.verb-note b{color:var(--ink)} .verb-note code{font-family:var(--font-mono);font-size:.85em;color:var(--mint);
  background:var(--slate-850);border:1px solid var(--hairline);border-radius:6px;padding:1px 6px}
.verb-note a{color:var(--indigo)}

@media (max-width:780px){ .verb-grid{grid-template-columns:1fr} }

/* ============================================================
   ONE REFLEX, FIVE SURFACES — the roll-call (reused partial)
   ============================================================ */
.roll-call{padding:var(--s8) 0 var(--s7);scroll-margin-top:80px}
.roll-card{max-width:820px;margin:0 auto;text-align:center;
  padding:var(--s8) clamp(24px,5vw,48px);position:relative;overflow:hidden}
.roll-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-held);box-shadow:0 0 20px var(--amber-glow)}
.roll-card .eyebrow{margin-bottom:var(--s4)}
.roll-lines{list-style:none;margin:0 auto var(--s6);padding:0;max-width:580px;text-align:left;
  display:flex;flex-direction:column;gap:var(--s3)}
.roll-lines li{font-size:var(--fs-lede);line-height:1.4;color:var(--ink-dim);
  display:flex;gap:var(--s3);align-items:baseline}
.roll-lines li b{color:var(--ink);font-weight:700}
.roll-lines li a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t-fast) var(--ease-go),color var(--t-fast) var(--ease-go)}
.roll-lines li a:hover{color:var(--ink);border-bottom-color:var(--amber-line)}
.roll-lines .v{width:9px;height:9px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 12px var(--amber-glow);flex:none;transform:translateY(2px)}
.roll-sum{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:var(--s5) 0 var(--s6)}
.roll-sum .g{background:var(--grad-family);-webkit-background-clip:text;background-clip:text;color:transparent}
.on-purpose{display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--font-mono);font-weight:700;font-size:clamp(1.3rem,3vw,1.9rem);
  letter-spacing:-.02em;color:var(--amber);
  border:1px solid var(--amber-line);background:var(--amber-glow);
  border-radius:var(--r-pill);padding:10px 24px;box-shadow:var(--e-glow-amber)}
.on-purpose .dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--amber);
  box-shadow:var(--e-glow-amber);position:relative;flex:none}
.on-purpose .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--amber);opacity:.6}

/* ============================================================
   THE INVESTOR ONE-LINER — own the rail, not the machine
   ============================================================ */
.thesis{padding:var(--s7) 0;scroll-margin-top:80px}
.thesis-card{max-width:900px;margin:0 auto;padding:var(--s8) clamp(24px,5vw,56px);position:relative;overflow:hidden;text-align:center}
.thesis-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-family);box-shadow:0 0 20px var(--indigo-glow)}
.thesis-line{font-size:var(--fs-h2);font-weight:850;letter-spacing:-.02em;line-height:1.12;margin:0 auto var(--s5);max-width:18ch}
.thesis-card p{color:var(--ink-dim);font-size:var(--fs-lede);line-height:1.5;max-width:680px;margin:0 auto var(--s5)}
.thesis-card p:last-child{margin-bottom:0}
.thesis-card b{color:var(--ink);font-weight:700}
.rhyme{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);max-width:720px;margin:var(--s6) auto 0;text-align:left}
.rhyme .col{background:var(--slate-850);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s5)}
.rhyme .col .t{font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);margin-bottom:var(--s3)}
.rhyme .col p{font-size:var(--fs-sm);color:var(--ink-dim);margin:0;text-align:left}
.rhyme .col p b{color:var(--ink)}
@media (max-width:640px){ .rhyme{grid-template-columns:1fr} }

/* ============================================================
   TRUST SURFACES — The Amber Line badge + reality.txt + llms.txt
   ============================================================ */
.surfaces .head{text-align:center;margin-bottom:var(--s7)}
.surf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.surf{display:flex;flex-direction:column;gap:var(--s3);
  background:linear-gradient(180deg,var(--slate-750),var(--slate-800));
  border:1px solid var(--hairline);border-left:2px solid var(--amber-line);
  border-radius:var(--r-lg);box-shadow:var(--e-2);padding:var(--s5);text-decoration:none;color:inherit;
  transition:transform var(--t-fast) var(--ease-go),border-color var(--t-fast) var(--ease-go),box-shadow var(--t-base) var(--ease-go)}
a.surf:hover{transform:translateY(-3px);border-color:var(--hairline-strong);box-shadow:var(--e-2),var(--e-glow-amber)}
.surf .badge-wrap{display:flex;justify-content:center;padding:var(--s3) 0 var(--s2)}
.surf .badge-wrap img{width:128px;height:128px;display:block}
.surf h3{text-align:center}
.surf .d{color:var(--ink-dim);font-size:var(--fs-sm);line-height:1.55;flex:1}
.surf .d b{color:var(--ink)} .surf .d code{font-family:var(--font-mono);font-size:.85em;color:var(--mint);
  background:var(--slate-850);border:1px solid var(--hairline);border-radius:6px;padding:1px 6px}
.surf .go{color:var(--indigo);font-weight:700;font-size:var(--fs-sm);font-family:var(--font-mono);letter-spacing:-.01em;
  transition:transform var(--t-fast) var(--ease-go)}
a.surf:hover .go{transform:translateX(3px)}

/* ---- Footer (family lockup) ---- */
footer{border-top:1px solid var(--hairline);margin-top:var(--s8);padding:var(--s8) 0 var(--s9);text-align:center}
.f-mark{font-weight:850;font-size:1.4rem;letter-spacing:-.02em}
.f-mark .zap{margin-right:6px}
.f-mark .suf{color:var(--indigo)}
.f-tag{color:var(--ink-dim);margin:var(--s3) 0 var(--s5);font-size:var(--fs-sm)}
.f-family{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;font-family:var(--font-mono);font-size:var(--fs-mono);margin-bottom:var(--s5)}
.f-family a{color:var(--indigo)}
.f-family .sep{color:var(--ink-ghost)}
.f-family .here{color:var(--ink);font-weight:700}
.f-fine{color:var(--ink-faint);font-size:var(--fs-sm)}
.f-fine a{color:var(--indigo)}

/* ---- Motion safety: meaning survives without animation ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  /* the seam still reads static: mint-to-amber gradient is already non-animated */
}