/* * Plinth — WaaFaa product page stylesheet. * * One file, one page. No build step, no dependency, and nothing is fetched: not a * webfont, not a beacon, not a CDN. Plinth's own first rule is that nothing leaves a * site before its owner consents; a page arguing that while quietly calling three * third parties is arguing it badly. * * ── The palette is the product's own ───────────────────────────────────────────── * * Every colour is lifted from `plinth-app/resources/css/app.css`, not invented for the * web. `--pl-green` is the application's `--color-primary`; `--pl-ink` is that same * hue taken down to near-black, so the dark band reads as the same brand rather than * as a second one. * * `--pl-warn` and `--pl-unknown` are the two that matter most, and they are DIFFERENT * COLOURS ON PURPOSE. The product's design system states it as a rule: not-knowing is * not a warning. A quiet account is amber because you should act on it; an unclassified * install is grey because nobody has anything to act on. Drawing them the same would * undo the one distinction this product exists to make. * * The three values here are the DARKENED ones the application uses, not the design * system's original swatches — measured on a 12% tint of themselves over the page * ground, the originals miss WCAG AA. Same hues, darkened until they pass. * * ── Type ───────────────────────────────────────────────────────────────────────── * * A serif for display headings and a sans for everything else. The serif is the voice * of a report — which is what Plinth produces — and it separates a heading from the * figures and labels beneath it without needing a second weight or a second colour. * Both are system stacks, so nothing is fetched. * * ── Theme ──────────────────────────────────────────────────────────────────────── * * `data-pl-theme` on is the resolved theme ("light" or "dark"); * `data-pl-theme-choice` records what the user picked, which may be "auto". script.js * owns both, and nothing here reads prefers-color-scheme directly, so the toggle wins * in every direction. * * The APPLICATION has no dark theme at MVP, and this page does — a marketing page is * read at night on a phone and the product is not. */ :root { /* Neutrals — the application's own off-white ramp, opened out for a full-width page. */ --pl-bg: #fbfbfa; --pl-surface: #ffffff; --pl-surface-2: #f4f4f2; --pl-surface-3: #ebebe8; --pl-border: #e4e4e1; --pl-border-strong: #cfcfca; --pl-text: #1a1a18; --pl-heading: #0f0f0e; --pl-muted: #5c5c57; /* Semantic — every one of these is an `app.css` value, unchanged. */ --pl-green: #1f5e4b; --pl-green-hover: #17483a; --pl-green-soft: #e7efea; --pl-success: #17663c; /* Quiet accounts and degraded coverage. Act on these. */ --pl-warn: #85540e; --pl-warn-soft: #f6efe2; /* NOT a warning. `unknown` is its own role and must never be styled as one. */ --pl-unknown: #67675f; --pl-danger: #a32b22; --pl-link: #1c5644; --pl-link-hover: #17483a; /* The dark band inverts against the page in BOTH themes — it is the page's one change of ground, and a band that stops inverting in dark mode stops being one. */ --pl-ink: #101c18; --pl-ink-surface: #182721; --pl-ink-border: #2b3d35; --pl-ink-text: #edf2ef; --pl-ink-muted: #9bb0a6; /* The primary is 3.1:1 on ink and fails as text there. Same hue, lifted until it passes at 7.6:1, and it is ONLY for use on ink. */ --pl-ink-accent: #63b795; --pl-shadow: 0 22px 60px rgba(26, 26, 24, 0.1); --pl-shadow-soft: 0 12px 34px rgba(26, 26, 24, 0.07); --pl-shadow-inset: inset 0 0 0 1px var(--pl-border); --pl-radius: 12px; --pl-radius-sm: 8px; --pl-radius-lg: 18px; --pl-container: 1180px; --pl-header-h: 68px; --pl-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif; --pl-serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --pl-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; } .pl-page[data-pl-theme='dark'] { --pl-bg: #0e120f; --pl-surface: #151a17; --pl-surface-2: #1b221e; --pl-surface-3: #222b26; --pl-border: #262e2a; --pl-border-strong: #3a453f; --pl-text: #edf2ef; --pl-heading: #ffffff; --pl-muted: #9aa8a1; --pl-green: #63b795; --pl-green-hover: #7fc9aa; --pl-green-soft: #16261f; --pl-success: #63b795; /* On the dark ground the lifted hues already clear AA as text; no second value is needed, and the two stay as far apart as they are in light mode. */ --pl-warn: #d9a441; --pl-warn-soft: #251d10; --pl-unknown: #98988d; --pl-danger: #e08076; --pl-link: #7fc9aa; --pl-link-hover: #9bd8bd; --pl-shadow: 0 22px 60px rgba(0, 0, 0, 0.5); --pl-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.34); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } .pl-page { margin: 0; /* 320px is the narrowest width this page is checked at, and nothing may overflow it. */ min-width: 320px; overflow-x: hidden; background: var(--pl-bg); color: var(--pl-text); font-family: var(--pl-sans); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* The only decorative colour on the page: two faint washes at the top shoulders. Everything else that is coloured is a signal. */ .pl-page::before { content: ''; position: absolute; inset: 0 0 auto; height: 820px; z-index: -1; pointer-events: none; background: radial-gradient(circle at 12% 0%, rgba(31, 94, 75, 0.1), transparent 26rem), radial-gradient(circle at 88% 5%, rgba(31, 94, 75, 0.06), transparent 22rem); } .pl-page[data-pl-theme='dark']::before { background: radial-gradient(circle at 12% 0%, rgba(99, 183, 149, 0.14), transparent 26rem), radial-gradient(circle at 88% 5%, rgba(99, 183, 149, 0.07), transparent 22rem); } /* * A reset, so it must not win anything. Written as `.pl-page a` this scores (0,1,1) and * quietly beats every single-class component rule at (0,1,0) — which is how a primary * button ends up with the page's text colour on a green fill. `:where()` scores zero. */ :where(.pl-page a) { color: inherit; text-decoration: none; } :where(.pl-page h1, .pl-page h2, .pl-page h3, .pl-page h4) { color: var(--pl-heading); margin: 0; text-wrap: balance; } :where(.pl-page p, .pl-page ul, .pl-page ol) { margin: 0; } /* * `figure` and `blockquote` carry a UA default of `margin: 1em 40px`, and every one of * them here is a layout box — a grid item, or a card in a row. Unreset, the hero panel * stopped 40px short of the container it was supposed to align with, and the two quote * cards sat 40px inside their own grid cells, which put 98px between them where the * grid says 18px. Nothing looked broken; everything was just slightly wrong. */ :where(.pl-page figure, .pl-page blockquote) { margin: 0; } .pl-page h1 { font-family: var(--pl-serif); /* * 3.5rem is the house ceiling and it was not too big in the abstract — but this * headline is long, and in a 496px column it came out over FOUR lines and 242px tall, * which is a wall rather than a headline. The cap comes down until it sets in three. * * The size is the thing to change, not the words: "Which paying customers went quiet * this week?" is the product's whole argument as a question, and shortening it to fit * a number in a stylesheet would be the wrong trade. */ font-size: clamp(2.05rem, 1.2rem + 2.65vw, 3.05rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.018em; } .pl-page h2 { font-family: var(--pl-serif); /* * Follows h1 down. With the headline at 48.8px an h2 of 37.6 left only 1.30x between * them, which is close enough that a section heading starts competing with the one * thing on the page that should be largest. 2.2rem restores about 1.39x. */ font-size: clamp(1.6rem, 1.15rem + 1.45vw, 2.2rem); font-weight: 600; line-height: 1.16; letter-spacing: -0.016em; } .pl-page h3 { font-size: 1.0625rem; font-weight: 680; line-height: 1.34; letter-spacing: -0.01em; } /* ───────────────────────────────────────────────────────────────────── structure ── */ .pl-container { width: min(calc(100% - 48px), var(--pl-container)); margin-inline: auto; } /* Reachable by keyboard, invisible until it has focus. */ .pl-skip { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 12px 20px; border-radius: 10px; color: #ffffff; background: #17483a; font-weight: 750; transition: top 0.2s ease; } .pl-skip:focus { top: 16px; } /* One visible focus ring for the whole page, on the token rather than per component. */ .pl-page :focus-visible { outline: 2px solid var(--pl-green); outline-offset: 3px; border-radius: 4px; } .pl-section { padding-block: 82px; /* Clears the sticky header when the nav jumps here. */ scroll-margin-top: calc(var(--pl-header-h) + 16px); } .pl-section-alt { background: var(--pl-surface-2); border-block: 1px solid var(--pl-border); } .pl-section-tight { padding-block: 54px; } /* * The inverted band. Its tokens are remapped once here rather than overridden per * component — otherwise a card inside it keeps the page's text colour and renders * light on light, which is a bug somebody always finds in the wrong theme. */ .pl-band { position: relative; isolation: isolate; overflow: hidden; background: var(--pl-ink); --pl-surface: var(--pl-ink-surface); --pl-surface-2: #1a231f; --pl-surface-3: #212c27; --pl-border: var(--pl-ink-border); --pl-border-strong: #35473f; --pl-text: var(--pl-ink-text); --pl-heading: #ffffff; --pl-muted: var(--pl-ink-muted); --pl-green: var(--pl-ink-accent); --pl-green-soft: #16261f; --pl-warn: #dc9377; --pl-warn-soft: #2a1c17; --pl-shadow-inset: inset 0 0 0 1px var(--pl-ink-border); color: var(--pl-ink-text); } /* A grid, lit by a glow. Both decorative, both behind everything, both aria-hidden. */ .pl-band::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(99, 183, 149, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(99, 183, 149, 0.07) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(72% 62% at 50% 0%, #000 0%, transparent 78%); } .pl-band::after { content: ''; position: absolute; inset: -40% 0 auto; height: 620px; z-index: -1; pointer-events: none; background: radial-gradient(52% 54% at 50% 50%, rgba(99, 183, 149, 0.2), transparent 70%); } .pl-section-head { display: flex; flex-direction: column; gap: 14px; max-width: 62ch; margin-bottom: 44px; } .pl-lede { max-width: 62ch; color: var(--pl-muted); font-size: 1.0625rem; } .pl-eyebrow { display: inline-flex; /* Top, not centre: on a phone this wraps to two lines, and an icon floating halfway down the pair reads as a mistake. */ align-items: flex-start; gap: 8px; color: var(--pl-green); font-size: 0.75rem; font-weight: 740; letter-spacing: 0.1em; text-transform: uppercase; } .pl-eyebrow svg { width: 15px; height: 15px; flex: none; margin-top: 2px; } .pl-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } /* ────────────────────────────────────────────────────────────────────── controls ── */ .pl-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border: 1px solid transparent; border-radius: 11px; font-size: 0.9375rem; font-weight: 660; letter-spacing: -0.006em; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease; } .pl-button svg { width: 18px; height: 18px; flex: none; } /* * The primary fill is the LIGHT-mode green in both themes, with its own foreground. In * dark mode `--pl-green` is the lifted #63b795 and white on it is 2.3:1 — far under the * floor — so the dark button takes near-black type on the lifted green instead. The * application splits the same two tokens for the same reason. */ .pl-button-primary { background: #1f5e4b; color: #ffffff; } .pl-button-primary:hover { background: var(--pl-green-hover); color: #ffffff; transform: translateY(-1px); } .pl-page[data-pl-theme='dark'] .pl-button-primary, .pl-band .pl-button-primary { background: #63b795; color: #08201a; } .pl-page[data-pl-theme='dark'] .pl-button-primary:hover, .pl-band .pl-button-primary:hover { background: #7fc9aa; color: #08201a; } .pl-button-secondary { background: var(--pl-surface); border-color: var(--pl-border-strong); color: var(--pl-text); } .pl-button-secondary:hover { border-color: var(--pl-green); color: var(--pl-green); transform: translateY(-1px); } .pl-actions { display: flex; flex-wrap: wrap; gap: 12px; } .pl-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--pl-border); border-radius: 10px; background: var(--pl-surface); color: var(--pl-muted); cursor: pointer; transition: color 0.16s ease, border-color 0.16s ease; } .pl-icon-button svg { width: 19px; height: 19px; } .pl-icon-button:hover { border-color: var(--pl-border-strong); color: var(--pl-text); } .pl-pill { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--pl-green-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pl-green) 26%, transparent); color: var(--pl-green); font-size: 0.75rem; font-weight: 680; letter-spacing: 0.01em; } .pl-pill svg { width: 14px; height: 14px; flex: none; } /* A pulse that says "in progress" without shouting. It is the only motion on the page that is not a reveal, and reduced-motion switches it off with everything else. */ .pl-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: currentColor; animation: pl-pulse 2.4s ease-in-out infinite; } @keyframes pl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ──────────────────────────────────────────────────────────────────── status bar ── */ /* * The one thing a visitor has to leave with, and it sits above everything else on the * page rather than being discovered halfway down it. Plinth has no open sign-up, and a * product page that lets somebody read nine sections before saying so has wasted their * time and spent trust it will need later. */ .pl-status { position: relative; z-index: 45; background: var(--pl-ink); color: var(--pl-ink-text); border-bottom: 1px solid var(--pl-ink-border); } .pl-status-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding-block: 11px; font-size: 0.8125rem; } .pl-status-tag { display: inline-flex; align-items: center; gap: 8px; padding: 3px 11px; border-radius: 999px; background: rgba(99, 183, 149, 0.14); box-shadow: inset 0 0 0 1px rgba(99, 183, 149, 0.32); color: var(--pl-ink-accent); font-family: var(--pl-mono); font-size: 0.75rem; font-weight: 620; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .pl-status-text { color: var(--pl-ink-muted); min-width: 0; } .pl-status-text strong { color: var(--pl-ink-text); font-weight: 620; } .pl-status-link { margin-left: auto; color: var(--pl-ink-accent); font-weight: 620; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* ─────────────────────────────────────────────────────────────────────── header ── */ .pl-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(150%) blur(14px); background: color-mix(in srgb, var(--pl-bg) 86%, transparent); border-bottom: 1px solid var(--pl-border); } .pl-header-inner { display: flex; align-items: center; gap: 24px; height: var(--pl-header-h); } .pl-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; } .pl-brand img { border-radius: 9px; } .pl-brand-name { font-size: 1.125rem; font-weight: 720; line-height: 1.2; letter-spacing: -0.024em; color: var(--pl-heading); } .pl-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; } .pl-nav a { padding: 8px 12px; border-radius: 8px; color: var(--pl-muted); font-size: 0.9375rem; font-weight: 540; transition: color 0.16s ease; } .pl-nav a:hover, .pl-nav a.is-active { color: var(--pl-text); background: var(--pl-surface-2); } .pl-header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .pl-header-cta { padding: 10px 17px; font-size: 0.875rem; } .pl-menu-toggle { display: none; } .pl-mobile-nav { border-top: 1px solid var(--pl-border); background: var(--pl-surface); padding-block: 12px 18px; max-height: calc(100vh - var(--pl-header-h)); max-height: calc(100dvh - var(--pl-header-h)); overflow-y: auto; /* Reaching the end of the sheet must not start scrolling the page behind it. */ overscroll-behavior: contain; } .pl-mobile-nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; } .pl-mobile-nav a { display: block; padding: 13px 12px; border-radius: 10px; color: var(--pl-text); font-weight: 600; } .pl-mobile-nav a:hover { background: var(--pl-surface-2); } .pl-mobile-nav .pl-button { margin-top: 8px; width: 100%; } /* ───────────────────────────────────────────────────────────────────────── hero ── */ .pl-hero { position: relative; padding-block: 70px 82px; } .pl-hero-grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: 52px; } .pl-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; /* A grid item defaults to min-width:auto, which resolves to min-content — one long unbreakable word then sets the width of the whole column. */ min-width: 0; } .pl-hero-copy h1 em { display: block; font-style: normal; color: var(--pl-green); } .pl-hero-text { max-width: 48ch; color: var(--pl-muted); font-size: 1.125rem; } .pl-hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin-top: 2px; } .pl-hero-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 8px; background: var(--pl-surface); box-shadow: var(--pl-shadow-inset); color: var(--pl-muted); font-size: 0.8125rem; } .pl-hero-facts b { color: var(--pl-text); font-family: var(--pl-mono); font-size: 0.8125rem; font-weight: 620; } .pl-hero-facts svg { width: 15px; height: 15px; flex: none; color: var(--pl-green); } /* ────────────────────────────────────────────────────────────── the hero figure ── */ /* * The product, drawn rather than photographed. Real markup and hand-authored SVG: it * costs no request, stays sharp at any density, reflows on a phone, and is read * correctly by a screen reader. The bar heights ARE the data, so the drawing and the * caption underneath it cannot come to disagree — which is the whole subject of the * product and not a thing to be careless about on its own page. */ .pl-figure { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .pl-panel { min-width: 0; overflow: hidden; border-radius: var(--pl-radius-lg); background: var(--pl-surface); box-shadow: var(--pl-shadow-inset), var(--pl-shadow); } .pl-panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--pl-border); background: var(--pl-surface-2); } .pl-panel-title { display: inline-flex; align-items: center; gap: 9px; font-size: 0.875rem; font-weight: 680; color: var(--pl-heading); } .pl-panel-title svg { width: 17px; height: 17px; flex: none; color: var(--pl-green); } .pl-panel-meta { color: var(--pl-muted); font-family: var(--pl-mono); font-size: 0.75rem; letter-spacing: 0.02em; white-space: nowrap; } .pl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--pl-border); } .pl-stat { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; min-width: 0; } .pl-stat + .pl-stat { border-left: 1px solid var(--pl-border); } .pl-stat-label { color: var(--pl-muted); font-size: 0.75rem; font-weight: 640; letter-spacing: 0.07em; text-transform: uppercase; } .pl-stat-value { font-family: var(--pl-mono); font-size: 1.5rem; font-weight: 640; line-height: 1.15; letter-spacing: -0.02em; color: var(--pl-heading); font-variant-numeric: tabular-nums; } .pl-stat-value.is-warn { color: var(--pl-warn); } /* Grey, and never the amber above it. See `.pl-badge-unknown`. */ .pl-stat-value.is-unknown { color: var(--pl-unknown); } .pl-stat-note { color: var(--pl-muted); font-size: 0.75rem; line-height: 1.35; } /* The check-in sparkline: one bar a day, and the bars are the data. */ .pl-spark { padding: 18px; } .pl-spark svg { display: block; width: 100%; height: auto; } /* * The legend was SVG at 10px in an earlier draft. The type floor is 12px and the * drawing scales with the viewport, so in-chart text fell under the floor on a phone. In * HTML it scales with everything else. */ .pl-spark-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--pl-muted); font-size: 0.75rem; } .pl-spark-legend span { display: inline-flex; align-items: center; gap: 7px; } .pl-spark-legend i { width: 10px; height: 10px; flex: none; border-radius: 2px; background: var(--pl-green); } .pl-spark-legend i.is-silent { background: var(--pl-border-strong); } .pl-spark-legend i.is-cut { width: 0; height: 13px; border-radius: 0; background: none; border-left: 1px dashed var(--pl-warn); } /* The quiet-accounts table inside the hero panel. */ .pl-rows { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .pl-rows th, .pl-rows td { padding: 11px 18px; text-align: left; border-bottom: 1px solid var(--pl-border); } .pl-rows thead th { color: var(--pl-muted); font-size: 0.75rem; font-weight: 660; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; } .pl-rows tbody tr:last-child th, .pl-rows tbody tr:last-child td { border-bottom: 0; } .pl-rows tbody th { font-family: var(--pl-mono); font-size: 0.75rem; font-weight: 500; color: var(--pl-text); white-space: nowrap; } .pl-rows td { color: var(--pl-muted); } /* * The quiet badge. Amber, and the `unknown` badge beside it is grey — not a lighter * amber, not the same colour at a lower opacity. Not-knowing is not a warning, and a * page that draws them alike has already lost the distinction it is here to sell. */ .pl-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .pl-badge-quiet { background: var(--pl-warn-soft); color: var(--pl-warn); } .pl-badge-unknown { background: var(--pl-surface-2); color: var(--pl-unknown); } /* * The badge set inside a running sentence. The table variant's padding reads as a * double space on either side once there is prose around it, so the inline one trades * padding for a rule and keeps the line's rhythm. */ .pl-badge-inline { padding: 1px 6px; border-radius: 4px; font-size: 0.9375em; font-weight: 500; box-shadow: inset 0 0 0 1px currentColor; background: none; } .pl-figcaption { color: var(--pl-muted); font-size: 0.75rem; line-height: 1.5; } /* The numbered steps. The number is a box, not a floating glyph, so a wrapped heading beside it still lines up against something. */ .pl-steps { /* * An

 sets the width of the whole grid and pushes the page into horizontal
 * scroll at 375px — the classic way a code sample breaks a landing page on a phone.
 */
.pl-code-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pl-code pre {
  margin: 0;
  padding: 18px 16px;
  font-family: var(--pl-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  tab-size: 2;
}

.pl-code .c {
  color: var(--pl-muted);
}

.pl-code .k {
  color: var(--pl-green);
}

.pl-code .s {
  color: var(--pl-warn);
}

/* Two columns of promises: what is collected, and what never is. The second is the
   product, so it gets the same weight rather than a footnote. */
.pl-promise {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--pl-radius);
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-inset);
  min-width: 0;
}

