/* Public pages that took content off the homepage (build queue 161-169): /sites, /plans, /pipeline and /trades.
   Components copied from web/index.html (change them there first, then here); app.css holds the shared tokens. */

/* Holdfast Sites band (/sites, item 161) */
.band{background:var(--board);color:var(--flap-ink);border-radius:var(--r-lg);padding:var(--sp-7) clamp(var(--sp-5),5vw,var(--sp-8));display:grid;gap:var(--sp-6)}
.band .kicker{color:var(--flap-brass)}
.band h1,.band h2:not(.kicker){color:var(--flap-ink)}
.band .head h1{font-size:var(--fs-h2)}
.band .lede{color:var(--flap-soft)}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start}
.big{display:grid;gap:var(--sp-5)}
.big div{display:grid;gap:var(--sp-1)}
.big b{font:900 var(--fs-h1)/.85 var(--f-display);color:var(--flap-brass)}
.big span{color:var(--flap-soft);font-size:var(--fs-sm);max-width:40ch}
.svc{display:grid;gap:0;border-top:1px solid var(--flap-rule)}
.svc div{display:grid;gap:var(--sp-1);padding:var(--sp-4) 0;border-bottom:1px solid var(--flap-rule)}
.svc b{font:800 var(--fs-h4) var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.svc span{color:var(--flap-soft);font-size:var(--fs-sm)}
.flow{display:grid;gap:var(--sp-3);align-content:start;min-width:0}
.bandnote{color:var(--flap-soft);font-size:var(--fs-sm)}
.bars{display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
.bars h3{margin:var(--sp-2) 0 2px;font:800 var(--fs-h4) var(--f-display);text-transform:uppercase;color:var(--flap-ink);display:flex;justify-content:space-between}
.bars h3 span{font:500 var(--fs-sm) var(--f-mono);color:var(--flap-brass)}
.fbar{display:grid;grid-template-columns:34px 1fr 64px;gap:var(--sp-2);align-items:center;font:var(--fs-xs) var(--f-mono);color:var(--flap-soft)}
.fbar i{display:block;height:10px;border-radius:var(--r-sm);background:var(--flap-brass)}
.fbar.w i{background:var(--flap-steel)}
.fbar b{color:var(--flap-ink);font-weight:500;text-align:right}
.opp{display:grid;gap:3px;padding:var(--sp-3) 0;border-bottom:1px solid var(--flap-rule);text-decoration:none;color:var(--flap-ink)}
.opp:hover b{color:var(--flap-brass)}
.opp b{font-weight:600;font-size:var(--fs-sm)}
.opp span{font:var(--fs-xs) var(--f-mono);color:var(--flap-soft)}
.opp em{font-style:normal;color:var(--flap-amber)}
.sites-price{display:grid;gap:var(--sp-1);padding-top:var(--sp-4);border-top:2px solid var(--flap-brass)}
.sites-price b{font:800 var(--fs-h4) var(--f-display);text-transform:uppercase}
.sites-price .p{font:600 var(--fs-base) var(--f-mono);color:var(--flap-brass)}
.sites-price span{color:var(--flap-soft);font-size:var(--fs-sm)}
@media (max-width:860px){.band-grid{grid-template-columns:1fr}}
/* phones (item 148): nothing may force sideways scrolling, even before the fonts arrive */
.band>*,.band-grid>*,.big>*,.svc>*,.flow{min-width:0}
.band span,.band p{overflow-wrap:anywhere}
@media (max-width:600px){.band{padding:var(--sp-7) var(--sp-4)}}

/* plans (/plans, item 164): the currency line with its small switch, and the extras below the four plans */
.curline{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
.curline b{color:var(--ink);font-weight:600}
.curpick summary{cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.curbtns{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.curbtns button{font:500 var(--fs-sm) var(--f-mono);padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);color:var(--ink);cursor:pointer}
.curbtns button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.extra{display:grid;gap:var(--sp-2);padding-top:var(--sp-4);border-top:2px solid var(--ink);align-content:start}
.extra b{font:800 var(--fs-h4) var(--f-display);text-transform:uppercase}
.extra .p{font:600 var(--fs-base) var(--f-mono);color:var(--brass)}
.extra span{color:var(--muted);font-size:var(--fs-sm)}
@media (max-width:900px){.extras{grid-template-columns:1fr}}

/* member extras (/plans#extras, item 165): what works today, then one line for everything on the way */
.mx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.mx-item{display:grid;gap:var(--sp-2);align-content:start;padding:var(--sp-4);border:var(--card-border);border-radius:var(--card-radius);background:var(--card-bg)}
.mx-item span{color:var(--muted);font-size:var(--fs-sm)}
.soon{color:var(--muted);font-size:var(--fs-sm);max-width:80ch}
@media (max-width:1000px){.mx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.mx-grid{grid-template-columns:1fr}}

/* trust facts row near the plans (item 166) */
.facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2) var(--sp-5);font-size:var(--fs-sm);color:var(--muted)}
.facts li::before{content:"✓ ";color:var(--go);font-weight:700}

/* moved from the homepage with their sections (item 169): /pipeline's timeline, calculator and open tenders, /plans'
   price benchmarks, job sheet and screenshots, /trades' index */
/* what's coming back near you */
form.near{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;align-items:end;max-width:900px}
.nearres{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);padding:var(--card-pad);display:grid;gap:var(--sp-4);max-width:900px;min-width:0}
.nearres[hidden]{display:none}
.nearres .nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--sp-5);border-top:2px solid var(--ink)}
.nearres .nums div{display:grid;gap:var(--sp-1);align-content:start;padding-top:var(--sp-4);min-width:0}
.nearres .nums b{font:900 var(--fs-2xl)/1 var(--f-display)}
.nearres .nums b.word{font-size:var(--fs-h3)}
.nearres .nums span,.nearres .meta{color:var(--muted);font-size:var(--fs-sm)}
.nearres ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-2);font-size:var(--fs-sm)}
.nearres ol small{color:var(--muted);font:var(--fs-sm) var(--f-mono);margin-left:var(--sp-2);white-space:nowrap}
.nearres .go{display:flex;gap:var(--sp-3) var(--sp-4);align-items:center;flex-wrap:wrap}
.nearres .go .fine{max-width:44ch}
.nearres .chips button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font:500 var(--fs-sm) var(--f-body);cursor:pointer}
@media (max-width:760px){form.near{grid-template-columns:1fr;padding:var(--sp-4)}.nearres .nums{grid-template-columns:1fr}.nearres .nums div{padding-block:var(--sp-3);border-bottom:1px solid var(--line)}.nearres .nums div:last-child{border-bottom:0}}

