/* ============================================================
   BuildRobotz — site stylesheet
   Concept: engineering drafting sheet. Vellum ground (green-grey),
   ink near-black, drafting blue for structure, signal orange for
   the one thing you should click. Square corners, hairline rules.

   Source of truth: offers/2026-Revamp/revamp-prototype.html
   ============================================================ */

:root{
  --paper:#E6E9E3;
  --paper-2:#F3F5F0;
  --paper-3:#DBDFD6;
  --ink:#15191A;
  --ink-2:#58625D;
  --ink-3:#7B847E;
  --rule:#C3C9BE;
  --rule-2:#9AA396;
  --blue:#1F4E79;
  --signal:#BE411B;
  --signal-ink:#FFF6F2;
  --grid:rgba(21,25,26,.045);
  --shadow:rgba(21,25,26,.10);

  --f-display:"Helvetica Neue",Helvetica,"Arial Nova",Arial,sans-serif;
  --f-body:Charter,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,"Andale Mono","Cascadia Mono",monospace;

  --measure:34rem;
  --pad:clamp(1.25rem,4vw,3rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F1213; --paper-2:#181C1D; --paper-3:#202526;
    --ink:#E6EAE4; --ink-2:#929C95; --ink-3:#78827B;
    --rule:#2A3032; --rule-2:#3E4649;
    --blue:#8FB4D9; --signal:#FF6E3C; --signal-ink:#170A05;
    --grid:rgba(230,234,228,.045); --shadow:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#0F1213; --paper-2:#181C1D; --paper-3:#202526;
  --ink:#E6EAE4; --ink-2:#929C95; --ink-3:#78827B;
  --rule:#2A3032; --rule-2:#3E4649;
  --blue:#8FB4D9; --signal:#FF6E3C; --signal-ink:#170A05;
  --grid:rgba(230,234,228,.045); --shadow:rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 28px);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
/* No overflow-x:hidden. If something overflows, that's a bug to fix at the
   source, not to paper over — the whole point of the mobile-first rebuild. */
img{max-width:100%;height:auto;}
a{color:var(--blue);text-underline-offset:2px;}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

/* ---------- typography ---------- */
.mono{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);font-weight:500;}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.021em;text-wrap:balance;margin:0;line-height:1.08;}
h1{font-size:clamp(2.1rem,5.4vw,3.9rem);}
h2{font-size:clamp(1.5rem,3.1vw,2.2rem);letter-spacing:-.018em;}
h3{font-size:1.12rem;letter-spacing:-.012em;line-height:1.3;}
h4{font-size:.95rem;letter-spacing:-.005em;}
p{margin:0;max-width:var(--measure);}
.lede{font-size:1.12rem;color:var(--ink-2);}
strong{font-weight:600;color:var(--ink);}

/* ---------- shell ---------- */
.wrap{max-width:76rem;margin:0 auto;padding-inline:var(--pad);}
/* Static on a phone: the nav wraps to two rows there, and a sticky bar that
   tall would eat an eighth of the viewport on every scroll. Sticky returns
   once the whole nav fits on one line. */
.masthead{position:static;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(9px);border-bottom:1px solid var(--rule-2);}
@media(min-width:56rem){.masthead{position:sticky;top:0;}}
.masthead-in{display:flex;align-items:center;gap:.5rem 1.5rem;flex-wrap:wrap;min-height:3.4rem;}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;font-size:1.02rem;padding-block:.6rem;color:var(--ink);text-decoration:none;}
.brand-mark{width:1.05rem;height:1.05rem;border:2px solid var(--signal);position:relative;flex:none;}
.brand-mark::after{content:"";position:absolute;inset:3px;background:var(--signal);}

.nav{display:flex;gap:0;margin-left:auto;flex-wrap:wrap;}
.nav a{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:.55rem .7rem;border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;min-height:2.75rem;}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--signal);}

main{padding-block:clamp(2rem,5vw,3.6rem) 4rem;}
.stack{display:flex;flex-direction:column;gap:clamp(2.6rem,5vw,4.4rem);}
.block{display:flex;flex-direction:column;gap:1.1rem;}

