/* Meadowbrook Systems - Big & Light, applied as THE WORK ORDER.
   World pinned from the site DESIGN.md: warm gallery ground, ink acting in
   near-black, ONE family (Satoshi) by weight, Sometype Mono strictly on
   measured values, hairline rulings, floating sheets on long warm shadows,
   gold spent solely on the parish-verified line. */
@font-face{font-family:Satoshi;src:url(/static/fonts/Satoshi-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(/static/fonts/Satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(/static/fonts/Satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Satoshi;src:url(/static/fonts/Satoshi-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Sometype Mono";src:url(/static/fonts/SometypeMono-500.woff2) format("woff2");font-weight:500;font-display:swap}

*{box-sizing:border-box;margin:0}
:root{
  --ink:#1a1712;--ink-hover:#0f0d0a;--ground:#f2ebdf;--band:#e9e1d3;
  --card:#faf7f0;--muted:#6a6355;--faint:#a8a08f;--line:#ddd4c4;
  --gold:#a9812f;
  --shadow:0 40px 90px -30px rgba(40,32,20,.34);
  --shadow-sm:0 20px 44px -20px rgba(40,32,20,.28);
  --mono:"Sometype Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html{scroll-behavior:smooth}
body{font:400 17px/1.65 Satoshi,system-ui,sans-serif;letter-spacing:-0.01em;
  color:var(--ink);background:var(--ground)}

/* ---- nav: the site's floating pill bar ---- */
.top{position:sticky;top:14px;z-index:10;display:flex;justify-content:space-between;
  align-items:center;height:58px;max-width:1240px;margin:14px auto 0;
  padding:0 8px 0 24px;background:rgba(250,247,240,.92);
  border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-sm)}
.brand{color:var(--ink);font-weight:700;text-decoration:none;font-size:17px;
  letter-spacing:-.02em}
.brand span{font-weight:400;color:var(--muted)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{height:15px;width:auto;flex-shrink:0}
.top nav{display:flex;align-items:center;gap:2px}
.top nav a{color:var(--ink);text-decoration:none;font-size:13px;padding:10px 16px;
  border-radius:999px;white-space:nowrap}
.top nav a:hover{background:var(--band)}
.top nav a.cta{background:var(--ink);color:var(--ground);height:42px;
  display:inline-flex;align-items:center;padding:0 22px;font-weight:500;
  transition:transform .18s cubic-bezier(.22,1,.36,1)}
.top nav a.cta:hover{background:var(--ink-hover);transform:translateY(-2px)}

main{max-width:1240px;margin:0 auto;padding:0 24px}
main a{color:var(--ink)}
section{padding:clamp(64px,9vw,130px) 0}
section+section{padding-top:0}

/* ---- type ---- */
h1{font-size:clamp(46px,6.4vw,88px);font-weight:900;line-height:.96;
  letter-spacing:-.04em;text-wrap:balance}
h2{font-size:clamp(34px,4.4vw,62px);font-weight:700;line-height:1.04;
  letter-spacing:-.03em;margin-bottom:34px;text-wrap:balance}
.center-head{text-align:center}
.pricing-wrap .rate{margin:0 auto}
.pricing-wrap .integrate{margin-left:auto;margin-right:auto}
.sub{font-size:19px;color:var(--muted);max-width:54ch;margin-top:26px}
.mut{color:var(--muted)}
.faint{color:var(--faint)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;height:52px;padding:0 28px;
  background:var(--ink);color:var(--ground);text-decoration:none;
  border-radius:999px;font-weight:500;border:0;font-size:15px;cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1)}
.btn:hover{background:var(--ink-hover);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.try-note{font:400 13px/1.4 Satoshi,system-ui,sans-serif;color:var(--muted);
  margin-left:16px}

/* ---- hero: claim left, the filled sheet floating right ---- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(36px,5vw,80px);align-items:center;
  min-height:calc(100svh - 120px);padding:clamp(40px,6vw,80px) 0}
.hero-copy .btn{margin-top:34px}

/* ---- the sheet: the work-order artifact ---- */
.sheet{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:clamp(20px,2.4vw,30px);max-width:600px}
.hero-sheet{transform:rotate(.4deg)}
.hero-sheet img{max-height:270px;object-fit:cover;object-position:center 40%}
.sheet-head{display:flex;justify-content:space-between;gap:14px;
  font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line)}
.sheet img{width:100%;border-radius:10px;display:block;margin:16px 0 18px;
  height:auto}
.li{display:flex;align-items:baseline;padding:7px 0}
.li .k{font:500 11px/1.4 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.li .dots{flex:1;border-bottom:2px dotted var(--line);margin:0 12px;
  transform:translateY(-4px);min-width:24px}
.li .v{font:500 16px/1.2 var(--mono);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.li .v.txt{font:400 14px/1.4 Satoshi,system-ui,sans-serif;color:var(--ink);
  white-space:normal;text-align:right}
.li .v.addr{font-size:14px}
.li.big{padding:10px 0}
.li.big .v{font-size:clamp(22px,2.4vw,30px)}
/* the gold tick: 7x13 corner, the ONLY gold on the page, verified lines only */
.tick{display:inline-block;width:7px;height:13px;
  border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
  transform:rotate(45deg);margin:0 2px 2px 10px}
.verify-note{font:400 13px/1.5 Satoshi,system-ui,sans-serif;color:var(--muted);
  margin:2px 0 8px;max-width:52ch}

/* ---- steps: ruled rows, not cards ---- */
.steps-wrap h2{max-width:14ch}
.steps{border-top:1px solid var(--line);max-width:860px}
.step{display:grid;grid-template-columns:minmax(200px,260px) 1fr;
  gap:10px 40px;border-bottom:1px solid var(--line);padding:26px 0}
.step b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.step p{color:var(--muted);font-size:16px;max-width:52ch}

/* ---- pricing / rate sheet ---- */
.rate{max-width:480px;box-shadow:var(--shadow-sm)}
.rate .btn{margin-top:22px}
.integrate{margin-top:44px;max-width:62ch;color:var(--muted);font-size:16px;
  padding-top:22px;border-top:1px solid var(--line)}
.integrate strong{color:var(--ink)}
.integrate a{color:var(--ink)}

/* ---- honesty band ---- */
.band{background:var(--band);border-radius:18px;
  padding:clamp(40px,5vw,64px);margin-bottom:clamp(40px,6vw,80px)}
.band h2{margin-bottom:22px}
.band p{max-width:65ch;color:var(--muted);margin-bottom:12px;font-size:16px}

/* ---- tool page ---- */
.toolbox{padding-top:clamp(48px,7vw,90px)}
.toolbox h1{font-size:clamp(38px,4.6vw,62px)}
.toolbox .mut{margin-top:14px}
.lookup{display:flex;gap:10px;margin:30px 0;max-width:620px}
.lookup input{flex:1;padding:0 20px;height:52px;border:1px solid var(--line);
  border-radius:999px;font:400 16px Satoshi,system-ui,sans-serif;
  background:var(--card);color:var(--ink);min-width:0}
.lookup input::placeholder{color:var(--faint)}
.lookup input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lookup > button{height:52px;padding:0 26px;background:var(--ink);
  color:var(--ground);border:0;border-radius:999px;
  font:500 15px Satoshi,system-ui,sans-serif;cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1);white-space:nowrap}
.lookup > button:hover{transform:translateY(-2px)}
.lookup > button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.suggest{display:none;position:absolute;top:calc(100% + 8px);z-index:20;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-sm);overflow:hidden}
.suggest-item{display:flex;justify-content:space-between;gap:16px;width:100%;
  padding:13px 18px;background:none;border:0;border-top:1px solid var(--line);
  font:400 15px Satoshi,system-ui,sans-serif;color:var(--ink);cursor:pointer;
  text-align:left}
.suggest-item:first-child{border-top:0}
.suggest-item:hover,.suggest-item.active{background:var(--band)}
.suggest-item .s-city{color:var(--muted);font-size:13px;white-space:nowrap}
.note{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:22px 26px;margin:20px 0;max-width:640px;box-shadow:var(--shadow-sm)}
.note h2{font-size:24px;margin-bottom:10px}
.note p{color:var(--muted);font-size:15px;margin-bottom:6px}
.note p strong{color:var(--ink)}
.result-sheet{margin-top:28px;max-width:680px}
.flag{background:var(--band);border-radius:10px;padding:12px 16px;
  margin:12px 0;font-size:15px;color:var(--ink)}
.linkish{background:none;border:0;color:var(--ink);text-decoration:underline;
  cursor:pointer;font:400 16px Satoshi,system-ui,sans-serif;padding:4px 0}
.inlineform{display:block}

/* ---- the editor ---- */
.editor-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);
  gap:34px;align-items:start;margin-top:30px}
.canvas-sheet{max-width:none}
#ed{width:100%;height:auto;border-radius:10px;display:block;margin:16px 0 10px;
  touch-action:none;cursor:crosshair}
.ed-controls{background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:24px;box-shadow:var(--shadow-sm)}
.toolrow{display:flex;gap:10px;margin:18px 0 0}
.seg{flex:1;height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font:500 14px Satoshi,system-ui,sans-serif;
  cursor:pointer}
.seg[aria-pressed="true"]{background:var(--ink);color:var(--ground);
  border-color:var(--ink)}
.btn2{display:inline-flex;align-items:center;justify-content:center;height:44px;
  padding:0 20px;background:transparent;border:1px solid var(--faint);
  color:var(--ink);border-radius:999px;font:500 14px Satoshi,system-ui,sans-serif;
  cursor:pointer;text-decoration:none;transition:border-color .15s ease}
.btn2:hover{border-color:var(--ink)}
.btn2:disabled{opacity:.45;cursor:default;border-color:var(--line)}
.toolrow .btn2{flex:1}
.ed-size{display:block;margin:18px 0 0;font-size:14px;color:var(--muted)}
.ed-size input{width:100%;margin-top:8px;accent-color:var(--ink)}
.ed-controls .btn{width:100%;justify-content:center;margin-top:18px}
.ed-controls .btn:disabled{opacity:.45;cursor:default;transform:none}
#ed-status{margin-top:12px;font-size:14px}
#ed-dl a{color:var(--ink)}
.ctl-label{font:400 13px Satoshi,system-ui,sans-serif;color:var(--muted);
  margin:18px 0 0}
.toolrow.wrap{flex-wrap:wrap}
.toolrow.wrap .seg{flex:1 1 30%}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;
  font:400 13px Satoshi,system-ui,sans-serif;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:13px;height:13px;border-radius:4px;display:inline-block;
  border:1px solid var(--line)}
.sw-yard{background:rgba(110,205,80,.5)}
.sw-roof{background:rgba(210,60,60,.6)}
.sw-hard{background:rgba(235,195,60,.75)}
.sw-pool{background:rgba(70,140,235,.6)}
.sw-x{background:rgba(96,72,58,.55)}
.sw-line{background:#64dcff}
.sw-strip{background:rgba(170,225,120,.55)}
.drawbtn{width:100%;margin-top:10px}
.drawbtn[aria-pressed="true"]{border-color:var(--ink);background:var(--band)}
@media (max-width:880px){
  .editor-grid{grid-template-columns:1fr;gap:22px}
}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);margin-top:20px;
  padding:30px 24px 46px;color:var(--muted);font-size:13px}
