/* ==========================================================================
   OraOS Business
   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,
   ink type, one restrained gold used for emphasis and never for decoration.

   Where it differs from OraOS Construction, deliberately. Construction's
   product signature is a graphite command rail, so its previews are dark.
   This product is paper: an owner opens it on a phone in daylight, and the
   sidebar is ivory. The previews here render that honestly rather than
   borrowing the sibling's furniture. The two sites share typography, grid,
   restraint and the gold; they do not share a skin.

   The product is the hero. Every screen shown on this page is drawn from
   these same tokens and populated from data.js, so the pictures 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;

  /* The graphite the brand mark is already made of, promoted to a surface.
     Used for the hero and two punctuation sections only. */
  --rail:#12161d;
  --rail-2:#1a202a;
  --rail-3:#232b36;
  --rail-line:#2b333f;
  --rail-ink:#aeb7c3;
  --rail-ink-dim:#6f7987;
  --accent-300:#dfc99f;

  /* Measurement and volume, so money and quantity never share a colour. */
  --steel-400:#8fa8c4;
  --steel-500:#5b7898;
  --steel-600:#415974;
}

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

body.site{background:var(--canvas)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;
  background:var(--ink-900);color:#fff;border-radius:0 0 10px 0;font-size:14px;font-weight:580;
}
.skip:focus{left:0}

/* --------------------------------------------------------------------------
   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}

.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)}

/* --------------------------------------------------------------------------
   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(33px,4.9vw,58px);
}
.s-h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.016em;line-height:1.14;
  font-size:clamp(27px,3.4vw,41px);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:840px;margin-bottom:52px}
.s-head.center{margin-inline:auto;text-align:center}
.s-head.center .s-lede{margin-inline:auto}
.s-note{font-size:12.5px;line-height:1.6;color:var(--ink-500)}
.s-sec.ink .s-note{color:var(--rail-ink-dim)}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.s-header{
  position:sticky;top:0;z-index:60;
  background:rgba(247,245,241,.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(247,245,241,.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-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);
  white-space:nowrap;
  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)}

.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;padding-block:94px 0}
/* The warm light is clipped by its own layer rather than by the hero, so the
   product frame below can hang past the fold without being sliced through. */
.s-hero-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.s-hero-glow::before{
  content:"";position:absolute;left:50%;top:-190px;transform:translateX(-50%);
  width:1120px;height:720px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(184,145,47,.17),rgba(184,145,47,0) 72%);
}
.s-hero .s-wrap{position:relative;z-index:1}
.s-hero-copy{max-width:880px}
.s-hero .s-eyebrow{color:var(--accent-300)}
.s-hero h1{color:#fff;margin-bottom:22px;max-width:880px}
.s-hero .lede{font-size:clamp(15.5px,1.6vw,18px);line-height:1.62;color:var(--rail-ink);max-width:63ch}

.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;cursor:pointer;
  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-200);border-color:var(--accent-200)}
.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-btn[disabled]{opacity:.6;cursor:default}

.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:62px;padding-bottom:0;transform:translateY(56px)}
.s-hero-spacer{height:56px;background:var(--canvas)}

/* --------------------------------------------------------------------------
   Product frame
   The application at rest. Paper sidebar, because that is what it is.
   -------------------------------------------------------------------------- */
.pv{
  background:var(--canvas);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:var(--shadow-float);overflow:hidden;
  /* The frame is a window onto a paper product. It must not inherit the ink
     of whatever section it happens to be sitting on, which is how the hero
     was bleaching the card headings inside it. */
  color:var(--ink-900);
}
.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);
  letter-spacing:-.01em;max-width:60%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.pv-body{display:grid;grid-template-columns:190px minmax(0,1fr)}
.pv-body.norail{grid-template-columns:minmax(0,1fr)}

