/* Standalone product surface (plinthcms.com). Rendered to static HTML with no
   JavaScript and served under a strict CSP (style-src/img-src/font-src 'self'),
   so: no inline styles, no data: URIs, and only the same-origin fonts beside
   this file. No selector or token here leaks into the admin or a publication;
   every rule is scoped to this page.

   Colours live ONLY in the token blocks below (light, then dark). Brand values
   mirror the admin's tokens (--plinth-indigo #4f46e5 and its gradient) and its
   self-hosted Inter and Newsreader, so the front door and the workspace it
   leads to read as one product. */

/* ---- Fonts --------------------------------------------------------------
   The admin's latin-subset variable faces, copied beside this stylesheet by
   scripts/build-platform.mjs (relative URLs resolve against site.css). Text
   renders at once in the fallback stack and swaps when a face arrives. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader Variable";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader Variable";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
}

/* ---- Tokens ------------------------------------------------------------ */
.platform-page,
.platform-landing {
  --pl-paper: #f8f7f3;
  --pl-surface: #ffffff;
  --pl-wash: #f0efe9;
  --pl-ink: #172234;
  --pl-muted: #525d6a;
  --pl-line: #dddcd5;
  --pl-line-strong: #c3c3bb;
  --pl-brand: #4f46e5;
  --pl-brand-hover: #4239c9;
  --pl-brand-2: #7c3aed;
  --pl-brand-3: #db2777;
  --pl-on-brand: #ffffff;
  --pl-accent: #4a42d7;
  --pl-accent-soft: #ecebfb;
  --pl-accent-line: #cbc8f3;
  --pl-focus: #4f46e5;
  --pl-selection: #dcd9ff;
  --pl-selection-ink: #172234;
  --pl-header-bg: #f8f7f3eb;
  --pl-tap: #1722341f;
  --pl-shadow-brand: inset 0 1px 0 #ffffff2e, 0 1px 2px #1722341f, 0 8px 20px -8px #4f46e5a6;
  --pl-shadow-brand-hover: inset 0 1px 0 #ffffff2e, 0 1px 2px #1722341f, 0 12px 26px -10px #4f46e5bf;
  --pl-shadow-card: 0 1px 2px #1722340d;
  --pl-shadow-symbol: 0 14px 30px -14px #4f46e58c;
  --pl-gradient: linear-gradient(135deg, var(--pl-brand) 0%, var(--pl-brand-2) 55%, var(--pl-brand-3) 100%);

  /* Final call-to-action panel: a deep ink surface in both schemes. */
  --pl-panel: #19233a;
  --pl-panel-ink: #f8f7f3;
  --pl-panel-muted: #c5cbd8;
  --pl-panel-eyebrow: #c9c6f6;
  --pl-panel-line: #2c3853;
  --pl-panel-glow-1: #4f46e580;
  --pl-panel-glow-2: #db277738;
  --pl-panel-button: #f8f7f3;
  --pl-panel-button-ink: #19233a;
  --pl-panel-button-hover: #e4e1ff;
  --pl-panel-focus: #c9c4ff;

  /* Product illustration (decorative, aria-hidden). */
  --pl-art-dots: #bcc1c9;
  --pl-art-glow: #4f46e51f;
  --pl-art-shadow: #19263766;
  --pl-art-shadow-soft: #1926370f;
  --pl-art-frame: #26354a;
  --pl-art-frame-border: #314157;
  --pl-art-frame-line: #3c4b5e;
  --pl-art-frame-dot: #96a1b2;
  --pl-art-frame-text: #e4e8ee;
  --pl-art-rail-icon: #cad1dc;
  --pl-art-rail-active: #4b4f96;
  --pl-art-sheet: #ffffff;
  --pl-art-sheet-meta: #697481;
  --pl-art-saved: #3f7a55;
  --pl-art-heading: #253347;
  --pl-art-toolbar: #465263;
  --pl-art-toolbar-line: #e9ebee;
  --pl-art-toolbar-divider: #d9dce2;
  --pl-art-copy: #dce1e4;
  --pl-art-image: #efede4;
  --pl-art-hill-1: #939989;
  --pl-art-hill-2: #c4b39e;
  --pl-art-sun: #d3ba87;
  --pl-art-site-border: #c6c8c2;
  --pl-art-site-chrome: #ffffff;
  --pl-art-site-chrome-ink: #677167;
  --pl-art-site-chrome-mark: #9faba0;
  --pl-art-site-chrome-line: #e4e5df;
  --pl-art-site-canvas: #f4f0e5;
  --pl-art-site-ink: #34493e;
  --pl-art-site-em: #596c55;
  --pl-art-site-sky: #dfddc9;
  --pl-art-site-hill-1: #768570;
  --pl-art-site-hill-2: #aeb397;
  --pl-art-site-sun: #ece8d6;
  --pl-art-swatch-1: #576b58;
  --pl-art-swatch-2: #c5b394;
  --pl-art-swatch-3: #6a63d8;

  /* Product 404 (decorative numeral). */
  --pl-numeral-opacity: 0.1;

  /* Type, space, motion. */
  --pl-font-sans: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pl-font-serif: "Newsreader Variable", Newsreader, ui-serif, "Iowan Old Style", Charter, "Bitstream Charter", Georgia, Cambria, "Times New Roman", serif;
  --pl-max: 1240px;
  --pl-gutter: clamp(20px, 5vw, 48px);
  --pl-header-h: 64px;
  /* How far down the screen the sticky header reaches: what an in-page jump clears. */
  --pl-header-cover: var(--pl-header-h);
  --pl-section-y: clamp(64px, 9vw, 112px);
  --pl-radius: 8px;
  --pl-radius-lg: 14px;
  --pl-radius-xl: 20px;
  --pl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pl-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Screen only: printing from a dark-mode OS keeps dark ink on white paper. */
@media screen and (prefers-color-scheme: dark) {
  .platform-page,
  .platform-landing {
    --pl-paper: #0d1017;
    --pl-surface: #171d29;
    --pl-wash: #131822;
    --pl-ink: #eef0f6;
    --pl-muted: #aeb5c4;
    --pl-line: #252b38;
    --pl-line-strong: #3a4252;
    --pl-brand: #5a52e7;
    --pl-brand-hover: #625ae9;
    --pl-accent: #aba6f5;
    --pl-accent-soft: #1d1f3b;
    --pl-accent-line: #413e86;
    --pl-focus: #aba6f5;
    --pl-selection: #3a3775;
    --pl-selection-ink: #eef0f6;
    --pl-header-bg: #0d1017eb;
    --pl-tap: #eef0f629;
    --pl-shadow-brand: inset 0 1px 0 #ffffff29, 0 1px 2px #00000066, 0 10px 24px -10px #5a52e7cc;
    --pl-shadow-brand-hover: inset 0 1px 0 #ffffff29, 0 1px 2px #00000066, 0 14px 30px -10px #5a52e7e6;
    --pl-shadow-card: 0 1px 2px #00000040;
    --pl-shadow-symbol: 0 16px 36px -14px #5a52e7b3;

    --pl-panel: #141a2b;
    --pl-panel-line: #2b3350;
    --pl-panel-glow-1: #5a52e773;
    --pl-panel-glow-2: #db277730;

    --pl-art-dots: #333b4a;
    --pl-art-glow: #5a52e726;
    --pl-art-shadow: #000000b3;
    --pl-art-shadow-soft: #00000059;
    --pl-art-frame: #1d2739;
    --pl-art-frame-border: #34425a;
    --pl-art-frame-line: #313e53;
    --pl-art-rail-active: #45498f;
    --pl-art-sheet: #eceef3;
    --pl-art-toolbar-line: #dcdfe5;
    --pl-art-copy: #d0d5db;
    --pl-art-image: #e3e0d5;
    --pl-art-site-border: #3a4252;
    --pl-art-site-chrome: #e9e8e2;
    --pl-art-site-chrome-line: #d6d6cf;
    --pl-art-site-canvas: #e9e4d6;
    --pl-art-site-sky: #d4d1bc;
    --pl-art-site-sun: #e2ddc8;
    --pl-art-swatch-3: #8a84f0;

    --pl-numeral-opacity: 0.16;
  }
}

/* ---- Base -------------------------------------------------------------- */
body.platform-page { margin: 0; background: var(--pl-paper); }
@media (prefers-reduced-motion: no-preference) {
  html:has(> body.platform-page) { scroll-behavior: smooth; }
}

.platform-landing {
  color: var(--pl-ink);
  background: var(--pl-paper);
  min-height: 100vh;
  font-family: var(--pl-font-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-kerning: normal;
  font-feature-settings: "cv11", "ss01";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
  /* The hero illustration's tilted site window leans into the page gutter by
     design, and mobile browsers count its rotated contents (clipped on screen
     by their own frames) toward the page width, so a phone could pan the page
     a few pixels sideways. Clip at the page's own edge, which is the screen's:
     nothing visible is cut, and `clip` (unlike `hidden`) makes no scroll
     container, so the sticky header keeps sticking. */
  overflow-x: clip;
  color-scheme: light;
}
@media screen and (prefers-color-scheme: dark) { .platform-landing { color-scheme: dark; } }

.platform-landing, .platform-landing *, .platform-landing *::before, .platform-landing *::after { box-sizing: border-box; }
.platform-landing :where(h1, h2, h3, p, figure) { margin: 0; }
.platform-landing :where(a) { color: inherit; text-decoration: none; }
/* Script-free pages cannot opt iOS into :active, so links keep a tinted native
   tap highlight as their press feedback there; :active covers everywhere else. */
.platform-landing :where(a) { -webkit-tap-highlight-color: var(--pl-tap); }
.platform-landing :where(svg) { display: block; flex-shrink: 0; }
.platform-landing :where(h1, h2, h3) { text-wrap: balance; }
.platform-landing :where(p) { text-wrap: pretty; }
.platform-landing :where(a):focus-visible { outline: 2px solid var(--pl-focus); outline-offset: 4px; border-radius: 6px; }
.platform-landing :where(#main-content):focus { outline: none; }
.platform-landing :where(section[id], #main-content) { scroll-margin-top: calc(var(--pl-header-cover) + 16px); }
/* A full-bleed band draws its own top edge and has room above its heading,
   so a jump lands it flush under the header, its hairline tucked beneath the
   header's, rather than a strip of page and a second rule below the first. */
.platform-landing .pl-features-section { scroll-margin-top: var(--pl-header-cover); }
.platform-landing ::selection { color: var(--pl-selection-ink); background: var(--pl-selection); }
.platform-landing .pl-container { width: min(var(--pl-max), 100% - 2 * var(--pl-gutter)); margin-inline: auto; }

/* A full-width bar over the header: it never sits on the brand or the nav. */
.platform-landing .pl-skip-link {
  position: absolute; z-index: 40; inset: 0 0 auto;
  display: flex; align-items: center; justify-content: center; min-height: var(--pl-header-h);
  padding: 8px var(--pl-gutter);
  background: var(--pl-brand); color: var(--pl-on-brand); font-size: 0.875rem; font-weight: 650;
  translate: 0 -100%;
}
.platform-landing .pl-skip-link:focus { translate: 0 0; }
.platform-landing .pl-skip-link:focus-visible { outline-color: var(--pl-on-brand); outline-offset: -6px; border-radius: 0; }

/* Shared typographic atoms. */
.platform-landing .pl-eyebrow {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.16em;
}
.platform-landing .pl-eyebrow > span { width: 6px; height: 6px; flex: 0 0 6px; margin-top: calc(0.75em - 3px); border-radius: 50%; background: var(--pl-gradient); }
.platform-landing h2 {
  --pl-h2-size: clamp(1.75rem, 1rem + 3.4vw, 3rem);
  --pl-fit: 9.2;
  font-family: var(--pl-font-serif); font-weight: 400;
  font-size: var(--pl-h2-size); line-height: 1.1; letter-spacing: -0.028em;
}
/* Each display heading is two <br>-split lines, and balance cannot reflow
   across a <br>. So its size is also capped by its own column: --pl-fit is
   the longest line's width in em in the widest common fallback serif (DejaVu
   and Noto Serif run about 23% wider than Newsreader), so no line strands a
   word, whatever the viewport, the layout beside it, the font in use or the
   reader's default text size (all type is in rem, so that setting applies).
   The rem floor keeps a heading well above body size in a narrow column. */
.platform-landing :is(.pl-section-heading > div, .pl-foundation-heading, .pl-start-copy) { container-type: inline-size; }
@supports (width: 1cqi) {
  .platform-landing h2 { font-size: max(1.375rem, min(var(--pl-h2-size), 100cqi / var(--pl-fit))); }
}

/* ---- Header (sticky, translucent) --------------------------------------- */
.platform-landing .pl-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--pl-header-bg);
  border-bottom: 1px solid var(--pl-line);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .platform-landing .pl-header { -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
}
/* Brand and nav share one row; only at a very large default text size does
   the nav wrap beneath the brand rather than break a label or scroll. */
.platform-landing .pl-header-inner { min-height: var(--pl-header-h); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 16px; }
/* The wordmark is a logo, drawn at a fixed size like the mark beside it (which
   is sized in its em); reading text everywhere else is in rem. */
.platform-landing .pl-brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 27px; font-weight: 750; line-height: 1; letter-spacing: -0.055em;
}
.platform-landing .pl-brand > svg { width: 0.74em; height: 0.85em; }
.platform-landing .pl-brand-dot { color: var(--pl-accent); }
.platform-landing .pl-header nav { display: flex; gap: 8px; align-items: center; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.platform-landing .pl-nav-features { display: none; }
.platform-landing .pl-nav-login {
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 14px 0 16px;
  border: 1px solid var(--pl-line-strong); border-radius: var(--pl-radius); background: var(--pl-surface);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.platform-landing .pl-nav-login svg, .platform-landing .pl-footer-login svg { width: 16px; height: 16px; transition: translate 200ms var(--pl-ease); }

/* ---- Hero --------------------------------------------------------------- */
.platform-landing .pl-hero { display: grid; gap: 48px; padding-block: clamp(40px, 7vw, 88px) clamp(40px, 6vw, 72px); }
.platform-landing .pl-hero-copy { position: relative; z-index: 1; min-width: 0; container-type: inline-size; }
.platform-landing .pl-hero h1 {
  --pl-h1-size: clamp(2.875rem, 0.25rem + 13.2vw, 5.25rem);
  --pl-fit: 5.2;
  margin-block: 22px 22px;
  font-family: var(--pl-font-serif); font-weight: 400;
  font-size: var(--pl-h1-size); line-height: 1.02; letter-spacing: -0.042em;
}
/* The headline's three <br>-split lines get the display headings' column cap
   (5.2em: "Your ideas." in DejaVu Serif), so a larger default text size never
   strands "of" on a line of its own. */
@supports (width: 1cqi) {
  .platform-landing .pl-hero h1 { font-size: max(2rem, min(var(--pl-h1-size), 100cqi / var(--pl-fit))); }
}
.platform-landing .pl-hero h1 em {
  color: var(--pl-accent); font-weight: 400; padding-inline-end: 0.06em;
  background-image: var(--pl-gradient); background-repeat: no-repeat;
  background-position: 0.04em 94%; background-size: calc(100% - 0.1em) 0.05em;
}
.platform-landing .pl-hero-description { max-width: 34em; color: var(--pl-muted); font-size: clamp(1rem, 0.8125rem + 0.4vw, 1.125rem); line-height: 1.7; }
.platform-landing .pl-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 32px; }
.platform-landing .pl-access-note {
  margin-top: 24px; padding-left: 14px; border-left: 2px solid var(--pl-accent-line);
  color: var(--pl-muted); font-size: 0.8125rem; line-height: 1.7;
}

/* Buttons and links. */
.platform-landing .pl-button {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px 20px 12px 22px; border: 1px solid transparent; border-radius: var(--pl-radius);
  font-size: 0.9375rem; font-weight: 650; line-height: 1.4; letter-spacing: -0.005em;
  transition: background-color 180ms ease, box-shadow 180ms ease, translate 180ms var(--pl-ease), scale 120ms ease;
}
.platform-landing .pl-button svg { width: 20px; height: 20px; transition: translate 200ms var(--pl-ease); }
.platform-landing .pl-button-primary { color: var(--pl-on-brand); background: var(--pl-brand); box-shadow: var(--pl-shadow-brand); }
/* Text links underline their label only: the arrow beside it is a separate
   flex item, and an underline under both breaks into two segments. */
.platform-landing :is(.pl-text-link, .pl-footer-login) {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 0.875rem; font-weight: 600;
  transition: color 160ms ease;
}
.platform-landing .pl-text-link { align-self: flex-start; }
.platform-landing .pl-link-label {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--pl-line-strong);
  transition: text-decoration-color 160ms ease;
}
.platform-landing .pl-text-link-arrow { display: inline-block; font-size: 1.125rem; line-height: 1; transition: translate 200ms var(--pl-ease); }

/* ---- Product illustration ------------------------------------------------
   Drawn once on a 600 × 540 canvas and scaled as a unit with container query
   units, so the composition is identical from 280px to 630px wide. 1 --u is
   one canvas pixel. */
.platform-landing .pl-workspace { min-width: 0; width: 100%; container-type: inline-size; }
.platform-landing .pl-workspace-art {
  --u: 0.58px;
  position: relative; isolation: isolate;
  width: calc(600 * var(--u)); height: calc(540 * var(--u)); max-width: 100%;
  margin-inline: auto; line-height: 1.4;
}
@supports (width: 1cqw) {
  .platform-landing .pl-workspace-art { --u: min(1.05px, 100cqw / 600); }
}
.platform-landing .pl-workspace-art::before {
  content: ""; position: absolute; z-index: -2; inset: calc(20 * var(--u)) 0 calc(28 * var(--u));
  background-image: radial-gradient(var(--pl-art-dots) 0.8px, transparent 0.8px);
  background-size: calc(17 * var(--u)) calc(17 * var(--u));
  -webkit-mask-image: radial-gradient(ellipse, var(--pl-ink) 25%, transparent 70%);
  mask-image: radial-gradient(ellipse, var(--pl-ink) 25%, transparent 70%);
}
.platform-landing .pl-workspace-art::after {
  content: ""; position: absolute; z-index: -3; inset: 10% 0 5% 15%;
  background: radial-gradient(closest-side, var(--pl-art-glow), transparent);
}
.platform-landing .pl-orbit { position: absolute; z-index: -1; border: 1px solid var(--pl-line); border-radius: 50%; }
.platform-landing .pl-orbit-one { width: calc(390 * var(--u)); height: calc(390 * var(--u)); top: calc(15 * var(--u)); left: calc(78 * var(--u)); }
.platform-landing .pl-orbit-two { width: calc(320 * var(--u)); height: calc(320 * var(--u)); top: calc(130 * var(--u)); left: calc(158 * var(--u)); }
.platform-landing .pl-workspace-label {
  position: absolute; top: calc(2 * var(--u)); left: calc(52 * var(--u));
  display: flex; align-items: center; gap: calc(7 * var(--u));
  color: var(--pl-muted); font-size: calc(9 * var(--u)); font-weight: 650; letter-spacing: 0.22em;
}
.platform-landing .pl-workspace-label > span { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--pl-accent); }

.platform-landing .pl-editor-window {
  position: absolute; left: calc(6 * var(--u)); top: calc(41 * var(--u));
  width: calc(434 * var(--u)); height: calc(385 * var(--u));
  overflow: hidden; border: 1px solid var(--pl-art-frame-border); border-radius: calc(11 * var(--u));
  background: var(--pl-art-frame); rotate: -4deg;
  box-shadow: 0 calc(19 * var(--u)) calc(38 * var(--u)) calc(-23 * var(--u)) var(--pl-art-shadow), 0 calc(3 * var(--u)) calc(8 * var(--u)) var(--pl-art-shadow-soft);
}
.platform-landing .pl-window-bar { height: calc(36 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); padding-inline: calc(15 * var(--u)); border-bottom: 1px solid var(--pl-art-frame-line); }
.platform-landing .pl-window-bar > span:not(.pl-window-name) { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--pl-art-frame-dot); }
.platform-landing .pl-window-name { padding-left: calc(13 * var(--u)); color: var(--pl-art-frame-text); font-size: calc(8 * var(--u)); letter-spacing: 0.06em; }
.platform-landing .pl-editor-body { display: flex; height: calc(100% - 36 * var(--u)); }
.platform-landing .pl-editor-rail { width: calc(49 * var(--u)); flex: 0 0 calc(49 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u)); padding-top: calc(17 * var(--u)); color: var(--pl-art-frame-text); }
.platform-landing .pl-editor-rail > svg { width: calc(17 * var(--u)); height: calc(19 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.platform-landing .pl-rail-item { padding: calc(5 * var(--u)); border-radius: calc(4 * var(--u)); }
.platform-landing .pl-rail-item svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: var(--pl-art-rail-icon); stroke-width: 1.2; }
.platform-landing .pl-rail-active { background: var(--pl-art-rail-active); }
.platform-landing .pl-editor-sheet { flex: 1; min-width: 0; background: var(--pl-art-sheet); padding: calc(23 * var(--u)) calc(26 * var(--u)); }
.platform-landing .pl-editor-meta { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); color: var(--pl-art-sheet-meta); font-size: calc(7 * var(--u)); letter-spacing: 0.14em; }
.platform-landing .pl-draft-indicator { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); color: var(--pl-art-saved); letter-spacing: 0.02em; }
.platform-landing .pl-draft-indicator::before { content: ""; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: currentColor; }
.platform-landing .pl-editor-heading { margin-top: calc(22 * var(--u)); color: var(--pl-art-heading); font-family: var(--pl-font-serif); font-size: calc(33 * var(--u)); line-height: 1.12; letter-spacing: -0.03em; }
.platform-landing .pl-editor-heading > span { color: var(--pl-brand); }
.platform-landing .pl-editor-toolbar { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-block: calc(16 * var(--u)) calc(18 * var(--u)); padding-block: calc(6 * var(--u)); border-block: 1px solid var(--pl-art-toolbar-line); color: var(--pl-art-toolbar); font-size: calc(10 * var(--u)); }
.platform-landing .pl-toolbar-divider { height: calc(11 * var(--u)); border-left: 1px solid var(--pl-art-toolbar-divider); }
.platform-landing .pl-copy-lines { display: grid; gap: calc(5 * var(--u)); }
.platform-landing .pl-copy-lines > span { height: calc(3 * var(--u)); min-height: 1px; border-radius: 1px; background: var(--pl-art-copy); }
.platform-landing .pl-copy-lines > span:last-child { width: 72%; }
.platform-landing .pl-copy-lines-short { width: 80%; }
.platform-landing .pl-editor-image { position: relative; height: calc(56 * var(--u)); margin-block: calc(17 * var(--u)) calc(13 * var(--u)); overflow: hidden; border-radius: calc(2 * var(--u)); background: var(--pl-art-image); }
.platform-landing .pl-editor-image > div:first-child { position: absolute; left: calc(24 * var(--u)); top: calc(13 * var(--u)); width: calc(115 * var(--u)); height: calc(100 * var(--u)); border-radius: 50%; background: var(--pl-art-hill-1); }
.platform-landing .pl-editor-image > div:nth-child(2) { position: absolute; right: calc(-26 * var(--u)); top: calc(25 * var(--u)); width: calc(180 * var(--u)); height: calc(100 * var(--u)); border-radius: 50%; background: var(--pl-art-hill-2); }
.platform-landing .pl-editor-image > span { position: absolute; right: calc(52 * var(--u)); top: calc(10 * var(--u)); width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; background: var(--pl-art-sun); }