/* ---------- hero + title block ---------- */
.hero{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:end;}
@media(min-width:60rem){.hero{grid-template-columns:minmax(0,1.55fr) minmax(17rem,.9fr);}}
.hero h1{max-width:16ch;}
.hero-body{display:flex;flex-direction:column;gap:1.4rem;}
.titleblock{border:1px solid var(--ink);background:var(--paper-2);}
.titleblock-row{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--rule-2);}
@media(min-width:24rem){.titleblock-row{grid-template-columns:1fr 1fr;}}
@media(max-width:23.99rem){.tb-cell{border-right:0;border-bottom:1px solid var(--rule-2);}.titleblock-row .tb-cell:last-child{border-bottom:0;}}
.titleblock-row:last-child{border-bottom:0;}
.titleblock-row.solo{grid-template-columns:1fr;}
.tb-cell{padding:.6rem .75rem;border-right:1px solid var(--rule-2);display:flex;flex-direction:column;gap:.18rem;}
.tb-cell:last-child{border-right:0;}
.tb-cell .val{font-family:var(--f-mono);font-size:.86rem;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:600;}
.tb-head{background:var(--ink);color:var(--paper);padding:.45rem .75rem;}
.tb-head .mono{color:var(--paper);opacity:.72;}

/* ---------- buttons ---------- */
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;}
.btn{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;padding:.72rem 1.15rem;min-height:2.75rem;border:1px solid var(--ink);background:var(--paper-2);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;transition:transform .12s ease,box-shadow .12s ease;}
@media(max-width:29.99rem){.btnrow{align-items:stretch;}.btnrow .btn{width:100%;}}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow);}
.btn-primary{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);}
.btn-quiet{border-color:var(--rule-2);color:var(--ink-2);background:transparent;}
.btn-sm{padding:.5rem .8rem;font-size:.68rem;}
.btn[disabled]{opacity:.55;cursor:progress;}
@media(prefers-reduced-motion:reduce){.btn:hover{transform:none;}}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule-2);background:var(--paper-2);}
table{border-collapse:collapse;width:100%;min-width:44rem;font-size:.9rem;}
th,td{text-align:left;padding:.72rem .85rem;border-bottom:1px solid var(--rule);vertical-align:top;}
tbody tr:last-child td{border-bottom:0;}
thead th{background:var(--paper-3);border-bottom:1px solid var(--rule-2);vertical-align:bottom;}
th[scope="row"]{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:500;width:11rem;background:var(--paper-3);}
.col-name{font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.015em;display:block;}
.col-tier{display:block;margin-top:.15rem;}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;}
.tier-mark{display:inline-block;width:.5rem;height:.5rem;margin-right:.4rem;vertical-align:baseline;}
.m1{background:var(--signal);} .m2{background:var(--blue);} .m3{background:var(--ink-2);}
.no{color:var(--ink-3);}
table.narrow{min-width:32rem;}

/* ---------- grids ---------- */
.grid{display:grid;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);}
@media(min-width:44rem){.grid.g2{grid-template-columns:1fr 1fr;}}
@media(min-width:56rem){.grid.g3{grid-template-columns:repeat(3,1fr);}}
.cell{background:var(--paper-2);padding:1.15rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;}
.cell p{font-size:.94rem;color:var(--ink-2);max-width:none;}
.cell .bar{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;color:var(--signal);text-transform:none;border-top:1px solid var(--rule);padding-top:.5rem;margin-top:auto;}

/* ---------- weeks ---------- */
.weeks{display:flex;flex-direction:column;border:1px solid var(--rule-2);background:var(--paper-2);}
.week{display:grid;grid-template-columns:1fr;gap:.3rem;padding:.85rem 1rem;border-bottom:1px solid var(--rule);}
@media(min-width:30rem){.week{grid-template-columns:5.5rem 1fr;gap:1rem;}}
.week:last-child{border-bottom:0;}
.week.phase{background:var(--paper-3);}
.week-n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal);padding-top:.18rem;font-variant-numeric:tabular-nums;}
.week-b{display:flex;flex-direction:column;gap:.22rem;}
.week-b p{font-size:.9rem;color:var(--ink-2);max-width:none;}

