/* ═══════════════════════════════════════════════════════════════════════════
   SYMBIONT INTELLIGENCE — WEBSITE V1
   Production stylesheet · v1.0
   Self-hosted fonts. No third-party requests. One stylesheet for the site.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FONTS · self-hosted, no external request ───────────────────────────── */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/fraunces-400.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/fraunces-500.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;
  src:url('../assets/fonts/fraunces-400-italic.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/outfit-400.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/outfit-500.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/outfit-600.woff2') format('woff2')}

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  --bone:#F6F1E7; --warm:#FBF8F2; --ink:#2B2723; --ink-soft:#514A42;
  --indigo:#23264A; --indigo-deep:#171A38; --brass:#A8874F; --forest:#33503F;
  --line:rgba(43,39,35,.14); --line-light:rgba(246,241,231,.20);
  --bone-72:rgba(246,241,231,.72); --bone-88:rgba(246,241,231,.88);

  --a-mirror:#6E5FB0; --a-creatoros:#33503F;
  --a-executive:#A8874F; --a-enterprise:#23264A;

  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-text:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --pad-moment:150px; --pad-section:130px; --pad-band:96px; --pad-util:70px;
  --gutter:26px; --wide:1080px; --measure:660px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:76px;
}
@media (max-width:760px){
  :root{--pad-moment:96px;--pad-section:80px;--pad-band:64px;--pad-util:48px;--nav-h:64px}
}

/* ── RESET ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{font-family:var(--f-text);font-size:17px;line-height:1.8;font-weight:400;
  color:var(--ink);background:var(--warm);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}
img,picture,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

/* ── TYPE ───────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.16;
  letter-spacing:-.005em;font-optical-sizing:auto}
p+p{margin-top:1.05em}

.eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);font-weight:600;display:block;margin-bottom:26px}
.h-hero{font-size:clamp(33px,5.2vw,60px);line-height:1.13;letter-spacing:-.012em}
.h-display{font-size:clamp(29px,4.2vw,45px);text-wrap:balance}
.h-3{font-size:26px;line-height:1.25}
.quote{font-family:var(--f-display);font-size:clamp(25px,3.4vw,37px);
  font-style:italic;font-weight:400;line-height:1.42}
.lead{font-family:var(--f-display);font-size:clamp(21px,2.9vw,29px);
  line-height:1.45;font-weight:400}
.body-lg{font-size:19px;line-height:1.85}
.sub{font-size:18px;line-height:1.7;color:var(--ink-soft)}
.small{font-size:15px;line-height:1.7;color:var(--ink-soft)}
.note{font-size:13px;line-height:1.7;color:var(--ink-soft)}
.attrib{font-family:var(--f-text);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--brass);display:block;margin-top:32px;font-style:normal}

/* one sentence per line — the founder's rhythm, as layout */
.litany li{margin-bottom:.3em}
.litany.lg li{font-size:20px;line-height:1.62}
.verbs li{font-family:var(--f-display);font-size:22px;line-height:1.72;text-align:center}

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.center{text-align:center}
.sec{padding-block:var(--pad-section)}
.sec-moment{padding-block:var(--pad-moment)}
.sec-band{padding-block:var(--pad-band)}
.g-warm{background:var(--warm)}
.g-bone{background:var(--bone)}
.g-dark{background:var(--indigo-deep);color:var(--bone)}
.g-dark h1,.g-dark h2,.g-dark h3{color:var(--bone)}
.g-dark p,.g-dark li{color:var(--bone-88)}
.g-dark .small,.g-dark .sub,.g-dark .note{color:var(--bone-72)}
.isolated{max-width:740px;margin:80px auto 0;text-align:center}
.isolated + .isolated{margin-top:52px}

/* type-on-texture: real generated paper grain, never a stock photo */
.textured{background:var(--bone) url('../assets/img/texture-bone.webp?v=7') repeat;
  background-size:260px}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn{display:inline-block;padding:17px 36px;background:var(--indigo);color:var(--bone);
  font-size:12px;letter-spacing:.20em;text-transform:uppercase;font-weight:600;
  border-radius:2px;transition:opacity .24s var(--ease),transform .24s var(--ease)}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn--inverse{background:var(--bone);color:var(--indigo)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid rgba(43,39,35,.28)}
.btn--ghost:hover{background:rgba(43,39,35,.04);transform:none}
.quiet{display:inline-block;font-size:15px;border-bottom:1px solid var(--brass);
  padding-bottom:2px;transition:opacity .24s var(--ease)}
.quiet:hover{opacity:.68}
.g-dark .quiet{color:var(--bone)}
.free-note{display:block;margin-top:22px;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass);font-weight:600}
.skip{position:absolute;left:-9999px;background:var(--indigo);color:var(--bone);
  padding:14px 22px;z-index:200;font-size:13px}
.skip:focus{left:12px;top:12px}

/* ── HEADER ─────────────────────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;
  transition:background .26s var(--ease),border-color .26s var(--ease)}
.hdr.settled,.hdr--light{background:var(--bone);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1200px;margin-inline:auto;padding-inline:var(--gutter);height:var(--nav-h)}
.brand{font-family:var(--f-display);font-size:19px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;white-space:nowrap;color:var(--bone);transition:color .26s var(--ease)}
.hdr.settled .brand,.hdr--light .brand{color:var(--ink)}
.nav{display:flex;align-items:center;gap:30px}
.nav a,.nav button{font-size:14px;color:var(--bone-88);transition:color .26s var(--ease)}
.hdr.settled .nav a,.hdr.settled .nav button,
.hdr--light .nav a,.hdr--light .nav button{color:var(--ink-soft)}
.nav a:hover,.nav button:hover{color:var(--bone)}
.hdr.settled .nav a:hover,.hdr--light .nav a:hover{color:var(--ink)}
.nav .btn{padding:12px 24px;font-size:11px}
.nav a.btn--inverse{color:var(--indigo)}
.hdr.settled .nav a.btn,.hdr--light .nav a.btn{background:var(--indigo);color:var(--bone)}

/* products panel */
.hasmenu{position:relative}
.hasmenu>button{display:inline-flex;align-items:center;gap:7px}
.hasmenu svg{width:10px;height:10px;transition:transform .24s var(--ease)}
.hasmenu[data-open=true] svg{transform:rotate(180deg)}
.panel{position:absolute;top:calc(100% + 20px);left:50%;
  transform:translateX(-50%) translateY(-6px);width:610px;max-width:calc(100vw - 52px);
  background:var(--bone);border:1px solid var(--line);border-radius:3px;padding:14px;
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  box-shadow:0 18px 50px -28px rgba(23,26,56,.35)}
.hasmenu[data-open=true] .panel{opacity:1;visibility:visible;transform:translateX(-50%)}
.panel a{display:block;padding:15px 18px;border-radius:2px;color:var(--ink);
  transition:background .18s var(--ease)}
.panel a:hover{background:rgba(43,39,35,.045)}
.panel b{font-family:var(--f-display);font-size:19px;font-weight:500;display:block}
.panel span{font-size:13px;color:var(--ink-soft);display:block;margin-top:2px}
/* V8 · the door to the feature library, set apart from the four products so
   it reads as "and here is everything inside them" rather than a fifth product. */
.panel__more{margin-top:6px;padding-top:16px!important;border-top:1px solid var(--line)}
.panel__more b{font-size:16px;color:var(--brass)}
/* V9 · the flagship is named as the flagship in the one place every visitor
   opens first. Hierarchy stated once in the nav saves it being argued for
   three sections down the page. */
.panel__flag{background:rgba(168,135,79,.07)}
.panel__flag b::after{content:"Flagship";display:inline-block;margin-left:10px;
  font-family:var(--f-text);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--brass);vertical-align:middle;border:1px solid var(--brass);
  border-radius:2px;padding:2px 6px}

/* burger */
.burger{display:none;padding:8px;margin-right:-8px}
.burger i{display:block;width:22px;height:1.5px;background:var(--bone);transition:background .26s var(--ease)}
.burger i+i{margin-top:6px}
.hdr.settled .burger i,.hdr--light .burger i{background:var(--ink)}

