/* GENERATED by design/v2/scripts/build-tokens.mjs from design/v2/tokens.json — do not edit by hand.
   Theme roles switch with [data-theme="light"|"dark"|"system"] and [data-contrast="more"] on any element;
   the OS settings (prefers-color-scheme with data-theme="system", prefers-contrast, prefers-reduced-motion) apply too. */
:root {
  --tf-color-onyx: #0B0B0C;
  --tf-color-carbon: #141416;
  --tf-color-graphite: #1D1D20;
  --tf-color-seam: #2B2B2F;
  --tf-color-steel: #6E6B65;
  --tf-color-platinum: #EDEAE3;
  --tf-color-silver: #B4B0A7;
  --tf-color-pewter: #928E85;
  --tf-color-bullion: #CDAA68;
  --tf-color-bullion-hi: #EBD7A6;
  --tf-color-bullion-deep: #8F7444;
  --tf-color-caution: #F6C453;
  --tf-color-ink: #15120C;
  --tf-color-ink-soft: #4D3F1A;
  --tf-color-ink-paper: #FFF8E6;
  --tf-color-ivory: #F4F1EA;
  --tf-color-vellum: #FBFAF7;
  --tf-color-linen: #EAE6DC;
  --tf-color-paper-seam: #D9D4C8;
  --tf-color-paper-steel: #858076;
  --tf-color-paper-ink: #16150F;
  --tf-color-paper-grey-2: #4A463F;
  --tf-color-paper-grey: #5F5B52;
  --tf-color-paper-gold: #735826;
  --tf-color-hc-silver: #D3CFC6;
  --tf-color-hc-steel: #9A968D;
  --tf-color-hc-seam: #46464C;
  --tf-color-hc-bullion: #DDBF83;
  --tf-color-hc-paper-grey: #3A3731;
  --tf-color-hc-paper-steel: #5F5B52;
  --tf-color-hc-paper-gold: #5C4519;
  --tf-color-titanium-hi: #34343A;
  --tf-color-titanium-lo: #121214;
  --tf-color-white: #FFFFFF;
  --tf-color-black: #000000;
  --tf-color-hc-paper-seam: #ADA79B;
  --tf-color-bullion-struck: #B8955A;
  --tf-notice-surface: #F6C453;
  --tf-notice-text: #15120C;
  --tf-notice-text-2: #4D3F1A;
  --tf-notice-rule: #15120C;
  --tf-notice-safe-bg: #15120C;
  --tf-notice-safe-text: #FFF8E6;
  --tf-notice-locked-border: #15120C;
  --tf-notice-focus: #15120C;
  --tf-notice-perforation: rgba(21, 18, 12, 0.08);
  --tf-shield-background: #0B0B0C;
  --tf-shield-title: #EDEAE3;
  --tf-shield-subtitle: #B4B0A7;
  --tf-shield-primary-bg: #EDEAE3;
  --tf-shield-primary-text: #0B0B0C;
  --tf-shield-secondary-text: #EDEAE3;
  --tf-font-serif: "Noto Serif Display", "Didot", "Bodoni 72", "Georgia", serif;
  --tf-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Roboto", system-ui, sans-serif;
  --tf-font-mono: "IBM Plex Mono", "SF Mono", "Menlo", "Consolas", monospace;
  --tf-font-serif-stretch: 87.5%;
  --tf-type-numeral-hero-size: 120px;
  --tf-type-numeral-hero-weight: 300;
  --tf-type-numeral-hero-line: 0.9;
  --tf-type-numeral-hero-tracking: -0.02em;
  --tf-type-numeral-xl-size: 80px;
  --tf-type-numeral-xl-weight: 300;
  --tf-type-numeral-xl-line: 0.92;
  --tf-type-numeral-xl-tracking: -0.015em;
  --tf-type-numeral-l-size: 56px;
  --tf-type-numeral-l-weight: 300;
  --tf-type-numeral-l-line: 0.95;
  --tf-type-numeral-l-tracking: -0.01em;
  --tf-type-numeral-m-size: 44px;
  --tf-type-numeral-m-weight: 300;
  --tf-type-numeral-m-line: 1;
  --tf-type-numeral-m-tracking: -0.01em;
  --tf-type-numeral-s-size: 28px;
  --tf-type-numeral-s-weight: 400;
  --tf-type-numeral-s-line: 1.05;
  --tf-type-numeral-s-tracking: 0em;
  --tf-type-display-xl-size: 64px;
  --tf-type-display-xl-weight: 300;
  --tf-type-display-xl-line: 1;
  --tf-type-display-xl-tracking: -0.02em;
  --tf-type-display-l-size: 44px;
  --tf-type-display-l-weight: 300;
  --tf-type-display-l-line: 1.04;
  --tf-type-display-l-tracking: -0.015em;
  --tf-type-display-m-size: 32px;
  --tf-type-display-m-weight: 400;
  --tf-type-display-m-line: 1.08;
  --tf-type-display-m-tracking: -0.01em;
  --tf-type-title-size: 24px;
  --tf-type-title-weight: 400;
  --tf-type-title-line: 1.15;
  --tf-type-title-tracking: 0em;
  --tf-type-title-s-size: 20px;
  --tf-type-title-s-weight: 400;
  --tf-type-title-s-line: 1.2;
  --tf-type-title-s-tracking: 0em;
  --tf-type-headline-size: 17px;
  --tf-type-headline-weight: 600;
  --tf-type-headline-line: 1.35;
  --tf-type-headline-tracking: -0.005em;
  --tf-type-body-size: 15px;
  --tf-type-body-weight: 400;
  --tf-type-body-line: 1.5;
  --tf-type-body-tracking: 0em;
  --tf-type-body-desktop-size: 14px;
  --tf-type-body-desktop-weight: 400;
  --tf-type-body-desktop-line: 1.5;
  --tf-type-body-desktop-tracking: 0em;
  --tf-type-callout-size: 13px;
  --tf-type-callout-weight: 400;
  --tf-type-callout-line: 1.45;
  --tf-type-callout-tracking: 0em;
  --tf-type-label-size: 12px;
  --tf-type-label-weight: 600;
  --tf-type-label-line: 1.3;
  --tf-type-label-tracking: 0.02em;
  --tf-type-eyebrow-size: 11px;
  --tf-type-eyebrow-weight: 600;
  --tf-type-eyebrow-line: 1.3;
  --tf-type-eyebrow-tracking: 0.14em;
  --tf-type-button-size: 15px;
  --tf-type-button-weight: 600;
  --tf-type-button-line: 1.2;
  --tf-type-button-tracking: 0.005em;
  --tf-type-button-desktop-size: 14px;
  --tf-type-button-desktop-weight: 600;
  --tf-type-button-desktop-line: 1.2;
  --tf-type-button-desktop-tracking: 0.005em;
  --tf-type-figure-size: 15px;
  --tf-type-figure-weight: 500;
  --tf-type-figure-line: 1.3;
  --tf-type-figure-tracking: 0em;
  --tf-type-figure-l-size: 22px;
  --tf-type-figure-l-weight: 400;
  --tf-type-figure-l-line: 1.15;
  --tf-type-figure-l-tracking: -0.01em;
  --tf-type-ref-size: 12px;
  --tf-type-ref-weight: 400;
  --tf-type-ref-line: 1.4;
  --tf-type-ref-tracking: 0.02em;
  --tf-space-2xs: 2px;
  --tf-space-xs: 4px;
  --tf-space-s: 8px;
  --tf-space-m: 12px;
  --tf-space-l: 16px;
  --tf-space-xl: 20px;
  --tf-space-2xl: 24px;
  --tf-space-3xl: 32px;
  --tf-space-4xl: 40px;
  --tf-space-5xl: 48px;
  --tf-space-6xl: 64px;
  --tf-space-7xl: 80px;
  --tf-space-8xl: 112px;
  --tf-space-gutter-phone: 16px;
  --tf-space-gutter-phone-wide: 20px;
  --tf-space-gutter-tablet: 32px;
  --tf-space-gutter-desktop: 32px;
  --tf-space-card-padding: 20px;
  --tf-space-card-padding-compact: 16px;
  --tf-size-touch-min: 44px;
  --tf-size-touch-min-android: 48px;
  --tf-size-button-height: 48px;
  --tf-size-button-height-compact: 36px;
  --tf-size-notice-button-height: 64px;
  --tf-size-icon-s: 16px;
  --tf-size-icon-m: 20px;
  --tf-size-icon-l: 24px;
  --tf-size-glyph-menubar: 18px;
  --tf-size-sidebar-width: 236px;
  --tf-size-menubar-panel-width: 360px;
  --tf-size-window-min-width: 900px;
  --tf-size-window-min-height: 640px;
  --tf-size-window-default-width: 1180px;
  --tf-size-window-default-height: 780px;
  --tf-size-content-max-width: 1200px;
  --tf-size-mini-widget-width: 260px;
  --tf-size-mini-widget-height: 72px;
  --tf-size-block-page-narrow: 600px;
  --tf-size-block-page-wide: 1100px;
  --tf-size-share-card-width: 1080px;
  --tf-size-share-card-height: 1350px;
  --tf-size-email-width: 600px;
  --tf-size-sidebar-row: 34px;
  --tf-size-sidebar-row-touch: 44px;
  --tf-size-layout-three-column: 900px;
  --tf-size-layout-stack: 560px;
  --tf-size-block-page-compact: 430px;
  --tf-size-block-page-two-column: 900px;
  --tf-size-block-page-use-four: 460px;
  --tf-size-notice-sheet-bottom-inset: 50px;
  --tf-size-wallet-card-ratio: 1.586;
  --tf-radius-none: 0px;
  --tf-radius-tag: 3px;
  --tf-radius-s: 6px;
  --tf-radius-m: 8px;
  --tf-radius-l: 14px;
  --tf-radius-xl: 20px;
  --tf-radius-sheet: 24px;
  --tf-radius-widget-ios: 22px;
  --tf-radius-pill: 999px;
  --tf-radius-card-ratio: 0.037;
  --tf-border-hairline: 1px;
  --tf-border-rule: 2px;
  --tf-border-focus: 2px;
  --tf-border-focus-notice: 3px;
  --tf-border-notice-locked: 2px;
  --tf-shadow-e1: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
  --tf-shadow-e2: 0px 10px 30px -6px rgba(0, 0, 0, 0.45);
  --tf-shadow-e3: 0px 24px 64px -8px rgba(0, 0, 0, 0.6);
  --tf-shadow-card: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.06), 0px 30px 60px -20px rgba(0, 0, 0, 0.75);
  --tf-shadow-press: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.6);
  --tf-shadow-e2-light: 0px 8px 24px -6px rgba(22, 21, 15, 0.12);
  --tf-shadow-e3-light: 0px 20px 48px -8px rgba(22, 21, 15, 0.18);
  --tf-duration-instant: 0ms;
  --tf-duration-press: 140ms;
  --tf-duration-hover: 200ms;
  --tf-duration-tick: 125ms;
  --tf-duration-detent: 180ms;
  --tf-duration-state: 320ms;
  --tf-duration-sheet: 360ms;
  --tf-duration-settle: 420ms;
  --tf-duration-shutter: 700ms;
  --tf-duration-odometer: 700ms;
  --tf-duration-ink-in: 900ms;
  --tf-duration-stop: 900ms;
  --tf-duration-lock-second: 1000ms;
  --tf-duration-door-arm: 10000ms;
  --tf-duration-toast: 4000ms;
  --tf-duration-mark-break: 1600ms;
  --tf-duration-door-arm-assistive: 20000ms;
  --tf-duration-segment-escape: 600ms;
  --tf-easing-standard: cubic-bezier(0.2, 0.7, 0.1, 1);
  --tf-easing-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --tf-easing-vault: cubic-bezier(0.7, 0, 0.2, 1);
  --tf-easing-detent: cubic-bezier(0.3, 0, 0, 1);
  --tf-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --tf-easing-linear: cubic-bezier(0, 0, 1, 1);
  --tf-z-base: 0;
  --tf-z-raised: 1;
  --tf-z-sticky: 10;
  --tf-z-menu: 100;
  --tf-z-sheet: 200;
  --tf-z-notice: 300;
  --tf-z-toast: 400;
  --tf-z-block-screen: 500;
  --tf-meter-segment-gap: 2px;
  --tf-meter-segment-radius: 1px;
  --tf-meter-height-s: 6px;
  --tf-meter-height-m: 10px;
  --tf-meter-height-l: 14px;
  --tf-meter-outline-width: 1px;
  --tf-meter-ring-tick-width: 2px;
  --tf-meter-height-day: 28px;
  --tf-meter-group-gap: 12px;
  --tf-meter-pending-dash: 3px;
  --tf-meter-per-minute-max: 30;
  --tf-meter-group-minutes: 5;
  --tf-meter-ring-sweep: 270;
  --tf-meter-ring-tick-ratio: 0.18;
  --tf-meter-ring-gone-ratio: 0.08;
  --tf-meter-glyph-bars: 5;
  --tf-texture-hatch-pitch: 6px;
  --tf-texture-hatch-line: 1px;
  --tf-texture-guilloche-pitch: 2.2px;
  --tf-texture-guilloche-amplitude: 7px;
  --tf-texture-guilloche-stroke: 0.5px;
  --tf-texture-grain-opacity: 0.035;
  --tf-texture-grain-opacity-paper: 0.06;
  --tf-texture-guilloche-opacity: 0.09;
  --tf-texture-brushed-opacity: 0.016;
  --tf-texture-hatch-angle: 135;
  --tf-texture-guilloche-lines: 28;
  --tf-texture-guilloche-lobes: 18;
}

