/* Wagercue design tokens (token contract v3, redesign wave R1: unified
   template - docs/design/UNIFIED-TEMPLATE-SPEC.md section 2/3). Chassis-owned
   contract: every theme defines exactly this variable set, tailwind.config.js
   maps utilities onto the variables, scripts/build_css.sh compiles one bundle
   per theme. Semantic var() colors trade away Tailwind opacity modifiers
   (bg-brand/50) by design; --rgb-* triplets carry the opacity-modifier path
   instead (decision 117), --color-* hex stays the single source of truth the
   contrast invariant parses.
   No AA nudge needed: the spec table's hex values clear the contrast
   invariant unmodified.
*/
:root {
  /* Declare the theme's rendering scheme so native form controls,
     scrollbars, and the browser's own surfaces match the palette
     instead of falling back to a light default under a dark ground. */
  color-scheme: dark;
  /* Brand (spec section 3 per-site expression table; ramp stops sourced from
     the live site's own tailwind.config.js brand ramp, see the ramp block
     below). */
  --color-brand: #ffa31a;
  --color-brand-strong: #f08a00;
  --color-brand-soft: #3d2200;
  /* Brand ink (R5 a11y fix): paired text color for bg-brand buttons/bands,
     same reasoning as --color-cta-ink above (white-on-amber measures
     2.0:1). Reuses the existing --color-brand-soft dark ink (7.36:1). */
  --color-brand-ink: #3d2200;
  /* Amber Terminal restoration (kb-ratified platforms/wagercue.md): the
     accent role carries the gold seal used for trust/verification badges,
     kept off the electric-amber brand register so a seal never reads as
     another brand button. */
  --color-accent: #f5b544;
  /* Ink on an accent surface (token contract v3.3, see tailwind.config.js):
     white-on-gold fails WCAG AA, so the ink is the existing dark
     --color-brand-soft value instead (8.11:1 against --color-accent above,
     computed via the WCAG relative-luminance formula). */
  --color-accent-ink: #3d2200;

  /* Clickout CTA (token contract v3.1, craft round R3, owner review):
     this site's Visit CTA reads --color-cta/--color-cta-strong instead of
     --color-brand, one register hotter (brighter) than the brand amber so
     the money action reads as distinct from the brand chrome elsewhere on
     the page. */
  --color-cta: #ffb13c;
  --color-cta-strong: #ffbc58;
  /* CTA ink (token contract v3.2, R5 a11y fix): the paired text color for
     bg-cta buttons. White-on-amber measures well under WCAG AA's 4.5:1
     floor for normal text, so this theme's ink is the existing
     --color-brand-soft dark ink instead of white (8.13:1 against
     --color-cta, computed via the WCAG relative-luminance formula). Every
     other theme's --color-cta-ink stays white since white already clears
     4.5:1 against their own cta color. */
  --color-cta-ink: #3d2200;

  /* Surfaces (kb-ratified Amber Terminal ground, restored exactly). */
  --color-page: #0b0e14;
  --color-surface: #12161d;
  --color-border: #594b36;
  --control-border: #78684e;

  /* Text (kb-ratified Amber Terminal ink, restored exactly). */
  --color-ink: #f3f6fb;
  --color-ink-muted: #9aa6bd;

  /* Danger (decision R2.1-A). Doubles as the ticker "loss" red - reserved
     for that semantic and real error/invalid-state text, never decorative. */
  --color-danger: #f43f5e;

  /* Canonical semantic roles. The shared logo tile stays explicitly light. */
  --page-ground: var(--color-page);
  --surface: var(--color-surface);
  --surface-raised: #181c24;
  --border: var(--color-border);
  --ink: var(--color-ink);
  --ink-muted: var(--color-ink-muted);
  --brand: var(--color-brand);
  --brand-strong: var(--color-brand-strong);
  --brand-soft: var(--color-brand-soft);
  --accent: var(--color-accent);
  --focus-ring: #ffa31a;
  --cta-primary: var(--color-cta);
  --cta-primary-hover: var(--color-cta-strong);
  --cta-secondary: var(--color-brand-soft);
  /* Ticker "win" green - reserved for that semantic, kept out of brand/CTA. */
  --success: #22c55e;
  --warning: #ffd166;
  --danger: var(--color-danger);
  --shadow-card: 0 1px 2px rgb(24 24 27 / 0.05), 0 10px 28px -14px rgb(24 24 27 / 0.16);
  --shadow-overlay: 0 20px 40px -18px rgb(24 24 27 / 0.32);

  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-card: 0.625rem;
  --radius-control: 0.5rem;
  --radius-pill: 9999px;

  --texture: none;

  /* --- Token contract v2 (decision 117): RGB-triplet mirrors of the
     semantic hex tokens above, for Tailwind's rgb(var(--x) / <alpha-value>)
     opacity-modifier classes (bg-brand/50, border-ink/10, etc). Named
     --rgb-* (not --color-*) so tests/invariants/test_theme_contrast.py's
     hex-only parser over every --color-* declaration keeps passing
     unedited; the --color-* hex tokens above remain the single source
     of truth the contrast gate checks, resolved colors are identical. */
  --rgb-brand: 255 163 26; /* #ffa31a */
  --rgb-brand-strong: 240 138 0; /* #f08a00 */
  --rgb-brand-soft: 61 34 0; /* #3d2200 */
  --rgb-brand-ink: 61 34 0; /* #3d2200 */
  --rgb-accent: 245 181 68; /* #f5b544 */
  --rgb-accent-ink: 61 34 0; /* #3d2200 */
  --rgb-cta: 255 177 60; /* #ffb13c */
  --rgb-cta-strong: 255 188 88; /* #ffbc58 */
  --rgb-cta-ink: 61 34 0; /* #3d2200 */
  --rgb-page: 11 14 20; /* #0b0e14 */
  --rgb-surface: 18 22 29; /* #12161d */
  --rgb-border: 89 75 54; /* #594b36 */
  --rgb-control-border: 120 104 78; /* #78684e */
  --rgb-ink: 243 246 251; /* #f3f6fb */
  --rgb-ink-muted: 154 166 189; /* #9aa6bd */
  --rgb-danger: 244 63 94; /* #f43f5e */
  --rgb-page-ground: 11 14 20;
  --rgb-surface-raised: 24 28 36;
  --rgb-focus-ring: 255 163 26;
  --rgb-cta-primary: 255 177 60;
  --rgb-cta-primary-hover: 255 188 88;
  --rgb-cta-secondary: 61 34 0;
  --rgb-success: 34 197 94;
  --rgb-warning: 255 209 102;

  /* Generic brand ramp (decision 117), regenerated from this site's real
     legacy ramp (read-only source: wager-comparison-platform/tailwind.config.js).
     Read by tailwind.config.js as brand.50..950 utility colors. */
  --rgb-brand-50: 255 246 232;
  --rgb-brand-100: 255 233 194;
  --rgb-brand-200: 255 214 138;
  --rgb-brand-300: 255 174 56;
  --rgb-brand-400: 255 176 31;
  --rgb-brand-500: 255 163 26;
  --rgb-brand-600: 240 138 0;
  --rgb-brand-700: 231 126 0;
  --rgb-brand-800: 216 120 0;
  --rgb-brand-900: 107 60 0;
  --rgb-brand-950: 61 34 0;
  /* Generic neutral ramp: same lightness stops as the shared zinc scale,
     hue-biased toward this theme's brand hue (spec section 3: "neutrals get
     a slight hue bias toward the brand"). */
  --rgb-neutral-50: 250 250 250;
  --rgb-neutral-100: 245 245 244;
  --rgb-neutral-200: 231 230 228;
  --rgb-neutral-300: 216 214 212;
  --rgb-neutral-400: 170 166 161;
  --rgb-neutral-500: 123 119 112;
  --rgb-neutral-600: 90 87 83;
  --rgb-neutral-700: 69 67 64;
  --rgb-neutral-800: 42 41 39;
  --rgb-neutral-900: 27 26 24;
  --rgb-neutral-950: 10 10 10;
  --font-display: 'Space Grotesk', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk/SpaceGrotesk-Variable.0c62a8f36c27.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2000-206F, U+2074, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--rgb-border)/1)}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:390px){.container{max-width:390px}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.end-2{inset-inline-end:.5rem}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:.75rem}.left-3\.5{left:.875rem}.right-0{right:0}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-16{top:4rem}.top-2{top:.5rem}.top-3{top:.75rem}.top-4{top:1rem}.z-0{z-index:0}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[150\]{z-index:150}.col-span-full{grid-column:1/-1}.m-auto{margin:auto}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.-mx-5{margin-left:-1.25rem;margin-right:-1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.-mt-2{margin-top:-.5rem}.-mt-5{margin-top:-1.25rem}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}.ml-1\.5{margin-left:.375rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-0\.5{margin-right:.125rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-4{-webkit-line-clamp:4}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[8\/5\]{aspect-ratio:8/5}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[200px\]{height:200px}.h-full{height:100%}.max-h-\[70vh\]{max-height:70vh}.max-h-\[85vh\]{max-height:85vh}.\!min-h-14{min-height:3.5rem!important}.min-h-11{min-height:2.75rem}.min-h-52{min-height:13rem}.min-h-\[148px\]{min-height:148px}.min-h-\[280px\]{min-height:280px}.min-h-\[44px\]{min-height:44px}.min-h-\[90px\]{min-height:90px}.min-h-screen{min-height:100vh}.min-h-touch{min-height:var(--touch-target,44px)}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2\.5{width:.625rem}.w-2\/5{width:40%}.w-24{width:6rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[200px\]{width:200px}.w-\[30\%\]{width:30%}.w-\[300px\]{width:300px}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-11{min-width:2.75rem}.min-w-28{min-width:7rem}.min-w-64{min-width:16rem}.min-w-\[28rem\]{min-width:28rem}.min-w-\[36rem\]{min-width:36rem}.min-w-\[44px\]{min-width:44px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[10\.625rem\]{max-width:10.625rem}.max-w-\[4\.5rem\]{max-width:4.5rem}.max-w-\[70ch\]{max-width:70ch}.max-w-\[728px\]{max-width:728px}.max-w-\[8rem\]{max-width:8rem}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-prose{max-width:65ch}.max-w-readable{max-width:var(--measure-readable,72ch)}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.basis-full{flex-basis:100%}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-2{--tw-translate-y:-0.5rem}.-translate-y-2,.translate-y-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-2{--tw-translate-y:0.5rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.scroll-mt-20{scroll-margin-top:5rem}.scroll-mt-24{scroll-margin-top:6rem}.scroll-mt-32{scroll-margin-top:8rem}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.grid-cols-\[minmax\(0\2c 1fr\)_auto_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-px{gap:1px}.gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-1{row-gap:.25rem}.gap-y-1\.5{row-gap:.375rem}.gap-y-2{row-gap:.5rem}.gap-y-5{row-gap:1.25rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-x-contain{overscroll-behavior-x:contain}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\!whitespace-normal{white-space:normal!important}.whitespace-nowrap{white-space:nowrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-\[1px\]{border-radius:1px}.rounded-card{border-radius:var(--radius-card)}.rounded-control{border-radius:var(--radius-control)}.rounded-full{border-radius:9999px}.rounded-pill{border-radius:var(--radius-pill)}.rounded-sm{border-radius:.125rem}.rounded-b-card{border-bottom-left-radius:var(--radius-card)}.rounded-b-card,.rounded-r-card{border-bottom-right-radius:var(--radius-card)}.rounded-r-card{border-top-right-radius:var(--radius-card)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-s{border-inline-start-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-accent{--tw-border-opacity:1;border-color:rgb(var(--rgb-accent)/var(--tw-border-opacity,1))}.border-brand{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand)/var(--tw-border-opacity,1))}.border-brand-200{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand-200)/var(--tw-border-opacity,1))}.border-brand-200\/60{border-color:rgb(var(--rgb-brand-200)/.6)}.border-brand-soft{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand-soft)/var(--tw-border-opacity,1))}.border-ink-muted\/40{border-color:rgb(var(--rgb-ink-muted)/.4)}.border-ink\/10{border-color:rgb(var(--rgb-ink)/.1)}.border-ink\/20{border-color:rgb(var(--rgb-ink)/.2)}.border-transparent{border-color:transparent}.border-warning{--tw-border-opacity:1;border-color:rgb(var(--rgb-warning,var(--rgb-accent))/var(--tw-border-opacity,1))}.\!bg-page{--tw-bg-opacity:1!important;background-color:rgb(var(--rgb-page)/var(--tw-bg-opacity,1))!important}.bg-accent{--tw-bg-opacity:1;background-color:rgb(var(--rgb-accent)/var(--tw-bg-opacity,1))}.bg-brand{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand)/var(--tw-bg-opacity,1))}.bg-brand-50{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-50)/var(--tw-bg-opacity,1))}.bg-brand-800{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-800)/var(--tw-bg-opacity,1))}.bg-brand-soft{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-soft)/var(--tw-bg-opacity,1))}.bg-brand-soft\/40{background-color:rgb(var(--rgb-brand-soft)/.4)}.bg-brand-soft\/45{background-color:rgb(var(--rgb-brand-soft)/.45)}.bg-brand-soft\/50{background-color:rgb(var(--rgb-brand-soft)/.5)}.bg-cta{--tw-bg-opacity:1;background-color:rgb(var(--rgb-cta-primary,var(--rgb-cta,var(--rgb-brand)))/var(--tw-bg-opacity,1))}.bg-danger{--tw-bg-opacity:1;background-color:rgb(var(--rgb-danger)/var(--tw-bg-opacity,1))}.bg-danger\/10{background-color:rgb(var(--rgb-danger)/.1)}.bg-ink\/30{background-color:rgb(var(--rgb-ink)/.3)}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(var(--rgb-neutral-100)/var(--tw-bg-opacity,1))}.bg-neutral-200{--tw-bg-opacity:1;background-color:rgb(var(--rgb-neutral-200)/var(--tw-bg-opacity,1))}.bg-page{--tw-bg-opacity:1;background-color:rgb(var(--rgb-page)/var(--tw-bg-opacity,1))}.bg-page\/60{background-color:rgb(var(--rgb-page)/.6)}.bg-page\/95{background-color:rgb(var(--rgb-page)/.95)}.bg-surface{--tw-bg-opacity:1;background-color:rgb(var(--rgb-surface)/var(--tw-bg-opacity,1))}.bg-surface-raised{--tw-bg-opacity:1;background-color:rgb(var(--rgb-surface-raised,var(--rgb-surface))/var(--tw-bg-opacity,1))}.bg-surface\/90{background-color:rgb(var(--rgb-surface)/.9)}.bg-surface\/95{background-color:rgb(var(--rgb-surface)/.95)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.from-brand-soft{--tw-gradient-from:rgb(var(--rgb-brand-soft)/1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--rgb-brand-soft)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-surface{--tw-gradient-from:rgb(var(--rgb-surface)/1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--rgb-surface)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-surface{--tw-gradient-to:rgb(var(--rgb-surface)/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(var(--rgb-surface)/1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-page{--tw-gradient-to:rgb(var(--rgb-page)/1) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-0{padding:0}.p-1{padding:.25rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.\!px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-14{padding-bottom:3.5rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pe-2{padding-inline-end:.5rem}.pe-8{padding-inline-end:2rem}.pl-10{padding-left:2.5rem}.pl-3\.5{padding-left:.875rem}.pl-4{padding-left:1rem}.pl-9{padding-left:2.25rem}.pr-1\.5{padding-right:.375rem}.pr-10{padding-right:2.5rem}.pr-20{padding-right:5rem}.pr-4{padding-right:1rem}.pr-8{padding-right:2rem}.ps-3{padding-inline-start:.75rem}.ps-4{padding-inline-start:1rem}.ps-5{padding-inline-start:1.25rem}.pt-0\.5{padding-top:.125rem}.pt-1{padding-top:.25rem}.pt-10{padding-top:2.5rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.font-display{font-family:var(--font-display)}.font-sans{font-family:var(--font-sans)}.\!text-base{font-size:1rem!important;line-height:1.5rem!important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.ordinal{--tw-ordinal:ordinal}.ordinal,.tabular-nums{font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.tabular-nums{--tw-numeric-spacing:tabular-nums}.leading-5{line-height:1.25rem}.leading-\[1\.08\]{line-height:1.08}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-accent-ink{--tw-text-opacity:1;color:rgb(var(--rgb-accent-ink)/var(--tw-text-opacity,1))}.text-brand{--tw-text-opacity:1;color:rgb(var(--rgb-brand)/var(--tw-text-opacity,1))}.text-brand-950{--tw-text-opacity:1;color:rgb(var(--rgb-brand-950)/var(--tw-text-opacity,1))}.text-brand-ink{--tw-text-opacity:1;color:rgb(var(--rgb-brand-ink)/var(--tw-text-opacity,1))}.text-brand-strong{--tw-text-opacity:1;color:rgb(var(--rgb-brand-strong)/var(--tw-text-opacity,1))}.text-cta{--tw-text-opacity:1;color:rgb(var(--rgb-cta-primary,var(--rgb-cta,var(--rgb-brand)))/var(--tw-text-opacity,1))}.text-cta-ink{--tw-text-opacity:1;color:rgb(var(--rgb-cta-ink)/var(--tw-text-opacity,1))}.text-danger{--tw-text-opacity:1;color:rgb(var(--rgb-danger)/var(--tw-text-opacity,1))}.text-ink{--tw-text-opacity:1;color:rgb(var(--rgb-ink)/var(--tw-text-opacity,1))}.text-ink-muted{--tw-text-opacity:1;color:rgb(var(--rgb-ink-muted)/var(--tw-text-opacity,1))}.text-neutral-600{--tw-text-opacity:1;color:rgb(var(--rgb-neutral-600)/var(--tw-text-opacity,1))}.text-success{--tw-text-opacity:1;color:rgb(var(--rgb-success,var(--rgb-accent))/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.decoration-brand-300{text-decoration-color:rgb(var(--rgb-brand-300)/1)}.decoration-dotted{text-decoration-style:dotted}.decoration-2{text-decoration-thickness:2px}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-ink-muted::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(var(--rgb-ink-muted)/var(--tw-placeholder-opacity,1))}.placeholder-ink-muted::placeholder{--tw-placeholder-opacity:1;color:rgb(var(--rgb-ink-muted)/var(--tw-placeholder-opacity,1))}.accent-brand{accent-color:rgb(var(--rgb-brand)/1)}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-card{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-card{--tw-shadow:var(--shadow-card,0 8px 24px -12px rgba(0,0,0,.28));--tw-shadow-colored:0 8px 24px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-overlay{--tw-shadow:var(--shadow-overlay,0 16px 32px -16px rgba(0,0,0,.32));--tw-shadow-colored:0 16px 32px -16px var(--tw-shadow-color)}.shadow-overlay,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-brand-100{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--rgb-brand-100)/var(--tw-ring-opacity,1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-md{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-\[background-color\2c box-shadow\2c transform\]{transition-property:background-color,box-shadow,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.marker\:content-none ::marker{--tw-content:none;content:var(--tw-content)}.marker\:content-none::marker{--tw-content:none;content:var(--tw-content)}.placeholder\:text-ink-muted::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--rgb-ink-muted)/var(--tw-text-opacity,1))}.placeholder\:text-ink-muted::placeholder{--tw-text-opacity:1;color:rgb(var(--rgb-ink-muted)/var(--tw-text-opacity,1))}.first\:mt-0:first-child{margin-top:0}.first\:pt-0:first-child{padding-top:0}.last\:mb-0:last-child{margin-bottom:0}.last\:border-b-0:last-child{border-bottom-width:0}.last\:pb-0:last-child{padding-bottom:0}.open\:border-brand-200[open]{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand-200)/var(--tw-border-opacity,1))}.open\:bg-brand-soft\/30[open]{background-color:rgb(var(--rgb-brand-soft)/.3)}.focus-within\:border-brand:focus-within{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand)/var(--tw-border-opacity,1))}.focus-within\:border-brand-400:focus-within{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand-400)/var(--tw-border-opacity,1))}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-brand-500\/20:focus-within{--tw-ring-color:rgb(var(--rgb-brand-500)/0.2)}.focus-within\:ring-brand\/20:focus-within{--tw-ring-color:rgb(var(--rgb-brand)/0.2)}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-px:hover{--tw-translate-y:-1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-brand:hover{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand)/var(--tw-border-opacity,1))}.hover\:border-brand-200:hover{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand-200)/var(--tw-border-opacity,1))}.hover\:border-brand-300:hover{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand-300)/var(--tw-border-opacity,1))}.hover\:border-ink-muted\/60:hover{border-color:rgb(var(--rgb-ink-muted)/.6)}.hover\:bg-brand:hover{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand)/var(--tw-bg-opacity,1))}.hover\:bg-brand-soft:hover{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-soft)/var(--tw-bg-opacity,1))}.hover\:bg-brand-soft\/40:hover{background-color:rgb(var(--rgb-brand-soft)/.4)}.hover\:bg-brand-strong:hover{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-strong)/var(--tw-bg-opacity,1))}.hover\:bg-cta-strong:hover{--tw-bg-opacity:1;background-color:rgb(var(--rgb-cta-primary-hover,var(--rgb-cta-strong,var(--rgb-brand-strong)))/var(--tw-bg-opacity,1))}.hover\:bg-page:hover{--tw-bg-opacity:1;background-color:rgb(var(--rgb-page)/var(--tw-bg-opacity,1))}.hover\:bg-page-ground:hover{--tw-bg-opacity:1;background-color:rgb(var(--rgb-page-ground,var(--rgb-page))/var(--tw-bg-opacity,1))}.hover\:bg-surface:hover{--tw-bg-opacity:1;background-color:rgb(var(--rgb-surface)/var(--tw-bg-opacity,1))}.hover\:text-brand:hover{--tw-text-opacity:1;color:rgb(var(--rgb-brand)/var(--tw-text-opacity,1))}.hover\:text-brand-ink:hover{--tw-text-opacity:1;color:rgb(var(--rgb-brand-ink)/var(--tw-text-opacity,1))}.hover\:text-brand-strong:hover{--tw-text-opacity:1;color:rgb(var(--rgb-brand-strong)/var(--tw-text-opacity,1))}.hover\:text-ink:hover{--tw-text-opacity:1;color:rgb(var(--rgb-ink)/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.hover\:underline-offset-\[3px\]:hover{text-underline-offset:3px}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-neutral-200\/40:hover{--tw-shadow-color:rgb(var(--rgb-neutral-200)/0.4);--tw-shadow:var(--tw-shadow-colored)}.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.focus\:fixed:focus{position:fixed}.focus\:left-2:focus{left:.5rem}.focus\:top-2:focus{top:.5rem}.focus\:z-\[60\]:focus{z-index:60}.focus\:inline-flex:focus{display:inline-flex}.focus\:min-h-touch:focus{min-height:var(--touch-target,44px)}.focus\:items-center:focus{align-items:center}.focus\:rounded-control:focus{border-radius:var(--radius-control)}.focus\:border-brand:focus{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand)/var(--tw-border-opacity,1))}.focus\:border-brand-400:focus{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand-400)/var(--tw-border-opacity,1))}.focus\:bg-surface:focus{--tw-bg-opacity:1;background-color:rgb(var(--rgb-surface)/var(--tw-bg-opacity,1))}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}.focus\:text-brand-strong:focus{--tw-text-opacity:1;color:rgb(var(--rgb-brand-strong)/var(--tw-text-opacity,1))}.focus\:shadow-card:focus{--tw-shadow:var(--shadow-card,0 8px 24px -12px rgba(0,0,0,.28));--tw-shadow-colored:0 8px 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-brand-500\/20:focus{--tw-ring-color:rgb(var(--rgb-brand-500)/0.2)}.focus\:ring-brand-soft:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--rgb-brand-soft)/var(--tw-ring-opacity,1))}.focus\:ring-brand\/20:focus{--tw-ring-color:rgb(var(--rgb-brand)/0.2)}.focus\:ring-white\/40:focus{--tw-ring-color:hsla(0,0%,100%,.4)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-offset-4:focus-visible{outline-offset:4px}.focus-visible\:outline-brand:focus-visible{outline-color:rgb(var(--rgb-brand)/1)}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-brand:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--rgb-brand)/var(--tw-ring-opacity,1))}.focus-visible\:ring-focus-ring:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--rgb-focus-ring,var(--rgb-brand))/var(--tw-ring-opacity,1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.active\:translate-y-0:active{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:bg-cta-strong:active{--tw-bg-opacity:1;background-color:rgb(var(--rgb-cta-primary-hover,var(--rgb-cta-strong,var(--rgb-brand-strong)))/var(--tw-bg-opacity,1))}.active\:shadow-sm:active{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.group[open] .group-open\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group[open] .group-open\:text-brand-strong{--tw-text-opacity:1;color:rgb(var(--rgb-brand-strong)/var(--tw-text-opacity,1))}.group:hover .group-hover\:translate-x-0\.5{--tw-translate-x:0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:gap-1\.5{gap:.375rem}.group:hover .group-hover\:bg-brand-soft{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-soft)/var(--tw-bg-opacity,1))}.group:hover .group-hover\:bg-brand-strong{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-strong)/var(--tw-bg-opacity,1))}.group:hover .group-hover\:text-brand{--tw-text-opacity:1;color:rgb(var(--rgb-brand)/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-brand-strong{--tw-text-opacity:1;color:rgb(var(--rgb-brand-strong)/var(--tw-text-opacity,1))}.peer:checked~.peer-checked\:border-brand{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand)/var(--tw-border-opacity,1))}.peer:checked~.peer-checked\:bg-brand{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand)/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.has-\[\:checked\]\:border-brand:has(:checked){--tw-border-opacity:1;border-color:rgb(var(--rgb-brand)/var(--tw-border-opacity,1))}.has-\[\:checked\]\:bg-brand-soft:has(:checked){--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-soft)/var(--tw-bg-opacity,1))}.has-\[\:checked\]\:shadow-md:has(:checked){--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.has-\[\:focus-visible\]\:outline:has(:focus-visible){outline-style:solid}.has-\[\:focus-visible\]\:outline-2:has(:focus-visible){outline-width:2px}.has-\[\:focus-visible\]\:outline-offset-2:has(:focus-visible){outline-offset:2px}.has-\[\:focus-visible\]\:outline-brand:has(:focus-visible){outline-color:rgb(var(--rgb-brand)/1)}.group\/multi:has(:checked) .group-has-\[\:checked\]\/multi\:border-transparent{border-color:transparent}.group:has(:checked) .group-has-\[\:checked\]\:border-brand{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand)/var(--tw-border-opacity,1))}.group\/multi:has(:checked) .group-has-\[\:checked\]\/multi\:bg-brand{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand)/var(--tw-bg-opacity,1))}.group:has(:checked) .group-has-\[\:checked\]\:bg-brand{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand)/var(--tw-bg-opacity,1))}.group\/multi:has(:checked) .group-has-\[\:checked\]\/multi\:text-brand-ink{--tw-text-opacity:1;color:rgb(var(--rgb-brand-ink)/var(--tw-text-opacity,1))}.group:has(:checked) .group-has-\[\:checked\]\:opacity-100{opacity:1}.group\/multi:has(:checked) .group-has-\[\:checked\]\/multi\:shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.group\/multi:has(:checked) .group-has-\[\:checked\]\/multi\:shadow-brand-200{--tw-shadow-color:rgb(var(--rgb-brand-200)/1);--tw-shadow:var(--tw-shadow-colored)}.group\/multi:has(:checked) .group-has-\[\:checked\]\/multi\:hover\:bg-brand-strong:hover{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-strong)/var(--tw-bg-opacity,1))}.aria-pressed\:bg-brand-soft[aria-pressed=true]{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-soft)/var(--tw-bg-opacity,1))}.aria-\[current\=page\]\:border-brand[aria-current=page]{--tw-border-opacity:1;border-color:rgb(var(--rgb-brand)/var(--tw-border-opacity,1))}.aria-\[current\=page\]\:bg-brand-soft[aria-current=page]{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-soft)/var(--tw-bg-opacity,1))}.aria-\[current\=page\]\:font-semibold[aria-current=page]{font-weight:600}.aria-\[current\=page\]\:text-brand[aria-current=page]{--tw-text-opacity:1;color:rgb(var(--rgb-brand)/var(--tw-text-opacity,1))}.aria-\[current\=page\]\:text-brand-strong[aria-current=page]{--tw-text-opacity:1;color:rgb(var(--rgb-brand-strong)/var(--tw-text-opacity,1))}.aria-\[current\=page\]\:ring-2[aria-current=page]{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.aria-\[current\=page\]\:ring-focus-ring[aria-current=page]{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--rgb-focus-ring,var(--rgb-brand))/var(--tw-ring-opacity,1))}.data-\[state\=open\]\:translate-y-0[data-state=open]{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[nav-active\=true\]\:bg-brand-soft[data-nav-active=true]{--tw-bg-opacity:1;background-color:rgb(var(--rgb-brand-soft)/var(--tw-bg-opacity,1))}.data-\[nav-active\=true\]\:text-brand-strong[data-nav-active=true]{--tw-text-opacity:1;color:rgb(var(--rgb-brand-strong)/var(--tw-text-opacity,1))}.data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}@media (prefers-reduced-motion:reduce){.motion-reduce\:transform-none{transform:none}.motion-reduce\:transition-none{transition-property:none}}@media (min-width:390px){.compact\:basis-auto{flex-basis:auto}}@media (min-width:640px){.sm\:static{position:static}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:col-start-2{grid-column-start:2}.sm\:inline{display:inline}.sm\:grid{display:grid}.sm\:hidden{display:none}.sm\:max-h-\[80vh\]{max-height:80vh}.sm\:w-64{width:16rem}.sm\:w-auto{width:auto}.sm\:min-w-56{min-width:14rem}.sm\:max-w-lg{max-width:32rem}.sm\:max-w-md{max-width:28rem}.sm\:flex-1{flex:1 1 0%}.sm\:flex-none{flex:none}.sm\:basis-auto{flex-basis:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-\[1fr_auto_1fr\]{grid-template-columns:1fr auto 1fr}.sm\:grid-cols-\[minmax\(8rem\2c 9\.375rem\)_minmax\(0\2c 1fr\)\]{grid-template-columns:minmax(8rem,9.375rem) minmax(0,1fr)}.sm\:flex-row{flex-direction:row}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-start{align-items:flex-start}.sm\:items-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:items-stretch{align-items:stretch}.sm\:justify-end{justify-content:flex-end}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-4{gap:1rem}.sm\:gap-5{gap:1.25rem}.sm\:gap-6{gap:1.5rem}.sm\:self-auto{align-self:auto}.sm\:justify-self-start{justify-self:start}.sm\:justify-self-end{justify-self:end}.sm\:overflow-visible{overflow:visible}.sm\:rounded-card{border-radius:var(--radius-card)}.sm\:p-4{padding:1rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-left{text-align:left}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:leading-relaxed{line-height:1.625}}@media (min-width:768px){.md\:static{position:static}.md\:inset-x-auto{left:auto;right:auto}.md\:right-4{right:1rem}.md\:order-last{order:9999}.md\:mb-10{margin-bottom:2.5rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-12{height:3rem}.md\:min-h-\[100px\]{min-height:100px}.md\:w-12{width:3rem}.md\:w-80{width:20rem}.md\:max-w-sm{max-width:24rem}.md\:shrink-0{flex-shrink:0}.md\:auto-cols-max{grid-auto-columns:max-content}.md\:grid-flow-col{grid-auto-flow:column}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-\[minmax\(14rem\2c 1fr\)_auto_auto_auto_auto\]{grid-template-columns:minmax(14rem,1fr) auto auto auto auto}.md\:flex-wrap{flex-wrap:wrap}.md\:items-center{align-items:center}.md\:gap-3{gap:.75rem}.md\:gap-4{gap:1rem}.md\:gap-5{gap:1.25rem}.md\:gap-6{gap:1.5rem}.md\:rounded-card{border-radius:var(--radius-card)}.md\:border{border-width:1px}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:p-3{padding:.75rem}.md\:p-5{padding:1.25rem}.md\:p-6{padding:1.5rem}.md\:p-7{padding:1.75rem}.md\:p-8{padding:2rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.md\:py-12{padding-top:3rem;padding-bottom:3rem}.md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:py-3{padding-top:.75rem;padding-bottom:.75rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:pb-10{padding-bottom:2.5rem}.md\:pb-12{padding-bottom:3rem}.md\:pb-14{padding-bottom:3.5rem}.md\:pb-16{padding-bottom:4rem}.md\:pb-24{padding-bottom:6rem}.md\:pb-6{padding-bottom:1.5rem}.md\:pb-8{padding-bottom:2rem}.md\:pr-0{padding-right:0}.md\:pt-10{padding-top:2.5rem}.md\:pt-12{padding-top:3rem}.md\:pt-14{padding-top:3.5rem}.md\:pt-16{padding-top:4rem}.md\:pt-8{padding-top:2rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-start-auto{grid-column-start:auto}.lg\:mb-12{margin-bottom:3rem}.lg\:ml-0{margin-left:0}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}.lg\:hidden{display:none}.lg\:min-w-\[29rem\]{min-width:29rem}.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-\[14rem_minmax\(0\2c 1fr\)\]{grid-template-columns:14rem minmax(0,1fr)}.lg\:grid-cols-\[3fr_2fr\]{grid-template-columns:3fr 2fr}.lg\:grid-cols-\[minmax\(0\2c 1fr\)_18rem\]{grid-template-columns:minmax(0,1fr) 18rem}.lg\:grid-cols-\[minmax\(9rem\2c 10\.625rem\)_minmax\(0\2c 1fr\)_minmax\(10rem\2c 11\.875rem\)\]{grid-template-columns:minmax(9rem,10.625rem) minmax(0,1fr) minmax(10rem,11.875rem)}.lg\:items-start{align-items:flex-start}.lg\:gap-10{gap:2.5rem}.lg\:gap-16{gap:4rem}.lg\:gap-4{gap:1rem}.lg\:space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.lg\:border-l{border-left-width:1px}.lg\:border-t-0{border-top-width:0}.lg\:pb-0{padding-bottom:0}.lg\:pl-6{padding-left:1.5rem}.lg\:pt-0{padding-top:0}.lg\:pt-1{padding-top:.25rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}.\[\&\>p\:last-child\]\:mb-0>p:last-child{margin-bottom:0}.\[\&\>p\]\:mb-3>p{margin-bottom:.75rem}.\[\&_a\]\:text-brand a{--tw-text-opacity:1;color:rgb(var(--rgb-brand)/var(--tw-text-opacity,1))}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_h2\]\:mt-10 h2{margin-top:2.5rem}.\[\&_h2\]\:scroll-mt-24 h2{scroll-margin-top:6rem}.\[\&_h2\]\:text-2xl h2{font-size:1.5rem;line-height:2rem}.\[\&_h2\]\:font-semibold h2{font-weight:600}.\[\&_h3\]\:mt-6 h3{margin-top:1.5rem}.\[\&_h3\]\:scroll-mt-24 h3{scroll-margin-top:6rem}.\[\&_h3\]\:text-xl h3{font-size:1.25rem;line-height:1.75rem}.\[\&_h3\]\:font-semibold h3{font-weight:600}.\[\&_ol\]\:mt-4 ol{margin-top:1rem}.\[\&_ol\]\:list-decimal ol{list-style-type:decimal}.\[\&_ol\]\:pl-6 ol{padding-left:1.5rem}.\[\&_p\]\:mt-4 p{margin-top:1rem}.\[\&_p\]\:first\:mt-0:first-child p{margin-top:0}.\[\&_ul\]\:mt-4 ul{margin-top:1rem}.\[\&_ul\]\:list-disc ul{list-style-type:disc}.\[\&_ul\]\:pl-6 ul{padding-left:1.5rem}/* Chassis-shared stylesheet. Theme character lives in tokens.css;
   structural differences belong in templates or tokens, not here. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-bottom: var(--consent-banner-offset, 0px);
}

/* Shared semantic foundation. Theme files supply these roles in later rollout
   items; established invariant tokens remain the fallbacks until then. */
:root {
  --motion-duration: 150ms;
  --motion-easing: ease-out;
  --touch-target: 44px;
  /* Height of the sticky top chrome (partials/header.html's h-16 bar). Shared
     structural constant, not a theme knob: anchor targets and any future
     sticky offset resolve against one number instead of re-guessing it. */
  --sticky-chrome-height: 4rem;
  --page-gutter: 1rem;
  --control-border: color-mix(
    in srgb,
    var(--ink, var(--color-ink)) 24%,
    var(--surface, var(--color-surface))
  );
}

body {
  background-color: var(--page-ground, var(--color-page));
  color: var(--ink, var(--color-ink));
  padding-inline-start: env(safe-area-inset-left);
  padding-inline-end: env(safe-area-inset-right);
  padding-bottom: var(--consent-banner-offset, 0px);
}

/* P-313: the screen-reader-only primitive belongs in the always-served
   baseline, not only in each theme's compiled Tailwind bundle. Round-1
   evidence: with the bundles absent the newsletter honeypot
   (chassis/templates/partials/newsletter_cta.html) became a visible,
   unlabeled text input that a real visitor could fill in and fail the
   submission with. Declarations match the Tailwind utility this file is
   loaded after, so the two never disagree when both are present; the
   `focus:not-sr-only` variant used by the skip link (chassis/templates/
   base.html) and by country_gate.js still outranks this rule on
   specificity, so revealing a focused skip target keeps working.
   Kept byte-identical to that Tailwind utility on purpose: `clip` plus
   `position: absolute` is what makes the element paint nothing and drop out
   of hit testing, and this file's shared 44px touch-target floor still wins
   the box's min-height on an input by specificity. That reserved-but-unpainted
   box is the same state a theme-bundled page has always had, so this baseline
   copy introduces no divergence of its own. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.ui-surface {
  background-color: var(--surface, var(--color-surface));
  border-color: var(--border, var(--color-border));
}

.ui-surface-elevated {
  background-color: var(--surface-raised, var(--surface, var(--color-surface)));
  box-shadow: var(--shadow-card, 0 8px 24px -12px rgb(0 0 0 / 0.28));
}

.ui-overlay-elevated {
  box-shadow: var(--shadow-overlay, 0 16px 32px -16px rgb(0 0 0 / 0.32));
}

.ui-status-success {
  color: var(--success, var(--accent, var(--color-accent)));
}

.ui-status-warning {
  color: var(--warning, var(--accent, var(--color-accent)));
}

.ui-status-critical {
  color: var(--danger, var(--color-danger));
}

.payment-card-art {
  --payment-card-start: #0f766e;
  --payment-card-end: #134e4a;
  --payment-card-glow: rgb(94 234 212 / 0.34);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background:
    radial-gradient(circle at 86% 4%, var(--payment-card-glow), transparent 42%),
    linear-gradient(135deg, var(--payment-card-start), var(--payment-card-end));
  border: 1px solid rgb(255 255 255 / 0.22);
  box-shadow:
    0 10px 22px rgb(43 25 16 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.2);
  transition: filter 150ms ease-out, box-shadow 150ms ease-out;
}

.payment-card-art::before {
  position: absolute;
  z-index: -1;
  top: -4.75rem;
  right: -3.75rem;
  width: 9rem;
  height: 9rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  box-shadow:
    0 0 0 1.25rem rgb(255 255 255 / 0.045),
    0 0 0 2.5rem rgb(255 255 255 / 0.035);
  content: "";
}

.payment-card-art::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: inherit;
  pointer-events: none;
  content: "";
}

.payment-card-art:hover {
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 12px 26px rgb(43 25 16 / 0.24),
    inset 0 1px 0 rgb(255 255 255 / 0.24);
}

.payment-card-art:focus-visible {
  outline: 3px solid var(--brand, var(--color-brand));
  outline-offset: 3px;
}

.payment-card-art--tone-0 {
  --payment-card-start: #c2413b;
  --payment-card-end: #7f1d1d;
  --payment-card-glow: rgb(253 164 175 / 0.38);
}

.payment-card-art--tone-1 {
  --payment-card-start: #0f766e;
  --payment-card-end: #134e4a;
  --payment-card-glow: rgb(94 234 212 / 0.34);
}

.payment-card-art--tone-2 {
  --payment-card-start: #2563eb;
  --payment-card-end: #1e3a8a;
  --payment-card-glow: rgb(147 197 253 / 0.38);
}

.payment-card-art--tone-3 {
  --payment-card-start: #7c3aed;
  --payment-card-end: #4c1d95;
  --payment-card-glow: rgb(196 181 253 / 0.38);
}

.payment-card-art--tone-4 {
  --payment-card-start: #d97706;
  --payment-card-end: #92400e;
  --payment-card-glow: rgb(253 230 138 / 0.4);
}

.payment-card-art--tone-5 {
  --payment-card-start: #15803d;
  --payment-card-end: #14532d;
  --payment-card-glow: rgb(134 239 172 / 0.36);
}

.payment-card-art__topline,
.payment-card-art__bottomline {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.payment-card-art__topline .logo-tile {
  border: 1px solid rgb(255 255 255 / 0.62);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.14);
}

.payment-card-art__chip {
  position: relative;
  display: block;
  width: 2rem;
  height: 1.45rem;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgb(93 66 25 / 0.38);
  border-radius: 0.34rem;
  background: linear-gradient(135deg, #f8e7a9, #cda950);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.72);
}

.payment-card-art__chip::before,
.payment-card-art__chip::after,
.payment-card-art__chip > span {
  position: absolute;
  background: rgb(111 80 27 / 0.38);
  content: "";
}

.payment-card-art__chip::before {
  inset-block: 0;
  left: 50%;
  width: 1px;
}

.payment-card-art__chip::after {
  inset-inline: 0;
  top: 50%;
  height: 1px;
}

.payment-card-art__chip > span {
  inset-block: 0;
  left: 27%;
  width: 1px;
  box-shadow: 0.9rem 0 0 rgb(111 80 27 / 0.38);
}

.payment-card-art__contactless {
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  transform: rotate(180deg);
  opacity: 0.78;
}

.payment-card-art__name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.28);
  white-space: nowrap;
}

.status-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
}

.status-icon--compact {
  width: 1.25rem;
  height: 1.25rem;
}

.status-icon--success {
  background: color-mix(in srgb, var(--success, var(--color-accent)) 15%, transparent);
  color: var(--success, var(--color-accent));
}

.status-icon--critical {
  background: color-mix(in srgb, var(--danger, var(--color-danger)) 14%, transparent);
  color: var(--danger, var(--color-danger));
}

.status-dot {
  width: 0.375rem;
  height: 0.375rem;
  flex: none;
  margin-block-start: 0.375rem;
  border-radius: 9999px;
}

.status-dot--success {
  background: var(--success, var(--color-accent));
}

.status-dot--critical {
  background: var(--danger, var(--color-danger));
}

.helpful-vote {
  border-color: var(--control-border, var(--border, var(--color-border)));
}

.helpful-vote--positive:hover {
  border-color: var(--success, var(--color-accent));
  background: color-mix(in srgb, var(--success, var(--color-accent)) 10%, transparent);
  color: var(--success, var(--color-accent));
}

.helpful-vote--negative:hover {
  border-color: var(--danger, var(--color-danger));
  background: color-mix(in srgb, var(--danger, var(--color-danger)) 9%, transparent);
  color: var(--danger, var(--color-danger));
}

.calculator-result--positive {
  border-color: color-mix(in srgb, var(--success, var(--color-accent)) 60%, transparent);
  background: color-mix(in srgb, var(--success, var(--color-accent)) 9%, var(--surface));
}

.calculator-result--negative {
  border-color: color-mix(in srgb, var(--danger, var(--color-danger)) 60%, transparent);
  background: color-mix(in srgb, var(--danger, var(--color-danger)) 8%, var(--surface));
}

.calculator-value--positive {
  color: var(--success, var(--color-accent));
}

.calculator-value--negative,
.calculator-value--invalid {
  color: var(--danger, var(--color-danger));
}

.readable-measure {
  max-inline-size: var(--measure-readable, 72ch);
}

.overflow-x-auto,
[data-scroll-shadow] {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

@media (min-width: 390px) {
  :root {
    --page-gutter: 1rem;
  }
}

@media (min-width: 768px) {
  :root {
    --page-gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: 2rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --page-gutter: 2.5rem;
  }
}

/* Bottom-action occupancy (decision 66). consent.js publishes the fixed
   non-mandatory consent bar's measured height plus one shared clearance gap.
   The document scrollport, body clearance, and subordinate actions all consume
   that value. Mandatory consent owns the viewport as a modal and publishes
   zero. Sticky ads retain their independent offset. */
[data-bottom-action] {
  bottom: calc(var(--ad-sticky-offset, 0px) + var(--consent-banner-offset, 0px));
}

/* P-301 (UIR-04): first-visit decision layers must not compete on a phone.
   The fixed consent bar owns the viewport floor while consent is pending.
   Country guidance stands down until a decision is recorded, then returns.

   Country selection stays reachable through the header market trigger. The
   country-scoped clickout confirmation this band advertises remains enforced
   by the server and active country controls regardless of presentation.
   JavaScript-off visitors never receive data-consent-pending because the
   consent bar remains hidden for them, so the country band renders normally.

   Phone widths only. Tablet and desktop viewports have room for both the
   country guidance and the compact consent bar. */
@media (max-width: 767px) {
  html[data-consent-pending] #entity-list-wrap {
    margin-block-start: -3.5rem;
  }

  html[data-consent-pending] #entity-list-wrap
    article[data-card-motion="editor"] > [data-card-categories] {
    margin-block-end: -0.75rem;
  }
}

html[data-consent-pending] [data-compare-select] {
  margin-block-start: -1rem;
}

@media (min-width: 768px) {
  html[data-consent-pending] #entity-list-wrap {
    margin-block-start: -2rem;
  }
}

@media (max-width: 1023px) {
  html[data-consent-pending] [data-site-directory],
  html[data-consent-pending] [data-tools-index] {
    margin-block-start: -6rem;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  html[data-consent-pending] [data-newsletter-cta] {
    margin-block-start: -1rem;
  }
}

html[data-consent-decision-lock],
body[data-consent-decision-lock] {
  overflow: hidden;
}

[data-consent-banner][data-consent-in-flow] {
  position: static;
  margin-top: 1rem;
}

[data-consent-banner][data-consent-decision-required="true"]:not([hidden]) {
  position: fixed;
  top: 50%;
  right: auto;
  bottom: auto !important;
  left: 50%;
  z-index: 80;
  width: min(calc(100% - 2rem), 32rem);
  max-width: none;
  transform: translate(-50%, -50%);
  isolation: isolate;
}

[data-consent-backdrop]:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(2px);
}

@media (max-width: 767px) {
  [data-consent-banner][data-consent-decision-required="true"]:not([hidden]) {
    inset: 0;
    display: flex;
    width: 100%;
    height: 100dvh;
    max-height: none;
    padding: max(1.5rem, env(safe-area-inset-top))
      max(1.25rem, env(safe-area-inset-right))
      max(1.5rem, env(safe-area-inset-bottom))
      max(1.25rem, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    transform: none;
    flex-direction: column;
    justify-content: center;
  }
}

/* The `hidden` attribute always wins (market-selector + compare-grid
   rounds): this codebase's client modules toggle visibility via the
   `hidden` attribute (consent.js convention), but any element that also
   carries a display utility (`flex`, `grid`, ...) for its VISIBLE state
   has that utility outrank the preflight `[hidden]` rule by cascade order
   - which twice now produced invisible-but-interactive UI (the closed
   market modal swallowing every pointer event; every compare tile showing
   its selection check badge). Guarantee the attribute globally; the
   until-found variant keeps its searchable-content semantics. */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

::selection {
  background: var(--brand-soft, var(--color-brand-soft));
  color: var(--ink, var(--color-ink));
}

/* ==========================================================================
   Sitewide interaction layer (craft addendum 7.1, wave R1.6).

   Loaded after each theme's tailwind.css (chassis/templates/base.html), so
   a plain-element rule here can still win a cascade tie against a Tailwind
   utility class of equal specificity while never overriding a *more*
   specific utility a template already set (border-radius, padding, etc.
   keep whatever a surface lane wrote). That is deliberate: this layer is a
   universal baseline every interactive element gets whether or not its own
   template remembered to ask for one, not a per-template override.
   ========================================================================== */

/* Universal focus-visible ring (2px brand, 2px offset). Keyboard-only by
   design: a plain mouse click never shows it, but Tab always does. Outline
   (not box-shadow) so it reads consistently on pill, card, and control
   radii alike without a second wrapped element. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-brand, currentColor));
  outline-offset: 2px;
}

:is(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* In-page anchor targets must clear the sticky header. Without this, every
   deep link and every jump to a section anchor scrolls the target under the
   sticky bar, so the reader lands on the heading's second half or on the
   content below it. Applied to :target generically plus the review page's
   own section anchors, so it holds for any future anchor without a
   per-surface rule and without any site-specific selector. */
:target,
[data-toc-section] {
  scroll-margin-block-start: calc(var(--sticky-chrome-height, 4rem) + 1rem);
}

/* Rest/hover/focus/active transitions, color/shadow/transform only, per
   addendum 7.1. prefers-reduced-motion strips the transform half below;
   color/background/border/shadow transitions stay (they carry no motion
   sickness risk and keep hover states legible for reduced-motion users). */
a,
button,
input,
select,
textarea,
summary,
[role="button"] {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--motion-duration);
  transition-timing-function: var(--motion-easing);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }

  [class*="hover:-translate"]:hover,
  [class*="active:translate"]:active,
  [class*="group-hover:translate"],
  .btn:hover,
  .btn:active,
  article[data-card-motion]:focus-within,
  article[data-entity-rating]:focus-within,
  article[data-eligible-countries]:focus-within,
  [data-blog-card]:focus-within {
    transform: none !important;
  }

  input[type="range"]:hover::-webkit-slider-thumb,
  input[type="range"]:active::-webkit-slider-thumb {
    transform: none !important;
  }

  input[type="range"]:hover::-moz-range-thumb,
  input[type="range"]:active::-moz-range-thumb {
    transform: none !important;
  }
}

/* ---- Reusable button classes (primary/ghost). Spec 7.1 + 7.2: Visit is
   the only saturated solid on any card/row/verdict surface; ghost is the
   secondary action beside it. Surface lanes consume these two classes
   instead of hand-rolling hover/active treatment per template. ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--touch-target, 44px);
  padding-inline: 1.25rem;
  border-radius: var(--radius-control, var(--radius-card));
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary {
  background: var(--cta-primary, var(--color-cta, var(--color-brand)));
  border-color: var(--cta-primary, var(--color-cta, var(--color-brand)));
  color: var(--color-cta-ink, var(--color-brand-ink, white));
}

.btn-primary:hover {
  background: var(--cta-primary-hover, var(--color-cta-strong, var(--color-brand-strong)));
  border-color: var(--cta-primary-hover, var(--color-cta-strong, var(--color-brand-strong)));
  box-shadow: var(--shadow-card, 0 6px 16px -6px rgb(var(--rgb-brand, 0 0 0) / 0.45));
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-ghost,
.btn-secondary {
  background: var(--cta-secondary, transparent);
  border-color: var(--control-border, var(--border, var(--color-border, currentColor)));
  color: var(--ink, var(--color-ink));
}

.btn-ghost:hover,
.btn-secondary:hover {
  background: var(--brand-soft, var(--color-brand-soft));
  border-color: var(--brand, var(--color-brand));
  color: var(--brand-strong, var(--color-brand-strong));
}

.btn-ghost:active,
.btn-secondary:active {
  background: var(--brand-soft, var(--color-brand-soft));
  transform: translateY(0.5px);
}

/* Raised-surface secondary action. The semantic surface, border, brand, and
   elevation roles keep this modifier reusable across light and dark themes;
   the sitewide focus-visible rule above supplies its token-driven ring. */
.btn-surface {
  background: var(--surface-raised, var(--surface, var(--color-surface)));
  border-color: var(--border, var(--color-border));
  color: var(--ink, var(--color-ink));
  box-shadow: var(--shadow-card);
}

.btn-surface:hover {
  background: var(--brand-soft, var(--color-brand-soft));
  border-color: var(--brand, var(--color-brand));
  color: var(--brand-strong, var(--color-brand-strong));
  box-shadow: var(--shadow-overlay);
  transform: translateY(-1px);
}

.btn-surface:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

.btn-inverse {
  background: var(--surface-raised, var(--color-surface));
  border-color: var(--surface-raised, var(--color-surface));
  color: var(--brand-strong, var(--color-brand-strong));
  box-shadow: var(--shadow-card);
}

.btn-inverse:hover {
  background: var(--brand-soft, var(--color-brand-soft));
  border-color: var(--brand-soft, var(--color-brand-soft));
  color: var(--brand-strong, var(--color-brand-strong));
  transform: translateY(-1px);
  box-shadow: var(--shadow-overlay);
}

.btn-inverse:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

/* ---- Custom selects and inputs: 44px control rhythm, never the bare
   browser-default arrow on a money surface (spec 7.1). The chevron is a
   two-gradient CSS triangle (not an svg data uri) so it can read the theme
   token straight from a variable instead of hardcoding a hex fill. ---- */
select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--touch-target);
  padding-inline-end: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-muted, var(--color-ink-muted)) 50%),
    linear-gradient(135deg, var(--ink-muted, var(--color-ink-muted)) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% - 2px),
    calc(100% - 0.85rem) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
