/* =========================================================================
   ExactHue — Design System
   Theme: "Calibrated Spectrum"
   Base: warm porcelain + deep ink. Accents follow visible-light order
   (amber -> coral -> rose -> magenta -> violet -> indigo).
   All layout/content is CSS-only. No JavaScript is required to read or
   navigate any page of this site.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Neutrals — warm-biased so skin-tone imagery reads true */
  --porcelain:#FBF8F6;
  --porcelain-2:#F4EEEA;
  --porcelain-3:#EAE1DB;
  --ink:#14101C;
  --ink-2:#221B31;
  --ink-3:#3A3049;
  --muted:#6B6178;
  --muted-2:#8B8296;
  --line:rgba(20,16,28,.10);
  --line-strong:rgba(20,16,28,.18);
  --line-dark:rgba(255,255,255,.12);

  /* Spectrum accents */
  --amber:#F2994A;
  --coral:#EE6C55;
  --rose:#D8446E;
  --magenta:#B72F86;
  --violet:#6C4BE3;
  --indigo:#3B31A8;
  --teal:#2BB3A3;

  --accent:var(--rose);
  --accent-ink:#A82A54;

  /* Deepened spectrum, for surfaces that carry white text. The bright accents
     above are display colours; these are the ones that clear 4.5:1 against
     white and so are the only ones allowed behind white type. */
  --coral-deep:#C9452F;
  --rose-deep:#C22F5C;
  --magenta-deep:#A62778;
  --teal-deep:#17796B;
  --amber-deep:#A8681C;

  /* Surfaces */
  --card:#FFFFFF;
  --card-ink:rgba(255,255,255,.045);

  /* Type */
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-sans:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Metrics */
  --wrap:1180px;
  --wrap-narrow:760px;
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --r-xl:32px;
  --shadow-sm:0 1px 2px rgba(20,16,28,.05), 0 2px 6px rgba(20,16,28,.04);
  --shadow:0 4px 12px rgba(20,16,28,.06), 0 18px 40px -18px rgba(20,16,28,.18);
  --shadow-lg:0 8px 24px rgba(20,16,28,.08), 0 40px 80px -30px rgba(20,16,28,.30);
  --ease:cubic-bezier(.22,.61,.36,1);

  --header-h:72px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--porcelain);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;color:var(--ink);font-weight:600;letter-spacing:-.02em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}
li{margin:.4em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:rgba(216,68,110,.20)}
:focus-visible{outline:2.5px solid var(--violet);outline-offset:3px;border-radius:4px}

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding:96px 0}
.section-sm{padding:64px 0}
.section-tight{padding:56px 0}
.grid{display:grid;gap:28px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* ---------- 4. Typography helpers --------------------------------------- */
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.05}
h1.display{font-size:clamp(2.6rem,6.2vw,4.6rem)}
h2.display{font-size:clamp(2rem,4vw,3.1rem);margin-bottom:.45em}
h3{font-size:1.2rem}
.lede{font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.6;color:var(--ink-3)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);
  margin-bottom:1.1rem;
}
.eyebrow::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--rose),var(--violet));
}
.muted{color:var(--muted)}
.gradient-text{
  background:linear-gradient(100deg,var(--coral-deep) 0%,var(--rose) 34%,var(--magenta) 62%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.mono{font-family:var(--font-mono);font-size:.9em}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-sans);font-size:.95rem;font-weight:550;
  padding:.78em 1.5em;border-radius:100px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;
}
.btn:hover{text-decoration:none}
.btn-primary{
  color:#fff;
  background:linear-gradient(115deg,var(--coral-deep) 0%,var(--rose-deep) 45%,var(--magenta-deep) 100%);
  box-shadow:0 2px 10px rgba(183,47,134,.28),0 10px 30px -10px rgba(183,47,134,.5);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(183,47,134,.34),0 18px 40px -14px rgba(183,47,134,.55)}
.btn-ghost{color:var(--ink);background:transparent;border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(20,16,28,.045);border-color:var(--ink-3);transform:translateY(-1px)}
.btn-light{color:var(--ink);background:#fff;box-shadow:var(--shadow-sm)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-onink{color:#fff;background:rgba(255,255,255,.10);border-color:var(--line-dark)}
.btn-onink:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.btn-lg{font-size:1.02rem;padding:.95em 1.9em}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 6. Header / Nav (CSS-only mobile menu) ----------------------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(251,248,246,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:28px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:1.12rem;color:var(--ink);letter-spacing:-.02em;flex-shrink:0}
.brand:hover{text-decoration:none}
.brand-mark{width:30px;height:30px;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{
  color:var(--ink-3);font-size:.93rem;font-weight:500;
  padding:.5em .82em;border-radius:100px;transition:background .18s,color .18s;
}
.nav-links a:hover{background:rgba(20,16,28,.05);color:var(--ink);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--magenta);background:rgba(183,47,134,.08)}
.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-toggle,.nav-toggle-label{display:none}

/* ---------- 7. Cards ----------------------------------------------------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.card h3{margin-bottom:.45em;font-size:1.15rem}
.card p:last-child{margin-bottom:0}
.card-num{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;
  color:var(--magenta);display:block;margin-bottom:1rem;
}
.icon-badge{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:18px;color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--magenta));
  box-shadow:0 6px 18px -6px rgba(183,47,134,.55);
}
.icon-badge svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ib-amber{background:linear-gradient(135deg,#F7B267,var(--amber));box-shadow:0 6px 18px -6px rgba(242,153,74,.6)}
.ib-violet{background:linear-gradient(135deg,#8B6BF0,var(--violet));box-shadow:0 6px 18px -6px rgba(108,75,227,.55)}
.ib-teal{background:linear-gradient(135deg,#5BD0C2,var(--teal));box-shadow:0 6px 18px -6px rgba(43,179,163,.55)}
.ib-indigo{background:linear-gradient(135deg,#5A4FD0,var(--indigo));box-shadow:0 6px 18px -6px rgba(59,49,168,.5)}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{position:relative;padding:88px 0 96px;overflow:hidden;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1{margin-bottom:.35em}
.hero .lede{max-width:38ch;margin-bottom:2rem}

/* Ambient spectrum field — decorative, pure CSS */
.aurora{position:absolute;inset:-30% -10% auto -10%;height:150%;z-index:-2;pointer-events:none;filter:blur(72px);opacity:.55}
.aurora span{position:absolute;border-radius:50%;display:block;mix-blend-mode:multiply}
.aurora .a1{width:46vw;height:46vw;left:-6vw;top:2vw;background:radial-gradient(circle at 40% 40%,rgba(242,153,74,.55),transparent 66%);animation:drift1 26s ease-in-out infinite}
.aurora .a2{width:40vw;height:40vw;left:26vw;top:-6vw;background:radial-gradient(circle at 50% 50%,rgba(216,68,110,.50),transparent 66%);animation:drift2 32s ease-in-out infinite}
.aurora .a3{width:44vw;height:44vw;right:-4vw;top:6vw;background:radial-gradient(circle at 55% 45%,rgba(108,75,227,.42),transparent 66%);animation:drift3 29s ease-in-out infinite}
.aurora .a4{width:30vw;height:30vw;right:18vw;top:32vw;background:radial-gradient(circle at 50% 50%,rgba(43,179,163,.34),transparent 66%);animation:drift1 35s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,-3vw,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-5vw,4vw,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(-3vw,-5vw,0) scale(1.1)}}