/* Mini sidebar. Ivory, gold on the active item, exactly as the product. */
.pv-side{background:var(--paper);border-right:1px solid var(--line);padding:13px 11px;min-width:0}
.pv-side .co{display:flex;align-items:center;gap:9px;padding:0 3px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.pv-side .co .bz{
  width:25px;height:25px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--accent-100);color:var(--accent-600);font-size:9.5px;font-weight:700;letter-spacing:.02em;
}
.pv-side .co b{display:block;font-size:11px;color:var(--ink-900);font-weight:620;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-side .co span{display:block;font-size:9.5px;color:var(--ink-400)}
.pv-side .flag{
  margin:0 0 10px;padding:6px 9px;border-radius:7px;background:var(--accent-50);border:1px solid var(--accent-100);
  font-size:8px;font-weight:680;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-600);line-height:1.35;
}
.pv-side .lbl{
  font-size:8.5px;font-weight:680;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-400);padding:11px 7px 5px;
}
.pv-side .lbl:first-of-type{padding-top:2px}
.pv-side .it{
  display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:7px;
  font-size:11.5px;color:var(--ink-600);line-height:1.3;position:relative;
}
.pv-side .it .g{width:13px;height:13px;border-radius:3.5px;background:var(--panel-2);flex:none}
.pv-side .it.on{background:var(--accent-50);color:var(--accent-600);font-weight:600}
.pv-side .it.on .g{background:var(--accent-400)}
.pv-side .it .ct{
  margin-left:auto;font-size:9px;font-weight:680;padding:1px 6px;border-radius:20px;
  background:var(--panel-2);color:var(--ink-500);
}
.pv-side .it .ct.warn{background:var(--warn-50);color:var(--warn-600)}
.pv-side .it .ct.bad{background:var(--bad-50);color:var(--bad-600)}

/* 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 .ask{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border:1px solid var(--line-strong);border-radius:9px;background:var(--panel);flex:none;
  font-size:10.5px;font-weight:600;color:var(--ink-600);
}
.pv-top .ask .st{width:11px;height:11px;flex:none;color:var(--accent-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(6,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pv-tiles.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.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:18px;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:9.5px;margin-top:4px;color:var(--ink-500);font-variant-numeric:tabular-nums;line-height:1.4}
.pv-tile .d.pos{color:var(--good-500)}
.pv-tile .d.neg{color:var(--bad-500)}
.pv-tile .d.warnt{color:var(--warn-600)}
.pv-tile .d.gold{color:var(--accent-600)}

/* Mini card, table and the attention feed */
.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;color:var(--ink-900)}
.pv-card .h span{font-size:10px;color:var(--ink-500);margin-left:auto;font-variant-numeric:tabular-nums}
.pv-scroll{overflow-x:auto}
.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);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}

.pv-attend{display:flex;flex-direction:column}
.pv-attend .r{display:flex;align-items:flex-start;gap:10px;padding:10px 15px;border-top:1px solid var(--line)}
.pv-attend .r:first-child{border-top:0}
.pv-attend .ic{
  width:22px;height:22px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);color:var(--ink-500);
}
.pv-attend .ic.bad{background:var(--bad-50);color:var(--bad-500)}
.pv-attend .ic.warn{background:var(--warn-50);color:var(--warn-600)}
.pv-attend .ic.accent{background:var(--accent-50);color:var(--accent-600)}
.pv-attend .ic.calm{background:var(--calm-50);color:var(--calm-500)}
.pv-attend .tx b{display:block;font-size:11.5px;font-weight:600;color:var(--ink-900);line-height:1.35}
.pv-attend .tx span{display:block;font-size:10.5px;color:var(--ink-500);line-height:1.45;margin-top:2px}

/* The bar the product uses wherever a level meets a threshold */
.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-bar i.good{background:var(--good-500)}
.pv-plan{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--ink-700);opacity:.55}

/* A column chart drawn in boxes, the way the product draws its own. */
.pv-cols{display:flex;align-items:flex-end;gap:5px;height:92px;padding:14px 15px 0}
.pv-cols .c{flex:1;border-radius:3px 3px 0 0;background:var(--ink-300);min-width:0}
.pv-cols .c.on{background:var(--accent-400)}
.pv-colx{display:flex;gap:5px;padding:6px 15px 13px;font-size:8.5px;color:var(--ink-400)}
.pv-colx span{flex:1;text-align:center;min-width:0;overflow:hidden}

/* --------------------------------------------------------------------------
   Question ledger. The problem section, written as the questions themselves.
   -------------------------------------------------------------------------- */
.s-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);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:20px;padding:6px 14px;
}
.s-sec.canvas .s-scatter span{background:var(--paper)}

