/* ==========================================================================
   OraOS Construction
   The public site. Everything a visitor sees before they enter the product.

   This layer sits on top of styles.css and borrows its tokens, so the site
   and the application are the same object seen from two sides: ivory paper,
   graphite command surfaces, gold used only for emphasis, steel for
   measurement. Nothing here is decorative for its own sake.

   The product is the hero. Most sections carry a rendering of a real screen,
   built from the same tokens the application uses and populated by the same
   calculation engine, so the pictures on this page cannot drift away from
   the product they are selling.

   Scoped under #site so not one rule can reach the application.
   ========================================================================== */

#site{
  --gutter:24px;
  --wrap:1200px;
  --sec-y:112px;
}

#site,
#site *{box-sizing:border-box}

/* --------------------------------------------------------------------------
   Skeleton
   -------------------------------------------------------------------------- */
.s-wrap{width:min(var(--wrap),100%);margin:0 auto;padding-inline:var(--gutter)}
.s-wrap.narrow{width:min(920px,100%)}
.s-sec{padding-block:var(--sec-y)}
.s-sec.tight{padding-block:84px}

/* Surfaces. Paper is the default; the canvas and the graphite are the
   punctuation, used where a section has to land differently. */
.s-sec.paper{background:var(--paper)}
.s-sec.canvas{background:var(--canvas)}
.s-sec.ink{background:var(--rail);color:#e7ebf0}
.s-sec.ink .s-eyebrow{color:var(--accent-300)}
.s-sec.ink .s-h2{color:#fff}
.s-sec.ink .s-lede,
.s-sec.ink .s-p{color:var(--rail-ink)}
.s-rule{height:1px;background:var(--line);border:0}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.s-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:680;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-600);margin-bottom:20px;
}
.s-eyebrow::before{content:"";width:18px;height:1.5px;background:currentColor;opacity:.65;flex:none}

.s-h1{
  font-family:var(--serif);font-weight:400;letter-spacing:-.018em;line-height:1.1;
  font-size:clamp(34px,5.1vw,60px);
}
.s-h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.016em;line-height:1.14;
  font-size:clamp(28px,3.5vw,42px);color:var(--ink-900);
}
.s-h3{font-size:17px;font-weight:620;letter-spacing:-.011em;line-height:1.35;color:var(--ink-900)}
.s-lede{font-size:clamp(16px,1.5vw,18.5px);line-height:1.62;color:var(--ink-600);max-width:68ch}
.s-p{font-size:15px;line-height:1.68;color:var(--ink-600)}
.s-p + .s-p{margin-top:14px}
.s-head{max-width:820px;margin-bottom:52px}
.s-head.center{margin-inline:auto;text-align:center}
.s-head.center .s-lede{margin-inline:auto}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.s-header{
  position:sticky;top:0;z-index:60;
  background:rgba(246,244,240,.86);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,background .2s ease;
}
.s-header.stuck{border-bottom-color:var(--line);background:rgba(246,244,240,.94)}
.s-header .in{display:flex;align-items:center;gap:28px;height:70px}
.s-header .mark-text b{font-size:14.5px}
.s-header .mark-text span{display:block;font-size:10.5px;color:var(--ink-500);letter-spacing:.04em}
.s-header .mark-glyph{width:32px;height:32px;border-radius:8px;font-size:16px}

.s-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.s-nav a{
  padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:520;color:var(--ink-600);
  transition:color .13s ease,background .13s ease;
}
.s-nav a:hover{color:var(--ink-900);background:var(--panel-2)}
.s-actions{display:flex;align-items:center;gap:9px;margin-left:22px;padding-left:22px;border-left:1px solid var(--line)}
.s-burger{display:none;margin-left:auto;padding:8px;border-radius:9px;border:1px solid var(--line-strong);background:var(--paper)}

/* The mobile sheet. One column, generous targets, no cleverness. */
.s-sheet{
  display:none;border-top:1px solid var(--line);background:var(--paper);
  padding:12px var(--gutter) 20px;
}
.s-sheet.on{display:block}
.s-sheet a.lnk{
  display:block;padding:13px 4px;font-size:15.5px;font-weight:540;color:var(--ink-800);
  border-bottom:1px solid var(--line);
}
.s-sheet .btns{display:grid;gap:9px;margin-top:18px}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.s-hero{
  position:relative;background:var(--rail);color:#e7ebf0;overflow:hidden;
  padding-block:96px 0;
}
/* A single soft light behind the product, so the frame lifts off the
   graphite without a gradient sitting on top of the type. */