/* ---------- prices ---------- */
.prices{display:grid;gap:1px;background:var(--rule-2);border:1px solid var(--ink);}
@media(min-width:52rem){.prices{grid-template-columns:repeat(3,1fr);}}
.prices.two{grid-template-columns:1fr;}
@media(min-width:44rem){.prices.two{grid-template-columns:1fr 1fr;}}
.price{background:var(--paper-2);padding:1.3rem 1.2rem;display:flex;flex-direction:column;gap:.55rem;}
.price.featured{background:var(--paper-3);}
.price .amt{font-family:var(--f-display);font-weight:700;font-size:2.1rem;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.price .sub{font-size:.88rem;color:var(--ink-2);max-width:none;}
.badge{align-self:flex-start;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;background:var(--signal);color:var(--signal-ink);padding:.16rem .45rem;font-weight:600;}
.badge.b-quiet{background:var(--paper);color:var(--ink-2);border:1px solid var(--rule-2);}
.badge.b-blue{background:var(--blue);color:var(--paper-2);}

/* ---------- misc ---------- */
.note{border-left:2px solid var(--signal);padding:.15rem 0 .15rem 1rem;display:flex;flex-direction:column;gap:.4rem;}
.note.blue{border-left-color:var(--blue);}
.note p{font-size:.94rem;color:var(--ink-2);}
ul.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem;}
ul.ticks li{display:grid;grid-template-columns:1.1rem 1fr;gap:.5rem;font-size:.94rem;color:var(--ink-2);align-items:start;}
ul.ticks li::before{content:"—";font-family:var(--f-mono);color:var(--signal);line-height:1.6;}
ul.ticks li.off{color:var(--ink-3);}
ul.ticks li.off::before{content:"\00d7";color:var(--ink-3);}

/* ---------- level cards ----------
   Replaces the old three-column ladder comparison table. Stacks on a
   phone, sits in a row on a wide screen, never scrolls sideways.        */
.levels{display:grid;gap:1.1rem;}
@media(min-width:58rem){.levels{grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);}}
.level{background:var(--paper-2);border:1px solid var(--rule-2);padding:1.15rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.85rem;}
@media(min-width:58rem){.level{border:0;}}
.level-head{display:flex;flex-direction:column;gap:.3rem;}
.level-head .tier{display:flex;align-items:center;gap:.45rem;}
.level h3{font-size:1.32rem;letter-spacing:-.02em;}
.level .out{font-size:.98rem;color:var(--ink);max-width:none;}
.level .out strong{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:500;margin-bottom:.2rem;}
.level dl{margin:0;display:flex;flex-direction:column;gap:.55rem;border-top:1px solid var(--rule);padding-top:.8rem;}
.level dl > div{display:flex;gap:.6rem;justify-content:space-between;align-items:baseline;}
.level dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);flex:none;}
.level dd{margin:0;font-size:.9rem;text-align:right;}
.level .foot{margin-top:auto;border-top:1px solid var(--rule);padding-top:.9rem;display:flex;flex-direction:column;gap:.6rem;}
.level .amt{font-family:var(--f-display);font-weight:700;font-size:1.7rem;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}

/* ---------- bar chart ----------
   Horizontal bars built from HTML boxes, not SVG: real text at real font
   sizes, so the value labels stay legible on a phone. The bar scales inside
   its own grid column so a full-width bar can never push its label out of
   the container. One shared scale, never a second axis. */
.chart{margin:0;display:flex;flex-direction:column;gap:.85rem;}
.hbars{display:flex;flex-direction:column;gap:.85rem;}
.hbar{display:flex;flex-direction:column;gap:.3rem;}
.hbar .lab{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);}
.hbar .track{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.7rem;}
.hbar .plot{min-width:0;}
.hbar .fill{display:block;height:1.5rem;min-width:3px;background:var(--blue);}
.hbar .val{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* the record year, and the projection — hatched so a forecast can never be
   mistaken for a measurement, in print or without color */
.hbar.now .fill{background:var(--signal);}
.hbar.now .lab,.hbar.fc .lab{color:var(--signal);}
.hbar.fc .fill{
  background:repeating-linear-gradient(135deg,var(--signal) 0 3px,transparent 3px 6px);
  box-shadow:inset 0 0 0 1px var(--signal);
}

/* ---------- sourced figures ---------- */
.stats{display:grid;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);}
@media(min-width:40rem){.stats{grid-template-columns:1fr 1fr;}}
@media(min-width:58rem){.stats.s3{grid-template-columns:repeat(3,1fr);}}
.stat{background:var(--paper-2);padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;}
.stat .v{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,6vw,2.1rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.stat p{font-size:.9rem;color:var(--ink-2);max-width:none;}
.src{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.04em;color:var(--ink-3);line-height:1.5;max-width:none;}
.src a{color:var(--ink-3);}

/* ---------- quotes ---------- */
.quotes{display:grid;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);}
@media(min-width:52rem){.quotes.q2{grid-template-columns:1fr 1fr;}}
.quote{background:var(--paper-2);border:1px solid var(--rule-2);padding:1.25rem 1.2rem 1.3rem;margin:0;display:flex;flex-direction:column;gap:.9rem;}
.quotes .quote{border:0;}
.quote.pull{max-width:54rem;}
.quote blockquote{margin:0;display:flex;flex-direction:column;gap:.7rem;}
.quote blockquote::before{content:"";display:block;width:1.6rem;height:2px;background:var(--signal);}
.quote blockquote p{font-size:.98rem;color:var(--ink);max-width:none;}
.quote.pull blockquote p{font-size:1.08rem;}
.quote figcaption{border-top:1px solid var(--rule);padding-top:.6rem;margin-top:auto;display:flex;flex-direction:column;gap:.2rem;}
.quote .who{font-family:var(--f-display);font-weight:700;font-size:.94rem;letter-spacing:-.01em;}

