/* PlanCascade marketing site — landing page v2 (design/landing-page-v2).
   A restrained, neutral system: typography and whitespace carry the
   structure, brand blue is an accent, the cascade and the data are the
   visual interest. Tokens are landing-page-only (--pc-*); the app keeps
   its own --plk-* set. Fonts are self-hosted (fonts/fonts.css). */
:root{
  color-scheme: light;
  /* brand */
  --pc-blue:#1565D8; --pc-blue-hover:#0F4CB0; --pc-blue-soft:#E8F0FB; --pc-blue-line:#B9D0F3;
  /* neutrals */
  --pc-black:#111318; --pc-text:#202124; --pc-text-secondary:#666A73; --pc-text-tertiary:#8C9099;
  --pc-background:#FFFFFF; --pc-background-subtle:#F7F7F5; --pc-background-muted:#F1F1EF;
  --pc-border:#E5E5E2; --pc-border-strong:#D4D4D0;
  /* one dark surface (the closer) */
  --pc-dark:#0D1117; --pc-dark-2:#161B22; --pc-dark-border:#30363D; --pc-dark-text:#E6EDF3; --pc-dark-text-2:#8B949E; --pc-dark-amber:#D4A24C; --pc-dark-blue:#7CA8F5; --pc-dark-green:#5CC489;
  /* status — used only where a status is real */
  --pc-red:#C2413B; --pc-red-soft:#FBEDEC; --pc-amber:#9A6A12; --pc-amber-soft:#FBF3E1; --pc-green:#2E7D4F; --pc-green-soft:#EAF5EE;
  /* type */
  --pc-sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --pc-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* shape */
  --pc-radius:4px; --pc-radius-sm:2px;
  /* measure */
  --pc-wrap:1320px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--pc-background); color:var(--pc-text); font-family:var(--pc-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--pc-blue); outline-offset:2px; border-radius:var(--pc-radius-sm); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

.wrap{ width:100%; max-width:var(--pc-wrap); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }
.band{ padding:104px 0; }
.band + .band{ border-top:1px solid var(--pc-border); }
.band.wash{ background:var(--pc-background-subtle); }
@media (max-width:900px){ .band{ padding:72px 0; } }

/* ---------- type scale ---------- */
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.03em; text-wrap:balance; color:var(--pc-black); }
h1{ font-size:clamp(40px,5.2vw,64px); line-height:1.02; letter-spacing:-.04em; }
h2{ font-size:clamp(32px,3.6vw,44px); line-height:1.08; letter-spacing:-.035em; }
h3{ font-size:20px; line-height:1.3; letter-spacing:-.015em; }
.lede{ margin:20px 0 0; font-size:18px; line-height:1.6; color:var(--pc-text-secondary); max-width:56ch; }
.kicker{ display:block; margin:0 0 16px; font-size:15px; font-weight:500; color:var(--pc-text-secondary); }
.sechead{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:end; }
.sechead .lede{ margin:0 0 6px; }
.sechead--stack{ display:block; }
.sechead--stack .lede{ margin-top:20px; max-width:52ch; }
@media (max-width:900px){ .sechead{ grid-template-columns:1fr; gap:16px; } }