.s-qs{border-top:1px solid var(--line)}
.s-qs .q{
  display:flex;align-items:baseline;gap:16px;padding:15px 4px;border-bottom:1px solid var(--line);
}
.s-qs .q .n{
  font-size:10.5px;font-weight:680;color:var(--ink-300);flex:none;width:22px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.s-qs .q .t{font-size:16px;font-weight:520;color:var(--ink-800);line-height:1.4;letter-spacing:-.008em}
.s-qs .q .a{margin-left:auto;font-size:11.5px;color:var(--ink-400);flex:none;text-align:right;padding-left:14px}
.s-qs-foot{margin-top:26px;font-size:14.5px;line-height:1.65;color:var(--ink-600)}
.s-qs-foot b{color:var(--ink-900);font-weight:620}

/* --------------------------------------------------------------------------
   Chains. Sale to customer to invoice to receipt to cash.
   -------------------------------------------------------------------------- */
.s-chains{display:grid;gap:14px}
.s-chain{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;display:grid;grid-template-columns:184px minmax(0,1fr);gap:26px;align-items:center;
}
.s-chain .lead b{display:block;font-size:14.5px;font-weight:640;letter-spacing:-.01em;color:var(--ink-900)}
.s-chain .lead span{display:block;font-size:12px;color:var(--ink-500);margin-top:4px;line-height:1.5}
.s-chain .flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.s-chain .node{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line);font-size:12.5px;font-weight:560;color:var(--ink-700);
}
.s-chain .node .d{width:5px;height:5px;border-radius:50%;background:var(--ink-300);flex:none}
.s-chain .node.end{background:var(--accent-50);border-color:var(--accent-100);color:var(--accent-600);font-weight:620}
.s-chain .node.end .d{background:var(--accent-400)}
.s-chain .arw{color:var(--ink-300);flex:none;display:flex}

/* --------------------------------------------------------------------------
   Command centre blocks
   -------------------------------------------------------------------------- */
.s-blocks{display:grid;grid-template-columns:repeat(3,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:24px 22px}
.s-block .k{
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-600);
}
.s-block .v{
  display:block;font-family:var(--serif);font-size:27px;font-weight:400;letter-spacing:-.02em;
  color:var(--ink-900);margin-top:12px;font-variant-numeric:tabular-nums;line-height:1.1;
}
.s-block p{font-size:13px;line-height:1.6;color:var(--ink-600);margin-top:9px}
.s-block ul{list-style:none;margin-top:14px;display:grid;gap:7px}
.s-block li{font-size:12.5px;color:var(--ink-500);line-height:1.45;position:relative;padding-left:14px}
.s-block li::before{content:"";position:absolute;left:0;top:6px;width:4px;height:4px;border-radius:50%;background:var(--ink-300)}

/* --------------------------------------------------------------------------
   Modules
   -------------------------------------------------------------------------- */
.s-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.s-mod{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 21px;
  display:flex;flex-direction:column;
}
.s-mod .top{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.s-mod .ic{
  width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--accent-50);color:var(--accent-600);border:1px solid var(--accent-100);
}
.s-mod h3{font-size:15.5px;font-weight:640;letter-spacing:-.011em;color:var(--ink-900)}
.s-mod p{font-size:13px;line-height:1.62;color:var(--ink-600)}
.s-mod .does{margin-top:15px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px}
.s-mod .does span{
  font-size:11px;font-weight:540;color:var(--ink-500);background:var(--panel-2);
  border-radius:6px;padding:4px 9px;
}

/* --------------------------------------------------------------------------
   Intelligence findings
   -------------------------------------------------------------------------- */
