/* AAVETech — design system v3
   Light-first premium: orange accent, white/off-white surfaces, near-black ink.
   Palette: orange ramp --o-50..--o-900, warm neutral ramp --n-0..--n-950. */

/* ── the shade ramps ─────────────────────────────────────────────────── */
:root{
  /* orange ramp — the accent */
  --o-50:#FFF7ED;  --o-100:#FFEDD5; --o-200:#FED7AA; --o-300:#FDBA74;
  --o-400:#FB923C; --o-500:#F97316; --o-600:#EA580C; --o-700:#C2410C;
  --o-800:#9A3412; --o-900:#7C2D12;

  /* neutral ramp — warm greys, white to near-black */
  --n-0:#FFFFFF;   --n-50:#FAFAF9;  --n-100:#F5F5F4; --n-200:#E7E5E4;
  --n-300:#D6D3D1; --n-400:#A8A29E; --n-500:#78716C;  --n-600:#57534E;
  --n-700:#44403C; --n-800:#292524; --n-900:#1C1917;  --n-950:#0C0A09;

  /* semantic — light page */
  --bg:var(--n-50);
  --surface:var(--n-0);
  --surface-2:var(--n-100);
  --edge:var(--n-200);
  --edge-soft:var(--n-100);
  --txt:var(--n-900);
  --txt-2:var(--n-700);
  --dim:var(--n-600);
  --dimmer:var(--n-500);
  --accent:var(--o-700);
  --accent-soft:var(--o-600);
  --accent-tint:var(--o-50);
  --accent-line:rgba(194,65,12,.28);

  /* semantic — dark contrast band */
  --band-bg:var(--n-950);
  --band-bg-2:var(--n-900);
  --band-surface:rgba(255,255,255,.055);
  --band-edge:rgba(255,255,255,.12);
  --band-edge-hi:rgba(255,255,255,.22);
  --band-txt:#FFFFFF;
  --band-dim:var(--n-300);
  --band-dimmer:var(--n-400);
  --band-accent:var(--o-400);
  --band-accent-hi:var(--o-300);

  --grad:linear-gradient(135deg,var(--o-600) 0%,var(--o-400) 100%);
  --grad-band:linear-gradient(135deg,var(--o-500) 0%,var(--o-300) 100%);
  --ring:rgba(194,65,12,.38);
  --band-ring:rgba(251,146,60,.42);
  --mono:"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius:16px; --radius-lg:24px;
  --measure:1080px; --wide:1360px;
  --nav-h:72px;

  /* glass system — light surfaces: white fill, DARK hairline */
  --glass:rgba(255,255,255,.72);
  --glass-hi:rgba(255,255,255,.88);
  --glass-edge:rgba(28,25,23,.10);
  --glass-edge-hi:rgba(28,25,23,.18);
  --glass-blur:blur(20px) saturate(160%);
  --glass-blur-sm:blur(12px) saturate(150%);

  /* glass system — dark surfaces: white fill, LIGHT hairline */
  --band-glass:rgba(255,255,255,.055);
  --band-glass-hi:rgba(255,255,255,.085);
  --band-glass-edge:rgba(255,255,255,.12);
  --band-glass-edge-hi:rgba(255,255,255,.20);
  --band-glass-blur:blur(20px) saturate(150%);
  --band-glass-blur-sm:blur(12px) saturate(140%);

  /* shadows — light surfaces cast soft, low-opacity shadows */
  --shadow-1:0 2px 8px rgba(28,25,23,.06),0 1px 2px rgba(28,25,23,.04);
  --shadow-2:0 12px 32px rgba(28,25,23,.10),0 2px 6px rgba(28,25,23,.05);
  --shadow-3:0 24px 60px rgba(28,25,23,.14),0 4px 12px rgba(28,25,23,.06);
  --lift:0 14px 34px rgba(194,65,12,.18);

  /* band shadows */
  --band-shadow-1:0 6px 22px rgba(0,0,0,.34);
  --band-shadow-2:0 18px 48px rgba(0,0,0,.46);
  --band-shadow-3:0 30px 80px rgba(0,0,0,.55);

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.18s; --t:.28s; --t-slow:.55s;

  --z-nav:100; --z-mega:99; --z-scrim:98; --z-mobar:60; --z-top:58;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px);overflow-x:clip}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:16px;line-height:1.75;
font-weight:400;overflow-x:hidden;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
min-height:100vh}
::selection{background:rgba(194,65,12,.20);color:var(--n-900)}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;height:auto;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
table{font-variant-numeric:tabular-nums}

/* ── shared glass primitive ───────────────────────────────────────────── */
.glass{
  background:linear-gradient(158deg,var(--glass-hi) 0%,var(--glass) 46%,rgba(255,255,255,.55) 100%);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── scroll progress ──────────────────────────────────────────────────── */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:calc(var(--z-nav) + 2);
background:var(--grad-band);transform:scaleX(0);transform-origin:0 50%;
will-change:transform;pointer-events:none}