/* ---------- portrait ---------- */
.portrait{margin:0;max-width:44rem;border:1px solid var(--rule-2);background:var(--paper-2);display:flex;flex-direction:column;}
.portrait img{display:block;width:100%;height:auto;}
.portrait figcaption{padding:.55rem .75rem;border-top:1px solid var(--rule-2);}

.form{display:grid;gap:1rem;max-width:38rem;}
.field{display:flex;flex-direction:column;gap:.32rem;}
.field input,.field select,.field textarea{font-family:var(--f-body);font-size:.95rem;padding:.6rem .7rem;border:1px solid var(--rule-2);background:var(--paper-2);color:var(--ink);width:100%;}
.field textarea{min-height:5.5rem;resize:vertical;}
.field .req{color:var(--signal);}

.kv{display:grid;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);}
@media(min-width:40rem){.kv{grid-template-columns:14rem 1fr;}}
.kv > div{background:var(--paper-2);padding:.6rem .8rem;font-size:.9rem;}
.kv .k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}
code{font-family:var(--f-mono);font-size:.84em;background:var(--paper-3);padding:.1em .32em;}

/* ---------- effort strip ---------- */
.strip{display:grid;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);}
@media(min-width:44rem){.strip{grid-template-columns:repeat(4,1fr);}}
.strip > div{background:var(--paper-2);padding:.75rem .9rem;display:flex;flex-direction:column;gap:.2rem;}
.strip .v{font-family:var(--f-mono);font-weight:600;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums;}

/* ---------- quiz ---------- */
.q-card{border:1px solid var(--ink);background:var(--paper-2);}
.q-head{background:var(--ink);color:var(--paper);padding:.5rem .9rem;display:flex;justify-content:space-between;gap:1rem;}
.q-head .mono{color:var(--paper);opacity:.75;}
.q-body{padding:1.2rem;display:flex;flex-direction:column;gap:.9rem;}
.q-opts{display:flex;flex-direction:column;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);}
.q-opt{background:var(--paper);padding:.6rem .8rem;font-size:.94rem;display:grid;grid-template-columns:1.6rem 1fr;gap:.4rem;cursor:pointer;text-align:left;border:0;color:var(--ink);font-family:var(--f-body);width:100%;}
.q-opt:hover{background:var(--paper-3);}
.q-opt .l{font-family:var(--f-mono);font-size:.75rem;color:var(--signal);padding-top:.15rem;}
.q-progress{height:3px;background:var(--rule);position:relative;}
.q-progress span{display:block;height:100%;background:var(--signal);transition:width .25s ease;}
@media(prefers-reduced-motion:reduce){.q-progress span{transition:none;}}
[hidden]{display:none !important;}

/* ---------- status ---------- */
.status{font-family:var(--f-mono);font-size:.75rem;color:var(--signal);min-height:1.2rem;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule-2);margin-top:2rem;padding-block:2rem 3rem;display:flex;flex-direction:column;gap:1.6rem;}
.foot-in{display:grid;gap:1.6rem;}
@media(min-width:44rem){.foot-in{grid-template-columns:1.4fr 1fr 1fr;}}
.foot-col{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;}
.foot-col p{font-size:.9rem;color:var(--ink-2);}
.foot-col a{font-size:.9rem;text-decoration:none;color:var(--ink-2);}
.foot-col a:hover{color:var(--ink);text-decoration:underline;}
.foot-legal{border-top:1px solid var(--rule);padding-top:1rem;}