/* Theme roles. Dark is the default on every surface. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --tf-canvas: #0B0B0C;
  --tf-surface: #141416;
  --tf-raised: #1D1D20;
  --tf-hairline: #2B2B2F;
  --tf-control: #6E6B65;
  --tf-text: #EDEAE3;
  --tf-text-2: #B4B0A7;
  --tf-text-3: #928E85;
  --tf-time: #EDEAE3;
  --tf-money: #CDAA68;
  --tf-money-hi: #EBD7A6;
  --tf-money-line: #8F7444;
  --tf-hatch: rgba(237, 234, 227, 0.3);
  --tf-hatch-faint: rgba(237, 234, 227, 0.07);
  --tf-meter-gone: rgba(237, 234, 227, 0.16);
  --tf-focus: #EDEAE3;
  --tf-button-bg: #EDEAE3;
  --tf-button-text: #0B0B0C;
  --tf-scrim: rgba(11, 11, 12, 0.72);
  --tf-card-hi: #34343A;
  --tf-card-lo: #121214;
}
[data-theme="light"] {
  color-scheme: light;
  --tf-canvas: #F4F1EA;
  --tf-surface: #FBFAF7;
  --tf-raised: #EAE6DC;
  --tf-hairline: #D9D4C8;
  --tf-control: #858076;
  --tf-text: #16150F;
  --tf-text-2: #4A463F;
  --tf-text-3: #5F5B52;
  --tf-time: #16150F;
  --tf-money: #735826;
  --tf-money-hi: #9C7B3E;
  --tf-money-line: #8F7444;
  --tf-hatch: rgba(22, 21, 15, 0.35);
  --tf-hatch-faint: rgba(22, 21, 15, 0.06);
  --tf-meter-gone: rgba(22, 21, 15, 0.2);
  --tf-focus: #16150F;
  --tf-button-bg: #16150F;
  --tf-button-text: #F4F1EA;
  --tf-scrim: rgba(22, 21, 15, 0.4);
  --tf-card-hi: #34343A;
  --tf-card-lo: #121214;
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    color-scheme: light;
    --tf-canvas: #F4F1EA;
    --tf-surface: #FBFAF7;
    --tf-raised: #EAE6DC;
    --tf-hairline: #D9D4C8;
    --tf-control: #858076;
    --tf-text: #16150F;
    --tf-text-2: #4A463F;
    --tf-text-3: #5F5B52;
    --tf-time: #16150F;
    --tf-money: #735826;
    --tf-money-hi: #9C7B3E;
    --tf-money-line: #8F7444;
    --tf-hatch: rgba(22, 21, 15, 0.35);
    --tf-hatch-faint: rgba(22, 21, 15, 0.06);
    --tf-meter-gone: rgba(22, 21, 15, 0.2);
    --tf-focus: #16150F;
    --tf-button-bg: #16150F;
    --tf-button-text: #F4F1EA;
    --tf-scrim: rgba(22, 21, 15, 0.4);
    --tf-card-hi: #34343A;
    --tf-card-lo: #121214;
  }
}
/* Increase Contrast (explicit attribute). Textures turn off; secondary text, borders, hatch and gone minutes get stronger. */
[data-contrast="more"], [data-contrast="more"] [data-theme="dark"] {
  --tf-canvas: #0B0B0C;
  --tf-surface: #141416;
  --tf-raised: #1D1D20;
  --tf-hairline: #46464C;
  --tf-control: #9A968D;
  --tf-text: #EDEAE3;
  --tf-text-2: #D3CFC6;
  --tf-text-3: #B4B0A7;
  --tf-time: #EDEAE3;
  --tf-money: #DDBF83;
  --tf-money-hi: #EBD7A6;
  --tf-money-line: #CDAA68;
  --tf-hatch: rgba(237, 234, 227, 0.55);
  --tf-hatch-faint: rgba(237, 234, 227, 0.07);
  --tf-meter-gone: rgba(237, 234, 227, 0.45);
  --tf-focus: #EDEAE3;
  --tf-button-bg: #EDEAE3;
  --tf-button-text: #0B0B0C;
  --tf-scrim: rgba(11, 11, 12, 0.72);
  --tf-card-hi: #34343A;
  --tf-card-lo: #121214;
  --tf-texture-grain-opacity: 0;
  --tf-texture-guilloche-opacity: 0;
  --tf-texture-brushed-opacity: 0;
}
[data-theme="light"][data-contrast="more"], [data-theme="light"] [data-contrast="more"], [data-contrast="more"] [data-theme="light"] {
  --tf-canvas: #F4F1EA;
  --tf-surface: #FBFAF7;
  --tf-raised: #EAE6DC;
  --tf-hairline: #ADA79B;
  --tf-control: #5F5B52;
  --tf-text: #16150F;
  --tf-text-2: #3A3731;
  --tf-text-3: #4A463F;
  --tf-time: #16150F;
  --tf-money: #5C4519;
  --tf-money-hi: #9C7B3E;
  --tf-money-line: #735826;
  --tf-hatch: rgba(22, 21, 15, 0.6);
  --tf-hatch-faint: rgba(22, 21, 15, 0.06);
  --tf-meter-gone: rgba(22, 21, 15, 0.5);
  --tf-focus: #16150F;
  --tf-button-bg: #16150F;
  --tf-button-text: #F4F1EA;
  --tf-scrim: rgba(22, 21, 15, 0.4);
  --tf-card-hi: #34343A;
  --tf-card-lo: #121214;
  --tf-texture-grain-opacity: 0;
  --tf-texture-guilloche-opacity: 0;
  --tf-texture-brushed-opacity: 0;
}
@media (prefers-color-scheme: light) {
  [data-theme="system"][data-contrast="more"], [data-theme="system"] [data-contrast="more"], [data-contrast="more"] [data-theme="system"] {
    --tf-canvas: #F4F1EA;
    --tf-surface: #FBFAF7;
    --tf-raised: #EAE6DC;
    --tf-hairline: #ADA79B;
    --tf-control: #5F5B52;
    --tf-text: #16150F;
    --tf-text-2: #3A3731;
    --tf-text-3: #4A463F;
    --tf-time: #16150F;
    --tf-money: #5C4519;
    --tf-money-hi: #9C7B3E;
    --tf-money-line: #735826;
    --tf-hatch: rgba(22, 21, 15, 0.6);
    --tf-hatch-faint: rgba(22, 21, 15, 0.06);
    --tf-meter-gone: rgba(22, 21, 15, 0.5);
    --tf-focus: #16150F;
    --tf-button-bg: #16150F;
    --tf-button-text: #F4F1EA;
    --tf-scrim: rgba(22, 21, 15, 0.4);
    --tf-card-hi: #34343A;
    --tf-card-lo: #121214;
    --tf-texture-grain-opacity: 0;
    --tf-texture-guilloche-opacity: 0;
    --tf-texture-brushed-opacity: 0;
  }
}
/* Increase Contrast from the OS (iOS/macOS Increase Contrast; Windows contrast themes report it too). data-contrast="normal" opts out. */
@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]):not([data-theme="light"]), :root:not([data-contrast="normal"]) [data-theme="dark"] {
    --tf-canvas: #0B0B0C;
    --tf-surface: #141416;
    --tf-raised: #1D1D20;
    --tf-hairline: #46464C;
    --tf-control: #9A968D;
    --tf-text: #EDEAE3;
    --tf-text-2: #D3CFC6;
    --tf-text-3: #B4B0A7;
    --tf-time: #EDEAE3;
    --tf-money: #DDBF83;
    --tf-money-hi: #EBD7A6;
    --tf-money-line: #CDAA68;
    --tf-hatch: rgba(237, 234, 227, 0.55);
    --tf-hatch-faint: rgba(237, 234, 227, 0.07);
    --tf-meter-gone: rgba(237, 234, 227, 0.45);
    --tf-focus: #EDEAE3;
    --tf-button-bg: #EDEAE3;
    --tf-button-text: #0B0B0C;
    --tf-scrim: rgba(11, 11, 12, 0.72);
    --tf-card-hi: #34343A;
    --tf-card-lo: #121214;
    --tf-texture-grain-opacity: 0;
    --tf-texture-guilloche-opacity: 0;
    --tf-texture-brushed-opacity: 0;
  }
  :root:not([data-contrast="normal"])[data-theme="light"], :root:not([data-contrast="normal"]) [data-theme="light"] {
    --tf-canvas: #F4F1EA;
    --tf-surface: #FBFAF7;
    --tf-raised: #EAE6DC;
    --tf-hairline: #ADA79B;
    --tf-control: #5F5B52;
    --tf-text: #16150F;
    --tf-text-2: #3A3731;
    --tf-text-3: #4A463F;
    --tf-time: #16150F;
    --tf-money: #5C4519;
    --tf-money-hi: #9C7B3E;
    --tf-money-line: #735826;
    --tf-hatch: rgba(22, 21, 15, 0.6);
    --tf-hatch-faint: rgba(22, 21, 15, 0.06);
    --tf-meter-gone: rgba(22, 21, 15, 0.5);
    --tf-focus: #16150F;
    --tf-button-bg: #16150F;
    --tf-button-text: #F4F1EA;
    --tf-scrim: rgba(22, 21, 15, 0.4);
    --tf-card-hi: #34343A;
    --tf-card-lo: #121214;
    --tf-texture-grain-opacity: 0;
    --tf-texture-guilloche-opacity: 0;
    --tf-texture-brushed-opacity: 0;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-contrast="normal"])[data-theme="system"], :root:not([data-contrast="normal"]) [data-theme="system"] {
    --tf-canvas: #F4F1EA;
    --tf-surface: #FBFAF7;
    --tf-raised: #EAE6DC;
    --tf-hairline: #ADA79B;
    --tf-control: #5F5B52;
    --tf-text: #16150F;
    --tf-text-2: #3A3731;
    --tf-text-3: #4A463F;
    --tf-time: #16150F;
    --tf-money: #5C4519;
    --tf-money-hi: #9C7B3E;
    --tf-money-line: #735826;
    --tf-hatch: rgba(22, 21, 15, 0.6);
    --tf-hatch-faint: rgba(22, 21, 15, 0.06);
    --tf-meter-gone: rgba(22, 21, 15, 0.5);
    --tf-focus: #16150F;
    --tf-button-bg: #16150F;
    --tf-button-text: #F4F1EA;
    --tf-scrim: rgba(22, 21, 15, 0.4);
    --tf-card-hi: #34343A;
    --tf-card-lo: #121214;
    --tf-texture-grain-opacity: 0;
    --tf-texture-guilloche-opacity: 0;
    --tf-texture-brushed-opacity: 0;
  }
}
/* Reduce Motion: transitions become cross-fades of 150 ms or nothing. The notice's countdown seconds never change. */
[data-motion="reduced"] {
  --tf-duration-press: 0ms;
  --tf-duration-hover: 0ms;
  --tf-duration-tick: 0ms;
  --tf-duration-detent: 0ms;
  --tf-duration-state: 150ms;
  --tf-duration-sheet: 150ms;
  --tf-duration-settle: 150ms;
  --tf-duration-shutter: 150ms;
  --tf-duration-odometer: 0ms;
  --tf-duration-ink-in: 150ms;
  --tf-duration-stop: 150ms;
  --tf-duration-mark-break: 0ms;
  --tf-duration-segment-escape: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
    --tf-duration-press: 0ms;
    --tf-duration-hover: 0ms;
    --tf-duration-tick: 0ms;
    --tf-duration-detent: 0ms;
    --tf-duration-state: 150ms;
    --tf-duration-sheet: 150ms;
    --tf-duration-settle: 150ms;
    --tf-duration-shutter: 150ms;
    --tf-duration-odometer: 0ms;
    --tf-duration-ink-in: 150ms;
    --tf-duration-stop: 150ms;
    --tf-duration-mark-break: 0ms;
    --tf-duration-segment-escape: 0ms;
  }
}