footer p{max-width:1192px;margin:0 auto 7px}

/* ---- the sheet's one authored moment: rows settle, tick lands last.
   Gated on .js (stamped pre-paint) and reduced-motion; static-complete
   without either. ---- */
@media (prefers-reduced-motion: no-preference){
  .js .hero-sheet .li{opacity:0;transform:translateY(9px)}
  .js .hero-sheet .verify-note{opacity:0}
  .js .hero-sheet .tick{opacity:0;transform:rotate(45deg) scale(1.7)}
  .js .hero-sheet.arm .li{opacity:1;transform:none;
    transition:opacity .5s cubic-bezier(.22,1,.36,1),
               transform .6s cubic-bezier(.22,1,.36,1);
    transition-delay:calc(120ms + var(--i,0)*80ms)}
  .js .hero-sheet.arm .verify-note{opacity:1;
    transition:opacity .5s cubic-bezier(.22,1,.36,1) .45s}
  .js .hero-sheet.arm .tick{opacity:1;transform:rotate(45deg) scale(1);
    transition:opacity .3s cubic-bezier(.22,1,.36,1) .62s,
               transform .45s cubic-bezier(.22,1,.36,1) .62s}
}

/* ---- mobile ---- */
@media (max-width:880px){
  .top{margin:10px 12px 0}
  main{padding:0 18px}
  .brand{font-size:14px}
  .hero{grid-template-columns:1fr;min-height:0;gap:40px;
    padding:36px 0 20px}
  .hero-sheet{transform:none;max-width:none}
  .step{grid-template-columns:1fr;gap:6px}
  .try-note{display:block;margin:12px 0 0}
}

