/* somaforming.com — Cosmist design system.
   Tokens are Cosmist_DESIGN.md §18 verbatim; everything below them is this
   site's application of §6.1 (colour ratio), §7 (type) and §13 (interface). */

/* ---------------------------------------------------------------- fonts --
   Self-hosted. No Google Fonts network call: a third-party font request is a
   render-blocking dependency on someone else's uptime and a privacy leak on a
   page that asks for personal data. */
@font-face{font-family:Oswald;src:url(/fonts/oswald-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Oswald;src:url(/fonts/oswald-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/plex-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* --------------------------------------------------------------- tokens -- */
:root{
  --cosmist-paper:#d8cab3;
  --cosmist-paper-light:#e7dcc8;
  --cosmist-space:#1c2026;
  --cosmist-ink:#16191d;
  --cosmist-red:#8e402b;
  --cosmist-brass:#b89655;
  --cosmist-taupe:#8a775f;
  --cosmist-graphite:#48443d;

  --font-display:"Oswald","Arial Narrow","Roboto Condensed",sans-serif;
  --font-body:"IBM Plex Sans","Inter",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;
  --space-24:6rem;--space-32:8rem;

  --radius-sm:2px;--rule:1px;
  --container-max:90rem;--reading-max:46rem;
  --margin:clamp(1.25rem,5vw,7rem);

  /* Derived, and both exist for the same reason: the two brand tokens they come
     from are correct as SIGNAL colours and fail as small TEXT on paper.

     --taupe-deep  Monument Taupe, darkened until it clears AA on paper (4.64:1)
                   and on bone paper (5.52:1). The raw token is 3.4:1.
     --red-text    Oxide Red, darkened to 4.66:1 on paper. The brand token itself
                   is 4.46:1 — fine for the large or bold use §6.2 permits, and
                   short of AA for the 12.5px mono gate lines in the ladder. The
                   brand token below is left at its exact value and is still what
                   borders, rules and focus states use. */
  --taupe-deep:#63523d;
  --red-text:#8b3d28;
  --hairline:rgba(22,25,29,.16);
}

/* ----------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cosmist-paper);
  color:var(--cosmist-ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
:where(h1,h2,h3,h4){font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance}
p{margin:0 0 var(--space-4)}

/* Focus: colour PLUS a shape change, never colour alone (§17). */
:focus-visible{
  outline:2px solid var(--cosmist-red);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--space-4);top:-4rem;z-index:100;
  background:var(--cosmist-space);color:var(--cosmist-paper-light);
  padding:var(--space-3) var(--space-4);text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:var(--space-4)}

/* ----------------------------------------------------------- type roles -- */
.label{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-deep);
  margin:0 0 var(--space-4);
}
.label--red{color:var(--cosmist-red)}
.label--bone{color:var(--cosmist-brass)}

h1{font-size:clamp(2.6rem,6vw,5.2rem);line-height:.96;letter-spacing:-.01em}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.005em}
h3{font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.15;font-weight:500}
.lede{font-size:clamp(1.15rem,1.7vw,1.375rem);line-height:1.5;max-width:34rem}
.measure{max-width:var(--reading-max)}

/* -------------------------------------------------------------- layout -- */
.wrap{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--margin)}
.section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.section--space{background:var(--cosmist-space);color:var(--cosmist-paper-light)}
.section--space .label{color:var(--cosmist-brass)}
.section--tint{background:var(--cosmist-paper-light)}
.rule{border:0;border-top:var(--rule) solid var(--hairline);margin:0}

/* ------------------------------------------------------------- buttons --
   Radius 0–2px, no gradient, no shadow, no pill (§13.2). The primary action is
   black on paper — red stays a signal, never a fill (§6.1). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-body);font-size:17px;font-weight:500;line-height:1.2;
  padding:14px 22px;border-radius:var(--radius-sm);
  border:var(--rule) solid transparent;text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--primary{background:var(--cosmist-space);color:var(--cosmist-paper-light);border-color:var(--cosmist-space)}
.btn--primary:hover{background:#0f1216}
.btn--ghost{background:transparent;color:var(--cosmist-ink);border-color:rgba(22,25,29,.45)}
.btn--ghost:hover{border-color:var(--cosmist-ink);background:rgba(22,25,29,.04)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn--block{width:100%}

/* A text link with a 1px rule — the secondary action (§4). */
.link-rule{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:17px;text-decoration:none;
  border-bottom:var(--rule) solid rgba(22,25,29,.45);
  padding-bottom:2px;
}
.link-rule:hover{border-bottom-color:var(--cosmist-ink)}