/* Type styles. Sizes are rem-free px at the default text size; the web scales them with the browser's text zoom. */
.tf-type-numeral-hero {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-numeral-hero-size);
  font-weight: var(--tf-type-numeral-hero-weight);
  line-height: var(--tf-type-numeral-hero-line);
  letter-spacing: var(--tf-type-numeral-hero-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
  font-variant-numeric: tabular-nums lining-nums;
}
.tf-type-numeral-xl {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-numeral-xl-size);
  font-weight: var(--tf-type-numeral-xl-weight);
  line-height: var(--tf-type-numeral-xl-line);
  letter-spacing: var(--tf-type-numeral-xl-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
  font-variant-numeric: tabular-nums lining-nums;
}
.tf-type-numeral-l {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-numeral-l-size);
  font-weight: var(--tf-type-numeral-l-weight);
  line-height: var(--tf-type-numeral-l-line);
  letter-spacing: var(--tf-type-numeral-l-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
  font-variant-numeric: tabular-nums lining-nums;
}
.tf-type-numeral-m {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-numeral-m-size);
  font-weight: var(--tf-type-numeral-m-weight);
  line-height: var(--tf-type-numeral-m-line);
  letter-spacing: var(--tf-type-numeral-m-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
  font-variant-numeric: tabular-nums lining-nums;
}
.tf-type-numeral-s {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-numeral-s-size);
  font-weight: var(--tf-type-numeral-s-weight);
  line-height: var(--tf-type-numeral-s-line);
  letter-spacing: var(--tf-type-numeral-s-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
  font-variant-numeric: tabular-nums lining-nums;
}
.tf-type-display-xl {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-display-xl-size);
  font-weight: var(--tf-type-display-xl-weight);
  line-height: var(--tf-type-display-xl-line);
  letter-spacing: var(--tf-type-display-xl-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
}
.tf-type-display-l {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-display-l-size);
  font-weight: var(--tf-type-display-l-weight);
  line-height: var(--tf-type-display-l-line);
  letter-spacing: var(--tf-type-display-l-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
}
.tf-type-display-m {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-display-m-size);
  font-weight: var(--tf-type-display-m-weight);
  line-height: var(--tf-type-display-m-line);
  letter-spacing: var(--tf-type-display-m-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
}
.tf-type-title {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-title-size);
  font-weight: var(--tf-type-title-weight);
  line-height: var(--tf-type-title-line);
  letter-spacing: var(--tf-type-title-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
}
.tf-type-title-s {
  font-family: var(--tf-font-serif);
  font-size: var(--tf-type-title-s-size);
  font-weight: var(--tf-type-title-s-weight);
  line-height: var(--tf-type-title-s-line);
  letter-spacing: var(--tf-type-title-s-tracking);
  font-stretch: var(--tf-font-serif-stretch);
  font-variation-settings: "wdth" 87.5;
}
.tf-type-headline {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-headline-size);
  font-weight: var(--tf-type-headline-weight);
  line-height: var(--tf-type-headline-line);
  letter-spacing: var(--tf-type-headline-tracking);
}
.tf-type-body {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-body-size);
  font-weight: var(--tf-type-body-weight);
  line-height: var(--tf-type-body-line);
  letter-spacing: var(--tf-type-body-tracking);
}
.tf-type-body-desktop {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-body-desktop-size);
  font-weight: var(--tf-type-body-desktop-weight);
  line-height: var(--tf-type-body-desktop-line);
  letter-spacing: var(--tf-type-body-desktop-tracking);
}
.tf-type-callout {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-callout-size);
  font-weight: var(--tf-type-callout-weight);
  line-height: var(--tf-type-callout-line);
  letter-spacing: var(--tf-type-callout-tracking);
}
.tf-type-label {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-label-size);
  font-weight: var(--tf-type-label-weight);
  line-height: var(--tf-type-label-line);
  letter-spacing: var(--tf-type-label-tracking);
}
.tf-type-eyebrow {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-eyebrow-size);
  font-weight: var(--tf-type-eyebrow-weight);
  line-height: var(--tf-type-eyebrow-line);
  letter-spacing: var(--tf-type-eyebrow-tracking);
  text-transform: uppercase;
}
.tf-type-button {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-button-size);
  font-weight: var(--tf-type-button-weight);
  line-height: var(--tf-type-button-line);
  letter-spacing: var(--tf-type-button-tracking);
}
.tf-type-button-desktop {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-button-desktop-size);
  font-weight: var(--tf-type-button-desktop-weight);
  line-height: var(--tf-type-button-desktop-line);
  letter-spacing: var(--tf-type-button-desktop-tracking);
}
.tf-type-figure {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-figure-size);
  font-weight: var(--tf-type-figure-weight);
  line-height: var(--tf-type-figure-line);
  letter-spacing: var(--tf-type-figure-tracking);
  font-variant-numeric: tabular-nums lining-nums;
}
.tf-type-figure-l {
  font-family: var(--tf-font-sans);
  font-size: var(--tf-type-figure-l-size);
  font-weight: var(--tf-type-figure-l-weight);
  line-height: var(--tf-type-figure-l-line);
  letter-spacing: var(--tf-type-figure-l-tracking);
  font-variant-numeric: tabular-nums lining-nums;
}
.tf-type-ref {
  font-family: var(--tf-font-mono);
  font-size: var(--tf-type-ref-size);
  font-weight: var(--tf-type-ref-weight);
  line-height: var(--tf-type-ref-line);
  letter-spacing: var(--tf-type-ref-tracking);
  font-variant-numeric: tabular-nums lining-nums;
}