@media (max-width:940px){
  .burger{display:block}
  .nav{position:fixed;inset:var(--nav-h) 0 0;background:var(--indigo-deep);
    flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;display:none;
    padding:32px var(--gutter) calc(32px + env(safe-area-inset-bottom))}
  body.navopen .nav{display:flex}
  body.navopen{overflow:hidden}
  .nav a,.nav button{color:var(--bone-88)!important;font-size:20px;padding:13px 0;text-align:left}
  .hasmenu{order:-1}
  .hasmenu>button{display:none}
  .panel{position:static;transform:none;width:auto;max-width:none;background:none;
    border:0;padding:0;opacity:1;visibility:visible;box-shadow:none;margin-bottom:6px}
  .panel a{padding:13px 0}
  .panel a:hover{background:none}
  .panel b{color:var(--bone-88);font-size:20px}
  .panel span{color:rgba(246,241,231,.46);font-size:13px}
  .panel__more{border-top-color:var(--line-light)}
  .panel__more b{font-size:17px;color:var(--brass)}
  .nav .btn{margin-top:26px;text-align:center;padding:18px 24px;font-size:12px;
    background:var(--bone)!important;color:var(--indigo)!important}
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;color:var(--bone);text-align:center;
  padding-block:calc(var(--nav-h) + 124px) 128px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__veil{position:absolute;inset:0;z-index:-3}
/* V13 · there is no longer an image under the hero, so the veil stops being a
   veil and becomes the ground itself. Everything the tints used to do to a
   photograph they now do to a flat field, which is why they still work. */
.hero__veil{background:linear-gradient(178deg,
    var(--indigo-deep) 0%, var(--indigo) 54%, var(--indigo-deep) 100%);z-index:-3}
.hero__bg{z-index:-2}

.hero h1{max-width:940px;margin:0 auto 32px}
.hero .sub{max-width:560px;margin:0 auto 44px;color:var(--bone-88)}
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:24px}
.hero__scroll{display:inline-block;margin-top:64px;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(246,241,231,.55)}
.hero__horizon{position:absolute;left:0;right:0;bottom:11%;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(168,135,79,.34) 26%,rgba(168,135,79,.34) 74%,transparent)}
@media (max-width:760px){
  .hero{padding-block:calc(var(--nav-h) + 76px) 92px}
  .hero__bg img{object-position:center 46%}
}

/* accent tint per product page */
.tint-mirror .hero__veil{background:linear-gradient(178deg,var(--indigo-deep),#2C2856 66%,var(--indigo-deep))}
.tint-creatoros .hero__veil{background:linear-gradient(178deg,var(--indigo-deep),#243449 66%,var(--indigo-deep))}
.tint-executive .hero__veil{background:linear-gradient(178deg,var(--indigo-deep),#2B2848 66%,var(--indigo-deep))}
.tint-enterprise .hero__veil{background:linear-gradient(178deg,var(--indigo-deep),#242A56 66%,var(--indigo-deep))}

/* ── STRIP ──────────────────────────────────────────────────────────────── */
.strip .lead{max-width:860px;margin:0 auto 40px}
.prodrow{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 34px;margin-bottom:32px}
.prodrow a{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid var(--brass);padding-bottom:4px}
@media (max-width:540px){.prodrow{gap:14px 24px}.prodrow a{font-size:12px}}

/* ── EPIGRAPH ───────────────────────────────────────────────────────────── */
.epigraph blockquote{max-width:790px;margin-inline:auto}

/* ── COLUMNS ────────────────────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:.86fr 1.14fr;gap:70px;align-items:start}
.two--even{grid-template-columns:1fr 1fr;gap:0}
.two--even>*{padding-inline:56px}
.two--even>*:first-child{padding-left:0;border-right:1px solid var(--line)}
.two--even>*:last-child{padding-right:0}
@media (max-width:860px){
  .two,.two--even{grid-template-columns:1fr;gap:44px}
  .two--even>*{padding-inline:0}
  .two--even>*:first-child{border-right:0;border-bottom:1px solid var(--line);padding-bottom:44px}
  .two--flip>*:first-child{order:2}
  .two--flip>*:last-child{order:1}
}

/* ── CARD GRID — one object divided ─────────────────────────────────────── */
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:62px}
.cell{background:var(--warm);padding:54px;transition:transform .24s var(--ease)}
.g-bone .cell{background:var(--bone)}
.cell:hover{transform:translateY(-2px)}
.cell__rule{width:40px;height:2px;background:var(--brass);margin-bottom:26px;
  transition:width .24s var(--ease)}
.cell:hover .cell__rule{width:74px}
.cell .cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
  font-weight:600;display:block;margin-bottom:12px}
.cell h3{font-size:27px;margin-bottom:16px}
.cell p{font-size:16px;line-height:1.75;color:var(--ink-soft)}
.cell .posture{display:block;margin:26px 0 20px;font-size:14px;color:var(--ink);
  padding-top:20px;border-top:1px solid var(--line)}
.a-mirror .cell__rule{background:var(--a-mirror)}
.a-creatoros .cell__rule{background:var(--a-creatoros)}
.a-executive .cell__rule{background:var(--a-executive)}
.a-enterprise .cell__rule{background:var(--a-enterprise)}
@media (max-width:860px){.grid4{grid-template-columns:1fr;margin-top:44px}.cell{padding:42px 28px}}

/* ── STEPS ──────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:54px;margin-top:60px}
.step .num{font-size:11px;letter-spacing:.26em;color:var(--brass);font-weight:600;
  display:block;margin-bottom:18px}
.step h3{font-size:24px;margin-bottom:13px}
.step p{font-size:16px;line-height:1.75;color:var(--ink-soft)}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:0;border-left:1px solid var(--line);padding-left:28px;margin-top:44px}
  .step{padding-block:28px}
}

/* ── NEVER GRID ─────────────────────────────────────────────────────────── */
.nevers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-light);border:1px solid var(--line-light);margin-top:60px}
.never{background:var(--indigo-deep);padding:42px 34px}
.never strong{font-family:var(--f-display);font-weight:500;font-size:21px;display:block;text-wrap:balance;
  margin-bottom:13px;color:var(--bone)}
.never p{font-size:15px;line-height:1.7;color:var(--bone-72)}
@media (max-width:940px){.nevers{grid-template-columns:1fr 1fr}}
@media (max-width:660px){.nevers{grid-template-columns:1fr;margin-top:44px}}

/* ── PILLS ──────────────────────────────────────────────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:12px 13px;justify-content:center;
  max-width:830px;margin:42px auto}
.pills li{border:1px solid var(--line);border-radius:40px;padding:9px 21px;
  font-size:14px;background:var(--bone)}

/* ── PRICES ─────────────────────────────────────────────────────────────── */
.prices{margin-top:54px;border-top:1px solid var(--line)}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:26px;
  padding-block:25px;border-bottom:1px solid var(--line)}
.prow .nm{font-size:17px}
.prow .amt{font-family:var(--f-display);font-size:26px;font-weight:500;
  white-space:nowrap;text-align:right}
.prow .amt small{font-family:var(--f-text);font-size:13px;color:var(--ink-soft)}
.rules{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;
  margin-top:42px;font-size:13px;color:var(--ink-soft)}
@media (max-width:540px){
  .prow{flex-direction:column;align-items:flex-start;gap:5px}
  .prow .amt{text-align:left}
}

/* ── FIGURE / PHOTOGRAPHY ───────────────────────────────────────────────── */
.band{position:relative;overflow:hidden;margin-top:8px}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover}
.band--tall img{aspect-ratio:4/5}
figure{margin:0}
figcaption{font-size:12px;color:var(--ink-soft);margin-top:10px;letter-spacing:.02em}
.veil-soft{position:relative}
.veil-soft::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(246,241,231,.10),rgba(246,241,231,.34))}

/* ── CLOSE ──────────────────────────────────────────────────────────────── */
.close{position:relative;isolation:isolate;text-align:center;
  padding-block:var(--pad-moment) 108px;overflow:hidden}
.close__bg{display:none}
.close__bg picture{display:block;width:100%;height:100%}
.close__bg img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.close__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,26,56,.955),rgba(23,26,56,.925))}
.sig{font-family:var(--f-display);font-size:clamp(27px,4.2vw,43px);font-weight:500;
  line-height:1.35;margin-top:88px;color:var(--bone)}
.sig .welcome{display:block;margin-top:40px}
@media (max-width:760px){.sig{margin-top:62px}}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.ftr{background:var(--indigo-deep);color:var(--bone-72);
  padding-block:var(--pad-util) 42px;border-top:1px solid var(--line-light)}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:44px}
.ftr h5{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--brass);
  margin-bottom:19px;font-weight:600}
.ftr a{display:block;font-size:14px;margin-bottom:11px;color:var(--bone-72)}
.ftr a:hover{color:var(--bone)}
.ftr__brand{font-family:var(--f-display);font-size:18px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone);display:block;margin-bottom:17px}
.ftr .login{opacity:.6}
.legalbar{margin-top:54px;padding-top:25px;border-top:1px solid var(--line-light);
  font-size:12.5px;color:rgba(246,241,231,.62);display:flex;flex-wrap:wrap;
  gap:8px 18px;justify-content:space-between}
.fill{background:rgba(168,135,79,.16);padding:1px 5px;border-radius:2px}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr;gap:38px}}
@media (max-width:540px){.ftr__grid{grid-template-columns:1fr}}