textarea {
  border-color: var(--control-border, var(--border, var(--color-border)));
}

select:hover {
  border-color: var(--brand, var(--color-brand));
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
textarea {
  min-height: var(--touch-target);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--focus-ring, var(--color-brand, currentColor));
}

/* Newsletter fields remain separate 44px controls with the template's 12px
   flex gap. The earlier joined-control treatment made the field and submit
   button geometrically overlap under the platform interaction contract. */
form[hx-post="/newsletter/"] input[type="email"] {
  /* The ported white-on-brand card (newsletter_cta.html, decision 108)
     pairs a WHITE field with the theme's darkest brand shade. The color
     half shipped alone, so on the dark themes the field inherited a dark
     ground under dark text (axe serious, 1.07-1.47:1 on camscue, hodlcue,
     wagercue). The pair is only safe stated together: brand-900 is the
     ramp's darkest step on every theme, so white + brand-900 clears AA by
     construction. */
  background-color: rgb(255 255 255);
  color: rgb(var(--rgb-brand-900));
}

form[hx-post="/newsletter/"] input[type="email"]::placeholder {
  color: rgb(var(--rgb-brand-900) / 0.72);
}

/* ---- Accordions (FAQ, filters): summary hover tint + rotating chevron.
   The chevron rotation itself already lives inline per-template
   (group-open:rotate-180 svg, e.g. pages/faq/index.html) - this adds the
   hover ground wash the addendum asks for, scoped off the header/mega-panel
   <summary> elements which already own their own hover treatment above. ---- */