.pl-promise > p {
  color: var(--pl-muted);
  font-size: 0.8125rem;
}

.pl-promise ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pl-promise li {
  display: flex;
  gap: 11px;
  color: var(--pl-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pl-promise li svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
}

.pl-promise-yes li svg {
  color: var(--pl-green);
}

.pl-promise-no li svg {
  color: var(--pl-warn);
}

.pl-promise-note {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--pl-border);
  color: var(--pl-muted);
  font-size: 0.8125rem;
}

/* Plans. Neither is purchasable yet, and the card says so rather than showing a
   button that goes nowhere. */
.pl-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pl-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border-radius: var(--pl-radius);
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-inset);
  min-width: 0;
}

.pl-plan-featured {
  box-shadow: inset 0 0 0 2px var(--pl-green);
}

.pl-plan-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pl-plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--pl-mono);
  font-size: 2.1rem;
  font-weight: 640;
  letter-spacing: -0.03em;
  color: var(--pl-heading);
}

/* The slot where a price would go on a plan that has not been priced. */
.pl-plan-price-tbd {
  font-family: var(--pl-sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pl-muted);
}

.pl-plan-price small {
  font-family: var(--pl-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--pl-muted);
}

.pl-plan ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--pl-muted);
  font-size: 0.9375rem;
}