/* ── MOTION ─────────────────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(12px);animation:rise .74s var(--ease) forwards}
.rise.d1{animation-delay:.11s}.rise.d2{animation-delay:.22s}.rise.d3{animation-delay:.34s}
@keyframes rise{to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .cell:hover,.btn:hover{transform:none!important}
}

/* ── FORM / EMBED SLOTS ─────────────────────────────────────────────────── */
.embed{border:1px dashed rgba(43,39,35,.26);background:var(--bone);
  padding:38px 30px;text-align:center;border-radius:3px}
.embed b{display:block;font-family:var(--f-display);font-size:19px;margin-bottom:8px}
.embed code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:rgba(43,39,35,.06);padding:2px 6px;border-radius:2px}

/* ── PRINT ──────────────────────────────────────────────────────────────── */
@media print{
  .hdr,.hero__bg,.close__bg,.hero__veil,.close__veil,.skip{display:none}
  body{background:none;color:var(--ink)}
  .g-dark,.hero,.close,.ftr{background:none!important;color:var(--ink)!important}
  .g-dark h1,.g-dark h2,.g-dark h3,.g-dark p,.g-dark li,
  .hero h1,.hero p,.close h2,.close p{color:var(--ink)!important}
  a{text-decoration:underline}
  .btn{border:1px solid var(--ink);background:none;color:var(--ink)}
}

/* ── ADDENDA · homepage components ──────────────────────────────────────── */
.hairline{width:40px;height:1px;background:var(--brass);margin:44px auto;opacity:.75}
.figwide img{aspect-ratio:16/10;object-fit:cover;width:100%}
.figwide{margin-bottom:34px}
/* V12b · a 16:10 letterbox on a 390px screen leaves a 244px strip. Photographs
   inside a figwide switch to 4:5 on mobile so the portrait crop underneath is
   actually shown instead of being cover-cropped back to a letterbox. */
@media (max-width:760px){
  .figwide picture img{aspect-ratio:4/5}
}
.softbg{position:relative;isolation:isolate;overflow:hidden}
.softbg__img{position:absolute;inset:0;z-index:-2}
.softbg__img picture{display:block;width:100%;height:100%}
.softbg__img img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.softbg__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(251,248,242,.965) 0%,rgba(251,248,242,.925) 50%,rgba(251,248,242,.975) 100%)}
.stories{padding-block:0}
.ftr__tag{font-size:13px;line-height:1.7;color:var(--bone-72);max-width:270px;margin-bottom:20px}
.ftr__addr{font-size:13px;line-height:1.75;color:rgba(246,241,231,.58);margin-top:18px}

/* ── TEMPORARY-ASSET AUDIT MODE · ?assets=audit ─────────────────────────── */
/* Off by default. Never ships enabled. Founder-hold visibility only. */
.tempflag{position:absolute;z-index:60;pointer-events:none;
  border:2px dashed rgba(168,135,79,.85);
  box-shadow:inset 0 0 0 9999px rgba(23,26,56,.16)}
.tempflag b{position:absolute;top:0;left:0;background:var(--brass);color:#171A38;
  font-family:var(--f-text);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 10px;white-space:nowrap}
.tempbar{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--brass);
  color:#171A38;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-align:center;padding:9px 16px}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES 2–11 · COMPONENTS
   Added after founder approval of the homepage direction, 2026-07-30.
   Nothing here overrides the homepage; every value inherits its tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LIGHT HERO · About · Pricing · Contact · legal ─────────────────────── */
.hero--light{background:var(--warm);color:var(--ink);text-align:left;
  padding-block:calc(var(--nav-h) + 104px) 96px}
.hero--light h1{max-width:900px;margin-inline:0}
.hero--light .sub{max-width:640px;margin:26px 0 0;color:var(--ink-soft)}
.hero--light .eyebrow{margin-bottom:22px}
@media (max-width:760px){.hero--light{padding-block:calc(var(--nav-h) + 62px) 64px}}

/* posture line under a dark hero CTA */
.posture{display:block;margin-top:24px;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);font-weight:600}

/* ── SEC-NUMBERED-LIST · About A4/A5 · Enterprise E3/E7 · Mirror M8 ─────── */
.numlist{margin-top:56px;border-top:1px solid var(--line)}
.numlist.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 62px}
.numitem{padding-block:26px;border-bottom:1px solid var(--line)}
.numitem .n{font-size:11px;letter-spacing:.26em;color:var(--brass);font-weight:600;
  display:block;margin-bottom:9px}
.numitem strong{font-family:var(--f-display);font-weight:500;font-size:20px;
  display:block;margin-bottom:7px;line-height:1.3}
.numitem p{font-size:16px;line-height:1.75;color:var(--ink-soft)}
.g-dark .numlist{border-top-color:var(--line-light)}
.g-dark .numitem{border-bottom-color:var(--line-light)}
@media (max-width:860px){.numlist.two-col{grid-template-columns:1fr;gap:0}}

/* ── SEC-LITANY-3COL · CreatorOS C3 ─────────────────────────────────────── */
.litany3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;margin-top:56px;
  max-width:840px;margin-inline:auto}
.litany3 li{font-family:var(--f-display);font-size:21px;line-height:2.1;
  border-bottom:1px solid var(--line)}
@media (max-width:760px){.litany3{grid-template-columns:1fr;margin-top:44px}}

/* ── CAPS · V8 · every capability with its one sentence ─────────────────────
   Replaces the bare three-column litany on /creatoros. A name on its own only
   works for someone who already knows the category; the sentence is what makes
   the list readable to a person deciding whether this replaces their stack.
   Names that have a feature page are links; the rest are plain, and both look
   the same until you hover, so the grid stays even. */
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin-top:56px;
  max-width:920px;margin-inline:auto;text-align:left}
.caps li{border-bottom:1px solid var(--line);padding:20px 0 18px}
.caps a{display:block;transition:opacity .2s var(--ease)}
.caps a:hover{opacity:.62}
.caps b{display:block;font-family:var(--f-display);font-size:20px;font-weight:500;
  line-height:1.3;color:var(--ink)}
.caps a b::after{content:" →";color:var(--brass);font-size:15px}
.caps span{display:block;font-size:15px;line-height:1.65;color:var(--ink-soft);margin-top:7px}
@media (max-width:760px){.caps{grid-template-columns:1fr;gap:0;margin-top:42px}}

/* ── VS · V8 · the cost comparison ─────────────────────────────────────────
   The dollar figures are presented as a typical example of a disconnected
   stack, never as a guaranteed saving. That framing is in the copy under the
   block and must stay there if the numbers ever change. */
.vs{display:grid;grid-template-columns:1fr 56px 1fr;align-items:stretch;
  gap:0;margin-top:56px;max-width:900px;margin-inline:auto;text-align:left}
.vs__col{border:1px solid var(--line);border-radius:3px;padding:34px 34px 32px;
  display:flex;flex-direction:column}
.vs__col--ours{border-color:var(--brass);background:rgba(168,135,79,.05)}
.vs__col h3{font-family:var(--f-display);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.vs__col--ours h3{color:var(--brass)}
.vs__col ul{margin-top:22px}
.vs__col li{font-size:16px;line-height:2.05;color:var(--ink);
  border-bottom:1px solid var(--line)}
.vs__all{font-family:var(--f-display);font-size:26px;line-height:1.35;margin-top:22px}
.vs__col--ours .small{margin-top:14px}
.vs__cost{margin-top:auto;padding-top:28px}
.vs__cost span{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600}
.vs__cost b{display:block;font-family:var(--f-display);font-size:34px;font-weight:500;
  margin-top:8px;line-height:1.1}
.vs__col--ours .vs__cost b{color:var(--brass)}
.vs__cost small{font-size:15px;letter-spacing:0}
.vs__col--ours .btn{margin-top:24px;align-self:flex-start}
.vs__arrow{display:flex;align-items:center;justify-content:center;color:var(--brass)}
.vs__arrow svg{width:22px;height:36px}
@media (max-width:820px){
  .vs{grid-template-columns:1fr;gap:0}
  .vs__arrow{padding:18px 0}
  .vs__arrow svg{width:20px;height:30px}
}

/* ── SWITCH · V8 · recognition, not testimonials ───────────────────────────
   These are written in the second person on purpose. They are the situations
   Symbiont OS was built to end, not quotes attributed to customers, and they
   must not be restyled as testimonials unless they become real ones. */
.switch{display:grid;gap:0;margin-top:50px;max-width:660px;margin-inline:auto;
  text-align:left;border-top:1px solid var(--line)}
.switch li{font-family:var(--f-display);font-size:22px;line-height:1.5;
  padding:22px 0 21px 34px;border-bottom:1px solid var(--line);position:relative}
.switch li::before{content:"";position:absolute;left:0;top:39px;width:16px;height:1px;
  background:var(--brass)}
@media (max-width:760px){
  .switch{margin-top:38px}
  .switch li{font-size:19px;padding-left:26px}
  .switch li::before{width:12px;top:36px}
}

/* ── SEC-COL-3 · Enterprise E2 · Contact K2 ─────────────────────────────── */
.col3{display:grid;grid-template-columns:repeat(3,1fr);gap:54px;margin-top:60px}
.col3 h3{font-size:23px;margin-bottom:14px}
.col3 p{font-size:16px;line-height:1.75;color:var(--ink-soft)}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:54px;margin-top:48px}
@media (max-width:860px){.col3,.col2{grid-template-columns:1fr;gap:40px}}

