/* ============================================================
   hoh-system.css  ·  The House of Hygiene
   THE DESIGN SYSTEM. Vol. 01 "Editorial-Clinical", codified.

   Load order on every page:
     1. hoh-brand.css     fonts + raw palette
     2. hoh-system.css    THIS FILE - tokens, scale, components
     3. site-chrome.css   footer + masthead
     4. page <style>      layout only. No colors. No type sizes.

   THE ONE RULE THAT MATTERS
   -------------------------
   Components never name a color. They use --fg / --fg-mid / --accent
   / --surface / --hairline. Those tokens are re-pointed by context:

       <section class="sec">           light context, iris accent
       <section class="sec on-dark">   dark context, periwinkle accent

   Drop any component into `.on-dark` and it recolors itself correctly.
   This is what stops ink headings landing on purple backgrounds.

   Electric Iris is a LIGHT-SURFACE color only. It measures 3.22:1 on
   ink and 1.57:1 on purple-mid, both below the 4.5:1 minimum. On dark
   surfaces the accent is Periwinkle #B9AEFF (9.03:1 on ink). Never
   hand-write iris on a dark background.
   ============================================================ */

/* ============================================================
   1 · PALETTE  (raw values. Reference these only when defining
   a context below. Components must not use these directly.)
   ============================================================ */
:root{
  /* purples */
  --p-iris:#5B4BF5;
  --p-iris-dk:#4A3AD6;
  --p-periwinkle:#B9AEFF;
  --p-periwinkle-lt:#DDE4FF;
  --p-purple:#3E3166;
  --p-purple-mid:#534178;
  --p-lavender:#EFEBF5;

  /* neutrals */
  --p-ink:#1C1929;
  --p-ink-deep:#17142A;
  --p-ink-black:#0F0D1A;
  --p-slate:#56505F;
  --p-slate-lt:#6B6480;
  --p-paper:#FBF8F3;
  --p-sand:#F2ECE3;
  --p-card:#FFFDFB;

  /* semantic accents. Rose and teal are SUPPORTING, never body text
     on light (both measure ~3.1:1 and fail AA). */
  --p-coral:#FF5C39;      /* live / now / interactive only */
  --p-teal:#2D6651;       /* passes on light at 5.71:1 */
  --p-teal-soft:#7FB3A4;  /* dark surfaces only */
  --p-rose:#BA7363;       /* decorative only: rules, chips, borders */
}

/* ============================================================
   2 · CONTEXT TOKENS
   Every component reads from these six. Nothing else.
   ============================================================ */
:root,
.on-light{
  --surface:var(--p-paper);
  --surface-raised:var(--p-card);
  --fg:var(--p-ink);          /* 16.24:1 on paper */
  --fg-mid:var(--p-slate);    /*  7.32:1 */
  --fg-soft:var(--p-slate-lt);/*  5.27:1  - replaces #8A8194 which failed at 3.51 */
  --accent:var(--p-iris);     /*  5.26:1 */
  --accent-hover:var(--p-iris-dk);
  --hairline:rgba(28,25,41,.14);
  --hairline-strong:rgba(28,25,41,.24);
}

.on-dark{
  --surface:var(--p-ink-deep);
  --surface-raised:rgba(255,253,251,.06);
  --fg:#FFFDFB;                       /* 17.69:1 on ink-deep */
  --fg-mid:rgba(255,253,251,.74);
  --fg-soft:rgba(255,253,251,.56);
  --accent:var(--p-periwinkle);       /*  9.03:1 - NOT iris */
  --accent-hover:#FFFDFB;
  --hairline:rgba(255,253,251,.15);
  --hairline-strong:rgba(255,253,251,.28);
}

/* Deep purple is a shallower dark. Periwinkle still passes (5.75:1)
   but teal-soft and coral do not, so they are barred here. */