.pl-plan li {
  display: flex;
  gap: 10px;
}

.pl-plan li svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 4px;
  color: var(--pl-green);
}

.pl-plan-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--pl-border);
  color: var(--pl-muted);
  font-size: 0.8125rem;
}

/* The roadmap. Shipped, building, next — with the honest one last and not hidden. */
.pl-phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pl-phase {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--pl-radius);
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-inset);
  min-width: 0;
}

.pl-phase-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--pl-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pl-phase-done .pl-phase-tag {
  background: var(--pl-green-soft);
  color: var(--pl-green);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pl-green) 28%, transparent);
}

.pl-phase-now .pl-phase-tag {
  background: color-mix(in srgb, var(--pl-warn) 10%, var(--pl-surface));
  color: var(--pl-warn);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pl-warn) 30%, transparent);
}

.pl-phase ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--pl-muted);
  font-size: 0.9375rem;
}

.pl-phase li {
  display: flex;
  gap: 10px;
}

.pl-phase li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 4px;
  color: var(--pl-muted);
}

.pl-phase-done li svg {
  color: var(--pl-green);
}

/* The FAQ. A  so it works with no script at all. */
.pl-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  align-items: start;
}

.pl-faq-item {
  border-radius: var(--pl-radius);
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-inset);
  min-width: 0;
}