/* ── SEC-QUAD · Mirror M4 · Executive X4/X8 · Pricing P7 ────────────────── */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:58px}
.quad--3{grid-template-columns:repeat(3,1fr)}
.qcell{background:var(--warm);padding:46px}
.g-bone .qcell{background:var(--bone)}
.g-dark .quad{background:var(--line-light);border-color:var(--line-light)}
.g-dark .qcell{background:var(--indigo-deep)}
.qcell .n{font-size:11px;letter-spacing:.26em;color:var(--brass);font-weight:600;
  display:block;margin-bottom:12px}
.qcell strong{font-family:var(--f-display);font-weight:500;font-size:21px;display:block;
  margin-bottom:11px;text-wrap:balance}
.qcell p{font-size:16px;line-height:1.75;color:var(--ink-soft)}
.g-dark .qcell p{color:var(--bone-72)}
@media (max-width:860px){.quad,.quad--3{grid-template-columns:1fr;margin-top:44px}
  .qcell{padding:36px 28px}}

/* ── SEC-CARD-2 · CreatorOS C6 ──────────────────────────────────────────── */
.card2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:58px}
.c2cell{background:var(--warm);padding:50px;display:flex;flex-direction:column}
.g-bone .c2cell{background:var(--bone)}
.c2cell h3{font-size:24px;margin-bottom:16px;text-wrap:balance}
.c2cell p{font-size:16px;line-height:1.75;color:var(--ink-soft);flex:1}
.c2cell .btn,.c2cell .quiet{align-self:flex-start;margin-top:28px}
@media (max-width:860px){.card2{grid-template-columns:1fr;margin-top:44px}
  .c2cell{padding:38px 28px}}

/* ── SEC-BAND · CreatorOS C7 · Enterprise E8 ────────────────────────────── */
.callout{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:52px;text-align:center;margin-block:8px}
.callout p{font-family:var(--f-display);font-size:clamp(21px,2.6vw,27px);line-height:1.45;
  max-width:760px;margin-inline:auto}
.callout .quiet{margin-top:26px}

/* ── SEC-DEFN-LIST · Enterprise E6 ──────────────────────────────────────── */
.defn{margin-top:52px;border-top:1px solid var(--line)}
.defn>div{padding-block:22px;border-bottom:1px solid var(--line)}
.defn dt{font-family:var(--f-display);font-weight:500;font-size:19px;margin-bottom:6px}
.defn dd{font-size:16px;line-height:1.75;color:var(--ink-soft)}

/* ── SEC-PROSE-LG · Executive X2 · Pricing P8 · legal ───────────────────── */
.prose-lg{font-size:19px;line-height:1.85;max-width:var(--measure)}
.prose-lg p+p{margin-top:1.1em}

/* ── PRICE ROWS WITH BUTTONS · Mirror M9 · Pricing P2–P5 ────────────────── */
.rung{border-top:1px solid var(--line)}
.rung>div{display:grid;grid-template-columns:1fr auto;gap:12px 40px;align-items:start;
  padding-block:32px;border-bottom:1px solid var(--line)}
.rung .nm{font-family:var(--f-display);font-size:21px;font-weight:500;line-height:1.3}
.rung .desc{font-size:16px;line-height:1.75;color:var(--ink-soft);margin-top:8px;
  max-width:56ch;grid-column:1}
.rung .amt{font-family:var(--f-display);font-size:29px;font-weight:500;white-space:nowrap;
  text-align:right;grid-row:1;grid-column:2}
.rung .amt small{font-family:var(--f-text);font-size:13px;color:var(--ink-soft)}
.rung .act{grid-column:1/-1;margin-top:8px}
.rung .act .btn{padding:14px 30px}
@media (max-width:640px){
  .rung>div{grid-template-columns:1fr}
  .rung .amt{text-align:left;grid-row:auto;grid-column:1;margin-top:10px}
  .rung .act .btn{display:block;text-align:center}
}

/* ── ACCORDION · native <details>, no custom JS ─────────────────────────── */
.faq{margin-top:52px;border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--f-display);font-size:19px;font-weight:500;line-height:1.4;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:31px;width:11px;height:11px;
  border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:rotate(45deg);transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg);top:34px}
.faq summary:hover{color:var(--ink-soft)}
.faq .ans{padding:0 44px 26px 0;font-size:16px;line-height:1.8;color:var(--ink-soft);
  max-width:62ch}
.faq .ans a{border-bottom:1px solid var(--brass)}

/* ── FACT TABLE · About A6 · Contact K4 · Pricing P6 ────────────────────── */
.facts{margin-top:48px;border-top:1px solid var(--line);max-width:820px}
.facts>div{display:grid;grid-template-columns:220px 1fr;gap:10px 40px;
  padding-block:19px;border-bottom:1px solid var(--line)}
.facts dt{font-size:14px;letter-spacing:.02em;color:var(--ink-soft)}
.facts dd{font-size:16px;line-height:1.7}
@media (max-width:640px){.facts>div{grid-template-columns:1fr;gap:3px}}

/* ── FORM · Contact K3 · Start ──────────────────────────────────────────── */
.form{max-width:var(--measure);margin-top:46px}
.field{margin-bottom:24px}
.field label{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;font-family:var(--f-text);
  font-size:16px;line-height:1.6;color:var(--ink);background:var(--warm);
  border:1px solid var(--line);border-radius:2px;padding:14px 15px}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass);
  outline-offset:1px;border-color:transparent}
.consent{display:flex;gap:13px;align-items:flex-start;padding:18px 0;min-height:44px;
  cursor:pointer}
.consent input{width:19px;height:19px;flex:0 0 19px;margin-top:3px;accent-color:var(--indigo)}
.consent span{font-size:13px;line-height:1.7;color:var(--ink-soft)}
.after-submit{display:block;margin-top:18px;font-size:14px;color:var(--ink-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:18px 0 0;font-size:14px;line-height:1.7;max-width:52ch}
.form-status[data-state="error"]{color:#8C2F1E}
.form-status[data-state="ok"]{color:var(--ink-soft)}

/* ── LEGAL · Privacy · Terms · Refund ───────────────────────────────────── */
.legal{max-width:720px;font-size:17px;line-height:1.85}
.legal h2{font-size:24px;margin:56px 0 20px;line-height:1.3}
.legal h2:first-of-type{margin-top:0}
.legal p+p{margin-top:1.05em}
.legal a{border-bottom:1px solid var(--brass)}
.legal em{font-style:italic}
.updated{font-size:13px;color:var(--ink-soft);margin-bottom:48px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.legal-close{margin-top:64px;padding-top:28px;border-top:1px solid var(--line);
  font-size:16px;color:var(--ink-soft)}

/* ── SMALL PRINT / ILLUSTRATIVE NOTES ───────────────────────────────────── */
.illustrative{display:block;margin-top:30px;font-size:13px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--brass);font-weight:600;line-height:1.7}
.aside{margin-top:34px;font-size:13px;line-height:1.75;color:var(--ink-soft)}
.aside a{border-bottom:1px solid var(--brass)}

/* ── LIGHT-HERO PAGES: header ships settled, never transparent ──────────── */
.hdr--light{background:var(--bone);border-bottom-color:var(--line)}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL REFINEMENT PASS · 2026-07-30
   Founder direction: photography, logo, hierarchy, whitespace, typography,
   pacing, emotional impact. Architecture untouched — only the feeling.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PACING · more air, and more air around the moments than anywhere else ─ */
:root{--pad-moment:176px;--pad-section:140px;--pad-band:104px;--pad-util:84px}
@media (max-width:760px){
  :root{--pad-moment:104px;--pad-section:84px;--pad-band:66px;--pad-util:56px}
}

/* ── TYPOGRAPHY · tighter display, calmer small caps ──────────────────────── */
.h-hero{font-size:clamp(34px,5vw,62px);line-height:1.1;letter-spacing:-.019em;
  text-wrap:balance}
.h-display{font-size:clamp(30px,4vw,44px);line-height:1.13;letter-spacing:-.013em}
.h-3{font-size:25px;letter-spacing:-.006em}
.quote{letter-spacing:-.011em;line-height:1.38}
.lead{letter-spacing:-.008em}
.eyebrow{font-size:10.5px;letter-spacing:.235em;margin-bottom:30px}
.attrib{letter-spacing:.235em;margin-top:38px}
.prose-lg{font-size:19px;line-height:1.8;max-width:680px}
.body-lg,.sub{letter-spacing:.002em}
.litany.lg li{font-size:21px;line-height:1.66;margin-bottom:.36em}
.verbs li{font-size:23px;line-height:1.78}

/* h2 needs room to land before anything follows it */
.sec .h-display + .prose-lg,
.sec .h-display + .two,
.sec .h-display + .numlist{margin-top:44px}
.center .h-display + .small{margin-top:26px}

/* ── WHITESPACE · isolated leads carry the emotional weight ───────────────── */
.isolated{max-width:760px;margin:104px auto 0}
.isolated + .isolated{margin-top:64px}
.grid4{margin-top:74px}
.cell{padding:58px}
.quad,.card2{margin-top:70px}
.qcell{padding:52px}
.c2cell{padding:56px}
.steps{gap:62px;margin-top:70px}
.numlist{margin-top:62px}
.numitem{padding-block:29px}
.pills{gap:13px 14px;margin:50px auto 46px}
.pills li{padding:10px 23px}
.faq{margin-top:60px}
.rung>div{padding-block:36px}
.prices{margin-top:62px}

/* ── BUTTONS · a little more presence, a little less shout ────────────────── */
.btn{padding:18px 40px;letter-spacing:.175em;font-size:12px}
.nav .btn{padding:13px 26px;letter-spacing:.16em}
.quiet{font-size:15px;letter-spacing:.005em}

/* ── DARK GROUNDS · depth, so indigo reads as a material not a fill ───────── */
.g-dark,.close,.ftr{position:relative}
.g-dark::before,.close::before{content:'';position:absolute;inset:0;z-index:0;
  background:url('../assets/img/texture-bone.webp?v=7') repeat;background-size:300px;
  opacity:.045;mix-blend-mode:screen;pointer-events:none}
.g-dark > *,.close > .wrap{position:relative;z-index:1}
.close__bg,.close__veil{z-index:auto}

/* ── HERO · a held breath before the first sentence ───────────────────────── */
.hero{padding-block:calc(var(--nav-h) + 150px) 146px}
.hero h1{max-width:960px;margin-bottom:34px}
.hero .sub{max-width:590px;margin-bottom:52px}
.hero__cta{gap:26px}
.hero__scroll{margin-top:76px}
/* a soft vignette so the eye goes to the words, not the corners */
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 78% 62% at 50% 46%,transparent 38%,rgba(15,17,38,.42) 100%)}
.close::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 76% 64% at 50% 44%,transparent 40%,rgba(15,17,38,.40) 100%)}
@media (max-width:760px){.hero{padding-block:calc(var(--nav-h) + 88px) 100px}}