summary:not(.nav-group__summary):not(.nav-mobile__summary):not(.nav-mobile__group-summary) {
  border-radius: inherit;
}

summary:not(.nav-group__summary):not(.nav-mobile__summary):not(.nav-mobile__group-summary):hover {
  background-color: var(--color-brand-soft);
}

article[data-entity-rating]:hover,
article[data-eligible-countries]:hover,
a[data-blog-card]:hover {
  border-color: color-mix(
    in srgb,
    var(--brand, var(--color-brand)) 55%,
    var(--control-border)
  );
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

article[data-entity-rating]:focus-within,
article[data-eligible-countries]:focus-within,
a[data-blog-card]:focus-visible {
  border-color: var(--brand, var(--color-brand));
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* P2.6 caps the audited entity, row, and editor card lift at one pixel.
   Blog cards retain their separate existing motion contract. */
article[data-card-motion]:hover,
article[data-card-motion]:focus-within {
  transform: translateY(-1px);
}

article[data-card-motion="editor"] > [data-card-categories] {
  padding-inline-end: 2rem;
}

article[data-entity-rating],
article[data-eligible-countries],
a[data-blog-card] {
  border-color: var(--control-border, var(--border, var(--color-border)));
  transition:
    border-color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing),
    transform var(--motion-duration) var(--motion-easing);
}

/* Scorebar cells brighten one step on parent-card hover, CSS only. */
article[data-entity-rating]:hover [data-scorebar] .bg-brand,
article[data-eligible-countries]:hover [data-scorebar] .bg-brand,
a[data-blog-card]:hover [data-scorebar] .bg-brand {
  filter: brightness(1.12);
}

/* Matchup and category chips: hover fills brand-soft with a brand border,
   on top of whatever hover:border-*/hover:text-* utilities a template
   already set (those stay; this only adds the ground fill). */
a.rounded-pill:hover {
  background-color: var(--color-brand-soft);
}

[data-shortlist-toggle] {
  border: 1px solid transparent;
  color: var(--ink-muted, var(--color-ink-muted));
}

[data-shortlist-toggle]:hover {
  border-color: var(--control-border, var(--border, var(--color-border)));
  background: var(--brand-soft, var(--color-brand-soft));
  color: var(--brand-strong, var(--color-brand-strong));
}

[data-shortlist-toggle][aria-pressed="true"] {
  border-color: color-mix(
    in srgb,
    var(--brand, var(--color-brand)) 60%,
    transparent
  );
  background: var(--brand-soft, var(--color-brand-soft));
  color: var(--brand-strong, var(--color-brand-strong));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, var(--color-brand)) 12%, transparent);
}