/* Editor → site: the arc leaves a port just off the editor's right edge and
   its arrowhead lands on the site window's top edge, square to its 4deg tilt.
   Strokes stay a crisp 1.25px at every scale. */
.platform-landing .pl-publish-connector {
  position: absolute; left: calc(430 * var(--u)); top: calc(80 * var(--u));
  width: calc(120 * var(--u)); height: calc(110 * var(--u)); overflow: visible;
  color: var(--pl-accent); fill: none; stroke: currentColor; stroke-width: 1.25px; stroke-linecap: round; stroke-linejoin: round;
}
.platform-landing .pl-publish-connector > * { vector-effect: non-scaling-stroke; }
.platform-landing .pl-publish-connector > circle { fill: currentColor; stroke: none; }
.platform-landing .pl-publish-path { stroke-dasharray: 3 4; }

.platform-landing .pl-site-window {
  position: absolute; right: calc(4 * var(--u)); bottom: calc(30 * var(--u)); width: calc(332 * var(--u));
  overflow: hidden; border: 1px solid var(--pl-art-site-border); border-radius: calc(8 * var(--u)); rotate: 4deg;
  box-shadow: 0 calc(21 * var(--u)) calc(38 * var(--u)) calc(-16 * var(--u)) var(--pl-art-shadow), 0 calc(2 * var(--u)) calc(5 * var(--u)) var(--pl-art-shadow-soft);
}
.platform-landing .pl-site-chrome { height: calc(25 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); padding-inline: calc(12 * var(--u)); border-bottom: 1px solid var(--pl-art-site-chrome-line); background: var(--pl-art-site-chrome); color: var(--pl-art-site-chrome-ink); font-size: calc(6 * var(--u)); letter-spacing: 0.2em; }
.platform-landing .pl-site-chrome > span:first-child { width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: var(--pl-art-site-chrome-mark); }
.platform-landing .pl-site-chrome > span:last-child { width: calc(10 * var(--u)); height: calc(5 * var(--u)); border-block: 1px solid var(--pl-art-site-chrome-mark); }
.platform-landing .pl-site-canvas { padding: calc(18 * var(--u)) calc(21 * var(--u)) calc(15 * var(--u)); background: var(--pl-art-site-canvas); color: var(--pl-art-site-ink); }
.platform-landing .pl-site-wordmark { display: flex; justify-content: space-between; align-items: center; font-family: var(--pl-font-serif); font-size: calc(14 * var(--u)); letter-spacing: -0.035em; }
.platform-landing .pl-site-wordmark > span { font-family: var(--pl-font-sans); font-size: calc(7 * var(--u)); letter-spacing: 0; }
.platform-landing .pl-site-heading { padding-block: calc(24 * var(--u)) calc(17 * var(--u)); font-family: var(--pl-font-serif); font-size: calc(32 * var(--u)); line-height: 1.05; letter-spacing: -0.04em; }
.platform-landing .pl-site-heading > em { color: var(--pl-art-site-em); }
.platform-landing .pl-site-art { position: relative; height: calc(110 * var(--u)); overflow: hidden; border-radius: 46% 46% 0 0; background: var(--pl-art-site-sky); }
.platform-landing .pl-site-art > div:first-child { position: absolute; left: calc(-24 * var(--u)); bottom: calc(-100 * var(--u)); width: calc(185 * var(--u)); height: calc(155 * var(--u)); border-radius: 50% 50% 0 0; background: var(--pl-art-site-hill-1); rotate: 22deg; }
.platform-landing .pl-site-art > div:nth-child(2) { position: absolute; right: calc(-56 * var(--u)); bottom: calc(-74 * var(--u)); width: calc(210 * var(--u)); height: calc(150 * var(--u)); border-radius: 50% 50% 0 0; background: var(--pl-art-site-hill-2); rotate: -24deg; }
.platform-landing .pl-site-art > span { position: absolute; top: calc(16 * var(--u)); left: 47%; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: var(--pl-art-site-sun); }
.platform-landing .pl-site-baseline { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); padding-top: calc(14 * var(--u)); font-size: calc(6 * var(--u)); letter-spacing: 0.13em; }
.platform-landing .pl-site-baseline > svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

