/* ============================================================================
   site.css - O With Accent design system.
   Tokens, base type, header, footer, mobile drawer, buttons, cards, sections,
   guide/blog components, FAQ, reviews and utilities. The generator tool UI
   lives in style.css and consumes the tokens declared here.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Fonts - Poppins (OFL). Preloaded 400/700 in each page head.
   --------------------------------------------------------------------------- */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */
:root{
  /* Brand crimson scale from #A6192E.
     Every step that ever carries text has been picked so the pairings used in
     the UI clear WCAG AA: --brand on --surface is 7.4:1, --brand on
     --brand-050 is 6.9:1, and #fff on --brand-600 is 5.9:1. */
  --brand-950:#3F050D; --brand-900:#630916; --brand-800:#84101F;
  --brand:#A6192E;     --brand-700:#96162A; --brand-600:#B92336; --brand-500:#C9354B;
  --brand-400:#DE6072; --brand-300:#ECA0AB; --brand-200:#F5C8CF;
  --brand-100:#FBE6E9; --brand-050:#FDF4F5;

  /* Accent tones for card variety. The 700 steps are the only ones used for
     text or icon strokes, so they stay dark enough on their 050 tints. */
  --cyan-700:#0B647A; --cyan-500:#18A0BF; --cyan-100:#D2EEF5; --cyan-050:#ECF8FB;
  --amber-700:#835708; --amber-500:#C68A17; --amber-100:#F7E8CE; --amber-050:#FCF6EA;
  --violet-700:#513397; --violet-500:#7C5AD6; --violet-100:#E7E0F8; --violet-050:#F3EFFC;
  /* Gold is the premium accent: ratings, badges and quiet emphasis. */
  --gold-700:#8A6314; --gold-500:#C08A2E; --gold-100:#F6ECD6; --gold-050:#FBF6EA;

  /* Ink - warm neutral greys so the crimson never reads cold. */
  --ink-950:#101216; --ink-900:#1A1D22; --ink-800:#272B31;
  --ink-700:#3A4048; --ink-600:#4B525B; --ink-500:#575E68;
  --ink-400:#5C636D; --ink-300:#727A84;

  /* Surfaces (light) - warm off-white paper rather than blue-grey. */
  --canvas:#F4F3F1;
  --surface:#FFFFFF;
  --surface-2:#FAFAF8;
  --surface-3:#EFEEEB;
  --line:#E4E2DD;
  --line-2:#C6C3BC;
  --silver:#B4B0A8;
  --overlay:rgba(16,18,22,.56);
  --header-line:#DEDBD5;
  --footer-bg:#101216;
  --footer-text:#C3C7CD;
  --footer-mute:#A0A6AE;

  --text:var(--ink-900);
  --text-soft:var(--ink-600);
  --text-mute:var(--ink-400);
  --heading:var(--ink-950);

  --paper:#FFFFFF; --paper-2:#FAFAF8; --paper-line:#E4E2DD; --paper-ink:#1A1D22;

  --grad-brand:linear-gradient(135deg,#C9354B 0%,#A6192E 48%,#7A0F1F 100%);
  --grad-deep:linear-gradient(140deg,#14161B 0%,#221016 54%,#3A0E19 100%);
  --grad-sheen:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,0));

  --sh-xs:0 1px 2px rgba(16,18,22,.05);
  --sh-sm:0 2px 6px -2px rgba(16,18,22,.09),0 6px 18px -12px rgba(16,18,22,.16);
  --sh-md:0 6px 16px -8px rgba(16,18,22,.14),0 18px 42px -22px rgba(16,18,22,.24);
  --sh-lg:0 10px 24px -12px rgba(16,18,22,.16),0 34px 70px -32px rgba(16,18,22,.30);
  --sh-brand:0 12px 28px -14px rgba(166,25,46,.5);

  --r-2xl:24px; --r-xl:18px; --r-lg:14px; --r-md:10px; --r-sm:7px; --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --t-fast:.16s; --t:.26s; --t-slow:.55s;

  --font:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Code","Roboto Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1220px;
  --header-h:76px;
  --keyword:var(--brand);

  /* On-dark text steps, shared by the hero, the CTA band and the footer so
     every dark panel uses the same three legible tiers. */
  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(255,255,255,.88);
  --on-dark-mute:rgba(255,255,255,.72);
  --on-dark-line:rgba(255,255,255,.16);
  --on-dark-fill:rgba(255,255,255,.07);

  --ok:#0F7A55; --ok-ink:#FFFFFF;
}

/* Dark theme.
   The crimson has to lift a long way to stay readable on near-black: --brand
   at #FF7C8E is 7.9:1 on --surface, where the old #F0576F sat at 5.2:1 and
   dropped below AA on the darker cards. The 200/100/050 steps invert into
   tints so every `background:var(--brand-050)` rule keeps working. */