.s-finds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.s-find{
  background:var(--rail-2);border:1px solid var(--rail-line);border-radius:var(--r-lg);padding:22px 22px 20px;
}
.s-find .hd{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.s-find .tag{
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;background:rgba(223,201,159,.12);color:var(--accent-300);
}
.s-find .tag.bad{background:rgba(179,38,30,.16);color:#f0a49d}
.s-find .tag.warn{background:rgba(162,112,15,.18);color:#e8c479}
.s-find .tag.steel{background:rgba(143,168,196,.14);color:var(--steel-400)}
.s-find .when{margin-left:auto;font-size:10.5px;color:var(--rail-ink-dim)}
.s-find h3{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:-.011em;line-height:1.4}
.s-find p{font-size:13.5px;line-height:1.65;color:var(--rail-ink);margin-top:9px}
.s-find .why{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--rail-line);
  font-size:12px;line-height:1.6;color:var(--rail-ink-dim);
}
.s-find .why b{color:var(--accent-300);font-weight:640;letter-spacing:.03em;text-transform:uppercase;font-size:9.5px}

/* --------------------------------------------------------------------------
   Readiness, the product's flagship
   -------------------------------------------------------------------------- */
.s-ready{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.s-dial{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;
  box-shadow:var(--shadow-raised);
}
.s-dial .top{display:flex;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.s-dial .ring{position:relative;width:96px;height:96px;flex:none}
.s-dial .ring b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:29px;font-weight:400;color:var(--ink-900);letter-spacing:-.02em;
}
.s-dial .top .t b{display:block;font-size:15px;font-weight:640;color:var(--ink-900)}
.s-dial .top .t span{display:block;font-size:12.5px;color:var(--ink-500);line-height:1.5;margin-top:4px}
.s-comp{display:grid;gap:0;margin-top:6px}
.s-comp .r{display:grid;grid-template-columns:minmax(0,1fr) 96px 40px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.s-comp .r:last-child{border-bottom:0}
.s-comp .nm{font-size:12.5px;color:var(--ink-700);font-weight:520;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-comp .w{font-size:10px;color:var(--ink-400);display:block;font-weight:500}
.s-comp .sc{font-size:12px;font-weight:640;color:var(--ink-900);text-align:right;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   Roles
   -------------------------------------------------------------------------- */
.s-roles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.s-role{background:var(--paper);padding:22px 19px}
.s-role .k{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-600)}
.s-role h3{font-size:14.5px;font-weight:640;margin-top:11px;color:var(--ink-900);letter-spacing:-.01em}
.s-role p{font-size:12.5px;line-height:1.6;color:var(--ink-600);margin-top:8px}

.s-profiles{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.s-profiles span{
  font-size:13px;font-weight:540;color:var(--ink-700);background:var(--paper);
  border:1px solid var(--line-strong);border-radius:9px;padding:9px 15px;
}

/* --------------------------------------------------------------------------
   Pathways
   -------------------------------------------------------------------------- */
.s-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.s-path{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;
  display:flex;flex-direction:column;
}
.s-path.lead{border-color:var(--accent-200);box-shadow:0 0 0 1px var(--accent-100),var(--shadow-raised)}
.s-path .k{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400)}
.s-path.lead .k{color:var(--accent-600)}
.s-path h3{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.018em;margin-top:12px;color:var(--ink-900)}
.s-path p{font-size:13.5px;line-height:1.65;color:var(--ink-600);margin-top:11px}
.s-path ul{list-style:none;margin-top:17px;display:grid;gap:9px;flex:1}
.s-path li{font-size:12.5px;color:var(--ink-600);display:flex;gap:10px;line-height:1.5}
.s-path li svg{flex:none;margin-top:2px;color:var(--accent-500)}
.s-path .s-btn{margin-top:22px}
.s-terms{margin-top:26px;font-size:13px;line-height:1.65;color:var(--ink-500);max-width:76ch}

/* --------------------------------------------------------------------------
   Tools bridge
   -------------------------------------------------------------------------- */
.s-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:34px}
.s-tool{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:17px 16px;
}
.s-tool b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-900);line-height:1.35;letter-spacing:-.008em}
.s-tool span{display:block;font-size:11.5px;color:var(--ink-500);margin-top:7px;line-height:1.5}
.s-tool .st{
  display:inline-block;margin-top:12px;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;background:var(--panel-2);color:var(--ink-500);
}
.s-tool .st.soon{background:var(--accent-50);color:var(--accent-600)}
.s-tool .st.live{background:var(--good-50);color:var(--good-500)}
.s-tool a{color:var(--ink-900);font-size:11.5px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-strong,var(--line));padding-bottom:1px}
.s-tool a:hover{border-bottom-color:var(--ink-900)}

/* --------------------------------------------------------------------------
   Trust
   -------------------------------------------------------------------------- */
.s-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.s-trust .t{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 21px;
  display:flex;gap:14px;
}
.s-trust .t svg{flex:none;margin-top:2px;color:var(--ink-400)}
.s-trust .t b{display:block;font-size:14px;font-weight:620;color:var(--ink-900);letter-spacing:-.008em}
.s-trust .t p{font-size:13px;line-height:1.62;color:var(--ink-600);margin-top:6px}
.s-plain{
  margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;font-size:13.5px;line-height:1.7;color:var(--ink-600);
}
.s-plain b{color:var(--ink-900);font-weight:620}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.s-faq{border-top:1px solid var(--line)}
.s-faq details{border-bottom:1px solid var(--line)}
.s-faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 2px;position:relative;
  font-size:16px;font-weight:580;color:var(--ink-900);letter-spacing:-.009em;line-height:1.45;
}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{
  content:"";position:absolute;right:12px;top:26px;width:9px;height:9px;
  border-right:1.6px solid var(--ink-400);border-bottom:1.6px solid var(--ink-400);
  transform:rotate(45deg);transition:transform .16s ease;
}
.s-faq details[open] summary::after{transform:rotate(225deg);top:29px}
.s-faq .a{padding:0 60px 22px 2px;font-size:14.5px;line-height:1.7;color:var(--ink-600)}
.s-faq .a b{color:var(--ink-900);font-weight:620}