/* --------------------------------------------------------------- header -- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--cosmist-paper);
  border-bottom:var(--rule) solid var(--hairline);
}
.site-header__inner{
  display:flex;align-items:center;gap:var(--space-6);
  min-height:64px;padding-block:var(--space-3);
}
.wordmark{
  font-family:var(--font-display);font-weight:600;font-size:1.25rem;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;line-height:1;
}
.wordmark__note{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--taupe-deep);text-transform:uppercase;margin-left:var(--space-3);
  white-space:nowrap;
}
.site-nav{display:flex;gap:var(--space-6);margin-left:auto;align-items:center}
.site-nav a{font-size:16px;text-decoration:none;color:var(--cosmist-graphite)}
.site-nav a:hover{color:var(--cosmist-ink)}
.site-header .btn{padding:10px 18px;font-size:16px}
@media (max-width:900px){
  .wordmark__note{display:none}
  .site-nav{display:none}
  .site-header .btn{margin-left:auto}
}

/* ----------------------------------------------------------------- hero --
   16:9 master, art right, live copy left (§9.2, §10.1). The master is never
   auto-cropped; below 900px the composition becomes figure-above / copy-below
   (§7 of the brief). */
.hero{position:relative;background:var(--cosmist-paper);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--space-8)}
.hero__content{padding-block:clamp(var(--space-16),8vw,var(--space-24));max-width:36rem}
.hero__art{position:relative;align-self:stretch;min-height:100%}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero h1{margin-bottom:var(--space-6)}
.hero__claims{list-style:none;margin:0 0 var(--space-8);padding:0;max-width:32rem}
.hero__claims li{
  position:relative;padding-left:1.4rem;margin-bottom:var(--space-3);
  font-size:17px;line-height:1.5;
}
.hero__claims li::before{
  content:"—";position:absolute;left:0;color:var(--cosmist-taupe);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-bottom:var(--space-4)}
.hero__note{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;color:var(--taupe-deep);margin:0}

/* The orbital drift — the only decorative motion on the page (§7 of the brief).
   1.2° over 18s on the art layer only; the figure and the copy do not move. */
@media (prefers-reduced-motion:no-preference){
  .hero__art img{animation:orbital-drift 18s ease-in-out infinite alternate;transform-origin:68% 50%}
}
@keyframes orbital-drift{from{transform:rotate(-.6deg) scale(1.02)}to{transform:rotate(.6deg) scale(1.02)}}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero__art{order:-1;aspect-ratio:16/10}
  .hero__art img{object-position:70% 45%}
  .hero__content{padding-block:var(--space-12) var(--space-16)}
}

/* Two-step copy reveal. Guarded so a script that never runs still leaves the
   page fully readable — the .js class is set by site.js, not by the markup. */
.js .reveal{opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{transition:opacity .5s ease,transform .5s ease}
}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}

/* --------------------------------------------------------------- blocks -- */
.blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-16)}
.block{border-top:2px solid var(--cosmist-ink);padding-top:var(--space-4)}
.block h3{margin-bottom:var(--space-3)}
.block p{font-size:16.5px;line-height:1.55;margin:0}
@media (max-width:860px){.blocks{grid-template-columns:1fr;gap:var(--space-8)}}

/* ---------------------------------------------------------------- video -- */
.film{margin-top:var(--space-16);max-width:64rem}
.film__frame{position:relative;aspect-ratio:16/9;background:var(--cosmist-space);overflow:hidden}
.film__frame video{width:100%;height:100%;object-fit:cover}
.film figcaption{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe-deep);margin-top:var(--space-3)}