.shortlist-item {
  padding: 0.75rem;
  border: 1px solid var(--control-border, var(--border, var(--color-border)));
  border-radius: var(--radius-card);
  background: var(--surface, var(--color-surface));
  box-shadow: var(--shadow-card);
  font-size: 0.875rem;
}

/* Repeated decision cards use one compact adjacent label. The complete site
   disclosure and regulated risk copy remain visible in the footer, while
   the primary detail decision keeps its longer adjacent explanation. */
.affiliate-disclosure-inline {
  display: inline-flex;
  align-items: center;
  margin-block-start: 0.5rem;
  padding-inline: 0.15rem;
  color: var(--ink-muted, var(--color-ink-muted));
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.45;
}

.listing-filters,
.active-filter-summary {
  border-color: var(--control-border, var(--border, var(--color-border)));
}

.listing-filters > summary::-webkit-details-marker {
  display: none;
}

.listing-filters__chevron {
  transition: transform var(--motion-duration) var(--motion-easing);
}

.listing-filters[open] > summary .listing-filters__chevron {
  transform: rotate(180deg);
}



/* ---- Tables (vs, compare): row hover tint; sticky first column/header
   gains an edge shadow only while scrolled (.is-scrolled, toggled by
   static/js/modules/scroll_shadow.js against every .overflow-x-auto
   wrapper those templates already render their table inside). ---- */