/* --------------------------------------------------------------------------
   Closing call
   -------------------------------------------------------------------------- */
.s-close{text-align:center;max-width:760px;margin-inline:auto}
.s-close h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.018em;
  line-height:1.14;color:#fff}
.s-close p{font-size:16px;line-height:1.65;color:var(--rail-ink);margin-top:18px}
.s-close .s-cta-row{justify-content:center}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.s-foot{background:var(--rail);border-top:1px solid var(--rail-line);padding-block:38px 44px;color:var(--rail-ink)}
.s-foot .in{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap}
.s-foot .mark-text b{color:#fff;font-size:14px}
.s-foot .mark-text span{color:var(--rail-ink-dim)}
.s-foot .about{max-width:34ch;font-size:12.5px;line-height:1.65;color:var(--rail-ink-dim);margin-top:14px}
.s-foot nav{display:flex;gap:44px;margin-left:auto;flex-wrap:wrap}
.s-foot nav div b{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rail-ink-dim);margin-bottom:12px}
.s-foot nav a{display:block;font-size:13px;color:var(--rail-ink);padding:4px 0}
.s-foot nav a:hover{color:#fff}
.s-foot .rule{height:1px;background:var(--rail-line);margin:34px 0 20px}
.s-foot .fine{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--rail-ink-dim);line-height:1.6}
.s-foot .fine .sp{margin-left:auto}

/* --------------------------------------------------------------------------
   Site modal. The application's modal lives inside app.html, which is a
   different document, so the site carries its own.
   -------------------------------------------------------------------------- */
.s-modal{
  position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(12,15,20,.5);backdrop-filter:blur(3px);
}
.s-modal.on{display:flex}
.s-modal-card{
  width:min(620px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  background:var(--paper);border-radius:var(--r-xl);box-shadow:var(--shadow-float);
}
.s-modal-h{display:flex;align-items:flex-start;gap:16px;padding:26px 26px 20px;border-bottom:1px solid var(--line)}
.s-modal-h h2{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.018em;line-height:1.2;color:var(--ink-900)}
.s-modal-h p{font-size:13.5px;line-height:1.6;color:var(--ink-500);margin-top:9px}
.s-modal-h .x{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;color:var(--ink-500);border:1px solid transparent;
}
.s-modal-h .x:hover{background:var(--panel-2);color:var(--ink-900)}
.s-modal-b{padding:22px 26px 26px;display:grid;gap:14px}
.s-modal-b .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.s-modal-f{padding:16px 26px 22px;font-size:12px;line-height:1.6;color:var(--ink-500);border-top:1px solid var(--line)}
.s-modal-f b{color:var(--ink-700);font-weight:600}

.s-field label{display:block;font-size:12px;font-weight:620;color:var(--ink-700);margin-bottom:6px;letter-spacing:.01em}
.s-field label .opt{font-weight:500;color:var(--ink-400);letter-spacing:0}
.s-field input,.s-field select,.s-field textarea{
  width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--paper);font-size:14.5px;color:var(--ink-900);
}
.s-field textarea{min-height:88px;resize:vertical;line-height:1.55}
.s-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 8 5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;padding-right:32px}
.s-field input:focus,.s-field select:focus,.s-field textarea:focus{
  outline:none;border-color:var(--accent-400);box-shadow:0 0 0 3px var(--accent-50);
}
.s-field.bad input,.s-field.bad select,.s-field.bad textarea{border-color:var(--bad-500)}
.s-err{display:block;font-size:11.5px;color:var(--bad-600);margin-top:5px;font-weight:540}
.s-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.s-alert{
  background:var(--warn-50);border:1px solid var(--warn-100);border-radius:9px;padding:12px 14px;
  font-size:13px;line-height:1.6;color:var(--warn-600);
}
.s-alert a{color:var(--accent-600);border-bottom:1px solid currentColor;font-weight:560}
.s-alert b{color:var(--warn-600)}