/* timeline */
.tl{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);padding:var(--card-pad);display:grid;gap:var(--sp-3);min-width:0}
.tl-top{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.tl-top .note{font:var(--fs-sm) var(--f-mono);color:var(--muted);margin-left:auto}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.seg2 button{border:0;background:transparent;color:var(--ink);font:600 var(--fs-sm) var(--f-body);padding:var(--sp-2) var(--sp-4);cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.tl-svg{overflow-x:auto}
.tl svg{display:block;width:100%;min-width:760px;height:auto}
.tl svg text{font-family:var(--f-mono);font-size:var(--fs-xs);fill:var(--muted)}
.tl svg .dot{cursor:pointer;transition:r .15s}
.tl svg .dot:hover{stroke-width:3}
.detail{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);padding:var(--sp-4);border-radius:var(--r-md);background:var(--soft);min-width:0}
.detail div{display:grid;gap:2px;min-width:0}
.detail span{font:var(--fs-xs) var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.detail b{font-weight:600;overflow-wrap:anywhere}
.detail a{color:var(--steel)}
.tl{grid-template-columns:minmax(0,1fr)}
.seg2{flex-wrap:wrap;max-width:100%}
@media (max-width:700px){.detail{grid-template-columns:1fr 1fr}.tl-top .note{margin-left:0}}
@media (max-width:760px){.detail{grid-template-columns:1fr 1fr}}

/* bench */
.bench{background:var(--card-bg);border:var(--card-border);border-radius:var(--card-radius);padding:var(--card-pad);display:grid;gap:var(--sp-2);min-width:0}
.bench svg{display:block;width:100%;min-width:640px;height:auto}
.bench svg text{font-family:var(--f-mono);font-size:var(--fs-xs);fill:var(--muted)}
.bench svg .lab{font-family:var(--f-display);font-size:var(--fs-lg);font-weight:800;fill:var(--ink);text-transform:uppercase}
.bench svg .val{fill:var(--ink);font-weight:500}

/* crew call sheet */
.sheet{border-top:2px solid var(--ink)}
.crew-row{display:grid;grid-template-columns:56px 250px 90px 1fr 130px;gap:var(--sp-4);align-items:center;padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.crew-row .no{font:500 var(--fs-sm) var(--f-mono);color:var(--muted)}
.crew-row .nm{font:800 var(--fs-h3)/1 var(--f-display);text-transform:uppercase}
.crew-row .rl{font:500 var(--fs-sm) var(--f-mono);color:var(--brass);text-transform:uppercase;letter-spacing:.06em}
.crew-row .dt{color:var(--muted);font-size:var(--fs-sm);min-width:0}
.crew-row .st{font:500 var(--fs-xs) var(--f-mono);text-align:right;white-space:nowrap}
.crew-row .st i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--sp-2);background:var(--line);vertical-align:middle}
.crew-row .st.on i{background:var(--go);box-shadow:0 0 0 4px color-mix(in srgb,var(--go) 20%,transparent)}
.crew-row .st.on{color:var(--go)}
.crew-row .st.later{color:var(--muted)}
@media (max-width:900px){.crew-row{grid-template-columns:40px 1fr auto;gap:var(--sp-1) var(--sp-3)}.crew-row .rl{grid-column:2}.crew-row .dt{grid-column:2/4}.crew-row .st{grid-column:3;grid-row:1}}

/* index of trades */
.index{columns:3 260px;column-gap:var(--sp-6)}
.fam{break-inside:avoid;margin-bottom:var(--sp-5)}
.fam h2,.fam h3{font-size:var(--fs-h4);display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:var(--sp-2);margin-bottom:var(--sp-2)}
.fam h2 span,.fam h3 span{font:500 var(--fs-sm) var(--f-mono);color:var(--brass)}
.fam ol{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:var(--fs-sm);color:var(--muted);counter-reset:t}
.fam li{display:flex;gap:var(--sp-2)}
.fam li::before{counter-increment:t;content:counter(t,decimal-leading-zero);font:var(--fs-xs) var(--f-mono);color:var(--line);padding-top:3px}

/* see it in action: three screenshots of the signed-in app, light/dark and desktop/phone (tools/render_app_shots.py) */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.shots figure{margin:0;display:grid;gap:var(--sp-3);align-content:start;min-width:0}
.shots img{display:block;width:100%;height:auto;border:var(--card-border);border-radius:var(--card-radius);background:var(--card-bg)}
.shots figcaption{font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.shots figcaption b{color:var(--ink);font-weight:600}
@media (max-width:900px){.shots{grid-template-columns:minmax(0,640px)}}

.fam h2{font-size:var(--fs-h4);line-height:1}
.fam li a{color:var(--ink);text-decoration:none}.fam li a:hover{text-decoration:underline}
.benchtab{border-collapse:collapse;margin-top:var(--sp-2);font-size:var(--fs-sm)}
.benchtab th,.benchtab td{padding:var(--sp-1) var(--sp-3) var(--sp-1) 0;text-align:left;border-bottom:1px solid var(--line)}
.benchtab td+td,.benchtab th+th{text-align:right;font-family:var(--f-mono)}