/* ---------- buttons: primary (solid dark) · secondary (neutral border) · tertiary (text) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--pc-radius); border:1px solid var(--pc-border-strong); background:var(--pc-background); color:var(--pc-text); font-size:14px; font-weight:500; line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap; transition:border-color .12s, background .12s, color .12s; }
.btn:hover{ border-color:var(--pc-text-secondary); color:var(--pc-black); }
.btn.pri{ background:var(--pc-black); border-color:var(--pc-black); color:#fff; }
.btn.pri:hover{ background:var(--pc-blue-hover); border-color:var(--pc-blue-hover); }
.btn.text{ border-color:transparent; background:transparent; color:var(--pc-text-secondary); padding:0 8px; }
.btn.text:hover{ color:var(--pc-black); background:var(--pc-background-subtle); }
.btn.lg{ height:46px; padding:0 20px; font-size:15px; }
.btn.light{ background:#fff; border-color:#fff; color:var(--pc-black); }
.btn.light:hover{ background:var(--pc-blue-soft); border-color:var(--pc-blue-soft); color:var(--pc-black); }
.btn.ghost-dark{ background:transparent; border-color:var(--pc-dark-border); color:var(--pc-dark-text); }
.btn.ghost-dark:hover{ border-color:var(--pc-dark-text-2); color:#fff; }

/* ---------- chrome ---------- */
.nav{ position:sticky; top:0; z-index:50; background:var(--pc-background); border-bottom:1px solid var(--pc-border); }
.nav__in{ display:flex; align-items:center; gap:36px; height:60px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
/* The mark is the brand icon PNG (transparent), cropped to its bounds and
   exported at 160px tall so it stays crisp on high-DPI screens. */
.brand__mark{ width:auto; height:30px; display:block; }
.brand__word{ height:18px; width:auto; display:block; }
.nav__links{ display:flex; gap:28px; }
.nav__links a{ font-size:14px; font-weight:500; color:var(--pc-text-secondary); text-decoration:none; transition:color .12s; }
.nav__links a:hover, .nav__links a[aria-current]{ color:var(--pc-black); }
.nav__cta{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav__cta .btn{ height:34px; padding:0 14px; font-size:13.5px; }
@media (max-width:860px){ .nav__links{ display:none; } }

/* ---------- hero ---------- */
/* Headline and copy side by side on top; the staircase — the page's own
   visual — full width beneath, headed by the category line. */
.hero{ padding-top:44px; }
.hero__top{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:start; }
.hero h1{ max-width:12ch; }
.hero .kicker{ margin-bottom:14px; }
/* Four value messages as a 2×2 editorial grid: a hairline above each row,
   a hairline between the columns, nothing else. Emphasis is dark bold. */
/* The benefits enter after the headline: pushed down so the grid begins where
   the headline ends and clears the Weekly step by ~40px; the cascade is
   pulled back up so its start stays beside the headline block. */
.hero__points{ display:grid; grid-template-columns:1fr 1fr; margin:48px 0 0 20px; }
.hero__points > div{ padding:12px 20px 14px 0; border-top:1px solid var(--pc-border); }
.hero__points > div:nth-child(2n){ padding-left:20px; padding-right:0; border-left:1px solid var(--pc-border); }
.hero__points dt{ margin:0 0 3px; font-size:14px; font-weight:600; color:var(--pc-black); }
.hero__points dd{ margin:0; font-size:14px; line-height:1.5; color:var(--pc-text-secondary); }
/* The cascade's own surface: full-bleed near-black, shallow, square. The
   staircase keeps its geometry and animation; only its colours adapt. */
.hero__stage{ margin-top:56px; padding:20px 0 36px; background:var(--pc-dark); color:var(--pc-dark-text); }
.hero .stair{ margin-top:0; }
.hero__stage .stp__h{ color:var(--pc-dark-text-2); }
.hero__stage .stp.on .stp__h{ color:var(--pc-dark-text); }
.hero__stage .stp__v{ color:var(--pc-dark-text); }
.hero__stage .stp__v em{ color:var(--pc-dark-text-2); }
.hero__stage .stp__note{ color:var(--pc-dark-blue); }
.hero__stage .stp__v.is-edited{ color:var(--pc-dark-blue); }
.hero__stage .stp__v.beat{ color:var(--pc-dark-green); }
.hero__stage .stp__t{ background:var(--pc-dark-border); }
.hero__stage .stp.on .stp__t{ background:var(--pc-dark-text); }
.hero__stage .stair__dot{ box-shadow:0 0 0 2px var(--pc-dark); }
.hero__stage .stair.returning .stair__path line{ opacity:.95; }
.hero__stage .stair__var{ color:var(--pc-dark-green); background:var(--pc-dark); border-color:var(--pc-dark-border); }
.hero__stage .stair__cap{ margin-top:22px; font-size:13px; color:var(--pc-dark-text-2); max-width:104ch; }
.hero__stage .stair__cap strong{ font-weight:600; color:var(--pc-dark-text); }
/* Planning processes you already use — editorial metadata under the headline:
   a small medium-weight label, then eight familiar process names on two lines. */
.hero__plans{ margin-top:22px; }
.hero__plans-label{ display:block; font-size:12.5px; font-weight:500; color:var(--pc-text-secondary); }
.hero__plans-list{ margin:4px 0 0; font-size:13.5px; line-height:1.6; color:var(--pc-text-tertiary); }
.hero__plans-sep{ display:none; }
@media (max-width:1000px){ .hero{ padding-top:64px; padding-bottom:64px; } .hero__top{ grid-template-columns:1fr; gap:32px; } .hero h1{ max-width:14ch; } .hero__points{ margin:0; } .hero__stage{ margin-top:56px; padding:24px 0 32px; } }
@media (max-width:520px){ .hero__points{ grid-template-columns:1fr; } .hero__points > div:nth-child(n){ padding:12px 0; border-left:0; } }
@media (max-width:640px){ .hero{ padding-top:48px; padding-bottom:48px; } .hero__plans-list br{ display:none; } .hero__plans-sep{ display:inline; } }

/* ---------- mockup vocabulary (Excel, the app, the tree) ----------
   One panel recipe: white, 1px border, 4px radius, no shadow. Headers are a
   subtle gray band. Numbers are mono and tabular. Status colour only where
   something IS a status. */

/* ---------- before → after ---------- */
.flow{ display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1.1fr); gap:0; align-items:stretch; margin-top:56px; }
.flow > *{ min-width:0; }
.flow > div{ display:flex; flex-direction:column; gap:12px; }
.flow .arrow{ align-self:center; }
@media (max-width:1000px){ .flow{ grid-template-columns:1fr; gap:28px; margin-top:40px; } }
.side__head{ margin:0 0 6px; font-size:14px; font-weight:600; letter-spacing:0; color:var(--pc-black); }

/* the workbook estate — four files that should be one plan */
.files{ border:1px solid var(--pc-border-strong); border-radius:var(--pc-radius); background:var(--pc-background); }
.file{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid var(--pc-border); }
.file:first-child{ border-top:0; }
.file .xl{ width:20px; height:20px; border-radius:var(--pc-radius-sm); background:var(--pc-green-soft); color:var(--pc-green); display:flex; align-items:center; justify-content:center; flex:none; font-family:var(--pc-mono); font-size:10px; font-weight:500; }
.file .nm{ font-family:var(--pc-mono); font-size:13px; color:var(--pc-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file .mt{ margin-left:auto; font-size:11px; color:var(--pc-text-tertiary); white-space:nowrap; }
@media (max-width:520px){ .file .mt{ display:none; } }

/* spreadsheet with live errors */
.sheet{ border:1px solid var(--pc-border-strong); border-radius:var(--pc-radius); overflow:hidden; background:var(--pc-background); }
.sheet__bar{ display:flex; align-items:center; gap:10px; padding:7px 11px; background:var(--pc-background-subtle); border-bottom:1px solid var(--pc-border); font-family:var(--pc-mono); font-size:11.5px; color:var(--pc-text-secondary); }
.sheet__fx{ color:var(--pc-text-tertiary); }
.sheet__formula{ color:var(--pc-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet__formula.err{ color:var(--pc-red); }
.sheet__scroll{ overflow-x:auto; scrollbar-width:thin; }
.grid{ width:100%; border-collapse:collapse; font-family:var(--pc-mono); font-size:12.5px; }
.grid th, .grid td{ border:1px solid var(--pc-border); padding:6px 9px; text-align:right; white-space:nowrap; }
.grid tr > :first-child{ border-left:0; } .grid tr > :last-child{ border-right:0; }
.grid th{ background:var(--pc-background-subtle); color:var(--pc-text-secondary); font-weight:400; font-size:11px; text-align:center; }
.grid td:first-child{ text-align:left; color:var(--pc-text-secondary); font-family:var(--pc-sans); }
.grid .num{ color:var(--pc-text); font-variant-numeric:tabular-nums; }
.cell{ transition:background .25s, color .25s; }
.cell.bad{ background:var(--pc-red-soft); color:var(--pc-red); font-weight:500; }
.cell.sel{ box-shadow:inset 0 0 0 1px var(--pc-red); }
/* Spreadsheet link error: white, a hairline above, red only for the state. */
.linkerr{ display:flex; align-items:flex-start; gap:8px; padding:8px 11px 9px; background:var(--pc-background); border-top:1px solid var(--pc-border); line-height:1.45; }
.linkerr__icon{ flex:none; margin-top:1px; color:var(--pc-red); }
.linkerr__t{ font-size:12.5px; font-weight:600; color:#A3352F; }
.linkerr__d{ font-size:12px; color:var(--pc-red); }
.linkerr__d code{ font-family:var(--pc-mono); font-size:11.5px; }

/* the arrow between the two columns — neutral, one direction */
.arrow{ display:flex; flex-direction:column; align-items:center; padding:0 8px; color:var(--pc-text-tertiary); }
.arrow__svg{ overflow:visible; }
.arrow__dash{ stroke-dasharray:6 6; animation:march 1.4s linear infinite; }
@keyframes march{ to{ stroke-dashoffset:-24; } }
@media (max-width:1000px){ .arrow{ transform:rotate(90deg); margin:2px 0; } }

/* ---------- cascade simulation (the app) ---------- */
.sim{ max-width:100%; border:1px solid var(--pc-border-strong); border-radius:var(--pc-radius); background:var(--pc-background); overflow:hidden; }
.sim__hd{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid var(--pc-border); background:var(--pc-background-subtle); }
.sim__crumb{ font-size:12.5px; color:var(--pc-text-secondary); }
.sim__crumb b{ color:var(--pc-text); font-weight:600; }
.sim__chip{ margin-left:auto; font-size:11px; color:var(--pc-text-secondary); white-space:nowrap; }
.sim__steps{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--pc-border); }
.sstep{ font-size:12.5px; font-weight:500; color:var(--pc-text-tertiary); padding:2px 0; border-bottom:2px solid transparent; transition:color .3s, border-color .3s; }
.sstep.on{ color:var(--pc-blue); border-bottom-color:var(--pc-blue); }
.sarrow{ color:var(--pc-border-strong); font-size:12px; }
/* The grid still scrolls (the animation scrolls it to the opened month), but
   without a visible scrollbar — it read as UI chrome, not as the product. */
.sim__scroll{ position:relative; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.sim__scroll::-webkit-scrollbar{ display:none; }
.sim__grid{ display:inline-block; min-width:100%; }
.srow{ display:flex; border-top:1px solid var(--pc-border); }
.srow.head{ border-top:0; background:var(--pc-background-subtle); }
.scell{ flex:0 0 70px; padding:6px 9px; text-align:right; border-left:1px solid var(--pc-border); font-family:var(--pc-mono); font-size:12px; color:var(--pc-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.scell.name{ flex:0 0 126px; position:sticky; left:0; z-index:2; text-align:left; border-left:0; border-right:1px solid var(--pc-border-strong); background:var(--pc-background); font-family:var(--pc-sans); font-size:12.5px; color:var(--pc-text); }
.scell.name .unit{ color:var(--pc-text-tertiary); }
.srow.head .scell.name{ background:var(--pc-background-subtle); }
.srow.head .scell{ font-family:var(--pc-sans); font-size:11.5px; font-weight:500; color:var(--pc-text-secondary); }
.scell.fy{ flex:0 0 88px; font-weight:500; color:var(--pc-black); }
.scell.opened{ background:var(--pc-blue-soft); color:var(--pc-blue-hover); }
.srow.head .scell.opened{ color:var(--pc-blue-hover); }
.scell.week{ background:var(--pc-background-subtle); }
.srow.head .scell.week{ background:var(--pc-background-muted); }
.scell .pm{ display:inline-block; margin-left:5px; width:12px; height:12px; line-height:10px; border:1px solid var(--pc-blue-line); border-radius:var(--pc-radius-sm); color:var(--pc-blue); font-family:var(--pc-mono); font-size:10px; text-align:center; background:#fff; }
/* Editing a week in place: the focused-input ring while the value is being
   changed, then a small corner marker on the edited cell (blue = active). */
.scell.editing{ box-shadow:inset 0 0 0 2px var(--pc-blue); background:#fff; color:var(--pc-black); }
.scell.edited{ position:relative; color:var(--pc-black); font-weight:600; }
.scell.edited::after{ content:""; position:absolute; top:0; right:0; width:0; height:0; border:4px solid transparent; border-top-color:var(--pc-blue); border-right-color:var(--pc-blue); }
@keyframes colin{ from{ opacity:0; transform:translateX(-6px) } to{ opacity:1; transform:none } }
.scell.in{ animation:colin .3s ease both; }
.sim__cap{ padding:9px 12px; border-top:1px solid var(--pc-border); background:var(--pc-background-subtle); font-size:12.5px; color:var(--pc-text-secondary); min-height:50px; line-height:1.5; }
.sim__cap-t{ display:block; margin-bottom:1px; font-size:13px; font-weight:600; color:var(--pc-black); }
.sim__cap-s{ display:block; }
.sim__cap .ok{ font-style:normal; font-weight:600; color:var(--pc-green); }

/* ---------- the planning channel ---------- */
.thread{ flex:1; display:flex; flex-direction:column; min-height:320px; border:1px solid var(--pc-border-strong); border-radius:var(--pc-radius); background:var(--pc-background); overflow:hidden; }
.thread__hd{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--pc-border); background:var(--pc-background-subtle); font-size:12.5px; color:var(--pc-text-secondary); }
.thread__hd b{ color:var(--pc-text); font-weight:600; }
.thread__hd .live{ width:7px; height:7px; border-radius:50%; background:var(--pc-red); flex:none; }
.thread__hd .when{ margin-left:auto; font-size:11.5px; color:var(--pc-text-tertiary); }
.thread__body{ flex:1; padding:6px 0 2px; display:flex; flex-direction:column; }
.msg{ display:flex; gap:10px; padding:7px 12px; }
.msg + .msg{ border-top:1px solid var(--pc-border); }
.msg__av{ width:24px; height:24px; border-radius:var(--pc-radius-sm); flex:none; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:600; letter-spacing:.02em; background:var(--pc-background-muted); color:var(--pc-text-secondary); margin-top:2px; }
.msg__b{ flex:1 1 auto; min-width:0; }
.msg__who{ display:block; font-size:11.5px; color:var(--pc-text-tertiary); margin-bottom:1px; }
.msg__who b{ color:var(--pc-text); font-weight:600; font-size:12px; }
.msg__x{ display:block; font-size:14px; line-height:1.45; color:var(--pc-text); }
.msg__x code{ font-family:var(--pc-mono); font-size:12px; background:var(--pc-background-subtle); border:1px solid var(--pc-border); border-radius:var(--pc-radius-sm); padding:0 4px; }
@keyframes pop{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
.msg.fresh{ animation:pop .3s ease both; }
.thread__ft{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-top:1px solid var(--pc-border); background:var(--pc-background-subtle); font-size:12px; color:var(--pc-text-tertiary); }
.typing{ display:inline-flex; gap:3px; align-items:center; }
.typing i{ width:4px; height:4px; border-radius:50%; background:var(--pc-text-tertiary); display:block; animation:blip 1.2s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blip{ 0%,60%,100%{ opacity:.35 } 30%{ opacity:1 } }

/* ---------- governed KPI calculation ---------- */
.kpidef{ border:1px solid var(--pc-border-strong); border-radius:var(--pc-radius); background:var(--pc-background); overflow:hidden; }
.kpidef__hd{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--pc-background-subtle); border-bottom:1px solid var(--pc-border); font-size:13px; font-weight:600; color:var(--pc-black); }
.kpidef__hd svg{ color:var(--pc-text-tertiary); flex:none; }
.kpidef__hd .ver{ margin-left:auto; font-size:11px; font-weight:400; color:var(--pc-text-secondary); }
.kpidef__bd{ padding:12px 12px 11px; }
.kpidef__name{ font-size:15px; font-weight:600; color:var(--pc-black); }
.kpidef__name span{ font-family:var(--pc-mono); font-size:11px; color:var(--pc-text-tertiary); font-weight:400; margin-left:7px; }
.kpidef__f{ margin-top:8px; padding:8px 10px; border:1px solid var(--pc-border); border-radius:var(--pc-radius-sm); background:var(--pc-background-subtle); font-family:var(--pc-mono); font-size:12px; color:var(--pc-text); overflow-x:auto; white-space:nowrap; }
.kpidef__f em{ font-style:normal; color:var(--pc-text-secondary); }
.kpidef__meta{ margin-top:9px; font-size:11.5px; color:var(--pc-text-secondary); }
.kpidef__meta b{ color:var(--pc-text); font-weight:600; }
.kpidef__used{ display:flex; align-items:center; gap:0 10px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--pc-border); font-size:12px; }
.kpidef__used .lbl{ color:var(--pc-text-tertiary); margin-right:2px; }
.uchip{ color:var(--pc-text-tertiary); transition:color .3s; }
.uchip.lit{ color:var(--pc-text); font-weight:500; }

/* ---------- performance roll-up ---------- */
.perf{ border:1px solid var(--pc-border-strong); border-radius:var(--pc-radius); background:var(--pc-background); overflow:hidden; }
.perf__hd{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--pc-border); background:var(--pc-background-subtle); }
.perf__t{ font-size:13px; color:var(--pc-text-secondary); }
.perf__t b{ color:var(--pc-black); font-weight:600; }
.perf__chip{ margin-left:auto; font-size:11px; color:var(--pc-text-secondary); white-space:nowrap; }
.perf__row{ display:flex; align-items:stretch; border-bottom:1px solid var(--pc-border); }
.pcell{ flex:0 0 33.33%; padding:10px 12px; border-left:1px solid var(--pc-border); }
.pcell:first-child{ border-left:0; }
.pcell i{ display:block; font-style:normal; font-size:11px; color:var(--pc-text-tertiary); margin-bottom:2px; }
.pcell b{ font-family:var(--pc-mono); font-size:16px; font-weight:600; color:var(--pc-black); font-variant-numeric:tabular-nums; }
.pcell b.pend{ color:var(--pc-text-tertiary); font-weight:400; }
.pcell b.warn{ color:var(--pc-amber); }
.pcell small{ display:block; font-size:11px; color:var(--pc-text-tertiary); margin-top:2px; }
.pcell b.fresh{ animation:pop .3s ease both; }
.ladder{ padding:2px 0; }
.lrow{ display:flex; align-items:center; gap:10px; padding:6px 12px; opacity:.45; transition:opacity .35s; }
.lrow.lit{ opacity:1; }
.lrow .up{ width:14px; flex:none; text-align:center; color:var(--pc-border-strong); font-size:14px; line-height:1; transition:color .35s; }
.lrow.lit .up{ color:var(--pc-text-secondary); }
.lrow .ln{ font-size:12.5px; color:var(--pc-text); flex:0 0 82px; }
.lrow .lp{ font-family:var(--pc-mono); font-size:11.5px; color:var(--pc-text-secondary); flex:0 0 62px; text-align:right; font-variant-numeric:tabular-nums; }
.lrow .lv{ margin-left:auto; font-family:var(--pc-mono); font-size:12px; font-variant-numeric:tabular-nums; color:var(--pc-text-tertiary); transition:color .3s; }
.lrow.lit .lv.bad{ color:var(--pc-amber); }
.lrow.lit .lv.ok{ color:var(--pc-green); }
.perf__foot{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-top:1px solid var(--pc-border); background:var(--pc-background-subtle); font-size:12.5px; color:var(--pc-text-secondary); min-height:40px; transition:color .35s; }
.perf__foot.on{ color:var(--pc-text); }
.perf__foot svg{ flex:none; color:var(--pc-green); opacity:0; transition:opacity .35s; }
.perf__foot.on svg{ opacity:1; }
.perf__foot b{ color:var(--pc-black); font-weight:600; }
.perf__foot .var-bad{ color:var(--pc-amber); }
.perf__foot .var-ok{ color:var(--pc-green); }

/* ---------- plan file: KPI groups + approval flow ---------- */
.pfile{ border:1px solid var(--pc-border-strong); border-radius:var(--pc-radius); background:var(--pc-background); overflow:hidden; }
.pfile__hd{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--pc-border); background:var(--pc-background-subtle); font-size:13px; color:var(--pc-text-secondary); }
.pfile__hd b{ color:var(--pc-black); font-weight:600; }
.pfile__chip{ margin-left:auto; font-size:11px; color:var(--pc-text-secondary); white-space:nowrap; }
.pfile__rows{ display:flex; flex-direction:column; }
.pfile__row{ display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; padding:8px 12px; border-top:1px solid var(--pc-border); font-size:12.5px; }
.pfile__row:first-child{ border-top:0; }
.pfile__g{ font-weight:600; color:var(--pc-black); }
.pfile__k{ color:var(--pc-text-secondary); }
@media (max-width:420px){ .pfile__row{ grid-template-columns:1fr; gap:2px; } }

/* ---------- the cascade ---------- */
/* The staircase: eight columns stepping down, thin rules, mono values. Lit
   steps go dark; the travelling dot and the return line are the one blue. */
.stair{ position:relative; margin:56px 0 0; padding-bottom:6px; }
.stair__steps{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(8,1fr); gap:10px; align-items:start; }
.stp{ position:relative; padding-top:calc(var(--i) * 26px); }
/* A planning callout sits in the empty space above its step (the step's own
   offset makes room); it takes no height of its own. Blue = edited. */
.stp__note{ display:block; height:16px; margin:-20px 0 4px; font-size:11.5px; line-height:16px; white-space:nowrap; color:var(--pc-blue); }
.stp__note[hidden]{ display:none; }
.stp__v.is-edited{ color:var(--pc-blue); }
.stp__v.beat{ color:var(--pc-green); }
.stp__h{ display:block; font-size:12.5px; font-weight:500; color:var(--pc-text-tertiary); transition:color .3s; }
.stp.on .stp__h{ color:var(--pc-text-secondary); }
.stp__v{ display:block; margin-top:3px; font-family:var(--pc-mono); font-size:15px; color:var(--pc-black); font-variant-numeric:tabular-nums; opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease; }
.stp__v em{ font-style:normal; font-size:11px; color:var(--pc-text-tertiary); margin-left:3px; }
.stp.on .stp__v{ opacity:1; transform:none; }
.stp__v.short{ color:var(--pc-amber); }
.stp__t{ display:block; height:2px; margin-top:8px; background:var(--pc-border); transition:background .3s ease; }
.stp.on .stp__t{ background:var(--pc-black); }
.stair__path{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; overflow:visible; }
.stair__path line{ stroke:var(--pc-blue); stroke-width:1; stroke-dasharray:4 6; stroke-linecap:round; opacity:0; transition:opacity .5s; }
.stair.returning .stair__path line{ opacity:.7; animation:stairUp 2.6s linear infinite; }
@keyframes stairUp{ to{ stroke-dashoffset:-50; } }
.stair__dot{ position:absolute; z-index:3; width:9px; height:9px; border-radius:50%; background:var(--pc-blue); box-shadow:0 0 0 2px #fff; opacity:0; transition:left .42s cubic-bezier(.5,0,.2,1), top .42s cubic-bezier(.5,0,.2,1), opacity .3s; }
.stair__var{ position:absolute; z-index:4; font-family:var(--pc-mono); font-size:12px; white-space:nowrap; color:var(--pc-green); background:var(--pc-green-soft); border:1px solid var(--pc-border); border-radius:var(--pc-radius-sm); padding:2px 8px; opacity:0; transition:left 1.5s cubic-bezier(.45,0,.25,1), top 1.5s cubic-bezier(.45,0,.25,1), opacity .4s; }
.stair__cap{ position:relative; z-index:4; margin:28px 0 0; font-size:14px; color:var(--pc-text-secondary); line-height:1.6; max-width:72ch; }
@media (max-width:1000px){ .stair{ margin-top:40px; } .stair__steps{ grid-template-columns:repeat(4,1fr); row-gap:22px; } .stp{ padding-top:calc((var(--i) % 4) * 22px); } .stair__dot, .stair__var, .stair__path{ display:none; } }
@media (max-width:480px){ .stair__steps{ grid-template-columns:repeat(2,1fr); } .stp{ padding-top:calc((var(--i) % 2) * 18px); } }

/* the eight horizons: a ruled grid, not eight cards */
.hz{ margin-top:56px; }
.hz__label{ display:block; margin-bottom:12px; font-size:12.5px; font-weight:500; color:var(--pc-text-secondary); }
.hz__note{ margin:16px 0 0; font-size:15px; color:var(--pc-text-secondary); }
.hz__note b{ font-weight:600; color:var(--pc-black); }
.casc{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--pc-border); }
.step{ padding:16px 22px 16px 0; border-bottom:1px solid var(--pc-border); }
.step:nth-child(4n+2), .step:nth-child(4n+3), .step:nth-child(4n+4){ padding-left:22px; border-left:1px solid var(--pc-border); }
.step h3{ margin:0 0 3px; font-size:16px; }
.step__meta{ font-size:13px; color:var(--pc-text-secondary); }
@media (max-width:1000px){
  .casc{ grid-template-columns:repeat(2,1fr); }
  .step:nth-child(n){ padding-left:0; border-left:0; }
  .step:nth-child(2n){ padding-left:22px; border-left:1px solid var(--pc-border); }
}
@media (max-width:600px){ .casc{ grid-template-columns:1fr; } .step:nth-child(n){ padding:12px 0; border-left:0; } }

/* the example cascade on the same dark surface as the hero cascade: only
   colours change; the ruled 4×2 grid, type and spacing stay */
.casc__stage{ margin-top:56px; padding:40px 0 44px; }
.casc__stage .hz{ margin-top:0; }
.casc__stage .hz__label{ color:var(--pc-dark-text-2); }
.casc__stage .casc{ border-top-color:var(--pc-dark-border); }
.casc__stage .step{ border-bottom-color:var(--pc-dark-border); border-left-color:var(--pc-dark-border); }
.casc__stage .step h3{ color:var(--pc-dark-text); }
.casc__stage .step__meta{ color:var(--pc-dark-text-2); }
.hz--after-stage{ margin-top:56px; }
@media (max-width:900px){ .casc__stage{ margin-top:44px; padding:32px 0 36px; } .hz--after-stage{ margin-top:44px; } }

/* custom horizons — a ruled text grid, no pills */
.pchips{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--pc-border); max-width:720px; }
.pchip{ padding:10px 12px 10px 0; border-bottom:1px solid var(--pc-border); font-size:15px; color:var(--pc-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:520px){ .pchips{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){ .hz{ margin-top:44px; } }

/* ---------- scope ---------- */
/* The workspace: title across the page, then two blocks of equal height —
   what the workspace is created with (ruled list) and its hierarchy. */
.ws{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:64px; align-items:stretch; margin-top:56px; }
@media (max-width:940px){ .ws{ grid-template-columns:1fr; gap:40px; margin-top:40px; } }
.wsfacts{ margin:0; display:grid; grid-auto-rows:1fr; border-top:1px solid var(--pc-border); }
.wsfacts > div{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:16px; align-content:center; padding:11px 0; border-bottom:1px solid var(--pc-border); }
.wsfacts dt{ font-size:14px; font-weight:600; color:var(--pc-black); }
.wsfacts dd{ margin:0; font-size:14px; line-height:1.5; color:var(--pc-text-secondary); }
.wsfacts > div{ grid-template-columns:150px minmax(0,1fr); }
@media (max-width:520px){ .wsfacts > div{ grid-template-columns:1fr; gap:2px; } }
.treecard{ display:flex; flex-direction:column; border:1px solid var(--pc-border-strong); border-radius:var(--pc-radius); background:var(--pc-background); overflow:hidden; }
.treecard__hd{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--pc-border); background:var(--pc-background-subtle); font-size:12.5px; font-weight:500; color:var(--pc-text-secondary); }
.treecard__tag{ margin-left:auto; font-size:12px; font-weight:400; color:var(--pc-text-tertiary); }
.tree{ flex:1; display:flex; flex-direction:column; }
.tnode{ flex:1; display:flex; align-items:center; gap:10px; padding:9px 12px 9px calc(12px + var(--d) * 20px); border-top:1px solid var(--pc-border); font-size:14px; font-weight:500; color:var(--pc-black); position:relative; }
.tnode:first-child{ border-top:0; }
.tnode .lv{ font-size:11.5px; color:var(--pc-text-tertiary); width:22px; flex:none; }
.tnode .tag{ margin-left:auto; font-size:12.5px; color:var(--pc-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:520px){ .tnode{ flex-wrap:wrap; row-gap:1px; padding-left:calc(12px + var(--d) * 12px); } .tnode .tag{ flex-basis:100%; margin-left:0; padding-left:32px; white-space:normal; } }

/* ---------- governance — four questions, four answers ----------
   An editorial table, not feature cards: question, a hairline, then the
   capability that answers it. No icons, no vertical borders, no tint. */
.gov{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 40px; margin-top:56px; }
.gcol__q{ margin:0; min-height:48px; padding-bottom:18px; border-bottom:1px solid var(--pc-border); font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-.01em; color:var(--pc-black); }
.gcol__cap{ margin-top:18px; font-size:14.5px; font-weight:600; color:var(--pc-black); }
.gcol p{ margin:6px 0 0; font-size:14px; line-height:1.55; color:var(--pc-text-secondary); }
@media (max-width:1000px){ .gov{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 40px; margin-top:40px; } }
@media (max-width:600px){ .gov{ grid-template-columns:1fr; gap:32px; } .gcol__q{ min-height:0; } .gcol__q br{ display:none; } }

/* ---------- the closer: the page's one dark surface ---------- */
.band.dark{ background:var(--pc-dark); color:var(--pc-dark-text); border-top:0; }
.band.dark .kicker{ color:var(--pc-dark-text-2); }
.band.dark h2{ color:#fff; max-width:16ch; }
.band.dark .lede{ color:var(--pc-dark-text-2); }
.closer{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px; align-items:center; }
@media (max-width:900px){ .closer{ grid-template-columns:1fr; gap:36px; } }
.dark__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.dark__list{ border-top:1px solid var(--pc-dark-border); }
.dark__list li{ display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--pc-dark-border); font-size:15px; color:var(--pc-dark-text); line-height:1.5; }
.dark__t{ font-weight:600; color:#fff; }
.dark__d{ margin-top:2px; font-size:14px; color:var(--pc-dark-text-2); }
.dark__list svg{ flex:none; margin-top:4px; color:var(--pc-blue); }

/* ---------- footer ---------- */
.foot{ background:var(--pc-background); border-top:1px solid var(--pc-border); color:var(--pc-text-secondary); padding:32px 0; font-size:13.5px; }
.foot__in{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
.foot a{ color:var(--pc-text-secondary); text-decoration:none; }
.foot a:hover{ color:var(--pc-black); }
.foot__links{ display:flex; gap:20px; margin-left:auto; flex-wrap:wrap; }
.foot__brand{ display:inline-flex; align-items:center; gap:8px; }
.foot__brand img{ display:block; }

/* ---------- pricing page ---------- */
/* Same vocabulary as the landing page: label → two-line heading → ruled
   columns. No cards, no badges, no favoured plan. */
.as-h2{ font-size:clamp(32px,3.6vw,44px); line-height:1.08; letter-spacing:-.035em; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* four plans, one ruled grid; every column identical in treatment */
.plans{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 40px; margin-top:56px; border-top:1px solid var(--pc-border); }
.plan{ display:flex; flex-direction:column; padding-top:24px; min-width:0; }
.plan__name{ margin:0; font-size:15px; font-weight:600; letter-spacing:0; color:var(--pc-black); }
.plan__price{ margin-top:14px; }
.plan__amount{ display:block; font-size:30px; font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--pc-black); }
.plan__unit{ display:block; margin-top:4px; font-size:13px; color:var(--pc-text-secondary); }
.plan__min{ min-height:20px; font-size:13px; color:var(--pc-text); }
.plan__desc{ margin:12px 0 0; font-size:14px; line-height:1.5; color:var(--pc-text-secondary); }
.plan__list{ margin-top:28px; border-top:1px solid var(--pc-border); }
.plan__list li{ padding:8px 0; border-bottom:1px solid var(--pc-border); font-size:13.5px; line-height:1.4; color:var(--pc-text); }
.plan__db{ margin:12px 0 0; font-size:12.5px; line-height:1.5; color:var(--pc-text-tertiary); }
.plan .btn{ margin-top:18px; align-self:flex-start; } /* the CTA sits with its plan, under the description */
@media (max-width:1000px){ .plans{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 40px; } }
@media (max-width:600px){ .plans{ grid-template-columns:1fr; gap:32px; } .plan__min{ min-height:0; } }

/* three explanatory columns */
.cols3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; margin-top:56px; border-top:1px solid var(--pc-border); }
.cols3 > div{ padding-top:22px; }
.cols3 h3{ margin:0 0 8px; font-size:15px; letter-spacing:0; }
.cols3 p{ margin:0; font-size:14px; line-height:1.55; color:var(--pc-text-secondary); }
.rates{ margin-top:14px; border-top:1px solid var(--pc-border); }
.rate{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--pc-border); font-size:13.5px; color:var(--pc-text-secondary); }
.rate__v{ color:var(--pc-black); font-weight:500; white-space:nowrap; }
@media (max-width:900px){ .cols3{ grid-template-columns:1fr; gap:24px; } }

/* usage & capacity: a real table on hairlines */
.captable{ width:100%; max-width:760px; margin-top:56px; border-collapse:collapse; font-size:14px; }
.captable th, .captable td{ padding:10px 0; border-bottom:1px solid var(--pc-border); text-align:left; vertical-align:top; }
.captable thead th{ padding-top:0; font-size:13px; font-weight:600; color:var(--pc-black); }
.captable tbody th{ font-weight:400; color:var(--pc-text-secondary); width:40%; }
.captable td{ color:var(--pc-black); font-weight:500; }
.captable__note{ margin:10px 0 0; font-size:12.5px; color:var(--pc-text-tertiary); }
.addons-wrap{ margin-top:48px; max-width:760px; }
.addons{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; border-top:1px solid var(--pc-border); }
.addon{ padding-top:16px; }
.addon__name{ margin:0; font-size:14px; letter-spacing:0; }
.addon__price{ margin-top:4px; font-size:18px; font-weight:600; color:var(--pc-black); }
.addon__price span{ font-size:13px; font-weight:400; color:var(--pc-text-secondary); }
.addon__list{ margin-top:8px; }
.addon__list li{ font-size:13.5px; color:var(--pc-text-secondary); line-height:1.6; }
.infra-note{ margin:32px 0 0; max-width:72ch; font-size:13px; line-height:1.55; color:var(--pc-text-tertiary); }
@media (max-width:600px){ .addons{ grid-template-columns:1fr; gap:20px; } }

/* deployment progression on the dark stage: typography and arrows only */
.deploy__stage{ margin-top:56px; padding:40px 0 44px; }
.deploy{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:0 24px; align-items:start; }
.deploy h3{ margin:0 0 6px; font-size:15px; letter-spacing:0; color:var(--pc-dark-text); }
.deploy p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--pc-dark-text-2); }
.deploy__arrow{ padding-top:1px; font-size:18px; line-height:1; color:var(--pc-dark-text-2); }
@media (max-width:900px){ .deploy__stage{ margin-top:40px; padding:32px 0 36px; } .deploy{ grid-template-columns:1fr; gap:14px; } .deploy__arrow{ display:none; } .deploy li:not(.deploy__arrow) + li:not(.deploy__arrow){ padding-top:14px; border-top:1px solid var(--pc-dark-border); } }

/* faq: rows on hairlines */
.faq{ margin:48px 0 0; max-width:820px; border-top:1px solid var(--pc-border); }
.faq > div{ padding:16px 0; border-bottom:1px solid var(--pc-border); }
.faq dt{ font-size:15px; font-weight:600; color:var(--pc-black); }
.faq dd{ margin:6px 0 0; font-size:14px; line-height:1.55; color:var(--pc-text-secondary); }