.s-hero::before{
  content:"";position:absolute;left:50%;top:-180px;transform:translateX(-50%);
  width:1100px;height:700px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(181,142,44,.16),rgba(181,142,44,0) 72%);
}
.s-hero .s-wrap{position:relative}
.s-hero-copy{max-width:820px}
.s-hero .s-eyebrow{color:var(--accent-300)}
/* Three lines at full size. A headline that breaks to five stops being one. */
.s-hero h1{color:#fff;margin-bottom:22px;max-width:26ch}
.s-hero .lede{font-size:clamp(15.5px,1.6vw,18px);line-height:1.62;color:var(--rail-ink);max-width:62ch}

.s-status{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:var(--accent-200);background:rgba(223,201,159,.09);
  border:1px solid rgba(223,201,159,.24);border-radius:20px;padding:5px 13px;margin-bottom:24px;
}
.s-status .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-300);flex:none}
.s-status .sep{width:1px;height:11px;background:rgba(223,201,159,.3)}
.s-status .q{color:var(--rail-ink);font-weight:520}

.s-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px}
.s-cta-note{margin-top:16px;font-size:12.5px;color:var(--rail-ink-dim);line-height:1.6}

/* Buttons for the dark ground. The application's .btn assumes paper. */
.s-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:11px;font-size:14.5px;font-weight:580;
  border:1px solid transparent;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .1s ease;
}
.s-btn:active{transform:translateY(.5px)}
.s-btn.gold{background:var(--accent-400);color:#14181d;border-color:var(--accent-400);font-weight:640}
.s-btn.gold:hover{background:var(--accent-300);border-color:var(--accent-300)}
.s-btn.wire{background:transparent;color:#e7ebf0;border-color:rgba(231,235,240,.28)}
.s-btn.wire:hover{background:rgba(231,235,240,.08);border-color:rgba(231,235,240,.46)}
.s-btn.ink{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.s-btn.ink:hover{background:var(--ink-800);border-color:var(--ink-800)}
.s-btn.line{background:var(--paper);color:var(--ink-800);border-color:var(--line-strong)}
.s-btn.line:hover{background:var(--panel);border-color:var(--ink-300)}
.s-btn.sm{padding:8px 15px;font-size:13.5px;border-radius:9px}
.s-btn.block{width:100%}
.s-btn.plain{padding:12px 6px;color:var(--rail-ink);border-color:transparent}
.s-btn.plain:hover{color:#fff}

.s-textlink{
  display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:560;
  color:var(--accent-600);border-bottom:1px solid transparent;transition:border-color .14s ease;
}
.s-textlink:hover{border-bottom-color:currentColor}
.s-sec.ink .s-textlink{color:var(--accent-200)}

/* The product sits half in the hero and half in the section below it, which
   is what makes it read as the subject rather than an illustration. */
.s-hero-stage{margin-top:64px;padding-bottom:0;transform:translateY(56px)}
.s-hero-spacer{height:56px;background:var(--canvas)}

/* --------------------------------------------------------------------------
   Product frame
   The application rendered at rest. Same tokens, same arithmetic.
   -------------------------------------------------------------------------- */
.pv{
  background:var(--canvas);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:var(--shadow-float);overflow:hidden;
}
.pv.flat{box-shadow:var(--shadow-raised)}
.pv-chrome{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  background:var(--panel-2);border-bottom:1px solid var(--line);
}
.pv-chrome .dots{display:flex;gap:6px;flex:none}
.pv-chrome .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);display:block}
.pv-chrome .url{
  margin:0 auto;padding:3px 14px;border-radius:20px;background:var(--paper);
  border:1px solid var(--line);font-size:11px;color:var(--ink-500);
  font-family:var(--mono);letter-spacing:-.01em;max-width:60%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.pv-body{display:grid;grid-template-columns:186px minmax(0,1fr)}
.pv-body.norail{grid-template-columns:minmax(0,1fr)}

/* Mini command rail */
.pv-rail{background:var(--rail);padding:14px 12px;min-width:0}
.pv-rail .co{display:flex;align-items:center;gap:9px;padding-bottom:13px;border-bottom:1px solid var(--rail-line);margin-bottom:13px}
.pv-rail .co .bz{
  width:26px;height:26px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--rail-3);color:var(--accent-200);font-size:10px;font-weight:660;letter-spacing:.02em;
}
.pv-rail .co b{display:block;font-size:11.5px;color:#fff;font-weight:600;line-height:1.3}
.pv-rail .co span{display:block;font-size:9.5px;color:var(--rail-ink-dim)}
.pv-rail .lbl{
  font-size:8.5px;font-weight:680;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rail-ink-dim);padding:12px 8px 6px;
}
.pv-rail .lbl:first-of-type{padding-top:2px}
.pv-rail .it{
  display:flex;align-items:center;gap:8px;padding:6.5px 8px;border-radius:7px;
  font-size:11.5px;color:var(--rail-ink);line-height:1.3;
}
.pv-rail .it .g{width:13px;height:13px;border-radius:3.5px;background:var(--rail-3);flex:none}
.pv-rail .it.on{background:var(--rail-3);color:#fff;font-weight:580}
.pv-rail .it.on .g{background:var(--accent-400)}
.pv-rail .it .ct{
  margin-left:auto;font-size:9.5px;font-weight:640;padding:1px 6px;border-radius:20px;
  background:var(--rail-3);color:var(--rail-ink);
}
.pv-rail .it .ct.warn{background:rgba(181,142,44,.2);color:var(--accent-200)}

/* Mini main surface */
.pv-main{background:var(--canvas);min-width:0;display:flex;flex-direction:column}
.pv-top{
  display:flex;align-items:center;gap:12px;padding:13px 18px;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.pv-top .t b{display:block;font-size:13px;font-weight:640;letter-spacing:-.01em;color:var(--ink-900)}
.pv-top .t span{display:block;font-size:10.5px;color:var(--ink-500);margin-top:1px}
.pv-top .scope{
  margin-left:auto;display:flex;align-items:center;gap:8px;padding:5px 11px;
  border:1px solid var(--line-strong);border-radius:9px;background:var(--panel);flex:none;
}
.pv-top .scope .sq{
  width:22px;height:22px;border-radius:6px;background:var(--ink-900);color:#fff;
  font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;
}
.pv-top .scope b{display:block;font-size:11px;font-weight:600;line-height:1.25}
.pv-top .scope span{display:block;font-size:9.5px;color:var(--ink-500)}
.pv-canvas{padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}

/* Metric tiles, the product's own shape */
.pv-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pv-tiles.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pv-tiles.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-tile{background:var(--paper);padding:12px 13px;min-width:0}
.pv-tile .k{
  display:block;font-size:8.5px;font-weight:680;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pv-tile .v{
  display:block;font-size:19px;font-weight:640;letter-spacing:-.025em;margin-top:6px;
  font-variant-numeric:tabular-nums;color:var(--ink-900);line-height:1.15;
}
.pv-tile .d{display:block;font-size:10px;margin-top:4px;color:var(--ink-500);font-variant-numeric:tabular-nums}
.pv-tile .d.pos{color:var(--good-500)}
.pv-tile .d.neg{color:var(--bad-500)}
.pv-tile .d.steel{color:var(--steel-500)}

/* Mini card and table */
.pv-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pv-card .h{display:flex;align-items:center;gap:10px;padding:12px 15px 10px}
.pv-card .h b{font-size:12px;font-weight:640;letter-spacing:-.008em}
.pv-card .h span{font-size:10px;color:var(--ink-500);margin-left:auto;font-variant-numeric:tabular-nums}
.pv-tbl{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}
.pv-tbl th{
  text-align:right;padding:6px 15px;font-size:8.5px;font-weight:680;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-400);border-bottom:1px solid var(--line);white-space:nowrap;
}
.pv-tbl th:first-child,.pv-tbl td:first-child{text-align:left}
.pv-tbl td{padding:8px 15px;text-align:right;border-bottom:1px solid var(--line);color:var(--ink-700);white-space:nowrap}
.pv-tbl tr:last-child td{border-bottom:0}
.pv-tbl td b{font-weight:620;color:var(--ink-900)}
.pv-tbl .nm{display:block;font-size:11px;font-weight:580;color:var(--ink-900);line-height:1.3}
.pv-tbl .cd{display:block;font-size:9.5px;color:var(--ink-400);font-family:var(--mono);margin-top:1px}
.pv-tbl .pos{color:var(--good-500);font-weight:600}
.pv-tbl .neg{color:var(--bad-500);font-weight:600}
.pv-tbl .warnt{color:var(--warn-600);font-weight:600}

/* The measured bar the product uses wherever progress meets a baseline */
.pv-bar{position:relative;height:5px;border-radius:3px;background:var(--panel-2);overflow:hidden;min-width:54px}
.pv-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--steel-400);display:block}
.pv-bar i.gold{background:var(--accent-400)}
.pv-bar i.bad{background:var(--bad-500)}
.pv-plan{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--ink-700);opacity:.55}

/* --------------------------------------------------------------------------
   Question ledger. The problem section, written as the questions themselves.
   -------------------------------------------------------------------------- */
.s-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}

