/* Limitguard stylesheet ("Pakbon", 2026-10), the one stylesheet of every page: fonts,
   colour tokens, the page shell, header and footer, the home and /developers/ sections,
   and the shared pieces every page uses (tables, the facts box, the final ink band), then
   the subpage prose (body.pb.sub). Motion runs only under html.js and only animates
   transform, opacity and clip-path; without JS, or with reduced motion, everything shows
   in its final state. */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-latin-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/plex-sans-latin-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/plex-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* Fallbacks sized to the web fonts' metrics (fontTools, Latin sample text), so the swap
   barely moves a line. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 104.6%; ascent-override: 93.5%; descent-override: 24.4%; line-gap-override: 0%; }
@font-face { font-family: "Plex Sans Fallback"; src: local("Arial"); size-adjust: 101.6%; ascent-override: 100.9%; descent-override: 27.1%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Courier New"); size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; }

/* No data-theme attribute means System: the media query decides, live. A stored Light or
   Dark choice sets data-theme before first paint (the inline script in every head). */
:root {
  --paper: #F3EEE2;
  --slip: #FBF8F1;
  --ticket: #E9E1CD;
  --ink: #14201A;
  --ink-2: #3E4A43;
  --rule: #CFC8B4;
  --wash: rgba(20, 32, 26, .06);
  --accent: #0A6B4A;
  --green: #0A6B4A;
  --amber: #9A5B00;
  --crimson: #B3261E;
  --band: #14201A;
  --band-text: #F3EEE2;
  --slot-edge: transparent;
  --serif: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --sans: "IBM Plex Sans", "Plex Sans Fallback", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Plex Mono Fallback", "Courier New", monospace;
  --perf-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='6'%3E%3Crect x='1.0' y='2.3' width='4.8' height='1.8' rx='0.9'/%3E%3Crect x='9.2' y='1.6' width='5.6' height='2.0' rx='1.0'/%3E%3Crect x='19.2' y='1.6' width='3.6' height='2.0' rx='1.0'/%3E%3Crect x='26.3' y='1.4' width='5.2' height='2.4' rx='1.2'/%3E%3Crect x='35.2' y='1.8' width='6.0' height='2.5' rx='1.3'/%3E%3Crect x='45.4' y='2.5' width='7.4' height='1.6' rx='0.8'/%3E%3Crect x='56.7' y='1.9' width='4.1' height='1.7' rx='0.9'/%3E%3Crect x='65.9' y='2.0' width='4.2' height='2.2' rx='1.1'/%3E%3Crect x='74.2' y='1.7' width='5.7' height='1.7' rx='0.8'/%3E%3Crect x='83.6' y='1.8' width='6.2' height='2.0' rx='1.0'/%3E%3Crect x='94.5' y='2.3' width='5.3' height='1.9' rx='0.9'/%3E%3Crect x='104.6' y='1.9' width='4.5' height='2.2' rx='1.1'/%3E%3Crect x='114.4' y='2.5' width='6.4' height='1.9' rx='0.9'/%3E%3Crect x='124.3' y='1.5' width='5.2' height='2.4' rx='1.2'/%3E%3Crect x='133.9' y='2.1' width='3.7' height='2.3' rx='1.1'/%3E%3Crect x='142.1' y='2.2' width='7.0' height='1.9' rx='1.0'/%3E%3Crect x='153.7' y='2.3' width='5.8' height='2.1' rx='1.0'/%3E%3Crect x='165.0' y='1.4' width='5.4' height='2.3' rx='1.1'/%3E%3C/svg%3E");
  --perf-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='180'%3E%3Crect x='2.2' y='1.0' width='2.0' height='4.6' rx='1.0'/%3E%3Crect x='1.7' y='8.9' width='1.8' height='5.3' rx='0.9'/%3E%3Crect x='1.9' y='17.6' width='1.7' height='6.6' rx='0.9'/%3E%3Crect x='2.1' y='28.3' width='1.7' height='7.0' rx='0.8'/%3E%3Crect x='2.2' y='39.8' width='2.4' height='7.0' rx='1.2'/%3E%3Crect x='2.4' y='50.7' width='2.0' height='5.2' rx='1.0'/%3E%3Crect x='1.8' y='61.4' width='1.8' height='4.1' rx='0.9'/%3E%3Crect x='1.7' y='69.2' width='2.2' height='5.4' rx='1.1'/%3E%3Crect x='2.1' y='77.9' width='2.0' height='5.2' rx='1.0'/%3E%3Crect x='2.1' y='88.5' width='2.1' height='6.3' rx='1.1'/%3E%3Crect x='2.0' y='99.6' width='2.5' height='3.7' rx='1.2'/%3E%3Crect x='1.9' y='108.6' width='2.0' height='6.7' rx='1.0'/%3E%3Crect x='1.7' y='118.8' width='1.7' height='6.0' rx='0.8'/%3E%3Crect x='1.6' y='128.5' width='1.9' height='4.1' rx='1.0'/%3E%3Crect x='2.0' y='135.9' width='1.7' height='4.1' rx='0.9'/%3E%3Crect x='1.5' y='143.2' width='2.2' height='7.0' rx='1.1'/%3E%3Crect x='1.6' y='154.0' width='2.0' height='4.9' rx='1.0'/%3E%3Crect x='2.0' y='164.2' width='2.1' height='7.5' rx='1.0'/%3E%3Crect x='1.8' y='175.0' width='1.9' height='3.9' rx='1.0'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16201B; --ink: #ECE7D9; --ink-2: #BDB8AA; --rule: #3B4842; --wash: rgba(236, 231, 217, .08);
    --accent: #10B981; --amber: #E3A54A; --crimson: #F08A80; --band: #2E3D35; --band-text: #ECE7D9; --slot-edge: rgba(236, 231, 217, .3); --bar-l: .25; --bar-m: .55;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #16201B; --ink: #ECE7D9; --ink-2: #BDB8AA; --rule: #3B4842; --wash: rgba(236, 231, 217, .08);
  --accent: #10B981; --amber: #E3A54A; --crimson: #F08A80; --band: #2E3D35; --band-text: #ECE7D9; --slot-edge: rgba(236, 231, 217, .3); --bar-l: .25; --bar-m: .55;
  color-scheme: dark;
}
/* The slip, the ticket, the coupon and code blocks stay paper in dark mode, so they glow. */
.paper-obj, .slip, .ticket, .coupon, .art-chat, .sub pre {
  --paper: #F3EEE2; --ink: #14201A; --ink-2: #3E4A43; --rule: #CFC8B4; --accent: #0A6B4A; --wash: rgba(20, 32, 26, .06);
  --amber: #9A5B00; --crimson: #B3261E;
  color: var(--ink);
}

/* Base, shared by every page */
.pb { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* Older page scripts still name these; they map onto the paper-and-ink tokens. */
  --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-2); --emerald: var(--accent); --emerald-dark: var(--ink);
  --red: var(--crimson); --bg-primary: var(--paper); --bg-secondary: var(--paper); --bg-card: var(--paper); --bg-code: var(--wash); --border: var(--rule); --border-light: var(--rule); }