.platform-landing .pl-design-chip {
  position: absolute; left: calc(24 * var(--u)); bottom: calc(29 * var(--u));
  display: flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--pl-line); border-radius: 999px; background: var(--pl-surface);
  box-shadow: 0 calc(6 * var(--u)) calc(15 * var(--u)) var(--pl-art-shadow-soft);
}
.platform-landing .pl-design-chip > span:not(:last-child) { width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; background: var(--pl-art-swatch-1); }
.platform-landing .pl-design-chip > span:nth-child(2) { background: var(--pl-art-swatch-2); }
.platform-landing .pl-design-chip > span:nth-child(3) { background: var(--pl-art-swatch-3); }
.platform-landing .pl-design-chip > span:last-child { margin-left: calc(6 * var(--u)); font-size: calc(9 * var(--u)); font-weight: 600; }

.platform-landing .pl-workspace figcaption { margin-top: 16px; text-align: center; color: var(--pl-muted); font-size: 0.8125rem; line-height: 1.5; }
.platform-landing .pl-workspace figcaption > span { display: block; margin-top: 2px; font-size: 0.71875rem; letter-spacing: 0.02em; }

/* ---- Principles ---------------------------------------------------------- */
.platform-landing .pl-principles {
  display: grid; gap: 10px; margin-block: 0; padding: 22px 0; list-style: none;
  border-top: 1px solid var(--pl-line); color: var(--pl-muted); font-size: 0.84375rem; letter-spacing: 0.01em;
}
.platform-landing .pl-principles > li { display: flex; align-items: center; gap: 12px; }
.platform-landing .pl-principles > li::before {
  content: "+"; content: "+" / "";
  display: grid; place-items: center; width: 1.4667em; height: 1.4667em; flex: 0 0 1.4667em;
  border: 1px solid var(--pl-accent-line); border-radius: 50%;
  color: var(--pl-accent); font-size: 1.1111em; font-weight: 500; line-height: 1;
}