.hero--light{padding-block:calc(var(--nav-h) + 118px) 106px}
.hero--light .sub{margin-top:30px}
@media (max-width:760px){.hero--light{padding-block:calc(var(--nav-h) + 68px) 70px}}

/* ── THE LOCKUP IN THE HEADER ─────────────────────────────────────────────── */
/* V8 · the mark carries ~17% more weight and sits closer to the word, so the
   two read as one lockup rather than an icon next to a label. Header height
   (--nav-h, 76px desktop / 64px mobile) is untouched: the mark grows inside
   the space that was already there, so nothing in the nav moves. */
.brand{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:600;
  letter-spacing:.15em}
.brand svg{width:27px;height:27px;flex:0 0 27px;display:block}
.brand svg .fill{fill:currentColor}
.brand svg .line{fill:none;stroke:currentColor;stroke-width:6.8;stroke-linecap:round}
@media (max-width:900px){
  .brand{font-size:17px;letter-spacing:.11em;gap:9px}
  .brand svg{width:23px;height:23px;flex:0 0 23px}
}
.ftr__brand{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:600;
  letter-spacing:.135em;margin-bottom:22px}
.ftr__brand svg{width:24px;height:24px;flex:0 0 24px}
.ftr__brand svg .fill{fill:currentColor}
.ftr__brand svg .line{fill:none;stroke:currentColor;stroke-width:6.8;stroke-linecap:round}

/* ── FIGURES · photographs given room and a hairline of intent ────────────── */
figure{margin:0}
.figwide{margin-bottom:38px}
.band{margin-top:0}
figcaption{font-size:12px;letter-spacing:.03em;color:var(--ink-soft);margin-top:14px}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 32%}
.portrait{position:relative}
.portrait::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(43,39,35,.10)}

/* ── FOOTER · air, and a quieter legal bar ────────────────────────────────── */
.ftr__grid{gap:52px}
.ftr a{margin-bottom:13px}
.legalbar{margin-top:64px;padding-top:28px}

/* ── THE FOUNDER · a portrait carries a page, so give it the room ────────── */
.founder{display:grid;grid-template-columns:.94fr 1.06fr;gap:78px;align-items:center;
  margin-top:64px}
.founder .portrait{max-width:440px}
.founder .portrait img{aspect-ratio:4/5;object-fit:cover;object-position:center 26%}
.founder .prose{font-size:18px;line-height:1.85}
.founder .prose p+p{margin-top:1.15em}
@media (max-width:900px){
  .founder{grid-template-columns:1fr;gap:44px;margin-top:44px}
  .founder .portrait{max-width:none}
}

/* ── MOBILE CORRECTIONS · the refinement pass must not outrank the breakpoints ─ */
@media (max-width:860px){
  .cell{padding:42px 28px}
  .qcell{padding:36px 26px}
  .c2cell{padding:38px 26px}
  .grid4,.quad,.card2{margin-top:46px}
  .steps,.steps--4{grid-template-columns:1fr;gap:0;margin-top:46px}
  .founder{margin-top:40px}
}
@media (max-width:400px){
  .cell,.qcell,.c2cell{padding:32px 22px}
}
/* four-step variant (Creator Mirror M5) — two columns, one below 860 */
.steps--4{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.steps--4{grid-template-columns:1fr}}

/* ── STRUCTURAL INTERFACE DIAGRAMS (V2) ─────────────────────────────────────
   Honest product diagrams: real structure, real capability names, no invented
   metrics or client data. Built from the same tokens as the rest of the site,
   so they read as part of the design rather than a screenshot pasted in. */
.uifig{margin:0;width:100%}
.uifig svg{width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:6px;background:var(--warm);
  box-shadow:0 1px 2px rgba(43,39,35,.03),0 10px 34px -18px rgba(43,39,35,.22)}
.uifig figcaption{margin-top:14px;font-size:13.5px;line-height:1.6;
  color:var(--ink-soft);letter-spacing:.01em}

.uifig .ui-frame{fill:var(--warm);stroke:var(--line);stroke-width:1}
.uifig .ui-screen{fill:var(--bone);stroke:var(--line);stroke-width:1}
.uifig .ui-panel{fill:var(--bone);stroke:var(--line);stroke-width:1}
.uifig .ui-doc{fill:var(--bone);stroke:var(--line);stroke-width:1}
.uifig .ui-active{fill:rgba(168,135,79,.10);stroke:none}
.uifig .ui-bubble{fill:var(--warm);stroke:var(--line);stroke-width:1}
.uifig .ui-bubble-accent{fill:var(--indigo);stroke:none}
.uifig .ui-node{fill:var(--bone);stroke:var(--line);stroke-width:1}
.uifig .ui-node-accent{fill:var(--warm);stroke:var(--brass);stroke-width:1.2}
.uifig .ui-rule{stroke:var(--line);stroke-width:1}
.uifig .ui-accent-rule{stroke:var(--brass);stroke-width:1.4}
.uifig .ui-soft{fill:rgba(43,39,35,.15)}
.uifig .ui-soft-on{fill:rgba(246,241,231,.55)}
.uifig .ui-accent{fill:var(--brass)}
.uifig .ui-accent-c{fill:var(--brass)}
.uifig .ui-dot{fill:rgba(43,39,35,.18)}
.uifig .ui-avatar{fill:rgba(43,39,35,.12)}
.uifig .ui-ring{fill:none;stroke:var(--brass);stroke-width:1.4}
.uifig .ui-hub{fill:var(--indigo);stroke:none}
.uifig .ui-node-c{fill:var(--warm);stroke:var(--brass);stroke-width:1.3}
.uifig .ui-link{stroke:var(--line);stroke-width:1}
.uifig .ui-flow{stroke:var(--line);stroke-width:1.2;fill:none}
.uifig .ui-trend{stroke:var(--brass);stroke-width:1.6;fill:none;
  stroke-linejoin:round;stroke-linecap:round}

.uifig text{font-family:var(--f-text);fill:var(--ink-soft)}
.uifig .ui-title{font-size:11px;font-weight:500;fill:var(--ink-soft);letter-spacing:.02em}
.uifig .ui-h{font-family:var(--f-display);font-size:15px;fill:var(--ink)}
.uifig .ui-doc-h{font-family:var(--f-display);font-size:19px;fill:var(--ink)}
.uifig .ui-t{font-size:11px}
.uifig .ui-t-strong{font-size:11.5px;font-weight:500;fill:var(--ink)}
.uifig .ui-t-on{font-size:11px;font-weight:500;fill:var(--bone)}
.uifig .ui-kicker{font-size:8.5px;font-weight:600;letter-spacing:.14em;fill:var(--brass)}