[data-theme="dark"]{
  --brand:#FF7C8E; --brand-700:#FF6A7F; --brand-600:#F5647A; --brand-500:#FF7C8E;
  --brand-400:#FF9BA9; --brand-300:#FFB9C3; --brand-200:#5E2029;
  --brand-100:#3D1620; --brand-050:#2B1119;
  --brand-800:#FF9BA9; --brand-900:#FFB9C3; --brand-950:#FFD6DC;

  --cyan-700:#6FD4EC; --cyan-100:#0C3A45; --cyan-050:#0B2C34;
  --amber-700:#F0C264; --amber-100:#3A2C0E; --amber-050:#2C210B;
  --violet-700:#BCA6F5; --violet-100:#2A1F4A; --violet-050:#221940;
  --gold-700:#E8C273; --gold-500:#D9AC4F; --gold-100:#3A2E12; --gold-050:#2B220E;

  --canvas:#0A0B0E;
  --surface:#13161B;
  --surface-2:#171A20;
  --surface-3:#1F232B;
  --line:#272C34;
  --line-2:#3A404A;
  --silver:#616874;
  --overlay:rgba(0,0,0,.62);
  --header-line:#20242B;
  --footer-bg:#07080A;
  --footer-text:#C0C6CE;
  --footer-mute:#949BA5;

  --text:#ECEFF3;
  --text-soft:#B6BEC8;
  --text-mute:#939CA7;
  --heading:#F5F7FA;

  --sh-sm:0 2px 6px -2px rgba(0,0,0,.5),0 6px 18px -12px rgba(0,0,0,.6);
  --sh-md:0 6px 16px -8px rgba(0,0,0,.55),0 18px 42px -22px rgba(0,0,0,.7);
  --sh-lg:0 10px 24px -12px rgba(0,0,0,.6),0 34px 70px -32px rgba(0,0,0,.8);
  --sh-brand:0 12px 28px -14px rgba(0,0,0,.8);
  --grad-brand:linear-gradient(135deg,#D8405A 0%,#A6192E 58%,#7A0F1F 100%);
  --grad-deep:linear-gradient(140deg,#0C0E12 0%,#190C11 58%,#26101A 100%);

  --ok:#14895E;
}

/* ---------------------------------------------------------------------------
   Reset + base
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{font-family:var(--font);background:var(--canvas);color:var(--text);line-height:1.6;
  font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{color:var(--heading);line-height:1.18;font-weight:700;letter-spacing:-.01em}
button{font-family:inherit}
::selection{background:var(--brand-200);color:var(--ink-950)}
[data-theme="dark"] ::selection{background:var(--brand-200);color:#fff}

/* Hide the page only while the shared header/footer are still being injected.
   site.js adds .shell-ready to <html> the moment the shell is in place, and the
   inline head script strips .js altogether if the scripts never run, so the body
   can never stay hidden. */
html.js body{visibility:hidden}
html.js.shell-ready body{visibility:visible}

.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
@media (max-width:640px){.wrap{width:min(var(--wrap),100% - 28px)}}

.skip-link{position:absolute;left:12px;top:-60px;z-index:1200;background:var(--brand);color:#fff;
  padding:10px 16px;border-radius:var(--r-md);font-weight:600;transition:top var(--t) var(--ease)}
.skip-link:focus{top:12px}

:focus-visible{outline:3px solid var(--brand-400);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:900;background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--header-line)}
.nav{display:flex;align-items:center;gap:18px;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none}
.brand-mark svg{width:42px;height:42px;display:block;border-radius:13px;box-shadow:var(--sh-brand)}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text b{font-size:1.06rem;font-weight:800;color:var(--heading);letter-spacing:-.02em}
.brand-text span{font-size:.68rem;color:var(--text-mute);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

.nav-links{list-style:none;padding:0;display:flex;align-items:center;gap:2px}
.nav-links-bar{margin-left:auto}
.nav-links-bar a{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:var(--r-pill);
  color:var(--text-soft);font-weight:600;font-size:.92rem;transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.nav-links-bar a .nav-ico{display:none}
.nav-links-bar a:hover{color:var(--brand);background:var(--brand-050)}
.nav-links-bar a.active{color:var(--brand);background:var(--brand-050)}
[data-theme="dark"] .nav-links-bar a:hover,[data-theme="dark"] .nav-links-bar a.active{background:var(--brand-100)}

.nav-cta{display:flex;align-items:center;gap:8px;flex:none}
.theme-toggle{width:42px;height:42px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);
  color:var(--text-soft);cursor:pointer;display:grid;place-items:center;transition:all var(--t) var(--ease)}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand-300)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

.burger{display:none;width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t)}

.head-progress{height:2px;background:transparent}
.head-progress i{display:block;height:100%;width:0;background:var(--grad-brand);transition:width .1s linear}

@media (max-width:1000px){
  .nav-links-bar{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:flex}
}

@media (max-width:420px){
  .nav{gap:10px}
  .brand{gap:8px;min-width:0}
  .brand-mark svg{width:38px;height:38px;border-radius:11px}
  .brand-text b{font-size:.92rem}
  .brand-text span{font-size:.58rem}
  .nav-cta{gap:6px}
  .theme-toggle,.burger{width:40px;height:40px}
}

/* ---------------------------------------------------------------------------
   Mobile drawer
   --------------------------------------------------------------------------- */