/* ---- Features ------------------------------------------------------------ */
.platform-landing .pl-features-section { padding-block: var(--pl-section-y); background: var(--pl-wash); border-block: 1px solid var(--pl-line); }
.platform-landing .pl-section-heading { display: grid; gap: 20px; margin-bottom: clamp(32px, 4vw, 48px); }
.platform-landing .pl-section-heading h2 { margin-top: 16px; }
.platform-landing .pl-section-heading > p { max-width: 26em; color: var(--pl-muted); font-size: 1rem; line-height: 1.7; }
.platform-landing .pl-feature-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
  overflow: hidden; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-lg);
  background: var(--pl-line); box-shadow: var(--pl-shadow-card);
}
.platform-landing .pl-feature-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 2.6vw, 32px); background: var(--pl-surface); }
/* Cards side by side share row tracks, so their titles, copy and detail
   hairlines line up however each card's text wraps. */
@supports (grid-template-rows: subgrid) {
  .platform-landing .pl-feature-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
.platform-landing .pl-feature-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.platform-landing .pl-feature-icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
  border: 1px solid var(--pl-accent-line); border-radius: 12px;
  background: var(--pl-accent-soft); color: var(--pl-accent);
}
.platform-landing .pl-feature-icon > svg { width: 24px; height: 24px; }
.platform-landing .pl-feature-index { color: var(--pl-muted); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; }
.platform-landing .pl-feature-card h3 { margin-bottom: 10px; font-size: 1.1875rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.018em; }
.platform-landing .pl-feature-card p { color: var(--pl-muted); font-size: 0.90625rem; line-height: 1.7; }
.platform-landing .pl-feature-detail {
  margin-top: auto; padding-top: 24px; overflow: hidden;
  color: var(--pl-muted); font-size: 0.78125rem; line-height: 1.5; letter-spacing: 0.01em;
}
@supports (grid-template-rows: subgrid) {
  .platform-landing .pl-feature-detail { margin-top: 0; }
}
.platform-landing .pl-feature-detail::before { content: ""; display: block; height: 1px; margin-bottom: 14px; background: var(--pl-line); }
/* Items never break inside; each "·" hangs in the gap before its item. The
   list is pulled back by one gap so a line's first item sits flush and its
   separator falls outside the detail box, which clips it. */