.overflow-x-auto table tbody tr:hover > * {
  background-color: var(--color-brand-soft);
}

.overflow-x-auto.is-scrolled .sticky.left-0,
[data-scroll-shadow][data-scroll-shadow-active] .sticky.left-0 {
  box-shadow: 2px 0 6px -2px rgb(0 0 0 / 0.18);
}

/* Footer links: hover brand with an offset underline. */
footer a:not(.btn):hover {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-column > summary::-webkit-details-marker {
  display: none;
}

.footer-column__chevron {
  transition: transform var(--motion-duration) var(--motion-easing);
}

.footer-column[open] > summary .footer-column__chevron {
  transform: rotate(180deg);
}

@media (min-width: 1024px) {
  .footer-column {
    border-color: transparent;
  }

  .footer-column > summary {
    padding: 0 0 0.75rem;
    pointer-events: none;
  }

  .footer-column > summary:hover {
    background: transparent;
    color: inherit;
  }

  .footer-column > .footer-column__links {
    display: block !important;
    padding: 0;
  }

  .footer-column::details-content {
    content-visibility: visible;
    display: block !important;
  }
}

/* Chrome-specific interaction transitions (craft addendum 7.1, c-chrome
   lane): header/footer links get their own scoped transition on top of the
   universal one above so hover/focus color+shadow changes stay smooth even
   where a more specific chrome rule might otherwise short-circuit it. */
header a,
header summary,
footer a {
  transition:
    color var(--motion-duration) var(--motion-easing),
    background-color var(--motion-duration) var(--motion-easing),
    border-color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing),
    transform var(--motion-duration) var(--motion-easing);
}

