/* ===================================================================================================
   Blueprint figures — shared by the home page (Fig. 01) and the pricing page (the roadmap + tiers).

   EXTRACTED VERBATIM from onefirmos-blueprint_19.html rather than retyped. These figures are dense,
   interactive and already correct; re-implementing them from a reading would have quietly changed
   behaviour in ways no test here would catch. The only edits are the ones noted inline: the palette is
   read from CSS custom properties so a rebrand in super-admin reaches the figures too.

   Loaded AFTER landing-blueprint.css / .js, which own the page shell.
   =================================================================================================== */


/* ── tier pills ─────────────────────────────────────────────────────── */
.pills{display:flex;gap:0;border:1px solid var(--ink);flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;align-self:start}
.pills::-webkit-scrollbar{display:none}
.pills button{padding:11px 18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-right:1px solid var(--line);color:var(--mute);transition:.18s;white-space:nowrap}
.pills button:last-child{border-right:0}
.pills button.on{background:var(--ink);color:var(--paper)}
.pills button:not(.on):hover{background:rgba(24,32,43,.05);color:var(--ink)}
.pills button em{font-style:normal;opacity:.55;margin-left:8px}
@media(max-width:560px){
.pills button em{display:none}
}



/* ── panels, tables, cards ──────────────────────────────────────────── */
.cell .n{font-size:10.5px;letter-spacing:.2em;color:var(--faint);
  display:flex;justify-content:space-between;margin-top:16px;border-top:1px solid var(--line2);padding-top:10px}
.readout{border:1px solid var(--line);background:var(--panel);padding:22px 24px;min-height:210px}
.readout .lbl{margin-bottom:14px}
.readout h3{margin-bottom:10px}
.readout p{margin:0 0 12px;color:var(--mute);font-size:14.5px;line-height:1.62}
.readout ul{margin:0;padding-left:0;list-style:none}
.readout li{position:relative;padding-left:20px;margin-bottom:11px;color:var(--mute);
  font-size:13.5px;line-height:1.6}
.readout li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--em)}
.readout li b{color:var(--ink);font-weight:600}
.locked{opacity:.5}
.lockmsg{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);
  border:1px dashed var(--violet);padding:8px 12px;display:inline-block;margin-top:6px}


/* ── the roadmap, threaded through the copy ─────────────────────────── */
.spine{margin-top:34px}

/* the sticky liquid is a full viewport tall, so without a clip it keeps
   painting past the end of this section. clip-path crops it vertically
   without breaking sticky the way overflow would, and the generous
   horizontal inset leaves the glass shadows alone. */
.stops{position:relative;clip-path:inset(-40px -100vw)}

/* the liquid sits behind the node gutter and stays put while the glass
   travels over it — sticky, with a negative margin so it costs no flow space */
.railfield{position:sticky;top:66px;height:calc(100vh - 66px);width:318px;
  margin-bottom:calc(-1 * (100vh - 66px));z-index:0;pointer-events:none;overflow:hidden}
.railfield .blobs{position:absolute;inset:-30%;filter:blur(38px);opacity:.92}
.blob{position:absolute;border-radius:50%;mix-blend-mode:multiply}
.blob.b1{width:88%;padding-bottom:88%;left:-20%;top:-6%;
  background:radial-gradient(circle at 34% 34%,rgba(169,139,255,.36),rgba(169,139,255,0) 66%);
  animation:drift1 26s ease-in-out infinite alternate}
.blob.b2{width:98%;padding-bottom:98%;right:-28%;top:28%;
  background:radial-gradient(circle at 60% 40%,rgba(52,211,153,.34),rgba(52,211,153,0) 66%);
  animation:drift2 33s ease-in-out infinite alternate}
.blob.b3{width:90%;padding-bottom:90%;left:-10%;bottom:-12%;
  background:radial-gradient(circle at 44% 56%,rgba(91,138,166,.32),rgba(91,138,166,0) 66%);
  animation:drift3 41s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){
.blob{animation:none}
}
#roadlinks{position:absolute;left:0;top:0;z-index:0;pointer-events:none}