/* ── navigation (dark band) ──────────────────────────────────────────── */
nav:not(.breadcrumb){position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:var(--nav-h);
background:rgba(12,10,9,.72);-webkit-backdrop-filter:var(--band-glass-blur);backdrop-filter:var(--band-glass-blur);
border-bottom:1px solid var(--band-glass-edge);padding:0 28px;display:flex;align-items:center;
justify-content:space-between;gap:18px;transition:background var(--t) var(--ease-soft),
border-color var(--t) var(--ease-soft),box-shadow var(--t) var(--ease-soft)}
nav.stuck{background:rgba(12,10,9,.94);box-shadow:0 10px 40px rgba(0,0,0,.42);
border-bottom-color:var(--band-glass-edge-hi)}
nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;min-width:0;color:#fff}
nav .brand .mark{width:38px;height:38px;border-radius:11px;background:var(--grad-band);
display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:13.5px;
letter-spacing:-.6px;box-shadow:0 6px 20px rgba(234,88,12,.42);flex-shrink:0;
transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
nav .brand:hover .mark{transform:translateY(-1px) scale(1.04);box-shadow:0 10px 28px rgba(234,88,12,.58)}
nav .brand .name{font-size:19px;font-weight:800;letter-spacing:-.5px;color:#fff;white-space:nowrap}
nav .brand .tag:not(.solid):not(.ghost){background:transparent;border-color:transparent;color:var(--band-accent-hi);font-size:11px;letter-spacing:1.3px;font-weight:600;
margin-left:2px;white-space:nowrap}
nav .links{display:flex;gap:26px;align-items:center}
nav .links a{color:var(--band-dim);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.1px;
transition:color var(--t-fast) var(--ease-soft);position:relative}
nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;
background:var(--grad-band);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
nav .links a:hover{color:#fff}
nav .links a:hover::after{transform:scaleX(1)}
nav .links a.on{color:#fff}
nav .links a.on::after{transform:scaleX(1)}
nav .links .cta{background:var(--grad-band);color:#1C1917;padding:11px 24px;border-radius:99px;
font-size:13.5px;font-weight:700;letter-spacing:.2px;box-shadow:0 8px 26px rgba(234,88,12,.4);
transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
nav .links .cta::after{display:none}
nav .links .cta:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(234,88,12,.58)}

/* the actions group is NEVER hidden — this is the v1 mobile bug fix */
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-call{display:none;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;
background:var(--band-glass);border:1px solid var(--band-glass-edge);color:var(--band-accent);
-webkit-backdrop-filter:var(--band-glass-blur-sm);backdrop-filter:var(--band-glass-blur-sm);
transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.nav-call:hover{border-color:var(--band-ring);background:var(--band-glass-hi);transform:translateY(-1px)}
.nav-call svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.menu-btn{display:inline-flex;align-items:center;gap:9px;background:var(--band-glass);
border:1px solid var(--band-glass-edge);color:#fff;padding:9px 16px;border-radius:99px;
font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
-webkit-backdrop-filter:var(--band-glass-blur-sm);backdrop-filter:var(--band-glass-blur-sm);
transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.menu-btn:hover{border-color:var(--band-ring);background:var(--band-glass-hi);color:#fff}
.mb-lines{display:block;width:16px;height:12px;position:relative}
.mb-lines i{position:absolute;left:0;height:2px;width:100%;border-radius:2px;background:currentColor;
transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease-soft)}
.mb-lines i:nth-child(1){top:0}
.mb-lines i:nth-child(2){top:5px}
.mb-lines i:nth-child(3){top:10px}
.menu-btn.open .mb-lines i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn.open .mb-lines i:nth-child(2){opacity:0}
.menu-btn.open .mb-lines i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ── mega menu / mobile drawer (dark band) ───────────────────────────── */
.mega{position:fixed;top:var(--nav-h);left:0;right:0;z-index:var(--z-mega);
background:rgba(12,10,9,.88);-webkit-backdrop-filter:blur(24px) saturate(150%);
backdrop-filter:blur(24px) saturate(150%);border-bottom:1px solid var(--band-glass-edge);
max-height:80vh;overflow-y:auto;display:none;box-shadow:var(--band-shadow-3)}
.mega.open{display:block;animation:megaIn .32s var(--ease) both}
@keyframes megaIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mega-inner{max-width:var(--wide);margin:0 auto;padding:32px 28px}
.mega-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.mega-head .mh{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--band-accent);font-weight:700}
.mega-head input{flex:1;min-width:250px;background:var(--band-glass);border:1px solid var(--band-glass-edge);
color:#fff;padding:13px 18px;border-radius:99px;font-family:inherit;font-size:14.5px;
-webkit-backdrop-filter:var(--band-glass-blur-sm);backdrop-filter:var(--band-glass-blur-sm);
transition:border-color var(--t-fast)}
.mega-head input::placeholder{color:var(--band-dimmer)}
.mega-head input:focus{border-color:var(--band-ring);outline:none}
.mcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.mcol h5{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--band-dimmer);margin:0 0 12px}
.mcol ul{list-style:none}
.mcol li{margin:7px 0;color:var(--band-dim)}
.mcol a{color:var(--band-dim);text-decoration:none;font-size:14.5px;transition:color var(--t-fast)}
.mcol a:hover{color:var(--band-accent)}
.mega-results{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.mega-results a{display:block;padding:11px 15px;border-radius:12px;background:var(--band-glass);
border:1px solid var(--band-glass-edge);color:var(--band-dim);font-size:14px;text-decoration:none;
transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.mega-results a:hover{border-color:var(--band-ring);background:var(--band-glass-hi);color:#fff}

/* ── mobile action bar (dark band) ───────────────────────────────────── */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobar);display:none;
padding:9px 14px calc(9px + env(safe-area-inset-bottom));gap:10px;
background:rgba(12,10,9,.92);-webkit-backdrop-filter:var(--band-glass-blur);backdrop-filter:var(--band-glass-blur);
border-top:1px solid var(--band-glass-edge);transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.mobar.hide{transform:translateY(110%);opacity:0}
.mobar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;
border-radius:14px;font-size:14.5px;font-weight:700;text-decoration:none;letter-spacing:.2px;
transition:transform var(--t-fast) var(--ease)}
.mobar a:active{transform:scale(.97)}
.mobar .mobar-call{background:var(--band-glass);border:1px solid var(--band-glass-edge);color:#fff}
.mobar .mobar-quote{background:var(--grad-band);color:#1C1917;box-shadow:0 8px 24px rgba(234,88,12,.4)}
.mobar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}

/* ── back to top (dark band) ─────────────────────────────────────────── */
.to-top{position:fixed;right:18px;bottom:18px;z-index:var(--z-top);width:44px;height:44px;
border-radius:50%;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;
transform:translateY(12px) scale(.9);background:rgba(12,10,9,.86);border:1px solid var(--band-glass-edge);
color:var(--band-accent);-webkit-backdrop-filter:var(--band-glass-blur);backdrop-filter:var(--band-glass-blur);
transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t-fast)}
.to-top.on{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{border-color:var(--band-ring);transform:translateY(-2px)}
.to-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;
stroke-linecap:round;stroke-linejoin:round}

/* ── hero (dark contrast band) ───────────────────────────────────────── */
.hero{position:relative;isolation:isolate;padding:44px 44px 56px;max-width:var(--measure);margin:0 auto 44px;
border-radius:var(--radius-lg);overflow:hidden;
background:linear-gradient(155deg,var(--n-900) 0%,var(--n-950) 60%,#12100E 100%);
box-shadow:var(--band-shadow-2),inset 0 1px 0 rgba(255,255,255,.10)}
/* The H1 is dark ink on the light page. Only the dark bands keep it white. */
.hero h1{color:#fff}
.hero::before{content:"";position:absolute;left:50%;top:-140px;width:min(1080px,120%);height:520px;
transform:translateX(-50%);z-index:-1;pointer-events:none;
background:radial-gradient(closest-side,rgba(249,115,22,.30),rgba(251,146,60,.10) 55%,transparent 72%);
animation:aurora 16s var(--ease-soft) infinite alternate}
@keyframes aurora{from{transform:translateX(-50%) translateY(0) scale(1)}
to{transform:translateX(-50%) translateY(24px) scale(1.12)}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
letter-spacing:2.2px;text-transform:uppercase;color:var(--band-accent);
border:1px solid rgba(251,146,60,.34);border-radius:99px;padding:7px 17px;margin-bottom:28px;
background:rgba(249,115,22,.10);-webkit-backdrop-filter:var(--band-glass-blur-sm);
backdrop-filter:var(--band-glass-blur-sm)}
h1{font-size:clamp(30px,5.2vw,56px);font-weight:800;line-height:1.1;letter-spacing:-2px;margin-bottom:24px;
color:var(--txt);text-wrap:balance}
h1 .grad{background:var(--grad-band);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent}
h2{font-size:clamp(22px,2.7vw,32px);font-weight:750;margin:64px 0 22px;letter-spacing:-1px;line-height:1.24;
color:var(--txt)}
h3{font-size:20px;font-weight:700;margin:40px 0 14px;color:var(--txt);letter-spacing:-.4px}
h4{font-size:16px;font-weight:700;margin:24px 0 10px;color:var(--txt)}
h5{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
main{padding:calc(var(--nav-h) + 26px) 32px 130px;max-width:var(--measure);margin:0 auto}
article p{margin:0 0 24px;font-size:17px;line-height:1.85;color:var(--txt-2);overflow-wrap:break-word}
article ul,article ol{margin:0 0 26px 26px}
article li{margin:11px 0;line-height:1.85;color:var(--txt-2);overflow-wrap:break-word}
article a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(194,65,12,.4)}
article h2:first-child,article h3:first-child{margin-top:0}

/* ── direct answer block (AEO R2) ─────────────────────────────────────── */
.answer-blob{background:linear-gradient(158deg,var(--o-50) 0%,var(--n-0) 58%);
border:1px solid var(--accent-line);border-left:4px solid var(--accent);border-radius:var(--radius);
padding:38px 42px;margin:0 0 40px;font-size:19px;line-height:1.8;color:var(--n-900);font-weight:450;
-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.9)}

/* ── key takeaways (AEO R4) ───────────────────────────────────────────── */
.key-takeaways{background:linear-gradient(158deg,var(--n-0) 0%,var(--n-50) 100%);
border:1px solid var(--edge);border-radius:var(--radius);padding:34px 38px;margin:0 0 48px;
-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.9)}
.key-takeaways h2{font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent);
margin:0 0 18px;font-weight:700}
.key-takeaways ul{list-style:none}
.key-takeaways li{position:relative;padding-left:30px;margin:14px 0;font-size:16.5px;color:var(--txt-2);line-height:1.78}
.key-takeaways li::before{content:"";position:absolute;left:2px;top:11px;width:9px;height:9px;
border-radius:2px;background:var(--grad);transform:rotate(45deg);
transition:transform var(--t) var(--ease)}
.key-takeaways li:hover::before{transform:rotate(45deg) scale(1.25)}

/* ── freshness + byline (AEO R5, R13) ─────────────────────────────────── */
.as-of{font-size:13.5px;color:var(--dim);margin:0 0 10px;line-height:1.7}
.as-of strong{color:var(--accent);font-weight:700}
.byline{background:var(--n-0);border:1px solid var(--edge);border-radius:var(--radius);
padding:24px 28px;margin:0 0 44px;
-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.9)}
.byline p{margin:0 0 4px;font-size:13.5px;color:var(--dim);line-height:1.6}
.byline p:last-child{margin-bottom:0}
.byline-author strong{color:var(--txt);font-weight:700}
.byline-reviewer strong{color:var(--accent);font-weight:700}
.byline-date{color:var(--dimmer) !important;font-size:12.5px !important}

/* ── tables (AEO R11) ─────────────────────────────────────────────────── */
.tw{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:36px 0;
border:1px solid var(--edge);border-radius:var(--radius);background:var(--n-0);
-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
box-shadow:var(--shadow-1)}
.tw table{width:100%;border-collapse:separate;border-spacing:0;margin:0;font-size:15.5px;
border:none;border-radius:0;background:none}
.tw caption{caption-side:top;text-align:left;padding:16px 20px 12px;font-size:13.5px;color:var(--dim);
font-weight:600}
th,td{border-bottom:1px solid var(--edge-soft);padding:17px 20px;text-align:left;vertical-align:top;line-height:1.7}
th{background:var(--n-100);font-weight:700;color:var(--n-900);font-size:13px;letter-spacing:.4px;
text-transform:uppercase;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:rgba(28,25,23,.018)}
tbody tr{transition:background var(--t-fast) var(--ease-soft)}
tbody tr:hover{background:var(--o-50)}
td{color:var(--txt-2)}

/* ── facts, cards, lists ─────────────────────────────────────────────── */
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:40px 0}
.fact{background:linear-gradient(158deg,var(--n-0) 0%,var(--n-50) 100%);
border:1px solid var(--edge);border-radius:var(--radius);padding:20px 22px;
-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.9);
transition:transform var(--t) var(--ease),border-color var(--t-fast),box-shadow var(--t) var(--ease)}
.fact:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-2)}
.fact .k{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);margin-bottom:7px;font-weight:700}
.fact .v{font-size:16px;font-weight:650;color:var(--n-900)}
.card{background:linear-gradient(158deg,var(--n-0) 0%,var(--n-50) 100%);
border:1px solid var(--edge);border-radius:var(--radius);padding:34px 36px;margin:24px 0;
-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.9);
transition:transform var(--t) var(--ease),border-color var(--t-fast),box-shadow var(--t) var(--ease)}
.card:hover{border-color:var(--accent-line);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.card h3{margin-top:0}
.checklist{list-style:none;margin:0 0 26px}
.checklist li{position:relative;padding-left:36px;margin:13px 0;line-height:1.75;color:var(--txt-2)}
.checklist li::before{content:"";position:absolute;left:0;top:4px;width:19px;height:19px;border-radius:50%;
background:var(--grad);box-shadow:0 3px 10px rgba(194,65,12,.26);
transition:transform var(--t) var(--ease)}
.checklist li:hover::before{transform:scale(1.14)}
.checklist li::after{content:"";position:absolute;left:6px;top:10px;width:8px;height:4px;
border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.signs{list-style:none;margin:0 0 26px}
.signs li{position:relative;padding-left:36px;margin:12px 0;line-height:1.75;color:var(--txt-2)}
.signs li::before{content:"!";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;
background:rgba(234,88,12,.12);color:var(--accent);font-size:12px;font-weight:900;text-align:center;line-height:20px;
border:1px solid var(--accent-line)}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{background:linear-gradient(158deg,var(--n-0) 0%,var(--n-50) 100%);
border:1px solid var(--edge);border-radius:var(--radius);padding:36px 40px;margin:56px 0;
-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.9)}
.faq h2{color:var(--accent);font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 8px;font-weight:700}
.faq .q{color:var(--n-900);font-weight:700;font-size:17px;margin:30px 0 10px;letter-spacing:-.2px}
.faq .a{color:var(--dim);font-size:16px;line-height:1.8;margin:0 0 10px}
.notice{background:var(--o-50);border:1px solid var(--accent-line);border-radius:var(--radius);
padding:22px 26px;margin:32px 0;font-size:15.5px;color:var(--txt-2)}
.notice strong{color:var(--accent)}
.legal{background:var(--n-100);border:1px solid var(--edge);border-left:4px solid var(--accent);
border-radius:0 var(--radius) var(--radius) 0;padding:24px 28px;margin:36px 0;font-size:15.5px;color:var(--txt-2);
-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm)}
.legal strong{color:var(--accent)}
.marker{font-size:12.5px;color:var(--dimmer);margin-top:56px;padding-top:30px;
border-top:1px solid var(--edge);line-height:1.8}
.related{margin-top:48px;padding-top:32px;border-top:1px solid var(--edge)}
.related h3{color:var(--accent);font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 16px}
.related ul{list-style:none}
.related li{margin:11px 0}
.related a{color:var(--txt);font-size:15.5px;display:inline-block;padding:3px 0}
.related a:hover{color:var(--accent)}