.s-scatter{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.s-scatter span{
  font-size:12.5px;font-weight:530;color:var(--ink-500);background:var(--paper);
  border:1px solid var(--line);border-radius:8px;padding:7px 12px;
}
.s-sec.ink .s-scatter span{background:var(--rail-2);border-color:var(--rail-line);color:var(--rail-ink)}

.s-ledger{border-top:1px solid var(--line);counter-reset:q}
.s-sec.ink .s-ledger{border-top-color:var(--rail-line)}
.s-ledger li{
  display:flex;align-items:baseline;gap:16px;padding:14px 4px;
  border-bottom:1px solid var(--line);list-style:none;
  font-size:15.5px;line-height:1.5;color:var(--ink-800);
}
.s-sec.ink .s-ledger li{border-bottom-color:var(--rail-line);color:#dbe1e8}
.s-ledger li::before{
  counter-increment:q;content:counter(q,decimal-leading-zero);
  font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--accent-400);
  flex:none;letter-spacing:.02em;
}

/* --------------------------------------------------------------------------
   Chains. BOQ to budget to commitment to cost to forecast to margin.
   -------------------------------------------------------------------------- */
.s-chains{display:grid;gap:14px}
.s-chain{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--shadow-card);
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;
}
.s-chain .lead{min-width:0}
.s-chain .lead b{display:block;font-size:14px;font-weight:640;letter-spacing:-.01em;color:var(--ink-900)}
.s-chain .lead span{display:block;font-size:11.5px;color:var(--ink-500);margin-top:3px;line-height:1.45}
.s-links{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.s-links .n{
  display:inline-flex;align-items:center;padding:7px 13px;border-radius:8px;
  background:var(--panel);border:1px solid var(--line);
  font-size:12.5px;font-weight:560;color:var(--ink-700);white-space:nowrap;
}
.s-links .n.first{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.s-links .n.last{background:var(--accent-50);border-color:var(--accent-200);color:var(--accent-600);font-weight:640}
.s-links .a{
  flex:none;width:22px;height:1.5px;background:var(--line-strong);position:relative;
}
.s-links .a::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(45deg);
  width:5px;height:5px;border-top:1.5px solid var(--line-strong);border-right:1.5px solid var(--line-strong);
}

/* --------------------------------------------------------------------------
   Command centre blocks
   -------------------------------------------------------------------------- */
.s-blocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.s-block{background:var(--paper);padding:20px 20px 22px}
.s-block .t{
  display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-600);margin-bottom:12px;
}
.s-block ul{list-style:none}
.s-block li{
  font-size:13px;color:var(--ink-600);padding:4.5px 0;line-height:1.45;
  display:flex;align-items:baseline;gap:8px;
}
.s-block li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--ink-300);flex:none;transform:translateY(-2px)}

