/* 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 offerings on one desktop row — one comparison system.
   Two groups (PlanCascade Cloud · Deployment & enterprise options) whose
   headers span two columns each; the offerings below align cell by cell
   across all four columns (subgrid), so names, prices, minimums,
   descriptors, descriptions, CTAs, feature lists and clarifications sit on
   the same lines. Hairlines and type carry the hierarchy: no cards, no
   fills, no badges. */
.offers{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto repeat(8,auto); column-gap:0; margin-top:48px; }
.offer{ display:contents; }
.offer__plans{ display:contents; }
.offer__hd{ grid-row:1; padding:0 28px 14px 0; border-bottom:1px solid var(--pc-border); }
.offer--cloud .offer__hd{ grid-column:1 / span 2; margin-right:20px; }
.offer--deploy .offer__hd{ grid-column:3 / span 2; margin-left:20px; padding-left:28px; }
.offer__label{ margin:0; font-size:15px; font-weight:600; letter-spacing:0; color:var(--pc-black); }
.offer__lede{ margin:4px 0 0; font-size:13.5px; line-height:1.5; color:var(--pc-text-secondary); }
/* each offering is a column of the same eight cells, one per row */
.plan{ display:grid; grid-row:2 / span 8; grid-template-rows:subgrid; min-width:0; padding:24px 28px 0 0; }
.offers .plan{ border-left:1px solid var(--pc-border); padding-left:28px; }
.offer--cloud #plan-shared{ border-left:0; padding-left:0; }
.offer--deploy #plan-hosted{ margin-left:20px; }
.offer--cloud #plan-dedicated{ margin-right:20px; }
.plan__name{ margin:0; font-size:15px; font-weight:600; letter-spacing:0; color:var(--pc-black); }
/* commercial block: the price is the strongest type on the page */
.plan__price{ margin-top:16px; }
.plan__amount{ display:block; font-size:44px; font-weight:600; letter-spacing:-.03em; line-height:1.05; color:var(--pc-black); }
.plan--custom .plan__amount{ font-size:26px; letter-spacing:-.02em; line-height:1.2; padding-top:6px; }
.plan__unit{ display:block; margin-top:8px; font-size:14px; color:var(--pc-text-secondary); }
.plan--custom .plan__unit{ font-weight:500; color:var(--pc-text); }
.plan__min{ margin-top:4px; font-size:14px; font-weight:500; color:var(--pc-black); }
/* architecture and positioning come after the commercial information */
.plan__arch{ margin:22px 0 0; font-size:14px; font-weight:600; letter-spacing:0; color:var(--pc-black); }
.plan__desc{ margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--pc-text-secondary); }
.plan__cta{ padding-top:20px; }
.plan__cta .btn{ width:100%; }
.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); }
/* tablet: each group becomes its own two-column block whose cells still
   align (subgrid within the pair); mobile: one column, group label above
   its two offerings, so the order stays Cloud → Shared, Dedicated →
   Deployment & enterprise → Hosted, Enterprise */
@media (max-width:1000px){
  .offers{ display:block; margin-top:40px; }
  .offer{ display:block; }
  .offer + .offer{ margin-top:56px; }
  .offer__hd{ padding:0 0 14px; margin:0 !important; }
  .offer__plans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(8,auto); column-gap:40px; }
  .plan{ grid-row:1 / span 8; padding:24px 0 0; margin:0 !important; }
  .offers .plan{ border-left:0; padding-left:0; }
}
@media (max-width:600px){
  .offer__plans{ display:block; }
  .plan{ display:flex; flex-direction:column; grid-row:auto; }
  .plan + .plan{ margin-top:36px !important; }
  .plan__min:empty{ display:none; }
  .plan__amount{ font-size:40px; }
  .plan__cta .btn{ width:auto; }
}

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