@media (prefers-reduced-motion: reduce) {
  header a,
  header summary,
  footer a,
  .nav-chevron,
  .nav-mobile__list {
    transition: none !important;
  }
}

/* Footer instance: ordinary footer text styling (no border/tint) - just
   enough spacing to separate it from the sister-site links below it. */
.disclosure--footer {
  margin-bottom: 1.5rem;
}

/* Header flex-order reconciliation (1j follow-up). partials/header.html's
   flex row emits, in DOM order: the brand link, then partials/
   primary_nav.html's own include (that partial's desktop <nav> AND its
   mobile hamburger <details class="nav-mobile"> are BOTH top-level
   children of that one include - not this lane's file to restructure),
   then this lane's own pill/quiz-CTA cluster. The legacy header's visual
   order puts the hamburger last, after the pill and CTA, so `order` moves
   it there without touching primary_nav.html's markup or DOM position
   (screen-reader/tab order stays DOM order; only paint order changes). */
.header-brand {
  order: 1;
}

/* The desktop nav is the ONLY direct-child <nav> of the header's flex row
   (primary_nav.html's other <nav aria-label="Mobile"> lives nested inside
   its sibling .nav-mobile <details>, not as a flex item here) - a
   structural selector, not an aria-label text match, so this stays correct
   under every locale's translated "Primary"/"Mobile" label text. */