.on-purple{
  --surface:var(--p-purple);
  --surface-raised:rgba(255,253,251,.08);
  --fg:#FFFDFB;
  --fg-mid:rgba(255,253,251,.78);
  --fg-soft:rgba(255,253,251,.60);
  --accent:var(--p-periwinkle-lt);    /*  9.05:1 */
  --accent-hover:#FFFDFB;
  --hairline:rgba(255,253,251,.16);
  --hairline-strong:rgba(255,253,251,.30);
}

/* ============================================================
   3 · TYPE SCALE
   Three faces with three jobs. Lumierepolis is the wordmark only.
   ============================================================ */
:root{
  --font-display:'Lumierepolis','DM Serif Display',serif;
  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'Outfit',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --fs-100:.68rem;   /* mono label / eyebrow */
  --fs-200:.78rem;   /* mono meta, fine print */
  --fs-300:.875rem;  /* small text, nav */
  --fs-400:1rem;     /* body */
  --fs-500:1.125rem; /* lead paragraph */
  --fs-600:1.3rem;   /* card title */
  --fs-700:1.6rem;   /* h3 */
  --fs-800:clamp(1.9rem,3.4vw,2.6rem);  /* h2 section head */
  --fs-900:clamp(2.5rem,5.4vw,4rem);    /* h1 hero */

  --lh-tight:1.06;
  --lh-snug:1.22;
  --lh-body:1.7;

  --track-label:.16em;
  --track-tight:-.015em;

  --measure:66ch;
  --measure-tight:46ch;
}

/* ============================================================
   4 · SPACE, RADIUS, ELEVATION
   23 radius values existed across the site. There are now three.
   ============================================================ */
:root{
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --sec-y:clamp(64px,8vw,112px);
  --sec-x:5%;
  --container:1100px;

  --r-sm:4px;    /* buttons, badges, inputs, chips */
  --r-md:8px;    /* cards, panels */
  --r-pill:999px;/* dots, progress bars only */

  --e-1:0 1px 2px rgba(28,25,41,.06);
  --e-2:0 12px 30px rgba(28,25,41,.10);

  --dur:.18s;
  --ease:cubic-bezier(.2,.6,.3,1);
}

/* ============================================================
   5 · PRIMITIVES
   ============================================================ */
.sec{
  padding:var(--sec-y) var(--sec-x);
  background:var(--surface);
  color:var(--fg);
}
.sec-inner{ max-width:var(--container); margin:0 auto; }
.sec--tight{ padding-block:calc(var(--sec-y) * .55); }
.sec--flush{ padding-block:0; }

/* Section rhythm. Applied in order down a page so backgrounds never
   repeat back to back and dark bands stay deliberate. */
.sec--paper   { --surface:var(--p-paper); }
.sec--lavender{ --surface:var(--p-lavender); }
.sec--sand    { --surface:var(--p-sand); }
.sec + .sec[class*="sec--"]{ border-top:1px solid var(--hairline); }
.on-dark + .sec, .sec + .on-dark{ border-top:none; }

.eyebrow,.kicker,.label{
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  font-weight:500;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
  margin-bottom:var(--sp-3);
}
.label--quiet{ color:var(--fg-soft); }
/* hoh-brand.css sets `.eyebrow{color:var(--hoh-iris)!important}` globally,
   which paints iris onto dark sections at 1.57 to 3.22:1. These win it back
   for dark contexts. Remove once every page is off the legacy eyebrow rule. */
.on-dark .eyebrow,.on-dark .kicker,.on-dark .label,
.on-purple .eyebrow,.on-purple .kicker,.on-purple .label{ color:var(--accent)!important; }

/* Headings inherit their color rather than claiming var(--fg).
   A bare `h1{color:...}` is specificity 0,0,1, which beats inheritance,
   so on a legacy page whose hero sets `color:#fff` on the SECTION and
   leaves the heading alone, an element-level color silently repaints
   the headline ink-on-purple. Color is set by context class instead. */