.nav-scrim{position:fixed;inset:0;background:var(--overlay);opacity:0;visibility:hidden;z-index:998;
  transition:opacity var(--t) var(--ease),visibility var(--t)}
.nav-scrim.show{opacity:1;visibility:visible}
.nav-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(340px,86vw);background:var(--surface);z-index:999;
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease);display:flex;flex-direction:column;
  padding:20px;box-shadow:var(--sh-lg);overflow-y:auto}
.nav-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.drawer-title{font-weight:800;font-size:1.05rem;color:var(--heading)}
.drawer-close{width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);
  cursor:pointer;display:grid;place-items:center;color:var(--text-soft)}
.drawer-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav-links-drawer{flex-direction:column;align-items:stretch;gap:4px;margin-top:8px}
.nav-links-drawer a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-lg);
  color:var(--text);font-weight:600;transition:background var(--t) var(--ease)}
.nav-links-drawer a:hover,.nav-links-drawer a.active{background:var(--surface-3)}
.nav-links-drawer .nav-ico svg{width:30px;height:30px;display:block}
.nav-ico .ic-bg{fill:var(--brand-050)}
.nav-ico .ic-fg{fill:var(--brand)}
.nav-ico .ic-cut{fill:var(--brand-050)}
[data-theme="dark"] .nav-ico .ic-bg{fill:var(--brand-100)}
[data-theme="dark"] .nav-ico .ic-cut{fill:var(--brand-100)}
.drawer-note{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:16px;color:var(--text-mute);font-size:.85rem}
.drawer-note svg{width:20px;height:20px;fill:var(--brand);flex:none}
.drawer-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);font-size:.78rem;color:var(--text-mute)}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 20px;border-radius:var(--r-pill);
  font-weight:700;font-size:.94rem;cursor:pointer;border:1.5px solid transparent;transition:transform var(--t) var(--spring),
  box-shadow var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);white-space:nowrap}
.btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn-lg{padding:14px 26px;font-size:1rem}
.btn-solid{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(166,25,46,.7)}
.btn-line{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */
.sct{padding:clamp(48px,7vw,92px) 0}
.sct-alt{background:var(--surface-2);border-block:1px solid var(--line)}
.sec-head{max-width:740px;margin:0 auto clamp(30px,4vw,48px);text-align:center}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:16px 0 12px;letter-spacing:-.02em}
.sec-head p{color:var(--text-soft);font-size:1.03rem;line-height:1.68}
.hl{color:var(--brand)}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:var(--r-pill);
  background:var(--brand-050);border:1px solid var(--brand-100);color:var(--brand);font-weight:700;font-size:.73rem;
  letter-spacing:.1em;text-transform:uppercase}
.eyebrow-pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .eyebrow-pill{border-color:var(--brand-200)}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------------------------
   Cards (generic)
   --------------------------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;
  box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--brand-200)}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feature-grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.feature-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feature-grid-4{grid-template-columns:1fr}}
.f-ico{width:52px;height:52px;border-radius:var(--r-lg);background:var(--brand-050);
  display:grid;place-items:center;margin-bottom:16px}
.f-ico svg{width:26px;height:26px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-tone=cyan] .f-ico{background:var(--cyan-050)}[data-tone=cyan] .f-ico svg{stroke:var(--cyan-700)}
[data-tone=amber] .f-ico{background:var(--amber-050)}[data-tone=amber] .f-ico svg{stroke:var(--amber-700)}
[data-tone=violet] .f-ico{background:var(--violet-050)}[data-tone=violet] .f-ico svg{stroke:var(--violet-700)}
.feature-card h3{font-size:1.1rem;margin-bottom:8px}
.feature-card p{color:var(--text-soft);font-size:.95rem}

/* ---------------------------------------------------------------------------
   Feature mosaic - the newer section layout. One bordered slab whose cells are
   separated by the container background showing through a 1px grid gap, so the
   whole block reads as a single premium object instead of scattered cards.
   --------------------------------------------------------------------------- */
.mosaic{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-sm)}
.mosaic-4{grid-template-columns:repeat(4,1fr)}
.mosaic-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.mosaic-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.mosaic-3{grid-template-columns:1fr}}
@media (max-width:600px){.mosaic-4{grid-template-columns:1fr}}
.mosaic-cell{position:relative;background:var(--surface);padding:clamp(22px,2.4vw,28px);
  display:flex;flex-direction:column;transition:background var(--t) var(--ease)}
.mosaic-cell::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.mosaic-cell:hover{background:var(--surface-2)}
.mosaic-cell:hover::after{transform:scaleX(1)}
.mosaic-cell h3{font-size:1.06rem;margin-bottom:9px;letter-spacing:-.005em}
.mosaic-cell p{color:var(--text-soft);font-size:.94rem;line-height:1.62}
.mosaic-index{position:absolute;top:20px;right:22px;font-family:var(--mono);font-size:.76rem;
  font-weight:700;color:var(--text-mute);letter-spacing:.06em}