header > div > nav {
  order: 2;
}

.header-actions {
  order: 3;
}

.nav-mobile {
  order: 4;
}

/* Derived primary nav (decisions 61/69, partials/primary_nav.html), ported
   1:1 from the legacy header's JS-driven desktop dropdown + mobile menu
   (decision 108) but built from native <details>/<summary> disclosures so
   it stays zero-JavaScript. Colour/spacing/type live as Tailwind utilities
   directly in the template (utility translation, decision 108's method) -
   only the parts <details> genuinely needs (positioning, the native marker,
   the chevron) live here. */
.nav-group {
  position: relative;
}

.nav-group__summary {
  cursor: pointer;
  list-style: none;
}

.nav-group__summary::-webkit-details-marker {
  display: none;
}

.nav-group__menu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: 20;
  margin-top: 0.25rem;
}

.nav-group__menu[data-mega-panel] {
  position: fixed;
  inset-block-start: 4.25rem;
  inset-inline: 1rem;
  margin-inline: auto;
  max-width: calc(100vw - 2rem);
  max-height: min(70vh, calc(100dvh - 5rem));
  overscroll-behavior: contain;
}

.nav-group__menu[data-mega-panel][data-nav-panel-columns="1"] {
  width: min(22rem, calc(100vw - 2rem));
}

.nav-group__menu[data-mega-panel][data-nav-panel-columns="2"] {
  width: min(44rem, calc(100vw - 2rem));
}

.nav-group__menu[data-mega-panel][data-nav-panel-columns="3"] {
  width: min(64rem, calc(100vw - 2rem));
}

.nav-mega__groups {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

[data-nav-panel-columns="1"] .nav-mega__groups {
  grid-template-columns: minmax(0, 1fr);
}

[data-nav-panel-columns="2"] .nav-mega__groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-nav-panel-columns="3"] .nav-mega__groups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav-mega__group,
.nav-mega__column,
.nav-mega__link {
  min-width: 0;
}

.nav-mega__group[data-nav-columns="2"] {
  grid-column: span 2;
}

.nav-mega__group[data-nav-columns="3"] {
  grid-column: span 3;
}

.nav-mega__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

[data-nav-columns="2"] > .nav-mega__columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

[data-nav-columns="3"] > .nav-mega__columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav-mega__link,
.nav-mobile__sublink {
  overflow-wrap: anywhere;
}

.nav-group__menu li + li {
  margin-top: 0.25rem;
}

/* Chevron glyph on every dropdown/mega-panel summary (craft addendum 7.1:
   "chevron rotates"). Transition lives on the glyph itself (not the whole
   summary) so it never fights the color/background transition rule above;
   rotation reads the native `open` attribute directly, so it stays correct
   whether the group opened via a real click or via static/js/modules/
   mega_panel.js's hover-intent/focus-within enhancement. */
.nav-chevron {
  transition: transform var(--motion-duration) var(--motion-easing);
}

.nav-group[open] > .nav-group__summary .nav-chevron,
.nav-mobile__group[open] > .nav-mobile__group-summary .nav-chevron {
  transform: rotate(180deg);
}

/* static/js/modules/mega_panel.js's hover-intent/focus-within enhancement
   toggles the native `open` attribute directly (no separate visibility
   class), so the panel is always positioned absolutely and never
   participates in document flow either way - opening one never shifts any
   sibling nav item or the header's own height (craft addendum 7.1: "no
   layout shift on open"). */

/* Closing one open <details> group when another opens: not expressible in
   CSS alone without static/js/modules/mega_panel.js's enhancement, which is
   present on every page that renders this markup - see that module for the
   hover-intent/focus-within/escape behaviour layered on top. */

.nav-mobile__summary {
  cursor: pointer;
  list-style: none;
}

.nav-mobile__summary::-webkit-details-marker {
  display: none;
}

/* The native details state is the single source of truth for the mobile
   toggle glyph, so clicks, Escape, outside close, and breakpoint cleanup all
   produce the same icon without a parallel JavaScript state class. */
.nav-mobile__icon--close {
  display: none;
}

.nav-mobile[open] > .nav-mobile__summary .nav-mobile__icon--menu {
  display: none;
}

.nav-mobile[open] > .nav-mobile__summary .nav-mobile__icon--close {
  display: block;
}

.nav-mobile {
  position: relative;
}

.nav-mobile[open]::before {
  position: fixed;
  inset: 4rem 0 0;
  z-index: 20;
  background: rgb(0 0 0 / 0.38);
  backdrop-filter: blur(2px);
  content: "";
}

/* Hidden at the desktop breakpoint (matches the legacy header's own `lg`
   breakpoint, ported 1:1 - decision 108). Expressed as a plain media query
   rather than the `lg:hidden` utility class so this element's own markup
   never contains that literal class string, which other templates' tests
   use as a substring signal for their own, unrelated elements. */
@media (min-width: 1024px) {
  .nav-mobile {
    display: none;
  }
}

.nav-mobile__list {
  position: fixed;
  inset-inline: 0;
  top: 4rem;
  z-index: 30;
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(0);
  opacity: 1;
  transition:
    transform var(--motion-duration) var(--motion-easing),
    opacity var(--motion-duration) var(--motion-easing);
}

.nav-mobile:not([open]) > .nav-mobile__list {
  display: none;
}

/* static/js/modules/mobile_nav.js adds this class for exactly one animation
   frame when the sheet opens, then removes it - the sheet paints in its
   offset/transparent "entering" state first, then transitions to the rule
   above, instead of a native <details> instant show. Reduced-motion users
   never see this class applied (the module checks the media query before
   adding it), so they get an instant, layout-shift-free open either way. */
.nav-mobile__list.is-entering {
  transform: translateY(-0.75rem);
  opacity: 0;
}

.nav-mobile__group {
  position: relative;
}

.nav-mobile__group-summary {
  cursor: pointer;
  list-style: none;
}

.nav-mobile__group-summary::-webkit-details-marker {
  display: none;
}