.pl-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--pl-heading);
  font-size: 0.9375rem;
  font-weight: 640;
}

.pl-faq-item summary::-webkit-details-marker {
  display: none;
}

.pl-faq-item summary::after {
  content: '+';
  flex: none;
  color: var(--pl-green);
  font-family: var(--pl-mono);
  font-size: 1.15rem;
  line-height: 1;
}

.pl-faq-item[open] summary::after {
  content: '\2212';
}

.pl-faq-item p {
  padding: 0 20px 20px;
  color: var(--pl-muted);
  font-size: 0.9375rem;
}

/* The closing call to action, on the band. */
.pl-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.pl-cta p {
  max-width: 54ch;
  color: var(--pl-ink-muted);
  font-size: 1.0625rem;
}

.pl-cta-note {
  color: var(--pl-ink-muted);
  font-size: 0.8125rem;
}

/* ─────────────────────────────────────────────────────────────────────── footer ── */

.pl-footer {
  position: relative;
  padding-block: 54px 24px;
  border-top: 1px solid var(--pl-border);
  background: var(--pl-surface-2);
}

.pl-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 34px;
}

.pl-footer-brand p {
  margin-top: 14px;
  max-width: 42ch;
  color: var(--pl-muted);
  font-size: 0.875rem;
}

.pl-footer-links,
.pl-footer-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.pl-footer h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pl-muted);
}