/* TrapFree website — design v2.1 ("Held to account").
   Served as /trapfree/assets/site.css after the design tokens (web/assets/tokens.css, generated from
   design/v2/tokens.json): every colour here is a theme role (--tf-*), never a raw value, so Dark,
   Paper (data-theme="system" follows the OS), Increase Contrast and forced colours all work.
   Laws kept here: the serif only for display and numerals ≥ 20 px, Light only ≥ 44 px; no text under
   11 px; bullion (--tf-money) is money only; the hatch means "closed"; caution yellow never appears
   on the website; targets ≥ 44 px; no sideways scroll from 320 px; no movement under reduced motion. */

/* ---------------------------------------------------------------- fonts (self-hosted, OFL 1.1) */
@font-face { font-family: "Inter"; src: url(fonts/Inter-Regular.ttf?v=40d692fce188) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-Medium.ttf?v=97ad806f526e) format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-SemiBold.ttf?v=78a843fade9d) format("truetype"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url(fonts/NotoSerifDisplay-SemiCondensedLight.ttf?v=386bc04e500b) format("truetype"); font-weight: 300; font-style: normal; font-stretch: 87.5%; font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url(fonts/NotoSerifDisplay-SemiCondensed.ttf?v=73d037859758) format("truetype"); font-weight: 400; font-style: normal; font-stretch: 87.5%; font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url(fonts/NotoSerifDisplay-SemiCondensedLightItalic.ttf?v=fedbbf0f97c0) format("truetype"); font-weight: 300; font-style: italic; font-stretch: 87.5%; font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url(fonts/NotoSerifDisplay-SemiCondensedItalic.ttf?v=792cf57cd8cb) format("truetype"); font-weight: 400; font-style: italic; font-stretch: 87.5%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/IBMPlexMono-Regular.ttf?v=7c6fbddca4b7) format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- elevation per theme (tokens.css has the dark set;
   on Paper the dark e1 hairline reads as a hard line, so Paper uses its own light-from-above values) */