/* ── CTA (dark contrast band) ─────────────────────────────────────────── */
.cta-box{background:linear-gradient(150deg,var(--n-900) 0%,var(--n-950) 62%,#141110 100%);
border:1px solid var(--band-glass-edge);border-radius:var(--radius-lg);padding:64px 52px;margin:68px 0;
text-align:center;-webkit-backdrop-filter:var(--band-glass-blur);backdrop-filter:var(--band-glass-blur);
box-shadow:var(--band-shadow-2),inset 0 1px 0 rgba(255,255,255,.10);position:relative;overflow:hidden}
.cta-box::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(249,115,22,.26),transparent 62%);
transition:opacity var(--t-slow) var(--ease)}
.cta-box:hover::before{opacity:1}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{margin:0 0 12px;color:#fff;font-size:clamp(22px,3vw,30px)}
.cta-box p{color:var(--band-dim);font-size:16px;max-width:580px;margin:0 auto 28px;line-height:1.75}
.btn{display:inline-block;padding:15px 36px;border-radius:99px;font-size:14.5px;font-weight:700;
letter-spacing:.3px;text-decoration:none;background:var(--grad-band);color:#1C1917;
box-shadow:0 10px 30px rgba(234,88,12,.4);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
border:none;cursor:pointer;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,
rgba(255,255,255,.42) 50%,transparent 70%);transform:translateX(-130%);
transition:transform .7s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(234,88,12,.56)}
.btn:hover::after{transform:translateX(130%)}
.btn.alt{background:var(--glass);border:1px solid var(--glass-edge);color:var(--txt);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.07);
transition:border-color var(--t-fast),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.btn.alt:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin:36px 0}

