/* =========================================================
   Palette Generator — palettegenerator.org
   Design signature: the "palette strip" — full-width swatch
   rows that split and recolor as you work, the way a real
   palette is read left to right rather than chip by chip.
   ========================================================= */

/* =========================================================
   Self-hosted fonts (variable, latin + latin-ext subsets).
   Served from our own origin so nothing render-blocks on a
   third-party stylesheet. The unicode-range split keeps the
   latin-ext files off the wire for English pages.
   ========================================================= */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-it-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("../fonts/fraunces-it-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:100 800; font-display:swap;
  src:url("../fonts/jbmono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:100 800; font-display:swap;
  src:url("../fonts/jbmono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Core brand palette (from brief) */
  --plum:        #8B2D55;   /* primary brand rose-plum */
  --plum-deep:   #6E2143;   /* darker interactive state */
  --wine:        #28151F;   /* near-black ink */
  --blush:       #FFA8C2;   /* bright accent pink */
  --cream:       #FFF9FB;   /* near-white surface */

  /* Working tokens */
  --ink:        #28151F;
  --ink-soft:   #6A4C57;
  --bg:         #FFF9FB;
  --bg-alt:     #FBEDF1;
  --card:       #FFFFFF;
  --accent:     #8B2D55;
  --accent-2:   #FFA8C2;
  --line:       rgba(40,21,31,0.12);
  --line-soft:  rgba(40,21,31,0.07);
  --shadow:     0 24px 48px -22px rgba(40,21,31,0.38);
  --shadow-sm:  0 8px 20px -12px rgba(40,21,31,0.30);

  --radius-lg:  26px;
  --radius-md:  16px;
  --radius-sm:  11px;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1200px;

  /* --- extended system --- */
  --plum-soft:  #C2417A;
  --grad-brand: linear-gradient(120deg, #8B2D55 0%, #C2417A 48%, #FFA8C2 100%);
  --grad-ink:   linear-gradient(140deg, #3A1220 0%, #28151F 55%, #52182F 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  --ok:         #17794A;
  --ok-soft:    #E1F5E9;
  --ok-line:    rgba(23,121,74,.28);
  --warn:       #B3324B;
  --star:       #E8A33D;
  --header-h:   76px;
  --shadow-lg:  0 44px 88px -34px rgba(40,21,31,.46);
  --ring:       0 0 0 4px rgba(139,45,85,.14);
  --ease:       cubic-bezier(.4,0,.2,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 18px); }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.nav-locked{ overflow:hidden; }

img,svg{ max-width:100%; display:block; height:auto; }
button,input,textarea,select{ font:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

a{ color:inherit; }
.mono{ font-family:var(--font-mono); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 .45em;
  letter-spacing:-0.015em;
  font-weight:600;
  line-height:1.12;
}

:where(a,button,input,textarea,select):focus-visible{
  outline:3px solid rgba(139,45,85,0.45);
  outline-offset:3px;
  border-radius:4px;
}

/* Skip link */
.skip-link{
  position:fixed; left:14px; top:0; z-index:100;
  background:var(--ink); color:var(--cream); padding:12px 18px;
  border-radius:0 0 12px 12px; text-decoration:none; font-weight:600;
  transform:translateY(calc(-100% - 8px));
}
.skip-link:focus-visible{ transform:translateY(0); }

/* =========================================================
   Header — glass bar, gradient hairline, mega dropdowns
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,249,251,0.72);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,45,85,.28) 22%, rgba(255,168,194,.5) 50%, rgba(139,45,85,.28) 78%, transparent);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.site-header.is-stuck{
  background:rgba(255,249,251,0.92);
  box-shadow:0 14px 34px -26px rgba(40,21,31,.5);
}
.site-header.is-stuck::after{ opacity:1; }

.header-row{
  display:flex; align-items:center; gap:18px;
  height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.brand-mark{
  width:32px; height:32px; border-radius:10px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.45), 0 6px 14px -6px rgba(139,45,85,0.75);
  flex-shrink:0; transition:transform .35s var(--ease-out), box-shadow .3s var(--ease);
}
.brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px -8px rgba(139,45,85,.85); }
.brand-mark i{ display:block; transition:background .4s var(--ease); }
.brand-mark i:nth-child(1){ background:var(--plum); }
.brand-mark i:nth-child(2){ background:var(--blush); }
.brand-mark i:nth-child(3){ background:var(--wine); }
.brand-mark i:nth-child(4){ background:var(--plum-deep); }
.brand-word{
  font-family:var(--font-display); font-weight:700; font-size:1.22rem;
  color:var(--ink); white-space:nowrap; letter-spacing:-.02em;
}
.brand-word em{
  font-style:normal;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.main-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-link{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; font-size:.9rem; font-weight:600; letter-spacing:-.005em;
  color:var(--ink-soft); padding:9px 13px; border-radius:11px;
  background:none; border:none; cursor:pointer; font-family:var(--font-body);
  white-space:nowrap; transition:color .18s var(--ease), background .18s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:13px; right:13px; bottom:5px; height:2px; border-radius:2px;
  background:var(--grad-brand); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease-out);
}
.nav-link:hover,
.nav-link[aria-expanded="true"],
.nav-link.is-current{ color:var(--plum); background:rgba(139,45,85,.055); }
.nav-link:hover::after,
.nav-link.is-current::after{ transform:scaleX(1); }
.nav-link svg{ width:16px; height:16px; stroke-width:1.9; flex-shrink:0; }

.nav-item{ position:relative; }
.nav-drop-toggle .drop-caret{
  width:6px; height:6px; margin-top:-3px; margin-left:1px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; border-radius:0 0 1px 0;
  transform:rotate(45deg); transition:transform .25s var(--ease), margin .25s var(--ease);
}
.nav-drop-toggle[aria-expanded="true"] .drop-caret{ transform:rotate(-135deg); margin-top:2px; }

/* invisible hover bridge so the pointer can travel into the panel */
.nav-item.has-dropdown::before{
  content:""; position:absolute; left:-16px; right:-16px; top:100%; height:18px; display:none;
}
.nav-item.has-dropdown:hover::before{ display:block; }

.nav-dropdown{
  position:absolute; top:calc(100% + 14px); left:50%;
  width:max-content; max-width:min(680px, calc(100vw - 40px));
  background:var(--card); border:1px solid var(--line);
  border-radius:20px; box-shadow:var(--shadow-lg); padding:14px; z-index:70;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-10px) scale(.98);
  transform-origin:top center; pointer-events:none;
  transition:opacity .22s var(--ease), transform .28s var(--ease-out), visibility .22s;
}
.nav-dropdown::before{
  content:""; position:absolute; top:-7px; left:50%; width:13px; height:13px; margin-left:-6.5px;
  background:var(--card); border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg); border-radius:3px 0 0 0;
}
.nav-item.has-dropdown:hover > .nav-dropdown,
.nav-item.has-dropdown:focus-within > .nav-dropdown,
.nav-dropdown.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.nav-dropdown--right{ left:auto; right:0; transform:translateY(-10px) scale(.98); }
.nav-dropdown--right::before{ left:auto; right:34px; margin-left:0; }
.nav-item.has-dropdown:hover > .nav-dropdown--right,
.nav-item.has-dropdown:focus-within > .nav-dropdown--right,
.nav-dropdown--right.is-open{ transform:translateY(0) scale(1); }

.nav-dd-label{
  font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink-soft); font-weight:700; margin:2px 0 10px; padding:0 10px;
}
.nav-dd-grid{ display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:2px; }
.nav-dd-grid--one{ grid-template-columns:minmax(250px,1fr); }
.nav-dropdown a{
  padding:10px 11px; border-radius:13px; text-decoration:none; color:var(--ink);
  display:flex; align-items:flex-start; gap:11px;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.nav-dropdown a:hover{ background:var(--bg-alt); transform:translateX(2px); }
.nav-dd-ic{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:grid; place-items:center; color:#fff;
  background:var(--chip,var(--plum));
  box-shadow:0 5px 12px -6px var(--chip,var(--plum)), inset 0 0 0 1px rgba(255,255,255,.18);
}
.nav-dd-ic svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.nav-dd-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.nav-dd-tt{ font-size:.855rem; font-weight:650; line-height:1.3; color:var(--ink); }
.nav-dropdown a:hover .nav-dd-tt{ color:var(--plum); }
.nav-dd-sub{ font-size:.745rem; color:var(--ink-soft); line-height:1.4; }
.nav-dropdown-all{
  margin-top:8px; padding:12px 14px !important; border-top:1px solid var(--line-soft);
  border-radius:0 0 12px 12px !important;
  font-weight:700; color:var(--plum) !important; font-size:.82rem;
  align-items:center !important; justify-content:space-between;
}
.nav-dropdown-all svg{ width:15px; height:15px; transition:transform .22s var(--ease); }
.nav-dropdown-all:hover svg{ transform:translateX(4px); }

.nav-cta{ margin-left:8px; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; border-radius:13px; margin-left:auto;
  background:var(--card); border:1px solid var(--line); cursor:pointer; flex-shrink:0;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle:hover{ border-color:var(--plum); }
.nav-toggle span{
  display:block; width:19px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .28s var(--ease-out), opacity .18s ease;
}
.nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-scrim{
  position:fixed; inset:var(--header-h) 0 0; background:rgba(40,21,31,.34);
  backdrop-filter:blur(2px); opacity:0; visibility:hidden; z-index:29;
  transition:opacity .28s var(--ease), visibility .28s;
}
.nav-scrim.is-open{ opacity:1; visibility:visible; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:.95rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  line-height:1.2; white-space:nowrap;
  transition:transform .18s var(--ease-out), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg{ width:17px; height:17px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn:active{ transform:scale(.97); }
.btn-sm{ padding:9px 17px; font-size:.855rem; gap:7px; }
.btn-sm svg{ width:15px; height:15px; }
.btn-primary{
  background:var(--plum); color:var(--cream); position:relative; overflow:hidden;
  box-shadow:0 12px 26px -12px rgba(139,45,85,0.7);
}
.btn-primary::before{
  content:""; position:absolute; inset:0; background:var(--grad-brand);
  opacity:0; transition:opacity .28s var(--ease);
}
.btn-primary:hover::before{ opacity:1; }
.btn-primary > *{ position:relative; z-index:1; }
.btn-primary:hover{ box-shadow:0 18px 34px -12px rgba(139,45,85,0.72); transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(0) scale(.97); }
.btn-ghost{
  background:rgba(255,255,255,.7); color:var(--ink); border-color:var(--line);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:var(--plum); color:var(--plum); background:#fff; transform:translateY(-2px); }
.btn-dark{ background:var(--wine); color:var(--cream); }
.btn-dark:hover{ background:var(--plum-deep); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(40,21,31,.7); }

/* universal "copied" confirmation state for any copy control */
.is-copied{
  background:var(--ok-soft) !important; color:var(--ok) !important;
  border-color:var(--ok-line) !important; box-shadow:none !important;
}
.is-copied::before{ opacity:0 !important; }
.is-copied svg{ stroke:var(--ok) !important; }
.copy-ic{ display:inline-grid; place-items:center; width:17px; height:17px; }
.copy-ic svg{ grid-area:1/1; transition:opacity .2s var(--ease), transform .28s var(--ease-out); }
.copy-ic .ic-check{ opacity:0; transform:scale(.5) rotate(-12deg); }
.is-copied .copy-ic .ic-copy{ opacity:0; transform:scale(.5); }
.is-copied .copy-ic .ic-check{ opacity:1; transform:none; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  display:grid; grid-template-columns:1.02fr .98fr; gap:60px;
  align-items:center; padding:80px 28px 92px;
}
.eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em;
  font-size:.7rem; color:var(--plum); font-weight:700; margin:0 0 16px;
}
.hero h1{
  font-size:clamp(2.5rem, 5vw, 3.9rem); font-weight:600; line-height:1.03;
  letter-spacing:-0.02em;
}
.hero h1 .grad{
  background:linear-gradient(100deg, var(--plum) 0%, #C2417A 45%, var(--blush) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic; font-weight:500;
}
.lede{
  font-size:1.1rem; color:var(--ink-soft); max-width:48ch; margin:20px 0 32px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-trust{
  margin-top:30px; display:flex; gap:22px; flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-soft);
}
.hero-trust span{ display:flex; align-items:center; gap:8px; }
.hero-trust span::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--blush);
  box-shadow:0 0 0 3px rgba(255,168,194,0.3);
}

/* Hero interactive palette card */
.hero-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.hero-strip{ display:flex; height:220px; }
.hero-strip .swatch{
  flex:1; position:relative; cursor:pointer; transition:flex .35s cubic-bezier(.4,0,.2,1);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px;
}
.hero-strip .swatch:hover{ flex:1.7; }
.hero-strip .swatch .sw-hex{
  font-family:var(--font-mono); font-size:.68rem; font-weight:700;
  background:rgba(255,255,255,0.82); color:var(--wine); padding:4px 8px; border-radius:6px;
  opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap;
}
.hero-strip .swatch:hover .sw-hex,
.hero-strip .swatch:focus-visible .sw-hex,
.hero-strip .swatch.is-copied .sw-hex{ opacity:1; transform:translateY(0); }
.hero-strip .swatch{ border:none; }
.hero-strip .swatch.is-copied .sw-hex{ background:var(--ok-soft); color:var(--ok); }
.hero-card-foot{
  display:flex; align-items:center; gap:12px; padding:18px 20px;
  border-top:1px solid var(--line);
}
.hero-card-foot .lbl{
  font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--ink-soft);
}
.hero-regen{
  margin-left:auto; font-family:var(--font-mono); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; background:var(--wine); color:var(--cream);
  border:none; padding:10px 16px; border-radius:999px; cursor:pointer; display:flex; gap:8px; align-items:center;
  transition:background .15s ease, transform .15s ease;
}
.hero-regen:hover{ background:var(--plum); }
.hero-regen:active{ transform:scale(.95); }
.hero-regen .key{
  font-size:.62rem; background:rgba(255,255,255,0.2); padding:2px 6px; border-radius:5px;
}

/* =========================================================
   Section scaffolding
   ========================================================= */
.section{ padding:88px 28px; border-top:1px solid var(--line-soft); }
.section-head{ max-width:660px; margin:0 auto 46px; }
.section-head.center{ text-align:center; }
.section-head h2{ font-size:clamp(1.75rem, 3.2vw, 2.4rem); }
.section-sub{ color:var(--ink-soft); font-size:1.02rem; max-width:58ch; margin:0; }
.section-head.center .section-sub{ margin-left:auto; margin-right:auto; }

/* Intro facts */
.intro-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:44px; align-items:start; }
.intro-lead{ font-size:1.16rem; color:var(--ink-soft); max-width:54ch; }
.intro-lead code, .prose code{
  background:var(--bg-alt); padding:2px 8px; border-radius:6px; color:var(--plum);
  font-family:var(--font-mono); font-weight:700; font-size:.9em;
}
.intro-facts{ display:flex; flex-direction:column; gap:14px; }
.fact{
  display:flex; align-items:center; gap:16px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:15px 18px;
}
.fact-num{ font-family:var(--font-mono); font-size:1.3rem; font-weight:700; color:var(--plum); min-width:4ch; }
.fact-label{ color:var(--ink-soft); font-size:.9rem; }

/* =========================================================
   The core Palette Generator tool
   ========================================================= */
.gen-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); position:relative;
}
.gen-bar{
  display:flex; height:clamp(220px, 34vw, 330px); background:var(--bg-alt);
  border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; overflow:hidden;
}
.gen-swatch{
  flex:1; position:relative; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; padding:0 8px 22px; gap:10px;
  transition:flex .45s var(--ease), background .45s var(--ease);
  min-width:0;
}
.gen-swatch-tools{
  display:flex; flex-direction:column; gap:8px; align-items:center;
  opacity:0; transform:translateY(12px); transition:opacity .25s var(--ease), transform .3s var(--ease-out);
}
.gen-swatch:hover .gen-swatch-tools,
.gen-swatch:focus-within .gen-swatch-tools{ opacity:1; transform:translateY(0); }
.gen-swatch:hover{ flex:1.4; }
.sw-btn{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 5px 14px -5px rgba(0,0,0,0.45);
  transition:transform .18s var(--ease-out), background .18s var(--ease);
}
.sw-btn:hover{ transform:scale(1.12); background:#fff; }
.sw-btn:active{ transform:scale(.94); }
.sw-btn svg{ width:17px; height:17px; fill:none; stroke:var(--wine); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sw-btn.is-locked{ background:var(--wine); }
.sw-btn.is-locked svg{ stroke:var(--cream); }
.sw-btn.is-copied{ background:var(--ok-soft) !important; }
.sw-btn.is-copied svg{ stroke:var(--ok) !important; }
.gen-swatch-hex{
  font-family:var(--font-mono); font-weight:700; font-size:.88rem; letter-spacing:.04em;
  padding:8px 12px; border-radius:9px; background:rgba(255,255,255,0.92); color:var(--wine);
  cursor:pointer; border:none; display:inline-flex; align-items:center; gap:7px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease-out);
}
.gen-swatch-hex:hover{ background:#fff; transform:translateY(-2px); }
.gen-swatch-hex .copy-ic{ width:14px; height:14px; opacity:.55; }
.gen-swatch-hex .copy-ic svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.gen-swatch-hex.is-copied{ background:var(--ok-soft) !important; color:var(--ok) !important; }
.gen-swatch-hex.is-copied .copy-ic{ opacity:1; }
.gen-swatch.locked-glow::after{
  content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 4px rgba(255,255,255,0.55);
  pointer-events:none;
}
.gen-swatch-ratio{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.58rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 8px; border-radius:999px;
  background:rgba(255,255,255,.22); color:inherit; white-space:nowrap;
  opacity:0; transition:opacity .25s var(--ease);
}
.gen-swatch:hover .gen-swatch-ratio, .gen-swatch:focus-within .gen-swatch-ratio{ opacity:.85; }

/* --- source bar (base colour / image) --- */
.gen-source{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 24px; border-top:1px solid var(--line); background:linear-gradient(180deg,#fff,var(--bg));
}
.gen-base{
  display:flex; align-items:center; gap:10px; padding:7px 14px 7px 8px;
  border:1px solid var(--line); border-radius:999px; background:var(--card);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.gen-base:focus-within{ border-color:var(--plum); box-shadow:var(--ring); }
.color-well{
  width:32px; height:32px; border-radius:50%; padding:0; border:2px solid #fff; cursor:pointer;
  box-shadow:0 0 0 1px var(--line), 0 4px 10px -5px rgba(40,21,31,.5);
  -webkit-appearance:none; appearance:none; background:none; flex-shrink:0;
  transition:transform .18s var(--ease-out);
}
.color-well:hover{ transform:scale(1.08); }
.color-well::-webkit-color-swatch-wrapper{ padding:0; }
.color-well::-webkit-color-swatch{ border:none; border-radius:50%; }
.color-well::-moz-color-swatch{ border:none; border-radius:50%; }
.gen-base .hash{ margin-left:2px; }
.gen-base .hex-input{ width:8ch; font-size:.94rem; }

.gen-upload{
  display:inline-flex; align-items:center; gap:9px; padding:10px 18px; cursor:pointer;
  border:1.5px dashed var(--line); border-radius:999px; background:var(--card);
  font-size:.855rem; font-weight:600; color:var(--ink-soft);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.gen-upload svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.gen-upload:hover{ border-color:var(--plum); color:var(--plum); background:var(--bg-alt); }
.gen-panel.is-dragover{ box-shadow:0 0 0 3px var(--plum), var(--shadow); }
.gen-panel.is-dragover .gen-upload{ border-color:var(--plum); color:var(--plum); border-style:solid; }
.gen-source-note{
  margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  font-size:.8rem; color:var(--ink-soft);
}
.gen-source-note img{
  width:34px; height:34px; border-radius:9px; object-fit:cover; border:1px solid var(--line);
}

.gen-controls{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:18px 24px; border-top:1px solid var(--line-soft);
}
.gen-controls .field{ display:flex; align-items:center; gap:9px; }
.gen-controls label{
  font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft);
}
.gen-select{
  padding:10px 36px 10px 15px; border-radius:999px; border:1px solid var(--line);
  background:var(--card) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A4C57' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center / 14px;
  color:var(--ink); font-weight:600; font-size:.85rem; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.gen-select:hover{ border-color:var(--plum); }
.gen-count{
  display:flex; align-items:center; gap:2px; padding:3px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:999px;
}
.count-btn{
  width:32px; height:32px; border-radius:50%; border:none; display:grid; place-items:center;
  background:transparent; color:var(--ink); font-weight:700; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.count-btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.count-btn:hover:not(:disabled){ background:var(--plum); color:var(--cream); }
.count-btn:disabled{ opacity:.35; cursor:not-allowed; }
.count-val{
  min-width:30px; text-align:center; font-family:var(--font-mono); font-weight:700;
  font-size:.9rem; color:var(--ink);
}
.gen-actions{ margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* export dropdown */
.gen-export-wrap{ position:relative; }
.export-menu{
  position:absolute; right:0; bottom:calc(100% + 10px); width:238px; z-index:30;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.97);
  transition:opacity .2s var(--ease), transform .25s var(--ease-out), visibility .2s;
}
.export-menu.is-open{ opacity:1; visibility:visible; transform:none; }
.export-menu button{
  width:100%; display:flex; align-items:center; gap:11px; padding:10px 12px;
  background:none; border:none; border-radius:11px; cursor:pointer; text-align:left;
  font-size:.86rem; font-weight:600; color:var(--ink);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.export-menu button:hover{ background:var(--bg-alt); color:var(--plum); }
.export-menu button svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.export-menu button.is-copied{ background:var(--ok-soft) !important; color:var(--ok) !important; }

.gen-hint{
  padding:0 24px 20px; color:var(--ink-soft); font-size:.82rem;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.gen-hint kbd{
  font-family:var(--font-mono); font-size:.72rem; background:var(--wine); color:var(--cream);
  padding:3px 8px; border-radius:6px; box-shadow:0 2px 0 rgba(40,21,31,.35);
}

.toast{
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(20px);
  background:var(--wine); color:var(--cream); padding:12px 20px; border-radius:999px;
  font-size:.88rem; font-weight:600; box-shadow:var(--shadow-lg); z-index:95;
  opacity:0; pointer-events:none; display:flex; align-items:center; gap:10px;
  transition:opacity .25s var(--ease), transform .3s var(--ease-out);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg{ width:16px; height:16px; fill:none; stroke:#7BE0A8; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.toast .toast-chip{ width:14px; height:14px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }

/* =========================================================
   Converter
   ========================================================= */
.converter-panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.converter-panel::before{
  content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--grad-brand);
}
.converter-input-row{
  display:flex; align-items:center; gap:11px; min-width:0;
  border-bottom:2px solid var(--bg-alt); padding-bottom:15px; margin-bottom:26px;
  transition:border-color .2s var(--ease);
}
.converter-input-row:focus-within{ border-color:var(--plum); }
.swatch-dot{
  width:30px; height:30px; border-radius:50%; background:var(--chip,#8B2D55);
  border:2px solid var(--card); box-shadow:0 0 0 1px var(--line); flex-shrink:0;
}
.hash{ font-family:var(--font-mono); color:var(--ink-soft); font-weight:700; flex-shrink:0; }
.hex-input{
  font-family:var(--font-mono); font-size:1.05rem; font-weight:700;
  border:none; background:transparent; color:var(--ink);
  flex:1 1 auto; min-width:0; letter-spacing:.03em; text-transform:uppercase;
  outline:none; text-overflow:ellipsis;
}
.hex-input--lg{ font-size:1.25rem; }
.conv-tools{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.icon-btn{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft); cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease-out);
}
.icon-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn:hover{ color:var(--plum); border-color:var(--plum); background:var(--bg-alt); transform:translateY(-2px); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn.is-copied{ color:var(--ok) !important; border-color:var(--ok-line) !important; background:var(--ok-soft) !important; }

.converter-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.conv-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.conv-field label{
  font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft);
}
.conv-out{ position:relative; display:flex; align-items:center; }
.conv-out input{
  padding:13px 44px 13px 14px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--bg-alt); font-size:.85rem; font-weight:700; color:var(--ink);
  font-family:var(--font-mono); width:100%; min-width:0; cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.conv-out input:hover{ border-color:var(--plum); background:#fff; }
.conv-copy{
  position:absolute; right:6px; width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center; border:none; background:transparent; cursor:pointer;
  color:var(--ink-soft); transition:color .18s var(--ease), background .18s var(--ease);
}
.conv-copy svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.conv-copy:hover{ color:var(--plum); background:rgba(139,45,85,.09); }
.conv-copy.is-copied{ color:var(--ok) !important; background:var(--ok-soft) !important; }
.conv-field.is-copied .conv-out input{ border-color:var(--ok-line); background:var(--ok-soft); }

/* =========================================================
   Swatch grids (shades + named)
   ========================================================= */
.swatch-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.swatch-grid--dense{ grid-template-columns:repeat(4,1fr); }
.color-card{
  border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  background:var(--card); cursor:pointer; padding:0; font:inherit; text-align:left;
  transition:transform .2s ease, box-shadow .2s ease;
}
.color-card{ display:flex; flex-direction:column; }
.color-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.color-card .cc-face{ display:block; height:104px; background:var(--chip); flex-shrink:0; }
.color-card--sm .cc-face{ height:70px; }
.color-card .cc-body{ padding:13px 15px; display:flex; flex-direction:column; gap:3px; flex:1; }
.cc-name{ font-weight:700; font-size:.9rem; }
.cc-hex{ font-family:var(--font-mono); font-size:.76rem; color:var(--plum); font-weight:700; }
.cc-note{ font-size:.76rem; color:var(--ink-soft); }
.color-card .cc-face{ position:relative; }
.cc-action{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--wine);
  box-shadow:0 4px 12px -6px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-6px) scale(.9);
  transition:opacity .22s var(--ease), transform .28s var(--ease-out), background .2s var(--ease), color .2s var(--ease);
}
.cc-action svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.color-card:hover .cc-action,
.color-card:focus-visible .cc-action,
.color-card.is-copied .cc-action{ opacity:1; transform:none; }
.color-card.is-copied .cc-action{ background:var(--ok-soft); color:var(--ok); }
.color-card.is-copied{ border-color:var(--ok-line); }
.color-card.is-copied .cc-hex{ color:var(--ok); }

/* =========================================================
   Meaning / harmony explainer
   ========================================================= */
.meaning-layout{ display:grid; grid-template-columns:1.35fr 1fr; gap:48px; align-items:start; }
.meaning-copy p{ color:var(--ink-soft); font-size:1.02rem; max-width:58ch; margin:0 0 18px; }
.harmony-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.harmony-list li{
  display:flex; gap:14px; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px;
}
.harmony-swatches{ display:flex; flex-shrink:0; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-sm); }
.harmony-swatches i{ width:20px; height:36px; display:block; }
.harmony-list .h-name{ font-weight:700; font-size:.92rem; }
.harmony-list .h-desc{ font-size:.82rem; color:var(--ink-soft); }

/* =========================================================
   Use cases
   ========================================================= */
.usecase-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.usecase-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:24px; display:flex; flex-direction:column; gap:11px;
}
.usecase-strip{ display:flex; height:14px; border-radius:6px; overflow:hidden; }
.usecase-strip i{ flex:1; }
.usecase-card h3{ font-size:1.05rem; margin:6px 0 0; }
.usecase-card p{ color:var(--ink-soft); font-size:.88rem; margin:0; flex:1; }

/* =========================================================
   Contrast checker
   ========================================================= */
.contrast-panel{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px; box-shadow:var(--shadow); align-items:center; position:relative; overflow:hidden;
}
.contrast-panel::before{
  content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--grad-brand);
}
.contrast-inputs{ display:flex; flex-direction:column; gap:16px; }
.contrast-inputs .converter-input-row{ margin-bottom:0; padding-bottom:11px; }
.contrast-swap{
  align-self:center; display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--bg-alt);
  font-size:.8rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.contrast-swap svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease-out); }
.contrast-swap:hover{ color:var(--plum); border-color:var(--plum); background:#fff; }
.contrast-swap:hover svg{ transform:rotate(180deg); }
.contrast-result{ text-align:center; }
.contrast-preview{
  border-radius:var(--radius-md); padding:34px 20px; border:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px; align-items:center;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.contrast-preview .cp-lg{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; line-height:1.15; }
.contrast-preview .cp-sm{ font-size:.9rem; line-height:1.5; max-width:34ch; opacity:.92; }
.contrast-meta{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.contrast-ratio{
  font-size:1.15rem; font-weight:700; font-family:var(--font-mono);
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px; background:var(--bg-alt); border:1px solid var(--line);
}
.contrast-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{
  font-family:var(--font-mono); font-size:.68rem; font-weight:700; padding:6px 11px;
  border-radius:999px; display:inline-flex; align-items:center; gap:5px;
}
.badge svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.badge.pass{ background:var(--ok-soft); color:var(--ok); }
.badge.fail{ background:#FBE0E3; color:var(--warn); }

/* =========================================================
   Code snippets
   ========================================================= */
.code-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.code-card{
  background:var(--wine); color:#F7E6EC; border-radius:var(--radius-md);
  padding:22px; overflow:auto; position:relative;
}
.code-label{
  display:block; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--blush); margin-bottom:12px;
}
.code-card pre{ margin:0; font-family:var(--font-mono); font-size:.8rem; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.code-copy{
  position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:.62rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:rgba(255,255,255,0.12);
  color:var(--cream); border:1px solid rgba(255,255,255,.14); padding:7px 11px; border-radius:9px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.code-copy svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.code-copy .copy-ic{ width:13px; height:13px; }
.code-copy:hover{ background:rgba(255,255,255,0.24); }
.code-copy.is-copied{
  background:rgba(123,224,168,.16) !important; color:#8FE8B6 !important;
  border-color:rgba(123,224,168,.4) !important;
}
.code-copy.is-copied svg{ stroke:#8FE8B6 !important; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-cols{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px 22px;
  max-width:1080px; margin:0 auto; align-items:start;
}
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--card); border:1px solid var(--line); border-radius:15px; overflow:hidden;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.faq-item:hover{ border-color:rgba(139,45,85,.3); box-shadow:var(--shadow-sm); }
.faq-item.is-open{ border-color:rgba(139,45,85,.42); box-shadow:var(--shadow-sm); }
.faq-q{
  width:100%; min-height:88px; display:flex; align-items:center; gap:10px;
  padding:14px 16px; background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:.9rem; font-weight:650; color:var(--ink); text-align:left;
  line-height:1.4;
}
.faq-cat-ic{
  width:34px; height:34px; border-radius:10px; flex-shrink:0; display:grid; place-items:center;
  background:var(--chip,var(--plum)); color:#fff; margin-top:-2px;
  box-shadow:0 5px 12px -7px var(--chip,var(--plum)), inset 0 0 0 1px rgba(255,255,255,.2);
}
.faq-cat-ic svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.faq-qt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.faq-cat-name{
  font-family:var(--font-mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.13em;
  font-weight:700; color:var(--chip,var(--plum));
}
.faq-icon{ width:20px; height:20px; position:relative; flex-shrink:0; margin-top:7px; }
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; background:var(--plum); border-radius:2px;
  transition:transform .3s var(--ease-out), opacity .25s var(--ease);
}
.faq-icon::before{ width:100%; height:2px; top:9px; left:0; }
.faq-icon::after{ width:2px; height:100%; left:9px; top:0; }
.faq-q[aria-expanded="true"] .faq-icon::before{ transform:rotate(180deg); }
.faq-q[aria-expanded="true"] .faq-icon::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .32s var(--ease); }
.faq-a > div{ padding:0 20px 18px 66px; }
.faq-a p{ color:var(--ink-soft); margin:0; font-size:.91rem; line-height:1.65; }
.faq-a p + p{ margin-top:12px; }
.faq-a a{ color:var(--plum); font-weight:600; text-decoration:underline; text-decoration-color:var(--blush); text-underline-offset:3px; }

/* =========================================================
   Reviews — infinite marquee carousel
   ========================================================= */
.reviews-section{ overflow:hidden; }
.reviews-rail{
  position:relative; margin:0 -28px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews-track{
  display:flex; gap:20px; width:max-content; padding:14px 28px;
  will-change:transform;
}
.review-card{
  width:clamp(276px, 25vw, 330px); flex-shrink:0;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:13px;
  box-shadow:0 12px 30px -24px rgba(40,21,31,.5);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.review-card:hover{ transform:translateY(-5px); border-color:rgba(139,45,85,.28); box-shadow:var(--shadow); }
.review-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.review-stars{ display:flex; gap:2px; }
.review-stars svg{ width:15px; height:15px; fill:var(--star); stroke:none; }
.review-quote-ic{ width:24px; height:24px; opacity:.16; flex-shrink:0; }
.review-quote-ic svg{ width:100%; height:100%; fill:var(--plum); }
.review-text{
  margin:0; color:var(--ink); font-size:.9rem; line-height:1.65; flex:1;
}
.review-foot{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line-soft); }
.review-avatar{
  width:42px; height:42px; border-radius:13px; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff;
  background:var(--chip,var(--plum));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 14px -8px var(--chip,var(--plum));
}
.review-who{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.review-name{ font-weight:700; font-size:.88rem; line-height:1.2; }
.review-role{ font-size:.76rem; color:var(--ink-soft); line-height:1.3; }
.review-loc{ display:flex; align-items:center; gap:6px; margin-top:3px; }
.flag{
  width:20px; height:14px; border-radius:3px; flex-shrink:0; display:block;
  box-shadow:0 0 0 1px rgba(40,21,31,.13); overflow:hidden;
}
.review-country{ font-family:var(--font-mono); font-size:.65rem; letter-spacing:.05em; color:var(--ink-soft); text-transform:uppercase; }
.review-verified{
  margin-left:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:4px;
  font-size:.62rem; font-weight:700; color:var(--ok); background:var(--ok-soft);
  padding:4px 8px; border-radius:999px; white-space:nowrap;
}
.review-verified svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

.reviews-controls{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:34px;
}
.rev-btn{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease-out);
}
.rev-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.rev-btn:hover{ background:var(--plum); color:var(--cream); border-color:var(--plum); transform:translateY(-2px); }
.rev-btn:active{ transform:scale(.94); }
.rev-btn .ic-play{ display:none; }
.rev-btn.is-paused .ic-play{ display:block; }
.rev-btn.is-paused .ic-pause{ display:none; }
.reviews-score{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:0 auto 34px; padding:14px 22px; width:max-content; max-width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-sm);
}
.reviews-score .rs-num{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; line-height:1; color:var(--plum); }
.reviews-score .rs-stars{ display:flex; gap:2px; }
.reviews-score .rs-stars svg{ width:16px; height:16px; fill:var(--star); }
.reviews-score .rs-txt{ font-size:.83rem; color:var(--ink-soft); }
.reviews-score .rs-div{ width:1px; height:22px; background:var(--line); }

/* =========================================================
   Blog — homepage teaser + listing + post
   ========================================================= */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.post-thumb{ aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--bg-alt); }
.post-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-cat{
  font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--plum); font-weight:700;
}
.post-card h3{ font-size:1.12rem; margin:0; line-height:1.2; }
.post-excerpt{ color:var(--ink-soft); font-size:.88rem; margin:0; flex:1; }
.post-meta{
  font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);
  display:flex; gap:10px; align-items:center; margin-top:4px;
}
.blog-viewall{ text-align:center; margin-top:48px; }

.blog-hero{ padding:64px 28px 24px; text-align:center; }
.blog-hero .eyebrow{ display:block; }
.blog-hero h1{ font-size:clamp(2rem, 4vw, 2.8rem); max-width:22ch; margin:0 auto .5em; }
.blog-hero p{ color:var(--ink-soft); max-width:58ch; margin:0 auto; font-size:1.05rem; }

.blog-filters{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:36px auto 8px; max-width:900px;
}
.filter-btn{
  font-family:var(--font-mono); font-size:.74rem; font-weight:700; padding:9px 16px;
  border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
  cursor:pointer; text-transform:uppercase; letter-spacing:.04em; transition:all .15s ease;
}
.filter-btn:hover{ border-color:var(--plum); color:var(--plum); }
.filter-btn.is-active{ background:var(--wine); color:var(--cream); border-color:var(--wine); }

.pagination{
  display:flex; justify-content:center; align-items:center; gap:8px; margin:52px auto 0; flex-wrap:wrap;
}
.page-btn{
  min-width:44px; height:44px; padding:0 14px; border-radius:11px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-weight:700; cursor:pointer; font-family:var(--font-mono);
  font-size:.85rem; transition:all .15s ease; display:inline-flex; align-items:center; justify-content:center;
}
.page-btn:hover:not(:disabled){ border-color:var(--plum); color:var(--plum); }
.page-btn.is-active{ background:var(--plum); color:var(--cream); border-color:var(--plum); }
.page-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* Article / post body */
.article{ padding:0 0 96px; }
.article-hero{ padding:56px 28px 36px; max-width:820px; margin:0 auto; }
.article-hero .eyebrow{ margin-bottom:14px; }
.article-hero h1{ font-size:clamp(2rem, 4vw, 2.65rem); line-height:1.08; }
.article-meta{
  display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft);
}
.article-meta .a-swatch{ width:22px; height:22px; border-radius:6px; background:var(--chip); }
.article-feat{
  max-width:960px; margin:0 auto 8px; padding:0 28px;
}
.article-feat img{ width:100%; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.prose{ max-width:720px; margin:0 auto; padding:28px 28px 0; color:var(--ink); }
.prose p{ color:var(--ink-soft); font-size:1.06rem; margin:0 0 22px; }
.prose h2{ font-size:1.55rem; margin:46px 0 16px; }
.prose h3{ font-family:var(--font-body); font-weight:700; font-size:1.15rem; margin:30px 0 10px; color:var(--ink); }
.prose ul,.prose ol{ color:var(--ink-soft); padding-left:24px; margin:0 0 22px; }
.prose li{ margin-bottom:9px; }
.prose a{ color:var(--plum); font-weight:600; text-decoration:underline; text-decoration-color:var(--blush); text-underline-offset:3px; }
.prose strong{ color:var(--ink); }
.prose blockquote{
  margin:0 0 26px; padding:16px 22px; border-left:4px solid var(--plum);
  background:var(--card); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--ink-soft);
}
.prose blockquote p{ margin:0; }
.callout{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--blush);
  border-radius:var(--radius-sm); padding:18px 22px; margin:0 0 26px;
}
.callout p{ margin:0; color:var(--ink-soft); font-size:.96rem; }
.article-callout{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--blush);
  border-radius:var(--radius-sm); padding:18px 22px; margin:0 0 26px;
}
.article-callout p{ margin:0; color:var(--ink-soft); font-size:.96rem; }
.prose-strip{ display:flex; height:56px; border-radius:var(--radius-sm); overflow:hidden; margin:0 0 26px; box-shadow:var(--shadow-sm); }
.prose-strip i{ flex:1; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; }
.prose-strip i span{ font-family:var(--font-mono); font-size:.6rem; background:rgba(255,255,255,0.8); padding:2px 5px; border-radius:4px; color:var(--wine); }

.article-figure{ margin:0 0 26px; }
.article-figure img{ width:100%; border-radius:var(--radius-md); }
.article-figure figcaption{ font-size:.8rem; color:var(--ink-soft); text-align:center; margin-top:10px; font-family:var(--font-mono); }

/* Related posts */
.related{ max-width:1100px; margin:64px auto 0; padding:0 28px; }
.related h2{ font-size:1.5rem; margin-bottom:24px; text-align:center; }

/* Guide index + generic hero */
.guide-hero{ padding:64px 28px 22px; text-align:center; }
.guide-hero .eyebrow{ display:block; }
.guide-hero h1{ font-size:clamp(2rem, 4vw, 2.8rem); max-width:22ch; margin:0 auto .5em; }
.guide-hero p{ color:var(--ink-soft); max-width:58ch; margin:0 auto; font-size:1.05rem; }
.guide-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; padding:44px 28px 96px; max-width:var(--maxw); margin:0 auto; }
.guide-card{
  display:flex; flex-direction:column; gap:13px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-md); padding:26px;
  text-decoration:none; color:var(--ink); transition:transform .2s ease, box-shadow .2s ease;
}
.guide-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.guide-card-strip{ display:flex; height:34px; border-radius:9px; overflow:hidden; }
.guide-card-strip i{ flex:1; }
.guide-card h2{ font-size:1.15rem; margin:0; }
.guide-card p{ color:var(--ink-soft); font-size:.9rem; margin:0; }
.read-more{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--plum); font-weight:700; margin-top:auto; }