:root { --site-e1: var(--tf-shadow-e1); --site-e2: var(--tf-shadow-e2); }
@media (prefers-color-scheme: light) { [data-theme="system"] { --site-e1: 0 1px 2px rgba(22, 21, 15, 0.06); --site-e2: var(--tf-shadow-e2-light); } }
[data-theme="light"] { --site-e1: 0 1px 2px rgba(22, 21, 15, 0.06); --site-e2: var(--tf-shadow-e2-light); }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--tf-canvas); color: var(--tf-text);
  font-family: var(--tf-font-sans); font-size: 15px; line-height: 1.55; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
main { flex: 1 0 auto; display: block; }
main:focus { outline: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tf-focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 12px; }
strong, b { font-weight: 600; }
code, kbd { font-family: var(--tf-font-mono); font-size: 0.92em; overflow-wrap: anywhere; }
hr { border: 0; border-top: 1px solid var(--tf-hairline); margin: 32px 0; }
::selection { background: var(--tf-text); color: var(--tf-canvas); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--tf-button-bg); color: var(--tf-button-text); padding: 12px 16px; border-radius: var(--tf-radius-m); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 400px) { .wrap { padding-left: 20px; padding-right: 20px; } }
@media (min-width: 768px) { .wrap { padding-left: 32px; padding-right: 32px; } }
.narrow { max-width: 760px; }
.reading { max-width: 860px; }

/* ---------------------------------------------------------------- type */
.eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--tf-text-3); margin: 0 0 10px; }
.serif, h1, h2.serif, .display { font-family: var(--tf-font-serif); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; font-variant-numeric: lining-nums; }
h1 { font-weight: 400; font-size: 34px; line-height: 1.08; letter-spacing: -0.012em; margin: 0 0 14px; text-wrap: balance; }
h1 em, .display em { font-style: italic; color: var(--tf-text-2); }
h2 { font-family: var(--tf-font-serif); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 40px 0 12px; text-wrap: balance; }
h2 em { font-style: italic; color: var(--tf-text-2); }
h3 { font-family: var(--tf-font-sans); font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -0.005em; margin: 28px 0 8px; }
h4 { font-weight: 600; font-size: 15px; margin: 20px 0 6px; }
.h3-like { font-family: var(--tf-font-sans); font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -0.005em; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.lead { font-size: 17px; line-height: 1.55; color: var(--tf-text-2); max-width: 64ch; margin: 0 0 20px; }
.muted { color: var(--tf-text-2); }
.quiet { color: var(--tf-text-3); }
.small { font-size: 13px; }
.money { color: var(--tf-money); }
@media (min-width: 768px) {
  h1 { font-size: 46px; font-weight: 300; }
  h2 { font-size: 32px; }
}
@media (min-width: 1100px) {
  h1.hero-title { font-size: 64px; line-height: 1.0; letter-spacing: -0.02em; }
}

/* ---------------------------------------------------------------- header */
.site-head { border-bottom: 1px solid var(--tf-hairline); }
.head-row { display: flex; align-items: center; gap: 12px 24px; min-height: 72px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--tf-text); text-decoration: none; min-height: 44px; flex: none; margin-right: auto; }
.brand .mark { width: 26px; height: 23px; fill: currentColor; flex: none; }
.brand .wm { height: 10px; width: auto; aspect-ratio: 1015.13 / 100; fill: currentColor; flex: none; }
.nav-wide { display: none; }
.nav-wide ul, .nav-narrow ul { list-style: none; margin: 0; padding: 0; }
.nav-wide ul { display: flex; gap: 4px; align-items: center; }
.nav-wide a, .nav-narrow a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--tf-text-2); text-decoration: none; border-radius: var(--tf-radius-s); font-size: 14px; font-weight: 500; }
.nav-wide a:hover, .nav-narrow a:hover { color: var(--tf-text); }
.nav-wide a[aria-current="page"], .nav-narrow a[aria-current="page"] { color: var(--tf-text); box-shadow: inset 0 -2px 0 var(--tf-text); border-radius: 0; }
.head-account { flex: none; }
.nav-narrow .in-menu { display: block; }
@media (max-width: 559px) { .site-head .head-account { display: none; } }
@media (min-width: 560px) { .nav-narrow .in-menu { display: none; } }
.nav-narrow { flex: none; position: relative; }
.nav-narrow summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--tf-control); border-radius: var(--tf-radius-m); font-weight: 600; font-size: 14px; }
.nav-narrow summary::-webkit-details-marker { display: none; }
.nav-narrow summary .bars { width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.nav-narrow summary .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
.nav-narrow[open] summary { background: var(--tf-raised); }
.nav-narrow nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(300px, calc(100vw - 32px)); background: var(--tf-surface); border: 1px solid var(--tf-hairline); border-radius: var(--tf-radius-l); box-shadow: var(--site-e2); padding: 8px; }
.nav-narrow nav a { font-size: 15px; }
@media (min-width: 960px) {
  .nav-wide { display: block; }
  .nav-narrow { display: none; }
}

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 20px; border-radius: var(--tf-radius-m);
  border: 1px solid var(--tf-control); background: transparent; color: var(--tf-text); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer; transition: border-color var(--tf-duration-hover) var(--tf-easing-standard); }
