/* ============================== PUBLIC SITE (landing / pricing / legal / login) ==============================
     Drawing Set — binding specs docs/specs/marketing-drawing-set.md and, for the landing page,
     docs/specs/landing-redesign.md. Tokens only; the one allowed literal is the logo gradient (markup). */
  #publicSite{z-index:150; background:var(--surface-canvas);}
  /* The public site is a fixed full-view layer that scrolls inside itself (#pubBody); the app
     under it (builder toolbar included) must not make the document scroll sideways on a phone. */
  html:has(body[data-nf-public="1"]), body[data-nf-public="1"]{overflow:hidden;}
  body[data-nf-public="1"] #main{overflow:hidden;}
  .pub-body{overflow-y:auto; overflow-x:hidden; height:calc(100vh - 60px); scroll-behavior:auto;}

  /* ---- §1 Nav: the navy shell, same as the app's header ---- */
  .pub-nav{display:flex; align-items:center; gap:28px; padding:0 32px; height:60px; background:var(--shell-bg);
    border-bottom:1px solid var(--shell-line); position:sticky; top:0; z-index:5;}
  .pub-nav .brand-lockup{margin-right:8px;}
  .pub-nav .brand-word{color:var(--shell-text-strong); font-size:17px; font-weight:600;}
  .pub-link{position:relative; background:none; border:none; padding:6px 0; font-size:14px; font-weight:500; color:var(--shell-text); cursor:pointer;
    transition:color var(--dur-1) var(--ease-step);}
  .pub-link:hover{color:var(--shell-text-strong); background:none; border:none;}
  .pub-link.active{color:var(--shell-text-strong); font-weight:600;}
  .pub-link.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--shell-marker);}
  .pub-link:focus-visible{outline:2px solid var(--shell-focus); outline-offset:3px; border-radius:var(--r-control);}
  .pub-nav .pub-login-cta{background:transparent; color:var(--shell-text-strong); border:1px solid var(--border-control);}
  .pub-nav .pub-login-cta:hover{background:var(--shell-raised); color:var(--shell-text-strong); border-color:var(--shell-text-muted);}
  .pub-nav button.pub-login-cta, .pub-nav > .pub-primary-cta{height:36px; padding:0 16px; font-size:14px; font-weight:600;}
  .pub-menu{display:contents;}   /* desktop: the wrapper vanishes from layout */
  .pub-menu-btn{display:none;}

  /* ---- Shared page grammar ---- */
  .mk-section{border-bottom:1px solid var(--border-default); padding:96px 0;}
  .mk-wrap{max-width:1200px; margin:0 auto; padding:0 32px; box-sizing:content-box;}
  .mk-kicker{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-muted); margin:0 0 12px;}
  .mk-h1{font-size:52px; line-height:56px; font-weight:700; letter-spacing:-0.02em; color:var(--text-primary); margin:0 0 20px; text-wrap:balance;}
  .mk-h2{font-size:32px; line-height:38px; font-weight:700; letter-spacing:-0.015em; color:var(--text-primary); margin:0 0 12px;}
  .mk-h3{font-size:18px; line-height:24px; font-weight:600; color:var(--text-primary); margin:0 0 8px;}
  .mk-lead{font-size:18px; line-height:28px; color:var(--text-secondary); max-width:60ch; margin:0 0 28px;}
  .mk-sub{font-size:18px; line-height:28px; color:var(--text-secondary); max-width:60ch; margin:0 0 40px;}
  .mk-body{font-size:15px; line-height:24px; color:var(--text-secondary); max-width:65ch; margin:0;}
  .mk-body b, .mk-key b, .mk-points b{color:var(--text-primary); font-weight:600;}
  .mk-meta{font-size:12.5px; line-height:18px; color:var(--text-muted); margin:0;}
  .mk-cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 16px;}
  .mk-cta-row button{height:44px; padding:0 20px; font-size:15px; font-weight:600;}
  /* Inert illustration controls look like the product's, do nothing, and say nothing (spec ruling 5). */
  [inert], [inert] *{pointer-events:none;}
  .mk-btn-look{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 16px; border-radius:var(--r-control);
    font-size:14px; font-weight:600; white-space:nowrap;}
  .mk-btn-look.primary{background:var(--brand-600); color:var(--text-on-accent); border:1px solid var(--brand-600);}

  /* ---- Hero: the Switching page's; the landing page's own is .lp-hero, below ---- */
  .mk-hero{padding-top:80px;}
  .mk-player{margin:0;}
  .mk-player-page{background:var(--surface-default); border:1px solid var(--border-strong); border-radius:var(--r-card); overflow:hidden;}
  .mk-player-page .resp-page{width:auto; padding:20px 20px 16px; box-shadow:none; border:none; max-width:none; margin:0;}
  .mk-player-page .resp-survey-hd{margin-bottom:16px;}
  .mk-player-page .survey-doc-title{margin:0 0 6px; line-height:30px;}
  .mk-player-page .survey-doc-desc{font-size:14px; line-height:21px;}
  .mk-player-page .resp-qlabel{font-size:16px; line-height:22px;}
  .mk-player-page .actions{display:flex; justify-content:flex-end; margin-top:16px;}
  .mk-sheet-scroll{margin-top:48px;}
  .mk-sheet{position:relative; background-color:var(--surface-canvas); border:1px solid var(--border-strong); border-radius:var(--r-card);
    padding:24px; overflow:hidden; box-sizing:border-box;
    background-image:
      linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
      linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
    background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;}
  .mk-hero-sheet{width:1200px; height:536px;} /* 1:1; it fits at ≥1280px and scrolls inside .mk-sheet-scroll below that (landing-redesign §2.4) */
  .mk-tblock{display:inline-flex; width:auto; min-width:0; margin:0;}
  .mk-tblock .tb-name{max-width:none;}
  .mk-tblock .tb-lbl{column-gap:8px;}
  .mk-example-tag{color:var(--text-muted);}
  .mk-graph{position:relative; width:1152px; height:432px; margin-top:16px;}
  .mk-wires{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
  .mk-wires path{fill:none; stroke:var(--wire); stroke-width:2px;}
  .mk-wires path.default{stroke-dasharray:5px 4px;}
  .mk-keynote{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; box-sizing:border-box; flex:none;
    background:var(--surface-default); border:1px solid var(--text-primary); border-radius:var(--r-chip);
    font-size:11px; line-height:1; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text-primary);}
  .mk-graph .mk-keynote{position:absolute; z-index:3;}
  .mk-swipe{display:none;}
  .mk-key{list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px;}
  .mk-key li{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:20px; color:var(--text-secondary);}
  .mk-provenance{margin-top:16px;}

  /* ---- Cards (the Switching page's three steps) ---- */
  .mk-sheets{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px;}
  .mk-card{background:var(--surface-default); border:1px solid var(--border-strong); border-radius:var(--r-card); padding:24px 24px 20px; min-width:0;}
  .mk-card-lbl{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-muted); margin-bottom:12px;}

  /* ---- §4 Analysis ---- */
  .mk-points{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px;}
  .mk-points li{display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:24px; color:var(--text-secondary);}
  .mk-points li > .nf-i{color:var(--text-secondary); flex:none; margin-top:4px;}
  .mk-analysis-fig{margin:0; min-width:0;}
  .mk-analysis-cards{display:flex; flex-direction:column; gap:16px;}
  .mk-analysis-cards .q-card{margin:0;}
  .mk-analysis-fig figcaption{margin-top:12px;}

  /* ---- §8 CTA ---- */
  .mk-cta{background:var(--surface-default); border-top:1px solid var(--border-strong); border-bottom:1px solid var(--border-strong); padding:64px 0;}
  .mk-cta .mk-sub{margin-bottom:28px;}

  /* ---- Pricing ---- */
  .mk-pricing{padding-bottom:48px;}
  .mk-pricing .mk-sub{font-size:16px; line-height:26px;}
  .mk-pricing-cta{margin:32px 0 0;}

  /* ---- §9 Footer: navy ---- */
  .pub-footer2{background:var(--shell-bg);}
  .pf-inner{max-width:1200px; margin:0 auto; padding:48px 32px 24px; box-sizing:content-box; display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px;}
  .pf-brand .brand-word{color:var(--shell-text-strong); font-size:17px; font-weight:600;}
  .pf-brand p{font-size:13px; line-height:20px; color:var(--shell-text-muted); margin:12px 0 0;}
  .pf-col{display:flex; flex-direction:column; gap:2px;}
  .pf-col .tb-lbl{color:var(--shell-text-muted); margin-bottom:8px;}
  .pf-col button{background:none; border:none; padding:5px 0; font-size:14px; color:var(--shell-text); justify-content:flex-start; text-align:left;
    transition:color var(--dur-1) var(--ease-step);}
  .pf-col button:hover{color:var(--shell-text-strong); background:none; border:none;}
  .pf-col button:focus-visible{outline:2px solid var(--shell-focus); outline-offset:2px;}
  .pf-bottom{max-width:1200px; width:calc(100% - 64px); margin:0 auto; padding:16px 0 32px; box-sizing:border-box; font-size:12.5px; color:var(--shell-text-muted); border-top:1px solid var(--shell-line);}

  /* ---- Legal pages: a document, not a hero ---- */
  .pub-legal{max-width:72ch; margin:0 auto; padding:64px 32px 96px;}
  .pub-legal h1{font-size:32px; line-height:38px; font-weight:700; letter-spacing:-0.015em; margin:0 0 6px; color:var(--text-primary);}
  .pub-legal .legal-meta{font-size:12.5px; color:var(--text-muted); margin:0 0 24px;}
  .pub-legal h2{font-size:20px; line-height:26px; font-weight:600; margin:36px 0 10px; color:var(--text-primary);}
  .pub-legal h3{font-size:15px; line-height:22px; font-weight:600; margin:22px 0 6px;}
  .pub-legal p, .pub-legal li{font-size:15px; line-height:26px; color:var(--text-secondary);}
  .pub-legal p{margin:0 0 14px;}
  .pub-legal ul{margin:0 0 14px; padding-left:20px;}
  .pub-legal li{margin-bottom:6px;}
  .pub-legal strong{color:var(--text-primary); font-weight:600;}
  .legal-note{display:flex; gap:12px; align-items:flex-start; background:var(--surface-default); border:1px solid var(--border-strong); border-left:3px solid var(--warning-fg);
    border-radius:var(--r-card); padding:16px 18px; margin:0 0 32px;}
  .legal-note .nf-i{color:var(--warning-fg); flex:none; margin-top:3px;}
  .legal-note p{font-size:14px; line-height:22px; margin:0;}

  .link-inline{background:none; border:none; padding:0; font:inherit; color:var(--brand-600); text-decoration:underline; cursor:pointer;}
  .link-inline:hover{background:none; border:none; color:var(--brand-700);}
  .link-inline:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px; border-radius:var(--r-chip);}


  /* ============================== RESPONSIVE ============================== */
  @media (max-width:959px){
    .mk-sheets{grid-template-columns:1fr; max-width:560px;}
  }
  /* Nav: the links and Log in move into a drop-down behind #pubMenuBtn (audit B1 behaviour). */
  @media (max-width:879px){
    .pub-nav{gap:12px; padding:0 20px;}
    .pub-nav .brand-lockup{margin-right:auto;}
    .pub-nav > .pub-primary-cta{height:40px; padding:0 16px;}
    .pub-menu-btn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid transparent;
      background:transparent; color:var(--shell-text-strong); border-radius:var(--r-control);}
    .pub-menu-btn:hover{background:var(--shell-raised); border-color:var(--shell-line); color:var(--shell-text-strong);}
    .pub-menu{display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column; background:var(--shell-raised); border-bottom:1px solid var(--shell-line);
      box-shadow:var(--shadow-2); padding:8px 20px 16px; max-height:calc(100vh - 60px); overflow-y:auto;}
    .pub-menu.open{display:flex;}
    .pub-menu .pub-link{display:flex; align-items:center; justify-content:flex-start; min-height:48px; padding:0 4px; font-size:15px; text-align:left;}
    .pub-menu .pub-link.active::after{display:none;}
    .pub-menu .spacer{display:none;}
    .pub-menu #pubNavLogin{margin-top:8px; padding-top:16px; border-top:1px solid var(--shell-line); border-left:0; border-right:0; border-bottom:0; border-radius:0;
      min-height:60px; height:auto; justify-content:flex-start; padding-left:4px; font-size:15px; width:100%; background:transparent;}
    .pf-col{gap:0;}
    .pf-col button{min-height:44px; padding:0; display:flex; align-items:center;}
  }
  @media (max-width:760px){
    .mk-section{padding:64px 0;}
    .mk-hero{padding-top:48px;}
    .mk-wrap{padding-left:20px; padding-right:20px;}
    .mk-h1{font-size:34px; line-height:38px;}
    .mk-h2{font-size:26px; line-height:31px;}
    .mk-lead, .mk-sub{font-size:16px; line-height:25px;}
    .mk-sub{margin-bottom:32px;}
    .mk-key{grid-template-columns:1fr; gap:12px;}
    .mk-cta-row{flex-direction:column; align-items:stretch;}
    .mk-cta-row button{width:100%;}
    .mk-cta{padding:48px 0;}
    .pf-inner{grid-template-columns:1fr; gap:24px; padding:36px 20px 20px;}
    .pf-bottom{width:calc(100% - 40px); padding:16px 0 24px;}
    .pub-legal{padding:40px 20px 72px;}
    .pub-legal h1{font-size:28px; line-height:34px;}
    .legal-note{padding:14px 16px;}
  }

  /* ============================== SWITCHING PAGE (spec switch-page.md) ============================== */
  .sw-hero-copy{max-width:680px;}
  .sw-points{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 48px; margin-top:32px;}
  .sw-detail{margin:40px 0 0;}
  .sw-sheet{height:auto; padding:24px;}
  .sw-pair{display:grid; grid-template-columns:360px 16px minmax(0, 1fr); gap:16px; align-items:start;}
  .sw-lbl{margin-bottom:8px;}
  .imp-ta.sw-src{height:auto; resize:none; white-space:pre-wrap; cursor:default;} /* beats .imp-ta (15-import.css loads later) */
  .sw-line{display:block; min-height:1.7em;}
  .sw-nb{white-space:nowrap;}
  .sw-arrow{color:var(--text-muted); margin-top:34px; display:flex;}
  .sw-gf-sheet .gf-h:first-child{margin-top:0;}
  .sw-cap{margin-top:12px;}
  .sw-try{margin-top:24px;}
  .sw-try-note{margin-top:8px;}
  .sw-moves{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; margin-top:32px; align-items:start;}
  .sw-list{background:var(--surface-default); border:1px solid var(--border-strong); border-radius:var(--r-card); overflow:hidden;}
  .sw-list-hd{display:flex; align-items:center; gap:8px; height:44px; padding:0 16px; border-bottom:1px solid var(--border-default);
    font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); letter-spacing:.08em; text-transform:uppercase; color:var(--text-primary);}
  .sw-list-in .sw-list-hd .nf-i{color:var(--success-fg);}
  .sw-list-change .sw-list-hd .nf-i{color:var(--warning-fg);}
  .sw-list-out .sw-list-hd .nf-i{color:var(--text-muted);}
  .sw-list ul{list-style:none; margin:0; padding:0;}
  .sw-list li{padding:12px 16px; font-size:14px; line-height:22px; color:var(--text-secondary); border-top:1px solid var(--border-default);}
  .sw-list li:first-child{border-top:none;}
  .sw-scope{display:block; font-size:12.5px; line-height:18px; color:var(--text-muted);}
  .sw-fine{margin-top:24px; display:flex; flex-direction:column; gap:4px;}
  .sw-fine .mk-meta{margin:0;}
  .sw-landing-link{margin-top:4px;}
  @media (max-width:959px){
    .sw-points, .sw-moves{grid-template-columns:1fr;}
    .sw-moves{max-width:560px;}
    .sw-pair{grid-template-columns:minmax(0, 1fr); gap:24px;}
    .sw-arrow{display:none;}
  }
  @media (max-width:760px){
    .sw-sheet{padding:12px;}
    .imp-ta.sw-src{font-size:13px;}
  }

  /* ============================== LANDING PAGE (binding spec docs/specs/landing-redesign.md) ==============================
     One goal: open the demo. Bold comes from five things and nothing else — white 88px type on
     ink, one photograph, a paper sheet lapping over the ink edge, the graph drawing itself, and
     ruled strips and schedules where another page would use cards. No shadows, no orange, no
     gradient except the photograph's scrims. Ink is used twice: the hero and the final call. */
  .lp-hero{padding:0; border-bottom:none;}
  .lp-ink{position:relative; background:var(--shell-bg); overflow:hidden; padding:72px 0 224px;}
  .lp-ink-copy{position:relative; z-index:1;}
  /* the photograph, shown whole at the right; three scrims melt its left, top and bottom into the ink */
  /* --lp-clip: how much of the picture's top the ink's own height cuts off (it is taller than the ink
     allows from about 1297px up); the top scrim starts opaque over exactly that, so the picture never
     shows a cut edge under the nav. It bleeds off the right edge up to 1920px (Guardian review). */
  .lp-ink-img{position:absolute; bottom:168px; right:max(0px, calc(50% - 960px)); width:min(1100px, 76vw); aspect-ratio:2752 / 1536; pointer-events:none;
    --lp-clip:max(0px, calc(min(1100px, 76vw) * 0.5581 - 550px));}
  .lp-ink-img img{display:block; width:100%; height:100%;}
  .lp-ink-img::after{content:""; position:absolute; inset:0;
    background:
      linear-gradient(to right, var(--shell-bg) 0%, var(--shell-bg-clear) 36%),
      linear-gradient(to bottom, var(--shell-bg) var(--lp-clip), var(--shell-bg-clear) calc(var(--lp-clip) + 14%)),
      linear-gradient(to top, var(--shell-bg) 0%, var(--shell-bg-clear) 14%);}
  @media (min-width:1921px){
    .lp-ink-img::after{background:
      linear-gradient(to right, var(--shell-bg) 0%, var(--shell-bg-clear) 36%),
      linear-gradient(to bottom, var(--shell-bg) var(--lp-clip), var(--shell-bg-clear) calc(var(--lp-clip) + 14%)),
      linear-gradient(to top, var(--shell-bg) 0%, var(--shell-bg-clear) 14%),
      linear-gradient(to left, var(--shell-bg) 0%, var(--shell-bg-clear) 16%);}
  }
  .lp-h1{font-size:88px; line-height:88px; font-weight:700; letter-spacing:-0.03em; color:var(--shell-text-strong); margin:0 0 28px;}
  .lp-lead{font-size:20px; line-height:30px; color:var(--shell-text); max-width:600px; margin:0 0 36px;}
  .lp-cta-row{display:flex; align-items:center; gap:24px; margin:0 0 16px;}
  button.lp-btn{height:56px; padding:0 28px; font-size:17px; font-weight:600; border-radius:var(--r-control);
    background:var(--brand-600); border:1px solid var(--brand-600); color:var(--text-on-accent);}
  button.lp-btn:hover{background:var(--brand-700); border-color:var(--brand-400);} /* the lighter border keeps the button's edge on ink */
  button.lp-btn:focus-visible{outline:2px solid var(--shell-focus); outline-offset:3px;}
  button.lp-btn-light{height:44px; padding:0 20px; font-size:15px; font-weight:600;}
  button.lp-link{background:none; border:none; padding:0; min-height:44px; display:inline-flex; align-items:center; font-size:15px; font-weight:600;
    color:var(--shell-text-strong); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--shell-marker); cursor:pointer;}
  button.lp-link:hover{background:none; border:none; color:var(--shell-text-strong); text-decoration-color:var(--shell-text-strong);}
  button.lp-link:focus-visible{outline:2px solid var(--shell-focus); outline-offset:3px; border-radius:var(--r-control);}
  .lp-cue{font-size:13px; line-height:20px; color:var(--shell-text-muted); margin:0;}
  .lp-cue-phone{display:none;}

  /* the sheet laps 168px up over the ink: contrast and a hairline separate them, never a shadow */
  .lp-sheetwrap{margin-top:-168px; position:relative; padding-bottom:72px;}
  .lp-sheetwrap .mk-sheet-scroll{margin-top:0;}
  .lp-control{display:flex; align-items:center; gap:16px; margin-top:16px; min-height:32px;}
  #mkAnimSlot:empty{display:none;} /* no control (reduced motion, narrow): the caption starts at the sheet's edge */
  button.lp-anim-btn{height:32px; padding:0 12px; gap:6px; font-size:13px; font-weight:600; flex:none;}
  .lp-pathcap{font-size:14px; line-height:22px; min-height:22px; color:var(--text-secondary); margin:0;}
  /* a respondent's path: the product's blue, as an outline and a heavier wire — no glow, no dot */
  .mk-graph .node.lit{outline:2px solid var(--brand-600); outline-offset:0;}
  .mk-wires path.mk-lit{stroke:var(--brand-600); stroke-width:3px; fill:none;}
  .mk-wires path.edge.default.lit{stroke:var(--brand-600); transition:stroke var(--dur-2) var(--ease-step);}
  .mk-graph .node{transition:outline-color var(--dur-1) var(--ease-step);}

  /* facts: a ruled strip, four cells */
  .lp-facts-sec{padding:48px 0;}
  .lp-facts{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); background:var(--surface-default); border:1px solid var(--border-strong); border-radius:var(--r-card); overflow:hidden;}
  .lp-fact{padding:20px 24px; min-width:0; border-left:1px solid var(--border-default);}
  .lp-fact:first-child{border-left:none;}
  .lp-fact-top{display:flex; flex-direction:column; gap:6px;}
  .lp-fact-fig{font-size:40px; line-height:44px; font-weight:600; color:var(--text-primary); font-variant-numeric:proportional-nums;}
  .lp-fact-lbl, .lp-tag{font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);}
  .lp-fact-det{font-size:13px; line-height:20px; color:var(--text-secondary); margin:6px 0 0;}

  /* light sections */
  .lp-section{padding:120px 0;}
  .lp-h2{font-size:44px; line-height:48px; font-weight:700; letter-spacing:-0.02em; color:var(--text-primary); margin:0 0 48px; max-width:18ch; text-wrap:balance;}
  .lp-h2-wide{max-width:24ch; margin-bottom:12px;}
  .lp-sub{font-size:18px; line-height:28px; color:var(--text-secondary); margin:0 0 48px;}
  .lp-h3{font-size:20px; line-height:26px; font-weight:600; color:var(--text-primary); margin:0 0 8px;}
  .lp-body{font-size:16px; line-height:26px; color:var(--text-secondary); margin:0; max-width:58ch;}
  .lp-body-lg{font-size:18px; line-height:28px; color:var(--text-secondary); margin:0 0 20px;}
  .lp-body-lg.lp-strong{color:var(--text-primary); font-weight:600; margin-bottom:0;}
  .lp-problem{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); column-gap:96px; align-items:center;}
  .lp-problem .lp-h2{margin-bottom:24px;}
  .lp-figure{margin:0; min-width:0;}
  .lp-figure img{display:block; width:100%; height:auto; aspect-ratio:5 / 4; border:1px solid var(--border-strong); border-radius:var(--r-card); background:var(--surface-sunken);}
  .lp-figure figcaption{margin-top:12px;}
  .lp-tag{margin-right:8px;}
  .lp-how{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; align-items:start;}
  .lp-how .lp-h2{margin:0;}
  .lp-how-head{position:sticky; top:48px;}
  .pub-price-note{font-size:15px; line-height:24px; color:var(--text-secondary); max-width:72ch; margin:0;}
  .pub-price-note b{color:var(--text-primary); font-weight:600;}
  .pub-price-note + .pub-price-note{margin-top:16px;}
  .lp-schedule{list-style:none; margin:0; padding:0;}
  .lp-schedule li{display:grid; grid-template-columns:20px minmax(0, 1fr); gap:16px; padding:24px 0; border-top:1px solid var(--border-strong);}
  .lp-schedule li:last-child{border-bottom:1px solid var(--border-strong);}
  .lp-schedule .mk-keynote{margin-top:3px;}
  .lp-proof{display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:48px; align-items:start;}
  .lp-proof .mk-player{max-width:360px; width:100%;}
  .lp-proof figcaption{margin-top:12px;}
  .lp-proof-cta{display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:40px;}
  .lp-qa-row{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; padding:24px 0; border-top:1px solid var(--border-strong);}
  /* who makes it (spec about-maker): the Q&A rows' 5/7 grid, so the copy lines up with the answers above */
  .lp-maker{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:48px; align-items:start;}
  .lp-maker .lp-h2{margin:0;}
  .lp-maker-copy{max-width:600px;}
  .lp-sig{display:inline-block; min-width:240px; margin:32px 0 0; padding-top:16px; border-top:1px solid var(--border-strong);}
  .lp-sig-name{display:block; font-size:16px; line-height:24px; font-weight:600; color:var(--text-primary);}
  .lp-sig-role{display:block; font-size:15px; line-height:22px; color:var(--text-secondary);}
  .lp-qa-row:last-child{border-bottom:1px solid var(--border-strong);}
  .lp-qa-row .lp-h3{margin:0;}

  /* the final call: ink, type, one button */
  .lp-final{background:var(--shell-bg); padding:120px 0; border-bottom:1px solid var(--shell-line);}
  .lp-final-h2{font-size:64px; line-height:66px; font-weight:700; letter-spacing:-0.025em; color:var(--shell-text-strong); margin:0 0 36px; text-wrap:balance;}
  .lp-final-switch{font-size:13px; line-height:20px; color:var(--shell-text); margin:24px 0 0;}
  button.lp-link.lp-link-sm{display:inline; min-height:0; font-size:13px;}
  .lp-final-switch .lp-link-sm{margin-left:4px;}

  /* interim pricing: the planned plans, named and not priced (§1.10) */
  .lp-plans{list-style:none; margin:0 0 32px; padding:0; max-width:720px;}
  .lp-plans li{display:grid; grid-template-columns:140px minmax(0, 1fr) auto; gap:16px; align-items:baseline; padding:16px 0; border-top:1px solid var(--border-strong);}
  .lp-plans li:last-child{border-bottom:1px solid var(--border-strong);}
  .lp-plan-name{font-size:18px; line-height:24px; font-weight:600; color:var(--text-primary);}
  .lp-plan-desc{font-size:15px; line-height:24px; color:var(--text-secondary);}
  .lp-plans .lp-tag{margin:0;}

  @media (max-width:1279px){
    /* the 1200px sheet no longer fits: it scrolls inside its own region, whole, never clipped */
    .mk-sheet-scroll{overflow-x:auto; overscroll-behavior-x:contain; border-radius:var(--r-card);}
    .mk-sheet-scroll:focus-visible{outline:2px solid var(--brand-600); outline-offset:2px;}
    .mk-swipe{display:block; margin-top:8px;}
  }
  @media (min-width:880px) and (max-width:1240px){
    .lp-h2{font-size:36px; line-height:40px;}
  }
  @media (max-width:1240px){
    .lp-h1{font-size:72px; line-height:74px;}
    .lp-lead{font-size:18px; line-height:28px; max-width:440px;}
    .lp-cue{max-width:400px;}
  }
  @media (max-width:1000px){
    .lp-h1{font-size:60px; line-height:62px; letter-spacing:-0.025em;}
    .lp-lead{max-width:400px;}
  }
  @media (max-width:959px){
    .lp-facts{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .lp-fact:nth-child(odd){border-left:none;}
    .lp-fact:nth-child(n+3){border-top:1px solid var(--border-default);}
    .lp-problem, .lp-how, .lp-proof{grid-template-columns:minmax(0, 1fr); gap:32px;}
    .lp-qa-row{grid-template-columns:minmax(0, 1fr); gap:8px;}
    .lp-maker{grid-template-columns:minmax(0, 1fr); gap:32px;}
  }
  @media (max-width:879px){
    /* stacked hero: the photograph first, flush under the nav, then the words */
    .lp-ink{display:flex; flex-direction:column; padding:0 0 72px;}
    .lp-ink-img{order:-1; position:relative; bottom:auto; right:auto; width:100%; height:clamp(180px, 51vw, 240px); aspect-ratio:auto; overflow:hidden; margin-bottom:24px;}
    .lp-ink-img img{width:172%; max-width:none; height:auto; margin-left:-72%; margin-top:-14%;}
    .lp-ink-img::after{background:linear-gradient(to bottom, var(--shell-bg-clear) 55%, var(--shell-bg) 100%);}
    .lp-h1{font-size:clamp(36px, 11.8vw, 46px); line-height:1.04; letter-spacing:-0.02em;}
    .lp-lead{font-size:17px; line-height:26px; max-width:none; margin-bottom:28px;}
    .lp-cta-row{flex-direction:column; align-items:stretch; gap:8px;}
    button.lp-btn, button.lp-btn-light{width:100%;}
    .lp-proof-cta{align-items:stretch;}
    .lp-how-head{position:static;}
    button.lp-link{justify-content:center;}
    .lp-final button.lp-link.lp-link-sm{justify-content:flex-start;}
    .lp-cue{max-width:none;}
    .lp-cue-phone{display:inline;}
    .lp-sheetwrap{margin-top:-40px;}
    .lp-section, .lp-final{padding:72px 0;}
    .lp-h2{font-size:30px; line-height:34px; margin-bottom:32px;}
    .lp-h2-wide{margin-bottom:12px;}
    .lp-sub{margin-bottom:32px;}
    .lp-h3{font-size:18px; line-height:24px;}
    .lp-body-lg{font-size:17px; line-height:26px;}
    .lp-final-h2{font-size:38px; line-height:40px;}
    .lp-control{flex-wrap:wrap;}
  }
  @media (max-width:520px){
    .lp-facts{grid-template-columns:minmax(0, 1fr);}
    .lp-fact{border-left:none;}
    .lp-fact + .lp-fact{border-top:1px solid var(--border-default);}
    .lp-fact-top{flex-direction:row; align-items:baseline; gap:10px;}
    .lp-plans li{grid-template-columns:minmax(0, 1fr) auto;}
    .lp-plan-desc{grid-column:1 / -1; grid-row:2;}
  }

  /* ---- shown only where it is true (spec billing §9, §12): .bill-on where plans can be bought on
     this server, .acct-on where an account can be made; the static page is the other one ---- */
  body:not([data-nf-billing="1"]) .bill-on{display:none !important;}
  body[data-nf-billing="1"] .bill-off{display:none !important;}
  body:not([data-nf-accounts="1"]) .acct-on{display:none !important;}
  body[data-nf-accounts="1"] .acct-off{display:none !important;}
  .lp-cur{margin:0 0 20px;}
  .lp-price{font-size:15px; line-height:24px; font-weight:600; color:var(--text-primary); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
  .lp-or{color:var(--text-secondary);}
  .lp-plans .lp-tag:empty{display:none;}
  .lp-sizes{grid-column:2 / -1; border-collapse:collapse; width:100%; max-width:420px; margin-top:4px; font-size:14px; color:var(--text-primary);}
  .lp-sizes th, .lp-sizes td{height:32px; padding:0 8px 0 0; border-top:1px solid var(--border-default); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:400;}
  .lp-sizes th:first-child{text-align:left;}
  .lp-sizes th:last-child, .lp-sizes td:last-child{padding-right:0;}
  .lp-sizes thead th{border-top:0; font-size:11px; line-height:13px; font-weight:600; font-stretch:var(--stretch-label); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted);}
  .lp-sizes tbody tr:last-child th, .lp-sizes tbody tr:last-child td{border-bottom:1px solid var(--border-default);}
  @media (max-width:600px){
    .lp-price{grid-column:1 / -1; text-align:left;}
    .lp-sizes{grid-column:1 / -1;}
  }
  @media (max-width:600px){
    /* the price sits under the plan's name, then the description, then the sizes (spec billing §9.2) */
    body[data-nf-billing="1"] .lp-plans li:has(.lp-price) .lp-price{grid-row:2;}
    body[data-nf-billing="1"] .lp-plans li:has(.lp-price) .lp-plan-desc{grid-row:3;}
    body[data-nf-billing="1"] .lp-plans li:has(.lp-price) .lp-sizes{grid-row:4;}
  }
  /* Spec accounts-first §A craft fix: at 320–340px the menu button was squeezed under 44px and the
     primary button under its text. Neither shrinks now; the word mark gives way below 360px. */
  #pubMenuBtn{flex:none; width:44px;}
  #pubNavPrimary{flex:none; white-space:nowrap;}
  @media (max-width:359px){ #publicSite .pub-nav .brand-word{display:none;} }
  /* Until the boot probe has said what this server is, the page's action and the line under it are
     not shown (spec accounts-first §A): "Open the demo" must never be painted where there is no demo. */
  body.nf-booting #publicSite .pub-primary-cta, body.nf-booting #publicSite .pub-cue, body.nf-booting #publicSite .pub-demo-only, body.nf-booting #publicSite .acct-off{visibility:hidden;}
  .lp-cue{text-wrap:balance;} /* no one-word last line under the button */