/* Generated from Graphite tokens + public-page CSS. Run node scripts/generate-public-styles.mjs. */
:root {
  color-scheme: light;

  /* Surfaces & lines */
  --bg: oklch(99% 0.002 270);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97.5% 0.004 270);
  --surface-3: oklch(94.5% 0.005 270);
  --border: oklch(91% 0.006 270);          /* decorative dividers, card edges */
  --border-strong: oklch(83% 0.008 270);   /* hover edges, emphasised dividers */
  --border-control: oklch(62% 0.012 270);  /* form-control boundary — 3:1 (WCAG 1.4.11) */
  --overlay: oklch(18% 0.01 270 / 0.45);   /* modal scrim */

  /* Text */
  --text: oklch(18% 0.01 270);
  --text-2: oklch(32% 0.012 270);
  --muted: oklch(48% 0.014 270);
  --muted-strong: oklch(38% 0.014 270);

  /* Brand · sage green. Hex anchors #4A7C59 (primary) · #2D5A3D (strong). */
  --primary: #4A7C59;
  --primary-fg: #ffffff;
  --primary-strong: #2D5A3D;
  --primary-soft: oklch(96% 0.025 150);
  --primary-soft-strong: oklch(88% 0.06 150);
  --focus-ring: var(--primary);

  /* CTA · vivid emerald reserved for primary actions */
  --cta: oklch(54% 0.15 150);
  --cta-strong: oklch(46% 0.16 150);
  --cta-fg: #ffffff;

  /* Data accent · cyan 195° */
  --accent: oklch(70% 0.16 195);
  --accent-fg: oklch(18% 0.04 195);
  --accent-soft: oklch(94% 0.05 195);

  /* Status. `-strong` is the text-on-soft colour, `-soft` the tint
   * behind a pill or alert, `-fg` the text on a solid `--{status}` fill. */
  --success: oklch(51% 0.15 155);
  --success-strong: oklch(43% 0.14 155);
  --success-soft: oklch(94% 0.05 155);
  --success-fg: #ffffff;
  --warning: oklch(53% 0.15 62);
  --warning-strong: oklch(45% 0.13 58);
  --warning-soft: oklch(95% 0.06 75);
  --warning-fg: #ffffff;
  /* caution — the step BETWEEN success and warning on ordinal scales
   * (health fair, supply low). Never a synonym for warning. */
  --caution: oklch(54% 0.11 88);
  --caution-strong: oklch(46% 0.09 88);
  --caution-soft: oklch(96% 0.06 95);
  --caution-fg: #ffffff;
  --danger: oklch(54% 0.22 25);
  --danger-strong: oklch(46% 0.2 25);
  --danger-soft: oklch(95% 0.05 25);
  --danger-fg: #ffffff;
  --info: oklch(52% 0.14 250);
  --info-strong: oklch(44% 0.13 250);
  --info-soft: oklch(95% 0.03 250);
  --info-fg: #ffffff;

  /* Ink for text on a data-driven fill (a colour a user picked). Theme-
   * independent: the fill does not change with the theme, so neither does the
   * ink. lib/color.ts readableTextOn() chooses between the two. */
  --on-fill-light: oklch(100% 0 0);
  --on-fill-dark: oklch(18% 0.01 270);

  /* Disabled state */
  --disabled-surface: var(--surface-3);
  --disabled-text: var(--muted);

  /* Elevation */
  --elevation-xs: 0 1px 2px 0 oklch(20% 0.01 270 / 0.04);
  --elevation-sm: 0 1px 3px 0 oklch(20% 0.01 270 / 0.08), 0 1px 2px 0 oklch(20% 0.01 270 / 0.04);
  --elevation-md: 0 4px 12px -2px oklch(20% 0.01 270 / 0.08), 0 2px 4px -2px oklch(20% 0.01 270 / 0.05);
  --elevation-lg: 0 12px 32px -8px oklch(20% 0.01 270 / 0.12), 0 4px 8px -4px oklch(20% 0.01 270 / 0.06);

  /* CMYK toner — exact identity; K flips to near-white in dark. */
  --toner-k: #18181b;
  --toner-c: #06b6d4;
  --toner-m: #d946ef;
  --toner-y: #eab308;

  /* Charts. Canvas (ECharts) cannot read CSS variables, so
   * src/design/chartTheme.ts resolves THESE at runtime — never copy them. */
  --chart-1: #4A7C59;
  --chart-2: #06b6d4;
  --chart-3: #f59e0b;
  --chart-4: #2D5A3D;
  --chart-5: #d946ef;
  --chart-6: #fb923c;
  --chart-7: #a78bfa;
  --chart-8: #eab308;
  --chart-color: #EF9F27;  /* colour pages in print-mix charts */
  --chart-bw: #1D9E75;     /* black & white pages in print-mix charts */
  /* Shift identity (analytics + printer detail). Cool, neutral slates that
   * carry no print-mode meaning; lifted for dark below. */
  --shift-1: #5b7a99;
  --shift-2: #6b6f7d;
  --shift-3: #7a6688;
  --shift-4: #5e7d6f;
  --shift-5: #7d6e5e;
  --chart-text: var(--text-2);
  --chart-text-muted: var(--muted);
  --chart-axis: var(--border);
  --chart-grid: var(--surface-3);
  --chart-heat-floor: var(--surface-3);  /* zero cell of a heatmap: reads as "empty", never white on dark */
  --chart-tooltip-bg: var(--surface);
  --chart-tooltip-border: var(--border);

  /* Layering scale (see @utility z-* above) */
  --z-raised: 10;
  --z-sticky: 20;
  --z-nav: 30;
  --z-dropdown: 40;
  --z-modal: 50;
  --z-modal-nested: 55; /* a dialog opened from inside a dialog, or from anywhere (palette) */
  --z-toast: 60;
  --z-tooltip: 70;
  --z-system: 80;       /* banners that must never be covered: impersonation, backend down */

  /* Control & layout metrics */
  --control-h-sm: 2rem;      /* 32px — dense table/toolbar controls */
  --control-h: 2.25rem;      /* 36px — default button/input, touch floor */
  --control-h-lg: 2.75rem;   /* 44px — primary touch targets */
  --page-gutter: 0.75rem;    /* 12px phones; 20px from md (see below) */
  --topbar-h: 3rem;          /* 48px — TopBar height; PageWrapper's top pad and
                              * sticky page bars read it, so they cannot drift */
  --impersonation-banner-h: 1.625rem;  /* 26px — the superadmin "viewing as" strip */
  --topbar-offset: 0px;      /* what sits ABOVE the top bar; .app-shell--impersonating
                              * sets it to the banner height so TopBar, Sidebar, the
                              * main pad and every sticky bar move together */
  /* Page width tiers (see .page-narrow / .page-prose below). A page is
   * fluid by default — it fills the shell between the sidebar and the
   * window edge. These two are the ONLY sanctioned ways to narrow one. */
  --page-narrow-max: 64rem;  /* 1024px — forms and settings panels */
  --page-prose-max: 48rem;   /* 768px — reading measure (~65ch at 16px) */

  /* Date selector chrome — read by components/ui/dateSelectorChrome.ts and
   * the input[type="date"] rule below. */
  --date-selector-border: 1px solid var(--border-strong);
  --date-selector-radius: var(--radius-lg);
  --date-selector-bg: var(--surface-2);
}
.dark {
  color-scheme: dark;

  --bg: oklch(22% 0.014 265);
  --surface: oklch(26% 0.016 265);
  --surface-2: oklch(30% 0.017 265);
  --surface-3: oklch(34% 0.018 265);
  --border: oklch(34% 0.018 265);
  --border-strong: oklch(44% 0.02 265);
  --border-control: oklch(60% 0.02 265);
  --overlay: oklch(8% 0.01 265 / 0.6);

  --text: oklch(96% 0.005 265);
  --text-2: oklch(86% 0.008 265);
  --muted: oklch(72% 0.014 265);
  --muted-strong: oklch(80% 0.012 265);

  --primary: oklch(70% 0.10 150);
  --primary-fg: oklch(15% 0.04 150);
  --primary-strong: oklch(78% 0.10 150);
  --primary-soft: oklch(34% 0.06 150);
  --primary-soft-strong: oklch(40% 0.09 150);

  --cta: oklch(70% 0.16 150);
  --cta-strong: oklch(78% 0.16 150);
  --cta-fg: oklch(15% 0.04 150);

  --accent: oklch(78% 0.14 195);
  --accent-fg: oklch(15% 0.04 195);
  --accent-soft: oklch(28% 0.07 195);

  --success: oklch(74% 0.16 155);
  --success-strong: oklch(82% 0.16 155);
  --success-soft: oklch(28% 0.08 155);
  --success-fg: oklch(16% 0.04 155);
  --warning: oklch(80% 0.17 75);
  --warning-strong: oklch(86% 0.17 75);
  --warning-soft: oklch(28% 0.09 75);
  --warning-fg: oklch(18% 0.05 70);
  --caution: oklch(84% 0.14 95);
  --caution-strong: oklch(90% 0.12 95);
  --caution-soft: oklch(30% 0.07 95);
  --caution-fg: oklch(18% 0.04 90);
  --danger: oklch(72% 0.21 25);
  --danger-strong: oklch(80% 0.2 25);
  --danger-soft: oklch(28% 0.09 25);
  --danger-fg: oklch(16% 0.05 25);
  --info: oklch(76% 0.11 250);
  --info-strong: oklch(84% 0.09 250);
  --info-soft: oklch(30% 0.06 250);
  --info-fg: oklch(16% 0.04 250);

  --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --elevation-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --elevation-md: 0 4px 12px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --elevation-lg: 0 16px 40px -10px rgb(0 0 0 / 0.6), 0 4px 8px -4px rgb(0 0 0 / 0.4);

  --toner-k: #d4d4d8;
  --toner-c: #22d3ee;
  --toner-m: #e879f9;
  --toner-y: #facc15;

  --chart-1: #7BAE89;
  --chart-2: #22d3ee;
  --chart-3: #fbbf24;
  --chart-4: #5C9970;
  --chart-5: #e879f9;
  --chart-6: #fb923c;
  --chart-7: #c4b5fd;
  --chart-8: #facc15;
  --shift-1: #8aa5c2;
  --shift-2: #9aa0ae;
  --shift-3: #a594b2;
  --shift-4: #8eaa9a;
  --shift-5: #aa9b8a;
  --chart-grid: oklch(31% 0.017 265);
  --chart-heat-floor: oklch(34% 0.018 265);  /* = --surface-3 dark; a heatmap zero cell sits just above the card */
  --chart-tooltip-bg: var(--surface-2);
}
:root {
  --font-sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;
  --font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --text-2xs: 0.6875rem;          /* 11px — caption / micro-label floor */
  --text-2xs--line-height: 1rem;
  --text-body-sm: 0.8125rem;      /* 13px — controls, table cells */
  --text-body-sm--line-height: 1.25rem;
  --text-stat: 1.125rem;          /* 18px — breakdown stat values */
  --text-stat--line-height: 1.5rem;
  --text-counter: 1.875rem;       /* 30px — headline lifetime counter */
  --text-counter--line-height: 2.25rem;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --breakpoint-sm: 40rem;   /*  640px */
  --breakpoint-md: 48rem;   /*  768px — phone ↔ tablet/desktop shell */
  --breakpoint-lg: 64rem;   /* 1024px */
  --breakpoint-xl: 80rem;   /* 1280px */
  --breakpoint-2xl: 96rem;  /* 1536px */
--text-xs: .75rem; --text-sm: .875rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
}
body { margin:0; }
/* Public pages only. All colors/families derive from the app's Graphite tokens. */
.pm-public { background: var(--bg); color: var(--text); font-family: var(--font-sans); --pm-gutter: clamp(1.25rem, 4vw, 6rem); font-size: 1rem; line-height: 1.6; }
.pm-public *, .pm-public *::before, .pm-public *::after { box-sizing: border-box; }
.pm-public a { color: inherit; text-decoration: none; }
.pm-public button { font: inherit; cursor: pointer; }
.pm-public h1, .pm-public h2, .pm-public h3, .pm-public p, .pm-public figure { margin: 0; }
.pm-public h1, .pm-public h2, .pm-public h3 { font-family: var(--font-display); text-wrap: balance; font-weight: 500; }
.pm-public h1 { font-size: clamp(2.7rem, 4.2vw + .5rem, 5.75rem); line-height: 1.04; letter-spacing: -.055em; }
.pm-public h2 { font-size: clamp(2rem, 2.5vw + .4rem, 3.7rem); line-height: 1.12; letter-spacing: -.045em; white-space: pre-line; }
.pm-public h3 { font-size: clamp(1.5rem, 1.6vw + .3rem, 2.15rem); line-height: 1.16; letter-spacing: -.035em; }
.pm-public a:focus-visible, .pm-public button:focus-visible, .pm-public summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 5px; }
.pm-public main:focus { outline: none; }
.pm-wrap { width: min(100%, 112rem); padding-inline: var(--pm-gutter); margin-inline: auto; }
.pm-section { padding-block: clamp(3.5rem, 6vw, 7rem); }
.pm-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .13em; line-height: 1.6; }
.pm-brand-text { color: var(--primary-strong); }
.pm-lead { color: var(--text-2); font-size: clamp(1rem, .4vw + .85rem, 1.25rem); line-height: 1.75; max-width: 53ch; }
.pm-header { background: color-mix(in oklab, var(--bg) 96%, transparent); border-bottom: 1px solid var(--border); position: relative; z-index: var(--z-nav); }
.pm-header-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 6rem; }
.pm-logo { display: inline-flex; flex-shrink: 0; }
.pm-desktop-nav { display: flex; gap: clamp(1rem, 2.2vw, 2.8rem); align-items: center; margin-left: auto; font-size: var(--text-sm); }
.pm-desktop-nav a, .pm-login { padding-block: .75rem; }
.pm-desktop-nav a:hover, .pm-desktop-nav a[aria-current], .pm-text-link:hover { color: var(--primary-strong); }
.pm-login { font-size: var(--text-sm); font-weight: 600; border-left: 1px solid var(--border); padding-left: 2rem; white-space: nowrap; }
.pm-login span { margin-left: .8rem; }
.pm-menu-button { display: none; align-items: center; gap: 1rem; padding: .65rem .9rem; background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--radius-md); }
.pm-mobile-nav { display: none; }
.pm-skip { position: absolute; left: 1rem; top: -6rem; padding: 1rem; background: var(--surface); z-index: var(--z-system); border: 2px solid var(--focus-ring); }
.pm-skip:focus { top: 1rem; }
.pm-actions { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.pm-button { min-height: 3.25rem; padding: .9rem 1.4rem; display: inline-flex; justify-content: space-between; align-items: center; gap: 2rem; font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-md); border: 1px solid transparent; transition: background .16s, border-color .16s; }
.pm-public .pm-button-primary { background: var(--cta); color: var(--cta-fg); }
.pm-public .pm-button-primary:hover { background: var(--cta-strong); }
.pm-public .pm-button-secondary { border-color: var(--border-control); background: var(--surface); color: var(--text); }
.pm-public .pm-button-secondary:hover { border-color: var(--primary); background: var(--primary-soft); }
.pm-text-link { min-height: 2.75rem; display: inline-flex; align-items: center; gap: 1rem; font-size: var(--text-sm); font-weight: 500; }
.pm-section-heading { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; gap: 2rem; margin-bottom: clamp(2.25rem, 4vw, 4rem); }
.pm-section-heading > .pm-eyebrow { padding-top: .5rem; }
.pm-how { border-block: 1px solid var(--border); background: var(--surface-2); }
.pm-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); padding: 0; margin: 0; }
.pm-steps li { border-top: 1px solid var(--border-strong); padding-top: 1.3rem; }
.pm-step-number { display: block; font-family: var(--font-mono); color: var(--primary-strong); font-size: var(--text-sm); margin-bottom: 2rem; }
.pm-steps h3 { font-size: clamp(1.25rem, 1.3vw, 1.65rem); margin-bottom: 1rem; }
.pm-steps p { color: var(--text-2); max-width: 42ch; }
.pm-cta { display: flex; justify-content: space-between; gap: 3rem; align-items: center; border-left: 2px solid var(--primary); padding-left: clamp(1.5rem, 4vw, 4rem); }
.pm-cta h2 { margin-block: 1.2rem; }
.pm-cta p:not(.pm-eyebrow) { color: var(--text-2); max-width: 53ch; }
.pm-cta .pm-actions { flex-direction: column; align-items: stretch; flex-shrink: 0; gap: .5rem; }
.pm-footer { border-top: 1px solid var(--border); padding-top: 3.5rem; }
.pm-footer-top { display: flex; justify-content: space-between; gap: 3rem; padding-bottom: 3.5rem; }
.pm-footer-top p { margin-top: 1.4rem; max-width: 43ch; color: var(--muted); font-size: var(--text-sm); }
.pm-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .65rem 3rem; font-size: var(--text-sm); }
.pm-footer nav a { min-height: 2rem; }
.pm-footer a:hover { color: var(--primary-strong); }
.pm-public .pm-copyright { padding-block: 1.5rem; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted); }
/* Pricing is intrinsic: five columns when they fit, cards at smaller widths. */
.pm-pricing-heading { text-align: center; max-width: 65rem; margin-inline: auto; }
.pm-pricing-heading h1 { margin-block: 1.5rem; }
.pm-pricing-heading .pm-lead { margin-inline: auto; max-width: 65ch; }
.pm-billing { display: inline-flex; margin-top: 2.25rem; border: 1px solid var(--border-strong); padding: .3rem; border-radius: var(--radius-lg); background: var(--surface-2); }
.pm-billing button { background: transparent; color: var(--text-2); border: 0; padding: .6rem 1.3rem; min-height: 2.75rem; border-radius: var(--radius-md); font-size: var(--text-sm); }
.pm-billing button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.pm-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin-top: 3.5rem; }
.pm-plan { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.1rem, 1.3vw, 1.6rem); background: var(--surface); }
.pm-plan h2 { font-size: var(--text-xl); letter-spacing: -.025em; }
.pm-plan .pm-button { margin-top: auto; }
.pm-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; margin-top: 1.7rem; }
.pm-price strong { font-weight: 500; font-size: clamp(2.25rem, 2vw + .5rem, 3.2rem); line-height: 1.2; letter-spacing: -.045em; }
.pm-price span { color: var(--muted); font-size: var(--text-xs); }
.pm-public .pm-charge { margin-top: .7rem; min-height: 3.2em; font-size: var(--text-xs); color: var(--muted); }
.pm-limits { border-block: 1px solid var(--border); padding-block: 1rem; margin-block: 1.5rem 1rem; font-size: var(--text-body-sm); }
.pm-limits div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; }
.pm-limits dt { color: var(--muted); }
.pm-limits dd { margin: 0; text-align: right; }
.pm-overages { min-height: 4.6rem; font-size: var(--text-xs); color: var(--text-2); }
.pm-overages p + p { margin-top: .4rem; }
.pm-included { list-style: none; padding: 0; margin-block: .5rem 2rem; font-size: var(--text-body-sm); }
.pm-included li { display: flex; gap: .6rem; margin-block: .65rem; }
.pm-included li span { color: var(--primary-strong); }
.pm-plan .pm-button { margin-top: auto; gap: .8rem; }
.pm-public .pm-pricing-note { color: var(--muted); font-size: var(--text-body-sm); max-width: 85ch; margin: 1.5rem auto 0; text-align: center; }
.pm-faq { max-width: 72rem; padding-top: 1rem; }
.pm-faq h2 { margin-bottom: 2rem; }
.pm-faq details { border-top: 1px solid var(--border); padding-block: 1.25rem; }
.pm-faq details:last-child { border-bottom: 1px solid var(--border); }
.pm-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.75rem; font-weight: 500; }
.pm-faq summary::-webkit-details-marker { display: none; }
.pm-faq summary span { font-size: var(--text-xl); }
.pm-faq details[open] summary span { transform: rotate(45deg); }
.pm-faq details p { color: var(--text-2); max-width: 70ch; margin-block: .8rem; }
.pm-faq p a { text-decoration: underline; }
/* Public reading pages */
.pm-document { max-width: 78rem; }
.pm-document header { padding-bottom: 3rem; border-bottom: 1px solid var(--border); }
.pm-document h1 { margin-block: 1.5rem; }
.pm-document .pm-document-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); margin-top: 1.5rem; }
.pm-document-body { max-width: 76ch; margin: 3rem 0 0 auto; }
.pm-document-body section + section { margin-top: 2.5rem; }
.pm-document-body h2 { font-size: clamp(1.3rem, 1.5vw, 1.6rem); margin-bottom: 1rem; letter-spacing: -.02em; }
.pm-document-body p { color: var(--text-2); line-height: 1.85; overflow-wrap: anywhere; }
.pm-document-body p + p { margin-top: 1rem; }
.pm-document-body a { text-decoration: underline; text-underline-offset: .2em; }
.pm-document-links { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--border); padding-top: 2rem; }
@media (width < 64rem) { .pm-desktop-nav { gap: 1rem; } .pm-header-row { gap: 1.5rem; } .pm-login { padding-left: 1rem; } .pm-cta { align-items: start; flex-direction: column; } .pm-cta .pm-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.5rem; } }
@media (width < 48rem) { .pm-header-row { min-height: 5rem; gap: 1rem; } .pm-desktop-nav, .pm-login { display: none; } .pm-menu-button { display: flex; } .pm-mobile-nav { display: grid; padding-bottom: 1.2rem; } .pm-mobile-nav a { padding-block: .85rem; border-top: 1px solid var(--border); } .pm-section-heading { grid-template-columns: 1fr; gap: 1.25rem; } .pm-steps { grid-template-columns: 1fr; gap: 2rem; } .pm-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 1rem; } .pm-step-number { grid-row: span 2; margin-bottom: 0; } .pm-steps p { max-width: none; grid-column: 2; } .pm-footer-top { flex-direction: column; } .pm-footer nav { gap: .7rem 1.5rem; } .pm-document header { padding-bottom: 2rem; } .pm-document-body { margin-top: 2rem; } .pm-plans { gap: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .pm-public *, .pm-public *::before, .pm-public *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* The public comparison uses the reviewed canonical plan definitions. */
.pm-public .pm-plan-description { font-size: var(--text-xs); color: var(--muted); margin-top: .75rem; min-height: 3.2em; }
.pm-plan .pm-included { margin-bottom: 1rem; }
.pm-plan .pm-full-comparison { margin-top: auto; margin-bottom: 1rem; font-size: var(--text-xs); }
.pm-comparison { padding-top: 0; scroll-margin-top: 2rem; }
.pm-comparison-heading { margin-bottom: 2.5rem; }
.pm-comparison-heading p { margin-top: 1rem; max-width: 65ch; }
.pm-comparison-group { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); margin-top: 1rem; overflow: hidden; }
.pm-comparison-group summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; padding: 1.25rem 1.5rem; font-weight: 600; background: var(--surface-2); }
.pm-comparison-group summary::-webkit-details-marker { display: none; }
.pm-comparison-group[open] summary > span { transform: rotate(45deg); }
.pm-comparison table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-sm); }
.pm-comparison th, .pm-comparison td { padding: 1rem .75rem; border-bottom: 1px solid var(--border); text-align: center; overflow-wrap: anywhere; }
.pm-comparison th:first-child { width: 27%; text-align: left; padding-left: 1.5rem; font-weight: 400; }
.pm-comparison thead th { font-weight: 600; color: var(--text); }
.pm-comparison tbody tr:hover { background: var(--surface-2); }
.pm-yes, .pm-no { font-size: var(--text-xs); display: inline-flex; align-items: center; gap: .35rem; }
.pm-yes { color: var(--primary-strong); }
.pm-no { color: var(--muted); }
.pm-public .pm-comparison-note { font-size: var(--text-xs); color: var(--text-2); padding: 1rem 1.5rem; max-width: 105ch; }
.pm-plan-select { display: none; }
.pm-fee-details { max-width: 78rem; padding-top: 0; }
.pm-fee-details h2 { font-size: clamp(1.75rem, 2vw, 2.5rem); margin-bottom: 1.5rem; }
.pm-fee-details p { color: var(--text-2); margin-top: 1rem; }
@media(width < 64rem) {
  .pm-plan-select { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-weight: 500; }
  .pm-plan-select select { font: inherit; min-height: 3rem; padding: .6rem 2rem .6rem 1rem; border: 1px solid var(--border-control); border-radius: var(--radius-md); color: var(--text); background: var(--surface); }
  .pm-comparison th:not(:first-child):not(.pm-selected), .pm-comparison td:not(.pm-selected) { display: none; }
  .pm-comparison th:first-child { width: 62%; }
  .pm-comparison-group summary, .pm-comparison th:first-child, .pm-public .pm-comparison-note { padding-inline: 1rem; }
}
@media(width < 64rem) { .pm-plan-select { position: sticky; top: .5rem; z-index: 2; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 3px 12px color-mix(in oklab,var(--text) 6%,transparent); } }
/* Public explanation sections: intrinsic grids keep detail readable at every width. */
.pm-public [id] { scroll-margin-top: 1.5rem; }
.pm-page-nav { display:flex; flex-wrap:wrap; gap:.5rem 2rem; border-block:1px solid var(--border); padding-block:1rem; font-size:var(--text-sm); }
.pm-page-nav a { padding-block:.5rem; text-decoration:underline; text-underline-offset:.3em; }
.pm-public .pm-section-intro { color:var(--text-2); margin-top:1.4rem; max-width:60ch; }
.pm-explain-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:clamp(1.5rem,3vw,3.5rem); }
.pm-explain-grid article { border-top:1px solid var(--border-strong); padding-top:1.25rem; }
.pm-explain-grid h3 { font-size:clamp(1.2rem,1.4vw,1.6rem); margin-bottom:1rem; }
.pm-explain-grid p { color:var(--text-2); max-width:55ch; }
.pm-context-note { margin-top:2rem; padding:1.25rem 1.5rem; border-left:2px solid var(--primary); background:var(--surface-2); }
.pm-context-note p { color:var(--text-2); max-width:90ch; }
.pm-plan-guide { margin-top:3rem; text-align:left; }
.pm-plan-guide h2, .pm-glossary h2 { font-size:clamp(1.5rem,2vw,2.4rem); margin-bottom:1.75rem; }
.pm-plan-guide p { font-size:var(--text-sm); }
.pm-plan-guide h3 { font-size:var(--text-lg); }
.pm-plan .pm-summary-title { font-size:var(--text-sm); letter-spacing:0; margin-bottom:.75rem; }
.pm-summary-features { margin:0 0 1.25rem; font-size:var(--text-sm); }
.pm-summary-features > div { padding-block:.65rem; border-bottom:1px solid var(--border); }
.pm-summary-features dd { margin:.3rem 0 0; }
.pm-plan .pm-overages { padding:1rem 0; margin-bottom:1rem; border-top:1px solid var(--border); }
.pm-overages a { text-decoration:underline; text-underline-offset:.2em; }
.pm-glossary { padding-top:0; }
.pm-glossary dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:1.5rem 3rem; margin:0; }
.pm-glossary dl > div { border-top:1px solid var(--border); padding-top:1rem; }
.pm-glossary dt { font-weight:600; margin-bottom:.5rem; }
.pm-glossary dd { margin:0; color:var(--text-2); font-size:var(--text-sm); max-width:65ch; }
.pm-public select:focus-visible { outline:2px solid var(--focus-ring); outline-offset:4px; }
.pm-pricing-jumps { display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin-top:2rem; padding-block:.75rem; border-block:1px solid var(--border); }
.pm-pricing-jumps + .pm-plans { margin-top:2rem; }
@media(width < 64rem) { .pm-public .pm-comparison-group[id] { scroll-margin-top:7rem; } }
/* Faster pricing scan: prices precede guidance; the full matrix retains every detail. */
.pm-pricing { padding-top:clamp(2rem,3vw,3.5rem); padding-bottom:2rem; }
.pm-pricing-heading h1 { font-size:clamp(2.3rem,3vw,4rem); margin-block:.8rem; }
.pm-billing { margin-top:1.25rem; }
.pm-pricing-jumps { margin-top:1.25rem; gap:.35rem 1.5rem; padding-block:.35rem; }
.pm-plan { padding:1.15rem; }
.pm-public .pm-plan-description { margin-top:.5rem; min-height:3.2em; }
.pm-price { margin-top:.8rem; }
.pm-public .pm-charge { margin-top:.3rem; min-height:2.8em; }
.pm-limits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; padding-block:.75rem; margin-block:.75rem; }
.pm-limits div { display:block; padding:0; }
.pm-limits dt { font-size:var(--text-xs); }
.pm-limits dd { text-align:left; font-weight:500; }
.pm-summary-features { margin-bottom:.5rem; }
.pm-summary-features > div { display:flex; justify-content:space-between; gap:.6rem; align-items:start; padding-block:.5rem; font-size:var(--text-xs); }
.pm-summary-features dt { flex:1; }
.pm-summary-features dd { margin:0; font-size:inherit; flex:0 0 5.3rem; }
.pm-plan .pm-full-comparison { margin-top:.5rem; margin-bottom:.5rem; }
.pm-plan .pm-overages { margin-bottom:.5rem; padding-block:.65rem; min-height:0; }
.pm-public .pm-account-note { font-size:var(--text-sm); color:var(--text-2); }
.pm-buyer-guide { padding-block:2rem; }
.pm-buyer-guide .pm-plan-guide { margin-top:0; }
.pm-glossary { padding-bottom:2.5rem; }
.pm-comparison th.pm-peer, .pm-comparison td.pm-peer { display:table-cell; }
@media(width < 64rem) {
  .pm-plan-select { gap:.75rem; flex-wrap:nowrap; }
  .pm-plan-select label { display:flex; flex-direction:column; gap:.4rem; min-width:0; flex:1; font-size:var(--text-xs); }
  .pm-plan-select select { width:100%; padding-inline:.5rem; min-width:0; }
  .pm-comparison th:not(:first-child):not(.pm-selected):not(.pm-peer), .pm-comparison td:not(.pm-selected):not(.pm-peer) { display:none; }
  .pm-comparison th:first-child { width:44%; }
  .pm-comparison th, .pm-comparison td { padding:.8rem .4rem; font-size:var(--text-xs); }
  .pm-comparison .pm-yes, .pm-comparison .pm-no { font-size:var(--text-xs); flex-wrap:wrap; justify-content:center; }
  .pm-public .pm-comparison-group[id] { scroll-margin-top:8rem; }
}
@media(width < 64rem) { .pm-comparison th.pm-peer:not(:first-child), .pm-comparison td.pm-peer { display:table-cell; } }