h1,.h1{
  font-family:var(--font-serif);
  font-size:var(--fs-900);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-tight);
  font-weight:600;
  color:inherit;
  margin:0;
}
h2,.h2{
  font-family:var(--font-serif);
  font-size:var(--fs-800);
  line-height:var(--lh-snug);
  letter-spacing:var(--track-tight);
  font-weight:600;
  color:inherit;
  margin:0;
}
h3,.h3{
  font-family:var(--font-serif);
  font-size:var(--fs-700);
  line-height:var(--lh-snug);
  font-weight:600;
  color:inherit;
  margin:0;
}
h4,.h4{
  font-family:var(--font-sans);
  font-size:var(--fs-600);
  line-height:1.35;
  font-weight:700;
  color:inherit;
  margin:0;
}
.on-light h1,.on-light h2,.on-light h3,.on-light h4,
.on-dark  h1,.on-dark  h2,.on-dark  h3,.on-dark  h4,
.on-purple h1,.on-purple h2,.on-purple h3,.on-purple h4{ color:var(--fg); }

/* The signature move: one phrase of the headline set in italic accent.
   Color comes from context, so it is iris on light and periwinkle on
   dark. Previously this was iris on some pages and teal on others. */
h1 em,h2 em,.h1 em,.h2 em{
  font-style:italic;
  font-weight:500;
  color:var(--accent);
}

p{
  font-family:var(--font-sans);
  font-size:var(--fs-400);
  line-height:var(--lh-body);
  color:var(--fg-mid);
  margin:0 0 var(--sp-4);
  max-width:var(--measure);
}
.lead{ font-size:var(--fs-500); color:var(--fg-mid); max-width:var(--measure-tight); }
.fine{ font-size:var(--fs-200); color:var(--fg-soft); line-height:1.6; }
strong{ color:var(--fg); font-weight:700; }

/* ============================================================
   6 · BUTTONS
   One geometry. Three ranks. Mono uppercase is the house voice.
   ============================================================ */
.btn{
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-5);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.btn--primary{
  background:var(--p-iris);   /* 5.49:1 with white label */
  color:#FFFDFB;
  border-color:var(--p-iris);
}
.btn--primary:hover{ background:var(--p-iris-dk); border-color:var(--p-iris-dk); }

/* On dark surfaces iris loses too much separation from the background,
   so the primary inverts to a paper fill. */
.on-dark .btn--primary,
.on-purple .btn--primary{
  background:#FFFDFB;
  color:var(--p-ink);
  border-color:#FFFDFB;
}
.on-dark .btn--primary:hover,
.on-purple .btn--primary:hover{
  background:var(--p-periwinkle-lt);
  border-color:var(--p-periwinkle-lt);
}

.btn--secondary{
  background:transparent;
  color:var(--fg);
  border-color:var(--hairline-strong);
}
.btn--secondary:hover{ border-color:var(--fg); background:transparent; }

.btn--block{ width:100%; }
.btn--lg{ font-size:var(--fs-200); padding:var(--sp-4) var(--sp-6); min-height:52px; }

/* Text link with the house arrow. Replaces the assorted inline <a>
   styles, including the one that was rendering in default browser
   blue on the homepage. */
.link{
  font-family:var(--font-mono);
  font-size:var(--fs-200);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1.5px solid currentColor;
  padding-bottom:2px;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  transition:color var(--dur) var(--ease);
}
.link:hover{ color:var(--accent-hover); }
.link::after{ content:'\2192'; transition:transform var(--dur) var(--ease); }
.link:hover::after{ transform:translateX(3px); }

/* Inline prose links */
.sec a:not(.btn):not(.link):not(.nav-link):not(.card){
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}

/* ============================================================
   7 · CARDS + BADGES
   ============================================================ */