/* Steps - a connected flow rail rather than three loose cards. */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px);position:relative}
@media (max-width:820px){.flow{grid-template-columns:1fr;gap:0}}
.flow-step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,2.6vw,30px);box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.flow-step:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--brand-200)}
/* The rail links one card to the next. It is drawn from the card itself so it
   cannot drift out of alignment when the grid reflows. */
.flow-step::after{content:"";position:absolute;top:50%;right:calc(-1 * clamp(18px,2.4vw,26px));
  width:clamp(18px,2.4vw,26px);height:1px;background:var(--line-2)}
.flow-step:last-child::after{display:none}
@media (max-width:820px){
  .flow-step{margin-bottom:26px}
  .flow-step:last-child{margin-bottom:0}
  .flow-step::after{top:auto;bottom:-26px;right:auto;left:50%;width:1px;height:26px}
}
.flow-num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;
  background:var(--grad-brand);color:#fff;font-family:var(--mono);font-size:1rem;font-weight:700;
  box-shadow:var(--sh-brand);margin-bottom:16px;letter-spacing:.02em}
.flow-step h3{font-size:1.14rem;margin-bottom:9px}
.flow-step p{color:var(--text-soft);font-size:.95rem;line-height:1.62}
/* Legacy step cards kept working for any page still using them. */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){.steps-grid{grid-template-columns:1fr}}
.step-card{position:relative;overflow:hidden}
.step-num{font-family:var(--mono);font-size:2.4rem;font-weight:700;color:var(--brand-400);line-height:1;margin-bottom:12px}
.step-card h3{font-size:1.15rem;margin-bottom:8px}
.step-card p{color:var(--text-soft);font-size:.95rem}

/* About split */
.about-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center}
@media (max-width:900px){.about-split{grid-template-columns:1fr}}
.about-copy h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:14px 0 16px}
.about-copy>p{color:var(--text-soft);margin-bottom:14px}
.about-list{list-style:none;padding:0;margin-top:18px;display:grid;gap:12px}
.about-list li{display:flex;gap:12px;align-items:flex-start}
.about-list svg{width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.about-list span{color:var(--text);font-size:.96rem}
.about-media img{border-radius:var(--r-2xl);box-shadow:var(--sh-lg);border:1px solid var(--line)}

/* Reference table */
.ref-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-sm);
  background:var(--surface);-webkit-overflow-scrolling:touch}
.ref-table{width:100%;border-collapse:collapse;min-width:660px}
.ref-table th,.ref-table td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.94rem}
.ref-table th{background:var(--surface-3);color:var(--heading);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em}
.ref-table tbody tr:last-child td{border-bottom:0}
.ref-table tbody tr{transition:background var(--t-fast) var(--ease)}
.ref-table tbody tr:hover{background:var(--surface-2)}
.ref-table .rt-glyph{font-family:var(--serif);font-size:1.55rem;font-weight:700;color:var(--brand);width:1%;white-space:nowrap}
.ref-table code{font-family:var(--mono);font-size:.85rem;background:var(--surface-3);padding:3px 8px;border-radius:6px;color:var(--text);
  border:1px solid var(--line)}
.tag-cell{white-space:nowrap}
.tag-normal,.tag-mid,.tag-hi{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);font-size:.76rem;font-weight:700}
.tag-normal{background:var(--cyan-050);color:var(--cyan-700)}
.tag-mid{background:var(--amber-050);color:var(--amber-700)}
.tag-hi{background:var(--brand-050);color:var(--brand)}
/* On narrow screens the scrollable table needs to announce itself. */
.chart-note{text-align:center;margin-top:18px;color:var(--text-soft);font-size:.9rem;line-height:1.6}
.chart-note a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.table-scroll-hint{display:none;font-size:.8rem;color:var(--text-mute);margin-bottom:10px;align-items:center;gap:7px}
.table-scroll-hint svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.table-scroll-hint{display:flex}}

/* ---------------------------------------------------------------------------
   Reviews - rating summary + paged carousel.

   The track is a native horizontal scroller with scroll snapping, so touch
   swipe, trackpad flick and keyboard scrolling all work without JavaScript.
   home.js only drives the arrows, the dots and the autoplay on top of it.
   --------------------------------------------------------------------------- */
.rating-summary{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:clamp(22px,3vw,30px) clamp(24px,3.4vw,38px);box-shadow:var(--sh-sm);margin-bottom:clamp(26px,3.4vw,38px)}
@media (max-width:720px){.rating-summary{grid-template-columns:1fr;text-align:center;justify-items:center;gap:18px}}
.rs-score{display:flex;flex-direction:column;align-items:center;gap:6px;padding-right:clamp(20px,3vw,40px);
  border-right:1px solid var(--line)}