/* ----------------------------------------------------------- join screen -- */
.join__head{max-width:var(--reading-max);margin-bottom:var(--space-12)}
.join__sub{font-family:var(--font-mono);font-size:13.5px;line-height:1.6;letter-spacing:.03em;color:var(--cosmist-graphite);margin:var(--space-4) 0 0}
.join__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--space-8),4vw,var(--space-16));align-items:start}
@media (max-width:1100px){.join__cols{grid-template-columns:1fr}}

/* The ladder. Red appears here and only here in this screen — one signal. */
.ladder{list-style:none;margin:0;padding:0;counter-reset:rung}
.ladder__step{
  position:relative;padding:0 0 var(--space-8) var(--space-12);
  border-left:var(--rule) solid var(--hairline);
}
.ladder__step:last-child{padding-bottom:0;border-left-color:transparent}
.ladder__step::before{
  counter-increment:rung;content:counter(rung);
  position:absolute;left:0;top:-2px;transform:translateX(-50%);
  width:2rem;height:2rem;display:grid;place-items:center;
  background:var(--cosmist-paper);border:var(--rule) solid var(--cosmist-ink);
  font-family:var(--font-mono);font-size:13px;font-weight:500;
}
.ladder__title{font-size:1.05rem;font-weight:500;line-height:1.4;margin:0 0 var(--space-3);max-width:26rem}
.chip{
  display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  border:var(--rule) solid var(--cosmist-ink);padding:5px 10px;
}
.chip--free{background:var(--cosmist-ink);color:var(--cosmist-paper-light)}
.ladder__gate{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.5;letter-spacing:.03em;
  color:var(--red-text);margin:var(--space-3) 0 0;max-width:26rem;
}
.ladder__gate::before{content:"→ ";}
.refund{
  font-family:var(--font-mono);font-size:13px;line-height:1.65;letter-spacing:.02em;
  color:var(--cosmist-ink);border-top:2px solid var(--cosmist-ink);
  margin-top:var(--space-8);padding-top:var(--space-4);max-width:30rem;
}

/* ----------------------------------------------------------------- form -- */
.form-card{
  background:var(--cosmist-paper-light);
  border:var(--rule) solid var(--hairline);
  padding:clamp(var(--space-6),3vw,var(--space-12));
}
@media (min-width:1100px){.form-card{position:sticky;top:88px}}
.form-card h3{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1.15;margin:0 0 var(--space-6)}
.field{margin-bottom:var(--space-6)}
.field label{display:block;font-size:15.5px;font-weight:500;margin-bottom:var(--space-2);line-height:1.4}
.field .req{color:var(--cosmist-red)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:16px;line-height:1.4;
  padding:11px 12px;background:var(--cosmist-paper);color:var(--cosmist-ink);
  border:var(--rule) solid rgba(22,25,29,.35);border-radius:var(--radius-sm);
}
.field textarea{min-height:6.5rem;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cosmist-graphite) 50%),linear-gradient(135deg,var(--cosmist-graphite) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--cosmist-red)}
.field__note{font-size:13.5px;line-height:1.5;color:var(--cosmist-graphite);margin:var(--space-2) 0 0}
.field__count{font-family:var(--font-mono);font-size:11.5px;color:var(--taupe-deep);text-align:right;margin:var(--space-1) 0 0}
.field__error{
  font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--red-text);
  margin:var(--space-2) 0 0;
}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:var(--cosmist-red);border-width:2px}
.field--check{display:flex;gap:var(--space-3);align-items:flex-start}
.field--check input{width:1.15rem;height:1.15rem;flex:0 0 auto;margin-top:.2rem}
.field--check label{font-size:14.5px;font-weight:400;line-height:1.5;color:var(--cosmist-graphite);margin:0}
.form-foot{font-size:14px;line-height:1.5;color:var(--cosmist-graphite);margin:var(--space-4) 0 0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--red-text);margin:var(--space-4) 0 0}

/* Confirmation, revealed in place of the form. */
.confirm h3{margin-bottom:var(--space-4)}
.confirm p{font-size:16.5px}
.confirm__next{list-style:none;margin:0 0 var(--space-6);padding:0}
.confirm__next li{position:relative;padding-left:1.5rem;margin-bottom:var(--space-3);font-size:16px;line-height:1.5}
.confirm__next li::before{content:"—";position:absolute;left:0;color:var(--cosmist-taupe)}