.card{
  background:var(--surface-raised);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding:var(--sp-5);
  color:var(--fg);
}
.card--interactive{ transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card--interactive:hover{ box-shadow:var(--e-2); transform:translateY(-2px); border-color:var(--hairline-strong); }
.card h3,.card h4{ margin-bottom:var(--sp-3); }
.card p:last-child{ margin-bottom:0; }

.badge{
  font-family:var(--font-mono);
  font-size:var(--fs-100);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:var(--r-sm);
  padding:5px var(--sp-3);
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--p-ink);
  color:#FFFDFB;
}
.on-dark .badge:not([class*="badge--"]),
.on-purple .badge:not([class*="badge--"]){ background:#FFFDFB; color:var(--p-ink); }
.badge--quiet{ background:var(--p-sand); color:var(--p-slate); border:1px solid rgba(28,25,41,.14); }
.on-dark .badge--quiet,.on-purple .badge--quiet{ background:rgba(255,253,251,.10); color:#FFFDFB; border-color:var(--hairline); }
/* Coral is a bright mid-tone: white on it is only 3.02:1. Ink is 5.6:1. */
.badge--live{ background:var(--p-coral); color:var(--p-ink); }
.badge--live .dot{ background:currentColor; }

.dot{
  width:6px; height:6px; border-radius:var(--r-pill);
  background:var(--p-coral); display:inline-block; flex:none;
}

/* ============================================================
   8 · NAV  ·  one marketing header for every public page
   Fixes: 3 pages were missing the Start Free CTA, students.html
   rendered its link set twice, and the logo lockup varied.
   ============================================================ */
.hoh-nav{
  position:sticky; top:0; z-index:100;
  background:var(--p-paper);
  border-bottom:1px solid rgba(28,25,41,.12);
}
.hoh-nav-inner{
  max-width:var(--container); margin:0 auto;
  padding:var(--sp-3) var(--sec-x);
  display:flex; align-items:center; gap:var(--sp-5);
  min-height:64px;
}
.hoh-logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.hoh-logo img{ height:34px; width:auto; display:block; }
.hoh-logo-text{ display:flex; flex-direction:column; gap:2px; }
.hoh-logo-est{
  font-family:var(--font-mono); font-size:.54rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; line-height:1;
  color:var(--p-slate-lt);
}
.hoh-logo-name{
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  letter-spacing:.045em; text-transform:uppercase; line-height:1;
  color:var(--p-ink); white-space:nowrap;
}
.hoh-nav .nav-link{
  font-family:var(--font-sans); font-size:var(--fs-300); font-weight:600;
  color:var(--p-slate); text-decoration:none; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
  transition:color var(--dur) var(--ease);
}
.hoh-nav .nav-link:hover{ color:var(--p-ink); }
.hoh-nav .nav-link[aria-current="page"]{
  color:var(--p-ink); box-shadow:inset 0 -2px 0 var(--p-iris);
}
.hoh-nav .btn{ margin-left:var(--sp-2); }

@media(max-width:820px){
  .hoh-nav-inner{ flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); padding-block:var(--sp-2); }
  .hoh-logo{ margin-right:auto; }
  .hoh-nav .nav-link{ font-size:.74rem; min-height:38px; }
  .hoh-nav .btn{ margin-left:0; padding:var(--sp-2) var(--sp-4); min-height:38px; }
}

/* ------------------------------------------------------------
   8b · CANONICAL NAV over the EXISTING <nav><div class="nav-inner">
   markup, so the five public pages unify without rewriting five
   page stylesheets. Selectors are deliberately one step more
   specific than the page rules they replace (nav .nav-inner beats
   .nav-inner), which is why none of this needs !important.

   Before: index and students had a light nav with a Start Free
   button; survival-guide, about and faq had a purple nav with no
   CTA, a text-only logo, and three different container widths.
   ------------------------------------------------------------ */
body > nav{
  background:var(--p-paper);
  border-bottom:1px solid rgba(28,25,41,.12);
  position:sticky; top:0; z-index:100;
}
body > nav .nav-inner{
  max-width:var(--container); margin:0 auto;
  padding:var(--sp-3) var(--sec-x);
  display:flex; align-items:center; gap:var(--sp-5);
  min-height:64px; flex-wrap:wrap;
  /* 2026-09-02 · height:auto is load-bearing. 22 pages pin
     .nav-inner{height:68px} (survival-guide pins 40px) in their own
     <style>, and this block never overrode it. Combined with the
     flex-wrap above, a nav that wrapped did not grow the bar: the
     wrapped item rendered outside it, over the top of the hero.
     index.html did this at every width from 1024px down, with the
     Start Free button floating on the x-ray. min-height keeps the
     64px floor; height:auto lets the bar grow instead of spilling. */
  height:auto;
}
body > nav .nav-links{
  display:flex; align-items:center; gap:var(--sp-5);
  margin-left:auto; flex-wrap:wrap;
}
body > nav .logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
body > nav .nav-links ~ .logo,
body > nav .logo:has(~ .nav-links){ margin-right:0; }
body > nav .logo-mark{ height:32px; width:auto; display:block; flex:none; }
body > nav .logo-text{ display:flex; flex-direction:column; gap:2px; }
body > nav .logo-label{
  font-family:var(--font-mono); font-size:.54rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; line-height:1;
  color:var(--p-slate-lt);
}
body > nav .logo-name{
  font-family:var(--font-display),'Fraunces',serif;
  font-weight:700; font-size:1.02rem; letter-spacing:.045em;
  text-transform:uppercase; line-height:1;
  color:var(--p-ink); white-space:nowrap; text-decoration:none;
  margin-right:0;
}
body > nav .logo-name span{ color:var(--p-purple); }
body > nav .nav-link{
  font-family:var(--font-sans); font-size:var(--fs-300); font-weight:600;
  letter-spacing:0; text-transform:none;
  color:var(--p-slate); text-decoration:none; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
  transition:color var(--dur) var(--ease);
}
body > nav .nav-link:hover{ color:var(--p-ink); }
body > nav .nav-link.active,
body > nav .nav-link[aria-current="page"]{
  color:var(--p-ink); box-shadow:inset 0 -2px 0 var(--p-iris);
}
body > nav .nav-cta{
  font-family:var(--font-mono); font-size:var(--fs-100); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--p-iris); color:#FFFDFB;
  border:1.5px solid var(--p-iris); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-5); min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; white-space:nowrap;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
