/* Brain for Every Business — the B2B door. Its own brand, "the Ledger": paper ground, ledger-green ink,
   and one vermilion signal kept for the exception, the only thing that reaches the owner. It takes from
   The Quarter Engineer what makes the house a house (one dot in the top-right corner of the mark, tracked
   capitals for labels, an editorial measure) and nothing of its skin: no near-black, no cream, no gold.
   One page, one ask. CSP is self-only: no inline style anywhere, fonts self-hosted. */
/* Newsreader-400-normal.woff2 is the variable font (weight and optical size axes): one file, every weight */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/Newsreader-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/InstrumentSans-400-700-normal.woff2) format("woff2")}

:root{
  --paper:#F4F2EB;--panel:#E9EDE4;--ink:#0E2A21;--read:#24372F;--ink-2:#4A5D55;--mute:#5D6C65;
  --hair:rgba(14,42,33,.13);--rule:rgba(14,42,33,.3);
  --green:#14432F;--green-2:#1C5A40;--signal:#C2412A;--signal-ink:#A93823;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --caps:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:1.35rem;--max:64rem;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern","liga"}
::selection{background:var(--green);color:var(--paper)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:50;background:var(--green);color:var(--paper);padding:.6rem .9rem}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ————— the house marks, in this door's hand ————— */
.caps{font-family:var(--caps);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);line-height:1.6}
.dot::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);margin-right:.8em;vertical-align:.04em}
.total{width:3rem;height:5px;border-top:1px solid var(--green);border-bottom:1px solid var(--green);margin:0}
.inline{border-bottom:1px solid var(--rule);transition:border-color .2s ease,color .2s ease}.inline:hover{border-bottom-color:var(--signal);color:var(--ink)}

/* ————— masthead: the mark and the name, like a letterhead | three words ————— */
.mast{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding:1rem var(--pad);padding-top:calc(1rem + env(safe-area-inset-top,0px));border-bottom:1px solid transparent;transition:background-color .4s ease,border-color .4s ease,padding .4s ease}
.mast.is-stuck{background:rgba(244,242,235,.92);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);border-bottom-color:var(--hair);padding-top:calc(.7rem + env(safe-area-inset-top,0px));padding-bottom:.7rem}
.lock{display:inline-flex;align-items:center;gap:.7rem;color:var(--ink);transition:opacity .3s ease}.lock:active{opacity:.6}
.lock .mk{width:1.5rem;height:1.5rem;flex:none}
.lock .wm{font-family:var(--serif);font-weight:500;font-size:1.0625rem;letter-spacing:-.005em;line-height:1;white-space:nowrap}
.mast .end{flex:none;display:flex;gap:1.5rem}
.mast .end a{font-family:var(--caps);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);position:relative}
.mast .end a:hover{color:var(--ink)}

/* ————— cover: the promise, and the ledger it keeps ————— */
.cover{position:relative;padding:clamp(8rem,22vh,11rem) var(--pad) 3.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;max-width:var(--max);margin:0 auto}
.cover .issue{color:var(--ink-2)}
.cover h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.45rem,10vw,3.6rem);line-height:1.03;letter-spacing:-.02em;margin:0;color:var(--ink);max-width:15ch;text-wrap:balance}
.cover .dek{margin:.2rem 0 0;font-size:1.15rem;line-height:1.62;color:var(--read);max-width:34rem;text-wrap:pretty}
.cover-note{color:var(--mute)}
/* the ledger: a day of routine decisions taken, two exceptions flagged. Decoration that says the offer. */
.ledger{width:100%;height:5.25rem;margin-top:.6rem}

/* ————— sections ————— */
.section{padding:3.75rem var(--pad) 0;max-width:var(--max);margin:0 auto;scroll-margin-top:6rem}
.section+.section{margin-top:1rem;border-top:1px solid var(--rule);padding-top:4rem}
.section>.caps{display:block;margin:0 0 1.05rem}
.section h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.95rem,7vw,2.6rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 1.2rem;color:var(--ink);max-width:18ch;text-wrap:balance}
.section .lead{margin:0 0 1.8rem;max-width:34rem;color:var(--read);font-size:1.1rem;line-height:1.62;text-wrap:pretty}
.section p{color:var(--read);font-size:1.06rem;line-height:1.62;max-width:36rem;margin:0;text-wrap:pretty}
.proof-body p+p{margin-top:1.2rem}