/* --------------------------------------------------------------------------
   Modules
   -------------------------------------------------------------------------- */
.s-mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px}
.s-mod{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 8px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;
}
.s-mod > .t{
  display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-600);padding-bottom:14px;border-bottom:1px solid var(--line);
}
.s-mod dl{margin:0}
.s-mod dt{
  font-size:13.5px;font-weight:620;color:var(--ink-900);letter-spacing:-.006em;
  padding-top:14px;
}
.s-mod dd{font-size:12.5px;line-height:1.55;color:var(--ink-500);margin:3px 0 14px;border-bottom:1px solid var(--line)}
.s-mod dd:last-of-type{border-bottom:0;margin-bottom:8px}

/* --------------------------------------------------------------------------
   Intelligence findings
   -------------------------------------------------------------------------- */
.s-finds{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.s-find{
  background:var(--rail-2);border:1px solid var(--rail-line);border-radius:var(--r-lg);
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.s-find .cat{
  display:inline-flex;align-items:center;gap:7px;font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rail-ink-dim);
}
.s-find .cat i{width:6px;height:6px;border-radius:50%;flex:none;display:block}
.s-find .cat i.high{background:#e5675c}
.s-find .cat i.med{background:var(--accent-300)}
.s-find .cat i.low{background:var(--steel-400)}
.s-find b{font-size:14.5px;font-weight:600;color:#fff;line-height:1.4;letter-spacing:-.008em}
.s-find p{font-size:12.5px;line-height:1.6;color:var(--rail-ink);margin:0}
.s-find .src{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--rail-line);
  font-size:10.5px;color:var(--rail-ink-dim);font-family:var(--mono);letter-spacing:-.01em;
}

/* --------------------------------------------------------------------------
   Roles
   -------------------------------------------------------------------------- */
.s-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.s-role{background:var(--paper);padding:24px 22px}
.s-role b{display:block;font-size:14.5px;font-weight:640;letter-spacing:-.01em;color:var(--ink-900)}
.s-role .q{display:block;font-family:var(--serif);font-size:15px;line-height:1.4;color:var(--ink-700);margin:12px 0 12px;letter-spacing:-.008em}
.s-role ul{list-style:none}
.s-role li{font-size:12.5px;color:var(--ink-500);padding:3px 0;display:flex;gap:7px;align-items:baseline}
.s-role li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--accent-300);flex:none;transform:translateY(-2px)}
.s-roles-foot{
  margin-top:22px;padding:16px 20px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);font-size:13.5px;line-height:1.6;color:var(--ink-600);
}
.s-roles-foot b{color:var(--ink-900);font-weight:620}