@media (max-width:720px){.rs-score{border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px;width:100%}}
.rs-value{font-size:clamp(2.4rem,5vw,3.1rem);font-weight:800;line-height:1;color:var(--heading);letter-spacing:-.03em}
.rs-out{font-size:.8rem;color:var(--text-mute);font-weight:600;letter-spacing:.04em}
.rs-meta{display:flex;flex-direction:column;gap:10px}
.rs-meta h3{font-size:1.12rem;margin:0}
.rs-meta p{color:var(--text-soft);font-size:.94rem;margin:0;max-width:60ch}
.rs-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:2px}
@media (max-width:720px){.rs-facts{justify-content:center}}
.rs-fact{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--text-soft);font-weight:600}
.rs-fact svg{width:16px;height:16px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.rc-stars{display:inline-flex;gap:3px;line-height:0}
.rc-stars svg{width:17px;height:17px}
.rc-stars .on svg{fill:var(--gold-500);stroke:none}
.rc-stars .half svg{fill:var(--gold-500);stroke:none;opacity:.55}
.rc-stars .off svg{fill:none;stroke:var(--line-2);stroke-width:1.6}
.rs-score .rc-stars svg{width:20px;height:20px}

.review-carousel{position:relative}
.rc-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  margin-inline:-4px;padding:4px}
.rc-viewport::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.rc-viewport{scroll-behavior:auto}}
.rc-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;list-style:none;padding:0;margin:0}
@media (max-width:1040px){.rc-track{grid-auto-columns:calc((100% - 22px)/2)}}
@media (max-width:700px){.rc-track{grid-auto-columns:100%;gap:16px}}

.rc-card{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(22px,2.4vw,28px);box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:14px;height:100%;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.rc-card:hover{border-color:var(--brand-200);box-shadow:var(--sh-md)}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rc-tag{font-size:.72rem;font-weight:700;color:var(--brand);background:var(--brand-050);padding:5px 11px;
  border-radius:var(--r-pill);border:1px solid var(--brand-100)}
.rc-quote-mark{font-family:var(--serif);font-size:2.6rem;line-height:.6;color:var(--brand-200);height:18px}
.rc-card blockquote{color:var(--text-soft);font-size:.95rem;line-height:1.66;flex:1;margin:0}
.rc-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.rc-avatar{width:44px;height:44px;border-radius:50%;background:var(--grad-brand);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:.92rem;flex:none;letter-spacing:.02em}
.rc-who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.rc-who b{color:var(--heading);font-size:.93rem}
.rc-who span{color:var(--text-mute);font-size:.82rem}
.rc-verified{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;
  color:var(--ok);white-space:nowrap}
[data-theme="dark"] .rc-verified{color:#4ED8A2}
.rc-verified svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.rc-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(20px,2.6vw,28px);flex-wrap:wrap}
.rc-dots{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;flex:1;order:2}
.rc-dot{width:9px;height:9px;padding:0;border-radius:var(--r-pill);border:none;background:var(--line-2);cursor:pointer;
  transition:width var(--t) var(--ease),background var(--t) var(--ease)}
.rc-dot.is-on{width:30px;background:var(--brand)}
.rc-dot:focus-visible{outline:3px solid var(--brand-400);outline-offset:3px}
.rc-nav{display:inline-flex;align-items:center;gap:10px;order:1}
.rc-bar .rc-play{order:3}
@media (max-width:620px){
  .rc-dots{order:1;flex-basis:100%}
  .rc-nav{order:2}
  .rc-bar .rc-play{order:3}
  .rc-bar{justify-content:center}
}
.rc-btn{height:46px;min-width:46px;padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:var(--surface);color:var(--text-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;font-weight:700;font-size:.85rem;transition:all var(--t) var(--ease)}
.rc-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand);background:var(--brand-050)}
.rc-btn:disabled{opacity:.42;cursor:not-allowed}
.rc-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rc-play .ico-play{display:none}
.rc-play.is-paused .ico-pause{display:none}
.rc-play.is-paused .ico-play{display:block}

/* ---------------------------------------------------------------------------
   Blog / guide cards
   --------------------------------------------------------------------------- */
.blog-grid{display:grid;gap:24px}
.blog-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.blog-grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.blog-grid-3{grid-template-columns:1fr}}
.b-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.b-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--brand-200)}
.b-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-3)}
.b-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.b-card:hover .b-media img{transform:scale(1.05)}
/* The tag sits over artwork, so it carries its own solid crimson rather than
   the theme token: in dark mode --brand lifts to a pink that white text
   cannot sit on. */
.b-tag{position:absolute;top:14px;left:14px;background:#A6192E;color:#fff;
  padding:5px 12px;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;
  box-shadow:0 2px 10px -4px rgba(16,18,22,.6);z-index:1}
.b-body{padding:20px;display:flex;flex-direction:column;flex:1}
.b-meta{display:flex;gap:12px;color:var(--text-mute);font-size:.8rem;margin-bottom:10px}
.b-meta span{position:relative}
.b-meta span+span::before{content:"\00b7";position:absolute;left:-8px}
.b-body h3{font-size:1.12rem;margin-bottom:9px;line-height:1.32}
.b-card:hover .b-body h3{color:var(--brand)}
.b-body p{color:var(--text-soft);font-size:.9rem;flex:1;margin-bottom:14px}
.b-more{display:inline-flex;align-items:center;gap:7px;color:var(--brand);font-weight:700;font-size:.88rem}
.b-more svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--ease)}
.b-card:hover .b-more svg{transform:translateX(4px)}
.blog-foot{text-align:center;margin-top:36px}

