/* Ordainer homepage. Ported from design/homepage-mockup.html (Option A 'Checkpoint'). */
:root{
  --paper:#FAF9F6; --surface:#FFFFFF; --subtle:#F1EFE9; --line:#E3E0D8; --line-strong:#8A8F9C;
  --ink:#0E1525; --muted:#4B5468;
  --accent:#0B6B5C; --accent-hover:#08564A; --accent-soft:#E2F0EB;
  --deny:#B42318; --deny-ink:#9A1C13; --deny-soft:#FDECEA;
  --term:#0F1623; --term-2:#161F2E; --term-line:#263247; --term-text:#D7DEE8; --term-muted:#8D9AAE;
  --term-allow:#5EDBA5; --term-deny:#FF8173; --term-accent:#7FE0C2; --band-muted:#A9B3C4;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --wrap:1160px;
  --shadow:0 1px 2px rgba(14,21,37,.04), 0 8px 24px rgba(14,21,37,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html,body{overflow-x:clip}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
code,kbd,pre{font-family:var(--mono);font-size:.9em}
p code,li code,dd code,summary code{background:var(--subtle);border:1px solid var(--line);border-radius:4px;padding:.05em .35em;font-size:.86em;white-space:nowrap}
h1,h2,h3{text-wrap:balance;line-height:1.12;letter-spacing:-.022em;margin:0;font-weight:600}
p{margin:0 0 1em}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.term :focus-visible{outline-color:var(--term-accent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.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 */
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);font-weight:600;text-decoration:none}
.skip:focus{top:12px;color:#fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 1rem/1 var(--sans);text-decoration:none;border-radius:var(--r-sm);padding:.85em 1.25em;border:1.5px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn-lg{font-size:1.0625rem;padding:1em 1.5em}
.btn-sm{font-size:.9375rem;padding:.6em 1em}
.btn-xs{font-size:.875rem;padding:.5em .85em}
.dark .btn-secondary{color:#fff;border-color:#5B6678}
.dark .btn-secondary:hover{border-color:#fff;color:#fff}
.dark .btn-primary{background:var(--term-accent);color:var(--term)}
.dark .btn-primary:hover{background:#A6EBD5;color:var(--term)}
.arrow-link{font-weight:600;text-decoration:none}
.arrow-link:hover{text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand svg{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a:not(.btn){color:var(--muted);text-decoration:none;font-weight:500;font-size:.9375rem}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-drop{position:relative}
.nav-drop summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500;font-size:.9375rem;border-radius:var(--r-sm)}
.nav-drop summary::-webkit-details-marker{display:none}
.nav-drop summary:hover,.nav-drop[open] summary{color:var(--ink)}
.nav-drop[open] summary svg{transform:rotate(180deg)}
.drop-panel{position:absolute;left:-14px;top:36px;min-width:180px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;list-style:none;z-index:20}
.nav-links .drop-panel a{display:block;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink)}
.nav-links .drop-panel a:hover{background:var(--subtle)}
.menu-sep{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.nav-mobile{display:none;align-items:center;gap:8px}
.menu{position:relative}
.menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;color:var(--ink);border:1px solid var(--line)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--subtle)}
.menu-panel{position:absolute;right:0;top:52px;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:8px;list-style:none}
.menu-panel a{display:block;padding:12px 14px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-weight:500}
.menu-panel a:hover{background:var(--subtle)}

/* Sections */
section{padding:96px 0}
.section-head{max-width:760px;margin-bottom:48px}
.eyebrow{display:inline-block;font:600 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.dark .eyebrow{color:var(--term-accent)}
h2{font-size:clamp(1.85rem,1.2rem + 2.2vw,2.75rem)}
.lede{font-size:1.1875rem;color:var(--muted);max-width:68ch}
.rule-top{border-top:1px solid var(--line)}

/* Hero */
.hero{padding:88px 0 96px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.55;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 70% 80% at 75% 30%,#000 10%,transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:center}
.hero-copy{container-type:inline-size}
.hero .eyebrow{text-wrap:balance}
.hero h1{font-size:clamp(2rem,1.4rem + 4.2vw,4.25rem);letter-spacing:-.035em;line-height:1.05;margin-bottom:24px;font-style:normal;font-synthesis:none;font-variation-settings:"wght" 600;font-weight:600}
.hero h1 .h1-line{display:block;white-space:nowrap;font-style:normal;font-synthesis:none;font-variation-settings:"wght" 600;font-weight:600}
@supports (font-size:1cqi){.hero h1{font-size:min(4.25rem,8.6cqi)}}
.hero .sub{font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);color:var(--muted);max-width:40ch;margin-bottom:32px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero .docs-link{display:inline-block;margin:0 0 0 8px}
/* Proof strip (value prop v0.3): quiet 3-up under the button, stacks on mobile */
.proof{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:720px}
.proof li{border-top:1px solid var(--line);padding-top:14px;font-size:.875rem;line-height:1.5;color:var(--muted)}
.proof strong{display:block;color:var(--ink);font-size:.9375rem;font-weight:600;letter-spacing:-.005em;margin-bottom:4px}
.small-print{font-size:.875rem;color:var(--muted);margin:14px 0 0}
.dark .small-print{color:var(--band-muted)}

/* Terminal surfaces */
.term{background:var(--term);color:var(--term-text);border-radius:var(--r-lg);border:1px solid var(--term-line);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 48px -12px rgba(14,21,37,.35)}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--term-line);font:500 .75rem/1 var(--mono);color:var(--term-muted)}
.term-bar .dots{display:flex;gap:6px;margin-right:6px}
.term-bar .dots i{width:10px;height:10px;border-radius:50%;background:#2B3648;display:block}
.term pre{margin:0;padding:20px;overflow-x:auto;font-size:.875rem;line-height:1.7;tab-size:2}
.t-no{color:var(--term-deny);font-weight:600}
.t-yes{color:var(--term-allow);font-weight:600}
.t-dim{color:var(--term-muted)}
.t-key{color:#9CC7FF}
.t-str{color:#F3C98B}
.t-acc{color:var(--term-accent)}
.hero-visual figure{margin:0}
.hero-line{padding:44px 24px;font:500 clamp(.7rem,.45rem + .6vw,.9rem)/1.6 var(--mono);white-space:pre-wrap}
.hero-visual figcaption{margin-top:14px;font-size:.9375rem;color:var(--muted);font-style:italic}

/* Problem */
.problem-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.problem-grid .lede{margin-bottom:0}
.options{list-style:none;display:grid;gap:12px;margin:8px 0 28px}
.options li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 16px 48px;position:relative}
.options li::before{content:"";position:absolute;left:18px;top:22px;width:14px;height:14px;border-radius:3px;border:2px solid var(--deny);transform:rotate(45deg) scale(.8)}
.options strong{font-weight:600}
.answer{border-left:3px solid var(--accent);padding:4px 0 4px 20px;font-size:1.0625rem}
.answer strong{display:block;font-size:1.25rem;letter-spacing:-.01em;margin-bottom:4px}
.answer p{margin:0;color:var(--muted)}

/* How it works */
.scope{display:flex;gap:12px;align-items:flex-start;background:var(--accent-soft);border:1px solid #C7E2D8;border-radius:var(--r);padding:16px 20px;margin:0 0 40px;max-width:860px}
.scope b{font:600 .75rem/1.9 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);white-space:nowrap}
.scope p{margin:0}
/* How it works lede (mockup .promise; renamed: .promise is the About page's card) */
.how-promise{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55;color:var(--ink);max-width:66ch;margin:-16px 0 40px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow)}
.step-num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--ink);color:#fff;font:600 .875rem/1 var(--mono);margin-bottom:20px}
.step h3{font-size:1.25rem;margin-bottom:12px;letter-spacing:-.015em}
.step p{color:var(--muted);margin:0;font-size:.97rem}
.how-lower{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;margin-top:48px;align-items:start}
.shadow-note h3{font-size:1.25rem;margin-bottom:10px}
.shadow-note p{color:var(--muted)}
.fine{font-size:.875rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
.code-label{font:600 .75rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 10px}
.tabs{display:flex;gap:2px;padding:6px 6px 0 6px;border-bottom:1px solid var(--term-line)}
.tab{appearance:none;background:transparent;border:0;color:var(--term-muted);font:500 .8125rem/1 var(--mono);padding:12px 14px;border-radius:8px 8px 0 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:#fff;border-bottom-color:var(--term-accent)}
.tab:hover{color:#fff}
.tab-spacer{flex:1}
.copy-btn{appearance:none;align-self:center;margin:0 6px 6px;background:var(--term-2);color:var(--term-text);border:1px solid var(--term-line);border-radius:6px;font:500 .75rem/1 var(--mono);padding:8px 10px;cursor:pointer}
.copy-btn:hover{border-color:var(--term-muted)}
.panel pre{white-space:pre}
.panel-json pre{white-space:pre-wrap;word-break:break-all}
.code-foot{margin-top:14px}

/* Demo */
.demo{background:var(--subtle);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.demo-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.demo-intro p:not(.eyebrow){color:var(--muted);font-size:1.0625rem}
.demo-intro strong{color:var(--ink)}
.demo-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:28px 0 12px}
.helper{font-weight:500;min-height:1.6em;margin:0;color:var(--ink)}
/* P21 (Oct 19, Design): the result on the helper line, next to the buttons. The answer word uses the code card's
   .t-no / .t-yes; the border and the answer word use page --deny / --accent (AA on the demo band; QA S98-M1);
   the sentence stays ink (.demo-intro scope outranks .demo-intro p:not(.eyebrow), which mutes the intro's paragraphs). */
.demo-intro .helper.is-deny,.demo-intro .helper.is-allow{padding-left:12px;border-left:3px solid var(--deny);color:var(--ink)}
.demo-intro .helper.is-allow{border-left-color:var(--accent)}
/* S98-M1 (QA, Oct 19): NO/YES on the light demo band use page tokens, not the dark-terminal --term-*. */
.demo-intro .helper .t-no{color:var(--deny)}
.demo-intro .helper .t-yes{color:var(--accent)}
.demo-console .term-bar{justify-content:space-between}
.log{list-style:none;margin:0;padding:16px 20px;min-height:236px;font:500 .875rem/1.75 var(--mono)}
.log li{white-space:pre-wrap}
.log li.is-deny{background:rgba(255,129,115,.12);margin:0 -20px;padding:0 20px;border-left:3px solid var(--term-deny)}
.log .empty{color:var(--term-muted);font-style:italic;white-space:normal}
.legend{font-size:.8125rem;color:var(--muted);margin:12px 0 0}
.banner{margin-top:20px;background:var(--deny-soft);border:1px solid #F4C7C1;border-left:4px solid var(--deny);border-radius:var(--r);padding:18px 20px;color:var(--deny-ink)}
.banner p{margin:0}
.banner p + p{margin-top:6px;color:var(--ink)}
.banner strong.big{font-size:1.125rem}
.after-banner{color:var(--muted);font-size:.9375rem;margin:16px 0 0}
.convert{margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
.convert p{margin:0 0 16px}
.convert .small-print{margin-top:12px}
[hidden]{display:none!important}
details.reveal{margin-top:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
details.reveal > summary{cursor:pointer;padding:14px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;border-radius:var(--r)}
details.reveal > summary::-webkit-details-marker{display:none}
details.reveal > summary::after{content:"+";font:500 1.25rem/1 var(--mono);color:var(--muted)}
details.reveal[open] > summary::after{content:"\2212"}
details.reveal .inner{padding:0 18px 18px}
details.reveal .term{border-radius:var(--r)}
details.reveal .term pre{padding:16px;font-size:.8125rem}
details.reveal blockquote{margin:14px 0 0;color:var(--muted);font-size:.9375rem}
.footnote{font-size:.8125rem;color:var(--muted);margin:24px 0 0}

/* Why us */
.cards-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.why-intro{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:var(--muted);max-width:62ch;margin:-28px 0 40px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.tile{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;background:var(--paper)}
.tile h3{font-size:1.0625rem;margin-bottom:6px}
.tile p{margin:0;color:var(--muted);font-size:.9375rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.card h3{font-size:1.1875rem;margin-bottom:12px;letter-spacing:-.012em}
.card p{color:var(--muted);font-size:.97rem}
.card p:last-child{margin-bottom:0}
.ticks{list-style:none;display:grid;gap:8px;margin-top:4px}
.ticks li{position:relative;padding-left:24px;color:var(--muted);font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.not-box{margin-top:20px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:28px}
.not-box h3{font-size:1.1875rem}
.not-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.not-list li{color:var(--band-muted);font-size:.95rem;border-left:1px solid #2D3850;padding-left:16px}
.not-list strong{display:block;color:#fff;font-weight:600;margin-bottom:2px}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column}
.price.featured{border:1.5px solid var(--ink);box-shadow:var(--shadow)}
.price .plan{font:600 .8125rem/1.4 var(--mono);color:var(--muted);margin:0 0 10px;letter-spacing:.02em}
.price .amount{font-size:2.5rem;font-weight:600;letter-spacing:-.03em;line-height:1;margin:0 0 24px}
.price .amount small{font-size:1rem;font-weight:500;color:var(--muted);letter-spacing:0}
.price .ticks{margin:0 0 28px;flex:1;align-content:start}
.price .ticks li{color:var(--ink)}
.price .btn{width:100%}
.price-cta{margin-top:auto;display:flex;flex-direction:column}
.price-cta .btn{width:100%}
.price-cta .price-note{margin:12px 0 0;min-height:1.5em;line-height:1.5;white-space:nowrap}
.price-note--spacer{visibility:hidden;user-select:none}
.under-cards{margin-top:28px;color:var(--muted)}
.under-cards p{margin:0 0 8px}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:start}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:600;font-size:1.0625rem;position:relative;border-radius:4px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font:400 1.5rem/1 var(--mono);color:var(--muted)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 20px;color:var(--muted);max-width:68ch}
.faq .a p:last-child{margin-bottom:0}

/* Closing band */
.band{background:var(--ink);color:#fff;padding:96px 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#1C2638 1px,transparent 1px),linear-gradient(90deg,#1C2638 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 60% 90% at 50% 100%,#000,transparent 70%);mask-image:radial-gradient(ellipse 60% 90% at 50% 100%,#000,transparent 70%);pointer-events:none}
.band .wrap{position:relative;text-align:center}
.band h2{font-size:clamp(2rem,1.2rem + 3vw,3.25rem);letter-spacing:-.03em;max-width:20ch;margin:0 auto 28px}
.band .cta-row{justify-content:center}

/* Footer */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding:64px 0 40px;font-size:.9375rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-brand p{color:var(--muted);margin-top:14px;max-width:30ch}
.site-footer h2,.site-footer .foot-label{text-wrap:balance;font:600 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.site-footer ul{list-style:none;display:grid;gap:10px}
.site-footer a{color:var(--ink);text-decoration:none}
.site-footer a:hover{color:var(--accent);text-decoration:underline}
.legal-line{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}


/* Responsive */
@media (max-width:1024px){
  .hero-grid,.problem-grid,.how-lower,.demo-grid,.faq-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .steps,.cards-2,.tiles{grid-template-columns:minmax(0,1fr)}
  .not-box{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .price-cta .price-note{white-space:normal}
}
@media (max-width:760px){
  section{padding:64px 0}
  .wrap{padding:0 20px}
  .nav-links{display:none}
  .nav-mobile{display:flex}
  .hero{padding:48px 0 64px}
  .hero h1{max-width:none}
  .cta-row .btn-lg{flex:1 1 auto}
  .price-grid{grid-template-columns:minmax(0,1fr)}
  .not-list{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{padding:72px 0}
  .scope{flex-direction:column;gap:4px}
  .proof{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:28px}
  .hero .docs-link{margin:0}
  .step,.card,.price{padding:24px}
  .modal-inner{padding:24px}
  .legal-line{flex-direction:column}
}
@media (max-width:420px){
  .demo-controls .btn{flex:1 1 100%}
  .log{padding:14px 12px;font-size:.7rem}
  .log li.is-deny{margin:0 -12px;padding:0 9px}
  .hero-line{padding:28px 16px;font-size:.7rem}
  .term pre{font-size:.78rem;padding:16px}
}
@media (max-width:340px){
  .foot-grid{grid-template-columns:minmax(0,1fr)}
}

/* ===== Header (brand A pattern) ===== */
.gh-bar{display:flex;align-items:center;height:64px;gap:24px}
.gh .brand{flex:none}
.gh-menus{display:flex;align-items:center;gap:4px;list-style:none;margin:0 auto;padding:0}
.gh-item{position:relative}
.gh-drop>summary,.gh-plain{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink);font-weight:500;font-size:.9375rem;text-decoration:none;cursor:pointer;list-style:none}
.gh-drop>summary::-webkit-details-marker,.gh-acc>summary::-webkit-details-marker,.gh-mobile>summary::-webkit-details-marker{display:none}
.gh-drop>summary:hover,.gh-plain:hover,.gh-drop[open]>summary{background:var(--subtle);color:var(--ink)}
.gh-chev{transition:transform .15s;color:var(--muted)}
.gh-drop[open] .gh-chev,.gh-acc[open] .gh-chev{transform:rotate(180deg)}
.gh-panel{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);width:380px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(14,21,37,.05),0 18px 44px -8px rgba(14,21,37,.18);padding:10px;z-index:60}
.gh-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px} /* hover bridge */
.gh-panel ul,.gh-acc ul{list-style:none;margin:0;padding:0}
.gh-link{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.gh-link:hover{background:var(--paper)}
.gh-link:hover .gh-ic{background:var(--accent);color:#fff}
.gh-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--accent-soft);color:var(--accent-hover);transition:background .15s,color .15s}
.gh-t{display:block;font-weight:600;font-size:.9375rem;line-height:1.3}
.gh-d{display:block;color:var(--muted);font-size:.875rem;line-height:1.4;margin-top:2px}
.gh-right{display:flex;align-items:center;gap:18px;flex:none}
.gh-login{color:var(--ink);font-weight:500;font-size:.9375rem;text-decoration:none}
.gh-login:hover{color:var(--accent)}
.gh-mobile{display:none}
@media (max-width:920px){
  .gh-menus,.gh-right{display:none}
  .gh-bar{justify-content:space-between}
  .gh-mobile{display:block}
  .gh-mobile>summary{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;color:var(--ink);list-style:none;background:var(--surface)}
  .gh-x{display:none}
  .gh-mobile[open] .gh-x{display:block}.gh-mobile[open] .gh-burger{display:none}
  .gh-sheet{position:absolute;left:0;right:0;top:100%;height:calc(100dvh - 64px);overflow:auto;background:var(--paper);border-top:1px solid var(--line);padding:8px 20px 24px;display:flex;flex-direction:column}
  .gh-accs{list-style:none;margin:0;padding:0}
  .gh-accs>li{border-bottom:1px solid var(--line)}
  .gh-acc>summary,.gh-row{display:flex;justify-content:space-between;align-items:center;padding:16px 2px;font-weight:600;font-size:1.0625rem;color:var(--ink);cursor:pointer;list-style:none;text-decoration:none;border-radius:0;background:none}
  .gh-row:hover{background:none}
  .gh-acc ul{padding:0 0 10px}
  .gh-acc .gh-link{padding:10px 4px}
  .gh-sheet-cta{display:grid;gap:10px;margin-top:auto;padding-top:24px}
  .gh-sheet-cta .btn{width:100%}
}

/* --- production additions (not in mockup) --- */
.demo-status{margin:12px 0 0;color:var(--muted);font-size:.9375rem}
.demo-status a{color:var(--accent)}
.log li .t-err{color:var(--term-deny)}

/* ===== Company / Contact pages ===== */
.page-hero{padding:88px 0 56px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{font:600 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.page-hero h1{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.75rem);max-width:17ch;letter-spacing:-.03em}
.page-hero .lede{font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);color:var(--muted);max-width:60ch;margin:22px 0 0}
.pg section{padding:80px 0}
.pg section+section{border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.two h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem)}
.two .body p{font-size:1.0625rem;max-width:62ch}
.kicker{font:600 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.promises{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0}
.promise{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px}
.promise h3{font-size:1.125rem;margin:0 0 8px;display:flex;gap:10px;align-items:center}
.promise h3::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.promise p{margin:0;color:var(--muted);font-size:.975rem}
.quote-line{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);font-weight:600;letter-spacing:-.02em;line-height:1.3;max-width:28ch;margin:0}
.where{display:flex;gap:14px;align-items:flex-start}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts strong{font-weight:600}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px}
.ccard h2{font-size:1.25rem}
.ccard p{margin:0;color:var(--muted)}
.ccard .big{font:600 1.0625rem var(--mono);color:var(--accent);text-decoration:none;word-break:break-all;margin-top:auto;padding-top:10px}
.ccard .big:hover{text-decoration:underline}
.ccard .ic{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent-hover);display:grid;place-items:center}
.tip{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:16px 18px;max-width:760px}
.tip p{margin:0}
.cta-band{background:var(--term);color:#fff;padding:72px 0}
.cta-band h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem);color:#fff}
.cta-band p{color:var(--band-muted);margin:12px 0 26px}
.cta-band .row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-band .btn-primary{background:var(--term-accent);color:var(--term)}
.cta-band .btn-primary:hover{background:#A6EBD5;color:var(--term)}
.cta-band a.quiet{color:#fff;font-weight:600}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:24px}.promises,.cards{grid-template-columns:1fr}.facts li{grid-template-columns:1fr;gap:4px}}
@media (max-width:760px){.page-hero{padding:56px 0 40px}.pg section{padding:56px 0}}

/* ===== Company / Contact pages ===== */
.page-hero{padding:88px 0 56px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{font:600 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.page-hero h1{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.75rem);max-width:17ch;letter-spacing:-.03em}
.page-hero .lede{font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);color:var(--muted);max-width:60ch;margin:22px 0 0}
.pg section{padding:80px 0}
.pg section+section{border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.two h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem)}
.two .body p{font-size:1.0625rem;max-width:62ch}
.kicker{font:600 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.promises{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0}
.promise{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px}
.promise h3{font-size:1.125rem;margin:0 0 8px;display:flex;gap:10px;align-items:center}
.promise h3::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.promise p{margin:0;color:var(--muted);font-size:.975rem}
.quote-line{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);font-weight:600;letter-spacing:-.02em;line-height:1.3;max-width:28ch;margin:0}
.where{display:flex;gap:14px;align-items:flex-start}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.facts strong{font-weight:600}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px}
.ccard h2{font-size:1.25rem}
.ccard p{margin:0;color:var(--muted)}
.ccard .big{font:600 1.0625rem var(--mono);color:var(--accent);text-decoration:none;word-break:break-all;margin-top:auto;padding-top:10px}
.ccard .big:hover{text-decoration:underline}
.ccard .ic{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent-hover);display:grid;place-items:center}
.tip{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:16px 18px;max-width:760px}
.tip p{margin:0}
.cta-band{background:var(--term);color:#fff;padding:72px 0}
.cta-band h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem);color:#fff}
.cta-band p{color:var(--band-muted);margin:12px 0 26px}
.cta-band .row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-band .btn-primary{background:var(--term-accent);color:var(--term)}
.cta-band .btn-primary:hover{background:#A6EBD5;color:var(--term)}
.cta-band a.quiet{color:#fff;font-weight:600}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:24px}.promises,.cards{grid-template-columns:1fr}.facts li{grid-template-columns:1fr;gap:4px}}
@media (max-width:760px){.page-hero{padding:56px 0 40px}.pg section{padding:56px 0}}

/* Moved from inline style="" attributes (strict CSP: style-src 'self') */
.mt-24{margin-top:24px}
.mt-20{margin-top:20px}
.dots-inline{display:inline-flex;vertical-align:middle}
.how-h{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem);max-width:24ch;margin-bottom:12px}
.how-lede{color:var(--muted);max-width:62ch;margin-bottom:32px}
/* About: 5 promise cards, the last spans both columns on desktop */
.promise:last-child:nth-child(odd){grid-column:1/-1}
/* Hero terminal line on one line at desktop (design review #8) */
@media (min-width:1025px){.hero-line{white-space:pre;font-size:min(.8125rem,1.04vw)}}

/* ===== Pricing page ===== */
.pr-hero{padding:80px 0 40px}
.pr-hero h1{max-width:none}
.pr-hero h1 span{display:block}
.pr-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:22px;color:var(--muted);font-size:.9375rem}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 .6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:var(--subtle);color:var(--muted);white-space:nowrap}
.tag.rec{background:var(--ink);border-color:var(--ink);color:#fff}
.pg section.plans{padding:24px 0 72px;border-top:0}
.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px 24px;display:flex;flex-direction:column}
.pcard.featured{border:1.5px solid var(--ink);box-shadow:var(--shadow)}
.pcard.soon{background:var(--paper)}
.pcard .top{margin-bottom:14px}
.pcard .tag{position:absolute;top:-11px;left:20px}
.pcard.soon .tag{background:var(--surface)}
.pcard .plan{font:600 .78rem/1.3 var(--mono);color:var(--muted);letter-spacing:.02em;margin:0}
.pcard .amount{font-size:2.375rem;font-weight:600;letter-spacing:-.03em;line-height:1;margin:0 0 10px}
.pcard .amount small{font-size:.9375rem;font-weight:500;color:var(--muted);letter-spacing:0}
.pcard .for{color:var(--muted);font-size:.9375rem;margin:0 0 20px;min-height:3em}
.pcard .ticks{margin:0 0 24px;flex:1;align-content:start;gap:9px}
.pcard .ticks li{color:var(--ink);font-size:.9375rem}
.pcard.soon .ticks li{color:var(--ink-2,var(--ink))}
.pcard .btn{width:100%}
.pcard .soon-cta{border-top:1px solid var(--line);padding-top:16px;font-size:.9375rem;color:var(--muted)}
.pcard .soon-cta a{font-weight:600;white-space:nowrap}
.ent{margin-top:16px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:40px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 32px}
.ent .plan{font:600 .78rem/1.3 var(--mono);color:var(--muted);margin:0 0 12px}
.ent .amount{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.ent .for{color:var(--muted);margin:0 0 14px;font-size:.9375rem}
.ent .ticks{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin:0}
.ent .ticks li{color:var(--ink);font-size:.9375rem}
.every{margin-top:28px;display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:12px 24px;align-items:start;color:var(--muted);font-size:.9375rem;border-top:1px solid var(--line);padding-top:20px}
.every b{font:600 .72rem/1.6 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);white-space:nowrap}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:860px;border-collapse:collapse;font-size:.9375rem}
.cmp caption{text-align:left}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{font:600 .75rem/1.3 var(--mono);color:var(--muted);letter-spacing:.04em;background:var(--subtle);white-space:nowrap}
.cmp thead th.is-rec{color:var(--ink)}
.cmp tbody th{font-weight:600;color:var(--ink);width:190px}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td.is-rec{background:#FBFAF7}
.cmp .no{color:var(--muted)}
.cmp th:first-child{position:sticky;left:0;background:inherit;z-index:1}
.cmp thead th:first-child{background:var(--subtle)}
.cmp tbody th:first-child{background:var(--surface)}
.scroll-hint{display:none;font-size:.8125rem;color:var(--muted);margin:0 0 8px}
@media (max-width:1100px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.every{grid-template-columns:repeat(2,minmax(0,1fr))}.every b{grid-column:1/-1}}
@media (max-width:860px){.ent{grid-template-columns:1fr;gap:20px;padding:24px}}
@media (max-width:640px){.plan-grid{grid-template-columns:1fr}.pcard .for{min-height:0}.ent .ticks{grid-template-columns:1fr}.every{grid-template-columns:1fr}.scroll-hint{display:block}.cmp tbody th{width:128px;min-width:128px}.pr-hero{padding:56px 0 28px}}
.pr-h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem)}
.pr-h2-gap{margin-bottom:28px}

/* ===== 404 page (card adapted from the console's signed-out error card) ===== */
.nf{padding:88px 0 112px}
.nf-card{max-width:528px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow)}
.nf-crumb{font:500 .75rem/1 var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
.nf-h{font-size:clamp(1.6rem,1.3rem + 1vw,2rem);letter-spacing:-.02em;margin:0}
.nf-line{color:var(--muted);margin:12px 0 0}
.nf-links{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.nf{padding:48px 0 72px}.nf-card{padding:20px}.nf-links li{flex:1 1 100%}.nf-links .btn{width:100%}}

/* ===== Round CEO 10-05 (homepage + pricing copy round) ===== */
/* Announcement banner (Early Access Beta, Oct 9): slim, first in body, scrolls away above the sticky header.
   Text: --ink on --subtle 15.84:1, link --accent-hover on --subtle 7.48:1 (WCAG AA needs 4.5:1).
   banner.js (in <head>) sets html.ea-js (close button shown) and html.ea-dismissed (banner hidden before first paint). */
.ea-banner{background:var(--subtle);border-bottom:1px solid var(--line);color:var(--ink);font-size:.8125rem;line-height:1.4}
html.ea-dismissed .ea-banner{display:none}
.ea-wrap{position:relative;display:flex;justify-content:center;align-items:center;min-height:36px;padding-top:4px;padding-bottom:4px}
html.ea-js .ea-wrap{padding-left:56px;padding-right:56px}
.ea-text{margin:0;text-align:center;text-wrap:balance}
.ea-text strong{font-weight:600}
.ea-link{color:var(--accent-hover);font-weight:600;text-decoration:underline;white-space:nowrap}
.ea-link:hover{color:var(--ink)}
.ea-close{display:none;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;align-items:center;justify-content:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}
html.ea-js .ea-close{display:inline-flex}
.ea-close:hover{background:var(--line)}
.ea-close:focus-visible{outline-offset:-3px}
@media (max-width:640px),(pointer:coarse){
  .ea-wrap{padding-top:0;padding-bottom:0}
  html.ea-js .ea-wrap{padding-left:16px;padding-right:52px}
  .ea-text{padding:8px 0}
  /* 44px tap target without changing the line box: inline padding extends the hit area, negative margin keeps layout */
  .ea-link{display:inline-block;padding:14px 4px;margin:-14px -4px;line-height:16px}
  .ea-close{width:44px;height:44px;right:4px}
}
/* Hero: pitch + code above the fold at 1280x800 */
.hero.hero-pitch{padding:44px 0 72px}
.hero-pitch .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start}
.hero-pitch h1{margin-bottom:20px}
.hero-pitch .sub{margin-bottom:28px;max-width:50ch}
.hero-pitch .proof{margin-top:28px}
.hero-code{margin:8px 0 0}
.hero-code .term pre{padding:16px 18px;font-size:.78rem;line-height:1.65;white-space:pre;overflow-x:auto}
.hero-code .ans{border-top:1px solid var(--term-line);padding:12px 18px 12px 15px;border-left:3px solid transparent}
.hero-code .ans .lab{display:block;font:500 .72rem/1.2 var(--mono);color:var(--term-muted);margin-bottom:6px}
.hero-code .ans pre{padding:0;white-space:pre-wrap;word-break:break-word}
.hero-code .ans-allow{border-left-color:var(--term-allow)}
.hero-code .ans-deny{border-left-color:var(--term-deny);background:rgba(255,129,115,.08);border-radius:0 0 var(--r-lg) var(--r-lg)}
/* Light inline CTA after each homepage section */
.sec-cta{margin:36px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.sec-cta span{color:var(--muted);font-size:.875rem}
.quiet-link{color:var(--muted);font-size:.9375rem}
.quiet-link:hover{color:var(--ink)}
/* 'Decision' defined once, visibly */
.define{display:flex;gap:14px;align-items:baseline;background:var(--accent-soft);border:1px solid #C7E2D8;border-radius:var(--r);padding:14px 18px;margin:32px 0 0;max-width:720px;color:var(--ink)}
.define b{font:600 .72rem/1.6 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);white-space:nowrap}
.pr-hero .define{margin-top:20px}
/* Why Ordainer: three choices */
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card .card-k{font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.card.us{border:1.5px solid var(--accent);box-shadow:var(--shadow)}
.card.us .card-k{color:var(--accent)}
/* Pricing */
.price-note{font-size:.8125rem;color:var(--muted);margin:12px 0 0;line-height:1.5}
.price-note.refund{margin-top:6px}
.plan-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.soon-row{margin-top:16px;display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:12px 32px;align-items:center;background:var(--paper);border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:20px 28px}
.soon-row .plan{font:600 .78rem/1.3 var(--mono);color:var(--muted);margin:0 0 8px}
.soon-row p{margin:0;color:var(--muted);font-size:.9375rem}
.soon-row .arrow-link{font-size:.9375rem}
.cmp.cmp-2{min-width:0}
.cmp.cmp-2 td{width:38%}
@media (max-width:1024px){.cards-3,.hero-pitch .hero-grid{grid-template-columns:minmax(0,1fr)}.hero-pitch .hero-grid{gap:32px}.hero.hero-pitch{padding:32px 0 56px}}
/* Homepage hero trio (Design, Oct 10): the proof list is a direct child of .hero-grid, placed with grid areas so the
   DOM and screen-reader order stay copy, trio, code. 960px and up (Design, Oct 10 7:10 PM; was 900px): "copy code" / "trio trio", the trio spanning the
   full content container in three columns. Below 960px: one column "copy" "trio" "code", spaced as before
   (trio 28px under the CTAs, code 32px + its 8px under the trio). Scoped to .hero-pitch (homepage hero only). */
.hero-pitch .hero-grid{grid-template-areas:"copy" "trio" "code";row-gap:0}
.hero-pitch .hero-copy{grid-area:copy}
.hero-pitch .hero-grid>.proof{grid-area:trio;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:28px;max-width:none}
.hero-pitch .hero-visual{grid-area:code;margin-top:32px}
@media (min-width:960px){
  .hero-pitch .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"copy code" "trio trio";gap:3.5rem 48px}
  .hero-pitch .hero-visual{margin-top:0}
  .hero-pitch .hero-grid>.proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;margin-top:0;align-items:start}
}
@media (max-width:860px){.soon-row{grid-template-columns:minmax(0,1fr);padding:20px 22px}}
@media (max-width:640px){.plan-grid.two{grid-template-columns:minmax(0,1fr)}.hero-code .term pre{font-size:.72rem}.define{flex-direction:column;gap:4px}.cmp.cmp-2 tbody th{width:110px;min-width:110px}}
/* Legal preview pages (scripts/build-legal-pages.js; UI/UX design handoff legal-preview-pages-and-beta-fixes.md, Oct 6):
   the site header and footer, one centred 720px prose column, Legal's banner as an amber callout above the H1 (never
   red), a muted version line, anchored headings, the pricing comparison's table style, and a print stylesheet. */
.legal{max-width:calc(720px + 48px);padding-top:40px;padding-bottom:80px;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink)}
.legal h1,.legal h2,.legal h3,.legal h4{color:var(--ink);scroll-margin-top:24px}
.legal h1{font-size:2rem;line-height:1.2;margin:24px 0 8px}
.legal h2{font-size:1.375rem;line-height:1.3;margin:40px 0 12px}
.legal h3{font-size:1.125rem;margin:28px 0 8px}
.legal p,.legal ul,.legal ol{margin:0 0 16px}
.legal p[id]{scroll-margin-top:24px}
.legal ul,.legal ol{padding-left:1.5em}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.legal a:hover{color:var(--accent-hover)}
.legal code{font-family:var(--mono)}
.legal hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.legal-callout{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:8px;padding:16px 20px;color:var(--ink);margin:0 0 8px}
.legal-callout p{margin:0}
.legal-version{color:var(--muted);font-size:15px;margin:0 0 32px}
.legal .cmp-wrap{margin:0 0 16px}
.legal .cmp.legal-table{min-width:640px;font-size:.9375rem}
.legal .cmp.legal-table th:first-child{position:static}
.legal-next{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.legal-next p{margin:0 0 8px}
@media print{
  .legal-page .ea-banner,.legal-page .site-header,.legal-page .site-footer,.legal-page .legal-next{display:none}
  .legal{max-width:none;padding:0;font-size:11pt}
  .legal a{color:inherit}
  .legal .cmp-wrap{overflow:visible;border:0}
  .legal .cmp.legal-table{min-width:0}
}

/* Alt #5: full-width proof row under the whole hero (option B / index-alt-trio.html). */
.hero-pitch-wrap .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start}
.hero-pitch-wrap .proof.proof-full{max-width:none;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px}
.hero-pitch-wrap .proof.proof-full strong{font-size:1.0625rem;margin-bottom:6px}
.hero-pitch-wrap .proof.proof-full li{font-size:.9375rem;padding-top:16px;line-height:1.55;border-top:1px solid var(--line);color:var(--muted)}
@media (max-width:1024px){
  .hero-pitch-wrap .hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-pitch-wrap .proof.proof-full{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* Problem H2: two block lines, hero-grade type, stays in left column. The lines may wrap (no nowrap): where a
   line fits its column it still renders as one row; where it doesn't (longer copy, iPad Safari ~1024-1180px,
   fallback font, text zoom) it wraps instead of running into the right column (Tyler, Nov 2; approach of f826f31). */
.problem-grid > div:first-child{min-width:0}
#problem h2{
  font-size:clamp(1.55rem,1.05rem + 1.4vw,2.25rem);
  letter-spacing:-.03em;
  line-height:1.35;
  font-style:normal;
  font-weight:600;
  font-synthesis:none;
  font-variation-settings:"wght" 600;
  max-width:100%;
}
#problem .h2-line{
  display:block;
  white-space:normal;
  overflow-wrap:break-word;
  text-wrap:balance;
  line-height:1.2;
  font-style:normal;
  font-synthesis:none;
  font-variation-settings:"wght" 600;
  font-weight:600;
}
#problem .h2-line + .h2-line{margin-top:0.4em;}
.problem-grid > div{min-width:0}

/* Pricing H — professional type (Oct 7) */
#pricing-title{
  font-style:normal;
  font-synthesis:none;
  font-variation-settings:"wght" 600;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.15;
}

/* pricing page: 4-up cards reuse homepage .price-cta; note wraps in narrow cards */
.pcard .price-cta .price-note{white-space:normal;min-height:3em}
@media (max-width:640px){.pcard .price-note--spacer{display:none}}
@media (max-width:760px){.price .price-note--spacer{display:none}}
/* Beta, no pricing: homepage free-beta block, /pricing/ "What's included" card, CTA small print.
   Copy for every marked spot lives in scripts/site-copy.js. */
.beta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.beta-grid h2{max-width:16ch}
.beta-body .lede{margin:0}
.beta-cta{margin-top:28px}
.beta-card{max-width:640px;padding:32px 32px 28px}
.beta-card-h{font-size:1.375rem;letter-spacing:-.01em;margin:0 0 18px}
.beta-card .ticks{margin:0 0 28px;gap:12px}
.beta-card .ticks li{font-size:1rem}
.tick-sub{display:block;margin-top:4px;color:var(--muted);font-size:.9375rem}
.tick-sub a{font-weight:600}
.beta-card-cta .btn{width:100%}
@media (max-width:1024px){.beta-grid{grid-template-columns:minmax(0,1fr);gap:24px}.beta-grid h2{max-width:none}}
@media (max-width:640px){.beta-card{padding:24px 20px 22px}}
/* Pricing page (Design, Oct 10): hero and the "What's included" card share one row at desktop, top-aligned, no divider;
   stacked below 900px. The pilot line sits in the card footer. Scoped to .pr-beta / .beta-more (pricing page only). */
.pr-beta{padding:72px 0 64px;border-bottom:0}
.pr-beta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.pr-beta .beta-card{max-width:none}
/* Card footer: the pilot line closes the card, with the rule and spacing above it (Oct 10). */
.beta-more{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem}
.beta-more a{font-weight:600}
/* T-04 live-keys line under the pricing lede (Oct 18). */
.pr-live-note{margin:16px 0 0;color:var(--muted);font-size:.9375rem;max-width:68ch}
.pr-live-note a{font-weight:600}
@media (max-width:899px){.pr-beta-grid{grid-template-columns:minmax(0,1fr);gap:32px}.pr-beta .beta-card{max-width:640px}}
@media (max-width:760px){.pr-beta{padding:56px 0 48px}}

/* Company: Leadership block (Oct 14) */
#leadership .leader-photo{width:100%;max-width:340px;height:auto;aspect-ratio:4/5;border-radius:16px;display:block}
#leadership .leader-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
#leadership .leader-head h2{margin:0}
#leadership .leader-p{margin:0 0 1em}
.li-link{color:var(--muted);display:inline-flex;line-height:0;transition:color .15s}
.li-link:hover,.li-link:focus-visible{color:var(--ink)}
/* Leadership: Design fixes (Oct 14) */
@media (min-width:960px){#leadership .leader-photo{width:280px;max-width:280px;height:350px}}
@media (min-width:641px) and (max-width:959px){#leadership .leader-photo{width:220px;max-width:220px}}
@media (max-width:640px){#leadership .leader-photo{max-width:240px;margin-left:0;margin-right:auto}#leadership .leader-head{display:block}#leadership .leader-head h2{display:inline;padding-right:26px}#leadership .leader-head .li-link{display:inline-block;margin-left:-20px;vertical-align:baseline;line-height:1}#leadership .leader-head .li-link svg{display:inline-block;vertical-align:baseline}}
/* Company page only (body.page-company): Design spec Oct 14 */
.page-company .kicker{color:var(--accent)}
.page-company .page-hero .lede,.page-company .how-lede,.page-company .facts li{font-size:1.0625rem;font-weight:400;line-height:1.6;color:var(--ink)}
.page-company .page-hero .lede{max-width:40rem}
.page-company .promise p{font-size:1rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Where Ordainer sits (homepage #how) */
.where-sits{margin:48px 0 0;padding:36px 28px 32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.where-sits-title{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.022em;margin:0 0 8px;text-wrap:balance}
.where-sits-tag{color:var(--muted);font-size:1.0625rem;line-height:1.5;margin:0 0 32px;max-width:52ch}
.where-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:12px;align-items:start}
.where-flow>li{display:contents}
.where-box{background:var(--subtle);border:1px solid var(--line);border-radius:var(--r);padding:18px 12px;text-align:center;min-height:7.25rem;display:flex;flex-direction:column;justify-content:center;gap:6px;height:100%;box-sizing:border-box}
.where-box h3,.where-box .where-label{text-wrap:balance;font:600 .68rem/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0}
.where-box p{margin:0;font-size:.9rem;line-height:1.45;color:var(--ink)}
.where-box.is-ordainer{background:var(--term);border-color:var(--term);box-shadow:var(--shadow-term)}
.where-box.is-ordainer h3,.where-box.is-ordainer .where-label{color:#fff;font-size:.75rem;letter-spacing:.12em}
.where-box.is-ordainer p{color:var(--term-text)}
.where-box.is-ordainer .where-sub{color:var(--term-muted);font-size:.78rem}
.where-box.is-bill{background:var(--paper);border-style:dashed;border-color:var(--line-strong)}
.where-note{font-size:.8125rem;line-height:1.4;color:var(--ink);padding:0 2px;grid-row:2}
.where-note small{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}
.where-note.is-empty{visibility:hidden}
.where-arrow-icon{display:flex;align-items:center;justify-content:center;height:7.25rem;color:var(--ink);grid-row:1}
.where-arrow-icon svg{display:block;width:24px;height:24px}
.where-flow>li.where-node:nth-child(1) .where-box{grid-column:1;grid-row:1}
.where-flow>li.where-node:nth-child(1) .where-note{grid-column:1;grid-row:2}
.where-flow>li.where-arrow:nth-child(2) .where-arrow-icon{grid-column:2;grid-row:1}
.where-flow>li.where-node:nth-child(3) .where-box{grid-column:3;grid-row:1}
.where-flow>li.where-node:nth-child(3) .where-note{grid-column:3;grid-row:2}
.where-flow>li.where-arrow:nth-child(4) .where-arrow-icon{grid-column:4;grid-row:1}
.where-flow>li.where-node:nth-child(5) .where-box{grid-column:5;grid-row:1}
.where-flow>li.where-node:nth-child(5) .where-note{grid-column:5;grid-row:2}
.where-flow>li.where-arrow:nth-child(6) .where-arrow-icon{grid-column:6;grid-row:1}
.where-flow>li.where-node:nth-child(7) .where-box{grid-column:7;grid-row:1}
.where-flow>li.where-node:nth-child(7) .where-note{grid-column:7;grid-row:2}
@media (max-width:899.98px){
  .where-sits{padding:28px 18px 24px;margin-top:40px}
  .where-flow{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .where-flow>li{display:flex;flex-direction:column;gap:10px;width:100%}
  .where-flow>li.where-arrow{align-items:center;padding:4px 0}
  .where-arrow-icon{height:auto;transform:rotate(90deg)}
  .where-box{min-height:0;height:auto;padding:16px 14px}
  .where-note{text-align:left;padding:0 2px 6px}
  .where-note.is-empty{display:none}
}
@media (max-width:480px){
  .where-sits-tag{font-size:1rem}
  .where-box h3,.where-box .where-label{font-size:.68rem}
  .where-box p{font-size:.875rem}
}

/* Ordainer hero, V2 (Oct 18 2026; Design handoff-v2). Headline font-size is unchanged from the live rules above. Geist: SIL OFL 1.1, see fonts/OFL-Geist.txt. */
@font-face{font-family:"Geist HL";src:url("/fonts/hl-geist-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Body";src:url("/fonts/hl-geist-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.hero .hero-copy{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;word-spacing:normal}
.hero .hero-copy .eyebrow{margin:0 0 22px}
.hero h1,.hero h1 .h1-line{font-family:"Geist HL",var(--sans);font-weight:600;font-variation-settings:normal;font-synthesis:none;letter-spacing:-0.015em;line-height:1.12}
.hero.hero-pitch h1{margin:0 0 26px}
.hero.hero-pitch .sub{font-family:"Geist Body",var(--sans);font-weight:400;font-size:1.125rem;line-height:1.5;color:#3D4556;max-width:46ch;letter-spacing:0;word-spacing:normal;text-align:left;margin:0 0 34px}
/* Hero S1, single line (Oct 18 2026; Design hero-polish-1018/single-line S1): "Stop the runaway agent." on one line
   at 56px beside the code card, whose column is 440px (was ~505px) so the line fits. Phone (760px and down): 38px, wraps "Stop the / runaway agent." */
@media (min-width:960px){
  .hero-pitch .hero-grid{grid-template-columns:minmax(0,1fr) 440px;column-gap:44px}
}
.hero.hero-pitch h1,.hero.hero-pitch h1 .h1-line{font-size:min(3.5rem,8.9cqi);letter-spacing:-0.02em;line-height:1.08}
@media (max-width:760px){
  .hero.hero-pitch h1,.hero.hero-pitch h1 .h1-line{font-size:2.375rem;line-height:1.1}
  .hero.hero-pitch h1 .h1-line{white-space:normal;text-wrap:balance}
}
.page-security .two .body ul{list-style:disc;padding-left:1.25em;margin:0 0 1em}
.page-security .two .body li{font-size:1.0625rem;max-width:62ch;margin:0 0 .6em}
.page-security .two .body li::marker{color:var(--muted)}
.page-security .page-hero .lede+.lede{font-size:1.0625rem;max-width:56ch;margin-top:16px}
.page-security .sign{font-weight:600;margin-top:1.5em}
/* Hero D (Design, Oct 27 2026): two lines with the break after the comma. Each half is its own block line and wraps
   normally inside itself, so the headline can never overflow into the code panel. Font sizes are unchanged from S1. */
.hero.hero-pitch .hero-copy{min-width:0}
.hero.hero-pitch h1{min-width:0;max-width:100%;overflow-wrap:break-word}
.hero.hero-pitch h1 .h1-line{display:block;white-space:normal;overflow-wrap:break-word;text-wrap:balance}
/* Use-case page (Oct 28): code card inside .two must not widen the column on small screens */
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
/* decide() animation keyframes (homepage v2, Oct 31; used by .home-calm .decide-viz below) */
@keyframes dv-allow{0%{left:0;transform:translate(0,-50%);opacity:0;border-color:var(--line-strong);background:var(--surface)}8%{opacity:1}42%{left:50%;transform:translate(calc(-100% - 6px),-50%);border-color:var(--line-strong);background:var(--surface)}50%{left:50%;transform:translate(6px,-50%);border-color:var(--accent);background:var(--accent-soft)}86%{opacity:1}100%{left:100%;transform:translate(-100%,-50%);opacity:0;border-color:var(--accent);background:var(--accent-soft)}}
@keyframes dv-deny{0%{left:0;transform:translate(0,-50%);opacity:0;border-color:var(--line-strong);background:var(--surface)}8%{opacity:1}42%{left:50%;transform:translate(calc(-100% - 6px),-50%);border-color:var(--line-strong);background:var(--surface)}48%,75%{left:50%;transform:translate(calc(-100% - 6px),-50%);opacity:1;border-color:var(--deny);background:var(--deny-soft)}90%,100%{left:50%;transform:translate(calc(-100% - 6px),-50%);opacity:0;border-color:var(--deny);background:var(--deny-soft)}}
@keyframes dv-lbl-allow{0%,44%{content:""}45%,100%{content:"allow";color:var(--accent-hover)}}
@keyframes dv-lbl-deny{0%,44%{content:""}45%,100%{content:"deny";color:var(--deny-ink)}}
@keyframes dv-dot-allow{0%,44%{background:var(--line-strong)}45%,100%{background:var(--accent)}}
@keyframes dv-dot-deny{0%,44%{background:var(--line-strong)}45%,100%{background:var(--deny)}}
/* Calm centred homepage (Design HANDOFF). Homepage only: scoped to body.home-calm. Layout and CSS only, no copy. */
.home-calm .ea-banner{background:transparent;color:var(--muted)}
.home-calm .ea-text strong{font-weight:400}
.home-calm .ea-link{color:var(--accent);font-weight:400;text-underline-offset:3px}
@media (min-width:921px){
  .home-calm .gh-bar{display:grid;grid-template-columns:1fr auto 1fr;height:76px}
  .home-calm .gh-bar .brand{justify-self:start}
  .home-calm .gh-menus{margin:0}
  .home-calm .gh-right{justify-self:end}
}
.home-calm .hero.hero-pitch{padding:150px 0 0;text-align:center}
.home-calm .hero-pitch .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "code" "trio";gap:0}
.home-calm .hero.hero-pitch .hero-copy{container-type:normal;text-align:center}
.home-calm .hero .hero-copy .eyebrow{font:500 15px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--accent);margin:0 0 28px}
.home-calm .hero.hero-pitch h1,.home-calm .hero.hero-pitch h1 .h1-line{font-family:"Geist HL",var(--sans);font-weight:600;font-synthesis:none;letter-spacing:-.025em;line-height:1.04;font-size:clamp(36px,calc((100vw - 96px)/15),80px)}
.home-calm .hero.hero-pitch h1{margin:0;max-width:none}
.home-calm .hero.hero-pitch h1 .h1-line{display:block;white-space:nowrap;text-wrap:nowrap}
.home-calm .hero.hero-pitch .sub{font-size:20px;line-height:1.55;color:var(--muted);max-width:46ch;margin:32px auto 0;text-align:center;text-wrap:balance}
.home-calm .hero-pitch .cta-row{justify-content:center;margin-top:44px}
.home-calm .hero-pitch .cta-row .btn-lg{flex:0 0 auto;border-radius:999px}
.home-calm .hero-pitch .hero-visual{grid-area:code;margin:0}
.home-calm .hero-code{max-width:800px;width:100%;margin:72px auto 0;text-align:left}
.home-calm .hero-code .term-bar>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-calm .hero-code .term pre{padding:18px 22px;font-size:.875rem;line-height:1.7;white-space:pre;overflow-x:auto}
.home-calm .hero-code .ans{padding:14px 0}
.home-calm .hero-code .ans .lab{font:500 .75rem/1.2 var(--mono);margin:0 22px 8px 19px}
.home-calm .hero-code .ans pre{padding:0 22px 0 19px;white-space:pre;word-break:normal;overflow-x:auto}
.home-calm .hero-visual .hero-code figcaption{margin-top:14px;text-align:center;font-size:14px;text-wrap:balance}
.home-calm .hero-visual .hero-code figcaption a.tryit-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.home-calm .hero-visual .hero-code figcaption a.tryit-link:hover{color:var(--accent-hover)}
.home-calm .hero-pitch .hero-grid>.proof{grid-area:trio;text-align:left;padding:160px 0 120px;margin:0;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;align-items:start}
.home-calm .hero-pitch .hero-grid>.proof li{padding-top:40px}
@media (max-width:899px){.home-calm .hero-pitch .hero-grid>.proof{grid-template-columns:minmax(0,1fr);gap:24px;padding:96px 0 72px}.home-calm .hero-pitch .hero-grid>.proof li{padding-top:20px}}
@media (max-width:700px){
  .home-calm .hero.hero-pitch{padding-top:72px}
  .home-calm .hero .hero-copy .eyebrow{font-size:14px;margin-bottom:20px}
  .home-calm .hero.hero-pitch h1,.home-calm .hero.hero-pitch h1 .h1-line{font-size:clamp(36px,calc((100vw - 48px)/15),80px)}
  .home-calm .hero.hero-pitch .sub{font-size:17px;margin-top:22px;max-width:34ch}
  .home-calm .hero-pitch .cta-row{margin-top:32px}
  .home-calm .hero-code{margin:48px 0 0;width:auto;margin-left:-20px;margin-right:-20px}
  .home-calm .hero-code .term{border-radius:0;border-left:0;border-right:0}
  .home-calm .hero-code .ans-deny{border-radius:0}
  .home-calm .hero-code .term pre{font-size:.8125rem;padding:16px 24px}
  .home-calm .hero-code .ans .lab{margin:0 24px 8px 21px}
  .home-calm .hero-code .ans pre{padding:0 24px 0 21px}
  .home-calm .hero-visual .hero-code figcaption{padding:0 24px}
}
.home-calm .hero::before{display:none}

/* top-gap-1603 + eyebrow-1604: tighter nav-to-kicker band and a bigger kicker (spacing and type size only) */
.home-calm .hero.hero-pitch{padding-top:72px}
.home-calm .hero .hero-copy .eyebrow{font-size:20px;font-weight:500;line-height:1.4;margin-bottom:24px;text-wrap:balance}
@media (max-width:1279px){.home-calm .hero.hero-pitch{padding-top:64px}}
@media (max-width:899px){.home-calm .hero.hero-pitch{padding-top:56px}
  .home-calm .hero .hero-copy .eyebrow{font-size:18px;margin-bottom:22px}}
@media (max-width:700px){.home-calm .hero.hero-pitch{padding-top:36px}
  .home-calm .hero .hero-copy .eyebrow{font-size:16px;line-height:1.4;margin-bottom:16px}}
/* hero sub line: 3 balanced lines on tablet and desktop */
@media (min-width:701px){.home-calm .hero.hero-pitch .sub{max-width:62ch}}
/* hero headline (PR 156, Design Oct 29): "runaway integration," never splits; phone = 3 balanced lines */
.home-calm .hero.hero-pitch h1 .nobr{white-space:nowrap}
.home-calm .hero.hero-pitch .sub-phone{display:none}
@media (max-width:599px){
  .home-calm .hero.hero-pitch h1,.home-calm .hero.hero-pitch h1 .h1-line{font-size:clamp(28px,calc(12.7vw - 13.6px),36px);line-height:1.1;text-wrap:balance}
  .home-calm .hero.hero-pitch h1{margin:0}
  .home-calm .hero.hero-pitch h1 .h1-line{white-space:normal}
  .home-calm .hero .hero-copy .eyebrow{margin-bottom:14px}
  .home-calm .hero.hero-pitch .sub{margin-top:20px}
  /* phone option A (Tyler, Oct 29 6:05 PM): calmer phone hero */
  .home-calm .hero.hero-pitch{padding-top:40px}
  .home-calm .hero.hero-pitch>.wrap{padding-left:24px;padding-right:24px}
  .home-calm .hero .hero-copy .eyebrow{font-size:13px;line-height:1.45;color:var(--muted);margin-bottom:14px}
  .home-calm .hero.hero-pitch .sub{font-size:16px;line-height:1.5;max-width:17rem;margin:20px auto 0;margin-inline:auto;text-wrap:balance}
  /* 17rem = 272px: in Geist Body 1ch is 11px, so 32ch (352px) never bound inside the 327px column */
  .home-calm .hero-pitch .cta-row{display:flex;margin-top:32px}
  .home-calm .hero-pitch .cta-row .btn-lg{flex:1 1 100%;width:100%;justify-content:center}
  .home-calm .hero.hero-pitch .hero-code{margin:56px 0 0;width:100%;max-width:100%;min-width:0}
  .home-calm .hero.hero-pitch .hero-code .term{border-radius:12px;border-left:1px solid var(--line, rgba(255,255,255,.12));border-right:1px solid var(--line, rgba(255,255,255,.12));overflow:hidden}
  .home-calm .hero.hero-pitch .hero-code .ans-deny{border-radius:0 0 12px 12px}
  .home-calm .hero.hero-pitch .hero-code pre{white-space:pre;overflow-wrap:normal;word-break:normal;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .home-calm .hero.hero-pitch .hero-code .term pre{padding:16px 18px}
  .home-calm .hero.hero-pitch .hero-code .ans pre{padding:0 18px 0 15px}
  /* labels wrap with a hanging indent under the text after "Allow · " (8ch) / "Deny · " (7ch); the label font is monospace (QA P156-13) */
  .home-calm .hero.hero-pitch .hero-code .ans .lab{display:block;white-space:normal}
  .home-calm .hero.hero-pitch .hero-code .ans-allow .lab{padding-left:8ch;text-indent:-8ch}
  .home-calm .hero.hero-pitch .hero-code .ans-deny .lab{padding-left:7ch;text-indent:-7ch}
  /* phone option B: no eyebrow, short subhead (PROPOSAL for Tyler). display:none also removes the hidden one from the accessibility tree */
  .home-calm .hero .hero-copy .eyebrow{display:none}
  .home-calm .hero.hero-pitch .sub-long{display:none}
  .home-calm .hero.hero-pitch .sub-phone{display:block}
}

/* Homepage decide() animation (v2, Oct 31) under "Get started free", curl box below it.
   Animation adapted from app public/login.css (design 1016) for the light homepage. */

/* ---- Animation: light band ---- */
.home-calm .hero-visual .decide-viz{max-width:800px;width:100%;margin:48px auto 0;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:44px 24px 18px;position:relative;isolation:isolate;overflow:hidden}
.home-calm .decide-viz::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:.5;-webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);z-index:-1}
.home-calm .decide-viz .gate{position:relative;height:288px;display:grid;grid-template-rows:repeat(6,1fr);font-family:var(--mono);overflow:visible}
.home-calm .decide-viz .gate-post{position:absolute;left:50%;top:-10px;bottom:-6px;width:2px;transform:translateX(-50%);background:linear-gradient(transparent,var(--accent) 12%,var(--accent) 88%,transparent);z-index:1}
.home-calm .decide-viz .gate-label{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font:600 .75rem/1 var(--mono);color:var(--accent-hover);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:6px;padding:5px 8px;white-space:nowrap}
.home-calm .decide-viz .lane{position:relative;border-top:1px dashed var(--line)}
.home-calm .decide-viz .lane:first-of-type,.home-calm .decide-viz .gate-post+.lane{border-top:0}
.home-calm .decide-viz .call{position:absolute;top:50%;left:0;display:inline-flex;align-items:center;gap:7px;transform:translate(0,-50%);padding:5px 10px 5px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line-strong);font-size:.75rem;line-height:1.2;color:var(--ink);white-space:nowrap;z-index:2;will-change:left,transform,opacity}
.home-calm .decide-viz .call b{font-weight:500}
.home-calm .decide-viz .call::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.home-calm .decide-viz .call i{font-style:normal;font-weight:600;font-size:.6875rem;letter-spacing:.04em}
.home-calm .decide-viz .call.is-allow{animation:dv-allow var(--d,7s) cubic-bezier(.45,.05,.35,1) var(--delay,0s) infinite}
.home-calm .decide-viz .call.is-deny{animation:dv-deny var(--d,7s) cubic-bezier(.45,.05,.35,1) var(--delay,0s) infinite}
.home-calm .decide-viz .call.is-allow i::after{content:"";animation:dv-lbl-allow var(--d,7s) var(--delay,0s) infinite}
.home-calm .decide-viz .call.is-deny i::after{content:"";animation:dv-lbl-deny var(--d,7s) var(--delay,0s) infinite}
.home-calm .decide-viz .call.is-allow::before{animation:dv-dot-allow var(--d,7s) var(--delay,0s) infinite}
.home-calm .decide-viz .call.is-deny::before{animation:dv-dot-deny var(--d,7s) var(--delay,0s) infinite}
/* Pills fade in and out fully inside the band: they never cross its edges, so no word fragments. */
.home-calm .decide-viz .l1 .call{--d:7.5s;--delay:-1.2s}.home-calm .decide-viz .l2 .call{--d:8.5s;--delay:-4.6s}.home-calm .decide-viz .l3 .call{--d:6.8s;--delay:-3.1s}
.home-calm .decide-viz .l4 .call{--d:8s;--delay:-6.2s}.home-calm .decide-viz .l5 .call{--d:7.2s;--delay:-2.4s}.home-calm .decide-viz .l6 .call{--d:9s;--delay:-5.5s}
.home-calm .decide-viz .viz-legend{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:16px;font:500 .75rem/1.3 var(--mono);color:var(--muted)}
.home-calm .decide-viz .lg{display:inline-flex;align-items:center;gap:8px}
.home-calm .decide-viz .lg::before{content:"";width:8px;height:8px;border-radius:50%}
.home-calm .decide-viz .lg-allow::before{background:var(--accent)}.home-calm .decide-viz .lg-deny::before{background:var(--deny)}
.home-calm .decide-viz .viz-note{margin-left:auto}

/* Reduced motion: still frame, allow pills resolved right of the line, deny pills held left of it. */
@media (prefers-reduced-motion:reduce){
  .home-calm .decide-viz .call,.home-calm .decide-viz .call::before,.home-calm .decide-viz .call i::after{animation:none!important}
  .home-calm .decide-viz .call{opacity:1}
  .home-calm .decide-viz .call.is-allow{left:100%;transform:translate(calc(-100% - 4px),-50%);border-color:var(--accent);background:var(--accent-soft)}
  .home-calm .decide-viz .call.is-allow::before{background:var(--accent)}.home-calm .decide-viz .call.is-allow i::after{content:"allow";color:var(--accent-hover)}
  .home-calm .decide-viz .call.is-deny{left:50%;transform:translate(calc(-100% - 6px),-50%);border-color:var(--deny);background:var(--deny-soft)}
  .home-calm .decide-viz .call.is-deny::before{background:var(--deny)}.home-calm .decide-viz .call.is-deny i::after{content:"deny";color:var(--deny-ink)}
}

/* Code box sits right under the animation */
.home-calm .hero-visual .decide-viz+.hero-code{margin-top:24px}
.home-calm .hero-code .ln{display:inline}

/* v2: neutral line + two-line label, edge captions */
.home-calm .hero-visual .decide-viz{padding-top:76px}
.home-calm .decide-viz .gate-post{background:linear-gradient(transparent,#3F4650 12%,#3F4650 88%,transparent)}
.home-calm .decide-viz .gate-label{top:-50px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;background:#F2F3F5;border:1px solid #D3D6DC;color:var(--ink);font:600 .8125rem/1.1 var(--sans);letter-spacing:0}
.home-calm .decide-viz .gl-name{font-weight:600}
.home-calm .decide-viz .gl-fn{font:500 .6875rem/1 var(--mono);color:var(--muted)}
.home-calm .decide-viz .edge{position:absolute;top:18px;font-family:var(--sans);font-size:.75rem;line-height:1.2;color:var(--muted)}
.home-calm .decide-viz .edge-in{left:24px}.home-calm .decide-viz .edge-out{right:24px}

/* Phone: 3 lanes, smaller pills, code wraps with a hanging indent */
@media (max-width:700px){
  .home-calm .hero-visual .decide-viz{margin-top:32px;padding:36px 10px 14px;border-radius:12px}
  .home-calm .decide-viz .gate{height:132px;grid-template-rows:repeat(3,1fr)}
  .home-calm .decide-viz .lane.l4,.home-calm .decide-viz .lane.l5,.home-calm .decide-viz .lane.l6{display:none}
  .home-calm .decide-viz .gate-label{top:-46px;padding:5px 8px;font-size:.75rem}
  .home-calm .hero-visual .decide-viz{padding-top:68px}
  .home-calm .decide-viz .edge{top:14px;font-size:.6875rem}
  .home-calm .decide-viz .edge-in{left:12px}.home-calm .decide-viz .edge-out{right:12px}
  .home-calm .decide-viz .call{font-size:.625rem;gap:5px;padding:4px 7px 4px 6px;letter-spacing:-.01em}
  .home-calm .decide-viz .call::before{width:6px;height:6px}
  .home-calm .decide-viz .call i{font-size:.625rem;letter-spacing:0}
  .home-calm .decide-viz .viz-legend{padding:0 4px}
  .home-calm .decide-viz .viz-legend{font-size:.6875rem;gap:6px 14px;margin-top:12px}
  .home-calm .decide-viz .viz-note{margin-left:0;flex-basis:100%}
  .home-calm .hero-visual .decide-viz+.hero-code{margin-top:20px}
  .home-calm .hero-code .term-bar>span:last-child{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance;line-height:1.35}
  .home-calm .hero-code pre{white-space:pre-wrap!important;overflow-x:visible!important;word-break:normal;overflow-wrap:normal}
  .home-calm .hero-code pre code{display:grid}
  .home-calm .hero-code .ln{display:block;padding-left:4ch;text-indent:-4ch}
  .home-calm .hero-code .nobr{white-space:nowrap}
  .home-calm .hero-code .ans .lab{text-wrap:balance}
}

/* Pause/play (WCAG 2.2.2): space is reserved (visibility, not display) so nothing shifts when main.js enables it. */
.home-calm .decide-viz .dv-toggle{flex:none;visibility:hidden;font:500 .6875rem/1 var(--mono);color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:5px 10px;cursor:pointer}
.home-calm .decide-viz.js-ready .dv-toggle{visibility:visible}
.home-calm .decide-viz .dv-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.home-calm .decide-viz .viz-note+.dv-toggle{margin-left:0}
.home-calm .decide-viz.is-paused .call,.home-calm .decide-viz.is-paused .call::before,.home-calm .decide-viz.is-paused .call i::after{animation-play-state:paused}
@media (max-width:700px){.home-calm .decide-viz .viz-note{flex:1 1 auto;flex-basis:auto}}
@media (prefers-reduced-motion:reduce){.home-calm .decide-viz .dv-toggle{display:none}}
/* QA P173 fixes (Oct 31). Narrow phones: smaller pills and side padding so the longest allow pill
   ("create_invoice allow") stays inside the band; caption row clear of the "Plan check" label. */
@media (max-width:400px){
  .home-calm .hero-visual .decide-viz{padding-left:6px;padding-right:6px;padding-top:92px}
  .home-calm .decide-viz .edge-in{left:10px}.home-calm .decide-viz .edge-out{right:10px}
  .home-calm .decide-viz .call{font-size:.5625rem;gap:4px;padding:4px 6px 4px 5px}
  .home-calm .decide-viz .call i{font-size:.5625rem}
}
/* Tablet: when the toggle wraps to its own row, keep it right-aligned under the note. */
@media (min-width:753px) and (max-width:835px){.home-calm .decide-viz .viz-note+.dv-toggle{margin-left:auto}}

/* Tap targets (Tyler, Nov 2): 44x44 px hit area for the animation's Pause button and the /company LinkedIn icon.
   The visual stays the same size; an invisible pseudo-element extends the clickable area around its centre. */
.home-calm .decide-viz .dv-toggle,.li-link{position:relative}
.home-calm .decide-viz .dv-toggle::after,.li-link::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}