.pl-footer-links a {
  color: var(--pl-muted);
  font-size: 0.875rem;
}

.pl-footer-links a:hover {
  color: var(--pl-text);
}

/*
 * A status card, not a link. There is no store listing and no checkout, and a button
 * that lands you back where you started is worse than no button — so this states the
 * fact and the "notify me" link beside it is the one thing that actually goes
 * somewhere.
 */
.pl-footer-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-inset);
  color: var(--pl-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.pl-footer-card svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--pl-green);
}

.pl-copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pl-border);
  width: min(calc(100% - 48px), var(--pl-container));
  margin-inline: auto;
  color: var(--pl-muted);
  font-size: 0.8125rem;
}

.pl-copyright a {
  color: var(--pl-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pl-scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pl-border);
  border-radius: 999px;
  background: var(--pl-surface);
  color: var(--pl-text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  box-shadow: var(--pl-shadow-soft);
}

.pl-scroll-top svg {
  width: 19px;
  height: 19px;
}

.pl-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ────────────────────────────────────────────────────────────────────── reveals ── */

[data-pl-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

[data-pl-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .pl-page *,
  .pl-page *::before,
  .pl-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  [data-pl-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────────────── utilities ── */

.pl-gap-top {
  margin-top: 22px;
}

/* A heading that exists for structure rather than for the eye: `aria-labelledby` needs
   something to point at, and a section whose name is obvious from the cards under it
   does not need that name repeated in 2.4rem. */
.pl-sr-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════ responsive ══
 *
 * Additive and deliberately last, so each block wins on order and nothing above needs
 * editing. The floor is 320px: no horizontal overflow, no type under 12px, no tap
 * target under 44px once there is a thumb on the screen, and no grid left with a
 * half-empty last row.
 */

@media (max-width: 1080px) {
  .pl-hero {
    padding-block: 48px 62px;
  }

  .pl-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

}

@media (max-width: 980px) {
  .pl-nav {
    display: none;
  }

  .pl-menu-toggle {
    display: inline-flex;
  }

  .pl-header-inner {
    justify-content: space-between;
  }

  /* The status strip stacks rather than squeezing the sentence into two words a line,
     and the link stops being pushed to the far right by `margin-left: auto`. */
  .pl-status-inner {
    padding-block: 10px;
  }

  .pl-status-link {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .pl-section {
    padding-block: 62px;
  }

  .pl-steps,
  .pl-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pl-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }

  /* Every tap target reaches 44px once there is a thumb on the screen. */
  .pl-button,
  .pl-icon-button,
  .pl-faq-item summary {
    min-height: 44px;
  }

  /*
   * Every link that is its own row — nav, footer column, brand — gets a 44px box. A
   * 22px footer link is a target you hit on the third try.
   *
   * Links inside a sentence are deliberately NOT in this list: growing an inline link
   * to 44px would break the line it sits in, and WCAG 2.5.8 exempts them for exactly
   * that reason.
   */
  .pl-footer-links a,
  .pl-status-link,
  .pl-brand {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Each row is its own 44px box now, so the gap between them can come back down. */
  .pl-footer-links {
    gap: 0;
  }

  .pl-footer h2 {
    margin-bottom: 4px;
  }
}

@media (max-width: 760px) {
  .pl-faq,
  .pl-grid-2,
  .pl-plans {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * The three stats in the hero panel stop being three columns. At 375px each was
   * about 96px wide, which puts "what the store reports" onto four lines under a
   * number — and the number is the point.
   */
  .pl-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pl-stat + .pl-stat {
    border-left: 0;
  }

  .pl-stat {
    border-top: 1px solid var(--pl-border);
  }

  .pl-stat:nth-child(odd) {
    border-right: 1px solid var(--pl-border);
  }

  .pl-stat:nth-child(-n + 2) {
    border-top: 0;
  }
}

@media (max-width: 620px) {
  .pl-container,
  .pl-copyright {
    /* A 16px gutter each side at the narrowest widths, which is where the argument
       for a wider one stops being worth the characters it costs per line. */
    width: calc(100% - 32px);
  }

  .pl-section {
    padding-block: 50px;
  }

  .pl-section-head {
    margin-bottom: 28px;
  }

  .pl-hero {
    padding-block: 32px 48px;
  }

  .pl-steps,
  .pl-phases,
  .pl-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Full-width stacked buttons, so the call to action lands above the fold at 320px. */
  .pl-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .pl-actions .pl-button {
    width: 100%;
  }

  /*
   * Hidden rather than shrunk to its icon. A 44px square with an unlabelled glyph is
   * not a call to action — nobody can tell what it does. The menu sheet carries the
   * same destination as a full-width labelled button, and the hero's own CTA is a
   * thumb-flick below the fold.
   */
  .pl-header-cta {
    display: none;
  }

  .pl-panel-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .pl-spark {
    padding-inline: 14px;
  }

  /*
   * The licence table drops its third column on a phone. The panel is overflow:hidden
   * — it has rounded corners and a table cannot poke out of them — so at 320px the
   * three columns were not scrolling, they were being SILENTLY CUT: "agency" simply
   * ended mid-word at the panel edge, which is a worse thing to ship on this page than
   * on most, since the whole product is about numbers that do not quietly mislead.
   *
   * Plan is the column to lose. The hash and how long it has been silent are the
   * argument; the tier is context, and it is on screen in the real product anyway.
   */
  .pl-rows th,
  .pl-rows td {
    padding-inline: 14px;
  }

  .pl-rows th:nth-child(3),
  .pl-rows td:nth-child(3) {
    display: none;
  }

  .pl-step,
  .pl-phase,
  .pl-promise,
  .pl-plan {
    padding: 20px;
  }

  .pl-plan {
    padding: 22px;
  }

  /* The scroll-to-top button sits over content on a small screen; keep it clear of a
     thumb resting at the bottom-right corner. */
  .pl-scroll-top {
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 420px) {
  .pl-rows th,
  .pl-rows td {
    padding-inline: 11px;
  }

  .pl-rows tbody th {
    font-size: 0.75rem;
  }

  /* Two 150px columns of stats is worse than one clean column. */
  .pl-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-stat:nth-child(odd) {
    border-right: 0;
  }

  .pl-stat:nth-child(2) {
    border-top: 1px solid var(--pl-border);
  }

  /*
   * The facts wrap rather than each taking a row. Forced to 100% they read as three
   * buttons nobody can press, which is the wrong thing to put under two real ones.
   */
  .pl-hero-facts {
    gap: 6px 8px;
  }
}

/* ───────────────────────────────────────────────────────── late additions ── */

/*
 * These exist so that no page carries an inline style: the stylesheet stays the only
 * place a value appears, which is the rule the product's own tokens hold over it.
 */

/* The icon sprite. It is defined, never drawn, and must occupy no space. */
.pl-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pl-icon-sm {
  width: 14px;
  height: 14px;
  flex: none;
}

.pl-actions-center {
  justify-content: center;
}

/*
 * The two-column band where the copy is taller than the panel beside it. Centred, the
 * code sample floats halfway down the steps and lines up with nothing; aligned to the
 * top it sits level with the heading, which is where a reader looks for it.
 */
.pl-grid-top {
  align-items: start;
}

/*
 * The intro row of the "how it works" band: copy on the left, code sample on the right,
 * with the three steps as their own full-width row underneath.
 *
 * It was one grid, and the steps were a single column beside the code. The copy column
 * came out 835px tall against a 449px panel, so half the band's right side was 385px of
 * nothing. No amount of shortening the steps closes a gap that size — three stacked
 * cards are nearly twice the height of the panel whatever they say — so the shape had to
 * change rather than the copy.
 */
.pl-how-top {
  margin-bottom: 46px;
}

/* ───────────────────────────────────────────────────────── the denominator ── */

/*
 * Two panels, side by side: what the category shows, and what Plinth shows instead.
 * The second carries the brand border because the difference between them IS the
 * product, and a reader skimming should be able to tell which one is the claim.
 */
.pl-versus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pl-versus-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px;
  border-radius: var(--pl-radius);
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-inset);
  min-width: 0;
}

.pl-versus-card.is-ours {
  box-shadow: inset 0 0 0 2px var(--pl-green);
}

.pl-versus-kind {
  color: var(--pl-muted);
  font-size: 0.75rem;
  font-weight: 720;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pl-versus-card.is-ours .pl-versus-kind {
  color: var(--pl-green);
}

/*
 * The figure and its denominator, on one line, at two sizes. Same baseline, because
 * the point of the pairing is that the denominator is PART of the number rather than
 * a footnote under it.
 */
.pl-versus-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--pl-mono);
  font-size: 2.4rem;
  font-weight: 640;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--pl-heading);
  font-variant-numeric: tabular-nums;
}

.pl-versus-figure span {
  font-family: var(--pl-sans);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--pl-muted);
}

.pl-versus-what {
  color: var(--pl-muted);
  font-size: 0.9375rem;
}

.pl-versus-card p:last-child {
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--pl-border);
  color: var(--pl-muted);
  font-size: 0.875rem;
}

/* ─────────────────────────────────────────────────────── the third state ── */

/*
 * The boundary section has THREE states, not two, and the third gets its own block
 * rather than a bullet inside one of the others. The product's own public page learned
 * this the hard way: collapsing "never" and "only if you ask for it" into one list is
 * exactly how a published promise became false.
 */
.pl-conditional {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding: 26px;
  border-radius: var(--pl-radius);
  background: var(--pl-surface);
  box-shadow: var(--pl-shadow-inset);
  border-left: 3px solid var(--pl-warn);
}

.pl-conditional > p {
  color: var(--pl-muted);
  font-size: 0.9375rem;
}

.pl-conditional ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 22px;
  color: var(--pl-muted);
  font-size: 0.9375rem;
}

.pl-conditional li::marker {
  color: var(--pl-warn);
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────── the admission ── */

/*
 * A landing page that states its own central claim is unproven is unusual, and this
 * one is not decorated to look like a feature. Plain ground, one rule above it, the
 * same measure as the prose around it.
 */
.pl-admission {
  max-width: 68ch;
  padding: 28px 0 0;
  border-top: 2px solid var(--pl-border-strong);
}

.pl-admission h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
}

.pl-admission p {
  margin-top: 14px;
  color: var(--pl-muted);
  font-size: 1.0625rem;
}

.pl-admission a {
  color: var(--pl-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .pl-versus {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .pl-versus-card,
  .pl-conditional {
    padding: 22px;
  }
}