/* ---- reading-scale docs (the marketing h2 is a billboard; docs are a page) */
.docs h1{font-size:clamp(32px,3.6vw,46px)}
.docs h2{font-size:clamp(22px,2.4vw,30px);margin-top:1.6em}
.docs .sub{max-width:62ch}

/* ---- the minted key: long mono string in its own full-width box ---- */
.keybox{margin:14px 0 6px;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--ground)}
.keybox code{font:500 15px/1.45 var(--mono);letter-spacing:-.01em;
  word-break:break-all;color:var(--ink)}

/* ---- editor range slider: system track + thumb, not browser default ---- */
.ed-size input{-webkit-appearance:none;appearance:none;height:22px;
  background:transparent}
.ed-size input::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:var(--line)}
.ed-size input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;
  height:18px;border-radius:50%;background:var(--ink);
  border:3px solid var(--ground);box-shadow:0 0 0 1px var(--line);
  margin-top:-7px}
.ed-size input::-moz-range-track{height:4px;border-radius:2px;
  background:var(--line)}
.ed-size input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;
  background:var(--ink);border:3px solid var(--ground);
  box-shadow:0 0 0 1px var(--line)}

/* ---- save button: disabled reads as waiting, not dead ---- */
#ed-save:disabled{background:transparent;color:var(--muted);
  border:1px solid var(--line);opacity:1}