/* Simple content pages (about/contact/legal) */
.page-body{ max-width:760px; margin:0 auto; padding:12px 28px 0; }
.page-body h2{ font-size:1.5rem; margin:40px 0 14px; }
.page-body p{ color:var(--ink-soft); font-size:1.05rem; margin:0 0 20px; }
.page-body ul{ color:var(--ink-soft); padding-left:24px; margin:0 0 20px; }
.page-body li{ margin-bottom:9px; }
.contact-card{
  display:flex; align-items:center; gap:18px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:22px 24px; margin:0 0 22px;
}
.contact-card .cc-icon{
  width:52px; height:52px; border-radius:14px; background:var(--bg-alt); display:grid; place-items:center; flex-shrink:0;
}
.contact-card .cc-icon svg{ width:24px; height:24px; stroke:var(--plum); }
.contact-card a{ color:var(--plum); font-weight:700; text-decoration:none; font-family:var(--font-mono); }

/* CTA */
.cta-card{
  background:var(--wine); color:var(--cream); border-radius:var(--radius-lg);
  padding:52px; display:grid; grid-template-columns:auto 1fr auto; gap:34px; align-items:center;
}
.cta-swatches{ display:flex; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px -10px rgba(0,0,0,0.5); flex-shrink:0; }
.cta-swatches i{ width:26px; height:74px; }
.cta-copy h2{ color:var(--cream); font-size:1.7rem; margin-bottom:8px; }
.cta-copy p{ color:rgba(255,249,251,0.72); margin:0; max-width:48ch; font-size:.95rem; }
.cta-card .btn{ background:var(--blush); color:var(--wine); box-shadow:none; white-space:nowrap; }
.cta-card .btn:hover{ background:#fff; }

/* article CTA (guide/blog end) */
.article-cta{ max-width:720px; margin:52px auto 0; padding:0 28px; }
.article-cta-card{
  background:var(--wine); color:var(--cream); border-radius:var(--radius-md);
  padding:32px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.article-cta-card h2{ color:var(--cream); font-size:1.35rem; margin:0 0 6px; }
.article-cta-card p{ margin:0; color:rgba(255,249,251,0.75); max-width:42ch; font-size:.92rem; }
.article-cta-card .btn{ background:var(--blush); color:var(--wine); box-shadow:none; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  border-top:1px solid var(--line); padding:70px 0 0; background:var(--bg-alt);
  position:relative;
}
.site-footer::before{
  content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--grad-brand); opacity:.85;
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr repeat(4, minmax(0,1fr)); gap:44px 32px; padding-bottom:48px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:14px; }
.footer-tagline{ color:var(--ink-soft); font-size:.87rem; max-width:34ch; margin:0 0 18px; line-height:1.65; }
.footer-strip{
  display:flex; height:10px; border-radius:6px; overflow:hidden; max-width:200px; margin:0 0 18px;
  box-shadow:0 4px 12px -8px rgba(40,21,31,.6);
}
.footer-strip i{ flex:1; }
.footer-mail{
  display:inline-flex; align-items:center; gap:9px; font-size:.83rem; font-weight:600;
  color:var(--ink-soft); text-decoration:none; padding:9px 15px; border-radius:999px;
  background:var(--card); border:1px solid var(--line);
  transition:color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease-out);
}
.footer-mail svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.footer-mail:hover{ color:var(--plum); border-color:var(--plum); transform:translateY(-2px); }
.footer-heading{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em;
  font-size:.68rem; color:var(--plum); margin:0 0 16px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.footer-heading svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.footer-heading a{
  display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none;
  transition:color .18s var(--ease), transform .18s var(--ease);
}
.footer-heading a:hover{ color:var(--plum-deep); transform:translateX(2px); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col ul a{
  font-size:.855rem; color:var(--ink-soft); text-decoration:none; line-height:1.45;
  display:inline-block; transition:color .18s var(--ease), transform .18s var(--ease);
}
.footer-col ul a:hover{ color:var(--plum); transform:translateX(3px); }
.footer-col ul a strong{ color:var(--plum); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding:22px 28px; max-width:var(--maxw); margin:0 auto;
}
.footer-note{ color:var(--ink-soft); font-size:.82rem; margin:0; }
.footer-keyword-link{ color:var(--plum); font-weight:700; text-decoration:none; }
.footer-keyword-link:hover{ text-decoration:underline; }
.footer-links{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.footer-links a{ font-size:.82rem; text-decoration:none; color:var(--ink-soft); }
.footer-links a:hover{ color:var(--plum); }
.footer-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:.75rem; font-weight:600;
  color:var(--ok); background:var(--ok-soft); padding:5px 11px; border-radius:999px;
}
.footer-badge svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* =========================================================
   Scroll to top — ring progress button
   ========================================================= */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:52px; height:52px; padding:0; border:none; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:var(--card);
  box-shadow:0 16px 34px -14px rgba(40,21,31,.5), 0 0 0 1px var(--line);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.85);
  transition:opacity .3s var(--ease), transform .38s var(--ease-out), visibility .3s, box-shadow .3s var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ box-shadow:0 20px 40px -14px rgba(139,45,85,.6), 0 0 0 1px rgba(139,45,85,.35); }