body > nav .nav-cta:hover{ background:var(--p-iris-dk); border-color:var(--p-iris-dk); transform:translateY(-1px); }

@media(max-width:820px){
  body > nav .nav-inner{ gap:var(--sp-1) var(--sp-4); padding-block:var(--sp-2); }
  body > nav .nav-links{ gap:var(--sp-4); }
  body > nav .nav-link{ font-size:.74rem; min-height:38px; }
  body > nav .nav-cta{ padding:var(--sp-2) var(--sp-4); min-height:38px; }
}

/* ============================================================
   9 · SPEC BAR  ·  the credentials strip
   ============================================================ */
.specbar{
  background:var(--p-sand);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.specbar-inner{
  max-width:var(--container); margin:0 auto; padding:0 var(--sec-x);
  display:flex; align-items:stretch;
}
.spec{
  flex:1; padding:var(--sp-5) var(--sp-5);
  border-right:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:5px;
}
.spec:first-child{ padding-left:0; }
.spec:last-child{ border-right:none; padding-right:0; }
.spec .l{
  font-family:var(--font-mono); font-size:var(--fs-100);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--fg-soft);                /* was #8A8194 at 3.17:1, now 4.76:1 */
  display:inline-flex; gap:7px; align-items:center;
}
.spec .l::before{ content:'+'; color:var(--p-iris); font-weight:700; font-size:.85rem; line-height:0; }
.spec .v{
  font-family:var(--font-serif); font-weight:600; font-size:1.18rem;
  line-height:1.15; color:var(--p-purple); letter-spacing:var(--track-tight);
}
@media(max-width:760px){
  .specbar-inner{ flex-wrap:wrap; }
  .spec{ flex:0 0 50%; border-right:none; border-bottom:1px solid var(--hairline); padding:var(--sp-3) 0; }
  .spec:nth-child(odd){ padding-right:var(--sp-4); }
}