.btn:hover { border-color: var(--tf-text); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--tf-button-bg); border-color: var(--tf-button-bg); color: var(--tf-button-text); }
.btn--primary:hover { border-color: var(--tf-button-bg); filter: brightness(1.05); }
.btn--sm { min-height: 44px; padding: 4px 14px; font-size: 14px; }
.btn--quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; color: var(--tf-text-2); padding-left: 8px; padding-right: 8px; }
.btn--quiet:hover { border-color: transparent; color: var(--tf-text); }
/* a quiet link next to a button lines up with the button's edge when the row wraps on a phone */
.btns .btn--quiet { padding-left: 0; padding-right: 0; }
.btn--price { border-color: var(--tf-money-line); }
.btn--price .p { color: var(--tf-money); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { color: var(--tf-text-3); background: var(--tf-raised); border-color: var(--tf-hairline); cursor: not-allowed; filter: none; }
.unavailable + p { margin-top: 10px; }
.unavailable { display: grid; place-items: center; min-height: 48px; margin: 0; padding: 6px 20px; border: 1px dashed var(--tf-control); border-radius: var(--tf-radius-m); color: var(--tf-text-2); font-weight: 600; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }
/* the way out is the same size: two equal columns, stacked (primary first) under 420 px */
.btns.eq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.btns.eq > *, .btns.eq form > .btn { width: 100%; }
.btns.eq form { margin: 0; display: flex; }
@media (max-width: 419px) { .btns.eq { grid-template-columns: minmax(0, 1fr); } .btns.eq .first-on-phone { order: -1; } }

/* ---------------------------------------------------------------- surfaces */
.card { background: var(--tf-surface); border: 1px solid var(--tf-hairline); border-radius: var(--tf-radius-l); box-shadow: var(--site-e1); padding: 20px; min-width: 0; }
@media (min-width: 768px) { .card { padding: 24px; } }
.card > :last-child { margin-bottom: 0; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
/* a form card's heading comes after its hidden fields: it is still the first thing seen */
.card > input[type="hidden"] + h2, .card > input[type="hidden"] + h3 { margin-top: 0; }
/* cards one after another in a page's flow, and the line under a card, keep their distance (grids use gap) */
.acct-main > .card + .card, .page-head > .card + .card, .doc-body > .card + .card { margin-top: 16px; }
.card + p, .card + .prose { margin-top: 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid.two, .grid.three, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.section { padding: 48px 0; }
.section + .section { border-top: 1px solid var(--tf-hairline); }
@media (min-width: 768px) { .section { padding: 72px 0; } }
.section-head { max-width: 760px; margin-bottom: 24px; }
.section-head h2 { margin-top: 0; }
.eyebrow + h1, .eyebrow + h2, .section > h2:first-child { margin-top: 0; }
.grid + p, .plans + p, .grid + .btns { margin-top: 16px; }
.page-head { padding-top: 40px; padding-bottom: 8px; }
@media (min-width: 768px) { .page-head { padding-top: 64px; padding-bottom: 16px; } }
.page-head .lead { margin-bottom: 8px; }
/* a form or cards straight under the lead sit as far from it as on the account pages */
.page-head .lead + .card, .page-head .lead + .grid { margin-top: 20px; }

/* notes, alerts and the draft notice: words and a glyph, never a new colour */
.note { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--tf-control); border-radius: var(--tf-radius-m); background: var(--tf-surface); padding: 14px 16px; margin: 16px 0; }
.note > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.note p:last-child { margin-bottom: 0; }
.note--strong { border-width: 2px; border-color: var(--tf-text); }
.draft-notice { border-left-width: 4px; border-left-color: var(--tf-text); }
.fill { border-bottom: 1px dashed var(--tf-control); color: var(--tf-text-2); }
.status-line { min-height: 1px; }

/* ---------------------------------------------------------------- state tags (glyph + word) */
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px 2px 6px; border: 1px solid var(--tf-control); border-radius: var(--tf-radius-tag); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; white-space: normal; }
.tag::before { content: ""; width: 10px; height: 10px; flex: none; border: 1.5px solid currentColor; }
.tag--closed::before { background: currentColor; }
.tag--half::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.tag--paid { border-color: var(--tf-money-line); color: var(--tf-money); }
.tag--paid::before { border-radius: 50%; }
.tag--none::before { display: none; }

/* ---------------------------------------------------------------- the Rule (drawn as SVG so the page needs no inline style) */
.rule-svg { display: block; width: 100%; height: 14px; }
.rule-svg .on { fill: var(--tf-time); }
.rule-svg .gone { fill: none; stroke: var(--tf-meter-gone); stroke-width: 1; }
.rule-svg .closed { fill: url(#tf-hatch); stroke: var(--tf-meter-gone); stroke-width: 1; }
.rule-svg .paid { fill: var(--tf-money); }
.hatch-line { stroke: var(--tf-hatch); stroke-width: 1; }
.day-rule { display: grid; gap: 18px; }
.day-rule .sector { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.day-rule .sector .name { font-weight: 600; }
.day-rule .sector .left { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 400; }
.day-rule .sector .meter { grid-column: 1 / -1; }
.day-rule .sector .state { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- home */
.hero { padding: 40px 0 48px; }
.hero-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .hero { padding: 72px 0 80px; } .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.hero .lead { font-size: 18px; }
.today-card .eyebrow { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wallet-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--tf-hairline); margin-top: 20px; padding-top: 16px; }
.wallet-line .num { font-family: var(--tf-font-serif); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; font-weight: 300; font-size: 44px; line-height: 1; color: var(--tf-money); }
.feature .glyph { width: 28px; height: 28px; margin-bottom: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { margin-top: 0; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.checks + p { margin-top: 16px; }
.points { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.points li { position: relative; padding-left: 22px; }
.points li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 6px; height: 6px; background: currentColor; }
.nots li::before { width: 12px; height: 12px; border: 0; top: 5px; transform: none; background: linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%); }
.platforms .card h3 { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-top: 0; }
.quote { font-family: var(--tf-font-serif); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; font-style: italic; font-size: 24px; line-height: 1.3; color: var(--tf-text-2); margin: 0; }
@media (min-width: 768px) { .quote { font-size: 30px; } }
/* the setup sections: words beside a screen of the app (the screen first on wide windows when .flip) */
.split { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split.flip > .shot { order: -1; }
  /* the screen stays beside the words while a long list of them scrolls past */
  .split > .shot { position: sticky; top: 24px; }
}
.split > div > :first-child { margin-top: 0; }
.split > div > :last-child { margin-bottom: 0; }
.split .lead + .steps, .split .lead + .checks, .split .table-wrap + .checks { margin-top: 20px; }
.steps + p, .checks + .small { margin-top: 20px; }
/* a screen of the app: the phone's screen on narrow windows (its top part), the computer's on wider ones */
.shot { margin: 0; min-width: 0; }
.shot picture { display: block; }
.shot img { display: block; width: 100%; height: auto; background: var(--tf-color-onyx); border: 1px solid var(--tf-hairline); border-radius: var(--tf-radius-l); box-shadow: var(--site-e2); }
@media (max-width: 639px) { .shot img { max-width: 420px; margin: 0 auto; aspect-ratio: 375 / 660; object-fit: cover; object-position: top; } }
/* the computer's screen without the empty space under its content (the screens are 1280 × 800) */
@media (min-width: 640px) { .shot img { aspect-ratio: 2 / 1; object-fit: cover; object-position: top; } }
.shot figcaption { font-size: 13px; color: var(--tf-text-3); margin-top: 12px; text-align: center; }
/* numbered steps (the four setup screens) */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li { counter-increment: step; position: relative; padding-left: 44px; min-height: 28px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--tf-control); border-radius: 50%; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.steps strong { color: var(--tf-text); }
/* what each level of a category allows */
.levels tbody th { white-space: nowrap; width: auto; }
.levels th .lv { display: inline-block; min-width: 1.4em; font-variant-numeric: tabular-nums; color: var(--tf-text-3); }
.levels td { color: var(--tf-text); }
/* "Coming": a feature that is not in the apps yet */
h2 .tag { vertical-align: middle; margin-left: 6px; font-family: var(--tf-font-sans); font-style: normal; }
.soon .grid { margin-bottom: 20px; }
.soon .checks { max-width: 72ch; }
.soon .card h3 { margin-top: 0; }

/* ---------------------------------------------------------------- pricing */
.plans { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; gap: 10px; }
/* Plan prices sit side by side, so none is a single hero amount: Inter figures, never the serif (DESIGN-SYSTEM §5.2). */
.plan .price { font-family: var(--tf-font-sans); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }
.plan .price small { font-family: var(--tf-font-sans); font-size: 14px; color: var(--tf-text-2); font-weight: 400; margin-left: 6px; }
.plan.highlight { border: 3px double var(--tf-money-line); }
.plan .badge { align-self: flex-start; }
.plan ul { margin: 6px 0 0; }
.packs { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pack { border: 1px solid var(--tf-money-line); border-radius: var(--tf-radius-m); padding: 14px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pack .m { font-weight: 600; font-size: 17px; }
.pack .p { color: var(--tf-money); font-weight: 600; font-size: 17px; }
.pack .b { flex-basis: 100%; font-size: 12px; color: var(--tf-text-2); }
.segmented { display: inline-flex; border: 1px solid var(--tf-control); border-radius: var(--tf-radius-m); padding: 3px; gap: 3px; flex-wrap: wrap; }
.segmented a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--tf-radius-s); text-decoration: none; font-weight: 600; font-size: 14px; color: var(--tf-text-2); }
.segmented a[aria-current="true"] { background: var(--tf-raised); color: var(--tf-text); box-shadow: inset 0 0 0 1px var(--tf-control); }
.compare { width: 100%; border-collapse: collapse; }
.compare caption { text-align: left; }
.compare th, .compare td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px dotted var(--tf-hairline); vertical-align: top; }
.compare thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tf-text-3); border-bottom: 3px double var(--tf-control); }
.compare td:not(:first-child), .compare th:not(:first-child) { width: 30%; }

/* ---------------------------------------------------------------- ledgers and key/value lists */
.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger caption { text-align: left; padding-bottom: 12px; }
.ledger thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tf-text-3); padding: 0 12px 10px 0; border-bottom: 3px double var(--tf-control); }
.ledger td, .ledger tbody th { text-align: left; font-weight: 400; padding: 12px 12px 12px 0; border-bottom: 1px dotted var(--tf-hairline); vertical-align: top; }
.ledger td.a, .ledger th.a { text-align: right; padding-right: 0; white-space: nowrap; font-weight: 500; }
.ledger td.r { font-family: var(--tf-font-mono); font-size: 12px; color: var(--tf-text-3); overflow-wrap: anywhere; }
.ledger tr.is-money td.a { color: var(--tf-money); }
.table-scroll { max-width: 100%; overflow-x: auto; }
.ledger td small { display: block; color: var(--tf-text-3); font-size: 12px; margin-top: 2px; }
.ledger tfoot td, .ledger tfoot th { border-bottom: 0; padding: 14px 12px 0 0; font-weight: 600; text-align: left; vertical-align: baseline; }
.ledger tfoot td.a { text-align: right; padding-right: 0; }
@media (max-width: 559px) { .ledger .hide-s { display: none; } }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 0; }
.kv dt, .kv dd { padding: 12px 0; border-bottom: 1px dotted var(--tf-hairline); margin: 0; }
.kv dt { color: var(--tf-text-2); padding-right: 12px; }
.kv dd { text-align: right; font-weight: 500; }
.kv .total { border-top: 3px double var(--tf-control); font-weight: 600; color: var(--tf-text); }
.kv.card { margin: 16px 0; }
/* long values (the withdrawal page's contract and statement): the label above its value, both left */
.kv.stack { grid-template-columns: minmax(0, 1fr); }
.kv.stack dt { border-bottom: 0; padding: 12px 0 2px; }
.kv.stack dd { text-align: left; padding-top: 0; }
.big-num { font-family: var(--tf-font-serif); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; font-weight: 300; font-size: 56px; line-height: 0.95; letter-spacing: -0.01em; }
.big-num.money { color: var(--tf-money); }
/* Amounts in a row of cards (₹0 · ₹999 · ₹9): Inter figures, because the serif may set ₹ only as one hero
   amount per screen (DESIGN-SYSTEM §5.2; checked by web/tools/shots.mjs). */
