:root{
    --ink:#1A3A5C; --ink-deep:#10283f; --ink-2:#21466b;
    --steel:#4A90C2; --steel-d:#2D5C86; --steel-l:#84B4D9;
    --accent:#F77223; --accent-d:#DC5E12; --teal:#16866C;
    --line:#E0E0E0; --line-2:#EDF1F4; --paper:#F0F4F7; --card:#FFFFFF; --muted:#62707e;
    --r-arch:#4A90C2; --r-gc:#1A3A5C; --r-sub:#F77223; --r-supp:#16866C; --r-rep:#B3384F;
--r-owner:#6B4E9E;
    --serif:"Fraunces",Georgia,"Times New Roman",serif;
    --sans:"Supreme",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    /* Manrope was the token here and is on the permanent ban list, alongside
       the Roboto that sat in its fallback chain. Supreme is the locked UI face;
       Fraunces stays display-only. Every page that consumes this file now loads
       Supreme from Fontshare, so the silent fall back to system-ui is gone. */
    --wrap:1180px; --rad:18px;
    --shadow:0 22px 50px -26px rgba(16,40,63,.42);
    --shadow-sm:0 12px 30px -18px rgba(16,40,63,.4);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:
      radial-gradient(1200px 620px at 82% -8%, #e7eff5, transparent),
      radial-gradient(900px 520px at 0% 8%, #eaf1f6, transparent),
      var(--paper);
    -webkit-font-smoothing:antialiased;line-height:1.5;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px;}
  .eyebrow{font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--steel-d);
    display:inline-flex;align-items:center;gap:10px;}
  .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--accent);display:inline-block;border-radius:2px;}
  /* The category line carries the whole positioning, so on the hero it gets to
     be read rather than skimmed. Bigger and heavier, but still well under the
     H1 — an eyebrow that competes with the headline is two headlines. Tracking
     eases as the size grows: .19em at 15px reads as spaced-out shouting. */
  .eyebrow-lg{font-size:15px;font-weight:800;letter-spacing:.13em;gap:13px;}
  .eyebrow-lg::before{width:30px;height:2px;}
  @media(max-width:900px){ .eyebrow-lg{font-size:13.5px;letter-spacing:.11em;} }
  @media(max-width:520px){
    /* At 390px this is two lines; the dash on its own line looks like a bug, so
       it goes and the line simply wraps as text. */
    .eyebrow-lg{font-size:12.5px;letter-spacing:.09em;display:block;line-height:1.5;}
    .eyebrow-lg::before{display:none;}
  }
  h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;margin:0;line-height:1.08;font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 1;}
  em{font-style:italic;font-weight:500;color:var(--accent-d);}
  .np-mark{height:1.22em;width:auto;vertical-align:-.3em;}
  .muted{color:var(--muted);}

  /* ---------- nav ---------- */
  .nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
    background:rgba(240,244,247,.78);border-bottom:1px solid rgba(0,0,0,.05);}
  .nav .wrap{display:flex;align-items:center;gap:18px;height:66px;}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em;}
  .brand b{color:var(--steel);font-weight:700;}
  .brand .mk{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,var(--ink),var(--ink-deep));
    display:grid;place-items:center;box-shadow:var(--shadow-sm);}
  .brand .mk::after{content:"";width:12px;height:12px;border-radius:50%;border:2.4px solid var(--steel-l);}
  .brand .mk::before{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);}
  .brand .mk{position:relative;}
  .navlinks{margin-left:auto;display:flex;align-items:center;gap:26px;}
  .navlinks a{font-size:13.5px;font-weight:600;color:var(--ink-2);}
  .navlinks a:hover{color:var(--accent);}
  .navlinks a.btn-o{color:#fff;}
  .navlinks a.btn-o:hover{color:#fff;}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
    font-weight:800;font-size:14px;letter-spacing:.012em;border-radius:11px;padding:12px 20px;cursor:pointer;border:1px solid transparent;
    transition:transform .15s cubic-bezier(.2,.9,.3,1.4), box-shadow .22s ease, background .2s ease, filter .2s, border-color .2s;}
  .btn:active{transform:translateY(0) scale(.97);}
  .btn-o{background:#2D5C86;color:#fff;box-shadow:inset 0 0 0 1px #22506F,inset 0 1px 0 rgba(255,255,255,.13),0 1px 1px rgba(12,36,60,.22);}
  .btn-o:hover{background:#33688F;filter:none;box-shadow:inset 0 0 0 1px #22506F,inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(12,36,60,.24);}
  .btn-g{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:0 2px 8px rgba(16,40,63,.07);}
  .btn-g:hover{border-color:var(--steel);box-shadow:0 2px 8px rgba(16,40,63,.10);}
  .btn-g:hover{border-color:var(--steel);color:var(--ink-deep);}
  .btn-w{background:#fff;color:var(--ink-deep);}
  .btn-w:hover{transform:translateY(-1px);}
  .navlinks .btn{padding:9px 15px;}
  .menutoggle{display:none;}

  /* ---------- hero ---------- */
  .hero{padding:74px 0 30px;}
  .hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;}
  .hero h1{font-size:clamp(38px,5.4vw,66px);line-height:1.03;letter-spacing:-.02em;margin:20px 0 0;}
  .hero .sub{font-size:18px;color:var(--muted);max-width:46ch;margin:22px 0 30px;line-height:1.6;}
  .hero .cta{display:flex;gap:12px;flex-wrap:wrap;}
  .hero .fine{margin-top:18px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;}
  .hero .fine .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(247,114,35,.14);}

  /* floating room card (the product artifact) */
  .roomcard{background:var(--card);border-radius:22px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.04);overflow:hidden;}
  .rc-hero{background:linear-gradient(155deg,var(--ink),var(--ink-deep));padding:20px 20px 18px;color:#fff;}
  .rc-hero .heb{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9db8d4;display:flex;align-items:center;gap:7px;}
  .rc-hero .heb::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);}
  .rc-hero h3{color:#fff;font-size:21px;margin:9px 0 3px;letter-spacing:-.01em;}
  .rc-hero .loc{font-size:11px;color:#9db8d4;}
  .rc-stats{display:flex;gap:22px;margin-top:15px;}
  .rc-stats .k{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9db8d4;}
  .rc-stats .v{font-family:var(--serif);font-size:17px;font-weight:600;margin-top:4px;color:#fff;}
  .rc-body{padding:16px 18px 18px;}
  .rc-rowlabel{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
  .presence{display:flex;align-items:center;gap:-6px;}
  .presence .av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;
    border:2px solid #fff;margin-left:-7px;box-shadow:0 2px 6px rgba(0,0,0,.12);}
  .presence .av:first-child{margin-left:0;}
  .presence .more{margin-left:10px;font-size:11px;color:var(--muted);font-weight:600;}
  .msg{margin-top:15px;padding:13px 14px;background:var(--line-2);border-radius:6px;border:1px solid rgba(0,0,0,.03);}
  .msg .who{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
  .msg .role{font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;padding:2px 7px;border-radius:5px;}
  .msg .nm{font-size:12.5px;font-weight:700;}
  .msg .tx{font-size:13px;color:#37485a;line-height:1.5;}
  .msg .tx b{color:var(--ink);}
  .chasepill{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--accent-d);
    background:rgba(247,114,35,.1);padding:8px 13px;border-radius:100px;}

  /* ---------- section frame ---------- */
  .sec{padding:66px 0;}
  .sec-tint{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));border-top:1px solid rgba(0,0,0,.04);}
  .lead{font-size:clamp(26px,3.2vw,38px);max-width:20ch;margin:16px 0 0;line-height:1.12;}
  .sectop{max-width:640px;}
  .sectop p{color:var(--muted);font-size:17px;margin:16px 0 0;line-height:1.6;}

  /* ---------- signature: pipeline rail (interactive walkthrough) ---------- */
  .rail-wrap{margin-top:40px;background:var(--card);border:1px solid rgba(0,0,0,.05);border-radius:22px;padding:34px 30px 30px;box-shadow:var(--shadow-sm);}
  /* stage colors drive the active dot, fill, stem and blob accent */
  .rail-stage{position:relative;display:flow-root;--sc:var(--steel);}
  .stage[data-color="concept"]{--dc:var(--muted);}
  .stage[data-color="design"]{--dc:var(--steel);}
  .stage[data-color="budget"]{--dc:var(--teal);}
  .stage[data-color="bidding"]{--dc:var(--accent-d);}
  .stage[data-color="building"]{--dc:var(--accent);}
  .stage[data-color="built"]{--dc:var(--ink);}

  /* floating description card */
  .rail-blob{position:absolute;top:0;left:50%;width:min(340px,82%);background:var(--card);border:1px solid var(--line);border-top:3px solid var(--sc);border-radius:13px;box-shadow:var(--shadow-sm);padding:13px 16px 14px;min-height:146px;text-align:left;z-index:6;opacity:0;transform:translateX(-50%);transition:opacity .4s ease,left .55s cubic-bezier(.4,.9,.3,1),border-color .45s;pointer-events:none;}
  .rail-blob.show{opacity:1;}
  .rail-blob .rb-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--sc);padding:3px 10px;border-radius:99px;margin-bottom:9px;transition:background .45s;}
  .rail-blob .rb-title{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px;line-height:1.2;}
  .rail-blob .rb-desc{font-size:12.5px;line-height:1.5;color:var(--ink-2);}
  .rail-blob .rb-tail{position:absolute;bottom:-7px;left:50%;width:13px;height:13px;background:var(--card);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg);}
  /* stem from card down to the active dot */
  .rail-stem{position:absolute;width:2px;background:var(--sc);transform:translateX(-50%);z-index:1;border-radius:2px;opacity:0;transition:left .55s cubic-bezier(.4,.9,.3,1),top .55s cubic-bezier(.4,.9,.3,1),height .55s cubic-bezier(.4,.9,.3,1),background .45s,opacity .4s;}
  .rail-stem.show{opacity:.8;}

  .rail{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:180px 0 34px;}
  .rail-line{position:absolute;left:6%;right:6%;top:8px;height:2px;background:var(--line);transform:translateY(-50%);z-index:0;border-radius:2px;overflow:hidden;}
  .rail-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--sc);transition:width .55s cubic-bezier(.4,.9,.3,1),background .45s;border-radius:2px;}
  /* persistent hint: where Nextprojex operates */
  .rail-zone{position:absolute;left:6%;width:42%;top:8px;transform:translateY(-50%);height:8px;border-radius:99px;background:rgba(247,114,35,.11);z-index:0;pointer-events:none;}
  .rail-zone .rz-lbl{position:absolute;left:50%;top:15px;transform:translateX(-50%);font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);white-space:nowrap;opacity:.75;}

  .stage{position:relative;text-align:center;z-index:2;cursor:pointer;outline:none;padding-bottom:2px;}
  .stage .node{width:15px;height:15px;border-radius:50%;background:#fff;border:2.5px solid var(--steel-l);margin:0 auto;box-shadow:0 0 0 5px var(--paper);position:relative;z-index:2;transition:background .35s,border-color .35s,box-shadow .35s,transform .35s;}
  .stage.done .node{background:var(--steel);border-color:var(--steel);}
  .stage.active .node{border-color:var(--dc);background:var(--dc);transform:scale(1.32);box-shadow:0 0 0 5px var(--paper),0 0 0 10px color-mix(in srgb,var(--dc) 24%,transparent);}
  .stage:hover .node,.stage:focus-visible .node{border-color:var(--dc);}
  .stage:focus-visible{outline:2px solid var(--steel);outline-offset:6px;border-radius:8px;}
  .stage .lbl{margin-top:15px;font-size:12.5px;font-weight:700;color:var(--muted);transition:color .3s;}
  .stage.active .lbl,.stage.done .lbl{color:var(--ink);}
  .stage .sub{font-size:10.5px;color:var(--muted);margin-top:2px;transition:color .3s;}
  .stage.active .sub{color:var(--ink-2);}
  .st-more{display:none;}
  .rail-hint{text-align:center;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);opacity:.7;margin-top:4px;}
  .rail-hint .rh-m{display:none;}
  @media(prefers-reduced-motion:reduce){
    .rail-blob,.rail-fill,.rail-stem,.stage .node{transition:none;}
  }
  .rail-note{font-size:14.5px;color:var(--ink-2);max-width:60ch;line-height:1.55;margin-top:8px;}
  .rail-note b{color:var(--ink);font-weight:700;}

  /* ---------- three pillars ---------- */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
  .pill{background:var(--card);border:1px solid rgba(0,0,0,.05);border-radius:var(--rad);padding:26px 24px 24px;box-shadow:var(--shadow-sm);
    transition:transform .2s ease, box-shadow .2s ease;}
  .pill:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
  .pill .tag{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff;padding:4px 9px;border-radius:6px;display:inline-block;}
  .pill h3{font-size:21px;margin:16px 0 8px;}
  .pill p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0;}
  .pill .ico{width:38px;height:38px;border-radius:4px;display:grid;place-items:center;margin-bottom:2px;}
  .pill .ico svg{width:20px;height:20px;stroke-width:1.9;fill:none;}

  /* ---------- roles ---------- */
  .roles{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
  .role{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid rgba(0,0,0,.05);
    border-radius:6px;padding:13px 17px 13px 15px;box-shadow:var(--shadow-sm);flex:1 1 200px;min-width:200px;}
  .role .d{width:11px;height:11px;border-radius:50%;flex:none;}
  .role .rt{font-size:14px;font-weight:700;color:var(--ink);}
  .role .rs{font-size:12px;color:var(--muted);margin-top:1px;}
  .statuses{margin-top:22px;font-size:13.5px;color:var(--muted);}
  .statuses b{color:var(--ink-2);}
  .statuses .s{display:inline-block;font-weight:700;color:var(--steel-d);}

  /* ---------- supplier navy panel ---------- */
  .panel{background:linear-gradient(150deg,var(--ink),var(--ink-deep));border-radius:26px;color:#fff;
    padding:52px 46px;box-shadow:var(--shadow);overflow:hidden;position:relative;}
  .panel::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(74,144,194,.35),transparent 70%);}
  .panel .eyebrow{color:var(--steel-l);}
  .panel .eyebrow::before{background:var(--accent);}
  .panel h2{color:#fff;font-size:clamp(28px,3.4vw,40px);margin:16px 0 0;max-width:16ch;line-height:1.1;position:relative;}
  .panel h2 em{color:var(--accent);}
  .panel p{color:#c3d3e2;font-size:16px;max-width:52ch;margin:18px 0 0;line-height:1.62;position:relative;}
  .panel .split{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0 0;position:relative;}
  .panel .tier{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:18px 20px;}
  .panel .tier .th{font-family:var(--serif);font-size:18px;font-weight:600;}
  .panel .tier .tp{font-size:13px;color:#a9bece;margin-top:6px;line-height:1.5;}
  .panel .tier .price{font-family:var(--serif);font-size:15px;color:var(--accent);margin-top:10px;font-weight:600;}
  .panel .p-cta{margin-top:30px;position:relative;}

  /* ---------- wedge ---------- */
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
  .chip{background:var(--card);border:1px solid var(--line);border-radius:100px;padding:9px 15px;font-size:13px;font-weight:600;color:var(--ink-2);
    display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-sm);}
  .chip .cd{width:7px;height:7px;border-radius:50%;background:var(--accent);}
  .wedge-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}

  /* ---------- waitlist ---------- */
  .join{text-align:center;max-width:620px;margin:0 auto;}
  .join h2{font-size:clamp(30px,3.8vw,46px);margin:16px 0 0;}
  .join p{color:var(--muted);font-size:17px;margin:16px auto 0;max-width:44ch;line-height:1.6;}
  .form{display:flex;gap:10px;justify-content:center;margin:28px auto 0;max-width:440px;flex-wrap:wrap;}
  .form input{flex:1 1 240px;font-family:var(--sans);font-size:15px;padding:13px 16px;border-radius:10px;border:1.5px solid var(--line);
    background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);}
  .form input:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(74,144,194,.18);}
  .form .btn{flex:0 0 auto;}
  .joinfine{font-size:12.5px;color:var(--muted);margin-top:16px;}
  .confirm{display:none;margin:24px auto 0;max-width:440px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:5px;padding:16px 18px;text-align:left;box-shadow:var(--shadow-sm);}
  .confirm.show{display:block;}
  .confirm .ct{font-family:var(--serif);font-size:17px;font-weight:600;}
  .confirm .cp{font-size:13px;color:var(--muted);margin-top:4px;}

  /* ---------- footer ---------- */
  footer{background:linear-gradient(180deg,var(--ink),var(--ink-deep));color:#c3d3e2;margin-top:8px;padding:48px 0 40px;}
  footer .wrap{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;justify-content:space-between;}
  footer .brand{color:#fff;}
  footer .brand b{color:var(--steel-l);}
  footer .tag{font-size:13.5px;color:#9db8d4;margin-top:12px;max-width:30ch;line-height:1.5;}
  footer .fnav{display:flex;gap:30px;flex-wrap:wrap;}
  footer .fcol .h{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7f9cba;margin-bottom:12px;}
  footer .fcol a{display:block;font-size:13.5px;color:#c3d3e2;margin-bottom:8px;}
  footer .fcol a:hover{color:#fff;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11.5px;color:#7f9cba;letter-spacing:.03em;}
  .foot-bottom .pv{text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--accent);font-size:10px;}

  /* ---------- reveal + responsive ---------- */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

  @media(max-width:900px){
    .hero .grid{grid-template-columns:1fr;gap:40px;}
    .hero{padding:52px 0 20px;}
    .pillars{grid-template-columns:1fr;}
    .panel .split{grid-template-columns:1fr;}
    .wedge-grid{grid-template-columns:1fr;gap:28px;}
    .rail-blob,.rail-stem{display:none;}
    .rail{grid-template-columns:1fr;gap:9px;margin:22px 0 6px;}
    .rail-line,.rail-zone{display:none;}
    .stage{display:grid;grid-template-columns:22px 1fr;column-gap:14px;row-gap:2px;align-items:start;text-align:left;padding:14px 16px;margin:0;border-radius:12px;transition:background .3s;}
    .stage.active{background:var(--paper);}
    .stage .node{grid-column:1;grid-row:1;margin:3px 0 0;}
    .stage.active .node{transform:none;}
    .stage .lbl{grid-column:2;grid-row:1;margin-top:0;font-size:15px;font-weight:700;}
    .stage .sub{grid-column:2;grid-row:2;margin-top:1px;font-size:13px;line-height:1.4;color:var(--muted);}
    .st-more{grid-column:2;grid-row:3;margin-top:10px;padding-left:12px;border-left:3px solid var(--dc);}
    .stage.active .st-more{display:block;}
    .st-more .st-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--dc);padding:3px 9px;border-radius:99px;margin-bottom:7px;}
    .st-more p{font-size:13px;line-height:1.5;color:var(--ink-2);margin:0;}
    .rail>.stage:first-of-type::before{content:"The pipeline, start to finish";grid-column:1/-1;text-align:center;color:var(--muted);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;}
    .rail-hint{margin-top:8px;}
    .rail-hint .rh-d{display:none;}
    .rail-hint .rh-m{display:inline;}
    .navlinks a:not(.btn):not(.loginlink){display:none;}
    .panel{padding:38px 26px;}
  }
  @media(max-width:560px){
    .wrap{padding:0 18px;}
    .hero h1{font-size:34px;}
    .roles .role{min-width:100%;}
  }

  /* ============ multi-page additions ============ */
  .navlinks a.active{color:var(--accent);}
  .navlinks a.active::after{content:"";display:block;height:2px;background:var(--accent);border-radius:2px;margin-top:3px;}

  /* compact sub-page header */
  .subhero{padding:64px 0 20px;}
  .subhero .eyebrow{margin-bottom:18px;}
  .subhero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.05;letter-spacing:-.02em;max-width:16ch;}
  .subhero h1 em{color:var(--accent-d);}
  .subhero .sub{font-size:18px;color:var(--muted);max-width:52ch;margin:22px 0 0;line-height:1.6;}

  /* alternating feature rows */
  .feature{padding:44px 0;border-top:1px solid rgba(0,0,0,.05);}
  .feature:first-of-type{border-top:none;}
  .feature .row{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
  .feature .row.rev .fv{order:2;}
  .feature .row.rev .ft{order:1;}
  .feature .step{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
  .feature .step .n{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1;color:var(--steel-l);}
  .feature .step .tag{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:4px 10px;border-radius:6px;}
  .feature h2{font-size:clamp(24px,2.8vw,32px);margin:14px 0 0;letter-spacing:-.01em;}
  .feature h2 em{color:var(--accent-d);}
  .feature .ft p{font-size:16px;color:var(--muted);line-height:1.65;margin:14px 0 0;}
  .feature .ft ul{margin:18px 0 0;padding:0;list-style:none;}
  .feature .ft li{position:relative;padding:7px 0 7px 22px;font-size:15px;color:var(--ink-2);border-top:1px solid var(--line-2);}
  .feature .ft li:first-child{border-top:none;}
  .feature .ft li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;border-radius:2px;background:var(--accent);}
  .fv{background:var(--card);border:1px solid rgba(0,0,0,.05);border-radius:22px;padding:26px;box-shadow:var(--shadow-sm);}
  .fv.plain{background:transparent;border:none;box-shadow:none;padding:0;}

  /* partner tiers (for suppliers) */
  .plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px;}
  .plan{background:var(--card);border:1px solid rgba(0,0,0,.06);border-radius:9px;padding:30px 28px;box-shadow:var(--shadow-sm);position:relative;}
  .plan.feat{border:1.5px solid var(--accent);box-shadow:var(--shadow);}
  .plan .badge{position:absolute;top:-11px;left:28px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:100px;}
  .plan .who{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-d);}
  .plan h3{font-family:var(--serif);font-size:26px;font-weight:600;margin:12px 0 4px;}
  .plan .price{font-size:15px;color:var(--muted);margin-bottom:16px;}
  .plan .price b{font-family:var(--serif);color:var(--ink);font-weight:600;}
  .plan ul{list-style:none;margin:16px 0 0;padding:0;}
  .plan li{position:relative;padding:9px 0 9px 24px;font-size:14.5px;color:var(--ink-2);border-top:1px solid var(--line-2);}
  .plan li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;border-radius:50%;background:var(--steel-l);}
  .plan.feat li::before{background:var(--accent);}
  .plan .plan-cta{margin-top:22px;}

  /* Q&A block */
  .qa{margin-top:34px;border-top:1px solid var(--line);}
  .qa .item{border-bottom:1px solid var(--line);padding:22px 0;}
  .qa .q{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);}
  .qa .a{font-size:15px;color:var(--muted);line-height:1.6;margin-top:8px;max-width:70ch;}

  /* centered cta band */
  .ctaband{padding:64px 0;text-align:center;}
  .ctaband h2{font-size:clamp(28px,3.6vw,44px);max-width:20ch;margin:14px auto 0;}
  .ctaband h2 em{color:var(--accent-d);}
  .ctaband p{color:var(--muted);font-size:17px;max-width:46ch;margin:16px auto 0;line-height:1.6;}
  .ctaband .cta{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap;}

  @media(max-width:900px){
    .feature .row{grid-template-columns:1fr;gap:26px;}
    .feature .row.rev .fv{order:0;}
    .feature .row.rev .ft{order:0;}
    .plans{grid-template-columns:1fr;}
  }

  /* ============ signup / auth ============ */
  .authpage{min-height:calc(100vh - 66px);display:flex;align-items:center;justify-content:center;padding:48px 20px;
    background:radial-gradient(900px 500px at 50% -10%, #e7eff5, transparent);}
  .authcard{width:100%;max-width:432px;background:var(--card);border:1px solid rgba(0,0,0,.06);border-radius:22px;
    box-shadow:var(--shadow);padding:40px 36px 30px;}
  .authcard .eyebrow{justify-content:center;margin-bottom:16px;}
  .authcard h1{font-size:28px;text-align:center;letter-spacing:-.01em;}
  .authcard .sub{text-align:center;color:var(--muted);font-size:14.5px;line-height:1.55;margin:12px 0 26px;}
  .magicform{display:flex;flex-direction:column;gap:10px;}
  .magicform label{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--ink-2);}
  .magicform input{font-family:var(--sans);font-size:15px;padding:13px 15px;border-radius:10px;border:1.5px solid var(--line);
    background:#fff;color:var(--ink);width:100%;}
  .magicform input:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(74,144,194,.18);}
  .authbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:800;letter-spacing:.012em;font-size:14.5px;padding:13px 18px;border-radius:11px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:transform .15s cubic-bezier(.2,.9,.3,1.4),box-shadow .22s,filter .2s,border-color .2s;box-shadow:0 2px 8px rgba(16,40,63,.07)}