/* --------------------------------------------------------------------------
   Pathways
   -------------------------------------------------------------------------- */
.s-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.s-path{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);
}
.s-path.lead{border-color:var(--ink-900);box-shadow:var(--shadow-raised);position:relative}
.s-path.lead::before{
  content:"Most contractors start here";position:absolute;top:-10px;left:24px;
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  background:var(--ink-900);color:#fff;padding:3.5px 11px;border-radius:20px;
}
.s-path .nm{font-size:18px;font-weight:640;letter-spacing:-.015em;color:var(--ink-900)}
.s-path .for{font-size:12.5px;color:var(--ink-500);margin-top:5px;line-height:1.5}
.s-path ul{list-style:none;margin:20px 0 24px;padding-top:18px;border-top:1px solid var(--line)}
.s-path li{font-size:13px;line-height:1.5;color:var(--ink-600);padding:5px 0;display:flex;gap:9px;align-items:baseline}
.s-path li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent-300);flex:none;transform:translateY(-2px)}
.s-path .go{margin-top:auto}
.s-terms{
  margin-top:24px;font-size:13px;line-height:1.65;color:var(--ink-500);
  text-align:center;max-width:76ch;margin-inline:auto;
}

/* --------------------------------------------------------------------------
   Tools bridge
   -------------------------------------------------------------------------- */