/* Pagination */
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:36px}
.pager button{min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-md);border:1px solid var(--line-2);
  background:var(--surface);color:var(--text-soft);cursor:pointer;font-weight:700;font-size:.92rem;
  display:inline-flex;align-items:center;justify-content:center;transition:all var(--t) var(--ease)}
.pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pager button.is-current{background:var(--grad-brand);color:#fff;border-color:transparent}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.posts-status{text-align:center;color:var(--text-mute);font-size:.88rem;margin-top:18px}

/* CTA band */
.cta-band{background:var(--grad-deep);color:#fff;border-radius:var(--r-2xl);padding:clamp(30px,5vw,54px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:16px 16px;z-index:0}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:10px}
.cta-band p{color:var(--on-dark-soft);max-width:52ch}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-line{background:var(--on-dark-fill);color:#fff;border-color:rgba(255,255,255,.34)}
.cta-band .btn-line:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff}
@media (max-width:640px){.cta-actions .btn{width:100%}}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */
.faq-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px;margin:0 auto}
@media (max-width:820px){.faq-columns{grid-template-columns:1fr}}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--t)}
.faq-item[open]{border-color:var(--brand-300)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;color:var(--heading);
  display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.98rem}
.faq-item summary::-webkit-details-marker{display:none}
.q-ico{width:26px;height:26px;border-radius:50%;background:var(--brand-050);display:grid;place-items:center;flex:none;transition:transform var(--t) var(--ease)}
.q-ico svg{width:15px;height:15px;fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round}
[data-theme="dark"] .q-ico{background:var(--brand-100)}
.faq-item[open] .q-ico{transform:rotate(45deg)}
.faq-panel{padding:0 18px 18px}
.faq-body{color:var(--text-soft);font-size:.93rem;line-height:1.62}
.faq-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:clamp(44px,6vw,72px) 0 28px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .brand-text b{color:#fff}
.footer-brand .brand-text span{color:var(--footer-mute)}
.footer-brand>p{margin:16px 0;font-size:.9rem;color:var(--footer-mute);line-height:1.6}
.footer-privacy{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--footer-text)}
.footer-privacy svg{width:18px;height:18px;fill:var(--brand);flex:none}
.footer-col h4{color:#fff;font-size:.95rem;margin-bottom:14px}
.footer-col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-col a{display:inline-flex;align-items:center;gap:6px;color:var(--footer-mute);font-size:.88rem;transition:color var(--t) var(--ease)}
.footer-col a:hover{color:#fff}
.footer-link-arrow{width:14px;height:14px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-4px);transition:all var(--t) var(--ease);flex:none}
.footer-col a:hover .footer-link-arrow{opacity:1;transform:none}
.footer-note{margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:.82rem;color:var(--footer-mute);line-height:1.6}
.footer-note strong{color:var(--footer-text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;font-size:.82rem;color:var(--footer-mute)}
.footer-keyword-link{color:var(--brand-400)}
.footer-badges{display:flex;gap:14px;flex-wrap:wrap}
.footer-badge{display:inline-flex;align-items:center;gap:6px}
.footer-badge svg{width:15px;height:15px;fill:none;stroke:var(--brand-400);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Back to top + toast */
.back-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;border:none;background:var(--grad-brand);
  color:#fff;cursor:pointer;box-shadow:var(--sh-brand);display:grid;place-items:center;opacity:0;visibility:hidden;
  transform:translateY(10px);transition:all var(--t) var(--ease);z-index:800}
.back-top.show{opacity:1;visibility:visible;transform:none}
.back-top:hover{transform:translateY(-3px)}
.back-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.owa-toast,.pf-toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--ink-950);color:#fff;
  padding:12px 22px;border-radius:var(--r-pill);font-weight:600;font-size:.9rem;box-shadow:var(--sh-lg);opacity:0;visibility:hidden;
  transition:all var(--t) var(--spring);z-index:1100;max-width:90vw;text-align:center}
.owa-toast.show,.pf-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------------------------------------------------------------------------
   Page hero (interior pages) + breadcrumb
   --------------------------------------------------------------------------- */