.platform-landing .pl-detail-list { display: block; margin-inline-start: -0.8em; }
.platform-landing .pl-detail-item { position: relative; display: inline-block; margin-inline-start: 0.8em; white-space: nowrap; }
.platform-landing .pl-detail-sep { position: absolute; top: 0; inset-inline-end: 100%; width: 1.08em; text-align: center; }

/* ---- Foundation ---------------------------------------------------------- */
.platform-landing .pl-foundation { display: grid; gap: 24px; padding-block: var(--pl-section-y); }
.platform-landing .pl-foundation-symbol {
  display: grid; place-items: center; width: 64px; height: 82px;
  border-radius: 32px 32px 6px 6px; background: var(--pl-gradient);
  color: var(--pl-on-brand); box-shadow: var(--pl-shadow-symbol);
}
.platform-landing .pl-foundation-symbol > svg { width: 24px; height: 27px; }
.platform-landing .pl-foundation h2 { --pl-h2-size: clamp(1.75rem, 1rem + 3vw, 2.75rem); --pl-fit: 11.4; margin-top: 16px; }
.platform-landing .pl-foundation-copy { max-width: 36em; color: var(--pl-muted); font-size: 1rem; line-height: 1.75; }
.platform-landing .pl-foundation-copy p + p { margin-top: 14px; }