.s-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.s-tool{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 19px;display:flex;flex-direction:column;gap:7px;
}
.s-tool .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.s-tool b{font-size:13.5px;font-weight:620;color:var(--ink-900);letter-spacing:-.008em}
.s-tool .badge{margin-left:auto;flex:none}
.s-tool .q{font-family:var(--serif);font-size:14px;color:var(--ink-700);line-height:1.4}
.s-tool p{font-size:12.5px;line-height:1.55;color:var(--ink-500);margin:0}
/* Only a tool that is actually live carries a link out to it. */
.s-tool a{font-size:12.5px;font-weight:560;color:var(--ink-900);text-decoration:none;border-bottom:1px solid var(--line-strong,var(--line))}
.s-tool a:hover{border-bottom-color:var(--ink-900)}

/* --------------------------------------------------------------------------
   Trust
   -------------------------------------------------------------------------- */
.s-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.s-trust-col > .t{
  display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-600);padding-bottom:14px;
  border-bottom:1px solid var(--line);margin-bottom:6px;
}
.s-trust-col.planned > .t{color:var(--ink-400)}
.s-trust-col dt{font-size:13.5px;font-weight:620;color:var(--ink-900);padding-top:16px}
.s-trust-col dd{font-size:12.5px;line-height:1.6;color:var(--ink-500);margin:4px 0 0}
.s-trust-note{
  grid-column:1/-1;margin-top:4px;padding:16px 20px;border-radius:var(--r);
  background:var(--warn-50);border:1px solid var(--warn-100);
  font-size:13px;line-height:1.6;color:var(--warn-600);
}
.s-trust-note b{font-weight:660}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.s-faq{border-top:1px solid var(--line)}
.s-faq details{border-bottom:1px solid var(--line)}
.s-faq summary{
  display:flex;align-items:flex-start;gap:16px;padding:20px 4px;cursor:pointer;
  font-size:15.5px;font-weight:580;color:var(--ink-900);letter-spacing:-.008em;line-height:1.45;
  list-style:none;
}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{
  content:"";margin-left:auto;flex:none;width:9px;height:9px;margin-top:5px;
  border-right:1.6px solid var(--ink-400);border-bottom:1.6px solid var(--ink-400);
  transform:rotate(45deg);transition:transform .18s ease;
}
.s-faq details[open] summary::after{transform:rotate(-135deg)}
.s-faq summary:hover{color:var(--accent-600)}
.s-faq .a{padding:0 44px 22px 4px;font-size:14.5px;line-height:1.68;color:var(--ink-600)}
.s-faq .a p + p{margin-top:12px}
.s-faq .a b{color:var(--ink-800);font-weight:620}

/* --------------------------------------------------------------------------
   Closing call
   -------------------------------------------------------------------------- */
.s-close{text-align:center}
.s-close .s-h2{color:#fff;max-width:20ch;margin-inline:auto}
.s-close .s-lede{color:var(--rail-ink);margin:20px auto 0;max-width:60ch}
.s-close .s-cta-row{justify-content:center;margin-top:36px}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.s-foot{background:var(--rail);color:var(--rail-ink);padding-block:64px 34px;border-top:1px solid var(--rail-line)}
.s-foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px}
.s-foot .about{font-size:13px;line-height:1.66;color:var(--rail-ink-dim);max-width:38ch;margin-top:16px}
.s-foot .t{
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;margin-bottom:14px;
}
.s-foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.s-foot a{font-size:13.5px;color:var(--rail-ink);transition:color .13s ease}
.s-foot a:hover{color:var(--accent-200)}
.s-foot .ext{font-size:9.5px;color:var(--rail-ink-dim);margin-left:5px;letter-spacing:.04em}
.s-foot-base{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--rail-line);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  font-size:12px;color:var(--rail-ink-dim);
}
.s-foot-base .spacer{flex:1}

/* --------------------------------------------------------------------------
   Site modal. The application's modal lives inside #app, which is not
   rendered while the site is showing, so the site carries its own.
   -------------------------------------------------------------------------- */