.page-hero{background:var(--grad-deep);color:#fff;padding:clamp(40px,6vw,68px) 0 clamp(34px,4vw,48px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:15px 15px}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:12px;letter-spacing:-.02em}
.page-hero>.wrap>p{color:var(--on-dark-soft);max-width:64ch;font-size:1.05rem}
.crumbs{font-size:.85rem;color:var(--on-dark-mute);margin-bottom:16px}
.crumbs a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.crumbs span{margin:0 6px}

/* ---------------------------------------------------------------------------
   Guide layout + prose
   --------------------------------------------------------------------------- */
.page-hero-guide + .wrap{padding-block:clamp(40px,5vw,64px)}
.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
@media (max-width:960px){.guide-layout{grid-template-columns:1fr}}
/* The hero is a <figure> wrapping the <img>, so the ratio and cropping have to
   sit on the image itself; on the figure object-fit does nothing and the image
   would float inside an over-tall frame. */
.guide-hero-img{width:100%;border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--sh-sm);margin:0 0 28px;overflow:hidden}
.guide-hero-img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.guide-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--text-mute);font-size:.86rem;margin-bottom:24px}
.g-tag{background:var(--brand-050);color:var(--brand);padding:4px 12px;border-radius:var(--r-pill);font-weight:700;font-size:.78rem}
[data-theme="dark"] .g-tag{background:var(--brand-100)}
.prose{color:var(--text);font-size:1.02rem;line-height:1.75;max-width:72ch}
.prose h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin:42px 0 16px;scroll-margin-top:calc(var(--header-h) + 18px)}
.prose h3{font-size:1.18rem;margin:30px 0 12px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 16px 22px;display:flex;flex-direction:column;gap:8px}
.prose li{padding-left:4px}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.prose strong{color:var(--heading)}
.prose blockquote{border-left:4px solid var(--brand);background:var(--surface-2);padding:16px 20px;border-radius:0 var(--r-md) var(--r-md) 0;
  margin:20px 0;color:var(--text-soft);font-style:italic}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface-3);padding:2px 7px;border-radius:6px}
.callout{background:var(--brand-050);border:1px solid var(--brand-200);border-radius:var(--r-lg);padding:16px 20px;margin:22px 0;font-size:.95rem;color:var(--text)}
[data-theme="dark"] .callout{background:var(--brand-100);border-color:var(--brand-200)}
.callout strong{color:var(--brand)}
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.prose th{background:var(--surface-3);font-weight:700}
.prose .glyph-inline{font-family:var(--serif);font-weight:700;color:var(--brand);font-size:1.15em}

.guide-nav{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.guide-nav a{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);max-width:48%;transition:border-color var(--t),transform var(--t)}
.guide-nav a:hover{border-color:var(--brand);transform:translateY(-2px)}
.guide-nav a span{font-size:.78rem;color:var(--text-mute)}
.guide-nav a b{color:var(--heading);font-size:.92rem}
.guide-nav .gn-next{text-align:right;margin-left:auto}

/* Sidebar */
.sidebar,.guide-sidebar{display:flex;flex-direction:column;gap:24px;position:sticky;top:calc(var(--header-h) + 24px)}
@media (max-width:960px){.sidebar,.guide-sidebar{position:static}}
.guide-article{min-width:0}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;box-shadow:var(--sh-sm)}
.side-card h4,.side-title{font-size:.95rem;margin-bottom:14px;color:var(--heading)}
/* Card headings carry an inline icon; without an explicit size the SVG would
   default to a full-width black block. */
.side-title{display:flex;align-items:center;gap:9px;line-height:1.3}
.side-title svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.side-card nav ol{list-style:none;padding:0;counter-reset:toc;display:flex;flex-direction:column;gap:2px}
.side-card nav li{counter-increment:toc}
.side-card nav a{display:block;padding:8px 10px;border-radius:var(--r-sm);color:var(--text-soft);font-size:.88rem;transition:all var(--t)}
.side-card nav a::before{content:counter(toc,decimal-leading-zero);color:var(--brand-300);font-family:var(--mono);font-size:.8rem;margin-right:8px}
.side-card nav a:hover,.side-card nav a.active{background:var(--brand-050);color:var(--brand)}
[data-theme="dark"] .side-card nav a:hover,[data-theme="dark"] .side-card nav a.active{background:var(--brand-100)}
.side-links{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.side-links a{display:flex;gap:8px;align-items:flex-start;color:var(--text-soft);font-size:.88rem;transition:color var(--t)}
.side-links a:hover{color:var(--brand)}
.side-links svg{width:16px;height:16px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:3px}
.side-cta{background:var(--grad-deep);color:#fff;border:none}
.side-cta h4,.side-cta .side-title{color:#fff}
.side-cta .side-title svg{stroke:var(--brand-400)}
.side-cta p{color:var(--on-dark-soft);font-size:.9rem;margin-bottom:14px}

/* Simple content pages (about/contact/legal) */
.content-body{max-width:820px;margin:0 auto}
.content-body .prose{max-width:none}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-sm)}
.contact-card .f-ico{width:48px;height:48px;border-radius:var(--r-lg);background:var(--brand-050);display:grid;place-items:center;margin-bottom:14px}
.contact-card .f-ico svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .contact-card .f-ico{background:var(--brand-100)}
.contact-card h3{font-size:1.1rem;margin-bottom:8px}
.contact-card p{color:var(--text-soft);font-size:.94rem}
.contact-card a{font-weight:600}

.grid-empty{grid-column:1/-1;text-align:center;color:var(--text-mute);padding:40px 20px}

/* noscript */
.noscript-note{background:var(--brand-050);border:1px solid var(--brand-200);color:var(--brand-900);
  padding:14px 18px;border-radius:var(--r-lg);margin-bottom:18px;font-size:.92rem}

/* ============================================================
   Content pages, contact, 404, guide extras (v1.0 additions)
   ============================================================ */

/* Content prose (privacy/terms/disclaimer/about) */
.content-body{max-width:76ch;margin:0 auto}
.content-body h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:1.9em 0 .5em}
.content-body h2:first-child{margin-top:0}
.content-body p{color:var(--text-soft);line-height:1.75;margin:0 0 1.05em}
.content-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.content-body a:hover{color:var(--brand-700)}
.content-updated{font-size:.85rem;color:var(--text-mute);font-style:italic;margin-bottom:1.6em!important}