/* ---- header: signed-in portal nav ---- */
.top nav a.quiet{color:var(--muted)}


/* ---- audit fixes 2026-08-09: portal chrome + mobile containment ---- */
/* phones get a composed two-tier header: brand row, hairline, then an
   evenly spaced tab row inside the same capsule. Replaces the raw wrap the
   founder caught (misaligned rows, hover pill escaping the capsule). */
@media (max-width:560px){
  .top{flex-wrap:wrap;padding:0}
  .top .brand{padding:13px 20px 9px}
  .top nav{flex:1 1 100%;justify-content:space-around;gap:0;
    border-top:1px solid var(--line);padding:5px 8px}
  .top nav a{font-size:13px;padding:8px 10px}
  .top nav a.cta{height:34px;padding:7px 14px}
}
/* account is an operational page: reading measure, contained column */
.acct{max-width:680px}
/* key rows: the label yields, the button never leaves the card */
.keys .li .k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keys .li form{flex-shrink:0}
/* long emails in sheet heads ellipsize instead of pushing the card */
.sheet-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-head span:first-child{flex-shrink:0}
/* single-row forms stack on phones */
@media (max-width:520px){
  .lookup{flex-direction:column}
  .lookup input{height:48px;padding:12px 20px}
  .lookup>button{width:100%}
}
/* docs code scrolls inside its card, never widens the page */
.docs pre{overflow-x:auto;max-width:100%}
.docs .note{min-width:0}
.docs h3{font-size:17px;font-weight:700;margin:1.6em 0 4px}