/* each stop carries its own piece of the roadmap in its own left gutter */
.stop{display:grid;grid-template-columns:318px minmax(0,1fr);gap:54px;align-items:center;
  min-height:58vh;padding:44px 0;scroll-margin-top:82px}
.stopmap{display:flex;flex-direction:column;align-items:center;gap:15px;position:relative;
  z-index:1}
.rowset{display:flex;gap:9px;justify-content:center}
.gbox{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;text-align:center;border-radius:17px;padding:10px 12px;
  width:190px;min-height:84px;
  background:linear-gradient(152deg,rgba(255,255,255,.66),rgba(255,255,255,.26));
  -webkit-backdrop-filter:blur(13px) saturate(1.7);backdrop-filter:blur(13px) saturate(1.7);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 10px 26px rgba(24,32,43,.09), inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(24,32,43,.05);
  color:var(--ink);font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,background .5s,opacity .5s;
  cursor:pointer;overflow:hidden}
.gbox::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 38%)}
.gbox u{text-decoration:none;font-size:8px;letter-spacing:.16em;color:var(--mute);
  opacity:0;transition:opacity .4s;text-transform:uppercase}
.gbox.trio{width:99px;min-height:66px;font-size:10.5px;border-radius:13px;padding:6px 4px}
.gbox.node{width:162px;min-height:56px;font-size:11.5px;font-weight:600;border-radius:13px;
  background:linear-gradient(152deg,rgba(255,255,255,.5),rgba(255,255,255,.18));
  box-shadow:0 6px 16px rgba(24,32,43,.06), inset 0 1px 0 rgba(255,255,255,.85);
  cursor:default}
.gbox .chips{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.gbox .chips span{font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.55);
  border:1px solid rgba(24,32,43,.09);color:var(--mute);font-weight:600}
.gbox.on .chips span{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.32);
  color:rgba(255,255,255,.92)}
.gbox.ahead{opacity:.5;box-shadow:0 4px 12px rgba(24,32,43,.05),
  inset 0 1px 0 rgba(255,255,255,.7)}
.gbox.on{transform:scale(1.05);color:#fff;
  box-shadow:0 20px 44px rgba(24,32,43,.2), inset 0 1px 0 rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.5)}
.gbox.on u{opacity:.85;color:rgba(255,255,255,.9)}
.gbox:focus-visible{outline:2px solid var(--em);outline-offset:3px}
.stopbody{position:relative;z-index:1}
.stop .eye{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);margin:0 0 16px;flex-wrap:wrap}
.stop .eye i{width:9px;height:9px;display:block;flex:none}
.stop .eye u{text-decoration:none;color:var(--faint);letter-spacing:.2em}
.stop h3{font-size:clamp(24px,3vw,38px);margin:0 0 14px}
.stop .promise{color:var(--ink);font-size:17px;line-height:1.55;margin:0 0 20px;max-width:56ch}
.stop ul{margin:0 0 26px;padding:0;list-style:none;max-width:60ch}
.stop li{position:relative;padding-left:22px;margin-bottom:12px;color:var(--mute);
  font-size:14.5px;line-height:1.62}
.stop li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--em)}
.stop li b{color:var(--ink);font-weight:600}
.io{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid rgba(255,255,255,.7);border-radius:15px;overflow:hidden;
  background:linear-gradient(152deg,rgba(255,255,255,.6),rgba(255,255,255,.24));
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 8px 24px rgba(24,32,43,.07)}
.io>div{padding:16px 18px;min-width:0}
.io>div+div{border-left:1px solid rgba(24,32,43,.08)}
.io h4{margin:0 0 12px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute);font-weight:600;display:flex;align-items:center;gap:8px}
.io h4 s{text-decoration:none;font-size:13px;line-height:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;
  border:1px solid rgba(24,32,43,.12);border-radius:999px;color:var(--mute);
  background:rgba(255,255,255,.55);white-space:nowrap;cursor:pointer;transition:.2s}