.authbtn:hover{border-color:var(--steel);box-shadow:0 2px 8px rgba(16,40,63,.10)}
.authbtn:active{transform:scale(.97)}
  .authbtn:hover{box-shadow:var(--shadow-sm);}
  .authbtn .ic{width:19px;height:19px;flex:none;display:inline-flex;align-items:center;justify-content:center;}
  .authbtn.magic{background:#2D5C86;color:#fff;border:none;box-shadow:inset 0 0 0 1px #22506F,inset 0 1px 0 rgba(255,255,255,.13),0 1px 1px rgba(12,36,60,.22)}
.authbtn.magic:hover{background:#33688F;filter:none;border:none;box-shadow:inset 0 0 0 1px #22506F,inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(12,36,60,.24)}
  .authbtn.magic:hover{box-shadow:inset 0 0 0 1px #22506F,inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(12,36,60,.24);}
  .authbtn.ms:hover{border-color:var(--steel);}
  .authbtn.google:hover{border-color:var(--steel);}
  .authnote{font-size:11.5px;color:var(--muted);text-align:center;margin-top:9px;line-height:1.5;}
  .authdivider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;margin:22px 0;}
  .authdivider::before,.authdivider::after{content:"";flex:1;height:1px;background:var(--line);}
  .authstack{display:flex;flex-direction:column;gap:11px;}
  .authconfirm{display:none;text-align:center;padding:8px 0;}
  .authconfirm.show{display:block;}
  .authconfirm .ct{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:6px;}
  .authconfirm .cp{font-size:14px;color:var(--muted);line-height:1.55;}
  .authfoot{text-align:center;font-size:12px;color:var(--muted);margin-top:24px;line-height:1.6;}
  .authfoot a{color:var(--steel-d);font-weight:600;}
  .authtop{display:flex;justify-content:center;padding:26px 0 0;}
  .authtop .brand{font-size:24px;}

  /* nav log-in link */
  .navlinks .loginlink{font-size:14px;font-weight:700;color:var(--ink-2);text-decoration:none;padding:9px 4px;}
  .navlinks .loginlink:hover{color:var(--accent);}
  @media(max-width:720px){ .navlinks{gap:14px;} .navlinks .loginlink{display:inline-block;font-weight:700;} }

  /* brand logo images */
  .brand .brandimg{height:30px;width:auto;display:block;}
  .authtop .brandimg{height:36px;}
  @media(max-width:600px){ .brand .brandimg{height:26px;} }

  /* ---------- centered content sections ---------- */
  .sectop{text-align:center;margin-left:auto;margin-right:auto;}
  .sectop .eyebrow{justify-content:center;}
  .sectop p{margin-left:auto;margin-right:auto;}
  .rail-note{margin:0 auto;text-align:center;}
  .statuses{text-align:center;margin-left:auto;margin-right:auto;}
  .panel{text-align:center;}
  .panel .eyebrow{justify-content:center;}
  .panel p{margin-left:auto;margin-right:auto;}
  .subhero{text-align:center;}
  .subhero .eyebrow{justify-content:center;}
  .subhero h1{margin-left:auto;margin-right:auto;}
  .subhero .sub{margin-left:auto;margin-right:auto;}
  .sectop .lead{margin-left:auto;margin-right:auto;}
  .panel h2{margin-left:auto;margin-right:auto;}

  /* centered pillars + balanced heading wraps */
  .pillars .pill{text-align:center;}
  .pillars .pill .ico{margin-left:auto;margin-right:auto;}
  .pillars .pill .ptag{margin-left:auto;margin-right:auto;}
  .sectop .lead,.subhero h1,.ctaband h2,.join h2{text-wrap:balance;}

  /* drafting-set fingerprints */
  /* --mono pointed at IBM Plex Mono, which is banned, and the rules allow no
     monospace in visible UI at all. Kept as a token so nothing referencing it
     breaks, but it now resolves to the locked UI face. */
  :root{--mono:'Supreme',system-ui,-apple-system,'Segoe UI',sans-serif;}
  body{background-image:
    repeating-linear-gradient(0deg, rgba(26,58,92,.028) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(26,58,92,.028) 0 1px, transparent 1px 28px);}
  .eyebrow{font-family:var(--sans);font-weight:800;letter-spacing:.16em;}
  .rc-rowlabel{font-family:var(--mono);}
  .sheetstrip{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B7D0E4;border:1px solid rgba(240,244,247,.22);border-radius:3px;padding:8px 14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:26px 0 4px;}

  /* ---- dark drafting-sheet hero ---- */
  .hero{background:var(--ink-deep, #10283f);background-image:
    repeating-linear-gradient(0deg, rgba(240,244,247,.055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(240,244,247,.055) 0 1px, transparent 1px 34px);
    padding:86px 0 64px;position:relative;overflow:hidden;}
  .hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(to bottom, transparent, rgba(16,40,63,.55));pointer-events:none;z-index:0;}
  /* the bottom fade is a section-edge treatment, not a content overlay. Without
     these two lines it painted over the hero fine print (10.26:1 -> 6.65:1) and
     muddied any accent text in the bottom 120px. */
  .hero > .wrap{position:relative;z-index:1;}
  .hero h1{color:#fff;font-size:clamp(42px,6vw,78px);}
  .hero h1 em{color:var(--accent);}
  .hero .eyebrow{color:#84B4D9;}
  .hero .eyebrow::before{background:var(--accent);}
  .hero .sub{color:#E3EDF6;}
  .hero .fine{color:#C3D8EA;}
  .hero .btn-g{background:transparent;color:#fff;border:1px solid rgba(240,244,247,.35);}
  .hero .btn-g:hover{border-color:#fff;background:rgba(255,255,255,.06);}
  .hero .dimline{font-family:var(--sans);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#9FC5E0;display:flex;align-items:center;gap:10px;margin-bottom:26px;}
  .hero .dimline::before,.hero .dimline::after{content:"";flex:1;height:1px;background:rgba(240,244,247,.22);}
  .hero .dimline span{white-space:nowrap;}
  .hero .panel, .hero .rail-wrap{box-shadow:0 30px 70px rgba(0,0,0,.4);}
  /* nav sits flush on the dark sheet */
  .nav{border-bottom-color:transparent;}
  /* section headings scale up sitewide — editorial, not template */
  .sectop .lead{font-size:clamp(30px,4.4vw,52px);}

  /* v29: overflow guards + mobile centering */
  html,body{overflow-x:hidden;}
  .hero .grid > *{min-width:0;}
  .hero .panel{max-width:100%;}
  .msg,.panel{overflow-wrap:break-word;}
  @media(max-width:700px){
    .hero .grid > div:first-child, .subhero, .sectop{text-align:center;}
    .hero .cta, .hero .fine, .hero .dimline{justify-content:center;}
    .eyebrow{justify-content:center;}
    footer .wrap{text-align:center;}
    footer .brand{justify-content:center;}
    .fnav{justify-content:center;text-align:center;}
    .foot-bottom{flex-direction:column;gap:8px;align-items:center;text-align:center;}
    .sheetstrip{justify-content:center;}
  }

  /* v30: footer restored + full mobile centering + auth polish */
  footer{background:linear-gradient(180deg,var(--ink),var(--ink-deep));}
  .authbtn{white-space:nowrap;}
  @media(max-width:700px){
    .wrap{text-align:center;}
    h1,h2,h3,p,.lead,.sub,.fine{text-align:center;}
    .ft,.fv{text-align:center;}
    .ft ul{list-style:none;padding-left:0;}
    .ft ul li{padding-left:0;}
    .step,.cta,.chips,.dimline,.eyebrow,.rail-note{justify-content:center;}
    .role{justify-content:center;}
    .rail > div{justify-content:center;flex-wrap:wrap;text-align:center;gap:6px 10px;}
    .rc-stats{justify-content:center;}
    .pillars,.plans,.principles{text-align:center;}
    .foot-bottom,.sheetstrip{justify-content:center;text-align:center;}
    .authcard{text-align:center;}
    .magicform label{text-align:center;display:block;}
  }

  /* v31: mobile footer = one centered stack */
  @media(max-width:700px){
    footer .wrap{display:block;}
    footer .wrap > div{margin:0 auto;}
    .fnav{flex-direction:column;gap:30px;align-items:center;margin-top:30px;}
    .fcol{width:100%;text-align:center;}
    .fcol .h{text-align:center;}
    .fcol a{display:block;text-align:center;}
    footer .tag{margin-left:auto;margin-right:auto;max-width:320px;}
  }

/* ---- v47 polish: site-wide motion ---- */
.hero h1,.hero p,.hero .cta,.subhero h1,.subhero p{animation:rise .55s cubic-bezier(.2,.8,.3,1) both}
.hero p,.subhero p{animation-delay:.08s}.hero .cta{animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card,.tile,.pcard-m,.feature,.plan{transition:transform .2s,box-shadow .25s}
.card:hover,.tile:hover,.feature:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(16,40,63,.22)}
@media (prefers-reduced-motion:reduce){.hero h1,.hero p,.hero .cta,.subhero h1,.subhero p{animation:none}.btn,.card,.tile,.feature{transition:none}}

@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.shake{animation:shake .5s}

/* ===== landing restyle: hero proof + trust band ===== */
.hero-proof{display:flex;align-items:center;gap:14px;margin:4px 0 26px;flex-wrap:wrap}
.hero-proof .hp{font-size:14px;color:#CFE0EE;font-weight:600}
.hero-proof .hp b{color:#fff;font-weight:800;font-size:16px}
.hero-proof .hp-sep{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.btn-lg{font-size:16px;padding:15px 30px}
.trustband{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.tb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tb-item{padding:0 2px}
.tb-ic{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(247,114,35,.14),rgba(247,114,35,.06));color:var(--accent);display:grid;place-items:center;font-size:15px;font-weight:800;margin-bottom:12px}
.tb-t{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink-deep);line-height:1.25;letter-spacing:-.01em;margin-bottom:6px}
.tb-d{font-size:13px;color:var(--muted);line-height:1.5}
@media(max-width:820px){
  .tb-grid{grid-template-columns:1fr 1fr;gap:22px 20px}
}
@media(max-width:520px){
  .tb-grid{grid-template-columns:1fr;gap:16px}
  .tb-item{display:grid;grid-template-columns:34px 1fr;column-gap:12px}
  .tb-ic{grid-row:span 2;margin-bottom:0}
  .hero-proof{gap:10px}
}

  /* ---- Try the demo ---------------------------------------------------------
     The demo is the only thing on this site a stranger can actually DO, and it
     used to live as a text link inside one page. It gets its own nav affordance
     everywhere.

     Outlined, not filled. The filled button in this bar is Sign up free, and two
     filled buttons is two primaries — nobody knows where to look. The orange pip
     is the only orange in the nav, which is what does the attention-grabbing. */
  .navlinks a.trylink{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
    font-weight:800;color:var(--ink);background:var(--card);border:1.5px solid var(--line);
    border-radius:99px;padding:8px 15px;min-height:38px;white-space:nowrap;
    box-shadow:0 2px 8px rgba(16,40,63,.07);transition:border-color .18s,box-shadow .18s,transform .18s;}
  .navlinks a.trylink::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
    background:var(--accent);box-shadow:0 0 0 3px rgba(247,114,35,.18);}
  .navlinks a.trylink:hover{color:var(--ink-deep);border-color:var(--accent);transform:translateY(-1px);
    box-shadow:0 10px 20px -8px rgba(247,114,35,.42);}

  /* The 900px rule hides every non-button nav link. This one survives it, because
     a tablet runs the demo perfectly well. Below 560px it goes — demo.html gates
     phones on purpose, and an invitation that ends in "get a bigger screen" is
     worse than no invitation.

     The selector has to out-specify `.navlinks a:not(.btn):not(.loginlink)`,
     which is 0-3-1. A plain `.navlinks a.trylink` is 0-2-1 and loses no matter
     where it sits in the file. */
  @media(max-width:900px){
    .navlinks a.trylink:not(.btn):not(.loginlink){display:inline-flex;}
  }
  @media(max-width:560px){
    .navlinks a.trylink:not(.btn):not(.loginlink){display:none;}
  }