/* ---- ship-gate fixes 2026-08-09 ---- */
/* single-column pages center their column on wide screens; text inside
   stays left-set (the founder's alignment question, answered: the hero's
   asymmetry is the design, a settings page hugging one edge is not) */
.toolbox{max-width:760px;margin-inline:auto}
.toolbox.ed-wide{max-width:1160px}

/* ---- codex gate findings 2026-08-09 ---- */
/* #1: links and controls carry the identity - never browser blue/purple */
a{color:var(--ink)}
input[type=radio]{accent-color:var(--ink);width:18px;height:18px;flex-shrink:0}
/* #10: plan rows are 52px touch targets with a plain-English lead-in */
.pick .li{min-height:52px;align-items:center;cursor:pointer;gap:10px}
/* #7: inside the centered column, cards use the column's width - the
   optical axis matches the mathematical one */
.toolbox .sheet{max-width:none}
.toolbox .lookup{max-width:none}
/* #8: docs code wraps; no string hides past an edge */
.docs pre{white-space:pre-wrap;word-break:break-all}
/* #13: waiting Save is unmistakably not-yet */
#ed-save:disabled{opacity:.55}
/* #9: visible labels above inputs; placeholders demote to examples */
.field-label{display:block;font-size:14px;font-weight:700;margin:18px 0 6px}
/* #4 nit + #5: footer to house 14px, mobile gutters to house 24px */
footer p{font-size:14px}
@media (max-width:880px){ main{padding:0 24px} }

/* Codex 2026-08-09 asked for prices out of mono (#2) and sheet labels out
   of mono (#12). REJECTED, deliberately: this surface's world is the Work
   Order - the rate sheet IS a measurement sheet, and values sit in the mono
   value slot whether they are square feet or dollars. Founder approved the
   sheet grammar through four pricing iterations. The site DESIGN.md's
   mono-price ban binds meadowbrooksystems.com, not this artifact. Do not
   "fix" prices into Satoshi here without a founder decision. */

/* ---- founder decisions, implemented 2026-08-09 ---- */
/* the hero performs the promise: address in, right here */
.hero-lookup{margin:26px 0 10px;max-width:480px}
.hero-lookup input{min-width:0}
.hero-copy .try-note{display:block;margin:0}
/* three doors as cards - a second layout family beside the ruled steps */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.door{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:24px 22px;box-shadow:var(--shadow)}
.door b{display:block;font-size:18px;font-weight:700;margin-bottom:8px}
.door p{color:var(--muted);font-size:15px;line-height:1.55;margin:0}
@media (max-width:880px){.doors{grid-template-columns:1fr}}
/* the founder, in person - the continuity block Codex asked for */
.founder-block{display:flex;align-items:center;gap:16px;max-width:560px;
  margin:36px auto 0}
.founder-block img{border-radius:50%;flex-shrink:0}
.founder-block p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}

/* ---- tool page: one viewport on desktop, like /products (founder rule:
   one product, nothing to scroll for) - form left, sheet right ---- */
.tool-grid{display:grid;gap:34px}
@media (min-width:1000px){
  .toolbox.tool-wide{max-width:1160px;padding-top:clamp(32px,4vw,48px)}
  .tool-grid{grid-template-columns:minmax(0,1fr) minmax(0,560px);
    align-items:start;gap:44px}
  .tool-grid .result-sheet{margin-top:0;padding:18px 22px}
  .tool-grid .result-sheet img{max-height:31vh;width:auto;max-width:100%;
    margin-inline:auto;display:block}
  .tool-grid .li{padding:7px 0}
  .tool-grid .li.big{padding:8px 0}
  .tool-grid .verify-note{margin:10px 0 0}
  .tool-grid .result-sheet p:last-child{margin-bottom:0}
}