/* ---- Final call to action ------------------------------------------------ */
.platform-landing .pl-start-section { padding-bottom: clamp(48px, 7vw, 88px); }
.platform-landing .pl-start-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 28px; padding: clamp(24px, 5vw, 64px);
  border: 1px solid var(--pl-panel-line); border-radius: var(--pl-radius-xl);
  background: var(--pl-panel); color: var(--pl-panel-ink);
}
.platform-landing .pl-start-panel::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(55% 90% at 100% 110%, var(--pl-panel-glow-1), transparent 70%),
    radial-gradient(35% 60% at 78% 125%, var(--pl-panel-glow-2), transparent 70%);
}
.platform-landing .pl-start-panel .pl-eyebrow { color: var(--pl-panel-eyebrow); }
.platform-landing .pl-start-panel h2 { --pl-h2-size: clamp(1.75rem, 1rem + 3.4vw, 3.125rem); --pl-fit: 9.6; margin-top: 16px; }
.platform-landing .pl-start-lede { margin-top: 16px; color: var(--pl-panel-muted); font-size: 1rem; }
.platform-landing .pl-start-action { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.platform-landing .pl-start-action > span { color: var(--pl-panel-muted); font-size: 0.8125rem; }
.platform-landing .pl-button-light { color: var(--pl-panel-button-ink); background: var(--pl-panel-button); }
.platform-landing .pl-button-light:focus-visible { outline-color: var(--pl-panel-focus); }

/* ---- Footer -------------------------------------------------------------- */
.platform-landing .pl-footer {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px;
  padding-block: 24px 32px; border-top: 1px solid var(--pl-line);
}
.platform-landing .pl-footer .pl-brand { justify-self: start; gap: 8px; font-size: 22px; }
.platform-landing .pl-footer p { grid-column: 1 / -1; grid-row: 2; color: var(--pl-muted); font-size: 0.8125rem; }

/* ---- Product 404 ---------------------------------------------------------
   The product host's static error page must not resemble a missing
   publication: the brand lockup, the landing's glow and dotted field, and
   signing in as the primary action. Texture never sits under text: the
   dotted field and the drawn numeral only appear beside the copy column. */
.platform-landing.platform-not-found { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100dvh; }
/* Until the numeral has room, the glow rises from the far corner into the
   page's empty foot, as it does in the landing's closing panel. Its radii are
   lengths, not percentages, so a tall phone never stretches it into a strip. */
.platform-landing.platform-not-found::after {
  content: ""; position: absolute; z-index: -3; inset: 0;
  background: radial-gradient(min(115vw, 820px) min(62vh, 560px) at 100% 100%, var(--pl-art-glow), transparent 72%);
}
.platform-landing .pl-not-found-inner {
  position: relative; display: flex; flex-direction: column; container-type: inline-size;
  width: min(var(--pl-max), 100% - 2 * var(--pl-gutter)); min-height: 100vh; min-height: 100dvh; margin-inline: auto;
  padding-bottom: clamp(48px, 10vh, 120px);
}
.platform-landing .pl-not-found-inner > .pl-brand { align-self: flex-start; margin-block: calc((var(--pl-header-h) - 44px) / 2); }
.platform-landing .pl-not-found-body { max-width: 34rem; margin-block: auto; padding-top: clamp(40px, 8vh, 96px); }
.platform-landing .pl-not-found-body .pl-eyebrow { color: var(--pl-accent); }
.platform-landing.platform-not-found h1 {
  margin-block: 20px 20px; font-family: var(--pl-font-serif); font-weight: 400;
  font-size: clamp(2.625rem, 1.25rem + 5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.035em;
}
.platform-landing .pl-not-found-lede { max-width: 30em; color: var(--pl-muted); font-size: clamp(1rem, 0.8125rem + 0.4vw, 1.125rem); line-height: 1.7; }
.platform-landing .pl-not-found-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.platform-landing .pl-not-found-inner::before {
  content: ""; position: absolute; z-index: -2; top: 8%; bottom: 8%; left: calc(34rem + 80px); right: calc(-1 * var(--pl-gutter));
  display: none;
  background-image: radial-gradient(var(--pl-art-dots) 0.8px, transparent 0.8px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(closest-side, var(--pl-ink) 20%, transparent);
  mask-image: radial-gradient(closest-side, var(--pl-ink) 20%, transparent);
}
/* The numeral is drawn, not written: it is decoration beside the real h1,
   sized to the room the copy column leaves (the three glyphs run ~1.6em). */
.platform-landing .pl-not-found-inner::after {
  content: "404"; content: "404" / "";
  position: absolute; z-index: -1; top: 50%; right: -0.04em;
  display: none; translate: 0 -46%;
  font-family: var(--pl-font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(180px, 24vw, 420px);
  font-size: clamp(160px, (100cqi - 34rem - 56px) / 1.6, 420px);
  line-height: 0.8; letter-spacing: -0.06em;
  color: transparent; background: var(--pl-gradient); -webkit-background-clip: text; background-clip: text;
  opacity: var(--pl-numeral-opacity); pointer-events: none;
}

/* ---- Hover (pointer devices only) --------------------------------------- */
@media (hover: hover) {
  .platform-landing :is(.pl-nav-features, .pl-text-link, .pl-footer-login):hover { color: var(--pl-accent); }
  .platform-landing :is(.pl-text-link, .pl-footer-login):hover .pl-link-label { text-decoration-color: currentColor; }
  .platform-landing .pl-nav-login:hover { border-color: var(--pl-accent-line); background: var(--pl-accent-soft); }
  .platform-landing .pl-nav-login:hover svg,
  .platform-landing .pl-footer-login:hover svg { translate: 2px -2px; }
  .platform-landing .pl-button-primary:hover { background: var(--pl-brand-hover); box-shadow: var(--pl-shadow-brand-hover); translate: 0 -1px; }
  .platform-landing .pl-button-light:hover { background: var(--pl-panel-button-hover); translate: 0 -1px; }
  .platform-landing .pl-button:hover svg { translate: 3px 0; }
  .platform-landing .pl-text-link:hover .pl-text-link-arrow { translate: 0 2px; }
}

/* ---- Pressed (every pointer, including touch) ---------------------------- */
.platform-landing .pl-button:active { translate: 0 0; }
.platform-landing .pl-button-primary:active { background: var(--pl-brand-hover); box-shadow: var(--pl-shadow-brand); }
.platform-landing .pl-button-light:active { background: var(--pl-panel-button-hover); }
.platform-landing .pl-nav-login:active { border-color: var(--pl-accent-line); background: var(--pl-accent-soft); }
.platform-landing :is(.pl-nav-features, .pl-text-link, .pl-footer-login):active { color: var(--pl-accent); }
.platform-landing :is(.pl-text-link, .pl-footer-login):active .pl-link-label { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .platform-landing .pl-button:active { scale: 0.985; }
}

/* ---- Small phones: keep single-line button labels at 320px -------------- */
@media (max-width: 399px) {
  .platform-landing .pl-button { gap: 12px; padding-inline: 18px 16px; font-size: 0.875rem; }
  .platform-landing .pl-start-panel { padding: 28px 20px; }
}

/* ---- Layout: 480px and up ------------------------------------------------ */
@media (min-width: 480px) {
  .platform-landing .pl-header nav { gap: 12px; }
  .platform-landing .pl-nav-features { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; transition: color 160ms ease; }
  .platform-landing .pl-hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
  .platform-landing .pl-start-action { align-items: flex-start; }
}

/* ---- 640px and up -------------------------------------------------------- */
@media (min-width: 640px) {
  .platform-landing { --pl-header-h: 72px; }
  .platform-landing .pl-brand { font-size: 30px; }
  .platform-landing .pl-header nav { gap: 20px; }
  /* Left-aligned until 768, so a wrap never strands one item at the far end. */
  .platform-landing .pl-principles { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-block: 26px; }
  .platform-landing .pl-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-landing .pl-foundation { grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; row-gap: 24px; }
  .platform-landing .pl-foundation-copy { grid-column: 2; }
  .platform-landing .pl-footer { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 28px; }
  .platform-landing .pl-footer p { grid-column: auto; grid-row: auto; }
}
/* Without subgrid, reserve two detail lines side by side so hairlines align. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .platform-landing .pl-feature-detail { min-height: calc(24px + 15px + 3em); }
  }
}

/* ---- 768px and up: tablet ------------------------------------------------ */
@media (min-width: 768px) {
  .platform-landing .pl-principles { justify-content: space-between; }
  .platform-landing .pl-section-heading { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 40px; }
  .platform-landing .pl-section-heading > p { justify-self: end; padding-bottom: 4px; }
}

/* ---- 1024px and up: laptop, two-column hero ----------------------------- */
@media (min-width: 1024px) {
  /* Side by side, the hero is the whole first screen, so it answers to the
     screen's height as well as its width. Below about 800px tall (a 1366 × 768
     laptop leaves 600–660px once the browser and a taskbar are drawn) the top
     space, the headline, the gaps around it and the illustration give way
     together, so the primary action shows with room to spare down to the
     520px where the short-screen layout below takes over. From 800px tall the
     composition is exactly the width-sized one. */
  .platform-landing .pl-hero { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); align-items: center; gap: 32px; padding-top: clamp(24px, min(7vw, 25vh - 112px), 88px); }
  .platform-landing .pl-hero h1 { --pl-h1-size: clamp(3.25rem, min(6.1vw, 11vh), 5.5rem); margin-block: clamp(18px, 5vh - 12px, 26px) clamp(18px, 5vh - 14px, 24px); }
  .platform-landing .pl-hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: clamp(24px, 5vh - 6px, 32px); }
  .platform-landing .pl-hero-description { max-width: 28em; }
  /* The illustration gives way too: on a short screen it stays within the
     copy's height, so centring the row cannot push the action down. */
  @supports (width: 1cqw) {
    .platform-landing .pl-workspace-art { --u: min(1.05px, 100cqw / 600, 75vh / 540); }
  }
  .platform-landing .pl-foundation { grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; column-gap: 40px; }
  .platform-landing .pl-foundation-symbol { width: 88px; height: 112px; border-radius: 44px 44px 8px 8px; }
  .platform-landing .pl-foundation-symbol > svg { width: 32px; height: 36px; }
  .platform-landing .pl-foundation-copy { grid-column: 3; }
  .platform-landing .pl-start-panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
  .platform-landing .pl-start-action { align-items: center; }
  .platform-landing .pl-start-action > span { text-align: center; }
  /* Beside the copy, the glow backs the drawn numeral. */
  .platform-landing.platform-not-found::after { background: radial-gradient(45% 55% at 82% 42%, var(--pl-art-glow), transparent 70%); }
  /* The copy column leaves the right half free for the drawn numeral, but the
     column is 34rem and grows with the reader's text size: the numeral and its
     dotted field appear only while the numeral fits beside it at its smallest
     (160px, ~1.6em wide, after the 56px gap), so texture never meets copy. */
  @container (min-width: calc(34rem + 312px)) {
    .platform-landing .pl-not-found-inner::before, .platform-landing .pl-not-found-inner::after { display: block; }
  }
}

/* ---- 1280px and up: desktop ---------------------------------------------- */
@media (min-width: 1280px) {
  .platform-landing .pl-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Short landscape screens (phones on their side) ----------------------
   The header scrolls away instead of holding a sixth of the screen, the
   headline is sized by height as well as width, and from 560px the copy
   splits beside the headline, so the description and the primary action
   share the first screen with it. */
@media (orientation: landscape) and (max-height: 520px) {
  .platform-landing { --pl-header-h: 60px; --pl-header-cover: 0px; }
  .platform-landing .pl-header { position: relative; }
  .platform-landing .pl-hero { padding-block: 20px 40px; }
  .platform-landing .pl-hero h1 { --pl-h1-size: clamp(2.125rem, 9vh + 0.625rem, 3.5rem); margin-block: 14px 18px; }
  @supports (width: 1cqw) {
    .platform-landing .pl-workspace-art { --u: min(1.05px, 100cqw / 600, 78vh / 540); }
  }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) and (max-width: 1023px) {
  .platform-landing .pl-hero-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(24px, 4vw, 48px); }
  .platform-landing .pl-hero-copy > .pl-eyebrow { grid-column: 1 / -1; }
  .platform-landing .pl-hero h1 { grid-column: 1; grid-row: 2 / 6; margin-bottom: 0; }
  .platform-landing .pl-hero-description { grid-column: 2; grid-row: 2; margin-top: 18px; font-size: 0.9375rem; line-height: 1.65; }
  .platform-landing .pl-hero-actions { grid-column: 2; grid-row: 3; margin-top: 20px; }
  .platform-landing .pl-access-note { grid-column: 2; grid-row: 4; margin-top: 16px; }
}

/* ---- Motion (CSS only; nothing moves for reduced-motion users) ----------- */
@keyframes pl-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes pl-fade { from { opacity: 0; } }
@keyframes pl-editor-in { from { opacity: 0; translate: calc(-16 * var(--u)) calc(22 * var(--u)); rotate: -7deg; } }
@keyframes pl-site-in { from { opacity: 0; translate: calc(22 * var(--u)) calc(26 * var(--u)); rotate: 8deg; } }
@keyframes pl-pop { from { opacity: 0; scale: 0.85; } }
@keyframes pl-underline { from { background-size: 0 0.05em; } }

@media (prefers-reduced-motion: no-preference) {
  .platform-landing .pl-hero-copy > * { animation: pl-rise 700ms var(--pl-ease) both; }
  .platform-landing .pl-hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .platform-landing .pl-hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .platform-landing .pl-hero-copy > :nth-child(4) { animation-delay: 180ms; }
  .platform-landing .pl-hero-copy > :nth-child(5) { animation-delay: 240ms; }
  .platform-landing .pl-hero h1 em { animation: pl-underline 800ms var(--pl-ease) 450ms both; }
  .platform-landing .pl-orbit, .platform-landing .pl-workspace-label { animation: pl-fade 900ms ease 100ms both; }
  .platform-landing .pl-editor-window { animation: pl-editor-in 900ms var(--pl-ease) 150ms both; }
  .platform-landing .pl-publish-connector { animation: pl-fade 600ms ease 650ms both; }
  .platform-landing .pl-site-window { animation: pl-site-in 900ms var(--pl-ease) 420ms both; }
  .platform-landing .pl-design-chip { animation: pl-pop 560ms var(--pl-spring) 760ms both; }
  .platform-landing .pl-workspace figcaption { animation: pl-fade 500ms ease 600ms both; }
  .platform-landing .pl-not-found-body > * { animation: pl-rise 700ms var(--pl-ease) both; }
  .platform-landing .pl-not-found-body > :nth-child(2) { animation-delay: 60ms; }
  .platform-landing .pl-not-found-body > :nth-child(3) { animation-delay: 120ms; }
  .platform-landing .pl-not-found-body > :nth-child(4) { animation-delay: 180ms; }
  .platform-landing .pl-not-found-inner::after { animation: pl-fade 1200ms ease 200ms both; }
}

@media (prefers-reduced-motion: reduce) {
  .platform-landing *, .platform-landing *::before, .platform-landing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Forced colours and print ------------------------------------------- */
@media (forced-colors: active) {
  .platform-landing .pl-button, .platform-landing .pl-nav-login, .platform-landing .pl-skip-link { border: 1px solid ButtonText; }
  .platform-landing .pl-feature-card, .platform-landing .pl-start-panel, .platform-landing .pl-foundation-symbol, .platform-landing .pl-feature-icon { border: 1px solid CanvasText; }
  .platform-landing .pl-hero h1 em { background: none; text-decoration: underline; }
  .platform-landing :where(a):focus-visible { outline-color: Highlight; }
  .platform-landing .pl-not-found-inner::before, .platform-landing .pl-not-found-inner::after { display: none; }
}

@media print {
  .platform-landing .pl-header { position: static; background: none; }
  .platform-landing .pl-skip-link, .platform-landing .pl-workspace, .platform-landing .pl-principles > li::before,
  .platform-landing.platform-not-found::after, .platform-landing .pl-not-found-inner::before, .platform-landing .pl-not-found-inner::after { display: none; }
  .platform-landing .pl-hero { grid-template-columns: 1fr; }
  .platform-landing .pl-features-section, .platform-landing .pl-start-panel { background: none; color: inherit; border: 1px solid var(--pl-line-strong); }
  /* The panel's light-on-ink text would vanish on paper; print it in page ink. */
  .platform-landing .pl-start-panel { --pl-panel-ink: var(--pl-ink); --pl-panel-muted: var(--pl-muted); --pl-panel-eyebrow: var(--pl-accent); }
  .platform-landing .pl-start-panel::before { display: none; }
  /* Browsers drop backgrounds when printing: outline the buttons in ink. */
  .platform-landing :is(.pl-button-primary, .pl-button-light) { color: var(--pl-ink); background: none; border: 1px solid currentColor; }
  .platform-landing .pl-foundation-symbol { color: var(--pl-ink); background: none; border: 1px solid var(--pl-line-strong); }
  /* On screen the grid's own fill draws the hairlines between cards; on paper
     each card is its own outlined box, so a page break never leaves a strip
     of empty grid behind. */
  .platform-landing .pl-feature-grid { gap: 12px; overflow: visible; background: none; border: 0; }
  .platform-landing .pl-feature-card { border: 1px solid var(--pl-line-strong); border-radius: var(--pl-radius); }
  .platform-landing :is(.pl-feature-card, .pl-foundation, .pl-start-panel) { break-inside: avoid; }
  /* A heading never ends a page: it goes over with what it introduces. */
  .platform-landing :is(h1, h2, h3, .pl-eyebrow) { break-after: avoid; }
  .platform-landing .pl-section-heading { break-inside: avoid; break-after: avoid; }
  .platform-landing .pl-not-found-inner, .platform-landing.platform-not-found { min-height: 0; }
  .platform-landing *, .platform-landing *::before, .platform-landing *::after { animation: none !important; box-shadow: none !important; }
}