.pb *, .pb *::before, .pb *::after { box-sizing: border-box; }
.pb main { background-image: var(--grain); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 200; padding: 12px 16px; background: var(--ink); color: var(--paper); font: 600 16px/1.4 var(--sans); }
.skip-link:focus { top: 8px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Buttons: square, ink. */
.pb .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 1.5px solid var(--ink); border-radius: 0; font: 600 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.pb .btn-ink, .pb .btn-primary { background: var(--ink); color: var(--paper); }
.pb .btn-ink:hover, .pb .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.pb .btn-line { background: transparent; color: var(--ink); }
.pb .btn-line:hover { background: var(--ink); color: var(--paper); }
.pb .btn-sm { min-height: 44px; padding: 8px 14px; font-size: 15px; }
.pb a:focus-visible, .pb button:focus-visible, .pb summary:focus-visible, .pb input:focus-visible, .pb select:focus-visible, .pb textarea:focus-visible, .pb [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Header */
.site-header { position: relative; z-index: 50; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule); font-family: var(--sans); }
.site-header ul, .site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-header p, .site-footer p { margin: 0; }
.site-header-row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; }
.wordmark-text { font: 600 22px/1 var(--serif); letter-spacing: -0.01em; font-variation-settings: "opsz" 48; }
.wordmark:hover { color: var(--ink); }
/* The logo: shield and score bars in ink (light to strong), the check in the accent
   (bright emerald in dark mode). */