/* Fine grain — stops large gradients from banding */
.grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.20;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Shared by the animated feature icons. */
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 9. Marquee (CSS only, pauses on hover) ----------------------- */
.marquee{overflow:hidden;position:relative;padding:22px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-item{
  font-family:var(--font-display);font-size:1.1rem;font-weight:600;
  color:var(--muted);letter-spacing:-.01em;white-space:nowrap;opacity:.9;
}

/* ---------- 10. Dark band ------------------------------------------------ */
.band-ink{background:var(--ink);color:rgba(255,255,255,.78);position:relative;overflow:hidden;isolation:isolate}
.band-ink h2,.band-ink h3,.band-ink h4{color:#fff}
.band-ink .lede{color:rgba(255,255,255,.72)}
.band-ink .muted{color:rgba(255,255,255,.55)}
/* Inline links on a dark band go white — but buttons carry their own colour,
   so they must be exempted or a light button renders white-on-white. */
.band-ink a:not(.btn):not(.brand){color:#fff}
.band-ink .btn-light{color:var(--ink)}
.band-ink .btn-ghost{color:#fff;border-color:var(--line-dark)}
.band-ink .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.band-ink .eyebrow{color:#F2B8CE}
.band-ink .card{background:var(--card-ink);border-color:var(--line-dark);box-shadow:none}
.band-ink .card h3{color:#fff}
.band-ink .card p{color:rgba(255,255,255,.68)}
.band-glow{
  position:absolute;inset:auto -20% -60% -20%;height:80%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 30% 0%,rgba(216,68,110,.32),transparent 60%),
             radial-gradient(ellipse at 72% 20%,rgba(108,75,227,.30),transparent 62%);
  filter:blur(50px);
}
.band-tint{background:var(--porcelain-2)}

/* ---------- 11. Stats ---------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--porcelain);padding:30px 26px}
.band-ink .stats{background:var(--line-dark);border-color:var(--line-dark)}
.band-ink .stat{background:var(--ink)}
.stat b{display:block;font-family:var(--font-display);font-size:2.4rem;font-weight:600;
  letter-spacing:-.03em;line-height:1;margin-bottom:.35em;
  background:linear-gradient(120deg,var(--amber),var(--rose) 50%,#8B6BF0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stat span{font-size:.88rem;color:var(--muted);line-height:1.45;display:block}
.band-ink .stat span{color:rgba(255,255,255,.6)}

/* ---------- 12. Fitzpatrick tone strip ---------------------------------- */
.tone-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:34px 0}
.tone{border-radius:var(--r);padding:14px 12px 16px;aspect-ratio:3/4;display:flex;
  flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease);color:#fff}
.tone:hover{transform:translateY(-6px) scale(1.02)}
/* Caption scrim. The swatches are representative skin tones and must keep their
   true colour, so legibility comes from a scrim rather than from shifting the
   swatch — this holds white label text above 4.5:1 on every tone, I through VI. */
.tone::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;
  background:linear-gradient(to top,rgba(14,9,5,.74),rgba(14,9,5,.52) 42%,transparent);
}
.tone b,.tone small{position:relative;z-index:1}
.tone b{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;display:block}
.tone small{font-size:.7rem;opacity:.95;line-height:1.3;display:block;margin-top:3px}
.t1{background:linear-gradient(160deg,#FCE8DA,#F3D3BC)}
.t2{background:linear-gradient(160deg,#F2D0B0,#E4B48C)}
.t3{background:linear-gradient(160deg,#DCA97C,#C98F5E)}
.t4{background:linear-gradient(160deg,#B87A4E,#9C6039)}
.t5{background:linear-gradient(160deg,#7E4A2A,#61341C)}
.t6{background:linear-gradient(160deg,#4A2A18,#2E1810)}

/* ---------- 13. Steps / process ----------------------------------------- */
.steps{counter-reset:step}
.step{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:30px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.band-ink .step{border-color:var(--line-dark)}
.step-idx{
  counter-increment:step;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-mono);font-size:.82rem;
  border:1px solid var(--line-strong);color:var(--magenta);flex-shrink:0;
}
.band-ink .step-idx{border-color:var(--line-dark);color:#F2B8CE}
/* Components reused inside a dark band need their light-surface colours
   overridden, or they render dark-on-dark. */
.band-ink .card-num{color:#F2B8CE}
.band-ink .mk-metric > span{color:rgba(255,255,255,.78)}
.band-ink .mk-metric b{color:#fff}
.band-ink .mk-track{background:rgba(255,255,255,.16)}
.band-ink .mk-flag > span{color:rgba(255,255,255,.78)}
.band-ink .mk-chip{background:rgba(255,255,255,.08);border-color:var(--line-dark);color:rgba(255,255,255,.82)}
.step-idx::before{content:"0" counter(step)}
.step h3{margin-bottom:.3em}
.step p:last-child{margin-bottom:0}

/* ---------- 14. Forms / auth -------------------------------------------- */
.auth{min-height:calc(100vh - var(--header-h));display:grid;grid-template-columns:1.05fr .95fr}
.auth-panel{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink);color:rgba(255,255,255,.75);
  padding:64px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.auth-panel h2,.auth-panel h3{color:#fff}
.auth-panel .lede,.auth-panel p{color:rgba(255,255,255,.74)}
.auth-panel a:not(.btn){color:#fff}
.auth-panel .muted{color:rgba(255,255,255,.62)}
.auth-panel::before{
  content:"";position:absolute;inset:-40% -30% auto -30%;height:130%;z-index:-1;filter:blur(70px);opacity:.75;
  background:radial-gradient(circle at 26% 24%,rgba(242,153,74,.42),transparent 55%),
             radial-gradient(circle at 74% 40%,rgba(216,68,110,.48),transparent 58%),
             radial-gradient(circle at 46% 82%,rgba(108,75,227,.46),transparent 60%);
  animation:drift2 30s ease-in-out infinite;
}
.auth-form-side{display:flex;align-items:center;justify-content:center;padding:56px 32px;background:var(--porcelain)}
.auth-card{width:100%;max-width:432px}
.auth-card h1{font-size:2rem;margin-bottom:.25em}

.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:550;color:var(--ink);margin-bottom:6px}
.field .hint{font-size:.78rem;color:var(--muted);margin:6px 0 0}
.input{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  padding:.78em .95em;border-radius:var(--r);
  border:1px solid var(--line-strong);background:#fff;
  transition:border-color .18s,box-shadow .18s;
}
textarea.input{min-height:150px;resize:vertical;line-height:1.6}
select.input{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6178' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.input::placeholder{color:var(--muted-2)}
.input:hover{border-color:var(--muted-2)}
.input:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 4px rgba(183,47,134,.13)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--ink-3);margin-bottom:14px;line-height:1.5}
.check input{margin-top:.25em;width:16px;height:16px;accent-color:var(--magenta);flex-shrink:0}
.form-divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--muted);font-size:.8rem}
.form-divider::before,.form-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.sso{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sso .btn{font-size:.88rem;padding:.7em 1em}
.form-foot{font-size:.88rem;color:var(--muted);text-align:center;margin-top:22px}
.pw-rules{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.76rem;color:var(--muted)}
.pw-rules li{margin:0;display:flex;align-items:center;gap:5px}
.pw-rules li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted-2)}

.badge-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.badge-list li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;margin:0}
.badge-list svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;stroke:#F2B8CE;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 15. Prose / legal ------------------------------------------- */
.prose{max-width:var(--wrap-narrow)}
.prose h2{font-size:1.5rem;margin-top:2.4em;scroll-margin-top:100px}
.prose h2:first-of-type{margin-top:1.2em}
.prose h3{font-size:1.1rem;margin-top:1.8em}
.prose li{margin:.5em 0}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.92rem}
.prose th,.prose td{text-align:left;padding:12px 14px;border:1px solid var(--line);vertical-align:top}
.prose th{background:var(--porcelain-2);font-weight:600;color:var(--ink)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.86rem;color:var(--muted);
  padding:16px 20px;background:var(--porcelain-2);border-radius:var(--r);
  border:1px solid var(--line);margin-bottom:2rem;
}
.toc{background:var(--porcelain-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px;margin-bottom:2.5rem}
.toc h2{font-size:.78rem !important;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9em !important}
.toc ol{margin:0;padding-left:1.25em;columns:2;column-gap:32px;font-size:.92rem}
.toc li{margin:.3em 0;break-inside:avoid}
.callout{
  border-left:3px solid var(--magenta);background:rgba(183,47,134,.045);
  padding:18px 22px;border-radius:0 var(--r) var(--r) 0;margin:1.6em 0;font-size:.95rem;
}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}

/* ---------- 16. FAQ (native <details> — works without JS) --------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-weight:550;color:var(--ink);font-size:1.03rem;transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--magenta)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details[open] summary{color:var(--magenta)}
.faq .faq-body{padding:0 44px 24px 0;color:var(--ink-3)}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- 17. Pricing -------------------------------------------------- */
.plan{display:flex;flex-direction:column;position:relative}
.plan-featured{
  box-shadow:var(--shadow-lg);
  background:linear-gradient(var(--card),var(--card)) padding-box,
             linear-gradient(140deg,var(--amber),var(--rose),var(--violet)) border-box;
  border:1.5px solid transparent}
.plan-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:linear-gradient(115deg,var(--rose-deep),var(--magenta-deep));
  padding:.45em 1.1em;border-radius:100px;white-space:nowrap;
  box-shadow:0 4px 14px -4px rgba(183,47,134,.6)}
.plan .price{font-family:var(--font-display);font-size:2.3rem;font-weight:600;color:var(--ink);
  letter-spacing:-.03em;line-height:1;margin:.35em 0 .1em}
.plan .price small{font-family:var(--font-sans);font-size:.86rem;color:var(--muted);font-weight:400;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:22px 0;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink-3);margin:.65em 0}
.plan li svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;stroke:var(--teal);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 18. Contact -------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr .82fr;gap:52px;align-items:start}
.info-block{padding:22px 0;border-top:1px solid var(--line)}
.info-block:first-child{border-top:0;padding-top:0}
.info-block h3{font-size:.76rem;font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.7em}
.info-block address{font-style:normal;line-height:1.7}
.map-card{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(150deg,#EFE7F5,#F7E7EC 50%,#FDF1E4);
  padding:30px;position:relative;
}

/* ---------- 19. Footer --------------------------------------------------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.62);padding:72px 0 0;font-size:.92rem}
.site-footer h4{font-size:.75rem;font-family:var(--font-mono);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:1.2em;color:rgba(255,255,255,.5)}
.site-footer a{color:rgba(255,255,255,.62);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:.6em 0}
.footer-brand .brand{color:#fff;margin-bottom:16px}
.footer-brand p{max-width:34ch;font-size:.9rem;line-height:1.7}
.footer-spectrum{height:3px;border-radius:3px;margin:18px 0;max-width:180px;
  background:linear-gradient(90deg,#F2994A,#EE6C55,#D8446E,#B72F86,#6C4BE3,#2BB3A3)}
.footer-legal{
  border-top:1px solid var(--line-dark);padding:26px 0 34px;
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  font-size:.84rem;color:rgba(255,255,255,.52);
}
.footer-legal nav{display:flex;flex-wrap:wrap;gap:20px}
.reg-note{font-size:.8rem;color:rgba(255,255,255,.58);line-height:1.6;max-width:74ch;margin:0}

/* ---------- 20. Cookie notice (CSS-only dismiss; JS adds persistence) ---- */
.cookie-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cookie-bar{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:120;
  max-width:520px;background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:22px 24px;font-size:.88rem;line-height:1.6;color:var(--ink-3);
  animation:cookie-in .6s var(--ease) .9s both;
}
@keyframes cookie-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.cookie-bar h3{font-size:.98rem;margin-bottom:.4em;display:flex;align-items:center;gap:8px}
.cookie-bar h3 svg{width:18px;height:18px;stroke:var(--magenta);fill:none;stroke-width:1.8}
.cookie-bar p{margin-bottom:14px}
.cookie-actions{display:flex;flex-wrap:wrap;gap:9px}
.cookie-actions .btn{font-size:.85rem;padding:.6em 1.15em}
.cookie-toggle:checked ~ .cookie-bar{display:none}
html.cookies-ack .cookie-bar{display:none}

/* ---------- 21. Misc ----------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;gap:.5em;font-size:.78rem;font-weight:500;
  padding:.4em 1em;border-radius:100px;background:rgba(183,47,134,.08);
  color:var(--magenta);border:1px solid rgba(183,47,134,.18);
}
.band-ink .pill{background:rgba(255,255,255,.09);color:#F2B8CE;border-color:var(--line-dark)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 3px rgba(43,179,163,.22);animation:pulse 2.4s ease-in-out infinite;flex-shrink:0}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(43,179,163,.22)}50%{box-shadow:0 0 0 6px rgba(43,179,163,.05)}}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--ink);color:#fff;
  border-radius:0 0 var(--r) 0;font-size:.9rem;
}
.skip-link:focus{left:0;text-decoration:none}
.page-head{padding:74px 0 46px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.page-head h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:.3em}
.page-head .lede{max-width:62ch}
.page-head::after{
  content:"";position:absolute;right:-10%;top:-120%;width:60%;height:300%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(216,68,110,.16),transparent 62%);filter:blur(50px);
}
.quote{font-family:var(--font-display);font-size:1.3rem;line-height:1.5;letter-spacing:-.015em;color:var(--ink)}
.band-ink .quote{color:#fff}
.byline{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:.88rem}
.avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.8rem;color:#fff;
  background:linear-gradient(135deg,var(--rose-deep),var(--violet))}

/* ---------- 22. Motion & responsive ------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero .lede{max-width:56ch}
  .instrument{max-width:340px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:34px}
  .footer-brand{grid-column:1/-1}
  .auth{grid-template-columns:1fr}
  .auth-panel{padding:48px 32px;order:2}
  .g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  :root{--header-h:64px}
  .nav-toggle-label{
    display:grid;place-items:center;margin-left:auto;width:42px;height:42px;
    border:1px solid var(--line-strong);border-radius:12px;cursor:pointer;background:#fff;
  }
  .nav-toggle-label span{display:block;width:17px;height:1.8px;background:var(--ink);border-radius:2px;position:relative}
  .nav-toggle-label span::before,.nav-toggle-label span::after{
    content:"";position:absolute;left:0;width:17px;height:1.8px;background:var(--ink);border-radius:2px}
  .nav-toggle-label span::before{top:-5.5px}
  .nav-toggle-label span::after{top:5.5px}
  .nav{position:relative;flex-wrap:wrap}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:var(--header-h);
    background:rgba(251,248,246,.98);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:14px 24px 18px;gap:2px;margin-left:0;
  }
  .nav-cta{display:none}
  .nav-toggle:checked ~ .nav-links{display:flex}
  .nav-toggle:checked ~ .nav-links .nav-mobile-cta{display:flex;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
  .nav-mobile-cta .btn{flex:1}
  .nav-links a{padding:.7em .8em;font-size:1rem}
  .section{padding:68px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .tone-strip{grid-template-columns:repeat(3,1fr)}
  .toc ol{columns:1}
  .field-row{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:14px}
  .cookie-bar{left:12px;right:12px;bottom:12px;padding:20px}
}

/* Mobile CTA row lives inside the nav list; hidden on desktop */
.nav-mobile-cta{display:none}

@media (max-width:560px){
  body{font-size:16px}
  .stats{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-legal{flex-direction:column;align-items:flex-start}
  .section{padding:56px 0}
  .card{padding:24px}
  .sso{grid-template-columns:1fr}
  .auth-panel{padding:40px 24px}
}

@media print{
  .site-header,.site-footer,.cookie-bar,.aurora,.grain,.instrument{display:none !important}
  body{background:#fff;font-size:11pt;color:#000}
  .section{padding:20px 0}
  a{color:#000}
}

/* =========================================================================
   23. UI / UX layer
   Interaction, motion and demonstration components built on top of the base
   design system. Everything here is CSS-only: no page depends on JavaScript
   to render, read, navigate or submit.
   ========================================================================= */

/* ---------- 23a. Utilities ---------------------------------------------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Typographic refinement: headings break on sense rather than on width,
   paragraphs avoid orphans. Both degrade silently where unsupported. */
h1,h2,h3,h4,.quote,.lede{text-wrap:balance}
p,li,.faq-body,.card p{text-wrap:pretty}

/* ---------- 23b. Scroll-driven reveals ---------------------------------- */
/* Guarded three ways: the @supports gate, the reduced-motion gate, and a
   fill-mode that resolves to the visible state. Content is never hidden on a
   browser that cannot animate it, and never hidden in print. */
@keyframes reveal-in{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@keyframes reveal-plain{
  from{opacity:0}
  to{opacity:1}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .section .card,
    .steps .step,
    .stats .stat,
    .tone-strip .tone,
    .plan,
    .faq details{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 46%;
    }
    /* Section intros lead their content in, without the vertical shift that
       would fight the sticky header on short sections. */
    .section > .wrap > div:first-child > .eyebrow,
    .section > .wrap > div:first-child > h2{
      animation:reveal-plain linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 34%;
    }
  }
}

/* ---------- 23c. Reading progress (long-form pages only) ---------------- */
.reading-progress{
  display:none;position:fixed;left:0;right:0;top:0;height:2px;z-index:90;
  transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,var(--amber),var(--coral),var(--rose),var(--magenta),var(--violet),var(--teal));
}
@supports (animation-timeline: scroll()){
  body:has(.prose) .reading-progress{
    display:block;
    animation:progress-grow linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes progress-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 23d. Back to top (appears once you have scrolled) ----------- */
.to-top{
  display:none;position:fixed;right:22px;bottom:22px;z-index:85;
  width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;
  align-items:center;justify-content:center;
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.14);
  transition:transform .25s var(--ease),background .2s;
}
.to-top:hover{transform:translateY(-3px);background:var(--ink-2);text-decoration:none}
.to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@supports (animation-timeline: scroll()){
  body:has(.prose) .to-top{
    display:flex;
    animation:to-top-in linear both;
    animation-timeline:scroll(root block);
    animation-range:0 240px;
  }
}
@keyframes to-top-in{
  from{opacity:0;visibility:hidden;transform:scale(.7)}
  to{opacity:1;visibility:visible;transform:none}
}
/* Keep it clear of the cookie notice while that is still on screen */
body:not(.cookies-done) .to-top{bottom:22px}
@media (max-width:560px){.to-top{right:14px;bottom:14px;width:42px;height:42px}}

/* ---------- 23e. Form feedback ------------------------------------------ */
/* :user-invalid fires only after the field has been interacted with, so a
   blank form never greets you in red. Native validation, zero JavaScript. */
.input:user-invalid{
  border-color:var(--coral-deep);
  box-shadow:0 0 0 4px rgba(201,69,47,.12);
}
.input:user-invalid:focus{box-shadow:0 0 0 4px rgba(201,69,47,.18)}
.input:user-valid{border-color:rgba(43,179,163,.6)}
.input:user-valid:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(43,179,163,.16)}

.field-error{
  display:none;align-items:flex-start;gap:7px;
  font-size:.79rem;line-height:1.45;color:var(--coral-deep);
  margin:7px 0 0;
}
.field-error::before{
  content:"";flex-shrink:0;width:14px;height:14px;margin-top:2px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5'/%3E%3Cpath d='M12 16.2v.2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5'/%3E%3Cpath d='M12 16.2v.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.input:user-invalid ~ .field-error{display:flex}
.input:user-invalid ~ .hint{display:none}

/* Required marker, driven by the attribute so it cannot fall out of sync */
.field label:has(+ .input[required])::after,
.field label:has(+ .input-wrap > .input[required])::after{
  content:"*";color:var(--rose-deep);margin-left:.25em;font-weight:600;
}

/* ---------- 23f. Micro-interactions ------------------------------------- */
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary:active{box-shadow:0 1px 6px rgba(166,39,120,.35)}

/* Nav links grow a spectrum underline rather than only a background wash */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:.82em;right:.82em;bottom:.26em;height:1.5px;
  border-radius:2px;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber),var(--rose),var(--violet));
  transition:transform .28s var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:820px){.nav-links a::after{display:none}}

/* Cards pick up a hairline spectrum edge on hover — depth without noise */
.card-hover{position:relative;overflow:hidden}
.card-hover::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--amber),var(--rose),var(--magenta),var(--violet));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .38s var(--ease);
}
.card-hover:hover::before{transform:scaleX(1)}

/* Tone swatches lift their caption on hover */
.tone b,.tone small{transition:transform .3s var(--ease)}
.tone:hover b,.tone:hover small{transform:translateY(-2px)}

/* FAQ rows tint as they open, so the active row is obvious at a glance */
.faq details[open]{background:linear-gradient(90deg,rgba(183,47,134,.035),transparent 62%)}
.faq summary::after{transition:transform .3s var(--ease),border-color .2s}
.faq summary:hover::after{border-color:var(--magenta)}

/* ---------- 23g. Hero match-result card --------------------------------- */
.match-card{
  position:absolute;left:-6%;bottom:2%;z-index:3;margin:0;
  width:min(272px,72%);padding:16px 18px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-lg);
  box-shadow:0 10px 30px -12px rgba(20,16,28,.30),0 30px 70px -40px rgba(20,16,28,.5);
  animation:card-float 7s ease-in-out infinite;
}
@keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.match-card figcaption{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:11px;
  display:flex;align-items:center;gap:6px;
}
.match-swatches{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.match-swatches span{
  width:44px;height:44px;border-radius:11px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(20,16,28,.09);
}
.mc-skin{background:linear-gradient(145deg,#CE9779,#B87F60)}
.mc-shade{background:linear-gradient(145deg,#CC9576,#B67D5E)}
.mc-arrow{
  width:auto!important;height:auto!important;box-shadow:none!important;
  color:var(--muted);font-size:.9rem;
}
.match-meta{font-size:.78rem;line-height:1.5;color:var(--muted)}
.match-meta b{display:block;font-size:.92rem;color:var(--ink);letter-spacing:-.01em}
.match-meta .ok{color:var(--teal-deep);font-weight:600}
@media (max-width:980px){
  .match-card{left:auto;right:-2%;bottom:-4%;width:min(250px,64%)}
}
@media (max-width:560px){
  .match-card{position:static;width:100%;margin:22px auto 0;animation:none}
}

/* ---------- 23h. Illuminant demonstration ------------------------------- */
/* A radio group styled as tabs. Arrow keys move between illuminants, labels
   are clickable, and the whole thing works with scripting disabled. */
.lightdemo{border:0;padding:0;margin:0;min-width:0}
.lightdemo input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.lightdemo-tabs{
  display:flex;flex-wrap:wrap;gap:6px;padding:6px;
  background:var(--porcelain-2);border:1px solid var(--line);
  border-radius:100px;margin-bottom:26px;width:fit-content;max-width:100%;
}
.lightdemo-tabs label{
  cursor:pointer;border-radius:100px;padding:.6em 1.15em;
  font-size:.85rem;font-weight:500;color:var(--ink-3);white-space:nowrap;
  /* No transition on background-color here. Chrome renders a var-derived
     background one state change behind when it is transitioned, so the tab
     would highlight the previously selected illuminant. Colour and shadow
     still animate; the fill switches instantly, which is what a side-by-side
     comparison wants anyway. */
  transition:color .22s,box-shadow .22s;
}
.lightdemo-tabs label:hover{background-color:rgba(20,16,28,.05);color:var(--ink)}
#ill-d65:checked ~ .lightdemo-tabs label[for="ill-d65"],
#ill-a:checked   ~ .lightdemo-tabs label[for="ill-a"],
#ill-f11:checked ~ .lightdemo-tabs label[for="ill-f11"]{
  background-color:var(--ink);color:#fff;box-shadow:var(--shadow-sm);
}
#ill-d65:focus ~ .lightdemo-tabs label[for="ill-d65"],
#ill-a:focus   ~ .lightdemo-tabs label[for="ill-a"],
#ill-f11:focus ~ .lightdemo-tabs label[for="ill-f11"]{
  outline:2.5px solid var(--violet);outline-offset:2px;
}

/* Per-illuminant values. Each set describes how the same face and the same
   product read once that light source is modelled. */
.lightdemo-stage{
  --skin:#C68F6E; --exact:#C4906F; --naive:#CE9877;
  --de-exact:"0.68"; --de-naive:"1.42";
  --naive-verdict:"Borderline — a trained eye starts to notice";
  --light-note:"Neutral noon daylight. The easy case: almost anything looks close here.";
  --naive-tone:var(--amber-deep);
}
#ill-a:checked ~ .lightdemo-stage{
  --skin:#D9A171; --exact:#D69F70; --naive:#EFC194;
  --de-exact:"0.74"; --de-naive:"4.21";
  --naive-verdict:"Clearly wrong — reads two shades too light";
  --light-note:"2856 K tungsten. The camera sees warmth and a pixel matcher chases it, picking a shade that is far too light and orange.";
  --naive-tone:var(--coral-deep);
}
#ill-f11:checked ~ .lightdemo-stage{
  --skin:#C2946B; --exact:#C09268; --naive:#AC9573;
  --de-exact:"0.81"; --de-naive:"3.58";
  --naive-verdict:"Clearly wrong — pulls olive and goes flat";
  --light-note:"Retail fluorescent with a green spike. A pixel matcher drags the recommendation olive, which is why shades chosen in store often disappoint at home.";
  --naive-tone:var(--coral-deep);
}

.lightdemo-note{
  font-size:.92rem;color:var(--ink-3);margin:0 0 24px;min-height:3em;
}
.lightdemo-note::before{content:var(--light-note)}

.lightdemo-rows{display:grid;gap:14px}
.ld-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:18px 20px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .3s,box-shadow .3s;
}
.ld-row.is-ours{border-color:rgba(43,179,163,.4);box-shadow:0 0 0 3px rgba(43,179,163,.07)}
.ld-pair{display:flex;align-items:center;gap:8px}
.ld-sw{
  width:52px;height:52px;border-radius:13px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(20,16,28,.10);
  /* Deliberately not transitioned — see the note on .lightdemo-tabs label. */
}
.ld-skin{background-color:var(--skin)}
.ld-exact{background-color:var(--exact)}
.ld-naive{background-color:var(--naive)}
.ld-vs{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.ld-label{min-width:0}
.ld-label b{display:block;font-size:.95rem;color:var(--ink);letter-spacing:-.01em}
.ld-label span{display:block;font-size:.82rem;color:var(--muted);line-height:1.45}
.ld-verdict::before{content:var(--naive-verdict)}
.ld-de{text-align:right;flex-shrink:0}
.ld-de b{
  display:block;font-family:var(--font-display);font-size:1.5rem;
  font-weight:600;letter-spacing:-.02em;line-height:1;
}
.ld-de small{
  display:block;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:5px;
}
.ld-de-exact b{color:var(--teal-deep)}
.ld-de-exact b::before{content:var(--de-exact)}
.ld-de-naive b{color:var(--naive-tone)}
.ld-de-naive b::before{content:var(--de-naive)}

@media (max-width:640px){
  .ld-row{grid-template-columns:1fr auto;gap:12px 14px}
  .ld-pair{grid-column:1/-1}
  .ld-de{text-align:left}
  .lightdemo-tabs{width:100%;justify-content:stretch}
  .lightdemo-tabs label{flex:1;text-align:center;padding:.6em .5em;font-size:.78rem}
}

/* ---------- 23i. Higher-contrast preference ----------------------------- */
@media (prefers-contrast: more){
  :root{
    --muted:#514860;
    --muted-2:#5F566E;
    --ink-3:#241D33;
    --line:rgba(20,16,28,.24);
    --line-strong:rgba(20,16,28,.42);
    --line-dark:rgba(255,255,255,.34);
  }
  .card,.ld-row{border-width:1.5px}
  .btn-ghost{border-width:1.5px}
  .aurora{opacity:.3}
  .grain{display:none}
  .band-ink .card p{color:rgba(255,255,255,.86)}
  .site-footer a{color:rgba(255,255,255,.86)}
  .reg-note{color:rgba(255,255,255,.78)}
}

/* ---------- 23j. Print & reduced motion sweep --------------------------- */
@media (prefers-reduced-motion: reduce){
  .match-card,.reading-progress,.to-top{animation:none!important}
}
@media print{
  .reading-progress,.to-top,.match-card{display:none!important}
  .section .card,.steps .step,.stats .stat,.tone-strip .tone,.plan,.faq details,
  .section > .wrap > div:first-child > .eyebrow,
  .section > .wrap > div:first-child > h2{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .faq details{background:none!important}
}

/* =========================================================================
   24. Illustration layer
   Animated product mockups drawn entirely in HTML + CSS + inline SVG.
   No images, no JavaScript. Each mockup carries role="img" and a text
   alternative, so the illustration is decoration and the surrounding
   heading and paragraph carry the meaning.
   ========================================================================= */

/* ---------- 24a. Shared card shells ------------------------------------- */
.viz-grid{display:grid;gap:24px}
.viz-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.viz-card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--porcelain-2);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:26px;
}
.viz-card > h3{margin:0 0 .4em;font-size:1.12rem}
.viz-card > p{margin:0;font-size:.93rem;color:var(--ink-3);line-height:1.6}
.viz-step{
  display:inline-flex;align-items:center;align-self:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:.34em 1em;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);
  margin-bottom:20px;
}
/* The white "screen" every mockup sits on */
.viz-stage{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  padding:20px;margin-bottom:24px;
  min-height:216px;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;min-width:0;
}

/* ---------- 24b. Mockup 1 — capture qualification ----------------------- */
.mk-capture{display:flex;flex-direction:column;align-items:center;gap:16px}
.mk-frame{
  position:relative;width:100%;max-width:172px;aspect-ratio:4/3;
  border-radius:var(--r);overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,#D8A582 0%,#C68F6E 42%,#A9754F 100%);
}
/* abstract head-and-shoulders, never a photograph of anyone */
.mk-frame::before{
  content:"";position:absolute;left:50%;top:20%;translate:-50% 0;
  width:38%;aspect-ratio:3/4;border-radius:50% 50% 46% 46%;
  background:rgba(255,255,255,.16);
}
.mk-frame::after{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:74%;height:26%;border-radius:50% 50% 0 0;
  background:rgba(255,255,255,.12);
}
/* measuring sweep */
.mk-scan{
  position:absolute;left:0;right:0;top:0;height:34%;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.55) 55%,rgba(255,255,255,.9) 78%,transparent);
  animation:mk-sweep 3.4s ease-in-out infinite;
}
@keyframes mk-sweep{
  0%,100%{transform:translateY(-40%);opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  92%,100%{transform:translateY(300%)}
}
/* reticle corners */
.mk-corner{position:absolute;width:15px;height:15px;border:2px solid rgba(255,255,255,.85);border-radius:3px}
.mk-corner.tl{top:9px;left:9px;border-right:0;border-bottom:0}
.mk-corner.tr{top:9px;right:9px;border-left:0;border-bottom:0}
.mk-corner.bl{bottom:9px;left:9px;border-right:0;border-top:0}
.mk-corner.br{bottom:9px;right:9px;border-left:0;border-top:0}

.mk-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.mk-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--porcelain-2);border:1px solid var(--line);
  border-radius:100px;padding:.32em .8em;
  font-family:var(--font-mono);font-size:.66rem;color:var(--ink-3);white-space:nowrap;
}
.mk-chip i{
  width:12px;height:12px;border-radius:50%;flex-shrink:0;
  background:var(--teal-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 24c. Mockup 2 — reflectance curve --------------------------- */
.mk-curve{width:100%;height:auto;display:block}
.mk-curve .axis{stroke:var(--line-strong);stroke-width:1}
.mk-curve .grid-l{stroke:var(--line);stroke-width:1}
.mk-curve .tick{font-family:var(--font-mono);font-size:7px;fill:var(--muted)}
.mk-curve .band{opacity:.14}
.mk-curve .plot{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-curve .plot-skin{stroke:var(--coral-deep)}
.mk-curve .plot-fit{stroke:var(--violet);stroke-dasharray:3 4}
.mk-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:12px}
.mk-legend span{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;color:var(--muted)}
.mk-legend i{width:14px;height:3px;border-radius:2px;flex-shrink:0}
.mk-legend .k-skin{background:var(--coral-deep)}
.mk-legend .k-fit{background:var(--violet)}

/* The curves draw themselves as the card scrolls into view. Fully drawn by
   default, so an unsupported browser simply shows the finished chart. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .mk-curve .plot{
      stroke-dasharray:var(--len) var(--len);
      stroke-dashoffset:var(--len);
      animation:mk-draw linear both;
      animation-timeline:view();
      animation-range:entry 12% entry 68%;
    }
    .mk-curve .plot-fit{stroke-dasharray:3 4;stroke-dashoffset:0;opacity:0;animation:mk-fade linear both;
      animation-timeline:view();animation-range:entry 40% entry 78%}
  }
}
@keyframes mk-draw{to{stroke-dashoffset:0}}
@keyframes mk-fade{to{opacity:1}}

/* ---------- 24d. Mockup 3 — match result -------------------------------- */
.mk-match{display:flex;flex-direction:column;gap:16px}
.mk-match-row{display:flex;align-items:center;gap:11px}
.mk-sw{width:42px;height:42px;border-radius:11px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(20,16,28,.10)}
.mk-sw.skin{background:#C68F6E}
.mk-sw.shade{background:#C4906F}
.mk-to{color:var(--muted);font-size:.85rem}
.mk-id{min-width:0}
.mk-id b{display:block;font-size:.9rem;color:var(--ink);letter-spacing:-.01em}
.mk-id span{display:block;font-size:.76rem;color:var(--muted)}

.mk-gauge{display:flex;align-items:center;gap:14px;
  border-top:1px solid var(--line);padding-top:15px}
.mk-ring{width:56px;height:56px;flex-shrink:0;transform:rotate(-90deg)}
.mk-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.mk-ring .track{stroke:var(--porcelain-3)}
.mk-ring .fill{stroke:var(--teal-deep);stroke-dasharray:var(--c) var(--c);stroke-dashoffset:calc(var(--c) * (1 - var(--p)))}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .mk-ring .fill{animation:mk-ring-fill linear both;animation-timeline:view();animation-range:entry 14% entry 70%}
  }
}
@keyframes mk-ring-fill{from{stroke-dashoffset:var(--c)}to{stroke-dashoffset:calc(var(--c) * (1 - var(--p)))}}
.mk-gauge-txt b{display:block;font-family:var(--font-display);font-size:1.15rem;color:var(--ink);line-height:1.1}
.mk-gauge-txt span{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.mk-de{
  margin-left:auto;text-align:right;flex-shrink:0;
  background:rgba(23,121,107,.10);border:1px solid rgba(23,121,107,.24);
  border-radius:10px;padding:.4em .7em;
}
.mk-de b{display:block;font-family:var(--font-mono);font-size:.86rem;color:var(--teal-deep);line-height:1.2}
.mk-de span{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;color:var(--muted)}

/* ---------- 24e. Product row — window chrome ---------------------------- */
.mk-win{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-width:0;
  background:var(--card);box-shadow:var(--shadow-sm);
}
.mk-bar{
  display:flex;align-items:center;gap:6px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--porcelain-2);
}
.mk-bar i{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.mk-bar i:nth-child(1){background:#E8836F}
.mk-bar i:nth-child(2){background:#EFC08A}
.mk-bar i:nth-child(3){background:#7FCBBF}
.mk-bar b{
  margin-left:6px;font-family:var(--font-sans);font-size:.78rem;
  font-weight:550;color:var(--ink-3);
}
.mk-live{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-strong);border-radius:100px;
  padding:.22em .66em;font-size:.66rem;color:var(--ink-3);
}
.mk-body{padding:16px}

/* code card */
.mk-code{
  background:var(--ink);border-radius:var(--r);padding:16px 18px;
  overflow-x:auto;min-width:0;max-width:100%;
  font-family:var(--font-mono);font-size:.74rem;line-height:1.9;color:#C9C1D4;
}
.mk-code .k{color:#F2B8CE}
.mk-code .s{color:#9AD9CF}
.mk-code .n{color:#F7B267}
.mk-code .c{color:#948AA1}
.mk-caret{
  display:inline-block;width:7px;height:1em;translate:0 .18em;
  background:#F2B8CE;animation:mk-blink 1.15s steps(1) infinite;
}
@keyframes mk-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* metric bars */
.mk-metrics{display:grid;gap:11px}
.mk-metric{display:grid;grid-template-columns:minmax(0,1fr) 74px auto;gap:11px;align-items:center}
.mk-metric > span{font-size:.8rem;color:var(--ink-3)}
.mk-track{height:6px;border-radius:4px;background:var(--porcelain-3);overflow:hidden}
.mk-fill{
  display:block;height:100%;border-radius:4px;width:var(--v);
  background:linear-gradient(90deg,var(--teal-deep),var(--teal));
  transform-origin:0 50%;
}
.mk-metric b{font-family:var(--font-mono);font-size:.78rem;color:var(--ink);min-width:26px;text-align:right}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .mk-fill{animation:mk-bar linear both;animation-timeline:view();animation-range:entry 16% entry 66%}
  }
}
@keyframes mk-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.mk-flags{border-top:1px solid var(--line);margin-top:15px;padding-top:14px;display:grid;gap:9px}
.mk-flag{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8rem}
.mk-flag > span{color:var(--ink-3)}
.mk-flag em{font-style:normal;font-weight:600;font-size:.78rem;display:inline-flex;align-items:center;gap:5px}
.mk-flag em.clear{color:var(--teal-deep)}
.mk-flag em.warn{color:var(--coral-deep)}

/* ---------- 24f. Decline card ------------------------------------------- */
.viz-card.is-decline{
  background:rgba(201,69,47,.045);
  border-color:rgba(201,69,47,.34);
}
.viz-card.is-decline .viz-step{color:var(--coral-deep);border-color:rgba(201,69,47,.3)}
.mk-decline{border:1px solid rgba(201,69,47,.26);background:#fff;border-radius:var(--r);padding:16px}
.mk-decline-head{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:11px}
.mk-decline-head b{font-size:.95rem;color:var(--coral-deep);letter-spacing:-.01em}
.mk-tag{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(242,153,74,.16);border:1px solid rgba(143,87,21,.34);
  /* --amber-deep clears 4.5:1 on white but only 3.97:1 once the amber tint
     underneath is composited in, so this tag needs a deeper ochre still. */
  color:#8F5715;
  border-radius:100px;padding:.26em .7em;white-space:nowrap;
}
.mk-decline p{font-size:.82rem;color:var(--ink-3);line-height:1.55;margin:0 0 13px}
.mk-kv{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.78rem;margin-top:7px}
.mk-kv span{color:var(--muted)}
.mk-kv code{font-family:var(--font-mono);font-size:.74rem;color:var(--ink)}
.mk-kv .mk-pill-num{
  font-family:var(--font-mono);font-size:.74rem;color:#fff;
  background:var(--coral-deep);border-radius:100px;padding:.16em .62em;
}
.mk-ticks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.mk-ticks li{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;color:var(--ink-3);margin:0}
.mk-ticks svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;stroke:var(--teal-deep);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 24g. Animated feature icons --------------------------------- */
/* Small motions on the existing badges — enough to feel alive, never enough
   to distract from the text beside them. */
@media (prefers-reduced-motion: no-preference){
  .icon-badge .spin-slow{transform-origin:12px 12px;animation:spin 14s linear infinite}
  .icon-badge .pulse-ring{transform-origin:12px 12px;animation:ico-pulse 2.8s ease-in-out infinite}
  .icon-badge .bar-a{transform-origin:50% 100%;animation:ico-bar 2.6s ease-in-out infinite}
  .icon-badge .bar-b{transform-origin:50% 100%;animation:ico-bar 2.6s ease-in-out .28s infinite}
  .icon-badge .bar-c{transform-origin:50% 100%;animation:ico-bar 2.6s ease-in-out .56s infinite}
  .icon-badge .bar-d{transform-origin:50% 100%;animation:ico-bar 2.6s ease-in-out .84s infinite}
  .icon-badge .blink{animation:ico-blink 3.2s ease-in-out infinite}
  .icon-badge .drift{animation:ico-drift 4.2s ease-in-out infinite}
}
@keyframes ico-pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.14);opacity:.5}}
@keyframes ico-bar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes ico-blink{0%,92%,100%{opacity:1}96%{opacity:.25}}
@keyframes ico-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(2.2px)}}

/* ---------- 24h. Reveal + responsive + print ---------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .viz-card{animation:reveal-in linear both;animation-timeline:view();animation-range:entry 4% entry 46%}
  }
}

@media (max-width:900px){
  .viz-3{grid-template-columns:1fr}
  .viz-stage{min-height:0}
  .mk-frame{max-width:210px}
}

@media (prefers-reduced-motion: reduce){
  .mk-scan,.mk-caret{animation:none!important}
  .mk-scan{opacity:0}
}
@media print{
  .viz-card{animation:none!important;opacity:1!important;transform:none!important;break-inside:avoid}
  .mk-scan{display:none!important}
}

/* =========================================================================
   25. Homepage components
   Visible-spectrum band, returns-cost breakdown, comparison table and the
   region strip. CSS and inline SVG only, like everything else here.
   ========================================================================= */

/* ---------- 25a. Visible spectrum band ---------------------------------- */
.spectrum{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--ink);
  padding:0 0 14px;
}
.spectrum-strip{
  position:relative;height:96px;
  /* An approximation of the visible spectrum, violet through to deep red */
  background:linear-gradient(90deg,
    #2E0A57 0%, #4310B8 9%, #2B5BE3 21%, #1FA6CF 32%,
    #35BE6A 44%, #C9D449 55%, #F0A83E 67%, #E3592C 80%, #8E1A12 100%);
}
/* A measuring line sweeping the band, the same gesture as the capture mockup */
.spectrum-scan{
  position:absolute;top:0;bottom:0;width:12%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 45%,rgba(255,255,255,.85) 55%,transparent);
  animation:spec-sweep 9s ease-in-out infinite;
}
@keyframes spec-sweep{
  0%,100%{transform:translateX(-120%)}
  50%{transform:translateX(880%)}
}
/* Tick marks and wavelength labels sit under the band */
.spectrum-ticks{
  display:flex;justify-content:space-between;
  padding:12px 14px 0;
  font-family:var(--font-mono);font-size:.66rem;color:rgba(255,255,255,.55);
}
.spectrum-ticks span{position:relative}
.spectrum-ticks span::before{
  content:"";position:absolute;top:-12px;left:50%;width:1px;height:7px;
  background:rgba(255,255,255,.4);
}
.spectrum-cap{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
  padding:14px 16px 0;font-size:.8rem;color:rgba(255,255,255,.62);
}
.spectrum-cap b{color:#fff;font-weight:550}

/* ---------- 25b. Returns cost breakdown --------------------------------- */
.cost{display:grid;gap:0;margin:8px 0 0}
.cost-bar{
  display:flex;height:46px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--porcelain-2);
}
.cost-seg{
  display:block;height:100%;flex:0 0 var(--w);
  transform-origin:0 50%;
}
.cost-seg.s1{background:linear-gradient(180deg,#E07F4A,var(--amber-deep))}
.cost-seg.s2{background:linear-gradient(180deg,#D1553C,var(--coral-deep))}
.cost-seg.s3{background:linear-gradient(180deg,#C9426A,var(--rose-deep))}
.cost-seg.s4{background:linear-gradient(180deg,#AD3183,var(--magenta-deep))}
.cost-seg.s5{background:linear-gradient(180deg,#7A5AE0,var(--indigo))}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .cost-seg{animation:cost-grow linear both;animation-timeline:view();animation-range:entry 12% entry 62%}
  }
}
@keyframes cost-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.cost-key{display:grid;gap:12px;margin-top:22px}
.cost-key li{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;
  margin:0;font-size:.92rem;
}
.cost-key i{
  width:11px;height:11px;border-radius:3px;flex-shrink:0;translate:0 1px;
}
.cost-key .k1{background:var(--amber-deep)}
.cost-key .k2{background:var(--coral-deep)}
.cost-key .k3{background:var(--rose-deep)}
.cost-key .k4{background:var(--magenta-deep)}
.cost-key .k5{background:var(--indigo)}
.cost-key b{font-family:var(--font-mono);font-size:.88rem;color:var(--ink);white-space:nowrap}
.cost-key span{color:var(--ink-3)}
.cost-key small{display:block;color:var(--muted);font-size:.82rem;line-height:1.45}
.cost-total{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;justify-content:space-between;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line-strong);
}
.cost-total b{font-family:var(--font-display);font-size:1.6rem;color:var(--ink);letter-spacing:-.02em}

/* ---------- 25c. Comparison table --------------------------------------- */
.versus{width:100%;border-collapse:collapse;font-size:.93rem;
  background:var(--card);border-radius:var(--r);overflow:hidden}
.versus th,.versus td{text-align:left;padding:14px 16px;border:1px solid var(--line);vertical-align:top}
.versus thead th{background:var(--porcelain-2);font-weight:600;color:var(--ink)}
.versus thead th:nth-child(3){
  background:linear-gradient(180deg,rgba(183,47,134,.10),rgba(183,47,134,.04));
  color:var(--magenta);
}
.versus td:nth-child(3){background:rgba(183,47,134,.028)}
.versus tbody th{font-weight:550;color:var(--ink);background:transparent;width:24%}
.versus .no{color:var(--coral-deep)}
.versus .yes{color:var(--teal-deep)}

/* ---------- 25d. Region strip ------------------------------------------- */
.regions{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.region{
  background:var(--card-ink);border:1px solid var(--line-dark);
  border-radius:var(--r-lg);padding:22px;
}
.region-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.region-head b{font-family:var(--font-mono);font-size:.9rem;color:#fff;letter-spacing:.04em}
.region p{font-size:.86rem;color:rgba(255,255,255,.66);line-height:1.5;margin:0}
.region .dot{animation-delay:var(--d,0s)}

/* ---------- 25e. Ambient drifting shapes -------------------------------- */
/* Slow, low-contrast geometry behind a light section. Purely atmospheric. */
.ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient span{
  position:absolute;display:block;border-radius:50%;
  border:1.5px solid rgba(20,16,28,.055);
}
.ambient .r1{width:280px;height:280px;top:-90px;right:-70px;animation:amb 34s ease-in-out infinite}
.ambient .r2{width:170px;height:170px;bottom:-60px;left:6%;animation:amb 27s ease-in-out infinite reverse}
.ambient .r3{width:90px;height:90px;top:26%;left:-30px;border-radius:24px;animation:amb 41s ease-in-out infinite}
.ambient .r4{width:130px;height:130px;bottom:16%;right:12%;border-radius:32px;animation:amb 31s ease-in-out infinite reverse}
@keyframes amb{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(18px,-22px,0) rotate(24deg)}
}

/* ---------- 25f. Responsive & motion ------------------------------------ */
@media (max-width:900px){
  .regions{grid-template-columns:repeat(2,1fr)}
  .cost-key li{grid-template-columns:auto 1fr;row-gap:2px}
  .cost-key b{grid-column:2}
  .spectrum-strip{height:74px}
}
@media (max-width:560px){
  .regions{grid-template-columns:1fr}
  .spectrum-ticks{font-size:.58rem}
  .versus tbody th{width:auto}
}
@media (prefers-reduced-motion: reduce){
  .spectrum-scan{animation:none;opacity:0}
  .ambient span{animation:none}
}
@media print{
  .spectrum-scan,.ambient{display:none !important}
  .cost-seg{animation:none !important;transform:none !important}
}

/* =========================================================================
   26. The hero instrument — a calibrated shade dial
   Replaces the earlier counter-rotating rings. Those were decorative; this
   depicts the mechanism: a measured tonal scale, graduation marks, a sweep
   reading across them, and a needle resting on one position.
   ========================================================================= */

.instrument{
  position:relative;width:100%;max-width:470px;margin-inline:auto;aspect-ratio:1;
  color:var(--ink);           /* graduation marks inherit this via currentColor */
  isolation:isolate;
}

/* A soft field behind the dial so it sits on the page rather than floating on it */
.instrument::before{
  content:"";position:absolute;inset:6%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 42% 34%,rgba(255,255,255,.95),rgba(244,238,234,.55) 58%,transparent 72%);
  box-shadow:0 40px 90px -50px rgba(20,16,28,.55);
}

.dial{width:100%;height:auto;display:block;overflow:visible}

/* ---- Fitzpatrick band labels ------------------------------------------- */
.dial-band{
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  fill:var(--muted);letter-spacing:.06em;
}

/* ---- The scale ---------------------------------------------------------- */
.dial-scale path{
  /* A hairline between segments reads as calibration rather than as a gradient */
  stroke:rgba(255,255,255,.55);stroke-width:.6;
}

/* ---- The sweep ---------------------------------------------------------- */
/* transform-box:view-box lets the rotation pivot on the viewBox centre without
   hard-coding user units into the transform-origin. */
.dial-sweep{
  transform-box:view-box;transform-origin:50% 50%;
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion: no-preference){
  .dial-sweep{animation:dial-sweep 11s linear infinite}
}
@keyframes dial-sweep{to{transform:rotate(360deg)}}

/* ---- The needle --------------------------------------------------------- */
/* A live instrument is never perfectly still. A degree of drift reads as a
   reading being held, not as decoration. */
.dial-needle{transform-box:view-box;transform-origin:50% 50%}
@media (prefers-reduced-motion: no-preference){
  .dial-needle{animation:dial-hold 7s ease-in-out infinite}
}
@keyframes dial-hold{
  0%,100%{transform:rotate(-1.1deg)}
  50%{transform:rotate(1.1deg)}
}

/* ---- The readout core --------------------------------------------------- */
.dial-core{
  position:absolute;inset:27.5%;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8%;
  background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.98),rgba(250,246,244,.92));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 2px 12px rgba(255,255,255,.9),
    inset 0 -8px 22px -14px rgba(20,16,28,.30),
    0 18px 40px -22px rgba(20,16,28,.45);
}
.dial-core .k{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.dial-core .band{
  font-family:var(--font-display);font-size:2.6rem;font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--ink);margin:.12em 0 .1em;
}
.dial-core .tone{
  font-size:.82rem;color:var(--ink-3);line-height:1.3;
}
.dial-core .de{
  font-family:var(--font-mono);font-size:.72rem;color:var(--magenta);
  margin-top:.7em;padding-top:.6em;border-top:1px solid var(--line);
  width:72%;
}

/* ---- Caption in the gauge's open bottom --------------------------------- */
.dial-caption{
  position:absolute;left:50%;bottom:1%;translate:-50% 0;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}

/* ---- Match card ---------------------------------------------------------
   Kept from the previous hero, repositioned to clear the wider dial. */
.match-card{left:-4%;bottom:5%}

@media (max-width:980px){
  .instrument{max-width:400px}
  .match-card{left:auto;right:-3%;bottom:-2%}
}
@media (max-width:560px){
  .instrument{max-width:330px}
  .dial-core .band{font-size:2.1rem}
  .dial-band{font-size:15px}
}

@media print{
  .dial-sweep{display:none}
  .dial-needle{animation:none}
}

/* =========================================================================
   27. Finish
   Typographic and material refinements. Nothing here changes layout — it is
   the pass that makes the difference between "built" and "designed".
   ========================================================================= */

/* ---- 27a. Optical sizing -------------------------------------------------
   Fraunces is a variable font with an optical-size axis. Letting it run means
   display type gets the higher stroke contrast and tighter spacing a display
   cut should have, while small text keeps the sturdier shapes it needs. */
html{font-optical-sizing:auto}
.display{font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0}
h3,.card h3,.viz-card h3{font-variation-settings:"opsz" 36}
.quote{font-variation-settings:"opsz" 72}

/* Figures should line up in columns wherever they are read as data */
.mono,.stat b,.ld-de b,.mk-de b,.mk-metric b,.cost-key b,.dial-core .de,
.versus td,.prose td{font-variant-numeric:tabular-nums}

/* Slightly tighter tracking on the largest display sizes, which need it */
h1.display{letter-spacing:-.035em;word-spacing:-.01em}

/* ---- 27b. Section seams -------------------------------------------------
   A hairline of the section's own accent where light meets dark, so bands
   read as deliberate panels rather than as abrupt colour changes. */
.band-ink{position:relative}
.band-ink::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(216,68,110,.42) 22%,rgba(108,75,227,.42) 68%,transparent);
}
.band-tint{position:relative}
.band-tint::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 30%,var(--line-strong) 70%,transparent);
}

/* ---- 27c. Material ------------------------------------------------------
   A two-stage shadow reads as a real object: a tight contact shadow that
   grounds the card, and a wide soft one that gives it height. */
.card{
  box-shadow:
    0 1px 1px rgba(20,16,28,.035),
    0 3px 8px -3px rgba(20,16,28,.055);
}
.card-hover:hover{
  box-shadow:
    0 1px 2px rgba(20,16,28,.05),
    0 12px 28px -12px rgba(20,16,28,.20),
    0 30px 60px -40px rgba(20,16,28,.30);
}
.viz-stage,.mk-win{
  box-shadow:
    0 1px 1px rgba(20,16,28,.03),
    0 4px 12px -6px rgba(20,16,28,.09);
}

/* ---- 27d. Links in running text ----------------------------------------
   An underline that sits below the baseline and thickens on hover, rather
   than the default rule that collides with descenders. */
.prose a:not(.btn),.faq-body a,.card p a,.lede a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:rgba(168,42,84,.38);
  transition:text-decoration-color .2s,text-decoration-thickness .2s;
}
.prose a:not(.btn):hover,.faq-body a:hover,.card p a:hover,.lede a:hover{
  text-decoration-thickness:2px;
  text-decoration-color:var(--accent-ink);
}

/* ---- 27e. Selection and focus ------------------------------------------ */
::selection{background:rgba(183,47,134,.16);color:var(--ink)}
.band-ink ::selection{background:rgba(242,184,206,.28);color:#fff}
:focus-visible{outline-color:var(--magenta)}
.band-ink :focus-visible,.auth-panel :focus-visible{outline-color:#F2B8CE}

/* ---- 27f. Eyebrow rule --------------------------------------------------
   The little spectrum dash grows when its section scrolls into view. A small
   thing, but it gives each section a moment of arrival. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .eyebrow::before{
      animation:eyebrow-draw linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
  }
}
@keyframes eyebrow-draw{from{width:0;opacity:0}to{width:22px;opacity:1}}

/* ---- 27g. Richer ambient field ----------------------------------------- */
/* One more blob and a touch more saturation, so the hero field has depth
   rather than reading as a single flat wash. */
.aurora{opacity:.6}
.aurora .a5{
  width:34vw;height:34vw;left:14vw;top:26vw;
  background:radial-gradient(circle at 50% 50%,rgba(183,47,134,.30),transparent 66%);
  animation:drift3 38s ease-in-out infinite;
}

/* ---- 27h. Tone swatch polish ------------------------------------------- */
.tone{box-shadow:0 1px 2px rgba(20,16,28,.06),0 6px 16px -10px rgba(20,16,28,.30)}
.tone:hover{box-shadow:0 2px 4px rgba(20,16,28,.08),0 16px 34px -16px rgba(20,16,28,.42)}

/* ---- 27i. Buttons ------------------------------------------------------- */
/* A one-pixel inner highlight along the top edge is what makes a filled
   button look lit rather than printed. */
.btn-primary{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.22),
  0 2px 8px rgba(166,39,120,.26),
  0 10px 26px -12px rgba(166,39,120,.50)}
.btn-primary:hover{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.28),
  0 4px 14px rgba(166,39,120,.32),
  0 18px 38px -16px rgba(166,39,120,.55)}

/* ---- 27j. Print --------------------------------------------------------- */
@media print{
  .band-ink::before,.band-tint::before{display:none}
  .eyebrow::before{animation:none;width:22px;opacity:1}
}