.s-modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(11,14,19,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.s-modal.on{display:flex}
.s-modal-card:focus{outline:none}
.s-modal-card{
  width:min(520px,100%);max-height:88vh;overflow-y:auto;background:var(--paper);
  border-radius:var(--r-xl);box-shadow:var(--shadow-float);color:var(--ink-900);
}
.s-modal-h{display:flex;align-items:flex-start;gap:14px;padding:24px 26px 0}
.s-modal-h h2{font-size:19px;font-weight:640;letter-spacing:-.014em}
.s-modal-h p{font-size:13px;color:var(--ink-500);margin-top:4px;line-height:1.55}
.s-modal-h .x{margin-left:auto;flex:none;padding:6px;border-radius:8px;color:var(--ink-400)}
.s-modal-h .x:hover{background:var(--panel-2);color:var(--ink-900)}
.s-modal-b{padding:20px 26px 24px}
.s-modal-b .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.s-modal-f{
  padding:14px 26px;border-top:1px solid var(--line);background:var(--panel);
  border-radius:0 0 var(--r-xl) var(--r-xl);font-size:12px;color:var(--ink-500);line-height:1.55;
}
.s-field{margin-bottom:14px}
.s-field label{
  display:block;font-size:10.5px;font-weight:680;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-500);margin-bottom:6px;
}
.s-field input,.s-field textarea,.s-field select{
  width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--panel);font-size:14.5px;color:var(--ink-900);
}
.s-field textarea{min-height:88px;resize:vertical;line-height:1.55}
.s-field input:focus,.s-field textarea:focus,.s-field select:focus{
  outline:none;border-color:var(--accent-300);background:var(--paper);
}

/* Field states. An error is attached to the field it belongs to, because a
   list of problems at the top of a form makes people hunt. */
.s-field .opt{font-weight:520;letter-spacing:0;text-transform:none;color:var(--ink-400);margin-left:6px}
.s-err{display:block;font-size:12px;color:var(--bad-500);margin-top:6px;font-weight:520}
.s-field.bad input,.s-field.bad textarea,.s-field.bad select{border-color:var(--bad-500);background:var(--bad-50)}
.s-field.bad label{color:var(--bad-600)}

.s-alert{
  padding:12px 14px;border-radius:10px;margin-bottom:16px;
  background:var(--bad-50);border:1px solid var(--bad-100);
  font-size:13px;line-height:1.55;color:var(--bad-600);
}
.s-alert a{color:inherit;text-decoration:underline;font-weight:620}

/* The honeypot. Off screen rather than display:none, because some bots skip
   fields that are not rendered at all. */
.s-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

#qSubmit:disabled{opacity:.6;cursor:progress}

/* Confirmation */
.s-done{text-align:center;padding-top:28px}
.s-done .tick{
  width:52px;height:52px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--good-50);border:1px solid var(--good-100);color:var(--good-500);
}
.s-done h3{font-size:20px;font-weight:640;letter-spacing:-.014em;margin-bottom:10px}
.s-done p{font-size:14px;line-height:1.65;color:var(--ink-600);max-width:42ch;margin:0 auto 12px}
.s-done .next{color:var(--ink-500);font-size:13px}
.s-done .ref{font-family:var(--mono);font-size:13px;background:var(--panel-2);padding:1px 7px;border-radius:5px;letter-spacing:.02em}
.s-done .s-btn{margin-top:12px}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  #site{--sec-y:88px}
  .s-split{grid-template-columns:minmax(0,1fr);gap:40px}
  .s-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-paths{grid-template-columns:minmax(0,1fr);gap:16px}
  .s-path.lead{order:-1}
  .s-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
  .s-foot .about{max-width:none}
}

@media (max-width:900px){
  .s-nav,.s-actions{display:none}
  .s-burger{display:inline-flex}
  .pv-body{grid-template-columns:minmax(0,1fr)}
  .pv-rail{display:none}
  .pv-tiles,.pv-tiles.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-chain{grid-template-columns:minmax(0,1fr);gap:14px}
  .s-trust{grid-template-columns:minmax(0,1fr);gap:30px}
}