.fig-row { font-family: var(--tf-font-sans); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; margin: 0 0 8px; }
.fig-row.money { color: var(--tf-money); }

/* ---------------------------------------------------------------- download */
.dl .meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 13px; color: var(--tf-text-2); margin: 12px 0 0; }
.dl .meta dt { color: var(--tf-text-3); }
.dl .meta dd { margin: 0; overflow-wrap: anywhere; }
.dl .meta code { font-size: 12px; }

/* ---------------------------------------------------------------- prose (legal pages, FAQ) */
.prose { font-size: 16px; line-height: 1.65; max-width: 72ch; }
.prose h2 { font-size: 26px; margin-top: 48px; scroll-margin-top: 16px; }
.prose h3 { margin-top: 32px; scroll-margin-top: 16px; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 14px; }
.prose li { margin: 6px 0; }
.prose li > ul, .prose li > ol { margin: 6px 0; }
.prose blockquote { margin: 16px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--tf-control); color: var(--tf-text-2); }
.prose a { overflow-wrap: break-word; }
@media (max-width: 767px) { .prose a { overflow-wrap: anywhere; } }
.table-wrap { max-width: 100%; overflow-x: auto; margin: 16px 0 20px; border: 1px solid var(--tf-hairline); border-radius: var(--tf-radius-m); background: var(--tf-surface); }
.table-wrap:focus-visible { outline-offset: 2px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px dotted var(--tf-hairline); min-width: 8em; }
.table-wrap thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--tf-text-2); border-bottom: 3px double var(--tf-control); }
.table-wrap tbody th { font-weight: 600; color: var(--tf-text-2); width: 32%; }
.table-wrap tr:last-child td, .table-wrap tr:last-child th { border-bottom: 0; }
.doc-layout { display: grid; gap: 0 56px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "toc" "body"; align-items: start; }
.doc-head { grid-area: head; max-width: 860px; }
.doc-layout > .toc { grid-area: toc; }
.doc-body { grid-area: body; min-width: 0; padding-bottom: 32px; }
.toc-wide { display: none; }
@media (min-width: 1100px) {
  .doc-layout { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "gap head" "toc body"; }
  .toc-wide { display: block; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-top: 6px; }
  .toc-narrow { display: none; }
}
.toc { font-size: 14px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; color: var(--tf-text-2); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--tf-text); text-decoration: underline; }
.toc-narrow { border-top: 1px solid var(--tf-hairline); border-bottom: 1px solid var(--tf-hairline); margin: 8px 0 24px; }
.toc-narrow summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; }
.toc-narrow nav { padding-bottom: 12px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--tf-text-3); margin: 0 0 8px; }
.legal-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.legal-list li { border-bottom: 1px dotted var(--tf-hairline); }
.legal-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 0; text-decoration: none; }
.legal-list a strong { font-size: 17px; }
.legal-list a span { color: var(--tf-text-2); grid-column: 1; }
.legal-list a .when { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; color: var(--tf-text-3); text-align: right; }
.legal-list a:hover strong { text-decoration: underline; }
@media (max-width: 559px) { .legal-list a { grid-template-columns: minmax(0, 1fr); } .legal-list a .when { grid-column: 1; grid-row: auto; text-align: left; } }