/* ── breadcrumbs ─────────────────────────────────────────────────────── */
.breadcrumb{position:static;display:block;font-size:12.5px;color:var(--dimmer);margin-bottom:26px;letter-spacing:.3px;
display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.breadcrumb a{color:var(--dim);text-decoration:none;transition:color var(--t-fast);
display:inline-block;padding:2px 0}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span[aria-hidden]{opacity:.5}

/* ── footer (dark band) ──────────────────────────────────────────────── */
footer{position:relative;padding:64px 28px 40px;border-top:1px solid var(--band-glass-edge);
color:var(--band-dimmer);font-size:13.5px;margin-top:56px;overflow:hidden;
background:linear-gradient(180deg,var(--n-900) 0%,var(--n-950) 340px)}
footer::before{content:"";position:absolute;left:50%;top:-260px;width:min(1200px,100vw);height:520px;
transform:translateX(-50%);pointer-events:none;
background:radial-gradient(closest-side,rgba(249,115,22,.18),transparent 70%)}
.fwrap{max-width:var(--wide);margin:0 auto;position:relative;z-index:1}

.fhero{margin:0 0 52px}
.fh-t{color:#fff;font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.fh-s{color:var(--band-dim);font-size:15px;margin:0 0 22px;max-width:52ch}
.fcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.fcard{position:relative;display:flex;flex-direction:column;gap:5px;
background:linear-gradient(158deg,var(--band-glass-hi),var(--band-glass) 55%,rgba(255,255,255,.02));
border:1px solid var(--band-glass-edge);border-radius:14px;padding:18px 20px 20px;text-decoration:none;
overflow:hidden;-webkit-backdrop-filter:var(--band-glass-blur-sm);backdrop-filter:var(--band-glass-blur-sm);
box-shadow:var(--band-shadow-1),inset 0 1px 0 rgba(255,255,255,.07);
transition:border-color var(--t) var(--ease-soft),transform var(--t) var(--ease),
background var(--t) var(--ease-soft),box-shadow var(--t) var(--ease)}
.fcard::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--grad-band);
transform:scaleY(0);transform-origin:bottom;transition:transform .3s var(--ease)}
.fcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(249,115,22,.22),transparent 60%);
transition:opacity .4s var(--ease)}
.fcard:hover{border-color:var(--band-ring);transform:translateY(-3px);box-shadow:var(--band-shadow-2)}
.fcard:hover::before{transform:scaleY(1)}
.fcard:hover::after{opacity:1}
.fc-k{color:var(--band-accent);font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}
.fc-t{color:#fff;font-size:15.5px;font-weight:600;line-height:1.45;letter-spacing:-.01em}
.fc-a{position:absolute;top:16px;right:18px;color:var(--band-dimmer);font-size:16px;
transition:transform var(--t) var(--ease),color var(--t) var(--ease-soft)}
.fcard:hover .fc-a{color:var(--band-accent);transform:translateX(3px)}

.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:40px 30px;margin:0 0 56px}
.fcol-wide{grid-column:span 2}
.fcol h4{color:var(--band-accent);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 8px;font-weight:700}
.fcol h4 a{color:inherit;text-decoration:none}
.fcol h4 a:hover{color:var(--band-accent-hi)}
.fdesc{color:var(--band-dimmer);font-size:12.5px;line-height:1.5;margin:0 0 16px;max-width:34ch}
.fcol ul{list-style:none}
.fcol li{margin:7px 0}
.fcol a{color:var(--band-dim);text-decoration:none;font-size:14px;display:inline-block;
transition:color var(--t-fast) var(--ease-soft),transform var(--t-fast) var(--ease-soft)}
.fcol a:hover{color:#fff;transform:translateX(2px)}
.fcol a.mmore,.mcol a.mmore{color:var(--band-accent);font-weight:600}
/* ── tap targets (WCAG 2.2 · 24px) ────────────────────────────────────
   An inline text link renders at the font's CONTENT height, which for a
   12-20px font is only 14-22px — under the 24px minimum. Raising the
   type size to fix that would break the column alignment the grids and
   tables around it depend on, so the target is enlarged with
   inline-block + vertical padding instead. The visible type does not
   change, and nothing shifts horizontally. */
.card h3 a,main>p>a,main>ul>li>a,.fq-more,.ft-list a{
display:inline-block;padding:3px 0}
.fb-contact a,.fb-legal a{display:inline-block;padding:2px 0}
.fsub{margin:0 0 18px}
.fsub h5{color:var(--band-dimmer);font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;
font-weight:700;margin:0 0 6px;padding-bottom:5px;border-bottom:1px solid var(--band-glass-edge)}

.fq{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:44px;align-items:start;
border-top:1px solid var(--band-glass-edge);padding-top:44px;margin:0 0 48px}
.fq-head{position:sticky;top:calc(var(--nav-h) + 20px)}
.fq-t{color:#fff;font-size:19px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px}
.fq-s{color:var(--band-dimmer);font-size:13.5px;line-height:1.6;margin:0 0 14px}
.fq-more{color:var(--band-accent);font-size:13.5px;font-weight:600;text-decoration:none}
.fq-more:hover{color:var(--band-accent-hi)}
.fthemes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 22px}
.ftheme{background:var(--band-glass);border:1px solid var(--band-glass-edge);
border-radius:12px;overflow:hidden;transition:border-color var(--t-fast),background var(--t-fast)}
.ftheme[open]{border-color:var(--band-ring);background:rgba(255,255,255,.07)}
.ftheme summary{cursor:pointer;list-style:none;padding:13px 16px;display:flex;align-items:center;
justify-content:space-between;gap:12px;user-select:none;transition:background var(--t-fast)}
.ftheme summary:hover{background:rgba(255,255,255,.05)}
.ftheme summary::-webkit-details-marker{display:none}
.ft-t{color:var(--band-dim);font-size:14.5px;font-weight:600;letter-spacing:-.01em;transition:color var(--t-fast)}
.ftheme summary:hover .ft-t{color:var(--band-accent)}
.ft-n{color:var(--band-dimmer);font-size:11.5px;font-family:var(--mono);background:rgba(255,255,255,.05);
border:1px solid var(--band-glass-edge);border-radius:99px;padding:2px 9px;min-width:30px;text-align:center}
.ftheme[open] .ft-n{background:rgba(249,115,22,.16);border-color:var(--band-ring);color:var(--band-accent)}
.ft-b{color:var(--band-dimmer);font-size:12.5px;line-height:1.5;margin:0;padding:0 16px 10px}
.ft-list{list-style:none;padding:0 16px 14px;columns:2;column-gap:20px}
.ft-list li{margin:5px 0;break-inside:avoid}
.ft-list a{color:var(--band-dim);text-decoration:none;font-size:13.5px;transition:color var(--t-fast)}
.ft-list a:hover{color:var(--band-accent)}

.fbase{max-width:var(--wide);margin:0 auto;padding-top:30px;border-top:1px solid var(--band-glass-edge);
display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start}
.fb-brand{display:flex;flex-direction:column;gap:10px}
.fb-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.fb-logo .mark{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;
background:var(--grad-band);color:#1C1917;font-weight:800;font-size:13px;letter-spacing:-.02em;
box-shadow:0 6px 18px rgba(234,88,12,.42)}
.fb-logo .name{color:#fff;font-weight:800;font-size:17px;letter-spacing:-.02em}
.fb-contact{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px}
.fb-contact a{color:var(--band-dim);text-decoration:none;transition:color var(--t-fast)}
.fb-contact a:hover{color:var(--band-accent)}
.fb-contact span{color:var(--band-dimmer)}
.fb-legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-end;font-size:12.5px;text-align:right}
.fb-legal a{color:var(--band-dimmer);text-decoration:none;margin-left:14px;transition:color var(--t-fast)}
.fb-legal a:hover{color:#fff}
.fb-legal div:last-child a:first-child{margin-left:0}

/* ── blog and profile grids ──────────────────────────────────────────── */
.postgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin:40px 0}
.postcard{position:relative;display:block;background:linear-gradient(158deg,var(--n-0) 0%,var(--n-50) 100%);
border:1px solid var(--edge);border-radius:var(--radius);padding:32px 34px;text-decoration:none;
overflow:hidden;-webkit-backdrop-filter:var(--glass-blur-sm);backdrop-filter:var(--glass-blur-sm);
box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.9);
transition:transform var(--t) var(--ease),border-color var(--t-fast),box-shadow var(--t) var(--ease)}
.postcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(249,115,22,.14),transparent 62%);
transition:opacity .45s var(--ease)}
.postcard:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:var(--shadow-3)}
.postcard:hover::after{opacity:1}
.postcard .letter{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
border-radius:12px;background:var(--grad);color:#fff;font-weight:900;font-size:17px;margin-bottom:16px;
box-shadow:0 6px 18px rgba(194,65,12,.3);transition:transform var(--t) var(--ease)}
.postcard:hover .letter{transform:scale(1.07) rotate(-4deg)}
.postcard h3{color:var(--n-900);font-size:18px;margin:0 0 9px;line-height:1.4}
.postcard p{color:var(--dim);font-size:14.5px;margin:0;line-height:1.7}
.postcard .meta{color:var(--dimmer);font-size:12px;margin-top:14px;letter-spacing:.4px;
text-transform:uppercase;font-weight:600}
.alphabet{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0}
.alphabet a{width:42px;height:42px;border-radius:12px;background:var(--n-0);border:1px solid var(--edge);
display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--txt);text-decoration:none;
font-size:15px;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.alphabet a:hover{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-2px)}
.alphabet a.active{background:var(--grad);border-color:transparent;color:#fff}
.tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.6px;padding:5px 13px;border-radius:99px;
background:var(--o-50);border:1px solid var(--accent-line);color:var(--accent);margin:0 6px 6px 0}
/* On a light tint the accent must be the dark end of the ramp, or the
   label reads at 2.38:1. --accent (o-700) on --o-50 is 4.96:1. */