/* ============================================================
   10 · PULL QUOTE
   ============================================================ */
.pull-quote{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:var(--fs-700); line-height:1.4; color:var(--fg);
  border-left:3px solid var(--accent);
  padding-left:var(--sp-5); margin:var(--sp-6) 0;
  max-width:var(--measure-tight);
}

/* ============================================================
   11 · KIT (ConvertKit) EMBED
   The embed ships with its own system font, its own button and its
   own radius, which is why the homepage signup reads as a different
   website. This scopes it back into the system.
   ============================================================ */
.hoh-kit .formkit-form{
  background:var(--surface-raised)!important;
  border:1px solid var(--hairline)!important;
  border-radius:var(--r-md)!important;
  box-shadow:none!important;
  max-width:var(--container)!important;
  font-family:var(--font-sans)!important;
}
.hoh-kit .formkit-header,
.hoh-kit .formkit-form h1,
.hoh-kit .formkit-form h2{
  font-family:var(--font-serif)!important;
  font-size:var(--fs-800)!important;
  font-weight:600!important;
  line-height:var(--lh-snug)!important;
  letter-spacing:var(--track-tight)!important;
  text-transform:none!important;
  color:var(--fg)!important;
}
/* Kit's two-column layout puts the header on a dark image column. Those
   two elements are the exception that must stay light. */
.hoh-kit .formkit-column:first-of-type .formkit-header,
.hoh-kit .formkit-column:first-of-type .formkit-header h1,
.hoh-kit .formkit-column:first-of-type .formkit-header h2,
.hoh-kit .formkit-column:first-of-type .formkit-subheader,
.hoh-kit .formkit-column:first-of-type .formkit-subheader p{
  color:#FFFDFB!important;
}
.hoh-kit .formkit-subheader,
.hoh-kit .formkit-form p{
  font-family:var(--font-sans)!important;
  font-size:var(--fs-400)!important;
  line-height:var(--lh-body)!important;
  color:var(--fg-mid)!important;
}
.hoh-kit .formkit-input{
  font-family:var(--font-sans)!important;
  font-size:16px!important;
  border:1px solid var(--hairline-strong)!important;
  border-radius:var(--r-sm)!important;
  padding:var(--sp-3) var(--sp-4)!important;
  min-height:48px!important;
  background:var(--p-card)!important;
  color:var(--p-ink)!important;
}
.hoh-kit .formkit-input:focus{
  outline:2px solid var(--p-iris)!important;
  outline-offset:1px!important;
  border-color:var(--p-iris)!important;
}
.hoh-kit .formkit-submit,
.hoh-kit .formkit-submit > span{
  font-family:var(--font-mono)!important;
  font-size:var(--fs-100)!important;
  font-weight:600!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  border-radius:var(--r-sm)!important;
  min-height:48px!important;
  background:var(--p-iris)!important;
  color:#FFFDFB!important;
}
.hoh-kit .formkit-submit:hover,
.hoh-kit .formkit-submit:hover > span{ background:var(--p-iris-dk)!important; }
.hoh-kit .formkit-guarantee{
  font-family:var(--font-mono)!important;
  font-size:var(--fs-100)!important;
  letter-spacing:.06em!important;
  color:var(--fg-soft)!important;
}

/* ============================================================
   12 · UTILITIES
   ============================================================ */
.stack > * + *{ margin-top:var(--sp-4); }
.stack-lg > * + *{ margin-top:var(--sp-6); }
.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.measure{ max-width:var(--measure); }
.measure-tight{ max-width:var(--measure-tight); }
.center{ margin-inline:auto; text-align:center; }
.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;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .btn:hover,.card--interactive:hover{ transform:none; }
}