.wordmark-check { stroke: var(--accent); }
.wordmark-bar-l { opacity: var(--bar-l, .22); }
.wordmark-bar-m { opacity: var(--bar-m, .5); }
.site-menu { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; }
.site-nav ul { display: flex; gap: 24px; }
.site-nav a { display: inline-block; padding: 12px 0 11px; line-height: 20px; color: var(--ink); font-size: 15px; text-decoration: none; border-bottom: 1px solid transparent; }
.site-nav a:hover { border-bottom-color: currentColor; color: var(--ink); }
.site-tools { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.lang-switch { display: flex; align-items: center; font: 500 13px/1 var(--mono); letter-spacing: .06em; }
.lang-switch > * { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 44px; padding: 0 4px; }
.lang-switch [lang="en"] { order: 0; }
.lang-switch [lang="nl"] { order: 2; }
.lang-switch::after { content: "/"; order: 1; color: var(--ink-2); }
.lang-cur { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.lang-alt { color: var(--ink-2); text-decoration: none; }
.lang-alt:hover { color: var(--ink); }

/* Theme: System, Light, Dark, a radio group. The checked radio is the mode in force. */
.theme-switch { display: inline-flex; border: 1px solid var(--rule); }
.theme-switch button { min-height: 32px; padding: 0 9px; background: none; border: 0; border-radius: 0; color: var(--ink-2); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.theme-switch button + button { border-left: 1px solid var(--rule); }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
/* Without JavaScript the switch could not work, so it is not shown. */
html:not(.js) .theme-switch { display: none; }

.sign-in { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 15px; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.sign-in:hover { color: var(--ink); text-decoration-color: currentColor; }
/* On the ink bands the focus ring is the band's own text colour, so it shows in both themes. */
.pb .stat :focus-visible, .pb .final :focus-visible { outline-color: var(--band-text); }
.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 12px; background: none; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.menu-bars { position: relative; width: 16px; height: 2px; background: currentColor; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.menu-bars::before { top: -5px; }
.menu-bars::after { top: 5px; }
.menu-toggle[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars::after { top: 0; transform: rotate(-45deg); }

/* Footer */
.site-footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--ink); font: 400 16px/1.6 var(--sans); padding: 64px 0 40px; }
.site-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
.foot-h { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px !important; }
.foot-col li { color: var(--ink-2); }
.foot-col li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-footer a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.site-footer a:hover { text-decoration-color: currentColor; color: var(--ink); }
.site-footer .wordmark { text-decoration: none; align-self: start; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Each icon is 38px, so the li pads it to the 44px touch target the other footer links keep. */
.site-footer .foot-social { display: flex; flex-wrap: wrap; gap: 0; margin-left: -3px; }
.foot-social li { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.site-footer .foot-social-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule); background: var(--wash); color: var(--ink-2); text-decoration: none; transition: color .15s, border-color .15s, background-color .15s; }
.site-footer .foot-social-link:hover, .site-footer .foot-social-link:focus-visible { color: var(--ink); border-color: var(--ink); background: transparent; }
.foot-line { margin-top: 40px; }
.foot-line p { border-top: 1px solid var(--rule); padding-top: 16px; font-size: 16px; color: var(--ink-2); }

.site-nav a, .sign-in, .lang-switch, .header-cta { white-space: nowrap; }
/* Between the phone menu and a wide screen the long link label is the first thing to go. */
@media (max-width: 1200px) and (min-width: 961px) {
  .site-nav .nav-long { display: none; }
  .site-header-row, .site-menu, .site-tools { gap: 18px; }
}
/* The header folds into a menu below 960px: the wordmark, the button and Menu on one
   row, the links, language and theme in a panel under it. Without JavaScript the panel
   simply stays open. */
@media (max-width: 960px) {
  .site-header-row { flex-wrap: wrap; gap: 0 12px; }
  .wordmark { margin-right: auto; }
  .js .menu-toggle { display: inline-flex; }
  .site-menu { order: 5; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 16px; }
  .js .site-menu:not(.open) { display: none; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li { border-top: 1px solid var(--rule); }
  .site-nav a { display: block; padding: 13px 0 14px; line-height: 20px; font-size: 17px; }
  .site-tools { margin: 0; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
  .lang-switch > * { min-width: 44px; font-size: 14px; }
  .theme-switch button { min-height: 44px; min-width: 44px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 860px) {
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .site-footer .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .wordmark-text { font-size: 20px; }
  .site-header-row { gap: 0 8px; }
  .header-cta.btn-sm { padding: 8px 10px; font-size: 14px; }
}
/* The longest button label (NL "Probeer 5 leads gratis") still fits beside the wordmark
   and Menu on one row at 360 px. */
@media (max-width: 440px) {
  .site-header-row { gap: 0 6px; }
  .wordmark { gap: 6px; }
  .wordmark-text { font-size: 18px; }
  .header-cta.btn-sm { padding: 8px; font-size: 13px; letter-spacing: -0.005em; }
}
/* Narrow phones: Menu shows as its icon; the word stays for screen readers. */
@media (max-width: 480px) {
  .menu-toggle { justify-content: center; padding: 0; width: 44px; }
  .menu-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  .site-footer-grid { grid-template-columns: 1fr; }
}

/* ---- Page sections (home, developers, and the shared pieces every page uses) ---- */

:root {
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cpolygon points='0,0 2.3,6.1 4.6,2.9 7.7,6.6 10.8,1.9 12.8,8.1 14.9,2.9 18.6,8.8 22.3,1.2 25.1,6.7 27.8,2.4 30.9,9.1 33.9,1.3 36.4,9.2 38.8,3.0 42.5,9.2 46.2,2.5 49.7,6.9 53.2,1.8 55.9,6.1 58.6,0.6 61.2,7.0 63.7,2.2 67.6,7.8 71.5,2.8 75.5,9.8 79.5,1.4 81.9,6.9 84.4,1.0 86.8,8.5 89.2,2.8 92.9,7.9 96.6,2.1 100.2,6.3 103.8,2.2 107.6,9.1 111.4,2.4 114.4,6.7 117.3,2.5 120,6 120,0'/%3E%3C/svg%3E");
  --ink-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.9 1.95'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Base */
.pb h1, .pb h2, .pb h3, .pb p, .pb ol, .pb ul, .pb dl, .pb dd, .pb figure, .pb pre { margin: 0; }
.pb ol, .pb ul { padding: 0; list-style: none; }
.pb main a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.pb main a:hover { color: var(--accent); }
.pb a.btn { text-decoration: none; }
.pb a.btn-ink, .pb a.btn-ink:hover { color: var(--paper); }
.pb a.btn-line:hover { color: var(--paper); }
.pb code { font: 400 .9em/1.4 var(--mono); }
.pb main > section { padding: 96px 0; scroll-margin-top: 16px; }
.pb h1 { font: 600 clamp(2.4rem, 5vw, 4.5rem)/1.05 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.pb h2 { font: 600 clamp(1.9rem, 3.4vw, 2.75rem)/1.1 var(--serif); letter-spacing: -0.015em; text-wrap: balance; margin-bottom: 40px; }
.pb h3 { font: 600 19px/1.4 var(--sans); }
.lead { font: 400 22px/1.4 var(--serif); }
.label, .tagline, .way-label, .section-label { font: 500 13px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* One grid: narrow blocks keep a reading measure but stay on the left edge. */
.narrow > * { max-width: 760px; }

/* Hero */
.hero { padding: 64px 0 96px !important; }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.hero-copy { grid-column: 1 / span 7; padding-top: 40px; }
.tagline, .section-label { display: block; color: var(--accent); margin-bottom: 24px; }
.hero h1 { max-width: 13ch; margin-bottom: 24px; }
.hero .lead { max-width: 30ch; margin-bottom: 40px; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.assure { font-size: 16px; color: var(--ink-2); }
.crumbs { font: 400 13px/1.4 var(--mono); color: var(--ink-2); margin-bottom: 16px; }

/* The printer and the slip */
.hero-slip { grid-column: 8 / -1; justify-self: end; width: clamp(320px, 28vw, 380px); }
.printer-slot { position: relative; z-index: 2; height: 12px; margin: 0 -14px; background: #14201A; box-shadow: inset 0 -4px 0 #050906, 0 0 0 1px var(--slot-edge); }
.slip-well { position: relative; clip-path: inset(0 -60px -80px -60px); }
.slip-shadow { position: absolute; inset: 0 6px 14px; box-shadow: 0 18px 30px -18px rgba(20, 32, 26, .45); }
.slip { position: relative; background: var(--slip); font: 400 14px/1.5 var(--mono); padding: 20px 20px 34px; }
.hero-slip .slip { padding-bottom: 128px; }
.hero-slip .slip, .slip-live { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, var(--torn) left bottom / 120px 10px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, var(--torn) left bottom / 120px 10px repeat-x; }
.slip-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-bottom: 14px; margin-bottom: 4px; position: relative; font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.slip-head::after, .slip-total::before { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: var(--ink); -webkit-mask: var(--perf-h) left center / 180px 6px repeat-x; mask: var(--perf-h) left center / 180px 6px repeat-x; opacity: .55; }
.slip-head::after { bottom: 0; }
.slip-notice { color: var(--ink-2); }
.slip-rows { counter-reset: row; }
.slip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: start; min-height: 44px; padding: 9px 0; border-bottom: 1px solid rgba(20, 32, 26, .12); }
.slip-co { font-weight: 500; overflow-wrap: anywhere; }
.slip-ck, .slip-src { font-size: 12.5px; color: var(--ink-2); }
.slip-src { text-align: right; text-transform: uppercase; letter-spacing: .04em; }
.verdict { grid-row: span 1; align-self: center; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; padding: 5px 6px 4px; border: 1.5px solid currentColor; color: var(--green); transform: rotate(-1.5deg); }
.slip-row:nth-child(2n) .verdict { transform: rotate(1deg); }
.v-review { color: var(--amber); }
.v-block { color: var(--crimson); }
.slip-total { position: relative; padding-top: 16px; margin-top: 10px; font-size: 13px; letter-spacing: .02em; }
.slip-total::before { top: 0; }
.stamp { position: absolute; right: 22px; bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px 9px; border: 3px double var(--green); color: var(--green); text-transform: uppercase; transform: rotate(var(--rot, -2deg)); mix-blend-mode: multiply; -webkit-mask: var(--ink-noise) 0 0 / 180px 180px; mask: var(--ink-noise) 0 0 / 180px 180px; pointer-events: none; }
.stamp-top, .stamp-sub { font: 500 10px/1.2 var(--mono); letter-spacing: .14em; }
.stamp-main { font: 600 28px/1 var(--serif); letter-spacing: .04em; font-variation-settings: "opsz" 72; }

/* Motion: the slip prints, then the stamp lands. */
@keyframes lg-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lg-feed { from { transform: translateY(-30px); } to { transform: translateY(0); } }
@keyframes lg-stamp { 0% { opacity: 0; transform: rotate(var(--rot, -2deg)) scale(1.06); } 1% { opacity: 1; transform: rotate(var(--rot, -2deg)) scale(1.06); } 45% { opacity: 1; transform: rotate(var(--rot, -2deg)) scale(.985); } 100% { opacity: 1; transform: rotate(var(--rot, -2deg)) scale(1); } }
.js .hero-slip .slip { animation: lg-feed 1320ms steps(6, end) 300ms both; }
.js .hero-slip .slip-row, .js .hero-slip .slip-total { animation: lg-type 200ms steps(14) both; animation-delay: calc(300ms + var(--i) * 220ms); }
.js .hero-slip .stamp { animation: lg-stamp 220ms steps(1, end) 1900ms both; }
.js .split-with .fill-row { animation: lg-type 200ms steps(14) both; animation-delay: calc(250ms + var(--i) * 220ms); }
.wait, .wait * { animation-play-state: paused !important; }

/* Stat band */
.pb .stat { background: var(--band); color: var(--band-text); padding: 64px 0; }
.stat-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.pb .stat-h { grid-column: 1 / span 9; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; font: 400 22px/1.4 var(--serif); letter-spacing: 0; }
.stat-num { display: inline-block; font: 600 clamp(64px, 9vw, 96px)/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 144; }
.stat-line { max-width: 26ch; }
.stat-src { grid-column: 10 / -1; font: 400 14px/1.5 var(--mono); }
.pb .stat a { color: var(--band-text); text-decoration-color: currentColor; }

/* Split sheet: before and after */
.split-grid { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 24px; }
.split-side .label { margin-bottom: 16px; color: var(--ink-2); }
.split-with .label { color: var(--accent); }
.split-perf { background: var(--ink); opacity: .5; -webkit-mask: var(--perf-v) center top / 6px 180px repeat-y; mask: var(--perf-v) center top / 6px 180px repeat-y; }
.sheet { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--sans); background: #FFFFFF; color: #14201A; }
.sheet th, .sheet td { border: 1px solid #C9C9C9; padding: 10px; text-align: left; height: 44px; }
.sheet th { background: #EEEEEE; font: 500 12px/1 var(--mono); color: #444444; }
.sheet .sheet-n { width: 34px; background: #EEEEEE; color: #444444; font: 400 12px/1 var(--mono); text-align: center; }
.sheet-disputed td:not(.sheet-n) { background: #F6F2E4; }
.client-note { position: relative; display: inline-block; margin: 16px 0 0 34px; padding: 8px 12px; border: 1px solid var(--ink); background: var(--paper); font-size: 16px; }
.client-note::before { content: ""; position: absolute; left: 18px; top: -7px; width: 12px; height: 12px; background: var(--paper); border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); transform: rotate(45deg); }
.split-caption { margin-top: 24px; font-size: 16px; color: var(--ink-2); }
.slip-rows.paper { background: var(--slip); padding: 4px 20px 8px; font: 400 14px/1.5 var(--mono); --ink: #14201A; --ink-2: #3E4A43; --amber: #9A5B00; --crimson: #B3261E; color: var(--ink); }
.split-note { margin-top: 16px; font-size: 16px; }

/* Offer ticket */
.ticket { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); background: var(--ticket); --notch: 16px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000) , radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000), radial-gradient(circle 12px at 60% 0, #0000 98%, #000), radial-gradient(circle 12px at 60% 100%, #0000 98%, #000);
  -webkit-mask-composite: source-in; mask: radial-gradient(circle var(--notch) at 0 50%, #0000 98%, #000), radial-gradient(circle var(--notch) at 100% 50%, #0000 98%, #000), radial-gradient(circle 12px at 60% 0, #0000 98%, #000), radial-gradient(circle 12px at 60% 100%, #0000 98%, #000); mask-composite: intersect; }
.ticket-main { padding: 56px 40px 56px 56px; }
.ticket-main .label { color: var(--ink-2); margin-bottom: 16px; }
.ticket-main h2 { margin-bottom: 24px; }
.ticket-lines li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid rgba(20, 32, 26, .18); }
.ticket-lines li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.ticket-stub { position: relative; padding: 56px 56px 56px 48px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.ticket-stub::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 6px; background: var(--ink); opacity: .55; -webkit-mask: var(--perf-v) center top / 6px 180px repeat-y; mask: var(--perf-v) center top / 6px 180px repeat-y; }
.ticket-price { font: 600 72px/1 var(--serif); letter-spacing: -0.02em; font-variation-settings: "opsz" 144; }
.ticket-cur { font: 500 18px/1 var(--mono); letter-spacing: .08em; vertical-align: .9em; margin-right: 4px; }
.ticket-per { font-size: 17px; max-width: 30ch; }
.ticket .btn { align-self: start; }
.ticket .btn-ink, .ticket a.btn-ink:hover { background: #14201A; border-color: #14201A; color: #F3EEE2; }
.ticket a.btn-ink:hover { background: #0A6B4A; border-color: #0A6B4A; }

/* Ways */
.ways-list { border-bottom: 1px solid var(--ink); }
.way { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: 24px; align-items: start; padding: 40px 0; border-top: 1px solid var(--ink); scroll-margin-top: 16px; }
.dev .way { grid-template-columns: 3fr 9fr; }
.way-label { color: var(--accent); padding-top: 4px; }
.way-body h3 { font: 400 22px/1.4 var(--serif); margin-bottom: 8px; }
.way-body p { color: var(--ink-2); }
.way-price { font: 500 15px/1.5 var(--mono); color: var(--ink) !important; }
.way-note { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.art { justify-self: end; width: 100%; max-width: 300px; font: 400 12px/1.5 var(--mono); }
.art-csv { background: var(--slip); color: #14201A; padding: 12px 14px; border-left: 3px solid var(--green); }
.art-csv p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-csv p:first-child { color: #3E4A43; }
.lc { text-transform: lowercase; }
.art-pdf { position: relative; width: 150px; height: 190px; background: var(--slip); border: 1px solid var(--rule); padding: 18px 16px; }
.art-pdf::after { content: ""; position: absolute; right: -1px; top: -1px; width: 22px; height: 22px; background: linear-gradient(225deg, var(--paper) 50%, #DCD5C2 50%); }
.pdf-title { font: 600 13px/1.2 var(--serif); color: #14201A; margin-bottom: 12px; }
.pdf-line { display: block; height: 6px; margin-bottom: 9px; background: #D8D2C1; }
.pdf-line.short { width: 55%; }
.pdf-line.mid { width: 75%; }
.pdf-mark { position: absolute; left: 16px; bottom: 16px; padding: 3px 6px 2px; border: 1.5px solid var(--green); color: var(--green); font: 500 11px/1 var(--mono); letter-spacing: .1em; transform: rotate(-3deg); }
.art-chat { border: 1px solid var(--rule); padding: 12px 14px; background: var(--slip); color: var(--ink); }
.art-tag { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px !important; }
.chat-line { font: 400 16px/1.5 var(--sans); padding: 6px 0; }
.chat-reply { border-top: 1px dashed var(--rule); }
.chat-who { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* Proof: the live self-check */
.proof-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.proof-copy { grid-column: 1 / span 6; }
.proof-copy p { max-width: 46ch; margin-bottom: 16px; }
.proof-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 500 14px/1.5 var(--mono); }
.live { grid-column: 8 / -1; }
.slip-live { min-height: 360px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.live-badge::before { content: ""; width: 7px; height: 7px; background: var(--green); border-radius: 50%; }
.live-msg { padding: 12px 0; color: var(--ink-2); }
.live-badge[hidden] { display: none; }
/* Without JavaScript there is nothing loading: only the noscript line shows. */
html:not(.js) .live-body > .live-msg, html:not(.js) .skel { display: none; }
.skel span { display: block; height: 12px; margin: 16px 0; background: linear-gradient(90deg, #E8E3D6, #F3EFE5, #E8E3D6); background-size: 200% 100%; }
.skel span:nth-child(2n) { width: 70%; }
@keyframes lg-shimmer { to { background-position: -200% 0; } }
.js .skel span { animation: lg-shimmer 1.4s linear infinite; }
.live[data-state="live"] .slip-row { grid-template-columns: minmax(0, 1fr) auto; }
.slip-v { font-weight: 500; text-align: right; }
.sig .slip-v { color: var(--green); font-size: 12.5px; letter-spacing: .06em; }

/* Pricing ledger */
.ledger { border-top: 1px solid var(--ink); }
.ledger-row { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.ledger-row dt { flex: 1; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ledger-row dt::after { content: ""; flex: 1; min-width: 24px; border-bottom: 2px dotted var(--ink-2); transform: translateY(-5px); opacity: .7; }
.ledger-row dd { font: 500 18px/1.4 var(--mono); font-variant-numeric: tabular-nums; text-align: right; min-width: 8ch; white-space: nowrap; }
.ledger-note { margin-top: 16px; color: var(--ink-2); font-size: 16px; }
.ledger-dev { margin-top: 24px; font-weight: 600; }
.pb .usd-table :is(td, th) + :is(td, th) { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

/* Facts box */
.facts-box, .info-box { max-width: 62ch; margin: 0; border: 1px solid var(--ink); padding: 40px; }
.facts-box h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 16px; }
.facts-box p { font: 400 19px/1.55 var(--serif); }
.facts-wide { max-width: 80ch; }
.facts-wide .hero-definition { font: 400 19px/1.55 var(--serif); margin-bottom: 16px; }
.facts-wide .hero-definition strong { font-weight: 400; }
.hero-facts li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }

/* FAQ */
.faq-item { border-top: 1px solid var(--ink); }
.faq-item:last-of-type { border-bottom: 1px solid var(--ink); }
.faq-item summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 400 24px/1 var(--mono); color: var(--accent); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-q { font: 400 22px/1.35 var(--serif) !important; }
.faq-a { padding: 0 0 24px; max-width: 62ch; color: var(--ink-2); }

/* Final band and the coupon */
.pb .final { background: var(--band); color: var(--band-text); }
.final-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.final h2 { grid-column: 1 / span 6; margin: 0; color: var(--band-text); }
.final-action { grid-column: 8 / -1; }
.coupon { display: flex; width: 100%; max-width: 440px; min-height: 150px; background: var(--paper-const, #F3EEE2); text-decoration: none !important; }
.coupon-stub { position: relative; flex: none; width: 54px; display: flex; align-items: center; justify-content: center; background: #F3EEE2; clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 40%, 100% 60%, 100% 80%, 100% 100%, 0 100%); transition: clip-path 350ms steps(4, end); }
.coupon-stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #3E4A43; }
.coupon-main { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px 28px; background: #F3EEE2; color: #14201A; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 80%, 0 60%, 0 40%, 0 20%); transition: transform 350ms cubic-bezier(.3, .7, .2, 1), clip-path 350ms steps(4, end); }
.coupon-main::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 6px; background: #14201A; opacity: .55; -webkit-mask: var(--perf-v) center top / 6px 180px repeat-y; mask: var(--perf-v) center top / 6px 180px repeat-y; }
.coupon-title { font: 600 24px/1.1 var(--serif); letter-spacing: .08em; text-transform: uppercase; font-variation-settings: "opsz" 72; }
.coupon-terms { font: 400 15px/1.4 var(--sans); }
.coupon-redeem { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #0A6B4A; }
.coupon:hover .coupon-main { transform: translateX(3px); }
.coupon:focus-visible { outline: 2px solid var(--band-text); outline-offset: 4px; }
.coupon.torn .coupon-main { transform: translate(26px, 10px) rotate(3deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 5px 80%, 1px 60%, 6px 40%, 2px 20%); }
.coupon.torn .coupon-stub { clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 20%, 100% 40%, calc(100% - 4px) 60%, calc(100% - 1px) 80%, 100% 100%, 0 100%); }
.final-secondary { margin-top: 16px; font-size: 16px; }
.pb .final-secondary a { color: var(--band-text); text-decoration-color: currentColor; }

/* Developers page */
/* The developers hero slip: the same printer slot, torn edge and stamp, holding one call. */
.code-hero { width: clamp(320px, 32vw, 440px); }
.hero-slip.code-hero .slip { padding-bottom: 34px; }
.slip-code { overflow-x: auto; padding: 14px 0; margin: 0; font: 400 13px/1.6 var(--mono); }
.slip-code code { font: inherit; white-space: pre; }
.slip-resp { margin-bottom: 12px; border-top: 1px solid rgba(20, 32, 26, .12); }
.dev-hero .lead { margin-bottom: 16px; }
.lead-2 { max-width: 46ch; margin-bottom: 40px !important; color: var(--ink-2); }
.code-note { font: 400 16px/1.5 var(--sans); color: var(--ink-2); border-top: 1px solid rgba(20, 32, 26, .15); padding-top: 12px; }
.dev .way-body p { max-width: 64ch; }
.dev .way-body code { overflow-wrap: anywhere; }
.link-ledger { border-top: 1px solid var(--ink); }
.link-ledger li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.link-ledger span { font: 400 13px/1.6 var(--mono); color: var(--ink-2); text-align: right; }

/* Smaller screens */
@media (max-width: 960px) {
  .hero-copy, .hero-slip { grid-column: 1 / -1; }
  .hero-copy { padding-top: 16px; }
  .hero-slip { justify-self: center; }
  .pb .stat-h, .stat-src { grid-column: 1 / -1; }
  .proof-copy, .live { grid-column: 1 / -1; }
  .final h2, .final-action { grid-column: 1 / -1; }
  .way { grid-template-columns: 1fr; gap: 16px; }
  .dev .way { grid-template-columns: 1fr; }
  .art { justify-self: start; }
}
@media (max-width: 760px) {
  .pb main > section { padding: 64px 0; }
  .hero { padding: 40px 0 64px !important; }
  .pb h2 { margin-bottom: 24px; }
  .lead { font-size: 20px; }
  .split-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split-perf { height: 6px; -webkit-mask: var(--perf-h) left center / 180px 6px repeat-x; mask: var(--perf-h) left center / 180px 6px repeat-x; }
  .ticket { grid-template-columns: 1fr; --notch: 12px;
    -webkit-mask: radial-gradient(circle 12px at 0 62%, #0000 98%, #000), radial-gradient(circle 12px at 100% 62%, #0000 98%, #000); mask: radial-gradient(circle 12px at 0 62%, #0000 98%, #000), radial-gradient(circle 12px at 100% 62%, #0000 98%, #000); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .ticket-main { padding: 40px 24px 32px; }
  .ticket-stub { padding: 32px 24px 40px; }
  .ticket-stub::before { left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 6px; -webkit-mask: var(--perf-h) left center / 180px 6px repeat-x; mask: var(--perf-h) left center / 180px 6px repeat-x; }
  .ticket-price { font-size: 64px; }
  .facts-box, .info-box { padding: 24px; }
  .facts-box p { font-size: 18px; }
  .sheet th, .sheet td { padding: 8px 6px; font-size: 13px; }
  .link-ledger li { flex-direction: column; gap: 2px; }
  .link-ledger span { text-align: left; }
}

/* Reduced motion: printed slip, stamp in place, no type-on, no tear. */
@media (prefers-reduced-motion: reduce) {
  .js .hero-slip .slip, .js .hero-slip .slip-row, .js .hero-slip .slip-total, .js .hero-slip .stamp, .js .split-with .fill-row, .js .skel span { animation: none !important; }
  .coupon-main, .coupon-stub { transition: none; }
}

/* Stand-alone links are tap targets of at least 44px. */
.proof-links a, .ledger-dev a, .final-secondary a, .way-price a, .stat-src a, .link-ledger a, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.link-ledger li { padding: 4px 0; align-items: center; }

/* ---- Shared table: a ruled ledger, on every page ---- */
.pb table:not(.sheet) { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 16px; line-height: 1.5; }
.pb table:not(.sheet) th { text-align: left; vertical-align: bottom; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ink); }
.pb table:not(.sheet) td { vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); }
.pb table:not(.sheet) :is(td, th):last-child { padding-right: 0; }
.pb table:not(.sheet) td code { white-space: nowrap; overflow-wrap: normal; }
/* Links in a cell get a 44px tap area without moving the row. */
.pb table:not(.sheet) td a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.price-table td[data-tier], .price-table td[data-price], .price-table td[data-per1000] { font: 500 15px/1.5 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Wide tables scroll inside their own box, never the page. */
.table-scroll { max-width: 100%; overflow-x: auto; margin: 24px 0 32px; -webkit-overflow-scrolling: touch; }
.table-scroll > table { margin: 0 !important; }

/* ---- Subpages (body.pb.sub): the home hero pattern, then prose on the same grid ---- */
.sub .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pb main > .subpage-hero { padding: 64px 0; border-bottom: 1px solid var(--ink); }
.subpage-hero h1 { max-width: 20ch; margin-bottom: 24px; }
.subpage-hero p { max-width: 46ch; font: 400 22px/1.4 var(--serif); margin-bottom: 16px; }
.subpage-hero p:last-child { margin-bottom: 0; }
.breadcrumb { margin-bottom: 8px; font: 400 13px/1.4 var(--mono); color: var(--ink-2); }
.sub .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink-2); }
.pb main > .subpage-content { padding: 40px 0 96px; }
.subpage-content .container > :is(p, ul, ol, h2, h3, .tool-price, .agent-small, section) { max-width: 72ch; }
.subpage-content h2 { margin: 64px 0 24px; }
.subpage-content .container > h2:first-child { margin-top: 24px; }
.subpage-content h3 { margin: 32px 0 8px; }
.subpage-content p, .subpage-content li, .subpage-content dd { margin: 0 0 16px; }
.subpage-content ul, .subpage-content ol { margin: 0 0 24px; }
.subpage-content ul > li { position: relative; padding-left: 24px; }
.subpage-content ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; background: var(--accent); }
.subpage-content ol { counter-reset: n; }
.subpage-content ol > li { position: relative; padding-left: 36px; counter-increment: n; }
.subpage-content ol > li::before { content: counter(n) "."; position: absolute; left: 0; font: 500 15px/1.6 var(--mono); color: var(--accent); }
.sub code { background: var(--wash); padding: .08em .3em; overflow-wrap: anywhere; }
.sub strong { font-weight: 600; }
/* Code blocks: a paper slip under an ink slot bar, as on /developers/. */
.sub pre { margin: 16px 0 24px; padding: 18px 20px; background: #FBF8F1; color: #14201A; border-top: 12px solid #14201A; font: 400 14px/1.65 var(--mono); overflow-x: auto; max-width: 100%; }
.sub pre code { background: none; padding: 0; font: inherit; white-space: pre; overflow-wrap: normal; }
.sub pre.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.info-box { margin: 24px 0 32px; }
.info-box h3 { margin: 0 0 16px; font: 600 clamp(1.4rem, 2.2vw, 1.75rem)/1.2 var(--serif); }
.info-box p { font: 400 19px/1.55 var(--serif); margin: 0; }
.info-box p + p { margin-top: 12px; }
.info-box pre { margin: 0; }
.tool-price { padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
/* FAQ in the guides: the home FAQ's rules and type, without the disclosure. */
.subpage-content .faq-q { padding: 20px 0 8px; margin: 0; border-top: 1px solid var(--ink); }
.subpage-content .faq-a { max-width: 62ch; padding-bottom: 16px; }

/* Security: the request path as a ledger, the posture as figures. */
.architecture-flow { margin: 24px 0 32px; border-top: 1px solid var(--ink); }
.flow-step { display: grid; grid-template-columns: 40px minmax(0, 12rem) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.flow-num { font: 500 15px/1.5 var(--mono); color: var(--accent); }
.flow-label { font-weight: 600; }
.flow-desc { color: var(--ink-2); }
.flow-arrow { display: none; }
.security-posture-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 24px 0 32px; border-top: 1px solid var(--ink); }
.posture-card { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.posture-value { font: 600 34px/1.1 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; margin-bottom: 6px; }
.posture-label { color: var(--ink-2); }

/* SLA tiers: three ruled columns, the middle one marked. */
.sla-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 24px 0 32px; border-top: 1px solid var(--ink); }
.sla-card { padding: 24px 0 8px; border-bottom: 1px solid var(--rule); }
.sla-card.featured { border-top: 4px solid var(--accent); margin-top: -1px; }
.sla-card h3 { margin: 0 0 4px; font: 500 13px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sla-uptime { font: 600 40px/1.1 var(--serif); letter-spacing: -0.01em; }
.sla-note { margin: 8px 0 16px !important; color: var(--ink-2); }

/* Code with coloured parts (versioning): ink-like and readable on the paper block. */
.hl-ok { color: #0A6B4A; }
.hl-key { color: #1F4E79; }
.hl-val { color: #5B3A00; }
.hl-dim { color: #4F5A53; }

/* The final band on a page whose action is a pair of buttons (developers). */
.final .btn-paper { background: var(--band-text); border-color: var(--band-text); color: var(--band); }
.final .btn-paper:hover { background: var(--accent); border-color: var(--accent); color: var(--band-text); }
.final .btn-band { background: transparent; border-color: var(--band-text); color: var(--band-text); }
.final .btn-band:hover { background: var(--band-text); color: var(--band); }
.pb .final a.btn-paper, .pb .final a.btn-band { text-decoration: none; }
.final-buttons { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 960px) {
  .security-posture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sla-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pb main > .subpage-hero { padding: 40px 0; }
  .subpage-hero p { font-size: 20px; }
  .pb main > .subpage-content { padding: 24px 0 64px; }
  .subpage-content h2 { margin-top: 48px; }
  .flow-step { grid-template-columns: 32px minmax(0, 1fr); }
  .flow-desc { grid-column: 2; }
  .info-box p { font-size: 18px; }
  /* Long text columns keep a readable measure; the box scrolls instead. */
  .pb table:not(.sheet) td { min-width: 9ch; }
  /* The long text column of a wide price table gets a reading width and the box scrolls,
     so rows stay short instead of every column squeezed into tall, mostly empty rows. */
  .price-table:is(#tiered, #flat, #free) td:last-child, #compare td:nth-child(6) { min-width: 34ch; }
}
@media (max-width: 480px) {
  .security-posture-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .sub .container { padding-left: 16px; padding-right: 16px; }
  .sub pre { padding: 16px; font-size: 13px; }
}
/* The euro ledger on /pricing/: the home pricing ledger, at the prose measure. */
.sub .ledger { max-width: 72ch; margin: 16px 0 24px; }
.sub .ledger-row dd { margin: 0; }

/* Meet Claire: hero link, quote figures, video dialog (home) and the /claire/ page. */
.pb .claire-open { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 6px 16px 6px 6px; border: 1px solid var(--rule); border-radius: 40px; color: var(--ink); text-decoration: none; background: var(--paper); transition: border-color .15s; }
.pb .claire-open:hover, .pb .claire-open:focus-visible { border-color: var(--ink); }
.pb .claire-avatar { display: block; flex: none; border-radius: 50%; object-fit: cover; }
.pb .claire-open-text { display: flex; flex-direction: column; line-height: 1.25; }
.pb .claire-open-title { font: 600 16px/1.25 var(--sans); }
.pb .claire-open-sub { font: 400 14px/1.3 var(--sans); color: var(--ink-2); }
.pb .claire-play { flex: none; width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--accent); }
.pb .claire-quote { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; margin: 28px 0 0; }
.pb .claire-quote img { grid-row: 1 / 3; }
.pb .claire-quote blockquote { margin: 0; }
.pb .claire-quote blockquote p { margin: 0; font: 400 20px/1.3 var(--serif); }
.pb .claire-quote figcaption { font: 400 14px/1.3 var(--sans); color: var(--ink-2); }
.pb .claire-quote figcaption a { color: inherit; }
.pb .final .claire-quote blockquote p, .pb .final .claire-quote figcaption { color: inherit; }
.pb .final .claire-quote figcaption { opacity: .8; }
.pb .claire-dialog { width: min(960px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: transparent; color: var(--ink); }
.pb .claire-dialog::backdrop { background: rgba(10, 16, 13, .82); }
.pb .claire-dialog-box { position: relative; background: var(--paper); padding: 12px; }
.pb .claire-dialog video, .pb .claire-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #16201a; }
.pb .claire-close { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(22, 32, 26, .78); color: #F3EEE2; font: 400 28px/1 var(--sans); cursor: pointer; }
.pb .claire-close:hover, .pb .claire-close:focus-visible { background: var(--accent); }
/* Captions in the series style (the burned-in captions of the episodes), not the browser default. */
.pb .claire-dialog video::cue { font: 600 18px/1.3 var(--sans); color: #ECE7D9; background: rgba(22, 32, 26, .88); }
.final-head { grid-column: 1 / span 6; }
.final-head h2 { margin: 0; }
@media (max-width: 960px) { .final-head { grid-column: 1 / -1; } }
.pb .claire-dialog-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 12px 0 0; }
.pb .claire-more { color: var(--ink); }
.pb .claire-video { margin: 0 0 24px; }
.pb .claire-video figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.pb .claire-transcript { margin: 0 0 32px; }
.pb .claire-transcript summary { cursor: pointer; }
.pb .claire-transcript summary h2 { display: inline; font-size: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .pb .claire-dialog[open] .claire-dialog-box { animation: claire-in .2s ease-out; }
  @keyframes claire-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}