.tag:not(.solid):not(.ghost){color:var(--accent)}
.tag.solid{background:var(--grad);border-color:transparent;color:#fff}
.tag.ghost{background:var(--n-100);border-color:var(--edge);color:var(--dim)}

/* ── brand kit page ──────────────────────────────────────────────────── */
.brandhero{position:relative;isolation:isolate;padding:44px 44px 56px;max-width:var(--measure);margin:0 auto 44px;
border-radius:var(--radius-lg);overflow:hidden;
background:linear-gradient(155deg,var(--n-900) 0%,var(--n-950) 60%,#12100E 100%);
box-shadow:var(--band-shadow-2),inset 0 1px 0 rgba(255,255,255,.10)}
.brandhero::before{content:"";position:absolute;left:50%;top:-140px;width:min(1080px,120%);height:460px;
transform:translateX(-50%);z-index:-1;pointer-events:none;
background:radial-gradient(closest-side,rgba(249,115,22,.28),transparent 70%)}
.brandhero h1{color:#fff}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin:28px 0}
.swatch{border-radius:var(--radius);overflow:hidden;border:1px solid var(--edge);background:var(--n-0);
box-shadow:var(--shadow-1);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.swatch:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.swatch .chip{height:108px}
.swatch .meta{padding:16px 18px}
.swatch .nm{font-weight:700;font-size:15px;color:var(--n-900)}
.swatch .hx{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-top:3px}
.swatch .us{font-size:11.5px;color:var(--dimmer);margin-top:7px}
.logoset{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin:28px 0}
.logobox{border-radius:var(--radius-lg);padding:36px 24px;display:flex;flex-direction:column;
align-items:center;gap:16px;border:1px solid var(--edge);background:var(--n-0);box-shadow:var(--shadow-1)}
.logobox .mark{width:84px;height:84px;border-radius:22px;background:var(--grad);
display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:28px;letter-spacing:-1.5px;
box-shadow:0 12px 34px rgba(194,65,12,.34)}
.logobox.dark{background:linear-gradient(145deg,#1C1917,#0C0A09);border-color:var(--band-glass-edge)}
.logobox.black{background:#000;border-color:var(--band-glass-edge)}
.logobox.grad{background:var(--grad);border-color:transparent}
.logobox.light{background:#fff}
.logobox.light .mark{color:#fff}
.logobox .lbl{font-size:12px;color:var(--dim);font-weight:600;letter-spacing:.4px}
.logobox.light .lbl{color:var(--n-600)}
.typesample{background:var(--n-0);border:1px solid var(--edge);border-radius:var(--radius);padding:32px;margin:20px 0;
box-shadow:var(--shadow-1)}
.typerow{margin:0 0 26px}
.typerow:last-child{margin-bottom:0}
.typerow .cap{font-family:var(--mono);font-size:11.5px;color:var(--dimmer);margin-top:10px}

/* ── scroll reveal ────────────────────────────────────────────────────── */
.js [data-reveal]{opacity:0;transform:translate3d(0,20px,0);
transition:opacity .72s var(--ease),transform .72s var(--ease);
transition-delay:var(--rd,0ms);will-change:opacity,transform}
.js [data-reveal].in{opacity:1;transform:none}
.factgrid [data-reveal]:nth-child(1),.fcards [data-reveal]:nth-child(1){--rd:0ms}
.factgrid [data-reveal]:nth-child(2),.fcards [data-reveal]:nth-child(2){--rd:70ms}
.factgrid [data-reveal]:nth-child(3),.fcards [data-reveal]:nth-child(3){--rd:140ms}
.factgrid [data-reveal]:nth-child(4),.fcards [data-reveal]:nth-child(4){--rd:210ms}
.factgrid [data-reveal]:nth-child(5),.fcards [data-reveal]:nth-child(5){--rd:280ms}
.factgrid [data-reveal]:nth-child(6),.fcards [data-reveal]:nth-child(6){--rd:340ms}

/* ── responsive ──────────────────────────────────────────────────────── */
@media(max-width:1200px){
  nav .links{gap:18px}
  nav .links a{font-size:13.5px}
}
@media(max-width:1080px){
  nav .links{display:none}
  nav .nav-call{display:flex}
  .mobar{display:flex}
  body{padding-bottom:64px}
  .mega{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;height:100dvh;max-height:none;
  transform:translateY(-14px);opacity:0;pointer-events:none;
  transition:transform .38s var(--ease),opacity .3s var(--ease-soft)}
  .mega.open{transform:none;opacity:1;pointer-events:auto}
  .mega-inner{padding:26px 22px 40px}
  body.nav-open{overflow:hidden}
  body.nav-open::before{content:"";position:fixed;inset:0;z-index:var(--z-scrim);
  background:rgba(12,10,9,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .to-top{bottom:78px}
}
@media(max-width:900px){
  .fq{grid-template-columns:1fr;gap:26px}
  .fq-head{position:static}
  .fcol-wide{grid-column:span 1}
  .ft-list{columns:1}
  .fb-legal{justify-content:flex-start;text-align:left}
  .mcols{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
}
@media(max-width:768px){
  :root{--nav-h:64px}
  h1{font-size:30px;letter-spacing:-1.1px}
  h2{font-size:23px;margin:48px 0 18px}
  h3{font-size:18px;margin:32px 0 12px}
  .hero{padding:30px 22px 36px;margin-bottom:32px;border-radius:20px}
  .brandhero{padding:30px 22px 36px;margin-bottom:32px;border-radius:20px}
  main{padding:calc(var(--nav-h) + 16px) 18px 72px}
  article p{font-size:16px;line-height:1.78;margin-bottom:20px}
  article li{font-size:16px}
  .eyebrow{font-size:11.5px;letter-spacing:1.3px;padding:6px 14px;margin-bottom:20px}
  .answer-blob{font-size:16.5px;padding:22px 20px;border-radius:14px;margin-bottom:32px}
  .key-takeaways{padding:22px 20px;margin-bottom:36px}
  .key-takeaways li{font-size:15.5px;padding-left:26px;margin:12px 0}
  .byline{padding:18px 18px;margin-bottom:34px}
  .faq{padding:22px 20px;margin:40px 0}
  .faq .q{font-size:16px;margin:24px 0 8px}
  .faq .a{font-size:15.5px}
  .cta-box{padding:34px 22px;margin:48px 0;border-radius:18px}
  .btn{display:block;width:100%;text-align:center;margin:10px 0 0;padding:15px 24px}
  .btn.alt{margin-top:12px}
  .legal{padding:18px 18px}
  .notice{padding:18px 18px}
  .tw{margin:28px 0;border-radius:14px}
  .tw table{font-size:14.5px;min-width:520px}
  th,td{padding:12px 14px}
  .tw caption{padding:14px 14px 10px;font-size:13px}
  .factgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:32px 0}
  .fact{padding:16px 16px}
  .fact .v{font-size:14.5px}
  .card{padding:24px 22px}
  .two{grid-template-columns:1fr;gap:16px}
  .postgrid{grid-template-columns:1fr;gap:16px;margin:32px 0}
  .postcard{padding:24px 22px}
  .swatches{grid-template-columns:repeat(2,1fr);gap:14px}
  nav:not(.breadcrumb){padding:0 16px;gap:10px}
  nav .brand .tag{display:none}
  nav .brand .name{font-size:17px}
  nav .brand .mark{width:34px;height:34px;border-radius:10px;font-size:12.5px}
  .menu-btn{padding:8px 13px}
  .mb-txt{display:none}
  .menu-btn{width:40px;height:40px;justify-content:center;padding:0}
  .breadcrumb{font-size:11.5px;margin-bottom:18px}
  .marker{margin-top:40px;padding-top:24px}
  .related{margin-top:36px;padding-top:24px}
}
@media(max-width:560px){
  footer{padding:44px 18px 30px}
  .fcards{grid-template-columns:1fr}
  .fcols{gap:30px 20px}
  .fbase{gap:20px}
  .fb-contact{gap:6px 12px;font-size:12.5px}
  .fb-legal{gap:6px 14px;font-size:12px}
  .mobar{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .mobar a{height:44px;font-size:14px}
  .to-top{right:12px;bottom:74px;width:40px;height:40px}
  .mega-inner{padding:20px 16px 32px}
  .mega-head input{min-width:0;width:100%}
  .mcols{grid-template-columns:1fr 1fr;gap:16px}
  .mcol a{font-size:13.5px}
}
@media(max-width:420px){
  .mcols{grid-template-columns:1fr}
  .factgrid{grid-template-columns:1fr 1fr}
  .swatches{grid-template-columns:1fr}
  .alphabet a{width:36px;height:36px;font-size:14px}
  .mobar .mobar-call span{display:none}
  .mobar .mobar-call{flex:0 0 52px}
  .hero{padding:26px 18px 32px}
  .brandhero{padding:26px 18px 32px}
}

/* ── motion preferences ──────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .btn::after,.cta-box::before,.postcard::after,.fcard::after{display:none}
}
@media(hover:none){
  .btn::after,.cta-box::before,.postcard::after,.fcard::after{display:none}
  .fcol a:hover{transform:none}
}

/* ── print ────────────────────────────────────────────────────────────── */
@media print{
  nav,.mega,.mobar,.to-top,#progress,footer{display:none !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  body{background:#fff;color:#000}
  main,article{max-width:none;padding:0}
  .hero,.brandhero,.cta-box{background:#fff;color:#000;box-shadow:none;border:1px solid #999}
  .hero h1,.hero .grad,.cta-box h2,.brandhero h1{color:#000;-webkit-text-fill-color:#000}
}