.tag:hover{background:#fff;color:var(--ink)}
/* was three emerald literals; on the accent now so it follows a rebrand */
.tag.w{border-color:color-mix(in srgb,var(--em) 40%,transparent);color:color-mix(in srgb,var(--em) 78%,#000);background:color-mix(in srgb,var(--em) 9%,transparent)}
.tag.r{border-color:rgba(91,138,166,.36);color:#3E6B84;background:rgba(91,138,166,.09)}
@media(max-width:700px){
.io{grid-template-columns:1fr}
.io>div+div{border-left:0;border-top:1px solid rgba(24,32,43,.08)}
}


/* ── the roadmap on smaller screens ─────────────────────────────────
   It stays on the left at every width — the gutter narrows and the boxes
   get more compact, but the diagram never jumps above the prose. The
   connectors are drawn from measured positions, so they follow. */
@media(max-width:1000px){
.stop{grid-template-columns:196px minmax(0,1fr);gap:26px;min-height:0;padding:34px 0}
.railfield{width:196px}
.gbox{width:100%;min-height:68px;font-size:12px;padding:8px 9px;border-radius:14px}
.gbox.node{width:100%;min-height:48px;font-size:10.5px}
.rowset{flex-direction:column;gap:8px;width:100%}
.gbox.trio{width:100%;min-height:52px;font-size:10.5px}
.gbox .chips{gap:3px}
.gbox .chips span{font-size:7px;padding:2px 5px}
}
@media(max-width:700px){
.stop{grid-template-columns:104px minmax(0,1fr);gap:16px;padding:30px 0}
.railfield{width:104px}
.stopmap{gap:11px}
.gbox{min-height:58px;font-size:10px;line-height:1.15;padding:7px 5px;border-radius:12px;
    letter-spacing:0}
.gbox u{font-size:6.5px;letter-spacing:.1em}
.gbox.node{min-height:42px;font-size:9px}
.gbox.trio{min-height:44px;font-size:9px}
.gbox .chips{display:none}
.stop h3{font-size:26px}
.stop .promise{font-size:15px}
.stop ul{margin-bottom:20px}
.stop li{font-size:13.5px;padding-left:18px}
.stop .eye{font-size:10px;letter-spacing:.16em;gap:8px}
}
@media(max-width:430px){
/* the header is the tightest row on the page — the brand tag and the
     button's tracking are what push it past a 360px screen */
.nav{gap:10px}
}
@media(max-width:420px){
.stop{grid-template-columns:88px minmax(0,1fr);gap:13px}
.railfield{width:88px}
.gbox{font-size:9px;min-height:54px;padding:6px 4px}
.gbox.trio{font-size:8.5px;min-height:40px}
.gbox.node{font-size:8.5px;min-height:38px}
.stop h3{font-size:23px}
}



/* ── data tables ────────────────────────────────────────────────────── */
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{text-align:left;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap}
.dtable td{padding:12px 14px;border-bottom:1px solid var(--line2);color:var(--mute);
  white-space:nowrap}
.dtable td.k{color:var(--ink);font-weight:600}
.dtable td.num{text-align:right;font-variant-numeric:tabular-nums}
.dtable tr:last-child td{border-bottom:0}
.dtable tbody tr:hover td{background:rgba(24,32,43,.022)}
.scrollx{overflow-x:auto}
.bar{position:relative;height:7px;background:rgba(24,32,43,.07);min-width:88px;display:block}
.bar u{position:absolute;inset:0 auto 0 0;text-decoration:none;display:block}
.samplenote{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  border-left:2px solid var(--violet);padding-left:12px;margin:0 0 22px}



/* ── tier cards ─────────────────────────────────────────────────────── */
/* Two plans, so two columns. They stay side by side down to phone width — a pricing table
   that stacks is a table nobody compares. */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border:1px solid var(--line);border-right:0}
.tiers>article{min-width:0;border-right:1px solid var(--line);display:flex;
  flex-direction:column;background:var(--panel);transition:background .2s}
.tiers>article:hover{background:#fff}
.tiers>article.on{background:#fff;box-shadow:inset 0 3px 0 0 var(--em)}
@media(max-width:600px){
.tiers{grid-template-columns:1fr}
}
.thead{padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.thead .nm{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.thead h3{font-size:19px;letter-spacing:-.01em}
/* The popular flag. Carried by the tier data, so it moves with the plan. */
.thead .pop{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--em);border-radius:999px;padding:4px 9px;white-space:nowrap;
  line-height:1;align-self:center}
.pop.sm{font-size:8.5px;letter-spacing:.12em;padding:3px 7px;vertical-align:middle}
/* The popular card carries a quiet top rule so it reads as chosen even before anything is
   hovered — without shouting over the plan next to it. */
.tiers>article:has(.pop){box-shadow:inset 0 3px 0 0 var(--em)}
.thead .pr{display:flex;align-items:baseline;gap:7px;margin-top:10px}
.thead .pr b{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.thead .pr span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.twho{padding:14px 20px;font-size:12.5px;color:var(--mute);line-height:1.55;
  border-bottom:1px solid var(--line2);min-height:74px}
.tmap{padding:4px 8px 0}
.tcount{display:flex;gap:0;border-top:1px solid var(--line2);margin:8px 14px 0}
.tcount>div{flex:1;padding:12px 6px}
.tcount>div+div{border-left:1px solid var(--line2)}
.tcount b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.tcount span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-top:3px;line-height:1.4}
.tadds{padding:14px 20px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--mute);
  flex:1}
.tadds u{text-decoration:none;display:block;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.tadds em{font-style:normal;color:var(--ink);font-weight:600}
.tcta{padding:0 20px 20px}
.tcta button{width:100%;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 10px;border:1px solid var(--ink);transition:.18s}
.tcta button:hover{background:var(--ink);color:var(--paper)}



/* ── tier matrix ────────────────────────────────────────────────────── */
.tmatrix{width:100%;border-collapse:collapse;font-size:13px}
.tmatrix th{text-align:center;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:600;padding:14px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap}
.tmatrix th:first-child{text-align:left;width:34%}
.tmatrix td{padding:13px 10px;border-bottom:1px solid var(--line2);text-align:center;
  color:var(--mute)}
.tmatrix td:first-child{text-align:left;color:var(--ink);font-weight:600}
.tmatrix td:first-child s{text-decoration:none;display:block;font-weight:400;font-size:11.5px;
  color:var(--faint);margin-top:3px}
.tmatrix tr:last-child td{border-bottom:0}
.tmatrix .yes{color:var(--em);font-weight:700}
.tmatrix .new{display:inline-block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--em);color:var(--em);padding:3px 7px;font-weight:600}
.tmatrix .no{color:var(--faint)}
.tmatrix tfoot td{border-top:1px solid var(--line);border-bottom:0;padding-top:14px;
  font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}

/* ── phones ─────────────────────────────────────────────────────────── */
@media(max-width:820px){
.cta .btn{flex:1 1 auto;text-align:center}
/* Wide figures scale down to the column instead of scrolling sideways.
   This used to be `.figscroll>svg{min-width:660px}` — pinning each figure at 660px inside a ~300px
   column, so every diagram had its own sideways scroll. The bet was "scroll the figure, not the page,
   and it stays legible", but the arithmetic never supported it: these viewBoxes are 1180–1240 units
   wide, so at 660px the labels already rendered at 4.3–4.7px. Nobody could read them scrolled either.
   Since the scroll bought no legibility, it was pure cost — an odd sideways drag on a third of the
   page. The figures now fit the column and read as diagrams rather than as something half off-screen.
   The viewBox does the scaling, so no figure needs editing.
   `.swipe` is the "swipe to see the rest" hint; with nothing to swipe it would be a lie, so it goes.
   Data tables (.scrollx) still scroll — text in a table cannot scale without becoming unreadable. */
.figscroll{overflow-x:hidden}
.figscroll>svg{min-width:0;width:100%;height:auto;display:block}
.swipe{display:none}
.readout{padding:18px 20px;min-height:0}
.inputs,.out{padding:20px}
.bignum b{font-size:40px}
.findex a{padding:12px 14px}
.findex a span{display:none}
.thead h3{font-size:17px}
.thead .pr b{font-size:30px}
.twho{min-height:0}
.tmatrix th,.tmatrix td{padding:11px 8px;font-size:12px}
}
@media(max-width:560px){
.stop .promise{font-size:15.5px}
.stop li{font-size:13.5px}
.gbox{font-size:12.5px;min-height:66px}
.gbox.trio{font-size:9.5px;min-height:56px;padding:5px 3px}
}

/* a tap on a phone fires enter then leave, so pointer-only affordances get a
   visible pressed state instead of nothing */
@media(hover:none){
.tag:active,.gk:active,.pills button:active{background:#fff;color:var(--ink)}
.gbox:active{transform:scale(.985)}
}



/* ── calculator ─────────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:0;
  border:1px solid var(--line)}
.calc>div{min-width:0}
.calc>div+div{border-left:1px solid var(--line)}
@media(max-width:980px){
.calc{grid-template-columns:1fr}
.calc>div+div{border-left:0;border-top:1px solid var(--line)}
}
.inputs{padding:24px 26px}
.fld{margin-bottom:22px}
.fld:last-child{margin-bottom:0}
.fld label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
  font-weight:600;margin-bottom:9px}
.fld label b{font-size:17px;letter-spacing:-.01em;color:var(--ink);font-weight:700;
  font-variant-numeric:tabular-nums}
.fld input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;
  background:rgba(24,32,43,.14);outline:none;margin:0}
.fld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  background:var(--ink);cursor:pointer;border:0}
.fld input[type=range]::-moz-range-thumb{width:15px;height:15px;background:var(--ink);
  cursor:pointer;border:0;border-radius:0}
.fld input[type=range]:focus-visible{outline:2px solid var(--em);outline-offset:4px}
.fld .hint{font-size:11.5px;color:var(--faint);margin:8px 0 0;line-height:1.5}
.out{padding:24px 26px;background:var(--panel)}
.bignum{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.bignum b{font-size:clamp(34px,5vw,54px);font-weight:700;letter-spacing:-.03em;
  color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.bignum span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.outrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line2);font-size:13.5px;color:var(--mute)}
.outrow b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.outrow:last-of-type{border-bottom:0}
.assume{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border-left:2px solid var(--line);padding-left:12px;margin-top:20px;line-height:1.8}



/* ── the calculator stack ───────────────────────────────────────────── */
.calchead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;border:1px solid var(--line);border-bottom:0;margin-top:26px;
  background:rgba(244,244,241,.7);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);flex-wrap:wrap}
.calchead span:first-child{color:var(--ink);font-weight:600}
.verdict{border-left:3px solid var(--line);padding:14px 0 14px 16px;margin-top:22px}
.verdict p{margin:0 0 6px;font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-.01em}
.verdict small{display:block;color:var(--mute);font-size:13px;line-height:1.6;font-weight:400}
.caveat{font-size:12px;color:var(--mute);line-height:1.6;margin:16px 0 0;
  border-top:1px solid var(--line2);padding-top:14px}
.caveat b{color:var(--ink);font-weight:600}
.once{display:inline-block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--violet);color:var(--violet);padding:2px 6px;margin-left:8px;
  vertical-align:middle}