/* the loops, ruled like a ledger: name | the brain decides | your hand keeps (the exception, dotted) */
.loops{list-style:none;margin:0;padding:0}
.loops li{display:grid;grid-template-columns:1fr;gap:.3rem .5rem;padding:1.05rem 0;border-top:1px solid var(--hair);min-width:0}
.loops li:last-child{border-bottom:1px solid var(--rule)}
.loops .name{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.2;color:var(--ink)}
.loops .k{display:block;margin-top:.35rem}
.loops .v{color:var(--read);font-size:1.02rem;line-height:1.55;margin:0}
.loops .hand{position:relative;padding-left:1.15rem;color:var(--ink-2)}
.loops .hand::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--signal)}
.loops-note{margin-top:1.4rem!important;color:var(--ink-2)!important}

/* the laws: each a filled cell */
.laws{list-style:none;margin:0;padding:0;max-width:38rem}
.laws li{padding:.95rem 0 .95rem 1.7rem;border-top:1px solid var(--hair);position:relative;color:var(--read);font-size:1.06rem;line-height:1.55}
.laws li:last-child{border-bottom:1px solid var(--rule)}
.laws li::before{content:"";position:absolute;left:0;top:1.5rem;width:.55rem;height:.55rem;border-radius:1.5px;background:var(--green)}

/* the ladder: numbered because the order is the offer */
.steps{list-style:none;margin:0;padding:0;max-width:40rem;counter-reset:step}
.steps li{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--hair);color:var(--read);font-size:1.06rem;line-height:1.58;min-width:0;counter-increment:step}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--caps);font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--green);padding-top:.3rem;font-variant-numeric:tabular-nums}
.steps b{font-weight:500;color:var(--ink)}

/* ————— the one ask: a form on its own leaf ————— */
.ask form{margin:0;max-width:36rem;position:relative;display:grid;gap:1.15rem;background:var(--panel);border:1px solid var(--hair);border-radius:4px;padding:1.35rem 1.15rem 1.5rem}
.field{display:grid;gap:.3rem;min-width:0;align-content:start}
.field label{font-family:var(--caps);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ask input,.ask textarea,.ask select{width:100%;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;color:var(--ink);font-family:var(--serif);font-size:1.06rem;line-height:1.45;padding:.6rem 0;outline:none;transition:border-color .25s ease,box-shadow .25s ease}
.ask textarea{resize:vertical;min-height:5.5rem}
.ask select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:1.6rem;cursor:pointer}
.ask select:invalid{color:var(--mute)}
.ask select option{background:#fff;color:var(--ink)}
.ask input::placeholder,.ask textarea::placeholder{color:var(--mute);opacity:1}
.ask input:focus,.ask textarea:focus,.ask select:focus{border-bottom-color:var(--green);box-shadow:0 1px 0 0 var(--green)}
.ask input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--panel) inset;caret-color:var(--ink)}
.two{display:grid;gap:1.15rem}
.ask button{justify-self:start;-webkit-appearance:none;appearance:none;cursor:pointer;background:var(--green);color:var(--paper);border:0;border-radius:3px;font-family:var(--caps);font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:1.05rem 1.7rem;transition:background-color .2s ease,opacity .2s ease}
.ask button:hover{background:var(--green-2)}.ask button:active{opacity:.8}.ask button[disabled]{opacity:.5;cursor:default}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.consent{color:var(--mute)!important;font-size:.95rem!important;line-height:1.55!important;max-width:34rem}
.ask-err{margin:.9rem 0 0;font-size:.98rem;line-height:1.5;color:var(--signal-ink);max-width:36rem}
.ask-done h2{margin-bottom:1rem}
.meanwhile{margin-top:2.2rem;display:grid;gap:.55rem;justify-items:start}
.meanwhile .caps{margin:0 0 .35rem}
.meanwhile a{font-size:1.03rem;color:var(--ink-2)}

