@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:"Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-2xl:1rem;--drop-shadow-sm:0 1px 2px #00000026;--blur-sm:8px;--blur-3xl:64px;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:"Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--default-mono-font-family:ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){*{outline-color:color-mix(in oklab, var(--ring) 50%, transparent)}}body{background-color:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-sans)}h1{letter-spacing:-.025em;font-weight:600}h2{letter-spacing:-.02em;font-weight:600}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.-top-20{top:calc(var(--spacing) * -20)}.-top-24{top:calc(var(--spacing) * -24)}.top-0{top:0}.top-3{top:calc(var(--spacing) * 3)}.top-4{top:calc(var(--spacing) * 4)}.-bottom-20{bottom:calc(var(--spacing) * -20)}.bottom-0{bottom:0}.bottom-6{bottom:calc(var(--spacing) * 6)}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing) * 3)}.left-4{left:calc(var(--spacing) * 4)}.z-50{z-index:50}.mx-auto{margin-inline:auto}.my-2{margin-block:calc(var(--spacing) * 2)}.my-8{margin-block:calc(var(--spacing) * 8)}.my-10{margin-block:calc(var(--spacing) * 10)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mt-auto{margin-top:auto}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.mr-auto{margin-right:auto}.mb-1{margin-bottom:var(--spacing)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.aspect-video{aspect-ratio:var(--aspect-video)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-13{height:calc(var(--spacing) * 13)}.h-16{height:calc(var(--spacing) * 16)}.h-64{height:calc(var(--spacing) * 64)}.h-72{height:calc(var(--spacing) * 72)}.h-96{height:calc(var(--spacing) * 96)}.h-full{height:100%}.h-px{height:1px}.min-h-\[120px\]{min-height:120px}.min-h-screen{min-height:100vh}.w-10{width:calc(var(--spacing) * 10)}.w-72{width:calc(var(--spacing) * 72)}.w-\[36rem\]{width:36rem}.w-\[42rem\]{width:42rem}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.max-w-xl{max-width:var(--container-xl)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-6{column-gap:calc(var(--spacing) * 6)}.gap-x-8{column-gap:calc(var(--spacing) * 8)}.gap-y-2{row-gap:calc(var(--spacing) * 2)}.gap-y-3{row-gap:calc(var(--spacing) * 3)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:calc(var(--radius) + 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--border)}.border-destructive\/40{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/40{border-color:color-mix(in oklab, var(--destructive) 40%, transparent)}}.border-input{border-color:var(--input)}.border-success\/40{border-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.border-success\/40{border-color:color-mix(in oklab, var(--success) 40%, transparent)}}.border-transparent{border-color:#0000}.border-warning\/40{border-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.border-warning\/40{border-color:color-mix(in oklab, var(--warning) 40%, transparent)}}.border-white\/40{border-color:#fff6}@supports (color:color-mix(in lab, red, red)){.border-white\/40{border-color:color-mix(in oklab, var(--color-white) 40%, transparent)}}.border-white\/50{border-color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.border-white\/50{border-color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.bg-accent{background-color:var(--accent)}.bg-background{background-color:var(--background)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-border{background-color:var(--border)}.bg-card{background-color:var(--card)}.bg-destructive,.bg-destructive\/10{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--destructive) 10%, transparent)}}.bg-muted,.bg-muted\/40{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, var(--muted) 40%, transparent)}}.bg-primary,.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-secondary{background-color:var(--secondary)}.bg-success,.bg-success\/15{background-color:var(--success)}@supports (color:color-mix(in lab, red, red)){.bg-success\/15{background-color:color-mix(in oklab, var(--success) 15%, transparent)}}.bg-transparent{background-color:#0000}.bg-warning\/15{background-color:var(--warning)}@supports (color:color-mix(in lab, red, red)){.bg-warning\/15{background-color:color-mix(in oklab, var(--warning) 15%, transparent)}}.bg-white{background-color:var(--color-white)}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-white\/15{background-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.bg-white\/15{background-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-black\/80{--tw-gradient-from:#000c}@supports (color:color-mix(in lab, red, red)){.from-black\/80{--tw-gradient-from:color-mix(in oklab, var(--color-black) 80%, transparent)}}.from-black\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-primary{--tw-gradient-from:var(--primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-primary-dark{--tw-gradient-from:var(--primary-dark);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-black\/30{--tw-gradient-via:#0000004d}@supports (color:color-mix(in lab, red, red)){.via-black\/30{--tw-gradient-via:color-mix(in oklab, var(--color-black) 30%, transparent)}}.via-black\/30{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-primary{--tw-gradient-via:var(--primary);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-primary{--tw-gradient-to:var(--primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-primary-light{--tw-gradient-to:var(--primary-light);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-14{padding-block:calc(var(--spacing) * 14)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-0{padding-top:0}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.text-center{text-align:center}.align-\[-2px\]{vertical-align:-2px}.font-mono{font-family:ui-monospace,SFMono-Regular,JetBrains Mono,Menlo,monospace}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-balance{text-wrap:balance}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--accent-foreground)}.text-card-foreground{color:var(--card-foreground)}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-secondary-light{color:var(--secondary-light)}.text-success{color:var(--success)}.text-success-foreground{color:var(--success-foreground)}.text-warning-foreground{color:var(--warning-foreground)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab, red, red)){.text-white\/80{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.text-white\/85{color:#ffffffd9}@supports (color:color-mix(in lab, red, red)){.text-white\/85{color:color-mix(in oklab, var(--color-white) 85%, transparent)}}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.underline-offset-4{text-underline-offset:4px}.opacity-\[0\.12\]{opacity:.12}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur-3xl{--tw-blur:blur(var(--blur-3xl));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,)}.drop-shadow-sm{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-sm));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,)}.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-sm{--tw-backdrop-blur:blur(var(--blur-sm));-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-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}@media (hover:hover){.group-hover\:-translate-y-0\.5:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:-translate-y-1:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:border-primary\/40:is(:where(.group):hover *){border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.group-hover\:border-primary\/40:is(:where(.group):hover *){border-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.group-hover\:text-white\/90:is(:where(.group):hover *){color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.group-hover\:text-white\/90:is(:where(.group):hover *){color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.group-hover\:underline:is(:where(.group):hover *){text-decoration-line:underline}.group-hover\:shadow-lg:is(:where(.group):hover *){--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.group-hover\:shadow-md:is(:where(.group):hover *){--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-white:hover{border-color:var(--color-white)}.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--destructive) 90%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.hover\:bg-secondary\/90:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/90:hover{background-color:color-mix(in oklab, var(--secondary) 90%, transparent)}}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:bg-white\/90:hover{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/90:hover{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-primary:hover{color:var(--primary)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (width>=40rem){.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\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media (width>=48rem){.md\:order-none{order:0}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-6{grid-column:span 6/span 6}.md\:col-span-7{grid-column:span 7/span 7}.md\:mt-20{margin-top:calc(var(--spacing) * 20)}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-18{height:calc(var(--spacing) * 18)}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:p-8{padding:calc(var(--spacing) * 8)}.md\:px-12{padding-inline:calc(var(--spacing) * 12)}.md\:py-14{padding-block:calc(var(--spacing) * 14)}.md\:py-16{padding-block:calc(var(--spacing) * 16)}.md\:py-18{padding-block:calc(var(--spacing) * 18)}.md\:py-24{padding-block:calc(var(--spacing) * 24)}.md\:py-28{padding-block:calc(var(--spacing) * 28)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}}@media (width>=64rem){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.\[\&_p\]\:leading-relaxed p{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\~\*\]\:pl-7 svg~*{padding-left:calc(var(--spacing) * 7)}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:top-4>svg{top:calc(var(--spacing) * 4)}.\[\&\>svg\]\:left-4>svg{left:calc(var(--spacing) * 4)}.\[\&\>svg\]\:size-4>svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&\>svg\]\:text-current>svg{color:currentColor}.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>svg\~\*\]\:pl-7>svg~*{padding-left:calc(var(--spacing) * 7)}}:root{--radius:.625rem;--background:oklch(98.5% .004 255);--foreground:oklch(21% .05 255);--card:oklch(100% 0 0);--card-foreground:oklch(21% .05 255);--popover:oklch(100% 0 0);--popover-foreground:oklch(21% .05 255);--primary:oklch(52% .2 262);--primary-foreground:oklch(98% .01 255);--primary-dark:oklch(37% .16 266);--primary-light:oklch(68% .17 255);--secondary:oklch(80% .1 225);--secondary-foreground:oklch(25% .07 258);--secondary-light:oklch(87% .07 225);--muted:oklch(95.5% .008 255);--muted-foreground:oklch(50% .03 255);--accent:oklch(94.5% .02 255);--accent-foreground:oklch(42% .16 262);--destructive:oklch(57.7% .245 27.3);--destructive-foreground:oklch(98% .005 27);--border:oklch(90% .01 255);--input:oklch(90% .01 255);--ring:oklch(52% .2 262);--success:oklch(47% .12 155);--success-foreground:oklch(98% .01 155);--warning:oklch(80% .15 85);--warning-foreground:oklch(30% .06 85)}@keyframes coin-float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-22px)rotate(8deg)}}.animate-coin-float{animation:coin-float var(--float-dur,12s) ease-in-out var(--float-delay,0s) infinite}@media (prefers-reduced-motion:reduce){.animate-coin-float{animation:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}

/* ==========================================================================
   Site additions
   Hand-written on top of the compiled Tailwind bundle. Kept last so these
   rules win over the utility layer without !important.
   ========================================================================== */

/* Attribute utilities the original bundle never needed. */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Footer links: 44px minimum touch target without changing the visual rhythm. */
.footer-link{display:inline-flex;min-height:44px;align-items:center}


/* Hero decorative coins collide with the headline until the container has
   real room either side of it (max-w-4xl plus gutters). They fade in at 1280px,
   which is where the free space beside the text becomes wide enough. */
@media (max-width: 1279px){
  .animate-coin-float{display:none}
}

/* Long article tables must scroll rather than break the layout. */
@media (max-width: 767px){
  article table{display:block;overflow-x:auto;white-space:nowrap}
}

/* Table of contents: a quiet card that collapses to one line on mobile. */
details > summary{list-style:none}
details > summary::-webkit-details-marker{display:none}
/* Scoped to FAQ only. The bare `details > summary::after` also hit the mobile
   hamburger <summary>, which rendered a stray "+" under the menu button. */
.faq-item > summary::after{content:"+";float:right;font-weight:600;color:var(--muted-foreground)}
.faq-item[open] > summary::after{content:"\2212"}

/* Anchored headings should not land under the sticky header after a jump. */
article h2, article h3{scroll-margin-top:5.5rem}

/* --------------------------------------------------------------------------
   Utilities used by markup added after the original Tailwind compile.
   Written by hand against the same theme variables so nothing drifts.
   -------------------------------------------------------------------------- */

/* Skip link: .sr-only hides it, these rules reveal it on keyboard focus. */
.focus\:not-sr-only:focus{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;overflow:visible;border-width:0}
.focus\:absolute:focus{position:absolute}
.focus\:left-4:focus{left:1rem}
.focus\:top-4:focus{top:1rem}
.focus\:z-\[60\]:focus{z-index:60}
.focus\:rounded-md:focus{border-radius:var(--r-sm)}
.focus\:bg-primary:focus{background-color:var(--primary)}
.focus\:px-4:focus{padding-inline:1rem}
.focus\:py-2:focus{padding-block:.5rem}
.focus\:text-sm:focus{font-size:.875rem;line-height:1.4286}
.focus\:font-semibold:focus{font-weight:600}
.focus\:text-primary-foreground:focus{color:var(--primary-foreground)}

/* Spacing and layout. */
.min-w-0{min-width:0}
.w-fit{width:fit-content}
.max-w-sm{max-width:24rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gap-10{gap:2.5rem}
.gap-x-4{column-gap:1rem}
.gap-y-10{row-gap:2.5rem}
.mt-1{margin-top:.25rem}
.mt-3{margin-top:.75rem}
.mt-12{margin-top:3rem}
.my-6{margin-block:1.5rem}
.pt-2{padding-top:.5rem}
.pl-5{padding-left:1.25rem}
.list-decimal{list-style-type:decimal}
.text-left{text-align:left}
.cursor-pointer{cursor:pointer}
.underline{text-decoration-line:underline}
.underline-offset-2{text-underline-offset:2px}
.size-7{width:1.75rem;height:1.75rem}
.size-10{width:2.5rem;height:2.5rem}
.border-y{border-block:1px solid var(--border)}
.border-primary\/30{border-color:color-mix(in oklab,var(--primary) 30%,transparent)}
.bg-primary\/5{background-color:color-mix(in oklab,var(--primary) 5%,transparent)}

/* Hover colour on a card title. */
.group:hover .group-hover\:text-primary{color:var(--primary)}

@media (width>=48rem){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:col-span-2{grid-column:span 2/span 2}
  .md\:col-span-4{grid-column:span 4/span 4}
}

@media (width>=64rem){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:gap-14{gap:3.5rem}
}

/* Small "last verified" line under a platform page headline. */
.page-meta{margin:-.75rem 0 1.5rem;font-size:.75rem;line-height:1.5;color:var(--muted-foreground)}
.page-meta a{text-decoration:underline;text-underline-offset:2px}
.page-meta a:hover{color:var(--primary)}

/* ==========================================================================
   Zero-JavaScript components
   The mobile menu is a native <details>; the code is selectable text; the
   contact form posts to PHP. Nothing here needs a script to work.
   ========================================================================== */

/* ---- Mobile menu ---------------------------------------------------------
   <details> supplies the open/close state, keyboard handling and the
   screen-reader semantics. The panel is absolutely positioned against the
   sticky header, so it spans the full width without pushing content down. */

.mnav{flex:0 0 auto}
.mnav summary{
  display:grid;place-items:center;
  width:44px;height:44px;margin-inline-start:-.5rem;
  list-style:none;cursor:pointer;border-radius:var(--r-sm);color:inherit;
}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary:hover{background-color:var(--accent)}
.mnav summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.mnav-icon,
.mnav-icon::before,
.mnav-icon::after{
  display:block;position:relative;
  width:22px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .18s ease,top .18s ease,background-color .18s ease;
}
.mnav-icon::before,
.mnav-icon::after{content:"";position:absolute;left:0}
.mnav-icon::before{top:-7px}
.mnav-icon::after{top:7px}
.mnav[open] .mnav-icon{background-color:transparent}
.mnav[open] .mnav-icon::before{top:0;transform:rotate(45deg)}
.mnav[open] .mnav-icon::after{top:0;transform:rotate(-45deg)}

.mnav:not([open]) .mnav-panel{display:none}

.mnav-panel{
  position:absolute;left:0;right:0;top:100%;
  display:flex;flex-direction:column;
  padding:.5rem 1rem 1rem;
  background:var(--card);border-top:1px solid var(--border);
  box-shadow:0 12px 28px rgb(0 0 0 / .10);
}
.mnav-link{
  display:flex;align-items:center;min-height:44px;
  padding:.5rem .75rem;border-radius:var(--r-md);
  font-size:1rem;font-weight:600;color:inherit;
  transition:background-color .15s ease;
}
.mnav-link:hover{background-color:var(--accent)}
.mnav-link.is-active{background-color:var(--accent);font-weight:600}

/* ---- Selectable code ----------------------------------------------------
   user-select:all means one tap highlights the entire code, which is the
   closest a no-JS site gets to "copy in one click". The referral link next to
   it is the primary action: the code is already applied there. */

.code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:stretch}
.code-box{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  width:100%;min-width:0;padding:.625rem .75rem;border-radius:var(--r-md);
  border:1.5px dashed color-mix(in oklab,var(--primary) 45%,var(--border));
  background:color-mix(in oklab,var(--primary) 5%,var(--card));
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9375rem;font-weight:600;letter-spacing:.04em;line-height:1;
  color:var(--foreground);cursor:pointer;text-align:left;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.code-box-text{overflow:hidden;text-overflow:ellipsis}
.code-box-icon{flex:0 0 auto;width:1rem;height:1rem;opacity:.5;transition:opacity .15s ease}
.code-box:hover{border-style:solid}
.code-box:hover .code-box-icon{opacity:.85}
.code-box:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.code-box-dark{
  border-color:rgb(255 255 255 / .45);
  background:rgb(255 255 255 / .12);
  color:#fff;letter-spacing:.06em;
}
.code-box-dark:focus-visible{outline-color:#fff}

.code-go{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.625rem 1rem;border-radius:var(--r-md);
  background:var(--primary);color:var(--primary-foreground);
  font-size:.9375rem;font-weight:600;white-space:nowrap;
  transition:background-color .15s ease,transform .15s ease;
}
.code-go:hover{background:color-mix(in oklab,var(--primary) 90%,#000)}
.code-go:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.code-go-wide{width:100%}

.code-hint{margin-top:.375rem;font-size:.75rem;line-height:1.4;color:var(--muted-foreground)}

@media (max-width: 380px){
  .code-row{grid-template-columns:minmax(0,1fr)}
}

/* ---- Contact form ------------------------------------------------------ */

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert-ok,
.alert-err{
  display:flex;gap:.5rem;align-items:flex-start;
  margin-bottom:1rem;padding:.75rem 1rem;border-radius:var(--r-md);
  font-size:.875rem;line-height:1.5;
}
.alert-ok{background:color-mix(in oklab,var(--success) 10%,var(--card));border:1px solid color-mix(in oklab,var(--success) 35%,var(--card));color:var(--success)}
.alert-err{background:color-mix(in oklab,var(--destructive) 8%,var(--card));border:1px solid color-mix(in oklab,var(--destructive) 30%,var(--card));color:var(--destructive)}

/* ==========================================================================
   ReferralLinks design layer
   --------------------------------------------------------------------------
   Hand-written against the same variables as the compiled utility sheet.
   One card system, one accent for money, one reading column.

   Accent rule: green (--savings) is reserved for money - rates, rebates,
   "verified" - and for the single primary action. Blue stays structural.
   ========================================================================== */

:root{
  --savings:oklch(52% .13 156);
  --savings-dark:oklch(42% .12 156);
  --savings-strong:oklch(42% .12 156);
  --savings-soft:oklch(96% .03 156);
  --savings-line:oklch(86% .06 156);
  --on-savings:#fff;
  --card-radius:var(--r-lg);
  --card-shadow:0 1px 2px rgb(15 23 42 / .05), 0 10px 24px -18px rgb(15 23 42 / .35);
  --text-measure:64ch;
}

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 1.5rem;border-radius:var(--r-md);
  font-size:1rem;font-weight:600;line-height:1;white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
/* Inside the dark hero a white ring is the only one that reads; everywhere
   else the shared brand ring applies. */
.hero .btn:focus-visible{outline-color:#fff}
.btn-accent{background:var(--savings);color:var(--on-savings)}
.btn-accent:hover{background:var(--savings-dark);color:var(--on-savings)}
.btn-ghost{border:1px solid rgb(255 255 255 / .45);color:#fff}
.btn-ghost:hover{background:rgb(255 255 255 / .12);border-color:rgb(255 255 255 / .8);color:#fff}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:color-mix(in oklab,var(--primary) 88%,#000);color:var(--primary-foreground)}

/* ---- Breadcrumbs ------------------------------------------------------- */
.breadcrumb{font-size:.8125rem;line-height:1.4;color:var(--muted-foreground)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;min-width:0}
.breadcrumb li{display:flex;align-items:center;gap:.375rem;min-width:0}
.breadcrumb li + li::before{
  content:"";flex:0 0 auto;width:.375rem;height:.375rem;
  border-right:1.5px solid color-mix(in oklab,var(--muted-foreground) 55%,transparent);
  border-top:1.5px solid color-mix(in oklab,var(--muted-foreground) 55%,transparent);
  transform:rotate(45deg);margin-inline-end:.125rem;
}
.breadcrumb a{color:var(--muted-foreground);text-decoration:none}
.breadcrumb a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
/* Touch: a 20px-tall crumb is below the 24px target minimum, so the links get
   a little vertical room on phones without changing the visual rhythm. */
@media(max-width:767px){
  .breadcrumb a{display:inline-flex;align-items:center;min-height:24px;padding-block:.1rem}
  .breadcrumb [aria-current="page"]{min-height:24px;display:inline-flex;align-items:center}
}
.breadcrumb [aria-current="page"]{color:var(--foreground);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.post-crumb{margin-bottom:1rem}

/* ---- Hero -------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(146deg,var(--primary-dark) 0%,var(--primary) 52%,var(--primary-light) 100%);
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgb(255 255 255 / .07) 1px,transparent 1px),
    linear-gradient(90deg,rgb(255 255 255 / .07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 20% 0%,#000 20%,transparent 78%);
}
.hero::after{
  content:"";position:absolute;right:-12%;top:-30%;width:38rem;height:38rem;
  border-radius:var(--r-pill);pointer-events:none;
  background:radial-gradient(closest-side,rgb(34 197 94 / .28),transparent 70%);
}
.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;
  max-width:72rem;margin:0 auto;padding:3rem 1rem 3.5rem;
}
@media(min-width:640px){.hero-inner{padding-inline:1.5rem}}
@media(min-width:1024px){
  .hero-inner{grid-template-columns:minmax(0,1fr) 25rem;gap:3.5rem;align-items:center;padding-block:5rem 4.5rem}
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.125rem;
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgb(255 255 255 / .78);
}
.hero-eyebrow::before{content:"";width:.5rem;height:.5rem;border-radius:var(--r-pill);background:var(--savings-soft);box-shadow:0 0 0 4px rgb(255 255 255 / .12)}
.hero h1{
  margin:0 0 1rem;max-width:15ch;
  font-size:clamp(2.35rem,5.2vw,3.75rem);line-height:1.02;font-weight:600;letter-spacing:-.035em;
  text-wrap:balance;
}
.hero-lede{max-width:46ch;margin:0 0 2rem;font-size:1.0625rem;line-height:1.65;color:rgb(255 255 255 / .84)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:1.75rem 2.5rem;margin:0}
.hero-stats div{display:flex;flex-direction:column;gap:.2rem}
.hero-stats dt{font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgb(255 255 255 / .6)}
.hero-stats dd{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hero-side{min-width:0}

/* Hero deal panel: the product, visible before any scrolling. */
.hero-deals{
  border-radius:var(--r-lg);background:var(--card);color:var(--card-foreground);
  box-shadow:0 24px 60px -24px rgb(4 10 30 / .65),0 2px 6px rgb(4 10 30 / .18);
  overflow:hidden;
}
.hero-deals-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  padding:1rem 1.125rem .75rem;border-bottom:1px solid var(--border);
}
.hero-deals-head p{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-foreground)}
.hero-deals-head a{font-size:.75rem;font-weight:600;color:var(--primary);white-space:nowrap}
.hero-deals-head a:hover{text-decoration:underline;text-underline-offset:2px}
.hero-deals-list{list-style:none;margin:0;padding:0}
.hero-deal{padding:.875rem 1.125rem;border-bottom:1px solid var(--border)}
.hero-deal:last-child{border-bottom:0}
.hero-deal-head{display:flex;align-items:center;gap:.625rem;text-decoration:none;color:inherit}
.hero-deal-id{display:flex;flex-direction:column;min-width:0;flex:1}
.hero-deal-name{font-weight:600;font-size:.9375rem}
.hero-deal-offer{font-size:.75rem;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-deal-rate{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;color:var(--savings);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-deal-row{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.hero-deal-row .code-box{flex:1;min-width:0;padding:.45rem .6rem;font-size:.9375rem;letter-spacing:.05em}
.hero-deal-link{font-size:.75rem;font-weight:600;color:var(--primary);white-space:nowrap}
.hero-deal-link:hover{text-decoration:underline;text-underline-offset:2px}
.hero-deals-foot{
  margin:0;padding:.7rem 1.125rem;background:var(--muted);
  font-size:.6875rem;line-height:1.4;color:var(--muted-foreground);
}

/* ---- Section shell ----------------------------------------------------- */
.section{max-width:72rem;margin:0 auto;padding:3.25rem 1rem}
@media(min-width:640px){.section{padding-inline:1.5rem}}
@media(min-width:768px){.section{padding-block:4.25rem}}
.section-card{background:var(--card);border-block:1px solid var(--border);max-width:none}
.section-card > *{max-width:72rem;margin-inline:auto}
.section-card{padding-inline:1rem}
@media(min-width:640px){.section-card{padding-inline:1.5rem}}
@media(min-width:768px){.section-card{padding-inline:1.5rem}}
.section-muted{background:color-mix(in oklab,var(--muted) 55%,var(--background));border-block:1px solid var(--border);max-width:none}
.section-muted > *{max-width:72rem;margin-inline:auto}
.section-muted{padding-inline:1rem}
@media(min-width:640px){.section-muted{padding-inline:1.5rem}}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 1.5rem;margin-bottom:1.75rem}
.section-head h2{margin:0;font-size:clamp(1.5rem,3vw,1.875rem);letter-spacing:-.02em;line-height:1.15}
.section-head-center{justify-content:center;text-align:center}
.section-eyebrow{margin:0 0 .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.section-link{font-size:.875rem;font-weight:600;color:var(--primary);white-space:nowrap}
.section-link:hover{text-decoration:underline;text-underline-offset:3px}
.section-note{max-width:var(--text-measure);margin:1.75rem auto 0;text-align:center;font-size:.8125rem;line-height:1.6;color:var(--muted-foreground)}
.section-note a{color:var(--primary);font-weight:600}

/* ---- Rate label (shared by every card) --------------------------------- */
.deal-rate{
  display:flex;flex-direction:column;align-items:flex-end;gap:.05rem;
  font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.02em;
  color:var(--savings);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.deal-rate span{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.deal-rate.is-unknown{color:var(--muted-foreground)}
/* A referrer's share is not the reader's discount, so it is not drawn in the
   "you save" green. Same size, different colour, and a label that names the
   side of the program the number belongs to. */
.deal-rate.is-referrer{color:var(--primary)}
.deal-rate.is-referrer span{color:var(--primary)}
.hero-deal-rate.is-referrer,
.related-deal-rate.is-referrer,
.post-rail-rate.is-referrer{color:var(--primary)}
.post-rail-rate.is-referrer span{color:var(--primary)}
/* The compact rows show only a number, so a referrer share and a reader
   discount look identical. Where the money goes to the referrer, the basis is
   printed underneath the number instead of being left to the colour alone. */
.hero-deal-rate,.related-deal-rate{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.hero-deal-rate>.rate-basis,.related-deal-rate>.rate-basis{
  margin-top:.15rem;font-size:.5625rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--primary);white-space:nowrap;
}
.deal-rate-sm{font-size:1.25rem}
.deal-rate-sm span{font-size:.6875rem}
.type-chip{
  display:inline-block;padding:.1rem .4rem;border-radius:var(--r-sm);
  background:var(--muted);color:var(--muted-foreground);
  font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}

/* ---- Platform index ---------------------------------------------------- */
.platform-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.875rem}
@media(min-width:640px){.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.platform-card{
  display:flex;flex-direction:column;gap:.7rem;height:100%;
  padding:1.125rem;border:1px solid var(--border);border-radius:var(--card-radius);
  background:var(--card);color:inherit;box-shadow:var(--card-shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.platform-card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--primary) 32%,var(--border));box-shadow:0 18px 34px -22px rgb(15 23 42 / .45)}
.platform-card-head{display:flex;align-items:center;gap:.75rem;min-width:0}
.platform-card-id{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.platform-card-id h3{margin:0;font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.platform-card-offer{margin:0;font-size:.875rem;line-height:1.45;color:var(--muted-foreground)}
.platform-card-go{margin:auto 0 0;padding-top:.4rem;font-size:.75rem;font-weight:600;color:var(--primary)}
.platform-card:hover .platform-card-go{text-decoration:underline;text-underline-offset:3px}

/* ---- Steps ------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin:0;padding:0;list-style:none;counter-reset:step}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{
  position:relative;padding:1.5rem;border:1px solid var(--border);border-radius:var(--card-radius);
  background:var(--card);box-shadow:var(--card-shadow);
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;margin-bottom:.9rem;border-radius:var(--r-pill);
  background:var(--savings-soft);border:1px solid var(--savings-line);
  color:var(--savings-strong);font-size:.875rem;font-weight:600;
}
.step h3{margin:0 0 .4rem;font-size:1.0625rem;font-weight:600}
.step p{margin:0;font-size:.875rem;line-height:1.6;color:var(--muted-foreground)}

/* ---- Blog cards -------------------------------------------------------- */
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
@media(min-width:640px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.post-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post-grid-2{grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.post-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post-grid > li{list-style:none;display:flex}
.post-card{
  display:flex;flex-direction:column;width:100%;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--card-radius);
  background:var(--card);color:inherit;box-shadow:var(--card-shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.post-card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--primary) 30%,var(--border));box-shadow:0 20px 36px -24px rgb(15 23 42 / .45)}
.post-card-cover{position:relative;overflow:hidden;flex:0 0 auto;aspect-ratio:16/9;background:var(--muted)}
.post-card-body{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1rem 1.125rem;flex:1}
.post-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.post-chip{
  padding:.1rem .45rem;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-foreground);
  font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.post-card-meta{font-size:.6875rem;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.post-card-title{margin:0;font-size:var(--t-h3);font-weight:600;line-height:1.35;letter-spacing:-.01em}
.post-card:hover .post-card-title{color:var(--primary)}
.post-card-desc{margin:0;font-size:.8125rem;line-height:1.55;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:auto 0 0;padding-top:.65rem;border-top:1px solid var(--border);font-size:.6875rem}
.post-card-code{font-weight:600;color:var(--savings-strong)}
.post-card-go{font-weight:600;color:var(--primary);letter-spacing:.02em}

/* Featured card: same component, wide layout. */
.post-card-featured{grid-column:1/-1}
@media(min-width:768px){
  .post-card-featured{flex-direction:row;min-height:19rem}
  .post-card-featured .post-card-cover{flex:0 0 44%;aspect-ratio:auto;min-height:15rem}
  .post-card-featured .post-card-body{justify-content:center;padding:1.75rem}
  .post-card-featured .post-card-title{font-size:1.375rem;line-height:1.25}
  .post-card-featured .post-card-desc{font-size:.875rem;-webkit-line-clamp:4}
}

/* Hero image, cropped to fill the card. */
.post-cover-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.post-cover-img-lg{min-height:100%}

/* ---- Listing page ------------------------------------------------------ */
.page-wrap{max-width:72rem;margin:0 auto;padding:2rem 1rem 4rem}
@media(min-width:640px){.page-wrap{padding-inline:1.5rem}}
.page-head{max-width:44rem;margin-bottom:1.5rem}
.page-head h1{margin:0 0 .6rem;font-size:clamp(2rem,4vw,2.75rem);letter-spacing:-.03em;line-height:1.1}
.page-lede{margin:0;font-size:1rem;line-height:1.65;color:var(--muted-foreground)}
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.75rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.filter-chip{
  display:inline-flex;align-items:center;gap:.4rem;min-height:38px;padding:0 .85rem;
  border:1px solid var(--border);border-radius:var(--r-pill);background:var(--card);
  font-size:.8125rem;font-weight:600;color:var(--muted-foreground);
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.filter-chip span{font-size:.6875rem;font-weight:600;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.filter-chip:hover{border-color:var(--primary);color:var(--primary)}
.filter-chip.is-active{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.filter-chip.is-active span{color:rgb(255 255 255 / .7)}
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;margin-top:2.5rem}
.page-link{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 .8rem;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);
  font-size:.875rem;font-weight:600;color:var(--foreground);
}
.page-link:hover{border-color:var(--primary);color:var(--primary)}
.page-link.is-active{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.empty-state{padding:3rem 0;text-align:center;color:var(--muted-foreground)}

/* ---- Article layout ---------------------------------------------------- */
.post-article{max-width:72rem;margin:0 auto;padding:1.5rem 1rem 3.5rem}
@media(min-width:640px){.post-article{padding-inline:1.5rem}}
@media(min-width:1200px){
  .post-article{
    display:grid;grid-template-columns:minmax(0,720px) 280px;
    column-gap:3rem;justify-content:center;align-items:start;
  }
  .post-article > *{grid-column:1;min-width:0}
  .post-article > .post-aside{grid-column:2;grid-row:1 / span 200;position:sticky;top:5.5rem;margin:0;align-self:start}
}
.post-head{display:flex;flex-direction:column;gap:.5rem}
.post-title{margin:0 0 1.25rem;font-size:clamp(1.85rem,4vw,2.4rem);line-height:1.12;letter-spacing:-.03em;font-weight:600}
/* The covers are 1600x900, so the figure takes the same ratio and the image
   fills it edge to edge. An earlier fixed 280px height was clamping the
   <img> inside a taller figure and leaving a grey band underneath. */
.post-hero{position:relative;margin:0 0 1.75rem;overflow:hidden;aspect-ratio:16/9;height:auto;max-height:none;border:1px solid var(--border);border-radius:var(--card-radius);background:var(--muted)}
.post-hero-img{display:block;position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.post-body{font-size:1rem;line-height:1.72}
.post-body p{margin:0 0 1.25rem}
.post-body h2{margin:2.25rem 0 1rem;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.post-body h3{margin:1.5rem 0 .4rem;font-size:1.0625rem;font-weight:600}
.post-body ul,.post-body ol{margin:0 0 1.25rem;padding-left:1.2rem}
.post-body li{margin-bottom:.4rem}
.post-body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.post-body strong{font-weight:600}

/* A hostname printed in running text, linked by linkify_domains(). It has to
   read as a link in both the blog (inside .post-body) and the platform pages
   (plain <p> in .page-body), so the rule is not scoped to one of them. */
.prose-link{
  color:var(--primary);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
  overflow-wrap:anywhere;
}
.prose-link:hover{color:color-mix(in oklab,var(--primary) 80%,#000);text-decoration-thickness:2px}
@media (prefers-color-scheme: dark){
  /* Darkening a blue on a dark page only loses contrast. */
  .prose-link:hover{color:color-mix(in oklab,var(--primary) 82%,#fff)}
}

/* Table of contents */
.toc details{border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);overflow:hidden;box-shadow:var(--card-shadow)}
.toc summary{
  display:flex;align-items:center;gap:.5rem;padding:.8rem .9rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-foreground);cursor:pointer;list-style:none;
}
.toc summary::after{display:none}
.toc summary:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.toc-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.35rem;
  padding:0 .35rem;border-radius:var(--r-pill);background:var(--muted);
  font-size:.6875rem;letter-spacing:0;color:var(--muted-foreground);
}
.toc-chevron{width:1rem;height:1rem;margin-left:auto;transition:transform .18s ease;flex:0 0 auto}
.toc details[open] .toc-chevron{transform:rotate(180deg)}
.toc ol{display:flex;flex-direction:column;gap:.1rem;margin:0;padding:0 .55rem .7rem;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{
  display:flex;gap:.5rem;padding:.45rem .5rem;border-radius:var(--r-sm);
  font-size:.8125rem;line-height:1.4;color:var(--muted-foreground);text-decoration:none;
}
.toc a::before{content:counter(toc);font-size:.6875rem;font-weight:600;color:color-mix(in oklab,var(--muted-foreground) 70%,transparent);padding-top:.15rem;font-variant-numeric:tabular-nums}
.toc a:hover{background:var(--muted);color:var(--primary)}
@media(min-width:1200px){.post-article > .post-aside{margin-bottom:1rem}}

/* Quick answer */
.quick-answer{
  margin:0 0 2rem;padding:1.125rem;
  border:1px solid color-mix(in oklab,var(--brand) 26%,var(--border));
  border-left:4px solid var(--brand);border-radius:var(--r-lg);
  background:linear-gradient(180deg,color-mix(in oklab,var(--brand) 5%,var(--card)),var(--card));
}
.qa-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.85rem}
.qa-eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in oklab,var(--brand) 80%,#111)}
.qa-verified{font-size:.6875rem;font-weight:600;color:var(--savings-strong);background:var(--savings-soft);border:1px solid var(--savings-line);padding:.15rem .5rem;border-radius:var(--r-pill)}
.qa-main{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;align-items:end}
@media(min-width:560px){.qa-main{grid-template-columns:minmax(0,1fr) auto}}
.qa-code{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.qa-label{font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground)}
.qa-code .code-box{padding:.6rem .85rem;font-size:1.0625rem;font-weight:600;letter-spacing:.08em;justify-content:center;background:var(--card)}
.qa-linkonly{
  display:flex;align-items:center;min-height:2.9rem;padding:.5rem .75rem;
  border:1.5px dashed var(--border);border-radius:var(--r-md);background:var(--card);
  font-size:.875rem;color:var(--muted-foreground);
}
.qa-go{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  min-height:2.9rem;padding:0 1rem;border-radius:var(--r-md);
  background:var(--primary);color:var(--primary-foreground);
  font-size:.875rem;font-weight:600;white-space:nowrap;
}
.qa-go:hover{background:color-mix(in oklab,var(--primary) 88%,#000);color:var(--primary-foreground)}
.qa-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem;margin:1rem 0 0;padding-top:1rem;border-top:1px solid color-mix(in oklab,var(--brand) 18%,var(--border))}
@media(min-width:560px){.qa-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
.qa-facts div{min-width:0}
.qa-facts dt{font-size:.6875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-foreground)}
.qa-facts dd{margin:.2rem 0 0;font-size:.8125rem;line-height:1.45;font-weight:600}
.qa-warn{
  display:flex;align-items:flex-start;gap:.5rem;margin:1rem 0 0;padding:.65rem .75rem;
  border-radius:var(--r-md);background:color-mix(in oklab,var(--warning) 18%,var(--card));
  font-size:.75rem;line-height:1.5;color:var(--foreground);
}
.qa-warn svg{flex:0 0 auto;margin-top:.1rem;color:color-mix(in oklab,var(--warning) 70%,#7a4a00)}

/* FAQ accordion */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media(min-width:768px){.faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.faq-item{border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.faq-item + .faq-item{margin-top:0}
.faq-item summary{padding:.9rem 1rem;font-size:.9375rem;font-weight:600;line-height:1.4;cursor:pointer}
.faq-item summary::after{color:var(--muted-foreground)}
.faq-item[open] summary{color:var(--primary)}
.faq-answer{padding:0 1rem 1rem;font-size:.875rem;line-height:1.65;color:var(--muted-foreground)}
.faq-answer p{margin:0}
.post-body .faq-item{margin-bottom:.5rem}
.post-body .faq-answer p{margin-bottom:0}

/* The two answers that do not expire, at the foot of an article. They use the
   same accordion as the FAQ above so a reader learns one interaction, but the
   heading and the lede separate them: this is the "before you commit" block,
   not another question about the platform. */
.post-evergreen{margin:2.5rem 0 0;padding-top:1.75rem;border-top:1px solid var(--border)}
.post-evergreen-title{margin:0 0 .4rem;font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em}
.post-evergreen-lede{margin:0 0 1rem;font-size:.875rem;line-height:1.6;color:var(--muted-foreground)}
.post-evergreen .faq-answer p + p{margin-top:.7rem}

/* Emphasis boxes inside articles */
.note{margin:1.5rem 0;padding:.95rem 1.1rem;border-radius:var(--r-md);border:1px solid var(--border);font-size:.9375rem;line-height:1.62}
.post-body .note p{margin:0}
.note strong{font-weight:600}
.note-warn{background:oklch(97.5% .035 85);border-color:oklch(89% .07 85);color:oklch(31% .05 70)}
.note-warn strong{color:oklch(43% .11 62)}
.note-tip{background:var(--savings-soft);border-color:var(--savings-line);color:oklch(31% .05 156)}
.note-tip strong{color:var(--savings-strong)}
/* Neutral fact box: a program status that is neither a warning nor advice.
   Used where the honest answer is "the platform has not published this". */
.note-info{background:var(--muted);border-color:var(--border);color:var(--foreground)}
.note-info strong{color:var(--foreground)}

/* Tables */
.table-wrap{margin:0 0 1.5rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);overflow-x:auto;box-shadow:var(--card-shadow)}
.data-table{width:100%;min-width:32rem;border-collapse:collapse;font-size:.875rem;line-height:1.4}
.data-table-narrow{min-width:0}
@media(max-width:639px){
  .data-table{font-size:.8125rem}
  .data-table-narrow{min-width:0}
  .data-table th,.data-table td{padding:.6rem .75rem}
  .data-table caption{padding:.8rem .75rem .6rem}
  .data-table thead th{padding:.5rem .75rem}
}
.data-table caption{padding:.9rem 1rem .7rem;text-align:left;font-size:.8125rem;font-weight:600;color:var(--foreground)}
.data-table thead th{
  padding:.55rem 1rem;background:var(--muted);text-align:right;
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);
}
.data-table thead th:first-child{text-align:left}
.data-table th,.data-table td{padding:.7rem 1rem;border-top:1px solid var(--border);text-align:right;font-variant-numeric:tabular-nums}
.data-table th[scope="row"]{text-align:left;font-weight:600}
.data-table tbody tr:hover{background:color-mix(in oklab,var(--muted) 55%,transparent)}
.table-note{margin:-.9rem 0 1.5rem;font-size:.75rem;line-height:1.55;color:var(--muted-foreground)}
.post-body .table-wrap table{display:table;white-space:normal}

/* Related modules at the end of an article */
.post-module{margin:2.5rem 0 0;padding-top:1.75rem;border-top:1px solid var(--border)}
.post-module-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.post-module-head h2{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.post-module-head a{font-size:.8125rem;font-weight:600;color:var(--primary);white-space:nowrap}
.related-deals{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;margin:0;padding:0;list-style:none}
@media(min-width:520px){.related-deals{grid-template-columns:repeat(3,minmax(0,1fr))}}
.related-deal{
  display:flex;align-items:center;gap:.6rem;height:100%;padding:.75rem;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);
  color:inherit;transition:border-color .15s ease,transform .15s ease;
}
.related-deal:hover{border-color:var(--primary);transform:translateY(-1px)}
.related-deal-id{display:flex;flex-direction:column;min-width:0;flex:1}
.related-deal-name{font-size:.875rem;font-weight:600}
.related-deal-offer{font-size:.6875rem;line-height:1.35;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.related-deal-rate{font-size:1rem;font-weight:600;color:var(--savings);font-variant-numeric:tabular-nums}

/* Author box */
.author-box{
  display:flex;gap:1rem;align-items:flex-start;margin:2.5rem 0 0;padding:1.25rem;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--muted);
}
.author-avatar{width:3.5rem;height:3.5rem;flex:0 0 auto;border-radius:var(--r-pill);background:#fff;object-fit:contain;padding:.3rem;border:1px solid var(--border)}
.author-name{margin:0;font-size:.9375rem;font-weight:600}
.author-title{margin:.15rem 0 .45rem;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--primary)}
.author-role{margin:.25rem 0 .45rem;font-size:.8125rem;line-height:1.55;color:var(--muted-foreground)}
.author-links{margin:0;font-size:.75rem;font-weight:600}
.author-links a{color:var(--primary)}
.author-links a:hover{text-decoration:underline;text-underline-offset:2px}

/* ---- Deal cards (/codes) ---------------------------------------------- */
.deal-card{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--card-radius);
  background:var(--card);box-shadow:var(--card-shadow);
  transition:transform .16s ease,box-shadow .16s ease;
}
.deal-card:hover{transform:translateY(-2px);box-shadow:0 20px 38px -26px rgb(15 23 42 / .5)}
.deal-card-bar{height:.3rem;background:linear-gradient(90deg,var(--savings),var(--primary))}
.deal-card-inner{display:flex;flex-direction:column;gap:.7rem;padding:1.35rem;flex:1}
.deal-card-head{display:flex;align-items:center;gap:.8rem;min-width:0}
.deal-card-id{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.deal-card-id h2{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal-card-offer{margin:0;font-size:1rem;font-weight:600;line-height:1.4}
.deal-card-desc{margin:0;font-size:.8125rem;line-height:1.6;color:var(--muted-foreground)}
.deal-card-link{align-self:flex-start;font-size:.75rem;font-weight:600;color:var(--primary)}
.deal-card-link:hover{text-decoration:underline;text-underline-offset:2px}
.deal-card-foot{display:flex;flex-direction:column;gap:.7rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--border)}
.deal-card-meta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.6875rem}
.deal-meta-item{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted-foreground)}
.deal-meta-item.is-verified{color:var(--savings-strong);font-weight:600}

/* Top-picks strip on the home page (kept for parity, now rate-first) */
.featured-card{display:flex;flex-direction:column;gap:.7rem;height:100%;padding:1.15rem;border:1px solid var(--border);border-radius:var(--card-radius);background:var(--card);box-shadow:var(--card-shadow)}
.featured-card-head{display:flex;align-items:center;gap:.7rem;min-width:0}
.featured-card-id{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.featured-card-name{margin:0;font-size:.9375rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.featured-card-offer{margin:0;font-size:.8125rem;line-height:1.45;color:var(--muted-foreground)}
.featured-card-foot{display:flex;flex-direction:column;gap:.55rem;margin-top:auto;padding-top:.75rem}
.featured-card-link{text-align:center;font-size:.75rem;font-weight:600;color:var(--primary)}
.featured-card-link:hover{text-decoration:underline;text-underline-offset:2px}

/* ---- Home page basics + CTA ------------------------------------------- */
.basics{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}
@media(min-width:900px){.basics{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:3.5rem}}
.basics h2{margin:0 0 1rem;font-size:clamp(1.5rem,3vw,1.875rem);letter-spacing:-.02em}
.basics p{line-height:1.7;color:var(--muted-foreground);margin:0 0 1rem}
.basics a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.basics-aside{border:1px solid var(--border);border-radius:var(--card-radius);background:var(--card);padding:1.4rem;box-shadow:var(--card-shadow)}
.basics-aside h3{margin:0 0 .85rem;font-size:.9375rem;font-weight:600}
.basics-link{margin:1rem 0 0;font-size:.8125rem;font-weight:600}
.checklist{display:flex;flex-direction:column;gap:.55rem;margin:0;padding:0;list-style:none}
.checklist li{position:relative;padding-left:1.4rem;font-size:.8125rem;line-height:1.5;color:var(--muted-foreground)}
.checklist li::before{
  content:"";position:absolute;left:0;top:.35rem;width:.55rem;height:.3rem;
  border-left:2px solid var(--savings);border-bottom:2px solid var(--savings);
  transform:rotate(-45deg);
}
.cta-band{
  position:relative;overflow:hidden;padding:2.5rem 1.5rem;text-align:center;border-radius:var(--r-lg);
  background:linear-gradient(140deg,var(--primary-dark),var(--primary));color:#fff;
}
.cta-band::after{content:"";position:absolute;left:50%;bottom:-14rem;width:34rem;height:22rem;transform:translateX(-50%);border-radius:var(--r-pill);background:radial-gradient(closest-side,rgb(255 255 255 / .18),transparent);pointer-events:none}
.cta-band h2{position:relative;margin:0 0 .6rem;font-size:clamp(1.5rem,3vw,1.875rem);letter-spacing:-.02em}
.cta-band p{position:relative;max-width:34rem;margin:0 auto 1.5rem;font-size:.9375rem;line-height:1.65;color:rgb(255 255 255 / .85)}
.cta-band .btn{position:relative}

/* ---- Header CTA -------------------------------------------------------- */
.header-cta{
  display:none;align-items:center;justify-content:center;gap:.35rem;
  min-height:38px;padding:0 1rem;border-radius:var(--r-md);
  background:var(--savings);color:var(--on-savings);font-size:.8125rem;font-weight:600;white-space:nowrap;
  transition:background-color .15s ease;
}
.header-cta:hover{background:var(--savings-dark);color:var(--on-savings)}
@media(min-width:640px){.header-cta{display:inline-flex}}

/* ---- Footer ------------------------------------------------------------ */
.site-footer{margin-top:auto;border-top:1px solid var(--border);background:var(--card);padding:3rem 0 2rem}
.footer-inner{max-width:72rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.footer-inner{padding:0 1.5rem}}
.footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
@media(max-width:899px){
  .footer-brand{order:1}
  .footer-col-platforms{order:2;grid-column:1/-1}
  .footer-col:not(.footer-col-platforms){order:3}
  .footer-platforms{columns:2;column-gap:1.5rem}
}
@media(min-width:640px)and (max-width:899px){.footer-col .footer-platforms{columns:3}}
@media(min-width:900px){.footer-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem}}
.footer-brand{grid-column:1/-1}
@media(min-width:900px){.footer-brand{grid-column:auto}}
.footer-brand-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.65rem}
.footer-brand-head span{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em}
.footer-brand p{margin:0;max-width:24rem;font-size:.8125rem;line-height:1.6;color:var(--muted-foreground)}
.footer-col h2{margin:0 0 .35rem;font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-foreground)}
.footer-col ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.footer-col li{margin:0}
.footer-col a{display:inline-flex;align-items:center;min-height:2.25rem;font-size:.8125rem;color:var(--foreground);text-decoration:none}
.footer-col a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.footer-col .footer-platforms{columns:2;column-gap:1rem;display:block}
.footer-platforms li{break-inside:avoid}
.footer-disclosure{max-width:52rem;margin:2.25rem 0 0;font-size:.75rem;line-height:1.6;color:var(--muted-foreground)}
.footer-disclosure a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.6875rem;color:var(--muted-foreground)}

/* Small screens: keep the hero panel from crowding the fold. */
@media(max-width:1023px){
  .hero h1{max-width:none}
  .hero-deals{max-width:29rem}
}
@media(prefers-reduced-motion:reduce){
  .platform-card,.post-card,.deal-card,.related-deal{transition:none}
  .platform-card:hover,.post-card:hover,.deal-card:hover,.related-deal:hover{transform:none}
}

/* ---- Inline code (URLs, wallet addresses) ------------------------------ */
.inline-code{
  display:inline;padding:.08em .32em;border-radius:var(--r-sm);
  background:var(--muted);border:1px solid var(--border);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.82em;
  overflow-wrap:anywhere;word-break:break-word;user-select:all;
  -webkit-user-select:all;
}
.inline-url{
  background:color-mix(in oklab,var(--primary) 6%,var(--card));
  border-color:color-mix(in oklab,var(--primary) 22%,var(--border));
  color:color-mix(in oklab,var(--primary) 85%,var(--foreground));
}
.post-body a .inline-code{color:inherit}

/* ---- Small-screen tuning ----------------------------------------------- */
@media(max-width:639px){
  .hero-inner{padding:2rem 1rem 2.5rem;gap:1.75rem}
  .hero h1{font-size:2.25rem;margin-bottom:.85rem}
  .hero-lede{font-size:1rem;margin-bottom:1.4rem}
  .hero-cta{margin-bottom:1.6rem;gap:.6rem}
  .hero-cta .btn{flex:1 1 auto;min-height:46px;padding:0 1rem;font-size:.9375rem}
  .hero-stats{gap:1rem 1.5rem}
  .hero-stats dt{font-size:.6875rem}
  .hero-stats dd{font-size:1.0625rem}
  .hero-deals-head{padding:.85rem 1rem .7rem}
  .hero-deal{padding:.8rem 1rem}
  .post-title{font-size:1.7rem}
  .quick-answer{padding:1rem}
  .qa-facts{gap:.55rem}
  .toc{margin-block:.25rem .5rem}
}

/* ==========================================================================
   Dark mode
   --------------------------------------------------------------------------
   Follows the operating system with prefers-color-scheme, so there is still no
   JavaScript and no toggle to persist. The token block flips the surfaces; the
   handful of rules below cover the few places a component painted its own
   white plate or used a fixed dark ink. Light mode output is unchanged:
   --card is white there, so every color-mix() above resolves identically.
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --background:oklch(16.5% .018 258);
    --foreground:oklch(96% .008 255);
    --card:oklch(20.5% .022 258);
    --card-foreground:oklch(96% .008 255);
    --popover:oklch(20.5% .022 258);
    --popover-foreground:oklch(96% .008 255);
    --primary:oklch(74% .14 258);
    --primary-foreground:oklch(15% .03 262);
    --primary-dark:oklch(23% .08 266);
    --primary-light:oklch(33% .11 255);
    --secondary:oklch(31% .05 240);
    --secondary-foreground:oklch(93% .02 240);
    --secondary-light:oklch(36% .05 240);
    --muted:oklch(24.5% .02 258);
    --muted-foreground:oklch(75% .018 255);
    --accent:oklch(27% .03 258);
    --accent-foreground:oklch(92% .03 258);
    --destructive:oklch(74% .16 27);
    --destructive-foreground:oklch(16% .02 27);
    --border:oklch(31% .02 258);
    --input:oklch(34% .02 258);
    --ring:oklch(74% .14 258);
    --success:oklch(76% .14 155);
    --success-foreground:oklch(15% .03 155);
    --warning:oklch(80% .14 85);
    --warning-foreground:oklch(20% .04 85);
    --savings:oklch(78% .15 156);
    --savings-dark:oklch(85% .12 156);
    --savings-strong:oklch(84% .13 156);
    --savings-soft:oklch(27% .055 156);
    --savings-line:oklch(38% .08 156);
    --on-savings:oklch(17% .04 156);
    --card-shadow:0 1px 2px rgb(0 0 0 / .5),0 12px 28px -20px rgb(0 0 0 / .8);
  }

  /* Brand surfaces keep white type, so they stay deep navy instead of taking
     the brighter interactive blue. */
  .hero{background:linear-gradient(146deg,oklch(21% .07 266) 0%,oklch(30% .11 262) 52%,oklch(38% .12 255) 100%)}
  .hero::after{background:radial-gradient(closest-side,rgb(34 197 94 / .22),transparent 70%)}
  .cta-band{background:linear-gradient(140deg,oklch(21% .07 266),oklch(31% .11 262))}

  /* Callouts and the quick-answer plate. */
  .note-warn{background:oklch(28% .045 85);border-color:oklch(40% .07 85);color:oklch(92% .03 85)}
  .note-warn strong{color:oklch(86% .1 80)}
  .note-tip{color:oklch(90% .04 156)}
  .qa-eyebrow{color:color-mix(in oklab,var(--brand) 55%,#fff)}
  .qa-warn svg{color:var(--warning)}
  .quick-answer{border-left-color:color-mix(in oklab,var(--brand) 55%,#fff)}

  /* A selected filter uses the bright primary, so its count needs ink, not
     translucent white. */
  .filter-chip.is-active span{color:color-mix(in oklab,var(--primary-foreground) 70%,transparent)}

  /* Hero and cover art are images with light edges; a soft border separates
     them from the dark page without dimming the content. */
  .post-hero{border-color:var(--border)}
}

/* ==========================================================================
   Brand marks, the journal index and the article rail
   --------------------------------------------------------------------------
   Three pieces added together because they are one idea: show the platform's
   own mark, give the writing a reading order, and keep the referral link and
   the site's own pages next to the text instead of at the end of a scroll.
   ========================================================================== */

/* ---- Platform marks -----------------------------------------------------
   Every mark is the platform's own icon, stored at 128x128 and flattened onto
   white, so a transparent favicon and a full-bleed one occupy the same plate.
   The ring keeps a white logo from dissolving into a white card. */
.brand-mark{
  display:inline-grid;place-items:center;flex:0 0 auto;
  overflow:hidden;background:color-mix(in oklab,var(--brand) 8%,#fff);
  box-shadow:inset 0 0 0 1px rgb(15 23 42 / .12),0 1px 2px rgb(15 23 42 / .10);
  transition:box-shadow .15s ease;
}
.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}
.brand-mark > span{
  display:grid;place-items:center;width:100%;height:100%;
  background:var(--brand);color:#fff;
  font-size:.75rem;font-weight:600;letter-spacing:.02em;
}
.brand-mark-sm{width:2.25rem;height:2.25rem;border-radius:var(--r-md)}
.brand-mark-md{width:2.5rem;height:2.5rem;border-radius:var(--r-md)}
.brand-mark-lg{width:2.75rem;height:2.75rem;border-radius:var(--r-md)}
.brand-mark-xl{width:3rem;height:3rem;border-radius:var(--r-md)}
a:hover > .brand-mark,
.platform-card:hover .brand-mark,
.entry:hover .brand-mark{box-shadow:inset 0 0 0 1px rgb(15 23 42 / .18),0 3px 8px -2px rgb(15 23 42 / .25)}

/* ---- Journal head ------------------------------------------------------
   The listing opens on a deep band so /blog announces itself as a section
   rather than a page of cards. Same grid texture as the home hero, one shade
   quieter, so the two pages belong to one site. */
.journal-head{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(146deg,var(--primary-dark) 0%,var(--primary) 52%,var(--primary-light) 100%);
}
.journal-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgb(255 255 255 / .06) 1px,transparent 1px),
    linear-gradient(90deg,rgb(255 255 255 / .06) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 100% at 15% 0%,#000 15%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 15% 0%,#000 15%,transparent 78%);
}
.journal-head::after{
  content:"";position:absolute;right:-8rem;top:-14rem;width:34rem;height:34rem;
  border-radius:var(--r-pill);pointer-events:none;
  background:radial-gradient(closest-side,rgb(34 197 94 / .22),transparent 70%);
}
.journal-head-inner{
  position:relative;z-index:1;max-width:72rem;margin:0 auto;
  padding:2.75rem 1rem 3rem;
}
@media(min-width:640px){.journal-head-inner{padding-inline:1.5rem}}
@media(min-width:768px){.journal-head-inner{padding-block:3.5rem 3.75rem}}
.journal-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:rgb(255 255 255 / .68);
}
.journal-eyebrow span{width:.4rem;height:.4rem;border-radius:var(--r-pill);background:var(--savings);box-shadow:0 0 0 4px rgb(255 255 255 / .1)}
.journal-title{
  margin:0 0 1rem;max-width:20ch;
  font-size:clamp(2.1rem,5vw,3.35rem);line-height:1.02;font-weight:600;letter-spacing:-.035em;
  text-wrap:balance;
}
.journal-lede{max-width:54ch;margin:0 0 1.9rem;font-size:1.0625rem;line-height:1.62;color:rgb(255 255 255 / .82)}
.journal-stats{
  display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin:0;padding-top:1.15rem;
  border-top:1px solid rgb(255 255 255 / .18);
}
.journal-stats div{display:flex;flex-direction:column;gap:.18rem}
.journal-stats dt{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255 / .55)}
.journal-stats dd{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ---- Listing shell ------------------------------------------------------ */
.journal-wrap{padding-top:0}
.journal-wrap > .filter-bar{margin-top:1.75rem}
.journal-lead-wrap{margin:0 0 2.5rem}

.journal-lead{
  display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);
  color:inherit;box-shadow:var(--card-shadow);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.journal-lead:hover{border-color:color-mix(in oklab,var(--primary) 30%,var(--border));box-shadow:0 24px 44px -30px rgb(15 23 42 / .55)}
@media(min-width:900px){.journal-lead{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}}
.journal-lead-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--muted)}
@media(min-width:900px){.journal-lead-media{aspect-ratio:auto;min-height:100%}}
.journal-lead-media .post-cover-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.journal-lead:hover .journal-lead-media .post-cover-img{transform:scale(1.035)}
.journal-lead-tag{
  position:absolute;top:.9rem;left:.9rem;z-index:1;
  padding:.34rem .62rem;border-radius:var(--r-pill);
  background:rgb(8 12 26 / .72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.journal-lead-body{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem}
@media(min-width:900px){.journal-lead-body{padding:2.25rem;justify-content:center}}
.journal-lead-title{
  margin:0;font-size:clamp(1.5rem,2.5vw,1.95rem);line-height:1.16;
  letter-spacing:-.028em;font-weight:600;text-wrap:pretty;
}
.journal-lead:hover .journal-lead-title{color:var(--primary)}
.journal-lead-desc{
  font-size:.9375rem;line-height:1.62;color:var(--muted-foreground);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.journal-lead-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.35rem;padding-top:.85rem;border-top:1px solid var(--border);
}
.journal-lead-go{font-size:.875rem;font-weight:600;color:var(--primary);white-space:nowrap}
.journal-lead:hover .journal-lead-go{text-decoration:underline;text-underline-offset:3px}

/* Shared kicker used by the lead and the rows. */
.entry-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.6875rem;font-weight:600;color:var(--muted-foreground)}
.entry-cat{
  padding:.1rem .42rem;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-foreground);
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.entry-dot{width:3px;height:3px;border-radius:var(--r-pill);background:currentColor;opacity:.4}
.entry-code{font-size:.6875rem;font-weight:600;color:var(--savings-strong)}
.entry-code code{
  margin-left:.15rem;padding:.1rem .32rem;border-radius:var(--r-sm);
  background:var(--muted);border:1px solid var(--border);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6875rem;letter-spacing:.03em;
}

/* ---- Index rows --------------------------------------------------------
   A numbered, hairline-separated list. Twelve boxes in a grid all shout at
   once; twelve rows can be scanned, compared and remembered by position. */
.journal-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 .35rem}
.journal-section-head h2{margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)}
.journal-section-head p{margin:0;font-size:.6875rem;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.journal-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.entry-item{
  display:grid;grid-template-columns:2.1rem minmax(0,1fr);gap:.75rem;
  padding:1.15rem 0;border-bottom:1px solid var(--border);align-items:start;
}
@media(min-width:640px){.entry-item{grid-template-columns:3rem minmax(0,1fr);gap:1.25rem;padding:1.4rem 0}}
.entry-no{
  padding-top:.25rem;font-size:.75rem;font-weight:600;letter-spacing:.04em;
  color:color-mix(in oklab,var(--muted-foreground) 50%,transparent);
  font-variant-numeric:tabular-nums;
}
.entry{display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem;color:inherit;min-width:0}
@media(min-width:640px){.entry{grid-template-columns:11.5rem minmax(0,1fr);gap:1.35rem;align-items:start}}
.entry-media{
  display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--muted);
}
.entry-media .post-cover-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.entry:hover .entry-media .post-cover-img{transform:scale(1.045)}
.entry-body{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.entry-title{margin:0;font-size:1.0625rem;line-height:1.34;letter-spacing:-.014em;font-weight:600;text-wrap:pretty}
@media(min-width:640px){.entry-title{font-size:1.1875rem}}
.entry:hover .entry-title{color:var(--primary)}
.entry-desc{
  font-size:.8125rem;line-height:1.58;color:var(--muted-foreground);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.entry-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.3rem;padding-top:.6rem;border-top:1px dashed var(--border);
}
.entry-go{font-size:.6875rem;font-weight:600;color:var(--primary);white-space:nowrap}

/* ---- Cross-link band ---------------------------------------------------- */
.journal-cross{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin:2.75rem 0 0;padding:1.25rem 1.5rem;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--muted);
}
.journal-cross-eyebrow{margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--savings-strong)}
.journal-cross-copy{margin:.2rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted-foreground)}
.journal-cross-go{
  display:inline-flex;align-items:center;gap:.4rem;min-height:42px;padding:0 1.1rem;
  border-radius:var(--r-md);background:var(--savings);color:var(--on-savings);
  font-size:.8125rem;font-weight:600;white-space:nowrap;
}
.journal-cross-go:hover{background:var(--savings-dark);color:var(--on-savings)}

/* ---- Article header ---------------------------------------------------- */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:0 0 1rem}
.post-meta > span:first-child{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .55rem;border-radius:var(--r-pill);
  background:var(--primary);color:var(--primary-foreground);
  font-size:.6875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
}
.post-meta > span:last-child{font-size:.75rem;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.post-article .post-title{
  max-width:26ch;margin:0 0 1rem;
  font-size:clamp(1.95rem,4.4vw,2.85rem);line-height:1.08;letter-spacing:-.035em;
  text-wrap:balance;
}
.post-standfirst{max-width:62ch;margin:0 0 1.6rem;font-size:1.0625rem;line-height:1.62;color:var(--muted-foreground)}

/* Cover: the full 16:9 artwork, with the code over a scrim. */
.post-hero{
  position:relative;margin:0 0 1.6rem;overflow:hidden;
  aspect-ratio:16/9;max-height:none;height:auto;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--muted);
}
.post-hero .post-hero-img{display:block;position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.post-hero-tag{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .9rem;
  padding:2.2rem .9rem .75rem;
  background:linear-gradient(to top,rgb(6 10 24 / .84),rgb(6 10 24 / 0));
  color:#fff;font-size:.6875rem;
}
.post-hero-code{font-weight:600;letter-spacing:.02em}
.post-hero-code b{
  margin-left:.25rem;padding:.14rem .42rem;border-radius:var(--r-sm);
  background:rgb(255 255 255 / .18);border:1px solid rgb(255 255 255 / .3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;letter-spacing:.06em;
}
.post-hero-check{font-weight:600;color:rgb(255 255 255 / .78);font-variant-numeric:tabular-nums}

/* ---- Article rail ------------------------------------------------------
   Sticky on wide screens only: the TOC and the deal card share one column,
   so the reader can reach the referral link or jump sections without
   scrolling back.
   On a phone there is no second column, so the same card renders as a normal
   block above the prose. It has to: the code now lives here and nowhere else
   in the article, and hiding it below 1200px would leave mobile readers with
   no code at all. */
.post-aside{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.post-rail{
  display:block;padding:1rem;border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--card);box-shadow:var(--card-shadow);
}
.post-rail-head{display:flex;align-items:center;gap:.6rem;min-width:0}
.post-rail-id{min-width:0;flex:1}
.post-rail-name{margin:0;font-size:.9375rem;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-rail-type{margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-foreground)}
.post-rail-rate{display:flex;flex-direction:column;align-items:flex-end;font-size:1.1875rem;font-weight:600;line-height:1;color:var(--savings);font-variant-numeric:tabular-nums}
.post-rail-rate span{font-size:.6875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-foreground)}
.post-rail-offer{margin:.7rem 0 .65rem;font-size:.75rem;line-height:1.45;color:var(--muted-foreground)}
.post-rail-go{
  display:flex;align-items:center;justify-content:center;gap:.3rem;min-height:40px;
  border-radius:var(--r-md);background:var(--savings);color:var(--on-savings);
  font-size:.8125rem;font-weight:600;text-align:center;
}
.post-rail-go:hover{background:var(--savings-dark);color:var(--on-savings)}
.post-rail-host{margin:.35rem 0 0;text-align:center;font-size:.6875rem;color:var(--muted-foreground)}
.post-rail-links{display:flex;flex-direction:column;margin:.8rem 0 0;padding-top:.6rem;border-top:1px solid var(--border)}
.post-rail-links a{padding:.36rem 0;font-size:.8125rem;font-weight:600;color:var(--primary);text-decoration:none}
.post-rail-links a:hover{text-decoration:underline;text-underline-offset:2px}
.post-rail-note{margin:.55rem 0 0;font-size:.6875rem;line-height:1.5;color:var(--muted-foreground)}

/* ---- Quick-answer internal links --------------------------------------- */
.qa-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  margin:.85rem 0 0;font-size:.75rem;color:var(--muted-foreground);
}
.qa-links span:first-child{font-weight:600;color:var(--foreground)}
.qa-links a{font-weight:600;color:var(--primary);text-decoration:underline;text-underline-offset:2px}

/* ---- End-of-article referral panel ------------------------------------- */
.deal-box{
  margin:2rem 0;padding:1.25rem;
  border:1px solid color-mix(in oklab,var(--brand) 24%,var(--border));
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,color-mix(in oklab,var(--brand) 7%,var(--card)),var(--card));
}
.deal-box-head{display:flex;align-items:center;gap:.75rem;min-width:0}
.deal-box-id{min-width:0;flex:1}
.deal-box-eyebrow{margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in oklab,var(--brand) 72%,var(--foreground))}
.deal-box-title{margin:.15rem 0 0;font-size:1.1rem;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.deal-box-rate{display:flex;flex-direction:column;align-items:flex-end;font-size:1.5rem;font-weight:600;line-height:1;color:var(--savings);font-variant-numeric:tabular-nums}
.deal-box-rate span{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.deal-box-offer{margin:.85rem 0 .3rem;font-size:.9375rem;font-weight:600;line-height:1.4}
.deal-box-code{margin:0 0 1rem;font-size:.8125rem;line-height:1.6;color:var(--muted-foreground)}
.deal-box-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
@media(min-width:520px){.deal-box-actions{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.deal-box-go{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.05rem;
  min-height:52px;padding:.5rem .85rem;border-radius:var(--r-md);
  background:var(--savings);color:var(--on-savings);
}
.deal-box-go:hover{background:var(--savings-dark);color:var(--on-savings)}
.deal-box-go span{font-size:.875rem;font-weight:600;line-height:1.2}
.deal-box-go small{font-size:.6875rem;font-weight:600;opacity:.82}
.deal-box-alt{
  display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:52px;padding:.5rem .8rem;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);
  font-size:.8125rem;font-weight:600;color:var(--primary);text-align:center;
}
.deal-box-alt:hover{border-color:var(--primary)}
.deal-box-note{
  margin:.9rem 0 0;padding-top:.75rem;border-top:1px solid var(--border);
  font-size:.6875rem;line-height:1.65;color:var(--muted-foreground);
}
.deal-box-note a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---- Article typography ------------------------------------------------
   Numbered section headings and a drop cap are the two signals that separate
   a guide from a page of paragraphs; both are pure CSS on existing markup. */
.post-body{counter-reset:section}
.post-body > h2{display:flex;align-items:baseline;gap:.55rem;font-size:1.375rem;letter-spacing:-.025em}
.post-body > h2::before{
  content:counter(section,decimal-leading-zero);counter-increment:section;
  flex:0 0 auto;font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  color:var(--savings);font-variant-numeric:tabular-nums;
}
.post-body > p:first-of-type::first-letter{
  float:left;margin:.08em .12em 0 0;
  font-size:3.15rem;line-height:.82;font-weight:600;letter-spacing:-.03em;
  color:var(--primary);
}
.post-body a{text-underline-offset:2.5px;text-decoration-thickness:1px}
.post-body a:hover{color:color-mix(in oklab,var(--primary) 80%,#000)}

@media(max-width:639px){
  .post-article .post-title{font-size:1.72rem}
  .post-standfirst{font-size:1rem;margin-bottom:1.35rem}
  .post-hero-tag{padding:1.8rem .7rem .6rem;font-size:.6875rem}
  .post-body > h2{font-size:1.1875rem}
  .post-body > p:first-of-type::first-letter{font-size:2.6rem}
  .journal-title{font-size:2rem}
  .journal-lede{font-size:1rem}
  .journal-head-inner{padding:2.1rem 1rem 2.4rem}
  .journal-stats{gap:1.25rem 1.75rem}
  .journal-stats dd{font-size:.9375rem}
  .journal-cross{padding:1.1rem 1.15rem}
  .journal-cross-go{width:100%;justify-content:center}
  .deal-box{padding:1.05rem;border-radius:var(--r-lg)}
  .deal-box-head{gap:.6rem}
  .deal-box-title{font-size:1rem}
  .deal-box-rate{font-size:1.25rem}
}

@media(prefers-reduced-motion:reduce){
  .journal-lead-media .post-cover-img,
  .entry-media .post-cover-img{transition:none}
  .journal-lead:hover .journal-lead-media .post-cover-img,
  .entry:hover .entry-media .post-cover-img{transform:none}
}

@media (prefers-color-scheme: dark){
  /* The white plate is intentional in both themes: these are the platforms'
     own icons, and a dark tile would bury the darker ones. */
  .brand-mark{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16),0 1px 2px rgb(0 0 0 / .5)}
  .journal-head::after{background:radial-gradient(closest-side,rgb(34 197 94 / .18),transparent 70%)}
  .journal-lead-tag{background:rgb(4 6 16 / .78)}
  .deal-box-eyebrow{color:color-mix(in oklab,var(--brand) 55%,#fff)}
  .journal-cross{background:color-mix(in oklab,var(--muted) 70%,var(--background))}
}

/* ==========================================================================
   Consistency pass
   --------------------------------------------------------------------------
   One container, one gap, one radius scale, one type scale.

   The site grew two content widths (1104px for the hero and 1152px for the
   card grids) because full-bleed sections padded themselves and then let their
   children grow to the container width. Everything below derives from
   --container and --gutter instead, so the left edge is the same on every
   section at every viewport.
   ========================================================================== */

:root{
  --container:72rem;          /* 1152px outer, 1104px content at 1.5rem gutters */
  --gutter:1rem;
  --gap-card:1.25rem;         /* one gap for every card grid */

  /* Four radii, not nine. */
  --r-sm:6px;                 /* inline chips, code boxes */
  --r-md:10px;                /* buttons, inputs, small panels */
  --r-lg:16px;                /* cards, media, accordions */
  --r-pill:999px;

  /* Eight type steps, nothing below 11px. */
  --t-2xs:0.6875rem;          /* 11px - uppercase micro labels */
  --t-xs:0.75rem;             /* 12px */
  --t-sm:0.8125rem;           /* 13px */
  --t-base:0.875rem;          /* 14px */
  --t-md:0.9375rem;           /* 15px */
  --t-lg:1.0625rem;           /* 17px */
  --t-xl:1.25rem;             /* 20px */
  --t-2xl:1.875rem;           /* 30px - every section H2 */

  --card-radius:var(--r-lg);
  --radius:var(--r-md);
  --radius-2xl:var(--r-lg);
}
@media(min-width:640px){:root{--gutter:1.5rem}}

/* Compile-time utility radii, mapped onto the same scale. */
.rounded-md{border-radius:var(--r-sm)}
.rounded-lg{border-radius:var(--r-md)}
.rounded-xl,.rounded-2xl{border-radius:var(--r-lg)}
.rounded-full{border-radius:var(--r-pill)}

/* ---- One container ----------------------------------------------------- */
.site-container,
.hero-inner,
.section,
.page-wrap,
.journal-head-inner,
.footer-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* Full-bleed bands: pad by the gutter outside the container, so their content
   lines up with the padded sections instead of overflowing them. */
.section-card,
.section-muted{
  max-width:none;
  padding-inline:max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  background-clip:padding-box;
}
.section-card > *,
.section-muted > *{max-width:none;margin-inline:0}
.section-muted{background:color-mix(in oklab,var(--muted) 55%,var(--background))}

.breadcrumb-bar{padding-block:1.5rem 0}
.site-header-inner{display:flex;align-items:center;gap:1rem;min-height:4rem}
@media(min-width:768px){.site-header-inner{min-height:4.5rem}}
.site-brand{display:flex;align-items:center;gap:.625rem;margin-right:auto;text-decoration:none}
.site-brand-name{font-size:1.125rem;font-weight:600;letter-spacing:-.02em}

/* ---- One gap ----------------------------------------------------------- */
.platform-grid{gap:var(--gap-card)}
.post-grid{gap:var(--gap-card)}
@media(min-width:1024px){
  /* 13 cards in 3 columns leaves one orphan. Centre it in the middle column
     so the last row reads as a deliberate half-row, not a layout accident. */
  .platform-grid > :last-child:nth-child(3n + 1){grid-column:2}
}
@media(min-width:640px) and (max-width:1023px){
  .platform-grid > :last-child:nth-child(2n + 1){
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - var(--gap-card) / 2);
  }
}

/* ---- Section rhythm ---------------------------------------------------- */
.section-head{margin-bottom:1.75rem}
.section-head h2,
.basics h2,
.codes-section h2{
  margin:0;
  font-size:clamp(1.5rem,3vw,var(--t-2xl));
  letter-spacing:-.02em;
  line-height:1.15;
}
/* The CTA is a band inside the page, not a new page: drop its top padding so
   FAQ and CTA do not stack two 68px paddings into one 136px hole. */
.section-cta{padding-block:0 4.25rem}
@media(max-width:767px){.section-cta{padding-block:0 3.25rem}}
.cta-band h2{font-size:clamp(1.5rem,3vw,var(--t-2xl))}

/* Eyebrows are blue everywhere; the muted grey one on "The basics" was an
   accident of inheritance, not a hierarchy signal. */
.section-eyebrow{color:var(--primary)}

/* ---- Components -------------------------------------------------------- */
/* Category chips size to their text instead of stretching under a flex column. */
.type-chip{
  align-self:flex-start;
  width:fit-content;
  border-radius:var(--r-pill);
  padding:.12rem .5rem;
}
.post-chip{border-radius:var(--r-pill)}

/* Every platform mark sits on the same white plate with the same hairline.
   Light-background logos are cut out and centred; brand tiles fill the plate,
   so neither family shows a frame inside the frame. */
.brand-mark{background:#fff;padding:0}
.brand-mark img{object-fit:contain}
.brand-mark-sm{border-radius:var(--r-md)}
.brand-mark-md{border-radius:var(--r-md)}
.brand-mark-lg{border-radius:var(--r-md)}
.brand-mark-xl{border-radius:var(--r-md)}

/* "What a code cannot do" is a list of limits, so it gets a neutral marker,
   not the green tick that means "savings". */
.basics-aside{align-self:start}
.checklist-negative li::before{
  content:"\00d7";
  top:0;
  width:auto;height:auto;
  border:0;
  transform:none;
  font-size:.95rem;
  font-weight:600;
  line-height:1.55;
  color:color-mix(in oklab,var(--muted-foreground) 90%,transparent);
}

/* Hero deal rows: a link-only deal now fills its code slot with a labelled box
   of exactly the same height, so the three rows stay on one rhythm. */
.hero-deal-row{min-height:2.6rem}
.code-box-link{
  justify-content:center;
  border-style:solid;
  border-color:var(--border);
  background:var(--muted);
  color:var(--muted-foreground);
  font-family:inherit;
  font-size:var(--t-sm);
  font-weight:600;
  letter-spacing:0;
  cursor:default;
  -webkit-user-select:none;
  user-select:none;
}

/* Two link styles only: inline prose links stay underlined; action links carry
   an arrow and underline on hover. */
.section-link,
.platform-card-go,
.post-card-go,
.entry-go,
.journal-lead-go,
.deal-card-link,
.featured-card-link,
.post-rail-links a,
.footer-col a,
.author-links a,
.qa-links a,
.journal-cross-go,
.header-cta{text-decoration:none}
.section-link:hover,
.deal-card-link:hover,
.featured-card-link:hover,
.post-rail-links a:hover,
.footer-col a:hover,
.author-links a:hover,
.qa-links a:hover{text-decoration:underline;text-underline-offset:2px}

/* ---- Listing pages (/codes, category pages) ---------------------------- */
.hero-compact .hero-inner{grid-template-columns:minmax(0,1fr);padding-block:2.5rem 2.75rem}
.hero-compact h1{max-width:24ch;font-size:clamp(2rem,4vw,3rem)}
.hero-compact .hero-lede{margin-bottom:1.75rem}

.codes-main{padding-block:1.75rem 4rem}
.codes-main .code-hint{margin-bottom:1.25rem}
.deal-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-card)}
@media(min-width:640px){.deal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.deal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.codes-section{margin-top:3.5rem}
.codes-section h2{margin-bottom:1.25rem}
.codes-faq{max-width:60rem}

.cat-strip{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0}
.cat-strip-inline{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.cat-strip-link{
  display:inline-flex;align-items:center;min-height:34px;padding:0 .8rem;
  border:1px solid var(--border);border-radius:var(--r-pill);background:var(--card);
  font-size:var(--t-sm);font-weight:600;color:var(--muted-foreground);
  text-decoration:none;
}
.cat-strip-link:hover{border-color:var(--primary);color:var(--primary)}
.journal-cross .cat-strip{flex:1 1 auto;justify-content:flex-end}
.journal-cross-quiet{margin-top:1.25rem}

/* FAQ questions are headings inside <summary>: keep the summary's padding and
   let the h3 inherit the type, so the markup change costs no visual change. */
.faq-q{margin:0;font-size:var(--t-md);font-weight:600;line-height:1.4}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* ---- Touch targets ----------------------------------------------------- */
/* Inline links in prose are 14-17px tall on a phone, under the 24px tap target
   that Google flags. Padding (not a bigger font) fixes the hit area. */
@media(pointer:coarse){
  .post-body a,
  .basics a,
  .faq-answer a,
  .deal-box-note a,
  .footer-disclosure a{
    display:inline-block;
    padding-block:.3rem;
    margin-block:-.3rem;
  }
}

/* Brand name and the hero rate chip land on the scale rather than beside it. */
.site-brand-name{font-size:var(--t-lg)}
.hero-deal-rate{font-size:var(--t-xl)}

/* Category pages: the explanatory paragraph sits between the H2 and the
   checklist, so it uses body copy rather than the lead style. */
.cat-intro{margin:0 0 1.25rem;max-width:68ch;font-size:var(--t-md);line-height:1.65;color:var(--muted-foreground)}

/* `.basics p` is more specific than `.section-eyebrow`, so the "The basics"
   label was inheriting body-muted gray while every other section label is
   blue. Restore the shared label treatment. */
.basics .section-eyebrow{color:var(--primary);line-height:1.2;margin:0 0 .35rem}

/* The deal grids on /codes and the category pages can end on an orphan too
   (13 deals, and 4 in the perps category). Centre it instead of leaving a
   single card hugging the left edge. */
@media(min-width:1024px){
  .deal-grid > :last-child:nth-child(3n + 1){grid-column:2}
}
@media(min-width:640px) and (max-width:1023px){
  .deal-grid > :last-child:nth-child(2n + 1){grid-column:1 / -1;justify-self:center;width:calc(50% - (var(--gap-card) / 2))}
}

/* =======================================================================
   Subpage pass (Nov 2026)
   -----------------------------------------------------------------------
   Platform pages, /codes, category pages, the author profile and /about.
   New components only; existing tokens (--container, --r-*, --t-*) are
   reused so the new pieces cannot drift from the rest of the site.
   ======================================================================= */

/* Focus ring: one brand-coloured ring on light surfaces, white on the dark
   bands. Previously the code box and the copy button drew a green ring while
   everything else drew blue, so the same keystroke looked like three products. */
:where(a, button, summary, [tabindex], input, textarea, select):focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
}
.hero :focus-visible,
.journal-head :focus-visible,
.cta-band :focus-visible,
.code-box-dark:focus-visible,
.copy-link:focus-visible,
.page-cta-btn:focus-visible{
  outline-color:#fff;
}

/* ---- Platform page ---------------------------------------------------- */

.page-body{max-width:48rem}
.page-crumb{margin-bottom:1.25rem}
.page-crumb .breadcrumb{margin:0}

.page-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.2rem .55rem;border-radius:var(--r-sm);
  background:var(--muted);color:var(--muted-foreground);
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:.85rem;
}
.page-chip:hover{background:var(--accent);color:var(--accent-foreground)}

.page-cta-title{margin:0;font-size:1.125rem;font-weight:600;line-height:1.3}
.page-cta-copy{margin:0 0 1.125rem;font-size:.875rem;line-height:1.55;color:rgb(255 255 255 / .85)}
.page-cta-btn{
  background:var(--savings);color:var(--on-savings);
  box-shadow:0 1px 2px rgb(0 0 0 / .18);
}
.page-cta-btn:hover{background:var(--savings-dark);color:var(--on-savings)}

/* The cover art used to own the first screen. It now sits under the code. */
.page-hero-media{margin:2rem 0 .5rem}
.page-hero-img{
  display:block;width:100%;height:auto;
  border:1px solid var(--border);border-radius:var(--r-lg);
}

/* ---- Copy feedback ---------------------------------------------------- */

.code-box[role="button"]{cursor:pointer}
/* The confirmation lands inside the control the visitor is already looking
   at: the code text is replaced for 1.6s and the border turns green. The
   toast stays as a second, quieter signal. */
.code-box.is-copied{
  border-style:solid;border-color:var(--savings);
  background:var(--savings-soft);color:var(--savings-strong);
}
.code-box.is-copied .code-box-text{letter-spacing:.02em}
.code-box.is-copied .code-box-icon{opacity:0}
.code-box-dark.is-copied{border-color:var(--savings);background:rgb(255 255 255 / .22);color:#fff}

.copy-link{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-top:.9rem;padding:.35rem .7rem;
  border:1px solid rgb(255 255 255 / .4);border-radius:var(--r-pill);
  background:transparent;color:#fff;font-size:.8125rem;font-weight:600;
}
.copy-link:hover{background:rgb(255 255 255 / .14);border-color:#fff}

.copy-toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,1rem);
  z-index:80;padding:.55rem .9rem;border-radius:var(--r-pill);
  background:var(--foreground);color:var(--background);
  font-size:.8125rem;font-weight:600;letter-spacing:.01em;
  opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;
  box-shadow:0 10px 30px rgb(0 0 0 / .22);
}
.copy-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ---- Fee tables ------------------------------------------------------- */

.fee-table,
.compare-table{
  width:100%;border-collapse:collapse;font-size:.875rem;
  font-variant-numeric:tabular-nums;
}
.fee-table caption,
.compare-table caption{
  color:var(--foreground);font-size:.9375rem;font-weight:600;text-align:left;
  padding:.85rem 1rem;border-bottom:1px solid var(--border);
}
.fee-table thead th,
.compare-table thead th{
  text-align:left;font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-foreground);
  padding:.55rem 1rem;border-bottom:1px solid var(--border);
}
.fee-table tbody th,
.fee-table tbody td,
.compare-table tbody th,
.compare-table tbody td{
  padding:.6rem 1rem;border-bottom:1px solid var(--border);text-align:left;
  font-weight:500;vertical-align:top;
}
.fee-table tbody th,
.compare-table tbody th{color:var(--muted-foreground);font-weight:500}
.fee-table tbody tr:last-child th,
.fee-table tbody tr:last-child td,
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{border-bottom:0}
/* Numbers are mono, tabular and right-aligned; the unit is not part of the
   number and no longer inherits the mono face. */
.fee-table thead th.fee-col,
.fee-table tbody td.fee-amount{text-align:right;white-space:nowrap}
.fee-table tbody td{font-family:inherit;font-weight:500}
.fee-table tbody td .num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;font-variant-numeric:tabular-nums}
.fee-table tbody td .unit{font-family:inherit;font-weight:500;color:var(--muted-foreground)}
.fee-table tbody td.is-accent .num{color:var(--primary)}
.fee-table thead th.fee-col{white-space:nowrap}
.compare-table tbody td{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600}
.compare-table tbody td:not(.is-rate){font-family:inherit;font-weight:500;color:var(--muted-foreground)}
.compare-table .is-rate span{display:block;font-family:inherit;font-size:.6875rem;font-weight:600;color:var(--muted-foreground);text-transform:lowercase}
.compare-table tbody tr:hover{background:var(--muted)}
.fee-table tbody td::before{content:none}

/* On a phone the comparison table was 43px wider than the column and had to
   be swiped sideways. Tighter cells make it fit without a scroll. */
@media(max-width:640px){
  .compare-table{font-size:.75rem}
  .compare-table caption{padding:.7rem .65rem;font-size:.85rem}
  .compare-table thead th{padding:.5rem .55rem;font-size:.625rem;letter-spacing:.05em}
  .compare-table tbody th,
  .compare-table tbody td{padding:.5rem .55rem}
  .compare-table .is-rate span{font-size:.625rem}
}

/* A fee card that wraps a table keeps its border but drops the padding. */
.fee-table{border-radius:var(--r-md);overflow:hidden}
.fee-table caption{background:var(--muted)}

.table-note{margin:.75rem 0 0;font-size:.75rem;line-height:1.5;color:var(--muted-foreground)}

/* ---- Evidence: change history and sign-up screenshots ------------------ */

.platform-proof,
.platform-changes{
  margin:2.5rem 0;padding-top:1.75rem;border-top:1px solid var(--border);
}
.platform-proof h2,
.platform-changes h2{margin:0 0 .4rem;font-size:var(--t-xl);font-weight:600;letter-spacing:-.02em}
.proof-lede,
.changes-lede{margin:0 0 1.1rem;font-size:.875rem;line-height:1.6;color:var(--muted-foreground)}

.proof-grid{display:grid;gap:1rem}
@media(min-width:720px){.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.proof-shot{margin:0}
.proof-shot img{
  display:block;width:100%;height:auto;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--muted);
}
.proof-shot figcaption{margin-top:.55rem;font-size:.75rem;line-height:1.55;color:var(--muted-foreground)}

.change-list{list-style:none;margin:0;padding:0;border-left:2px solid var(--border)}
.change-row{position:relative;display:flex;flex-wrap:wrap;gap:.15rem .85rem;padding:0 0 .9rem 1rem}
.change-row::before{
  content:"";position:absolute;left:-.3125rem;top:.4rem;
  width:.5rem;height:.5rem;border-radius:50%;
  background:var(--card);border:2px solid var(--primary);
}
.change-row:last-child{padding-bottom:0}
.change-date{
  flex:0 0 auto;font-size:.75rem;font-weight:600;letter-spacing:.02em;
  color:var(--foreground);font-variant-numeric:tabular-nums;
}
.change-note{flex:1 1 15rem;font-size:.8125rem;line-height:1.6;color:var(--muted-foreground)}

@media print{
  .platform-proof img{border-color:#999}
}

/* ---- Similar codes ---------------------------------------------------- */.similar-codes .similar-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;margin-bottom:1rem}
@media(min-width:640px){.similar-codes .similar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.similar-more{margin:0;font-size:.875rem;font-weight:600}
.similar-more a{color:var(--primary)}

/* ---- /codes hero ------------------------------------------------------ */

.hero-note{margin:.85rem 0 0;font-size:.8125rem;color:rgb(255 255 255 / .72)}
.hero-note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.hero-copy .post-crumb{margin:0 0 1rem;color:rgb(255 255 255 / .72)}
.hero-copy .post-crumb a{color:#fff}
.hero-copy .breadcrumb li + li::before{color:rgb(255 255 255 / .45)}

@media(min-width:1024px){
  .hero-split .hero-inner{grid-template-columns:minmax(0,1fr) 25rem;align-items:start;gap:3rem}
  .hero-split .hero-deals{margin:0}
}
@media(max-width:1023px){
  /* The deal grid directly below already leads with these three cards, so
     the summary card only pushes the filters down a screen. */
  .hero-split .hero-deals{display:none}
}

.cat-count{margin-left:.3rem;font-variant-numeric:tabular-nums;opacity:.65}
.cat-strip-link{font-weight:600}

/* ---- About + author profile ------------------------------------------ */

.page-eyebrow{
  margin:0 0 .5rem;font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary);
}
.page-title{margin:0 0 .75rem;font-size:clamp(1.85rem,4vw,2.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.page-lede{margin:0 0 1.75rem;font-size:1.0625rem;line-height:1.65;color:var(--muted-foreground)}
.page-note{margin:2rem 0 0;font-size:.8125rem;color:var(--muted-foreground)}
.text-link{font-weight:600;color:var(--primary);text-decoration:underline;text-underline-offset:2px}

.about-facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;
  margin:0 0 2.5rem;padding:1.25rem;border:1px solid var(--border);
  border-radius:var(--card-radius);background:var(--card);
}
@media(min-width:720px){.about-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.about-fact-label{margin:0 0 .2rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
.about-fact-value{margin:0;font-weight:600;font-size:.9375rem}

.about-section{margin:0 0 2.5rem}
.about-section h2{margin:0 0 .75rem;font-size:1.375rem;font-weight:600;letter-spacing:-.01em}
.about-section p{margin:0 0 .85rem;line-height:1.7;color:var(--muted-foreground)}

.about-author{display:flex;gap:1.25rem;align-items:flex-start;padding:1.25rem;border:1px solid var(--border);border-radius:var(--card-radius);background:var(--card)}
.about-bio{margin:.5rem 0 .75rem;line-height:1.65;color:var(--muted-foreground)}

.author-profile{display:flex;gap:1.5rem;align-items:center;margin-bottom:2.25rem}
.author-contact{margin:0;font-size:.875rem;color:var(--muted-foreground)}
.author-contact a{color:var(--primary)}

.author-avatar-lg{width:6rem;height:6rem}
.author-avatar-xl{width:7.5rem;height:7.5rem}
.author-initials{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--primary-foreground);
  font-weight:600;font-size:1.75rem;letter-spacing:-.02em;
}
.author-avatar-xl.author-initials{font-size:2.75rem}

.author-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.author-posts li{display:flex;flex-direction:column;gap:.15rem}
.author-posts a{font-weight:600;color:var(--foreground)}
.author-posts a:hover{color:var(--primary)}
.author-post-meta{font-size:.75rem;color:var(--muted-foreground)}

@media(max-width:640px){
  .author-profile{flex-direction:column;align-items:flex-start;gap:1rem}
  .about-author{flex-direction:column}
}

/* External links get the same arrow everywhere, unless they already carry
   an inline icon that says the same thing. */
a[target="_blank"]:not(:has(svg))::after{
  content:"\2197";font-size:.82em;line-height:1;margin-left:.18em;
  color:currentColor;opacity:.7;
}

/* ==========================================================================
   Article byline, "short answer" and "where next"
   --------------------------------------------------------------------------
   These three blocks replace the code panel that used to repeat the referral
   link a third time. They are cheap, text-first and they survive printing.
   ========================================================================== */

/* Byline: the date row now credits a person, so the link inside it is part of
   the sentence rather than an afterthought. */
.post-meta a{
  color:var(--foreground);font-weight:600;text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--foreground) 28%,transparent);
}
.post-meta a:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* A comparison post answers a question in prose, so the box carries a
   paragraph instead of the three-row fact list. Same plate, same rhythm. */
.qa-answer{margin:0;font-size:.9375rem;line-height:1.65;color:var(--foreground)}

/* Two cards, no outbound button: the rail already has the one link that
   matters, and this row is for the reader who finished the article. */
.next-steps{
  margin:2rem 0 0;padding:1.15rem;
  border:1px solid color-mix(in oklab,var(--brand) 22%,var(--border));
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,color-mix(in oklab,var(--brand) 5%,var(--card)),var(--card));
}
.next-steps-eyebrow{
  margin:0 0 .75rem;font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:color-mix(in oklab,var(--brand) 60%,var(--foreground));
}
.next-steps-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
@media(min-width:560px){.next-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.next-steps-card{
  display:flex;flex-direction:column;gap:.2rem;padding:.8rem .9rem;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--card);
  text-decoration:none;
}
.next-steps-card:hover{border-color:var(--primary)}
.next-steps-title{font-size:.875rem;font-weight:600;color:var(--primary);line-height:1.3}
.next-steps-desc{font-size:.75rem;line-height:1.55;color:var(--muted-foreground)}
.next-steps-note{
  margin:.85rem 0 0;padding-top:.7rem;border-top:1px solid var(--border);
  font-size:.6875rem;line-height:1.6;color:var(--muted-foreground);
}
.next-steps-note a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Dark mode: the covers are dark artwork on a dark page, so the 1px --border
   is not enough to show where the image ends. A slightly stronger edge plus an
   inset ring keeps the frame legible without lightening the art. */
@media (prefers-color-scheme: dark){
  .post-hero,
  .post-card-cover,
  .entry-media,
  .journal-lead-media{
    border-color:oklch(38% .025 258);
    box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06);
  }
}

/* ==========================================================================
   Audit pass: one of everything
   --------------------------------------------------------------------------
   The page templates grew up separately (Tailwind utilities on the legacy
   pages, custom classes on the rewritten ones), so the same element could be
   drawn five ways. Every rule below replaces a variant with the single version
   the whole site now uses:

     - three H1 sizes instead of seven
     - one reading column (720px) for breadcrumb, H1 and prose
     - one card head (chip left, rate right, real gap between them)
     - one logo plate (44px, 1px inner ring)
     - one hover shadow
     - one chip, one callout, one rate label, one "link only" badge
     - two code treatments: inline pill, copyable box
     - two white-ink opacities, two H3 sizes, four weights
     - one icon set: arrow for internal, diagonal arrow for external

   Loaded last so it wins the cascade without !important.
   ========================================================================== */

/* Self-hosted mono for codes. JetBrains Mono, subset to the characters a
   referral code or URL can contain (12KB). SIL OFL 1.1, see
   assets/rl-mono-OFL.txt. Previously ui-monospace meant SF Mono on macOS,
   Consolas on Windows and something else on Linux, so the same code set three
   different widths on three machines. */
@font-face{
  font-family:"RL Mono";
  src:url(/assets/rl-mono.woff2)format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+20-7E,U+A0,U+D7,U+2013-2014,U+2018-201D,U+2026,U+2713;
}

:root{
  /* ---- Type scale ------------------------------------------------------
     Display for the home page and the two hub listings, page for everything
     else. Nothing in between, so a new template picks one of two sizes. */
  --t-display:clamp(2.5rem,4.4vw,3.5rem);      /* 40 -> 56px */
  --t-page:clamp(1.9rem,3.1vw,2.5rem);         /* 30 -> 40px */
  --t-h2:1.75rem;                              /* 28px, section heads */
  --t-h2-sm:1.4375rem;                         /* 23px, in-article heads */
  --t-h3:1.0625rem;                            /* 17px, card + prose heads */
  --t-h4:0.9375rem;                            /* 15px, small heads */
  --ls-display:-.035em;
  --ls-page:-.022em;
  --lh-display:1.04;
  --lh-page:1.14;

  /* ---- Reading column --------------------------------------------------
     72rem for grids and heroes, 45rem (720px) for text. The breadcrumb sits
     in the same column as the H1 on every template. */
  --read:45rem;

  /* ---- Weights: 400 body, 500 UI, 600 cards, 800 display only ---------- */
  --w-body:400;
  --w-ui:500;
  --w-card:600;
  --w-display:800;

  /* ---- One hover shadow ------------------------------------------------ */
  --shadow-hover:0 18px 34px -22px rgb(15 23 42 / .45);

  /* ---- Two white-ink levels -------------------------------------------- */
  --on-dark:rgb(255 255 255 / .92);
  --on-dark-soft:rgb(255 255 255 / .72);

  /* ---- One mono -------------------------------------------------------- */
  --mono:"RL Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme: dark){
  :root{--shadow-hover:0 18px 34px -22px rgb(0 0 0 / .7)}
}

/* ---- One reading column ------------------------------------------------ */
.page-body{max-width:var(--read)}
.breadcrumb-bar{max-width:var(--read)}
.max-w-3xl{max-width:var(--read)}

/* ---- H1: three tiers ---------------------------------------------------
   Display: home, /blog, /codes, category pages.
   Page:    article, platform, about, legal, contact, 404. */
.hero h1,
.journal-title{
  font-size:var(--t-display);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  font-weight:var(--w-display);
  text-wrap:balance;
}
.page-title,
.post-title,
.post-article .post-title,
.page-body h1,
.site-container > h1,
.error-page h1{
  font-size:var(--t-page);
  line-height:var(--lh-page);
  letter-spacing:var(--ls-page);
  font-weight:var(--w-display);
  text-wrap:balance;
}

/* ---- H2 / H3: two sizes each ------------------------------------------ */
.section-head h2,
.codes-section h2,
.about-section h2,
.post-module-head h2,
.platform-proof h2,
.platform-changes h2,
.cta-band h2,
.basics h2,
.article-body h2,
h2{
  font-size:var(--t-h2);
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:var(--w-card);
}
.post-body h2,
.section-article h2{font-size:var(--t-h2-sm)}
/* The CTA band was the last heading with its own smaller gap. */
.cta-band h2{margin-block-end:1rem}
.post-body h3,
.about-section h3,
.step h3,
.faq-q,
.deal-card-offer,
h3{
  font-size:var(--t-h3);
  line-height:1.35;
  letter-spacing:-.005em;
  font-weight:var(--w-card);
}
.basics-aside h3,
.footer-col h2,
.post-body h4{
  font-size:var(--t-h4);
  line-height:1.4;
}

/* Prose: the paragraph follows its heading at one distance everywhere. */
.post-body h2 + p,
.codes-section h2 + p,
.codes-lede,
.cat-intro,
.section-head + p{
  margin-top:0;
}
.post-body h2,
.codes-section h2,
.about-section h2{margin-block:2.25rem 1rem}
.codes-section > h2:first-child,
.about-section > h2:first-child{margin-top:0}
p, li, dd, .post-card-desc, .entry-desc{text-wrap:pretty}
h1, h2, h3, .text-center p{text-wrap:balance}

/* ---- Weights: nothing at 700 outside the display tier ----------------- */
.post-card-title,
.platform-card-id h3,
.deal-card-id h2,
.entry-title,
.journal-lead-title,
.featured-card-name,
.related-deal-name,
.hero-deal-name,
.faq-item summary,
.about-fact-value,
.author-name,
.deal-card-offer{font-weight:var(--w-card)}
.deal-rate,
.hero-deal-rate,
.journal-stats dd,
.hero-stats dd,
.entry-go,
.post-card-go,
.journal-lead-go,
.deal-card-link,
.section-link,
.journal-cross-go,
.btn,
.header-cta,
.code-go,
.footer-brand-head span,
.change-date,
.about-fact-label,
.entry-cat,
.type-chip{font-weight:var(--w-ui)}
.deal-rate > span,
.hero-deal-rate > .rate-basis,
.type-chip,
.entry-cat,
.journal-stats dt,
.hero-stats dt,
.deal-meta-item,
.post-card-meta{font-weight:600}
.btn{font-weight:600}

/* ---- Two white-ink opacities ------------------------------------------ */
.hero-lede,
.journal-lede,
.hero-note,
.hero-eyebrow,
.journal-eyebrow{color:var(--on-dark-soft)}
.hero-stats dt,
.journal-stats dt{color:var(--on-dark-soft)}
.hero-stats dd,
.journal-stats dd,
.cta-band p{color:var(--on-dark)}

/* ---- One card head: chip left, rate right, never touching -------------- */
.platform-card-head,
.deal-card-head,
.featured-card-head,
.hero-deal-head,
.related-deal,
.post-card-top{
  gap:.75rem;
  align-items:center;
}
.platform-card-head > .platform-card-id,
.deal-card-head > .deal-card-id,
.featured-card-head > .featured-card-id,
.hero-deal-head > .hero-deal-id,
.related-deal > .related-deal-id{
  flex:1 1 auto;
  min-width:0;
}
.platform-card-head > .deal-rate,
.deal-card-head > .deal-rate,
.featured-card-head > .deal-rate,
.hero-deal-head > .hero-deal-rate,
.related-deal > .related-deal-rate{
  flex:0 0 auto;
  margin-left:auto;
}
/* The chip must never grow into the rate. */
.deal-rate,
.hero-deal-rate,
.related-deal-rate,
.post-rail-rate{
  flex-shrink:0;
  text-align:right;
}
.platform-card-id .type-chip,
.deal-card-id .type-chip,
.featured-card-id .type-chip{
  align-self:flex-start;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---- One chip ----------------------------------------------------------
   Category / platform type, in one style, at every size. */
.type-chip,
.post-chip,
.entry-cat,
.page-chip{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.14rem .45rem;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--muted);
  color:var(--muted-foreground);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.3;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.page-chip{
  background:color-mix(in oklab,var(--primary) 8%,var(--card));
  border-color:color-mix(in oklab,var(--primary) 24%,var(--border));
  color:var(--primary);
  margin-bottom:.75rem;
}
a.page-chip:hover{border-color:var(--primary);color:var(--primary)}

/* ---- Rate labels -------------------------------------------------------
   One colour, one position, one wording. "referrer earns" is never green:
   green means money in the reader's pocket. */
.deal-rate > span,
.hero-deal-rate > .rate-basis,
.related-deal-rate > .rate-basis,
.post-rail-rate > span{
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-foreground);
}
.deal-rate.is-referrer > span,
.hero-deal-rate.is-referrer > .rate-basis,
.related-deal-rate.is-referrer > .rate-basis,
.post-rail-rate.is-referrer > span{color:var(--primary)}

/* No number published: a neutral badge, not an em dash that reads as a
   minus sign or a failed load. Same box height as a real rate. */
.rate-none{
  display:inline-flex;
  align-items:center;
  padding:.18rem .45rem;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--muted);
  color:var(--muted-foreground);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.03em;
  line-height:1.3;
  white-space:nowrap;
  text-transform:none;
}
.deal-rate.is-unknown,
.hero-deal-rate.is-unknown,
.related-deal-rate.is-unknown,
.post-rail-rate.is-unknown{color:inherit}
.is-rate .rate-none{font-size:.6875rem}

/* ---- One logo plate ----------------------------------------------------
   44px box, white, 1px inner ring, logo inset by 6px so a full-bleed icon
   and a padded one read at the same optical size. */
.brand-mark,
.brand-mark-sm,
.brand-mark-md,
.brand-mark-lg,
.brand-mark-xl{
  width:2.75rem;
  height:2.75rem;
  padding:.375rem;
  border-radius:var(--r-md);
  background:#fff;
  box-shadow:inset 0 0 0 1px rgb(15 23 42 / .14),0 1px 2px rgb(15 23 42 / .08);
}
/* One token pair for the plate, so light and dark cannot drift: a white plate
   with a hairline ring on light, a raised dark plate with a light ring on dark.
   Without the dark values a transparent logo sat in a glaring white square and
   a black logo tile dissolved into the card behind it. */
:root{
  --plate-bg:#fff;
  --plate-ring:rgb(15 23 42 / .14);
}
@media (prefers-color-scheme: dark){
  :root{
    --plate-bg:oklch(29% .014 258);
    --plate-ring:rgb(255 255 255 / .18);
  }
}
.brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:calc(var(--r-md) - 4px)}
/* A logo whose artwork is its own brand tile fills the plate edge to edge,
   so it shows one frame instead of a square inside a square. */
.brand-mark.is-tile{padding:0}
.brand-mark.is-tile img{border-radius:inherit;object-fit:cover}
.brand-mark > span{width:100%;height:100%;border-radius:calc(var(--r-md) - 4px);font-size:.8125rem}
a:hover > .brand-mark,
.platform-card:hover .brand-mark,
.entry:hover .brand-mark,
.journal-lead:hover .brand-mark{box-shadow:inset 0 0 0 1px rgb(15 23 42 / .22),0 3px 8px -2px rgb(15 23 42 / .2)}
/* A dark logo inside a white plate needs no second plate of its own: the
   cover art is drawn from the same transparent source. */
@media (prefers-color-scheme: dark){
  .brand-mark,
  .brand-mark-sm,
  .brand-mark-md,
  .brand-mark-lg,
  .brand-mark-xl{background:var(--plate-bg);box-shadow:inset 0 0 0 1px var(--plate-ring),0 1px 2px rgb(0 0 0 / .35)}
  /* A tile logo fills the plate edge to edge, so the plate colour never shows;
     the light ring is the only thing that keeps a black tile from disappearing
     into the card. */
  .brand-mark.is-tile{box-shadow:inset 0 0 0 1px var(--plate-ring),0 1px 3px rgb(0 0 0 / .45)}
}

/* ---- One hover shadow -------------------------------------------------- */
.platform-card:hover,
.post-card:hover,
.deal-card:hover,
.featured-card:hover,
.journal-lead:hover,
.related-deal:hover,
.step:hover{box-shadow:var(--shadow-hover)}
.journal-lead:hover{box-shadow:var(--shadow-hover)}

/* Card decoration: no coloured top strip, no coloured top border. The chip
   and the rate already carry the accent. */
.deal-card-bar{display:none}
.deal-card{border-top:1px solid var(--border)}
.journal-cross{border-color:var(--border)}

/* ---- One callout ------------------------------------------------------- */
.callout,
.note,
.alert-ok,
.alert-err{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  margin:1.5rem 0;
  padding:.95rem 1.1rem;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--muted);
  font-size:.9375rem;
  line-height:1.62;
  color:var(--foreground);
}
.callout > svg{flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.18rem}
.callout p{margin:0}
.callout p + p{margin-top:.5rem}
.callout-info{background:color-mix(in oklab,var(--primary) 6%,var(--card));border-color:color-mix(in oklab,var(--primary) 20%,var(--border))}
.callout-info > svg{color:var(--primary)}
.callout-warn,
.note-warn{background:color-mix(in oklab,var(--warning) 16%,var(--card));border-color:color-mix(in oklab,var(--warning) 45%,var(--border))}
.callout-warn > svg,
.note-warn > svg{color:oklch(48% .11 70)}
.note-warn strong{color:oklch(38% .09 62)}
.callout-tip,
.note-tip{background:var(--savings-soft);border-color:var(--savings-line)}
.callout-tip > svg,
.note-tip > svg{color:var(--savings-strong)}
.note-tip strong{color:var(--savings-strong)}
.note strong,
.callout strong{font-weight:600}

/* ---- Two code treatments ----------------------------------------------
   1. .code-pill  - inline, small, for prose and card footers.
   2. .code-box   - copyable box, for the place a reader actually copies. */
.code-pill,
.post-card-code code,
.entry-code code,
.inline-code{
  display:inline-block;
  padding:.1rem .38rem;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--muted);
  color:var(--foreground);
  font-family:var(--mono);
  font-size:.8125em;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.45;
  white-space:nowrap;
  -webkit-user-select:all;
  user-select:all;
}
.post-card-code,
.entry-code{font-size:.75rem;font-weight:500;color:var(--muted-foreground)}
.post-card-code code,
.entry-code code{color:var(--foreground)}
.code-box{
  font-family:var(--mono);
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:.04em;
  border-width:1px;
  border-style:dashed;
  border-color:color-mix(in oklab,var(--primary) 38%,var(--border));
  background:color-mix(in oklab,var(--primary) 4%,var(--card));
}
.code-box:hover{border-color:var(--primary);border-style:solid}
/* The platform CTA sits on a dark panel: the box stays a light plate so the
   code is the highest-contrast thing in the card, not white-on-blue dashes. */
.code-box.code-box-dark{
  border-color:var(--border);
  border-style:solid;
  background:#fff;
  color:oklch(21% .05 255);
}
.code-box.code-box-dark:hover{border-color:var(--primary)}
.code-box.code-box-link{
  display:inline-flex;
  align-items:center;
  border-style:solid;
  border-color:var(--border);
  background:var(--muted);
  color:var(--muted-foreground);
  font-family:inherit;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
}
/* Feedback lives on the control: the border turns green and the label
   changes, so the click has a visible result without moving layout. */
.code-box.is-copied,
.copy-link.is-copied{
  border-color:var(--savings);
  border-style:solid;
  background:var(--savings-soft);
  color:var(--savings-strong);
}
.code-box.is-copied::after{
  content:"Copied \2713";
  margin-left:.6rem;
  color:var(--savings-strong);
  font-family:var(--font-sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap;
}
.copy-link.is-copied::after{
  content:"Copied \2713";
  margin-left:.35rem;
  font-weight:600;
}
.code-box-dark.is-copied{
  border-color:var(--savings);
  background:var(--savings-soft);
  color:var(--savings-strong);
}
/* Selection follows the brand instead of the operating system's blue, which
   is what made selected code disappear on the blue CTA panel. */
::selection{background:color-mix(in oklab,var(--primary) 22%,#fff);color:var(--foreground)}
.code-box-dark::selection{background:color-mix(in oklab,var(--primary) 26%,#fff);color:oklch(21% .05 255)}

/* ---- One "link only" badge -------------------------------------------- */
.link-only{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  min-height:2.25rem;
  padding:0 .65rem;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--muted);
  color:var(--muted-foreground);
  font-size:.75rem;
  font-weight:500;
  white-space:nowrap;
}
.link-only::before{
  content:"";
  width:.4rem;height:.4rem;border-radius:var(--r-pill);
  background:currentColor;opacity:.5;
}

/* ---- Header: one pill height, one radius, one size -------------------- */
.site-header-inner{gap:.75rem}
/* The desktop nav carries Tailwind's `hidden md:flex`. Setting `display:flex`
   unconditionally here beat `.hidden`, so the nav stayed visible in the
   mobile header and pushed the logo and CTA out of the viewport. */
@media(min-width:768px){
  .site-header-inner nav[aria-label="Main navigation"]{display:flex;align-items:center;gap:.125rem}
}
.site-header-inner nav[aria-label="Main navigation"] a,
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.25rem;          /* 36px for both */
  padding:0 .75rem;
  border-radius:var(--r-md);   /* 10px for both */
  font-size:.875rem;           /* 14px for both */
  line-height:1;
  font-weight:var(--w-ui);
  white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.header-cta{
  min-width:9.5rem;            /* "All 13 codes" and "Suggest a code" both fit */
  padding-inline:1rem;
  border:1px solid var(--savings);
  background:var(--savings);
  color:var(--on-savings);
  font-weight:600;
}
.header-cta:hover{background:var(--savings-dark);border-color:var(--savings-dark);color:var(--on-savings)}
.site-header-inner nav[aria-label="Main navigation"] a[aria-current="page"]{
  background:var(--accent);
  color:var(--accent-foreground);
  font-weight:600;
}

/* ---- Pressed state for every button, including the legacy utilities --- */
.btn:active,
.header-cta:active,
.code-go:active,
.qa-go:active,
.filter-chip:active,
.page-link:active,
.copy-link:active,
button:active,
[class*="bg-primary"][class*="rounded"]:active{
  transform:translateY(1px);
}
a[class*="inline-flex"][class*="h-12"]:active{transform:translateY(1px)}

/* ---- Breadcrumb: same top rhythm, same left edge as the H1 ------------ */
.breadcrumb-bar{padding-block:1.5rem .25rem}
.breadcrumb{font-size:.8125rem;line-height:1.5}
.post-crumb{margin:0 0 1.25rem}
.post-head > .post-crumb{margin-bottom:.25rem}
/* Inside the dark hero / journal band the crumb is white ink on ink. */
.hero-copy .breadcrumb,
.journal-head .breadcrumb,
.post-crumb .breadcrumb{color:var(--muted-foreground)}
.hero-copy .breadcrumb a,
.journal-head .breadcrumb a{color:var(--on-dark-soft)}
.hero-copy .breadcrumb a:hover,
.journal-head .breadcrumb a:hover{color:#fff}
.hero-copy .breadcrumb [aria-current="page"],
.journal-head .breadcrumb [aria-current="page"]{color:#fff}
.hero-copy .breadcrumb li + li::before,
.journal-head .breadcrumb li + li::before{border-color:var(--on-dark-soft)}
.journal-head .breadcrumb{margin:0 0 1.25rem}

/* ---- One gap between cards ------------------------------------------- */
.deal-grid{gap:var(--gap-card)}
.steps{gap:var(--gap-card)}
.faq-grid{gap:.75rem}

/* ---- Steps: number and title on one line, footnote left-aligned ------- */
.step{
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  column-gap:.75rem;
  align-content:start;
  padding:1.35rem;
}
.step-num{margin:0;width:1.75rem;height:1.75rem;font-size:.8125rem}
.step h3{grid-column:2;margin:0 0 .35rem;align-self:center}
.step p{grid-column:2;margin:0}
.step > .step-foot,
.steps-foot{
  margin:1.25rem 0 0;
  text-align:left;
  font-size:.75rem;
  line-height:1.55;
  color:var(--muted-foreground);
}

/* ---- "What a code cannot do": even padding, one gap ------------------ */
.codes-section > .checklist + p,
.checklist + .text-link,
.checklist + p{margin-top:1rem}
.cannot-box,
.what-cannot,
.basics-aside{
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.basics-aside h3{margin:0}
.basics-aside .checklist{gap:.6rem}
.basics-aside .basics-link{margin:0;line-height:1.45}

/* ---- Platform H1 and its meta line ----------------------------------- */
.page-meta{margin:.35rem 0 1.5rem}
.page-body > img + .page-chip,
.page-body > .page-chip{margin:.25rem 0 .85rem}

/* ---- Blog listing: one numbering rule -------------------------------- */
.entry-no{display:none}

/* ---- Footer: column heads outrank their links ------------------------ */
.footer-col h2{
  margin:0 0 .5rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--foreground);
  text-transform:uppercase;
}
.footer-col a{font-size:.875rem;font-weight:400}
.footer-bottom{font-size:.75rem}

/* ---- Sentence case for page chrome ----------------------------------- */
.footer-col h2,
.breadcrumb [aria-current="page"]{text-transform:none}
.footer-col h2{letter-spacing:.02em}

/* ---- One arrow icon, always on the right ------------------------------
   Internal links get a right arrow, external links a diagonal one, both from
   the same 24px grid and drawn as a mask so they match at every size instead
   of inheriting whatever arrow glyph the OS font happens to have. */
.arw,
.arw-out{
  display:inline-block;
  flex:0 0 auto;
  width:.72em;
  height:.72em;
  margin-left:.32em;
  vertical-align:-.02em;
  background:currentColor;
  -webkit-mask:var(--arw)center/contain no-repeat;
  mask:var(--arw)center/contain no-repeat;
}
:root{
  --arw:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
  --arw-ext:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6'/><path d='M10 14 21 3'/><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/></svg>");
}
.arw-out{-webkit-mask-image:var(--arw-ext);mask-image:var(--arw-ext);opacity:.75}
a[target="_blank"]:not(:has(svg))::after{
  content:"";
  display:inline-block;
  flex:0 0 auto;
  width:.66em;
  height:.66em;
  margin-left:.3em;
  vertical-align:-.02em;
  background:currentColor;
  opacity:.7;
  -webkit-mask:var(--arw-ext)center/contain no-repeat;
  mask:var(--arw-ext)center/contain no-repeat;
}
/* Icons sit on the right of their label, never before it. */
.code-go svg,
.qa-go svg,
.btn svg{order:2;margin-left:.1rem}
.btn svg[data-leading]{order:0}
/* External action buttons say so with the diagonal arrow. */
.code-go[target="_blank"] svg{display:none}
.code-go[target="_blank"]::after{
  content:"";
  flex:0 0 auto;
  width:.72em;height:.72em;margin-left:.15rem;
  background:currentColor;
  -webkit-mask:var(--arw-ext)center/contain no-repeat;
  mask:var(--arw-ext)center/contain no-repeat;
}

/* A crumb inside a hero starts where a crumb outside one starts: the page
   templates put it 129px from the top, so the hero variants match. */
.hero-copy .breadcrumb{margin-top:1rem}

/* ---- Hero / journal bands: one eyebrow, one lede, one stat row --------.journal-head-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2rem 3rem;
  align-items:start;
}
@media(min-width:1024px){
  .journal-head-inner{grid-template-columns:minmax(0,1fr) 20rem}
}
.journal-start{
  align-self:start;
  padding:1.1rem 1.25rem;
  border:1px solid rgb(255 255 255 / .16);
  border-radius:var(--r-lg);
  background:rgb(255 255 255 / .06);
}
@media(max-width:1023px){.journal-start{display:none}}
.journal-start-title{
  margin:0 0 .6rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark-soft);
}
.journal-start-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;counter-reset:start}
.journal-start-list li{counter-increment:start;border-top:1px solid rgb(255 255 255 / .12)}
.journal-start-list li:first-child{border-top:0}
.journal-start-list a{
  display:flex;align-items:center;gap:.5rem;
  padding:.6rem 0;
  color:var(--on-dark);font-size:.875rem;line-height:1.45;font-weight:500;
  text-decoration:none;
}
.journal-start-list a::before{
  content:counter(start,decimal-leading-zero);
  flex:0 0 auto;
  font-size:.6875rem;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--on-dark-soft);
}
.journal-start-list a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.journal-start-list .arw{margin-left:auto}

/* The eyebrow dot is the same mark on the home hero, /codes, a category page
   and the journal: a green dot with a white ring. It was white on the home
   page and bare green in the journal. */
.hero-eyebrow,
.journal-eyebrow{
  margin:0 0 1rem;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--on-dark-soft);
}
.hero-eyebrow::before{
  content:"";
  flex:0 0 auto;
  width:.5rem;height:.5rem;
  border-radius:var(--r-pill);
  background:var(--savings);
  box-shadow:0 0 0 4px rgb(255 255 255 / .18);
}
.journal-eyebrow > span{
  flex:0 0 auto;
  width:.5rem;height:.5rem;
  border-radius:var(--r-pill);
  background:var(--savings);
  box-shadow:0 0 0 4px rgb(255 255 255 / .18);
}

/* ---- Author byline -----------------------------------------------------
   The name was inheriting whatever the surrounding link set and reading
   lighter than the bio. It is the strongest line in the block, so pin it. */
.author-name,
.about-author .author-name,
.post-author .author-name,
.author-card .author-name,
.author-name a{color:var(--foreground);font-weight:var(--w-card);letter-spacing:-.01em}
.author-name a:hover{color:var(--primary)}
.author-role{font-size:.8125rem;color:var(--muted-foreground)}
.about-bio{color:var(--muted-foreground);font-size:.9375rem}

/* ---- Footer column headings -------------------------------------------
   The markup uses a <p class="footer-col-title">, so the old .footer-col h2
   rule never applied. Restore it here: a small uppercase label that still
   sits above the link list. */
.footer-col-title{
  margin:0 0 .5rem;
  font-size:.6875rem;
  line-height:1.4;
  font-weight:var(--w-card);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted-foreground);
}

/* ---- One H3 size ------------------------------------------------------ */
.platform-card-id h3,
.deal-card-id h3,
.basics-aside h3,
.faq-q,
.about-section h3,
.post-body h3,
h3{
  font-size:var(--t-h3);
  line-height:1.35;
  letter-spacing:-.005em;
  font-weight:var(--w-card);
}

/* Links are UI weight, not bold; 700 is retired outside the display tier. */
.hero-deals-head a,
.hero-deal-link,
.platform-card-go,
.post-card-go,
.entry-go,
.deal-card-go,
.faq-note a{font-weight:var(--w-ui)}

/* ---- Suggest-a-code card: closes the platform grid ---------------------
   The header CTA and this card say the same thing, so it borrows the dashed
   border used by empty drop targets rather than pretending to be a platform. */
.platform-card-suggest{border-style:dashed;background:transparent}
.platform-card-suggest:hover{border-style:dashed;transform:translateY(-2px)}
.brand-mark-suggest{
  display:grid;
  place-items:center;
  background:var(--muted);
  color:var(--muted-foreground);
  font-family:var(--mono);
  font-size:1.5rem;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgb(15 23 42 / .1);
}
.platform-card-suggest .platform-card-id h3{font-weight:var(--w-card)}
.platform-card-suggest .platform-card-go{color:var(--primary)}
.platform-card-suggest .platform-card-offer{color:var(--muted-foreground)}

/* The heading → paragraph distance is one value everywhere. */
.basics h2{margin:0 0 1rem}
.basics h2 + p{margin-top:0}
.codes-section h2 + p,
.about-section h2 + p{margin-top:0}

/* ---- Long-form pages (about, legal, contact) -------------------------- */

/* About is the one long-form page whose wrapper is not padded, so its
   breadcrumb sat 40px higher than the same crumb on the legal pages. Same
   block-start padding as `py-10 md:py-14`, so the crumb lands at one height. */
.site-container.page-body{padding-block:2.5rem 4rem}
@media(min-width:768px){.site-container.page-body{padding-block:3.5rem 4.5rem}}

.page-body > h1:first-child,
.page-body > .post-crumb + h1{margin-top:0}
.page-body h1{margin:0 0 1rem}
.page-body article h2,
.page-body section h2{
  font-size:var(--t-h2-sm);
  line-height:1.3;
  letter-spacing:-.01em;
  font-weight:var(--w-card);
  margin:0 0 .6rem;
}
.page-body article section{margin:0 0 1.75rem}
.page-body article p{margin:0 0 1rem;line-height:1.7;color:var(--muted-foreground)}
.page-body article ul,
.page-body article ol{margin:0 0 1rem;padding-left:1.15rem}
.page-body article li{margin:0 0 .4rem;line-height:1.65;color:var(--muted-foreground)}
.page-body article li::marker{color:var(--muted-foreground)}
.page-body article a{color:var(--primary);font-weight:var(--w-ui)}
.page-body article strong{font-weight:var(--w-card);color:var(--foreground)}

/* ---- 404 ------------------------------------------------------------- */
.error-page{max-width:var(--read);padding-block:2.5rem 4rem}
@media(min-width:768px){.error-page{padding-block:3.5rem 4.5rem}}
.error-panel{text-align:center;padding-block:1.5rem 0}
.error-code{
  margin:0 0 .25rem;
  font-size:3.5rem;line-height:1;font-weight:var(--w-display);
  letter-spacing:var(--ls-display);color:var(--primary);
}
.error-lede{margin:0 0 2rem;font-size:1rem;line-height:1.65;color:var(--muted-foreground)}
.error-codes{
  margin:0 0 2rem;padding:1.1rem 1.25rem;text-align:left;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);
}
.error-codes h2{margin:0 0 .5rem;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
.error-codes ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.error-codes li + li{border-top:1px solid var(--border)}
.error-codes a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:2.5rem;font-size:.875rem;color:var(--foreground);text-decoration:none}
.error-codes a:hover{color:var(--primary)}
.error-rate{font-family:var(--mono);font-size:.75rem;color:var(--muted-foreground)}
.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}

/* ---- One quiet secondary button -------------------------------------- */
.btn-quiet{
  min-height:48px;padding:0 1.25rem;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--card);color:var(--foreground);font-size:.9375rem;
}
.btn-quiet:hover{border-color:var(--primary);color:var(--primary)}
a.btn{text-decoration:none}

/* ---- One primary action colour ---------------------------------------
   Hero CTA, header CTA, code cards, platform CTA, contact form and 404 all
   point at the same kind of action, so they all paint the same green. The
   legacy Tailwind buttons (bg-primary + h-12) are re-pointed here rather than
   rewritten page by page. */
.btn-primary,
.btn-accent,
.code-go,
.qa-go,
.page-cta-btn,
[class*="bg-primary"][class*="h-12"]{
  background:var(--savings);
  border-color:var(--savings);
  color:var(--on-savings);
}
.btn-primary:hover,
.btn-accent:hover,
.code-go:hover,
.qa-go:hover,
.page-cta-btn:hover,
[class*="bg-primary"][class*="h-12"]:hover{
  background:var(--savings-dark);
  border-color:var(--savings-dark);
  color:var(--on-savings);
}

/* ---- FAQ: one column, so opening a question cannot leave a hole ------- */
.faq-grid{grid-template-columns:minmax(0,1fr);max-width:var(--read)}
.faq-item summary{display:flex;align-items:center;gap:.75rem;font-weight:600}
.faq-item summary::after{content:"";flex:0 0 auto;margin-left:auto}
.faq-q{margin:0;font-size:var(--t-h3);font-weight:600;line-height:1.4}
.faq-answer{padding:0 1rem 1rem}

/* ---- Progressive accordion animation ---------------------------------- */
@media (prefers-reduced-motion: no-preference){
  :root{interpolate-size:allow-keywords}
  details::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .2s ease,content-visibility .2s allow-discrete;
  }
  details[open]::details-content{block-size:auto}
}

/* ---- Smooth in-page navigation ---------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ---- Two code styles only --------------------------------------------
   A code is either a label (inline pill, not clickable) or a control
   (copyable box). The pill replaces the three loose mono styles the blog
   cards and journal rows used to have. */
.code-pill{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  max-width:100%;
  padding:.2rem .5rem;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--card);
  font-size:.75rem;
  line-height:1.4;
  color:var(--muted-foreground);
}
.code-pill-label{
  font-family:var(--font-sans);
  font-size:.6875rem;
  letter-spacing:.02em;
  text-transform:none;
}
.code-pill code{
  font-size:1em;
  font-weight:500;
  color:var(--foreground);
  letter-spacing:.01em;
  max-width:14ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---- Mono everywhere a code is printed ------------------------------- */
code, kbd, samp, pre, .code-box, .inline-code, .code-pill, .post-card-code code,
.entry-code code, .qa-code .code-box, .author-post-meta code{
  font-family:var(--mono);
  font-variant-ligatures:none;
  font-feature-settings:"tnum" 1;
}

/* ==========================================================================
   Interaction, comparison and mobile pass (Nov 2026)
   --------------------------------------------------------------------------
   The audit opened with two bugs (mobile header, webfont) and then asked for
   a phone layout that is not a shrunken desktop, a comparison view on /codes,
   a real topic picker on /contact and honest copy feedback. Everything here
   is scoped: no rule is allowed to leak into a component it was not written
   for.
   ========================================================================== */

/* ---- /codes: sort, filter, view --------------------------------------- */
.codes-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem 1.25rem;margin:0 0 1rem;padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.codes-control{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;min-width:0}
.codes-control-label{
  font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-foreground);
}
.codes-view{
  display:inline-flex;align-items:center;gap:2px;padding:2px;
  border:1px solid var(--border);border-radius:var(--r-pill);background:var(--card);
}
.codes-view-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 .8rem;border-radius:var(--r-pill);
  font-size:.8125rem;font-weight:600;color:var(--muted-foreground);
}
.codes-view-link:hover{color:var(--primary)}
.codes-view-link.is-active{background:var(--primary);color:var(--primary-foreground)}
.codes-count{margin:1.25rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--muted-foreground)}

/* ---- /codes: comparison table ----------------------------------------- */
.codes-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);border-radius:var(--card-radius);
  background:var(--card);box-shadow:var(--card-shadow);
}
.codes-table{width:100%;min-width:38rem;border-collapse:collapse;font-size:.875rem}
.codes-table thead th{
  padding:.7rem .9rem;background:var(--muted);border-bottom:1px solid var(--border);
  text-align:left;font-size:.6875rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap;
}
.codes-table tbody th,
.codes-table tbody td{
  padding:.7rem .9rem;border-bottom:1px solid var(--border);
  text-align:left;vertical-align:middle;font-weight:500;
}
.codes-table tbody tr:last-child th,
.codes-table tbody tr:last-child td{border-bottom:0}
.codes-table tbody tr:hover{background:color-mix(in oklab,var(--muted) 60%,transparent)}
.codes-table-platform a{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:600;color:inherit;
}
.codes-table-platform a:hover{color:var(--primary)}
.codes-table .tbl-rate{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;
  color:var(--savings-strong);
}
.codes-table .tbl-rate.is-referrer{color:var(--primary)}
.codes-table .tbl-basis{
  display:block;margin-top:.1rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.03em;
  color:var(--muted-foreground);
}
.codes-table .tbl-none{color:var(--muted-foreground);font-size:.8125rem}
.codes-table-date{white-space:nowrap;color:var(--muted-foreground);font-size:.8125rem}

/* ---- /contact: topic picker and one form width ------------------------ */
.contact-page{max-width:48rem}
.contact-head{margin-bottom:1.5rem}
.contact-head h1{margin:0 0 .5rem;font-size:clamp(2rem,4vw,2.75rem);line-height:1.1;letter-spacing:-.03em}
.contact-form{
  padding:1.25rem;border:1px solid var(--border);border-radius:var(--card-radius);
  background:var(--card);box-shadow:var(--card-shadow);
}
.topic-picker{margin:0 0 1.25rem;padding:0;border:0}
.topic-legend{
  padding:0;margin:0 0 .65rem;
  font-size:.9375rem;font-weight:600;color:var(--foreground);
}
.topic-grid{display:grid;gap:.5rem}
@media(min-width:560px){.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.topic-card{
  position:relative;display:flex;flex-direction:column;gap:.2rem;
  padding:.75rem .85rem;min-height:44px;
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--card);cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.topic-card:hover{border-color:color-mix(in oklab,var(--primary) 40%,var(--border))}
/* 18px, not the 28px heading the old cards used: these are options, not
   sections, and the long labels no longer break onto two lines. */
.topic-title{font-size:1.125rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.topic-hint{font-size:.75rem;line-height:1.45;color:var(--muted-foreground)}
.topic-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.topic-card:has(.topic-radio:checked){
  border-color:var(--primary);
  background:color-mix(in oklab,var(--primary) 6%,var(--card));
  box-shadow:inset 0 0 0 1px var(--primary);
}
.topic-card:has(.topic-radio:focus-visible){outline:2px solid var(--primary);outline-offset:3px}

.topic-pane{display:none}
body:has(.topic-radio[value="broken"]:checked) .topic-pane-broken,
body:has(.topic-radio[value="suggest"]:checked) .topic-pane-suggest,
body:has(.topic-radio[value="correction"]:checked) .topic-pane-correction,
body:has(.topic-radio[value="partnership"]:checked) .topic-pane-partnership{display:block}
/* Without :has() every field stays visible: more verbose, never unusable. */
@supports not selector(:has(*)){
  .topic-pane{display:block}
  .topic-card.is-selected{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 6%,var(--card))}
}

.topic-panes{margin-bottom:1rem}
.form-grid{display:grid;gap:.85rem}
@media(min-width:560px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The email and the message span the full width: a 378px form in a 672px
   column was narrower than the grid above it for no reason. */
.form-grid > .form-field:has(textarea),
.form-grid > .form-field:nth-child(2){grid-column:1/-1}
.topic-pane .form-grid > .form-field:nth-child(2){grid-column:auto}
.form-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.form-label{font-size:.8125rem;font-weight:600;color:var(--foreground)}
.form-input{
  width:100%;min-height:44px;padding:.55rem .7rem;
  border:1px solid var(--input);border-radius:var(--r-md);
  background:var(--card);color:var(--foreground);
  font-size:.9375rem;line-height:1.4;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.form-input:hover{border-color:color-mix(in oklab,var(--primary) 35%,var(--input))}
.form-input:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
.form-textarea{min-height:8.5rem;resize:vertical}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.25rem}
.form-note{margin:0;flex:1 1 16rem;font-size:.75rem;line-height:1.5;color:var(--muted-foreground)}
.form-note a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.contact-aside{
  display:flex;gap:.8rem;align-items:flex-start;
  margin-top:1rem;padding:1rem 1.15rem;
  border:1px solid var(--border);border-radius:var(--card-radius);
  background:var(--muted);color:var(--foreground);
}
.contact-aside svg{flex:0 0 auto;margin-top:.15rem;color:var(--primary)}
.contact-aside-title{margin:0 0 .25rem;font-size:.9375rem;font-weight:600}
.contact-aside-copy{margin:0;font-size:.8125rem;line-height:1.55;color:var(--muted-foreground)}
.contact-aside a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---- Platform page: mobile code dock --------------------------------- */
.code-dock{display:none}
@media(max-width:767px){
  .code-dock{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--border);
    box-shadow:0 -10px 28px -18px rgb(0 0 0 / .45);
  }
  .code-dock .code-box{min-height:44px}
  .code-dock-go{
    display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
    min-height:44px;padding:0 .9rem;border-radius:var(--r-md);
    /* Same green as every other primary action on the page it duplicates. */
    background:var(--savings);color:var(--on-savings);
    font-size:.875rem;font-weight:600;white-space:nowrap;
  }
  .code-dock .link-only{min-height:44px;padding-inline:.6rem}
  .code-dock-go:hover{background:var(--savings-dark);color:var(--on-savings)}
  /* The dock must not cover the last line of the page. `.page-body` clears it
     inside <main>; the footer sits outside main, so it needs its own room. */
  .page-body{padding-bottom:6rem}
  body:has(.code-dock) .site-footer{padding-bottom:calc(2rem + 5rem + env(safe-area-inset-bottom))}
}

/* ---- Mobile: header, hero, platform rows, blog rows ------------------- */
@media(max-width:767px){
  /* Header: the desktop nav is hidden by `md:flex`, and the CTA has to fit
     beside the logo and the menu button without widening the viewport. */
  .site-header-inner{gap:.5rem}
  .site-brand{gap:.5rem;min-width:0}
  .site-brand img{width:1.9rem;height:1.9rem}
  .site-brand-name{font-size:1rem;white-space:nowrap}
  .header-cta{
    display:inline-flex;min-width:0;min-height:44px;
    padding-inline:.7rem;font-size:.8125rem;
  }
  .mnav summary{margin-inline-start:0}

  /* Hero: the top-deals panel should start inside the first screen. */
  .hero-inner{gap:1.5rem;padding:2rem 1rem 2.25rem}
  .hero h1{max-width:none;font-size:clamp(1.95rem,8.2vw,2.5rem);line-height:1.06}
  .hero-eyebrow{margin-bottom:.85rem;font-size:.6875rem}
  .hero-lede{margin-bottom:1.4rem;font-size:.9375rem;line-height:1.55}
  .hero-cta{gap:.5rem;margin-bottom:1.5rem}
  .hero-cta .btn{min-height:44px;padding:0 1.05rem;font-size:.9375rem}
  .hero-stats{gap:.4rem 1rem;flex-wrap:nowrap;justify-content:space-between;align-items:flex-start}
  .hero-stats dd{font-size:.9375rem}
  .hero-stats dt{font-size:.5625rem;letter-spacing:.06em}
  .hero-stats div{min-width:0}
  .hero-deal{padding:.7rem .85rem}
  .hero-deal-rate{font-size:1.125rem}
  .hero-deals-head{padding:.8rem .9rem .6rem}
  .hero-deals-foot{padding:.6rem .9rem}

  /* Platform grid: 13 stacked 152px cards became a 64px list. Only the first
     six rows are shown; the rest live on /codes behind one explicit link. */
  .platform-grid{gap:.5rem}
  .platform-card{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:.7rem;
    min-height:64px;padding:.55rem .75rem;height:auto;
  }
  .platform-card-head{display:contents}
  .platform-card-id{flex-direction:row;align-items:center;gap:.45rem;min-width:0}
  .platform-card-id h3{font-size:.9375rem}
  .platform-card-id .type-chip{display:none}
  .platform-card .deal-rate{font-size:1.0625rem;line-height:1.05}
  .platform-card .deal-rate span{font-size:.5625rem;letter-spacing:.04em}
  .platform-card-offer,
  .platform-card-go{display:none}
  .platform-card .brand-mark{width:2.25rem;height:2.25rem;padding:.3rem}
  .platform-card:hover{transform:none}
  .platform-card.is-extra{display:none}
  .platform-card-suggest{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-height:0;padding:.85rem}
  .platform-card-suggest .platform-card-head{display:flex}
  .platform-card-suggest .platform-card-id{flex-direction:column;align-items:flex-start}
  .platform-card-suggest .type-chip{display:inline-block}
  .platform-card-suggest .platform-card-offer{display:block;font-size:.8125rem}
  .platform-card-suggest .platform-card-go{display:block;padding-top:.2rem}

  /* Blog cards: 88px thumbnail on the left, headline on the right. */
  .post-grid{gap:.6rem}
  .post-card{flex-direction:row;align-items:stretch}
  .post-card-cover{flex:0 0 88px;width:88px;aspect-ratio:auto;min-height:88px}
  .post-card-body{gap:.25rem;padding:.6rem .7rem;justify-content:center}
  .post-card-desc,
  .post-card-foot{display:none}
  .post-card-title{font-size:1rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .post-card-meta{font-size:.625rem}
  .post-card:hover{transform:none}

  /* /blog rows follow the same rule. */
  .entry{grid-template-columns:88px minmax(0,1fr);gap:.8rem;align-items:start}
  .entry-media{width:88px;height:88px;aspect-ratio:auto}
  .entry-desc{-webkit-line-clamp:2}
  .entry-foot{padding-top:.45rem}
}

/* ---- Touch targets ---------------------------------------------------- */
/* Everything interactive reaches 44px on a phone. Inline text links keep
   their line box: the padding is balanced with a negative margin so the text
   does not move. */
@media(max-width:767px){
  .hero-deals-head a,
  .hero-deal-link,
  .section-link,
  .deal-card-link,
  .post-card-go,
  .entry-go,
  .site-footer a,
  .cat-strip-link,
  .filter-chip,
  .codes-view-link,
  .code-go,
  .copy-link{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .hero-deals-head a,
  .hero-deal-link,
  .section-link,
  .deal-card-link,
  .post-card-go,
  .entry-go,
  .site-footer a{padding-block:.55rem;margin-block:-.55rem}
  .site-brand{min-height:44px}
  .code-box{min-height:44px}
  .cat-strip-link,
  .filter-chip,
  .codes-view-link,.code-go{min-height:44px}
  .codes-view-link{padding-inline:.7rem}
  .site-footer .footer-col a{display:inline-flex}
}

/* ---- Platform grid: the "see all" bridge ------------------------------ */
.platform-more{display:none;margin:1rem 0 0;text-align:center}
@media(max-width:767px){
  .platform-more{display:block}
  .platform-more .btn{width:100%;min-height:48px}
}

/* ---- Small-screen toolbar --------------------------------------------- */
@media(max-width:767px){
  .codes-toolbar{gap:.6rem}
  .codes-control{width:100%}
  .codes-control-label{width:100%}
  .filter-chip{flex:1 1 auto;justify-content:center}
  .codes-view{width:100%;margin-top:.1rem}
  .codes-view-link{flex:1}
}

/* ==========================================================================
   Print
   --------------------------------------------------------------------------
   Guides get printed and turned into PDFs, and the screen layout spends the
   first page on navigation and the last on calls to action. Print gets the
   article: headline, byline, prose, tables, notes.
   ========================================================================== */
@media print{
  @page{margin:18mm 16mm}

  html,body{background:#fff !important;color:#000 !important}
  .site-header,
  .site-footer,
  .site-container > .breadcrumb-bar,
  .post-crumb,
  .post-aside,
  .quick-answer,
  .next-steps,
  .post-module,
  .skip-link,
  .copy-toast,
  .code-row,
  .header-cta{display:none !important}

  .post-article{display:block !important;max-width:none;margin:0;padding:0}
  .post-article > *{grid-column:auto !important}

  .post-title{font-size:22pt;line-height:1.15;margin:0 0 6pt}
  .post-standfirst{font-size:11pt;color:#333 !important;margin:0 0 12pt}

  /* The cover is decorative; at print sizes it eats half a page. */
  .post-hero{display:none !important}

  .post-body{font-size:10.5pt;line-height:1.5}
  .post-body h2{font-size:13pt;margin:14pt 0 5pt;break-after:avoid-page}
  .post-body h3{font-size:11pt;break-after:avoid-page}
  .post-body p{margin:0 0 7pt}

  /* A printed paper cannot be clicked, so the destination has to be visible.
     Internal links are dropped: they point at pages the reader already has. */
  .post-body a[href^="http"]::after{
    content:" (" attr(href) ")";font-size:.8em;word-break:break-all;
  }
  .post-body a{color:#000 !important;text-decoration:underline}

  .note,.data-table,.faq-item{break-inside:avoid}
  .table-wrap{overflow:visible}
  .data-table{font-size:9pt;width:100%}
  .data-table caption{font-size:9pt;text-align:left;color:#333}

  /* The FAQ is a <details> accordion; open it, or print shows only questions. */
  .faq-item{border:0;padding:0;margin:0 0 6pt}
  .faq-item > summary{list-style:none}
  .faq-item .faq-answer{display:block !important}
}