/* FAQ */
.faq { border-top: 1px solid var(--tf-hairline); }
.faq details { border-bottom: 1px solid var(--tf-hairline); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 56px; padding: 12px 0; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 0 20px; color: var(--tf-text-2); max-width: 72ch; font-size: 16px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 6px; margin: 0 0 16px; }
.field label, .label { font-size: 14px; font-weight: 600; }
.field .hint { font-size: 13px; color: var(--tf-text-2); margin: 0; }
.input, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--tf-control); border-radius: var(--tf-radius-m);
  background: var(--tf-surface); color: var(--tf-text); font: inherit; font-size: 16px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input.code { font-family: var(--tf-font-mono); font-size: 22px; letter-spacing: 0.3em; max-width: 14ch; }
.field [aria-invalid="true"] { border-width: 2px; border-color: var(--tf-text); }
.error-text { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; font-size: 14px; margin: 0; }
.error-text::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; line-height: 1; margin-top: 1px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--tf-control); border-radius: var(--tf-radius-m); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--tf-text); }
.radio-group { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.radio-group legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.radio-group label { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 10px 14px; border: 1px solid var(--tf-control); border-radius: var(--tf-radius-m); cursor: pointer; }
.radio-group input { width: 20px; height: 20px; margin: 0; accent-color: var(--tf-text); flex: none; }
.radio-group label:has(input:checked) { border-width: 2px; border-color: var(--tf-text); }
.form-card { max-width: 520px; }

/* ---------------------------------------------------------------- account portal */
/* The page comes first in the source and the menu after it (no tabbing through the menu to reach the page);
   wide screens place the menu in the left column, phones under the page with one "Account menu" link on top. */
.account-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "jump" "main" "nav"; padding-top: 24px; padding-bottom: 64px; }
.acct-jump { grid-area: jump; margin: 0 0 -12px; }
.acct-jump a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--tf-text-2); }
.acct-main { grid-area: main; min-width: 0; }
.account-layout > .side-nav { grid-area: nav; border-top: 1px solid var(--tf-hairline); padding-top: 24px; scroll-margin-top: 16px; }
@media (min-width: 960px) {
  .account-layout { grid-template-columns: 236px minmax(0, 1fr); grid-template-areas: "nav main"; gap: 48px; padding-top: 48px; }
  .acct-jump { display: none; }
  .account-layout > .side-nav { border-top: 0; padding-top: 0; align-self: start; }
}
.side-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
@media (min-width: 960px) { .side-nav ul { display: grid; gap: 2px; } }
.side-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--tf-radius-s); text-decoration: none; color: var(--tf-text-2); font-size: 14px; font-weight: 500; border: 1px solid var(--tf-hairline); }
@media (min-width: 960px) { .side-nav a { border: 0; } }
.side-nav a[aria-current="page"] { color: var(--tf-text); background: var(--tf-raised); box-shadow: inset 2px 0 0 var(--tf-text); font-weight: 600; }
.side-nav .who { font-size: 13px; color: var(--tf-text-3); margin: 0 0 12px; overflow-wrap: anywhere; }
.side-nav form { margin-top: 12px; }
/* "Sign out" lines up with the menu's words */
.side-nav form .btn--quiet { padding-left: 11px; padding-right: 11px; }
.acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.acct-head h1 { margin: 0; font-size: 34px; font-weight: 400; }
@media (min-width: 768px) { .acct-head h1 { font-size: 44px; font-weight: 300; } }
.tiles { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; border-color: var(--tf-control); }
.tile:hover { border-color: var(--tf-text); }
.tile .v { font-family: var(--tf-font-serif); font-stretch: 87.5%; font-variation-settings: "wdth" 87.5; font-size: 28px; line-height: 1.05; font-weight: 400; }
.tile .v.money { color: var(--tf-money); }
.tile:hover .go { text-decoration: underline; }
/* Name and state share a line while both fit; a long state ("Protection off since …") wraps below the
   name instead of squeezing it to one letter a line on phones. */
.device { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 4px 12px; padding: 16px 0; border-bottom: 1px dotted var(--tf-hairline); }
.device:last-child { border-bottom: 0; }
.device .dname { min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: 16px; }
.device .dmeta { flex-basis: 100%; font-size: 13px; color: var(--tf-text-2); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.links-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.links-list li { padding: 8px 0; border-bottom: 1px dotted var(--tf-hairline); }
.danger-zone { border: 2px solid var(--tf-text); }
.code-box { font-family: var(--tf-font-mono); font-size: 18px; letter-spacing: 0.08em; padding: 12px 16px; border: 1px solid var(--tf-control); border-radius: var(--tf-radius-tag); display: inline-block; overflow-wrap: anywhere; }
/* a long link breaks only at a slash (<wbr>), never inside the code at its end */
.nowrap { white-space: nowrap; }

/* the TrapFree Test stamp (words, never colour) */
.test-stamp { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 20px; }
.stamp { display: inline-block; border: 2px solid var(--tf-text); padding: 4px 10px; font: 600 13px/1 var(--tf-font-mono); letter-spacing: 0.3em; }

/* ---------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--tf-hairline); margin-top: 48px; padding: 40px 0 32px; font-size: 14px; color: var(--tf-text-2); }
.foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the link columns are wide enough for "Report a security problem" on one line at 1440 px */
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); } }
.foot-grid .about { grid-column: 1 / -1; }
.site-foot .quote { margin-bottom: 12px; }
/* two even lines instead of one word alone on the second ("over.", "trackers.") */
.foot-grid .about p { text-wrap: balance; }
@media (min-width: 900px) { .foot-grid .about { grid-column: auto; } }
.foot-grid h2 { font-family: var(--tf-font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tf-text-3); margin: 0 0 8px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; color: var(--tf-text-2); text-decoration: none; }
.foot-grid li a:hover { color: var(--tf-text); text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--tf-hairline); margin-top: 28px; padding-top: 20px; font-size: 13px; color: var(--tf-text-3); }
.foot-base p { margin: 0; }
/* the seller and grievance officer lines (E-Commerce Rules 2020 r.4; CA-28): each on a line of its own */
.foot-base .seller { flex-basis: 100%; }
.foot-base .seller a { color: inherit; }
/* a short anchor the apps link to (/legal/privacy#rights) sits just before its heading */
.anchor { display: block; }

/* ---------------------------------------------------------------- who sells: About, Contact (src/business.ts) */
/* a business detail not filled in yet (development servers only; production leaves it out): words, never colour alone */
.tbf { border-bottom: 1px dashed var(--tf-control); color: var(--tf-text-2); font-family: var(--tf-font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
.business td, .contact-list dd { overflow-wrap: anywhere; }
.contact-card h2 { margin-top: 0; }
/* a list of points right after a row of cards (About, Good days) keeps its distance from them */
.grid + .checks { margin-top: 20px; }
.contact-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0 0 16px; }
.contact-list dt { font-weight: 600; color: var(--tf-text-2); }
.contact-list dd { margin: 0; }
@media (max-width: 479px) { .contact-list { grid-template-columns: minmax(0, 1fr); gap: 2px; } .contact-list dd { margin-bottom: 10px; } }

/* ---------------------------------------------------------------- reduced motion, forced colours, print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}
@media (forced-colors: active) {
  .btn, .card, .note, .tag, .pack, .check, .radio-group label, .segmented, .table-wrap { border-color: CanvasText; }
  .btn--primary { border: 2px solid ButtonText; }
  .rule-svg .on, .rule-svg .paid { fill: CanvasText; }
  .tag--closed::before { background: CanvasText; }
  .nav-wide a[aria-current="page"], .side-nav a[aria-current="page"] { text-decoration: underline; }
}
@media print {
  .site-head nav, .nav-narrow, .head-account, .site-foot, .skip, .toc, .btns { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .table-wrap { overflow: visible; border: 0; }
}