.s-done{text-align:center;padding-top:30px}
.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);color:var(--good-500);border:1px solid var(--good-100);
}
.s-done h3{font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:-.018em;color:var(--ink-900)}
.s-done p{font-size:14px;line-height:1.65;color:var(--ink-600);margin-top:12px}
.s-done p.next{font-size:13px;color:var(--ink-500)}
.s-done .ref{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--ink-900)}
.s-done .s-btn{margin-top:22px}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  #site{--sec-y:88px}
  .s-blocks,.s-mods,.s-paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s-split,.s-ready{grid-template-columns:minmax(0,1fr);gap:40px}
  .pv-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pv-tiles.c5,.pv-tiles.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .s-nav,.s-actions{display:none}
  .s-burger{display:flex}
  .s-hero{padding-block:64px 0}
  .s-hero-stage{margin-top:44px;transform:translateY(40px)}
  .s-hero-spacer{height:40px}
  .pv-body{grid-template-columns:minmax(0,1fr)}
  .pv-side{display:none}
  .s-finds,.s-trust{grid-template-columns:minmax(0,1fr)}
  .s-chain{grid-template-columns:minmax(0,1fr);gap:16px}
  .s-foot nav{margin-left:0;gap:34px}
}
@media (max-width:640px){
  #site{--sec-y:64px;--gutter:18px}
  .s-blocks,.s-mods,.s-paths,.s-roles{grid-template-columns:minmax(0,1fr)}
  .s-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-tiles,.pv-tiles.c5,.pv-tiles.c4,.pv-tiles.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-chrome .url{max-width:70%}
  .s-modal{padding:0;align-items:flex-end}
  .s-modal-card{max-height:94dvh;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .s-modal-b .row2{grid-template-columns:minmax(0,1fr)}
  .s-qs .q .a{display:none}
  .s-cta-row .s-btn{width:100%}
}

/* --------------------------------------------------------------------------
   Paper. Somebody will print this to take into a meeting.
   -------------------------------------------------------------------------- */
@media print{
  .s-header,.s-sheet,.s-modal,.s-cta-row,.s-btn,.skip,.s-foot nav{display:none !important}
  #site{--sec-y:0}
  .s-sec{padding-block:22px;break-inside:avoid}
  .s-sec.ink,.s-hero{background:#fff !important;color:#000 !important}
  .s-sec.ink .s-h2,.s-hero h1,.s-close h2{color:#000 !important}
  .s-sec.ink .s-p,.s-sec.ink .s-lede,.s-hero .lede,.s-close p{color:#333 !important}
  .s-find{background:#fff !important;border-color:#ccc !important}
  .s-find h3{color:#000 !important}
  .s-find p,.s-find .why{color:#333 !important}
  .s-hero-stage{transform:none;margin-top:22px}
  .s-hero-spacer{display:none}
  .pv{box-shadow:none}
  .s-foot{background:#fff !important;border-top:1px solid #ccc}
  .s-foot .mark-text b,.s-foot .about,.s-foot .fine{color:#333 !important}
}