/* Dark-section variant — same diagram, inverted ground. */
.uifig--dark svg{background:var(--indigo-deep);border-color:var(--line-light);
  box-shadow:0 18px 50px -26px rgba(0,0,0,.65)}
.uifig--dark figcaption{color:var(--bone-72)}
.uifig--dark .ui-frame{fill:var(--indigo-deep);stroke:var(--line-light)}
.uifig--dark .ui-screen,
.uifig--dark .ui-panel,
.uifig--dark .ui-doc,
.uifig--dark .ui-node,
.uifig--dark .ui-bubble{fill:rgba(246,241,231,.05);stroke:var(--line-light)}
.uifig--dark .ui-node-accent{fill:rgba(168,135,79,.10);stroke:var(--brass)}
.uifig--dark .ui-bubble-accent{fill:var(--brass)}
.uifig--dark .ui-rule,
.uifig--dark .ui-link,
.uifig--dark .ui-flow{stroke:var(--line-light)}
.uifig--dark .ui-soft{fill:rgba(246,241,231,.20)}
.uifig--dark .ui-dot,
.uifig--dark .ui-avatar{fill:rgba(246,241,231,.22)}
.uifig--dark .ui-hub{fill:var(--brass)}
.uifig--dark .ui-node-c{fill:var(--indigo-deep);stroke:var(--brass)}
.uifig--dark .ui-active{fill:rgba(168,135,79,.16)}
.uifig--dark text{fill:var(--bone-72)}
.uifig--dark .ui-h,
.uifig--dark .ui-doc-h,
.uifig--dark .ui-t-strong{fill:var(--bone)}
.uifig--dark .ui-t-on{fill:var(--indigo-deep)}

/* Figure beside prose. */
.figrow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  margin-top:44px}
.figrow--narrow{grid-template-columns:1.05fr .95fr}
@media (max-width:860px){.figrow,.figrow--narrow{grid-template-columns:1fr;gap:34px}}
.uifig--mobile svg{max-width:290px;margin:0 auto}

/* Hero capability proof-row (V2) — what Symbiont OS replaces, above the fold. */
.hero__proof{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;
  margin:26px auto 0;max-width:668px}
.hero__proof li{font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:500;color:var(--bone-88);border:1px solid var(--line-light);
  border-radius:2px;padding:6px 11px;line-height:1}
@media (max-width:760px){
  .hero__proof{gap:7px 8px;margin-top:22px;max-width:330px}
  .hero__proof li{font-size:10.5px;letter-spacing:.09em;padding:5px 8px}
}

/* Capability grid (V2) — concrete "what it does" tiles. */
.cap7{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:38px 44px}
.cap7 h3{font-size:20px;line-height:1.3}
.cap7 .small{margin-top:10px}
@media (max-width:760px){.cap7{gap:30px}}

/* Hero product ladder (V3) — four products, four outcomes, above the fold. */
.hero__ladder{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;
  margin:30px auto 0;max-width:820px}
.hero__ladder li{font-size:13.5px;line-height:1.5;color:var(--bone-72);
  white-space:nowrap}
.hero__ladder b{font-weight:500;color:var(--bone)}
@media (max-width:860px){
  .hero__ladder{gap:4px 18px;max-width:340px}
  .hero__ladder li{font-size:12.5px;white-space:normal}
}

/* ── V3 hero rhythm: fit the four-product ladder above the fold ──────────── */
.hero{padding-block:calc(var(--nav-h) + 96px) 104px}
.hero__cta{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px 28px;
  margin-top:30px}
.hero__proof{margin-top:22px}
.hero__ladder{margin-top:26px}
@media (min-width:1100px){
  .hero{padding-block:calc(var(--nav-h) + 104px) 112px}
}
@media (max-width:860px){
  .hero{padding-block:calc(var(--nav-h) + 52px) 64px}
  .hero__cta{flex-direction:column;gap:18px;margin-top:24px}
  .hero__proof{margin-top:18px}
  .hero__ladder{margin-top:20px}
  .hero .sub{font-size:16.5px}
}

/* Constellation diagram (V4) — abstract topology, not an interface. */
.uifig--plain svg{border:0;background:transparent;box-shadow:none}
.uifig .ui-field{fill:rgba(43,39,35,.13)}
.uifig .ui-arc{fill:none;stroke:var(--line);stroke-width:1}
.uifig .ui-star{fill:var(--brass)}
.uifig .ui-star-halo{fill:none;stroke:var(--brass);stroke-width:1;opacity:.34}

/* Canon product row (V5) — the four-verb hierarchy, same wording as the nav. */
.prodrow--canon{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px}
.prodrow--canon li{text-align:center}
.prodrow--canon b{display:block;font-family:var(--f-display);font-weight:500;
  font-size:18px;line-height:1.3}
.prodrow--canon span{display:block;margin-top:3px;font-size:13px;
  color:var(--ink-soft);letter-spacing:.01em}
@media (max-width:600px){.prodrow--canon{gap:16px 26px}}

/* Reflection: pattern statements + human-review request (V7). */
.checkset,.humanbox{border:0;padding:0;margin-top:34px}
.checkset legend,.humanbox legend{font-size:15px;font-weight:500;color:var(--ink);
  padding:0;margin-bottom:6px;line-height:1.5}
.checkset .note,.humanbox .note{margin-bottom:14px}
.checkrow{display:flex;align-items:flex-start;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.checkrow:first-of-type{border-top:1px solid var(--line)}
.checkrow input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--indigo)}
.checkrow span{font-size:16px;line-height:1.6}
.checkrow:hover span{color:var(--ink)}
.humanbox{background:var(--bone);border:1px solid var(--line);border-radius:4px;
  padding:24px 26px;margin-top:38px}
.humanbox legend{padding:0 8px;margin-left:-8px;background:var(--bone)}

/* Two-path hero CTA (V7): explore the product, or talk to a person. */
.hero__cta--two{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.hero__cta--two .btn{display:inline-flex;flex-direction:column;align-items:center;
  gap:5px;padding:15px 30px;line-height:1.2;text-align:center}
.hero__cta--two .btn small{font-size:10.5px;letter-spacing:.06em;text-transform:none;
  font-weight:400;opacity:.72}
.btn--ghost-on-dark{background:transparent;color:var(--bone);
  border:1px solid var(--line-light)}
.btn--ghost-on-dark:hover{background:rgba(246,241,231,.08);transform:none}
@media (max-width:600px){
  .hero__cta--two{flex-direction:column;align-items:stretch;gap:11px}
  .hero__cta--two .btn{width:100%}
}

/* ── FLAGSHIP CELL · V9 ─────────────────────────────────────────────────────
   Four equal cards told the visitor there are four products to choose between.
   There is one product and three things built on it, so the first card is
   given weight the other three do not have. */
.cell--flagship{position:relative;background:rgba(168,135,79,.055)}
.cell--flagship .cell__rule{background:var(--brass);height:2px}
.flagtag{display:inline-block;margin-bottom:12px;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--brass);
  border:1px solid var(--brass);border-radius:2px;padding:3px 8px}
.cell--flagship h3{color:var(--ink)}

/* ── THE FEATURE LIBRARY · V8 ───────────────────────────────────────────────
   One page per capability: three short headings, one diagram, one benefit,
   one button. The aside is sticky on desktop so the benefit and the button
   stay with the reader the whole way down the explanation. */
.feat{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
.feat__body h2{margin-top:44px}
.feat__body h2:first-child{margin-top:0}
.feat__body p{font-size:17px;line-height:1.82;color:var(--ink-soft);margin-top:16px;
  max-width:62ch}
.feat__aside{position:sticky;top:calc(var(--nav-h) + 28px);border:1px solid var(--brass);
  border-radius:3px;background:rgba(168,135,79,.05);padding:30px 30px 32px}
.feat__benefit{font-family:var(--f-display);font-size:23px;line-height:1.42;
  margin:16px 0 26px}
.feat__quiet{margin-top:20px}
@media (max-width:900px){
  .feat{grid-template-columns:1fr;gap:44px}
  .feat__aside{position:static}
  .feat__body h2{margin-top:36px}
}

.featgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px}
.featcard{display:block;border:1px solid var(--line);border-radius:3px;
  padding:28px 30px 26px;background:var(--bone);
  transition:border-color .22s var(--ease),transform .22s var(--ease)}
.featcard:hover{border-color:var(--brass);transform:translateY(-2px)}
.featcard b{display:block;font-family:var(--f-display);font-size:23px;font-weight:500;
  line-height:1.25;color:var(--ink)}
.featcard span{display:block;font-size:15px;line-height:1.66;color:var(--ink-soft);
  margin-top:10px}
.featcard em{display:block;font-style:normal;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--brass);margin-top:18px}
@media (max-width:760px){.featgrid{grid-template-columns:1fr;margin-top:40px}}