.to-top:active{ transform:scale(.93); }
.to-top .tt-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.to-top .tt-ring circle{ fill:none; stroke-width:3; }
.to-top .tt-track{ stroke:rgba(139,45,85,.14); }
.to-top .tt-bar{
  stroke:url(#ttGrad); stroke-linecap:round;
  stroke-dasharray:144.5; stroke-dashoffset:144.5;
  transition:stroke-dashoffset .12s linear;
}
.to-top .tt-arrow{
  position:relative; width:20px; height:20px; fill:none; stroke:var(--plum);
  stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease-out), stroke .2s var(--ease);
}
.to-top:hover .tt-arrow{ transform:translateY(-2px); stroke:var(--plum-deep); }

/* =========================================================
   Motion — one orchestrated load reveal only
   ========================================================= */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.reveal{ animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
.reveal-2{ animation-delay:.09s; }
.reveal-3{ animation-delay:.18s; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1260px){
  .nav-dd-grid{ grid-template-columns:repeat(2,minmax(206px,1fr)); }
  .nav-dd-sub{ font-size:.72rem; }
}

@media (max-width:1180px){
  .footer-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:38px 26px; }
  .footer-brand-col{ grid-column:1 / -1; }
  .footer-tagline{ max-width:52ch; }
}

@media (max-width:1080px){
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    max-height:calc(100dvh - var(--header-h));
    background:var(--bg); flex-direction:column; align-items:stretch; gap:4px;
    padding:20px 22px calc(28px + env(safe-area-inset-bottom));
    margin-left:0; border-bottom:1px solid var(--line);
    box-shadow:0 30px 60px -30px rgba(40,21,31,.5);
    transform:translateY(-102%); opacity:0; visibility:hidden;
    transition:transform .34s var(--ease-out), opacity .24s var(--ease), visibility .34s;
    z-index:30; overflow-y:auto; overscroll-behavior:contain;
  }
  .main-nav.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav-link{ font-size:1rem; padding:13px 14px; border-radius:13px; width:100%; }
  .nav-link::after{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-item{ width:100%; }
  .nav-drop-toggle{ justify-content:space-between; }
  .nav-drop-toggle .drop-caret{ margin-left:auto; }
  .nav-item.has-dropdown::before{ display:none !important; }
  .nav-item.has-dropdown:hover > .nav-dropdown,
  .nav-item.has-dropdown:focus-within > .nav-dropdown{
    opacity:0; visibility:hidden; pointer-events:none;
  }
  .nav-dropdown{
    position:static; width:100%; max-width:none; transform:none !important;
    box-shadow:none; border:none; border-left:2px solid var(--blush); border-radius:0;
    padding:4px 0 8px 10px; margin:2px 0 8px 14px;
    display:none; opacity:1; visibility:visible; pointer-events:auto;
    transition:none;
  }
  .nav-dropdown::before{ display:none; }
  .nav-item.has-dropdown > .nav-dropdown.is-open{
    display:block; opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    animation:ddIn .28s var(--ease-out) both;
  }
  @keyframes ddIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  .nav-dd-label{ padding:0 6px; }
  .nav-dd-grid{ grid-template-columns:1fr; }
  .nav-dd-sub{ display:none; }
  .nav-dropdown a{ padding:9px 8px; }
  .nav-dd-ic{ width:30px; height:30px; border-radius:9px; }
  .nav-dd-ic svg{ width:15px; height:15px; }
  .nav-cta{ margin:12px 0 0; width:100%; justify-content:center; }
  .nav-dropdown-all{ margin-top:4px; padding:11px 8px !important; }
}