@media (max-width:720px){
  #site{--sec-y:68px;--gutter:20px}
  .s-hero{padding-block:56px 0}
  .s-hero-stage{margin-top:44px;transform:translateY(36px)}
  .s-hero-spacer{height:36px}
  .s-cta-row{gap:10px}
  .s-cta-row .s-btn{flex:1 1 100%}
  .s-head{margin-bottom:36px}
  .s-blocks{grid-template-columns:minmax(0,1fr)}
  .s-mods{grid-template-columns:minmax(0,1fr)}
  .s-roles{grid-template-columns:minmax(0,1fr)}
  .s-ledger li{font-size:14.5px;gap:12px}
  .s-faq summary{font-size:14.5px;gap:12px}
  .s-faq .a{padding-right:8px;font-size:14px}
  .pv-chrome .url{max-width:52%}
  .pv-canvas{padding:13px;gap:11px}
  .pv-tile .v{font-size:16.5px}
  .s-foot-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .s-modal{padding:0;align-items:flex-end}
  .s-modal-card{width:100%;max-height:92vh;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .s-modal-f{border-radius:0}
}

@media (max-width:480px){
  .pv-tiles,.pv-tiles.c4,.pv-tiles.c3{grid-template-columns:minmax(0,1fr)}
  .s-modal-b .row2{grid-template-columns:1fr}
}

/* Long tables inside a preview scroll within the frame, never the page. */
.pv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pv-scroll .pv-tbl{min-width:520px}

@media (prefers-reduced-motion:reduce){
  #site *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* --------------------------------------------------------------------------
   Paper

   The site is a shopfront, so most of it earns nothing on paper: the sticky
   header, the calls to action, the mobile sheet. What is worth printing is
   the argument, so the argument prints. Graphite sections come back as ink
   on white rather than emptying a toner cartridge, and every answer in the
   FAQ is opened, because a printed page cannot be clicked.
   -------------------------------------------------------------------------- */
@media print{
  @page{size:A4;margin:14mm 12mm}
  #site{--sec-y:0}
  .s-header,.s-sheet,.s-modal,.s-burger,.s-btn,.s-cta-row,.s-cta-note,.s-status,
  .s-hero::before,.s-hero-spacer,.pv-chrome{display:none !important}

  .s-sec,.s-hero,.s-foot{background:#fff !important;color:#111 !important;padding-block:18px !important}
  .s-hero{padding-top:0 !important}
  .s-sec.ink .s-h2,.s-hero h1,.s-close .s-h2,.s-foot .t,.s-find b{color:#111 !important}
  .s-sec.ink .s-lede,.s-sec.ink .s-p,.s-close .s-lede,.s-foot .about,.s-foot a,.s-find p{color:#333 !important}
  .s-eyebrow,.s-sec.ink .s-eyebrow{color:#7a5e18 !important}

  .s-find,.s-ledger li,.s-foot,.s-foot-base{background:#fff !important;border-color:#ccc !important}
  .s-find .cat,.s-find .src,.s-foot-base{color:#555 !important}
  .pv,.pv-main,.pv-canvas,.pv-tile,.pv-card{background:#fff !important;box-shadow:none !important;border-color:#ccc !important}
  .pv-rail{background:#f4f4f4 !important}
  .pv-rail .co b,.pv-rail .it{color:#333 !important}
  .s-hero-stage{transform:none !important;margin-top:20px !important}

  .s-chain,.s-block,.s-mod,.s-role,.s-path,.s-find,.s-tool,details{break-inside:avoid}
  .s-faq .a{display:block !important}          /* every answer, opened */
  .s-faq summary::after{display:none}
  .s-wrap{width:100% !important;padding-inline:0 !important}
  a{color:inherit !important;text-decoration:none}
  .s-foot .ext{display:none}
}

/* --------------------------------------------------------------------------
   Preview sub-components. A pair of cards side by side, and the label and
   value rows the product uses wherever a figure needs naming.
   -------------------------------------------------------------------------- */
.pv-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pv-rows{padding:2px 15px 13px}
.pv-rows .r{
  display:flex;align-items:baseline;gap:12px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:11px;
}
.pv-rows .r:last-child{border-bottom:0}
.pv-rows .r .k{color:var(--ink-500);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-rows .r .v{
  margin-left:auto;font-weight:620;color:var(--ink-900);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;
}
.pv-rows .r .v.pos{color:var(--good-500)}
.pv-rows .r .v.neg{color:var(--bad-500)}
.pv-rows .r .v.warnt{color:var(--warn-600)}
.pv-rows .r .v.steel{color:var(--steel-500)}

@media (max-width:720px){
  .pv-duo{grid-template-columns:minmax(0,1fr)}
}