.featnext{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin-top:38px}
.featnext a{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.featnext a:hover{color:var(--ink);border-bottom-color:var(--brass)}

/* ═══════════════════════════════════════════════════════════════════════════
   GUIDED IMPLEMENTATION · acquisition funnel
   New components only. Nothing above this line was changed for the funnel, so
   the rest of the site cannot regress from anything here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── /guided-implementation · the five inclusions ─────────────────────────────────────────── */
.gigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:58px;
  background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.gicard{background:var(--bone);padding:38px 34px 34px;position:relative}
.gicard__n{display:block;font-family:var(--f-display);font-size:13px;letter-spacing:.2em;
  color:var(--brass);margin-bottom:16px}
.gicard h3{font-family:var(--f-display);font-size:23px;font-weight:500;line-height:1.25;
  color:var(--ink)}
.gicard p{font-size:15.5px;line-height:1.72;color:var(--ink-soft);margin-top:13px}
/* the last two cards span the remaining width rather than leaving a hole */
.gigrid .gicard:nth-child(4){grid-column:span 2}
@media (max-width:980px){
  .gigrid{grid-template-columns:repeat(2,1fr)}
  .gigrid .gicard:nth-child(4){grid-column:auto}
  .gigrid .gicard:nth-child(5){grid-column:span 2}
}
@media (max-width:640px){
  .gigrid{grid-template-columns:1fr;margin-top:44px}
  .gigrid .gicard:nth-child(n){grid-column:auto}
  .gicard{padding:30px 26px 28px}
}

/* ── /guided-implementation · the price block ─────────────────────────────────────────────── */
.giprice{margin-top:48px;border:1px solid var(--brass);border-radius:4px;
  background:rgba(168,135,79,.05);overflow:hidden;text-align:left}
.giprice__main{padding:38px 36px 32px;border-bottom:1px solid var(--line);text-align:center}
.giprice__amt{display:block;font-family:var(--f-display);font-size:60px;font-weight:500;
  line-height:1;color:var(--brass)}
.giprice__amt small{font-size:20px;letter-spacing:0;color:var(--ink-soft)}
.giprice__note{display:block;margin-top:14px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.giprice__rows{padding:8px 36px 30px}
.giprice__rows>div{display:flex;justify-content:space-between;gap:24px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.giprice__rows>div:last-child{border-bottom:0}
.giprice__rows dt{font-size:15.5px;color:var(--ink)}
.giprice__rows dd{font-size:15.5px;color:var(--ink-soft);text-align:right}
@media (max-width:600px){
  .giprice__amt{font-size:46px}
  .giprice__main{padding:30px 22px 26px}
  .giprice__rows{padding:6px 22px 24px}
  .giprice__rows>div{flex-direction:column;gap:4px}
  .giprice__rows dd{text-align:left}
}

/* six steps wrap to two rows instead of squeezing into one */
.steps--six{grid-template-columns:repeat(3,1fr);row-gap:52px}
@media (max-width:900px){.steps--six{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.steps--six{grid-template-columns:1fr}}

/* ── /consultation · the calendar well ────────────────────────────────────── */
.calwrap{border:1px solid var(--line);border-radius:4px;background:var(--bone);
  overflow:hidden}
.calwrap--pending{padding:64px 32px;text-align:center;background:rgba(168,135,79,.05);
  border-color:var(--brass)}
@media (max-width:600px){.calwrap--pending{padding:44px 22px}}

/* ── the offer notice, wherever it appears ────────────────────────────────── */
.giband{display:block;border:1px solid var(--brass);border-radius:3px;
  background:rgba(168,135,79,.07);padding:26px 30px;
  transition:background .2s var(--ease)}
.giband:hover{background:rgba(168,135,79,.12)}
.giband b{display:block;font-family:var(--f-display);font-size:21px;font-weight:500;
  color:var(--ink)}
.giband span{display:block;font-size:15px;line-height:1.65;color:var(--ink-soft);margin-top:7px}
.giband em{display:block;font-style:normal;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--brass);margin-bottom:12px}
.panel__gi{background:rgba(168,135,79,.12)!important}
.panel__gi b{color:var(--brass)}

/* ── /founder · the dashboard ─────────────────────────────────────────────── */
.dashgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.dashcell{border:1px solid var(--line);border-radius:3px;background:var(--bone);
  padding:26px 26px 24px}
.dashcell b{display:block;font-family:var(--f-display);font-size:44px;font-weight:500;
  line-height:1;color:var(--ink)}
.dashcell span{display:block;margin-top:12px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.dashcell--hot{border-color:var(--brass);background:rgba(168,135,79,.06)}
.dashcell--hot b{color:var(--brass)}
@media (max-width:860px){.dashgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.dashgrid{grid-template-columns:1fr}}

.dashtable{margin-top:44px;border-top:1px solid var(--line)}
.dashrow{display:grid;grid-template-columns:1.4fr 1.6fr 1fr auto;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.dashrow b{font-weight:500;color:var(--ink)}
.dashrow span{color:var(--ink-soft)}
.dashrow em{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--brass);white-space:nowrap}
@media (max-width:760px){
  .dashrow{grid-template-columns:1fr;gap:4px;padding:18px 0}
}

/* ── SYMBIOSIS STRIP · V12 ──────────────────────────────────────────────────
   Three photographs with real captions. The first is wide because it carries
   the idea; the other two sit beside each other as evidence for it. */
.natgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin-top:56px}
.natgrid figure:first-child{grid-column:1 / -1}
.natgrid img{width:100%;height:auto;display:block;border-radius:3px;
  border:1px solid var(--line)}
.natgrid figcaption{font-size:15px;line-height:1.68;color:var(--ink-soft);margin-top:14px}
.natgrid figcaption b{display:block;font-family:var(--f-display);font-size:18px;
  font-weight:500;color:var(--ink);margin-bottom:5px}
@media (max-width:760px){
  .natgrid{grid-template-columns:1fr;gap:38px;margin-top:42px}
  .natgrid figure:first-child{grid-column:auto}
}


/* ══ V13 · INVISIBLE INTELLIGENCE ═══════════════════════════════════════
   A generated plate sits behind every page — mycelium, delta, venation,
   roots, neural, spiral, cells, contours, flow — one motif per page, never
   the same drawing twice on a single page.

   Two numbers govern the entire visual language, and they are the only two
   numbers to touch if it ever wants to be quieter or louder. Everything else
   about a plate — line weight, density, where it thins out — is decided when
   it is grown, not here.

   The layer thins while the page is being scrolled and returns a beat after
   it stops. That is the whole behaviour: it should never compete with a
   sentence, and it should be waiting when the reader looks up. ═══════════ */
:root{--weave:.09; --weave-ink:.055; --weave-read:.4}

.weave{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.weave img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:var(--weave);transition:opacity 1500ms var(--ease)}
.weave--ink img{opacity:var(--weave-ink)}
html.reading .weave img{opacity:calc(var(--weave) * var(--weave-read))}
html.reading .weave--ink img{opacity:calc(var(--weave-ink) * var(--weave-read))}
.weave-host{position:relative;isolation:isolate}
.weave-host > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.weave img{transition:none}}
@media print{.weave{display:none}}

/* On a phone the plate is cropped to a slice of itself, which reads as noise
   rather than structure. Scale it back so the whole drawing is in frame. */
@media (max-width:760px){
  :root{--weave:.075; --weave-ink:.05}
  .weave img{object-fit:contain;object-position:center}
}

/* ── figure plates ─────────────────────────────────────────────────────
   Not background. These carry captions and make an argument, so they sit on
   their own indigo card and are drawn at strength — an engraving, not a
   watermark. The 5-10% rule governs what sits BEHIND type, not this. */
.plate{position:relative;overflow:hidden;border-radius:3px;
  background:linear-gradient(158deg,var(--indigo-deep),var(--indigo) 62%,#1B1E42);
  border:1px solid rgba(168,135,79,.22)}
.plate img{width:100%;height:100%;object-fit:cover;display:block;opacity:.62}
.plate::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 30%,transparent 40%,rgba(15,17,38,.5) 100%)}
.natgrid .plate{aspect-ratio:3/2}
.figwide .plate{aspect-ratio:16/9}
.plate--band{aspect-ratio:7/3}
@media (max-width:760px){.plate--band{aspect-ratio:3/2}}
@media (max-width:760px){.natgrid .plate{aspect-ratio:4/5}}

/* the homepage's soft band now sits on line work instead of a photograph */
.softbg__veil{background:linear-gradient(180deg,rgba(251,248,242,.94) 0%,
  rgba(251,248,242,.90) 50%,rgba(251,248,242,.95) 100%)}
.softbg__img img{opacity:var(--weave-ink)}

/* The closing CTA carried a photograph under a veil. With the photograph gone
   the veil was simply painting over the weave, so the section takes the same
   treatment as a hero: its own ground, the plate above it, type above that. */
.close{background:linear-gradient(178deg,var(--indigo-deep) 0%,var(--indigo) 56%,var(--indigo-deep) 100%)}
.close__veil{display:none}
.close .weave{z-index:-2}

/* ══ CREATOR MIRROR · ONBOARDING ════════════════════════════════════════
   The fifteen minutes after somebody pays. Warm ground, one thing on the
   screen at a time, and touch targets big enough to answer on a phone while
   walking. Deliberately no dashboard chrome: no sidebar, no tabs, no cards
   full of settings. It should feel like a conversation, not an account. */
.ob-shell{background:var(--warm);color:var(--ink);
  padding-block:calc(var(--nav-h) + 54px) 110px;min-height:72vh;
  position:relative;isolation:isolate}
.wrap--narrow{max-width:620px}

.ob-eyebrow{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);font-weight:600;margin-bottom:20px}