/* ————— the call: three pages in one leaf. Every choice is a closed cell; the text fields are the ones that are truly text ————— */
.mast .end .go{color:var(--ink)}.mast .end .go::before{content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:var(--signal);margin-right:.55em;vertical-align:.1em}
.flow{gap:1.4rem;grid-template-columns:minmax(0,1fr)}
.flow .ask-err{margin:0}
.field-l,.ask .tick span{font-family:var(--caps);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.hint{display:block;color:var(--mute);font-size:.9rem;line-height:1.45;font-family:var(--serif)}
.stepper{display:flex;gap:1.1rem;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--rule);color:var(--mute);min-width:0}
.stepper em{font-style:normal}
.stepper li{display:flex;align-items:center;gap:.5rem;padding-bottom:.75rem;margin-bottom:-1px;border-bottom:2px solid transparent;white-space:nowrap}
.stepper li span{display:inline-grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;border:1px solid currentColor;font-size:.5625rem;letter-spacing:0;font-variant-numeric:tabular-nums}
.stepper .is-on{color:var(--ink);border-bottom-color:var(--green)}
.stepper .is-done{color:var(--ink-2)}.stepper .is-done span{background:var(--green);border-color:var(--green);color:var(--paper)}
.page{border:0;padding:0;margin:0;min-width:0;display:grid;gap:1.15rem}
.js .page:not(.is-on){display:none}
.js .combo select{display:none}
/* searchable lists */
.combo{position:relative}
.combo-list{position:absolute;left:0;right:0;top:100%;z-index:5;margin:.2rem 0 0;padding:.3rem 0;list-style:none;background:#fff;border:1px solid var(--hair);border-radius:4px;box-shadow:0 12px 32px rgba(14,42,33,.14);max-height:15rem;overflow:auto;overscroll-behavior:contain}
.combo-list li{padding:.5rem .85rem;font-size:1rem;line-height:1.35;color:var(--ink);cursor:pointer}
.combo-list li[aria-selected=true],.combo-list li:hover{background:var(--panel)}
.combo-list .grp{font-family:var(--caps);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:.7rem .85rem .25rem;cursor:default}
.combo-list .grp:hover{background:transparent}
.combo-list small{color:var(--mute);font-size:.85rem;margin-left:.45em}
/* cells: pills for the one-of and some-of, cards for the loops, days and bands for the window */
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill,.card,.day,.band,.tick{position:relative;display:block;min-width:0}
.field .pill,.field .card,.field .day,.field .band,.field .tick{font-family:var(--serif);font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.flow,.ask-done{scroll-margin-top:7.5rem}
.pill input,.card input,.day input,.band input,.tick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pill span{display:inline-block;padding:.6rem .95rem;border:1px solid var(--rule);border-radius:999px;font-family:var(--caps);font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;user-select:none}
.pill input:checked+span{background:var(--green);border-color:var(--green);color:var(--paper)}
.cards{display:grid;gap:.5rem}
.card span{position:relative;display:grid;gap:.15rem;padding:.8rem 2rem .85rem .95rem;border:1px solid var(--hair);border-radius:4px;background:var(--paper);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.card b{font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.25;color:var(--ink)}
.card small{font-family:var(--serif);font-size:.92rem;line-height:1.4;color:var(--mute)}
.card span::after{content:"";position:absolute;top:.95rem;right:.9rem;width:.5rem;height:.5rem;border-radius:50%;border:1px solid var(--rule);transition:background-color .15s ease,border-color .15s ease}
.card input:checked+span{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.card input:checked+span::after{background:var(--signal);border-color:var(--signal)}
.card--all span{background:var(--panel)}
.flow .field{min-width:0}
.days{display:flex;gap:.45rem;overflow-x:auto;padding:.1rem 0 .4rem;margin-top:.3rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.day{flex:none;scroll-snap-align:start}
.day span{display:grid;justify-items:center;gap:.15rem;min-width:3.7rem;padding:.6rem .55rem .55rem;border:1px solid var(--rule);border-radius:4px;background:var(--paper);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.day i{font-style:normal;font-family:var(--caps);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.day b{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.day em{font-style:normal;font-family:var(--caps);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.day input:checked+span{background:var(--green);border-color:var(--green)}.day input:checked+span *{color:var(--paper)}
.bands{display:grid;gap:.5rem}
.band span{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.15rem .8rem;padding:.75rem .95rem .8rem;border:1px solid var(--hair);border-radius:4px;background:var(--paper);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.band b{font-family:var(--serif);font-weight:500;font-size:1.08rem;line-height:1.25;color:var(--ink)}
.band i{font-style:normal;font-family:var(--caps);font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:right;white-space:nowrap}
.band small{grid-column:1/-1;font-family:var(--serif);font-size:.92rem;color:var(--ink-2)}
.band input:checked+span{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.band input:disabled+span{opacity:.42;cursor:default}
.tick{margin-top:.5rem}.tick span{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;letter-spacing:.14em}
.tick span::before{content:"";display:inline-block;width:.85rem;height:.85rem;border:1px solid var(--rule);border-radius:2px;background:var(--paper);transition:background-color .15s ease,border-color .15s ease}
.tick input:checked+span::before{background:var(--green);border-color:var(--green);box-shadow:inset 0 0 0 3px var(--paper)}
.kb .pill input:focus-visible+span,.kb .card input:focus-visible+span,.kb .day input:focus-visible+span,.kb .band input:focus-visible+span,.kb .tick input:focus-visible+span{outline:2px solid var(--green);outline-offset:3px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ask .nav .back{background:transparent;color:var(--ink-2);padding-left:0;padding-right:0;border-radius:0}
.ask .nav .back:hover{background:transparent;color:var(--ink)}
.ask .nav .next,.ask .nav .send{margin-left:auto}
.ask-done .when{margin-bottom:.8rem}
.ask-done .when-ist{margin-bottom:.6rem}
.ask-done .when-mail{color:var(--ink-2)!important}

/* ————— colophon ————— */
.colophon{margin:4.25rem 0 0;padding:2.4rem var(--pad) calc(3rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule);max-width:var(--max);margin-inline:auto;display:grid;gap:1.7rem 1.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.colophon .caps{display:block;margin:0 0 .7rem}
.colophon a,.colophon p{display:block;margin:0;font-family:var(--serif);font-size:.9375rem;line-height:1.75;color:var(--ink-2)}
.colophon a{transition:color .2s;position:relative}.colophon a:hover{color:var(--ink)}
.colophon a{overflow-wrap:anywhere}
.colophon .est{color:var(--mute)}
.colophon>div:last-child{grid-column:1/-1}
.mast .end a::after,.colophon a::after{content:"";position:absolute;left:0;right:0;bottom:-.34em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .42s cubic-bezier(.16,1,.3,1)}
.mast .end a:hover::after,.colophon a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* reading progress, in the ledger's green */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;pointer-events:none}
.progress i{display:block;height:100%;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear}
/* the cover arrives in order; everything else is visible at rest */
.js .cover [data-r]{opacity:0;transform:translate3d(0,18px,0);will-change:opacity,transform}
.js .cover .r-in{opacity:1;transform:none;transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
.kb a:focus-visible,.kb button:focus-visible,.kb input:focus-visible,.kb textarea:focus-visible,.kb select:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* ————— tablet and up ————— */
@media (min-width:40rem){
  .ask form{padding:1.8rem 1.8rem 2rem}
  .two{grid-template-columns:1fr 1fr;gap:1.15rem 2rem}
  .ledger{height:7rem}
}
/* ————— desktop ————— */
@media (min-width:58rem){
  :root{--pad:3rem}
  body{font-size:1.1875rem}
  .lock .mk{width:1.65rem;height:1.65rem}
  .lock .wm{font-size:1.15rem}
  .cover{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:4.5rem;row-gap:1.4rem;align-items:start;padding-top:clamp(9rem,24vh,13rem);padding-bottom:4.5rem}
  .cover>*{grid-column:1}
  .cover h1{font-size:clamp(3.1rem,4.4vw,4.3rem);max-width:15ch}
  .cover .dek{font-size:1.22rem;max-width:36rem}
  .cover .ledger{grid-column:2;grid-row:2/6;align-self:center;height:auto;aspect-ratio:282/154;margin:0}
  .section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:1rem 4rem;align-items:start;padding-top:4.5rem}
  .section+.section{padding-top:5rem}
  .section>.caps,.section>h2,.section>.lead{grid-column:1}
  .section>.loops,.section>.laws,.section>.steps,.section>form,.section>.ask-err,.section>.ask-done,.section>.proof-body{grid-column:2;grid-row:1/6}
  /* the loops need the full width: heading and lead side by side, the ledger under both */
  .section--wide>.caps{grid-column:1;grid-row:1}
  .section--wide>h2{grid-column:1;grid-row:2;margin-bottom:0}
  .section--wide>.lead{grid-column:2;grid-row:2;align-self:end;margin:0}
  .section--wide>.loops{grid-column:1/-1;grid-row:3;margin-top:2rem}
  .section--wide>.loops-note{grid-column:1/-1;grid-row:4}
  .loops li{grid-template-columns:12rem minmax(0,1fr) minmax(0,1fr);gap:.5rem 2.5rem;align-items:baseline}
  .loops .k{display:none}
  .loops-head{display:grid;grid-template-columns:12rem minmax(0,1fr) minmax(0,1fr);gap:.5rem 2.5rem;padding:0 0 .7rem!important;border-top:0!important}
  .loops-head span:last-child::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--signal);margin-right:.7em;vertical-align:.06em}
  .colophon{grid-template-columns:repeat(3,1fr) auto}
  .colophon>div:last-child{grid-column:auto}
}
@media (max-width:57.99rem){.loops .loops-head{display:none}}
@media (max-width:32rem){
  .mast{flex-wrap:wrap}
  .lock .wm{font-size:1rem}
  .mast .end{gap:.6rem 1.1rem;flex:1 1 100%;min-width:0;flex-wrap:wrap}
  .mast .end a{font-size:.5625rem;letter-spacing:.12em}
  .ask button{justify-self:stretch}
  .nav .next,.nav .send{flex:1}
  .stepper{gap:.9rem}.stepper li:not(.is-on) em{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .cover [data-r]{opacity:1;transform:none}html{scroll-behavior:auto}}
@media print{.mast,.colophon,.progress,.ask,.ledger{display:none}body{background:#fff;color:#111}}