.nav-mobile__submenu {
  margin-top: 0.125rem;
  margin-bottom: 0.25rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid var(--color-border, #e5e7eb);
}

.nav-mobile__semantic-group {
  min-width: 0;
}

.nav-mobile__semantic-group + .nav-mobile__semantic-group {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

/* Rich-text review-body typography (pages/entities/detail.html's
   `.prose` wrapper around `detail.review_html`, ditto pages/blog/detail.html
   and pages/authors/detail.html's own body_html). No Tailwind typography
   plugin is installed (tailwind.config.js has no `plugins` entry) - `prose`
   is a plain, chassis-owned utility class here, not the plugin's, so
   admin-authored rich text (h2/h3 section headings, paragraphs, lists,
   links, blockquotes) gets real heading/spacing styles instead of the
   browser's unstyled defaults. Scoped under `.prose` so it never leaks
   onto unrelated headings elsewhere on the page. */
.prose :where(h2) {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
}

.prose :where(h3) {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
}

.prose :where(h4) {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
}

.prose :where(p) {
  margin-bottom: 1rem;
  line-height: 1.75;
}

.prose :where(ul) {
  margin-bottom: 1rem;
  padding-inline-start: 1.5rem;
  list-style: disc;
}

.prose :where(ol) {
  margin-bottom: 1rem;
  padding-inline-start: 1.5rem;
  list-style: decimal;
}

.prose :where(li) {
  margin-bottom: 0.375rem;
}

.prose :where(a) {
  color: var(--color-brand);
  text-decoration: underline;
}

.prose :where(strong) {
  font-weight: 700;
}

.prose :where(blockquote) {
  margin-block: 1rem;
  border-inline-start: 3px solid var(--color-border, #e5e7eb);
  padding-inline-start: 1rem;
  font-style: italic;
  color: var(--color-ink-muted);
}

/* Authored-content overflow guards (refresh round R15): review/article
   bodies are operator-authored HTML with no schema stopping a raw table
   or an unbroken code span wider than a phone column, and this ruleset
   previously styled neither. Defensive hardening, not a fix for an
   observed page: tables get their own horizontal scroll context instead
   of stretching the page; code wraps at arbitrary points. Scoped under
   `.prose` so page-level tables (compare, fees) keep their own explicit
   overflow wrappers. */
.prose :where(table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin-block: 1rem;
  border-collapse: collapse;
}

.prose :where(td, th) {
  border: 1px solid var(--color-border, #e5e7eb);
  padding: 0.375rem 0.625rem;
  text-align: start;
}

.prose :where(code) {
  overflow-wrap: anywhere;
  font-size: 0.875em;
}

.prose :where(pre) {
  max-width: 100%;
  overflow-x: auto;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

/* Logo tile (spec section 4): provider logos always render on a light tile
   background regardless of theme mode, so a dark site (camscue, hodlcue,
   wagercue) never loses legibility on a transparent-background PNG/SVG
   logo authored against a white canvas. Fixed light surface + hairline
   border on every theme; dimensions/lazy-loading stay in the template
   (reserved for LCP, spec section 4's "logo tile: fixed dims ... lazy
   except LCP surfaces"). */
.logo-tile {
  border: 1px solid color-mix(in srgb, #000000 8%, transparent);
}

img.logo-tile {
  background-color: #ffffff;
}

/* Range slider (craft addendum 7.1, "money surface", calculator inputs):
   the native <input type="range"> ships a bare browser-default track/thumb
   on every platform - the addendum's designer-grade finish checklist bars
   any default-browser control on a money surface. Both track and thumb
   pseudo-elements need the -webkit-/-moz- prefixed rulesets duplicated
   (no shared shorthand exists across engines); component-scoped here
   rather than per-template so every calculator's slider stays identical.
   Brand thumb, brand-soft track, tokens only - no raw hex. Scoped to the
   attribute selector (not a new class) so every existing calculator
   template's <input type="range"> picks this up with no template edit -
   the harmless leftover `accent-brand` class each one still carries is a
   no-op once `appearance: none` replaces the native rendering path. */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
}
input[type="range"]:focus-visible {
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 0.375rem;
  border-radius: var(--radius-pill, 9999px);
  background: var(--color-brand-soft);
}
input[type="range"]::-moz-range-track {
  height: 0.375rem;
  border-radius: var(--radius-pill, 9999px);
  background: var(--color-brand-soft);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -0.5625rem;
  height: 1.375rem;
  width: 1.375rem;
  border-radius: 9999px;
  background: var(--color-brand);
  border: 3px solid var(--color-surface);
  box-shadow: 0 1px 3px color-mix(in srgb, #000000 25%, transparent);
  transition:
    transform var(--motion-duration) var(--motion-easing),
    background-color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing);
}
input[type="range"]::-moz-range-thumb {
  height: 1.375rem;
  width: 1.375rem;
  border-radius: 9999px;
  background: var(--color-brand);
  border: 3px solid var(--color-surface);
  box-shadow: 0 1px 3px color-mix(in srgb, #000000 25%, transparent);
  transition:
    transform var(--motion-duration) var(--motion-easing),
    background-color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing);
}
input[type="range"]:hover::-webkit-slider-thumb {
  background: var(--color-brand-strong);
  transform: scale(1.08);
}
input[type="range"]:hover::-moz-range-thumb {
  background: var(--color-brand-strong);
  transform: scale(1.08);
}
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(0.96);
}
input[type="range"]:active::-moz-range-thumb {
  transform: scale(0.96);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--surface, var(--color-surface, transparent)), 0 0 0 4px var(--focus-ring, var(--color-brand, currentColor));
}
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--surface, var(--color-surface, transparent)), 0 0 0 4px var(--focus-ring, var(--color-brand, currentColor));
}
@media (prefers-reduced-motion: reduce) {
  input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-moz-range-thumb {
    transition-property: background-color, box-shadow;
  }
}

/* Craft addendum 7.1: every hover/lift/scale transition on the content and
   utility surfaces (blog cards, tool cards, quiz options, accordions, TOC
   links) respects prefers-reduced-motion by dropping the transform half of
   the transition; color/background/border/shadow easing stays (it carries
   no motion-sickness risk) so hover/focus feedback is still visible, just
   without the translate/scale movement. */
@media (prefers-reduced-motion: reduce) {
  .group:hover img,
  a[data-blog-card]:hover,
  a[data-blog-card] img {
    transform: none !important;
    transition-property: color, background-color, border-color, box-shadow !important;
  }
}

/* Public empty, loading, error, and success states share one fixed visual
   and interaction contract. Callers supply already-translated copy only;
   state semantics come from each partial's fixed data-ui-state value. */
.ui-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--border, var(--color-border));
  border-radius: var(--radius-card);
  background: var(--surface-raised, var(--color-surface));
  color: var(--ink, var(--color-ink));
  text-align: center;
}

.ui-state[data-ui-state="error"] {
  border-color: color-mix(in srgb, var(--danger, var(--color-danger)) 45%, transparent);
}

.ui-state[data-ui-state="success"] {
  border-color: color-mix(in srgb, var(--success, var(--color-accent)) 45%, transparent);
}

.ui-state > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.ui-state > p {
  max-width: var(--measure-readable, 72ch);
  margin: 0;
  color: var(--ink-muted, var(--color-ink-muted));
  line-height: 1.625;
}

.ui-state-action {
  display: inline-flex;
  min-height: var(--touch-target, 44px);
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--cta-primary, var(--color-cta, var(--color-brand)));
  color: var(--color-cta-ink, var(--color-brand-ink, white));
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}

.ui-state-action:hover {
  background: var(
    --cta-primary-hover,
    var(--color-cta-strong, var(--color-brand-strong))
  );
}

.ui-state-action:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-brand, currentColor));
  outline-offset: 3px;
}

.ui-state-loading-indicator {
  width: 1.5rem;
  height: 1.5rem;
  border: 0.1875rem solid color-mix(in srgb, var(--brand, var(--color-brand)) 25%, transparent);
  border-top-color: var(--brand, var(--color-brand));
  border-radius: 9999px;
  animation: ui-state-spin 700ms linear infinite;
}

@keyframes ui-state-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The compact ranked homepage rail keeps every action aligned even when
   partner names differ in length or the country picker swaps button for link. */
[data-home-board-row] > [data-cta-action],
[data-home-board-row] > [data-cta-country-choice] {
  width: 5rem;
}

/* One platform-wide control floor at every viewport. Inline prose links keep
   normal line flow because min sizes do not alter inline formatting, while
   blockified links and controls remain comfortably operable by touch,
   pointer, keyboard, or assistive input across every vertical. */
:where(
  a,
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  label[for]
) {
  min-width: var(--touch-target, 44px);
  min-height: var(--touch-target, 44px);
}

/* Consent settings keep the 44px interactive wrapper while the browser's
   native checkbox glyph stays at the intended 20px visual size. */
.consent-checkbox {
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .ui-state-loading-indicator {
    animation: none;
    border-color: var(--brand, var(--color-brand));
  }
}

/* Conversion homepage composition: the tinted hero band and the tabbed
   board's chip row/panels. Token-driven
   (--rgb-brand, --radius-pill, --color-*), so the look always follows the
   requesting theme's own palette rather than a hardcoded color. These
   classes render only when a vertical opts into
   CommercialConfig.homepage_composition="conversion" - every other
   vertical never applies them. */
.home-hero--tinted {
  background:
    radial-gradient(1100px 480px at 85% -10%, rgb(var(--rgb-brand) / 0.09), transparent 60%),
    linear-gradient(to bottom, rgb(var(--rgb-brand) / 0.05), transparent 85%);
}

.home-board-tabs {
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.home-board-tabs::-webkit-scrollbar {
  display: none;
}

.home-board-tab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: var(--touch-target, 44px);
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.home-board-tab-label {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-board-tab:hover {
  border-color: var(--color-brand);
  color: var(--color-brand-strong);
}
.home-board-tab[aria-selected="true"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-brand-ink);
}

[data-home-board-panels] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.home-board-panel {
  grid-area: 1 / 1;
  visibility: hidden;
}
.home-board-panel.is-active {
  visibility: visible;
  animation: home-board-panel-in 180ms ease-out;
}
@keyframes home-board-panel-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-board-panel.is-active {
    animation: none;
  }
}