/* ----------------------------------------------------------------- team -- */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-12)}
@media (max-width:860px){.people{grid-template-columns:1fr}}
.person{border-top:2px solid var(--cosmist-ink);padding-top:var(--space-4)}
.person img{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:var(--space-4);filter:grayscale(1) contrast(1.05)}
.person h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin:0 0 var(--space-2)}
.person p{font-size:15.5px;line-height:1.5;margin:0 0 var(--space-3);color:var(--cosmist-graphite)}
.person__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.person__links a{text-decoration:none;border-bottom:var(--rule) solid var(--hairline);padding-bottom:1px}
.person__links a:hover{border-bottom-color:var(--cosmist-ink)}
.standard{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--taupe-deep);margin-top:var(--space-12);padding-top:var(--space-4);border-top:var(--rule) solid var(--hairline)}

/* --------------------------------------------------------------- footer -- */
.site-footer{background:var(--cosmist-space);color:var(--cosmist-paper-light);padding-block:var(--space-16) var(--space-12)}
.site-footer a{color:var(--cosmist-paper-light)}
.footer__top{display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:space-between;align-items:flex-start}
.footer__brand{display:flex;gap:var(--space-4);align-items:center;text-decoration:none}
.footer__brand svg{width:36px;height:48px;flex:0 0 auto}
.footer__brand span{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cosmist-brass)}
.footer__links{display:flex;flex-wrap:wrap;gap:var(--space-6);font-size:15px}
.footer__links a{text-decoration:none;border-bottom:var(--rule) solid rgba(231,220,200,.3);padding-bottom:2px}
.footer__links a:hover{border-bottom-color:var(--cosmist-paper-light)}
.disclaimer{
  font-size:14px;line-height:1.6;color:#a9a293;
  margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:var(--rule) solid rgba(231,220,200,.18);max-width:62rem;
}
.disclaimer p{margin:0 0 var(--space-2)}
.disclaimer p:last-child{margin:0}

/* ------------------------------------------------------- editorial pages --
   /protocol/*, /offers/*, /terms/, /privacy/, /thanks/ */
.doc{padding-block:var(--space-12) var(--space-24)}
.doc .measure{max-width:var(--reading-max)}
.unlisted{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--taupe-deep);border-bottom:var(--rule) solid var(--hairline);
  padding-bottom:var(--space-3);margin-bottom:var(--space-12);
}
.doc h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:var(--space-6)}
.doc h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:var(--space-16) 0 var(--space-4);line-height:1.1}
.doc h3{font-size:1.15rem;font-weight:600;font-family:var(--font-display);margin:var(--space-8) 0 var(--space-3)}
.doc p,.doc li{font-size:17px;line-height:1.62}
.doc ul,.doc ol{padding-left:1.25rem;margin:0 0 var(--space-4);max-width:var(--reading-max)}
.doc li{margin-bottom:var(--space-2)}
.doc strong{font-weight:600}
.doc__toc{list-style:none;padding:0;margin:0 0 var(--space-16);max-width:var(--reading-max)}
.doc__toc li{margin-bottom:var(--space-2);font-size:16px}
.doc__toc a{text-decoration:none;border-bottom:var(--rule) solid var(--hairline);padding-bottom:1px}
.doc__toc a:hover{border-bottom-color:var(--cosmist-ink)}

.callout{
  border-left:2px solid var(--cosmist-red);
  padding:var(--space-4) 0 var(--space-4) var(--space-6);
  margin:var(--space-8) 0;max-width:var(--reading-max);
}
.callout p:last-child{margin:0}
.callout__label{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-text);margin:0 0 var(--space-2);
}

.table-scroll{overflow-x:auto;margin:var(--space-6) 0;max-width:100%}
table{border-collapse:collapse;width:100%;min-width:32rem;font-size:15.5px}
th,td{text-align:left;padding:10px 14px 10px 0;border-bottom:var(--rule) solid var(--hairline);vertical-align:top}
th{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;
   text-transform:uppercase;color:var(--taupe-deep);white-space:nowrap}
td code{font-family:var(--font-mono);font-size:14px}

.doc__nav{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-16);
  padding-top:var(--space-6);border-top:var(--rule) solid var(--hairline)}