/* Contact cards */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px 26px;box-shadow:var(--sh-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.contact-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--brand-200)}
.cc-ico{width:52px;height:52px;border-radius:var(--r-lg);display:grid;place-items:center;background:var(--brand-050);color:var(--brand);margin-bottom:16px}
.cc-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-card h2{font-size:1.2rem;margin:0 0 8px}
.contact-card p{color:var(--text-soft);font-size:.95rem;line-height:1.6;margin:0 0 12px}
.cc-link{display:inline-block;font-weight:700;color:var(--brand);text-decoration:none;font-size:1.02rem;word-break:break-word}
.cc-link:hover{text-decoration:underline}

/* Guide hero tag pill + lead + meta on dark page-hero */
.page-hero-guide .guide-tag-pill{display:inline-block;background:var(--on-dark-fill);border:1px solid var(--on-dark-line);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:var(--r-pill);margin-bottom:14px}
.guide-lead{color:var(--on-dark-soft)!important;font-size:1.08rem!important;max-width:70ch}
.guide-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px}
.gm-item{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;color:var(--on-dark-mute)}
.gm-item svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* TOC list inside side-card */
.toc-list ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc-list li{margin:0 0 2px}
.toc-list a{display:block;padding:6px 10px;border-radius:var(--r-sm);font-size:.9rem;color:var(--text-mute);text-decoration:none;border-left:2px solid transparent;transition:color var(--t),background var(--t),border-color var(--t)}
.toc-list a:hover{color:var(--brand);background:var(--brand-050)}
.toc-list a.active{color:var(--brand);border-left-color:var(--brand);background:var(--brand-050);font-weight:600}

/* Related list (side-card, anchors not li) */
.related-list{display:flex;flex-direction:column;gap:2px}
.rl-item{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:var(--r-sm);color:var(--text-soft);text-decoration:none;font-size:.9rem;line-height:1.35;transition:color var(--t),background var(--t)}
.rl-item svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.rl-item:hover{color:var(--brand);background:var(--brand-050)}

/* 404 error page */
.error-hero{text-align:center;padding-top:clamp(48px,7vw,84px)}
.error-hero .wrap{display:flex;flex-direction:column;align-items:center}
.error-glyphs{display:flex;gap:10px;margin-bottom:14px}
.error-glyphs span{font-family:var(--serif);font-size:clamp(1.8rem,5vw,2.8rem);color:var(--on-dark-mute)}
.error-glyphs span:nth-child(3){color:var(--brand-300);transform:rotate(8deg)}
.error-code{font-family:var(--serif);font-weight:800;font-size:clamp(3.4rem,11vw,6rem);line-height:1;background:linear-gradient(120deg,#fff,var(--brand-300));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 4px}
.error-hero h1{margin-bottom:12px}
.error-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}

/* ============================================================
   Responsive and accessibility pass

   Phones and tablets were the two places the old build fell down:
   headings crowded the gutters, several controls sat under the 44px
   touch target, and a few blocks could push the page sideways. These
   rules are additive so nothing above needs restating.
   ============================================================ */

/* Nothing may widen the page. Long code points, entities and table
   cells are the usual culprits. */
code,kbd,samp{overflow-wrap:anywhere}
.wrap>*{min-width:0}

/* Tablet */
@media (max-width:1000px){
  :root{--header-h:70px}
  .sec-head{max-width:640px}
  .about-media img{width:100%}
}

/* Large phone / small tablet */
@media (max-width:760px){
  body{font-size:15.5px}
  .sec-head h2{font-size:clamp(1.55rem,6vw,2rem)}
  .sec-head p{font-size:.98rem}
  .cta-band{flex-direction:column;align-items:flex-start;text-align:left}
  .guide-nav a{max-width:100%;width:100%}
  .guide-nav .gn-next{text-align:left;margin-left:0}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .prose{font-size:1rem}
  .page-hero-guide + .wrap{padding-block:32px 44px}
  .prose h2{margin-top:34px}
}

/* Phone */
@media (max-width:520px){
  .sct{padding:40px 0}
  .card{padding:22px}
  .btn{padding:12px 18px}
  .btn-lg{padding:13px 20px;font-size:.95rem}
  .back-top{right:16px;bottom:16px;width:46px;height:46px}
  .owa-toast,.pf-toast{bottom:78px;font-size:.86rem;padding:11px 18px}
  .blog-foot .btn,.error-actions .btn{width:100%}
}

/* Every interactive control clears the 44px touch target on coarse
   pointers, which is where the old chips and small buttons failed. */
@media (pointer:coarse){
  .chip,.print-opt,.gen-clear,.fav-clear,.fav-chip,.glyph-copy,.glyph-copy-alt,.rc-btn,.pager button{min-height:44px}
  .glyph-fav{width:40px;height:40px}
  .faq-item summary{padding:18px}
}