.ob-progress{display:flex;gap:7px;margin-bottom:44px}
.ob-progress i{height:2px;flex:1;background:rgba(43,39,35,.12);border-radius:2px;
  transition:background 600ms var(--ease)}
.ob-progress i[data-state="done"]{background:rgba(168,135,79,.55)}
.ob-progress i[data-state="now"]{background:var(--brass)}

.ob-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

#ob fieldset{border:0;padding:0;margin:0;min-inline-size:0}
#ob fieldset[hidden]{display:none}

.ob-h{font-family:var(--f-display);font-weight:500;line-height:1.2;
  font-size:clamp(30px,5.2vw,40px);margin:0 0 20px}
.ob-h:focus{outline:none}
.ob-lead{font-size:17px;line-height:1.75;color:var(--ink-soft);margin:0 0 30px;
  max-width:54ch}
.ob-lead+.ob-lead{margin-top:-14px}

.ob-what{list-style:none;margin:0 0 34px;padding:0;
  border-top:1px solid var(--line)}
.ob-what li{padding:19px 0;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.72;color:var(--ink-soft)}
.ob-what b{display:block;font-family:var(--f-display);font-size:18.5px;
  font-weight:500;color:var(--ink);margin-bottom:5px}

/* ── questions ──────────────────────────────────────────────────────── */
.ob-q{margin-bottom:34px}
.ob-q label{display:block;font-family:var(--f-display);font-size:20px;
  font-weight:500;line-height:1.35;color:var(--ink)}
.ob-q__n{display:inline-block;min-width:26px;color:var(--brass);
  font-family:var(--f-text);font-size:12px;font-weight:600;letter-spacing:.16em;
  vertical-align:2px}
.ob-hint{font-size:14px;line-height:1.65;color:var(--ink-soft);
  margin:7px 0 12px 26px}

.ob-voice{position:relative}
.ob-voice textarea{width:100%;font-family:var(--f-text);font-size:17px;
  line-height:1.7;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:3px;padding:15px 15px 15px;resize:none;overflow:hidden;
  transition:border-color 200ms}
[data-voice="on"] .ob-voice textarea{padding-bottom:56px}
.ob-voice textarea:focus{outline:2px solid var(--brass);outline-offset:1px;
  border-color:transparent}

.ob-mic{position:absolute;left:11px;bottom:11px;display:inline-flex;
  align-items:center;gap:7px;min-height:34px;padding:0 13px 0 10px;
  font-family:var(--f-text);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);background:var(--warm);
  border:1px solid var(--line);border-radius:20px;cursor:pointer;
  transition:all 220ms var(--ease)}
.ob-mic svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round}
.ob-mic:hover{border-color:var(--brass);color:var(--ink)}
.ob-mic[data-on="true"]{background:var(--indigo);border-color:var(--indigo);
  color:var(--bone)}
/* a slow pulse, so it is obvious the microphone is live without being loud */
.ob-mic[data-on="true"] svg{animation:ob-pulse 1.6s ease-in-out infinite}
@keyframes ob-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ob-mic[data-on="true"] svg{animation:none}}

.ob-interim{margin:9px 0 0;font-size:14.5px;line-height:1.6;color:var(--brass);
  min-height:0;font-style:italic}
.ob-interim:empty{display:none}

/* ── choices ────────────────────────────────────────────────────────── */
.ob-group{margin-bottom:32px}
.ob-legend{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--brass);margin:0 0 12px}

.ob-pick{display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  padding:15px 16px;border:1px solid var(--line);border-radius:3px;
  background:#fff;margin-bottom:9px;transition:border-color 180ms,background 180ms}
.ob-pick:hover{border-color:rgba(168,135,79,.5)}
.ob-pick input{width:19px;height:19px;flex:0 0 19px;margin-top:2px;
  accent-color:var(--indigo);cursor:pointer}
.ob-pick:has(input:checked){border-color:var(--brass);
  background:linear-gradient(0deg,rgba(168,135,79,.06),rgba(168,135,79,.06)),#fff}
.ob-pick:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:2px}
.ob-pick__body{display:block}
.ob-pick__body b{display:block;font-family:var(--f-display);font-size:17px;
  font-weight:500;color:var(--ink);margin-bottom:3px}
.ob-pick__body span{display:block;font-size:14px;line-height:1.6;
  color:var(--ink-soft)}
.ob-pick--tight{padding:13px 16px}
.ob-pick--tight .ob-pick__body b{font-size:16px}

.ob-fine{font-size:13.5px;line-height:1.72;color:var(--ink-soft);
  margin:-16px 0 28px;max-width:52ch}
.ob-fine b{font-weight:600;color:var(--ink)}

.ob-consent{display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  padding:16px 0;min-height:44px}
.ob-consent input{width:19px;height:19px;flex:0 0 19px;margin-top:2px;
  accent-color:var(--indigo)}
.ob-consent span{font-size:13px;line-height:1.7;color:var(--ink-soft)}

.ob-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
@media (max-width:560px){.ob-pair{grid-template-columns:1fr}}
.fld label{display:block;font-size:13px;letter-spacing:.05em;font-weight:600;
  color:var(--ink);margin-bottom:8px}
.fld input{width:100%;font-family:var(--f-text);font-size:17px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:14px 15px}
.fld input:focus{outline:2px solid var(--brass);outline-offset:1px;
  border-color:transparent}
.fld input[aria-invalid="true"]{border-color:#8C2F1E}
.fld--phone{margin-top:6px}
.ob-opt{font-weight:400;color:var(--ink-soft);letter-spacing:0;text-transform:none}
.ob-err{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:#8C2F1E}

/* ── navigation ─────────────────────────────────────────────────────── */
.ob-nav{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.ob-nav .btn{min-width:230px;justify-content:center;text-align:center}
.ob-nav .btn[data-busy="true"]{opacity:.6;cursor:progress}
.ob-back{background:none;border:0;padding:6px 0;font-family:var(--f-text);
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);cursor:pointer}
.ob-back:hover{color:var(--ink)}

/* ── the finished screen ────────────────────────────────────────────── */
.ob-done .ob-h{margin-bottom:16px}
.ob-next{list-style:none;counter-reset:ob;margin:32px 0 34px;padding:0;
  border-top:1px solid var(--line)}
.ob-next li{counter-increment:ob;padding:21px 0 21px 44px;position:relative;
  border-bottom:1px solid var(--line)}
.ob-next li::before{content:counter(ob);position:absolute;left:0;top:23px;
  font-size:11px;letter-spacing:.2em;font-weight:600;color:var(--brass)}
.ob-next b{display:block;font-family:var(--f-display);font-size:18px;
  font-weight:500;color:var(--ink);margin-bottom:5px}
.ob-next span{display:block;font-size:15.5px;line-height:1.72;color:var(--ink-soft)}
.ob-done-note{font-size:14.5px;line-height:1.72;color:var(--ink);
  background:rgba(168,135,79,.09);border-left:2px solid var(--brass);
  padding:16px 18px;margin:0 0 28px}
.ob-done a{border-bottom:1px solid var(--brass)}
.ob-sign{font-family:var(--f-display);font-size:17px;color:var(--ink-soft);
  margin-top:38px}

/* No-JS: the five fieldsets become one honest long form with one button. */
html:not(.js) #ob fieldset[hidden]{display:block}
html:not(.js) .ob-progress,
html:not(.js) .ob-nav [data-back],
html:not(.js) #ob fieldset:not(:last-of-type) .ob-nav{display:none}
html:not(.js) #ob fieldset{margin-bottom:54px}

/* The onboarding footer. Two lines, because every extra link on this page is
   an exit from a flow somebody has already paid to be in. */
.ob-ftr{background:var(--warm);border-top:1px solid var(--line);
  padding-block:30px 46px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.ob-ftr a{color:var(--ink);border-bottom:1px solid var(--brass)}
.ob-ftr__legal{margin-top:9px;font-size:12.5px;color:var(--ink-soft)}
.ob-ftr__legal a{color:var(--ink-soft);border-bottom-color:var(--line)}