@media (max-width:980px){
  .hero{ grid-template-columns:1fr; padding-top:56px; gap:44px; }
  .intro-grid,.meaning-layout,.contrast-panel{ grid-template-columns:1fr; }
  .usecase-grid{ grid-template-columns:repeat(2,1fr); }
  .swatch-grid{ grid-template-columns:repeat(3,1fr); }
  .swatch-grid--dense{ grid-template-columns:repeat(3,1fr); }
  .code-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .guide-grid{ grid-template-columns:1fr; }
  .cta-card{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .faq-cols{ grid-template-columns:1fr; gap:12px; max-width:780px; }
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 26px; }
}

@media (max-width:720px){
  .wrap{ padding-left:20px; padding-right:20px; }
  .section{ padding:60px 20px; }
  .hero{ padding:48px 20px 68px; }
  .converter-grid{ grid-template-columns:repeat(2,1fr); }
  .swatch-grid,.swatch-grid--dense{ grid-template-columns:repeat(2,1fr); }
  .usecase-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .converter-panel,.contrast-panel{ padding:24px; }
  .cta-card{ padding:38px 26px; gap:26px; }
  .contrast-preview{ padding:30px 16px; }
  .gen-controls,.gen-source{ padding:16px 18px; }
  .gen-actions{ margin-left:0; width:100%; }
  .gen-actions .btn{ flex:1; }
  .gen-source-note{ margin-left:0; width:100%; }
  .export-menu{ right:0; left:auto; width:min(258px, calc(100vw - 64px)); }
  .reviews-rail{ margin:0 -20px; }
  .reviews-track{ padding:12px 20px; gap:16px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .article-hero,.prose,.article-cta,.article-feat{ padding-left:20px; padding-right:20px; }
  .faq-a > div{ padding-left:20px; }
}

/* =========================================================
   Below-the-fold reference sections on the home page are static
   content, so the browser is allowed to skip laying them out until
   they are scrolled near. Interactive panels and anything the script
   measures (converter, contrast, reviews rail, FAQ panels) are
   deliberately left out.
   ========================================================= */
#shades,#named,#harmony,#usecases,#code,#blog{ content-visibility:auto; }
/* These are the measured *content box* heights of each section — the
   section's own padding is added on top of contain-intrinsic-size, so the
   placeholder ends up exactly as tall as the real thing. That keeps the
   page length honest and keeps in-page anchors landing on target. The
   auto keyword swaps in the true size once a section has rendered. */
#shades  { contain-intrinsic-size:auto 613px; }
#named   { contain-intrinsic-size:auto 827px; }
#harmony { contain-intrinsic-size:auto 528px; }
#usecases{ contain-intrinsic-size:auto 325px; }
#code    { contain-intrinsic-size:auto 350px; }
#blog    { contain-intrinsic-size:auto 1192px; }
@media (max-width:640px){
  #shades  { contain-intrinsic-size:auto 1309px; }
  #named   { contain-intrinsic-size:auto 1491px; }
  #harmony { contain-intrinsic-size:auto 946px; }
  #usecases{ contain-intrinsic-size:auto 917px; }
  #code    { contain-intrinsic-size:auto 764px; }
  #blog    { contain-intrinsic-size:auto 2994px; }
}

/* On phones the palette reads better as stacked rows than as slivers */
@media (max-width:560px){
  .gen-bar{ flex-direction:column; height:auto; }
  /* Reserve the height of the default five stacked rows until the script
     fills the bar, so the panel never jumps on first paint. */
  .gen-bar:empty{ min-height:310px; }
  .gen-swatch{
    flex:none; height:62px; flex-direction:row; align-items:center;
    justify-content:space-between; padding:0 14px; gap:8px;
  }
  .gen-swatch:hover{ flex:none; }
  .gen-swatch-tools{ flex-direction:row; opacity:1; transform:none; gap:6px; order:2; }
  .sw-btn{ width:32px; height:32px; }
  .sw-btn svg{ width:15px; height:15px; }
  .gen-swatch-hex{ order:1; padding:6px 10px; font-size:.82rem; }
  .gen-swatch-ratio{ display:none; }
  .gen-swatch.locked-glow::after{ box-shadow:inset 0 0 0 3px rgba(255,255,255,.55); }
}

@media (max-width:520px){
  :root{ --header-h:66px; }
  .brand-word{ font-size:1.06rem; }
  .hero h1{ font-size:clamp(2.1rem, 10vw, 2.7rem); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .converter-grid{ grid-template-columns:1fr; }
  .swatch-grid,.swatch-grid--dense{ grid-template-columns:1fr 1fr; }
  .contrast-meta{ flex-direction:column; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-brand-col{ grid-column:auto; }
  .cta-card{ padding:30px 20px; }
  .gen-source,.gen-controls{ gap:10px; }
  .gen-base,.gen-upload{ width:100%; justify-content:center; }
  .review-card{ width:min(300px, calc(100vw - 60px)); }
  .to-top{ right:16px; bottom:16px; width:46px; height:46px; }
}

@media (max-width:380px){
  .wrap{ padding-left:16px; padding-right:16px; }
  .section,.hero{ padding-left:16px; padding-right:16px; }
  .swatch-grid,.swatch-grid--dense{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

.guide-card-image{ display:block; height:auto; border-radius:var(--radius-sm); margin-bottom:18px; }

/* =========================================================
   Single article v2 — sticky sidebar, table of contents,
   reading progress, key takeaways, share and FAQ blocks
   ========================================================= */

/* Reading progress rail, pinned to the header's lower edge */
.read-progress{
  position:fixed; left:0; right:0; top:calc(var(--header-h) - 3px); height:3px;
  z-index:61; pointer-events:none; background:rgba(139,45,85,.12);
  opacity:0; transition:opacity .3s var(--ease);
}
.read-progress.is-on{ opacity:1; }
.read-progress i{
  display:block; height:100%; width:0; border-radius:0 3px 3px 0;
  background:var(--grad-brand); transition:width .12s linear;
}

/* Breadcrumbs */
.article-top{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.crumbs{ padding:22px 0 0; }
.crumbs ol{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.71rem; color:var(--ink-soft); letter-spacing:.01em;
}
.crumbs li{ display:flex; align-items:center; gap:9px; }
.crumbs li + li::before{ content:"/"; color:rgba(40,21,31,.28); }
.crumbs a{ color:var(--ink-soft); text-decoration:none; transition:color .18s var(--ease); }
.crumbs a:hover{ color:var(--plum); }
.crumbs [aria-current]{ color:var(--plum); font-weight:700; }

/* Hero + lede */
.article-hero{ padding:24px 0 30px; max-width:840px; margin:0; }
.article-lede{
  color:var(--ink-soft); font-size:1.12rem; line-height:1.62; margin:16px 0 0; max-width:64ch;
}
.article-feat{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.article-feat img{
  width:100%; aspect-ratio:16/9; max-height:440px; object-fit:cover;
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
}

/* Two-column shell */
.article-shell{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:54px; align-items:start;
}
.article-shell .prose{ max-width:none; margin:0; padding:34px 0 0; }
.article-shell .prose > *:first-child{ margin-top:0; }

/* Sticky sidebar */
.article-aside{ position:relative; }
.aside-sticky{
  position:sticky; top:calc(var(--header-h) + 22px);
  display:flex; flex-direction:column; gap:16px; padding-top:38px;
}
.aside-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:19px 20px 21px; box-shadow:0 14px 32px -26px rgba(40,21,31,.55);
}
.aside-title{
  font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--plum); font-weight:700; margin:0 0 13px; display:flex; align-items:center; gap:8px;
}
.aside-title svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* Table of contents + scroll spy */
.toc-list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  max-height:min(54vh, 470px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(139,45,85,.28) transparent;
}
.toc-list::-webkit-scrollbar{ width:5px; }
.toc-list::-webkit-scrollbar-thumb{ background:rgba(139,45,85,.24); border-radius:3px; }
.toc-list a{
  display:block; position:relative; padding:8px 10px 8px 17px; border-radius:9px;
  font-size:.845rem; line-height:1.4; color:var(--ink-soft); text-decoration:none;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.toc-list a::before{
  content:""; position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:3px; height:0; border-radius:2px; background:var(--grad-brand);
  transition:height .28s var(--ease-out);
}
.toc-list a:hover{ color:var(--plum); background:var(--bg-alt); }
.toc-list a.is-active{ color:var(--plum); font-weight:600; background:var(--bg-alt); }
.toc-list a.is-active::before{ height:58%; }

/* Tool card */
.aside-tool{ background:var(--grad-ink); border-color:transparent; }
.aside-tool .aside-title{ color:var(--blush); }
.aside-strip{ display:flex; height:8px; border-radius:5px; overflow:hidden; margin:0 0 14px; }
.aside-strip i{ flex:1; }
.aside-links{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:10px; }
.aside-links a{
  display:flex; align-items:center; gap:10px; font-size:.85rem; font-weight:500;
  color:rgba(255,249,251,.78); text-decoration:none; transition:color .18s var(--ease), transform .18s var(--ease);
}
.aside-links a::before{
  content:""; width:10px; height:10px; border-radius:3px; background:var(--chip,var(--blush)); flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.aside-links a:hover{ color:var(--cream); transform:translateX(3px); }
.aside-tool .btn{ width:100%; background:var(--blush); color:var(--wine); box-shadow:none; }
.aside-tool .btn:hover{ background:#fff; transform:translateY(-2px); }

/* Keep reading */
.aside-posts{ display:flex; flex-direction:column; }
.aside-post{
  display:flex; gap:12px; align-items:center; text-decoration:none;
  padding:11px 0; border-top:1px solid var(--line-soft);
}
.aside-post:first-child{ border-top:none; padding-top:0; }
.aside-post:last-child{ padding-bottom:0; }
.aside-post img{ width:66px; height:46px; object-fit:cover; border-radius:8px; flex-shrink:0; background:var(--bg-alt); }
.aside-post span{ font-size:.835rem; line-height:1.34; color:var(--ink); font-weight:600; transition:color .18s var(--ease); }
.aside-post:hover span{ color:var(--plum); }

/* Share */
.aside-share{ display:flex; gap:9px; flex-wrap:wrap; }
.share-btn{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--card);
  display:grid; place-items:center; cursor:pointer; color:var(--ink-soft); text-decoration:none;
  transition:color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease-out);
}
.share-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.share-btn:hover{ color:var(--plum); border-color:var(--plum); transform:translateY(-2px); }

/* Key takeaways */
.takeaways{
  background:var(--bg-alt); border:1px solid var(--line); border-left:4px solid var(--plum);
  border-radius:var(--radius-sm); padding:20px 24px 22px; margin:0 0 30px;
}
.takeaways .tk-title{
  font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--plum); font-weight:700; margin:0 0 12px;
}
.takeaways ul{ margin:0; padding-left:20px; }
.takeaways li{ color:var(--ink-soft); font-size:.95rem; margin-bottom:8px; }
.takeaways li:last-child{ margin-bottom:0; }

/* In-article FAQ */
.article-faq{ margin-top:46px; padding-top:6px; border-top:1px solid var(--line); }
.article-faq h3{ margin:26px 0 8px; }
.article-faq h3:first-of-type{ margin-top:14px; }

/* Alignment of the closing blocks with the new shell */
.article-cta{ max-width:var(--maxw); margin:56px auto 0; padding:0 28px; }
.related{ max-width:var(--maxw); margin:70px auto 0; padding:0 28px; }
.related h2{ text-align:left; }

@media (max-width:1180px){
  .article-shell{ grid-template-columns:minmax(0,1fr) 290px; gap:40px; }
}

@media (max-width:1080px){
  .article-shell{ grid-template-columns:1fr; gap:0; }
  .article-shell .prose{ max-width:760px; margin:0 auto; }
  .article-aside{ max-width:760px; margin:46px auto 0; }
  .aside-sticky{
    position:static; padding-top:0;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start;
  }
  .toc-card{ grid-column:1 / -1; }
  .toc-list{ display:block; max-height:none; columns:2; column-gap:26px; }
  .aside-share-card{ grid-column:1 / -1; }
  .article-feat img{ max-height:360px; }
}

@media (max-width:760px){
  .article-top,.article-feat,.article-shell,.article-cta,.related{ padding-left:20px; padding-right:20px; }
  .article-hero{ padding:18px 0 24px; }
  .article-lede{ font-size:1.02rem; }
  .aside-sticky{ grid-template-columns:1fr; }
  .toc-list{ columns:1; }
  .article-feat img{ max-height:260px; aspect-ratio:4/3; }
  .related h2{ text-align:center; }
  .blog-grid{ grid-template-columns:1fr; }
  .article-cta-card{ padding:26px; }
}