/* ============================================================================
   STRATEGY9 DESIGN SYSTEM — CORE LAYER
   ----------------------------------------------------------------------------
   version:   1.11.0
   canonical: strategy9.com repo → wwwroot/css/s9-core.css
   copies in: EmailIQ-web/wwwroot/css/ , playeriq-site/css/
              (and each product site as it migrates)

   THIS FILE IS COPIED, NOT LINKED. Every product site holds its own copy, so
   copies drift unless someone is deliberate about it. The rules:

     · Edit the canonical copy only. Never patch a product site's copy in
       place — the next sync silently reverts it.
     · Bump the version above on every change, and copy the file to every
       site listed in "copies in" as part of the same commit.
     · If a version mismatch ever appears between two sites, the canonical
       one wins.

   A shared package or a CDN would enforce this properly. Until then the
   version line is the only thing standing between us and nine forks.
   ----------------------------------------------------------------------------
   This file is IDENTICAL on strategy9.com and on every product site.

   RULE: never put a brand color in this file. Not one hex.
   Anything brand-specific belongs in s9-brands.css and is referenced here
   only as var(--brand), var(--brand-ink), var(--brand-dark),
   var(--brand-bright) or var(--brand-light).

   Load order:  s9-brands.css  →  s9-core.css
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* --- Typefaces ------------------------------------------------------- */
  --font-display:'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-text:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  /* --- Type scale (fluid; clamp keeps mobile sane) ---------------------- */
  --fs-hero:clamp(34px,4.6vw,52px);
  --fs-h2:clamp(25px,2.8vw,33px);
  --fs-h3:21px;
  --fs-h4:17px;
  --fs-lede:16.5px;
  --fs-body:15px;
  --fs-sm:14.5px;
  --fs-xs:12.5px;
  --fs-kicker:12px;

  --lh-tight:1.15;
  --lh-body:1.6;
  --ls-display:-0.015em;
  --ls-kicker:.14em;

  /* --- Neutrals (shared by every brand) --------------------------------- */
  --ink:#14202b;        /* body copy, headings                             */
  --muted:#5b6b7a;      /* secondary copy, captions                        */
  --line:#dde5ec;       /* all 1px borders                                 */
  --bg:#f7fafc;         /* page ground                                     */
  --card:#ffffff;       /* raised surface                                  */
  --ink-invert:#ffffff;
  --device:#171d23;     /* phone bezel in interface vignettes              */
  --screen:#f2f4f6;     /* OS chrome behind an app (SMS ground, etc.)      */

  /* --- Semantic (shared; never re-branded) ------------------------------ */
  --green:#1e9e6a;      /* success, check marks, "delivered"               */
  --amber:#d97706;      /* warning, bottleneck, "waiting too long"         */
  --red:#c2402f;        /* error, destructive                              */

  /* --- Severity ramp (shared; never re-branded) -------------------------
     A five-step critical→clear scale. Deliberately semantic, not brand:
     "critical" must look the same on every Strategy9 property. Used by the
     EmailIQ Command Center threat levels; reusable anywhere a graded
     verdict is shown. Each step ships a fill, a tint and an accessible ink. */
  --sev1:#c2402f; --sev1-bg:#fdecea; --sev1-ink:#8f2a1d;  /* critical */
  --sev2:#dd6a33; --sev2-bg:#fdf0e8; --sev2-ink:#8a3d1c;  /* severe   */
  --sev3:#d97706; --sev3-bg:#fdf1e3; --sev3-ink:#7a4408;  /* elevated */
  --sev4:#a89217; --sev4-bg:#faf7e2; --sev4-ink:#5f520d;  /* guarded  */
  --sev5:#1e9e6a; --sev5-bg:#e8f7f0; --sev5-ink:#136945;  /* clear    */

  /* --- Space scale ------------------------------------------------------ */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:32px; --sp-7:44px; --sp-8:72px;

  /* --- Radii ------------------------------------------------------------ */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* --- Elevation (only two; resist adding a third) ---------------------- */
  --sh-card:0 1px 3px rgba(20,32,43,.05);
  --sh-lift:0 6px 20px rgba(20,32,43,.10);

  /* --- Layout ----------------------------------------------------------- */
  --wrap:1120px;
  --wrap-narrow:820px;
  --gutter:32px;
}

/* ------------------------------------------------------------- 2. ELEMENTS */
*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);
  font-weight:700;
}

h1{font-size:var(--fs-hero);}
h2{font-size:var(--fs-h2);margin-bottom:var(--sp-3);}
h3{font-size:var(--fs-h3);}
h4{font-size:var(--fs-h4);}

/* --------------------------------------------------------------- 3. LAYOUT */
.s9-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.s9-wrap--narrow{max-width:var(--wrap-narrow);}

.s9-section{padding:var(--sp-8) 0;}
.s9-section--alt{
  background:var(--card);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Two-column split used for spotlights and the security band */
.s9-cols2{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media(max-width:820px){.s9-cols2{grid-template-columns:1fr;gap:var(--sp-4);}}

/* Auto-filling product / feature grid */
.s9-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}

/* A grid item defaults to min-width:auto, which means its *intrinsic* width
   is its floor. Put a 1920px image in a 1fr column and that column refuses to
   shrink below 1920px — the text column collapses to a sliver and the page
   scrolls sideways. min-width:0 lets the track actually honour 1fr.
   This is the single most common CSS Grid trap; do not remove it. */
.s9-cols2 > *,
.s9-grid > *{min-width:0;}

/* Belt and braces: nothing in the system should ever overflow its container. */
.s9-cols2 img,
.s9-grid img{max-width:100%;height:auto;}

/* ----------------------------------------------------------- 4. TYPOGRAPHY */

/* The kicker. Every section opens with one. Brand-colored, uppercase. */
.s9-kicker{
  font-family:var(--font-text);
  font-size:var(--fs-kicker);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--ls-kicker);
  color:var(--brand-ink);
  margin-bottom:var(--sp-3);
}

/* The lede. One paragraph under every h2. Never more than ~45 words. */
.s9-lede{
  color:var(--muted);
  font-size:var(--fs-lede);
  max-width:720px;
  margin-bottom:34px;
}

/* Short brand rule used above spotlight headings */
.s9-rule{width:38px;height:3px;background:var(--brand-bright);border-radius:2px;margin-bottom:var(--sp-4);}

blockquote{
  border-left:3px solid var(--brand-bright);
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-5);
  font-family:var(--font-display);
  font-weight:400;
  font-size:18px;
  line-height:1.5;
  max-width:760px;
}
blockquote cite{
  display:block;font-style:normal;font-family:var(--font-text);
  font-size:13.5px;color:var(--muted);margin-top:var(--sp-3);font-weight:500;
}

/* --------------------------------------------------------------- 5. BUTTONS */
.s9-btn{
  display:inline-block;
  font-family:var(--font-text);
  font-weight:600;
  font-size:var(--fs-body);
  border-radius:var(--r-md);
  padding:13px 26px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.s9-btn--sm{padding:9px 18px;font-size:var(--fs-sm);}

.s9-btn--primary{background:var(--brand);color:var(--ink-invert);}
.s9-btn--primary:hover{background:var(--brand-dark);}

.s9-btn--secondary{background:transparent;color:var(--brand-ink);border-color:var(--line);}
.s9-btn--secondary:hover{border-color:var(--brand);background:var(--brand-light);}

/* On a brand-colored background only */
.s9-btn--onbrand{background:#fff;color:var(--brand-dark);}
.s9-btn--onbrand:hover{background:var(--brand-light);}
.s9-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.s9-btn--ghost:hover{background:rgba(255,255,255,.12);}

/* ----------------------------------------------------------------- 6. CARD */
.s9-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--sh-card);
  display:flex;
  flex-direction:column;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.s9-card:hover{border-color:var(--brand-bright);box-shadow:var(--sh-lift);}
.s9-card__mark{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);
  letter-spacing:-0.02em;margin-bottom:7px;
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
}
.s9-card p{font-size:var(--fs-sm);color:var(--muted);flex:1;}
.s9-card__go{margin-top:var(--sp-3);font-size:13.5px;font-weight:600;color:var(--brand-ink);}
.s9-card--muted{background:var(--bg);border-style:dashed;}
.s9-card--muted:hover{border-color:var(--line);box-shadow:var(--sh-card);}

/* Optional 4px brand keyline — used on the suite grid so each product
   is identifiable at a glance without eight competing icon colors. */
.s9-card--keyline{border-top:4px solid var(--brand);}

/* ------------------------------------------------------------ 6b. SPOTLIGHT */
/* A problem statement on the left, the proof points on the right.
   Scope it with data-brand so the rule and links take the product's color. */
.s9-spot{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:30px 32px;margin-bottom:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;
}
.s9-spot h3{margin-bottom:8px;}
.s9-spot p{font-size:var(--fs-body);color:var(--muted);}
@media(max-width:820px){.s9-spot{grid-template-columns:1fr;gap:22px;padding:26px;}}

/* ------------------------------------------------ 6c. INTERFACE VIGNETTES */
/* Product interface drawn in CSS rather than screenshotted. Costs no bytes,
   stays crisp at any DPI, and re-colors itself from data-brand — the same
   phone renders blue on Strategy9 and purple on Job Fair. Use these to show
   a flow; use a real screenshot when the job is to prove the app exists. */

.s9-phone{
  width:290px;max-width:100%;margin:0 auto;
  background:var(--device);border-radius:34px;padding:12px 10px;
  box-shadow:0 14px 34px rgba(20,32,43,.22);
}
.s9-phone__notch{
  width:104px;height:18px;background:var(--device);
  border-radius:0 0 14px 14px;margin:0 auto 4px;
}
.s9-phone__screen{
  background:#fff;border-radius:24px;overflow:hidden;
  min-height:390px;display:flex;flex-direction:column;
}

/* App header inside the phone */
.s9-appbar{background:var(--brand);color:#fff;padding:12px 15px 10px;font-size:14px;font-weight:600;}
.s9-appbar small{display:block;font-weight:400;opacity:.85;font-size:11px;margin-top:1px;}

/* --- SMS thread ---------------------------------------------------------- */
.s9-sms{background:var(--screen);flex:1;padding:14px 12px;}
.s9-bubble{
  max-width:84%;border-radius:16px;padding:9px 13px;
  font-size:13px;line-height:1.42;margin-bottom:9px;
}
.s9-bubble--them{background:#e2e7ec;color:var(--ink);border-bottom-left-radius:5px;}
.s9-bubble--me{background:var(--brand);color:#fff;margin-left:auto;border-bottom-right-radius:5px;}
.s9-bubble time{display:block;font-size:10px;opacity:.62;margin-top:4px;}

/* --- Message inbox ------------------------------------------------------- */
.s9-inbox{flex:1;background:#fff;}
.s9-inbox__row{padding:11px 14px;border-bottom:1px solid var(--line);border-left:3px solid transparent;}
.s9-inbox__row b{display:block;font-family:var(--font-display);font-size:13.5px;font-weight:700;}
.s9-inbox__row span{font-size:11.5px;color:var(--muted);}
.s9-inbox__meta{display:flex;justify-content:space-between;gap:var(--sp-2);margin-top:2px;}
.s9-inbox__row--unread{border-left-color:var(--brand);background:var(--brand-light);}

/* --- Node / flow diagram ------------------------------------------------- */
.s9-diagram{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);padding:20px;}
.s9-node{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;}
.s9-node b{display:block;font-family:var(--font-display);font-size:14px;font-weight:700;}
.s9-node span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
.s9-node--brand{border-color:var(--brand);background:var(--brand-light);}
.s9-conn{
  text-align:center;color:var(--brand-ink);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 0;
}

/* A real screenshot inside the phone frame. Use when the job is to prove the
   product exists; use the CSS vignettes above when the job is to show a flow. */
.s9-phone__shot{display:block;width:100%;height:auto;}
.s9-phone--shot .s9-phone__screen{min-height:0;background:var(--device);}

/* App store links */
.s9-stores{display:flex;gap:10px;flex-wrap:wrap;}
.s9-store{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border-radius:var(--r-md);
  padding:9px 16px;font-size:13.5px;font-weight:600;
}
.s9-store:hover{background:#000;}
.s9-store svg{width:17px;height:17px;flex-shrink:0;}

/* Grid of real screenshots in small device frames. Replaces the .piq-* rules
   that used to live in site.css and only ever served one page. */
.s9-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px;}
.s9-shot__frame{
  background:var(--device);border:1px solid rgba(255,255,255,.09);
  border-radius:22px;padding:10px 8px;box-shadow:0 20px 46px rgba(0,0,0,.5);
}
.s9-shot__frame img{
  display:block;width:100%;height:330px;
  object-fit:cover;object-position:top;border-radius:15px;
}
.s9-shot h4{margin-top:15px;font-size:15px;color:var(--brand-bright);}
.s9-shot p{font-size:13px;color:rgba(255,255,255,.62);margin-top:3px;line-height:1.5;}

/* A plain screenshot or photograph sitting in the flow of a page. */
.s9-figure{margin:0;}
.s9-figure img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-card);background:var(--card);
}
.s9-figure figcaption{
  font-size:var(--fs-xs);color:var(--muted);margin-top:10px;text-align:center;
}
/* Certification badge — constrained, because these assets are often huge. */
.s9-badge-img{display:block;height:96px;width:auto;}

/* Caption under any vignette */
.s9-caption{
  text-align:center;font-size:var(--fs-xs);color:var(--muted);
  margin:var(--sp-3) auto 0;max-width:300px;line-height:1.5;
}

/* Spotlight variant: copy + proof on the left, vignette on the right */
.s9-spot--visual{grid-template-columns:1fr 320px;}
@media(max-width:900px){.s9-spot--visual{grid-template-columns:1fr;}}

/* ------------------------------------------------------------------ 7. TAG */
.s9-tag{
  display:inline-block;font-family:var(--font-text);
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:3px 9px;
  background:var(--brand-light);color:var(--brand-ink);
}
.s9-tag--new{background:#e8f7f0;color:var(--green);}

/* ----------------------------------------------------------- 8. CHECK LIST */
.s9-checks{list-style:none;}
.s9-checks li{
  padding-left:26px;position:relative;margin-bottom:11px;
  font-size:var(--fs-sm);color:var(--muted);
}
.s9-checks li b{color:var(--ink);font-weight:600;}
.s9-checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:800;}

/* ----------------------------------------------------------- 9. STAT TILES */
.s9-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-4);}
.s9-tile{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px var(--sp-5);
}
.s9-tile b{
  font-family:var(--font-display);font-size:31px;font-weight:700;
  display:block;letter-spacing:-0.03em;color:var(--brand-dark);
}
.s9-tile span{font-size:var(--fs-xs);color:var(--muted);}

/* Translucent variant, for use inside a hero */
.s9-tile--onbrand{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);
  min-width:140px;padding:15px var(--sp-5);
}
.s9-tile--onbrand b{color:#fff;font-size:26px;letter-spacing:-0.02em;}
.s9-tile--onbrand span{color:rgba(255,255,255,.85);}

/* ------------------------------------------------------------- 9a2. TABLE */
/* Added v1.9.0 for the WiFiIQ security whitepaper, which had a .data-table of
   encryption standards with nowhere to live in the system. Any page with real
   tabular data should use this rather than inventing another one.

   The wrapper is not optional. A table cannot be made to shrink below the
   width of its widest cell, so on a phone a four-column table will push the
   whole page sideways. .s9-scroll gives it its own horizontal scroll and
   leaves the document alone — the same reasoning as the min-width:0 fix on
   grid children further up. */
.s9-table{
  width:100%;border-collapse:collapse;
  font-size:var(--fs-sm);
  background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
}
.s9-table th,
.s9-table td{
  text-align:left;padding:11px 15px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.s9-table thead th{
  background:var(--brand-light);
  color:var(--brand-dark);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}
.s9-table tbody tr:last-child td{border-bottom:0;}
.s9-table tbody tr:nth-child(even){background:var(--bg);}
.s9-table caption{
  caption-side:bottom;text-align:left;
  font-size:var(--fs-xs);color:var(--muted);padding-top:10px;
}

/* ------------------------------------------------------- 9b. RESULT BARS */
/* Horizontal percentage bars — the SurveyIQ live demo renders these from JS,
   so the markup contract lives in Views/Home/Index.cshtml @@section Scripts. */
.s9-bar{margin-bottom:10px;}
.s9-bar__track{
  position:relative;height:44px;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
}
.s9-bar__fill{
  position:absolute;top:0;bottom:0;left:0;width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-bright));
  opacity:.22;transition:width .9s cubic-bezier(.22,.61,.36,1);
}
.s9-bar__row{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-3);padding:0 14px;
}
.s9-bar__label{font-size:var(--fs-sm);font-weight:600;color:var(--ink);}
.s9-bar__pct{font-size:var(--fs-sm);font-weight:700;color:var(--brand-dark);}
.s9-bar--selected .s9-bar__track{
  border-color:var(--brand);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent);
}

.s9-note{
  background:var(--brand-light);border:1px solid var(--brand-bright);
  border-radius:var(--r-md);padding:14px 16px;margin-top:var(--sp-5);
  font-size:var(--fs-sm);color:var(--brand-dark);
}
.s9-loading{text-align:center;padding:28px 0;color:var(--muted);font-size:var(--fs-sm);}

/* ------------------------------------------------------- 10. BRANDED BANDS */

/* Hero — exactly one per page, always the first thing after the nav. */
.s9-hero{
  background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 55%,var(--brand-bright) 100%);
  color:#fff;padding:76px 0 68px;
}
.s9-hero .s9-kicker{color:rgba(255,255,255,.8);}
.s9-hero p{font-size:19px;margin-top:20px;max-width:660px;opacity:.93;line-height:1.55;}

/* Dark band — security / compliance. Never more than one per page. */
.s9-band-dark{background:var(--brand-dark);color:#fff;}
.s9-band-dark h2{color:#fff;}
.s9-band-dark .s9-kicker{color:var(--brand-bright);}
.s9-band-dark .s9-lede{color:rgba(255,255,255,.68);}
.s9-band-dark .s9-checks li{color:rgba(255,255,255,.78);}
.s9-band-dark .s9-checks li b{color:#fff;}
.s9-band-dark .s9-checks li::before{color:var(--brand-bright);}

/* Closing CTA panel — rounded, inset, always last before the footer. */
.s9-cta{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand) 70%,var(--brand-bright));
  color:#fff;border-radius:var(--r-xl);padding:46px 40px;text-align:center;margin:64px 0;
}
.s9-cta h2{color:#fff;}
.s9-cta p{opacity:.9;max-width:560px;margin:var(--sp-3) auto 0;font-size:var(--fs-lede);}

/* Pill badge for compliance marks on dark */
.s9-badge{
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);
  padding:5px 14px;font-size:var(--fs-xs);letter-spacing:.05em;color:rgba(255,255,255,.85);
}

/* --------------------------------------------------------------- 11. NAV */
.s9-nav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.s9-nav__in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px;}
.s9-nav__brand{display:flex;align-items:center;flex-shrink:0;}
.s9-nav__brand img{display:block;height:34px;width:auto;}

.s9-nav__links{display:flex;gap:28px;align-items:center;}
/* :not(.s9-btn) matters. "\.s9-nav__links > a" is (0,1,1) and would otherwise
   outrank ".s9-btn--primary" (0,1,0), repainting the CTA's white label slate. */
.s9-nav__links > a:not(.s9-btn){font-size:var(--fs-sm);color:#3d4d5c;font-weight:500;}
.s9-nav__links > a:not(.s9-btn):hover{color:var(--brand-ink);}

/* Products dropdown */
.s9-nav__dd{position:relative;}
.s9-nav__ddtrigger{
  display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font-family:var(--font-text);font-size:var(--fs-sm);font-weight:500;color:#3d4d5c;padding:0;
}
.s9-nav__ddtrigger:hover{color:var(--brand-ink);}
.s9-nav__ddpanel{
  position:absolute;top:calc(100% + 14px);left:-20px;width:320px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lift);padding:var(--sp-2);
}
/* hover bridge so the panel doesn't close in the gap under the trigger */
.s9-nav__dd::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px;}
.s9-nav__ddpanel a:not(.s9-btn){
  display:block;padding:9px 12px;border-radius:var(--r-sm);
  border-left:3px solid transparent;
}
.s9-nav__ddpanel a:not(.s9-btn):hover{background:var(--brand-light);border-left-color:var(--brand);}
.s9-nav__ddpanel b{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);
}
.s9-nav__ddpanel span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;}

/* Mobile */
.s9-nav__burger{display:none;background:none;border:0;cursor:pointer;color:#3d4d5c;padding:6px;}
.s9-nav__burgericon{height:24px;width:24px;}
.s9-nav__mobile{border-top:1px solid var(--line);background:var(--card);padding:var(--sp-4) 0 var(--sp-5);}
.s9-nav__mobile a:not(.s9-btn){display:block;padding:9px 0;font-size:var(--fs-lede);color:#3d4d5c;font-weight:500;}
.s9-nav__mobilehead{
  display:block;font-size:var(--fs-kicker);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ls-kicker);color:var(--muted);margin:var(--sp-3) 0 var(--sp-2);
}
.s9-nav__mobilehead:first-child{margin-top:0;}

@media(max-width:980px){
  .s9-nav__links{display:none;}
  .s9-nav__burger{display:block;}
}
@media(min-width:981px){
  .s9-nav__mobile{display:none !important;}
}

/* ----------------------------------------------------- 11a. CAMPAIGN CHROME */
/* Used by _G2eLayout for /g2e and /book. Deliberately minimal — a campaign
   page gives the visitor one thing to do, so there is no site navigation. */
.s9-campaign-bar{background:var(--card);border-bottom:1px solid var(--line);padding:14px 0;}
.s9-campaign-bar .s9-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
}
.s9-campaign-bar img{display:block;height:30px;width:auto;}
.s9-campaign-bar span{
  font-size:var(--fs-xs);color:var(--muted);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
.s9-campaign-foot{
  background:#0e1922;color:#8fa3b4;padding:32px 0;
  font-size:var(--fs-xs);text-align:center;
}
.s9-campaign-foot p + p{margin-top:8px;color:#6b7f8f;}
.s9-campaign-foot a{color:var(--brand-bright);}
.s9-campaign-foot a:hover{color:#fff;}

/* ------------------------------------------------------------ 11b. FOOTER */
.s9-footer{background:#0e1922;color:#8fa3b4;padding:56px 0 30px;font-size:var(--fs-sm);}
.s9-footer h5{
  font-family:var(--font-text);color:#fff;font-size:var(--fs-kicker);
  text-transform:uppercase;letter-spacing:var(--ls-kicker);margin-bottom:var(--sp-4);font-weight:700;
}
.s9-footer p{font-size:13.5px;line-height:1.6;}
.s9-footer ul{list-style:none;}
.s9-footer li{margin-bottom:9px;}
.s9-footer a:not(.s9-btn):hover{color:#fff;}
.s9-footer__logo{display:block;margin-bottom:var(--sp-3);filter:brightness(0) invert(1);opacity:.9;}
.s9-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:40px;}
@media(max-width:820px){.s9-footer__grid{grid-template-columns:1fr 1fr;gap:28px;}}
@media(max-width:520px){.s9-footer__grid{grid-template-columns:1fr;}}
.s9-footer__bottom{
  border-top:1px solid #1e2c38;padding-top:var(--sp-5);
  font-size:var(--fs-kicker);color:#6b7f8f;text-align:center;
}
.s9-footer__bottom p+p{margin-top:var(--sp-2);font-size:11px;}

/* --------------------------------------------------------------- 12. FORMS */
.s9-panel{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-card);
}
.s9-panel--onbrand{
  background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.5);
  backdrop-filter:blur(4px);box-shadow:0 18px 40px rgba(20,32,43,.18);
}

.s9-field{margin-bottom:var(--sp-4);}
.s9-field label{
  display:block;font-size:13px;font-weight:600;color:var(--ink);
  margin-bottom:6px;
}
.s9-input,.s9-textarea,.s9-select{
  width:100%;font-family:var(--font-text);font-size:var(--fs-body);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 14px;transition:border-color .15s ease,box-shadow .15s ease;
}
.s9-input:focus,.s9-textarea:focus,.s9-select:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);
}
.s9-textarea{resize:vertical;min-height:110px;}
.s9-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
@media(max-width:560px){.s9-field-row{grid-template-columns:1fr;}}

.s9-btn--block{display:block;width:100%;text-align:center;}
.s9-btn:disabled,.s9-btn[disabled]{opacity:.5;cursor:not-allowed;}

.s9-alert{border-radius:var(--r-md);padding:13px 16px;font-size:var(--fs-sm);margin-top:var(--sp-4);}
.s9-alert--ok{background:#e8f7f0;color:#136945;}
.s9-alert--err{background:#fdecea;color:#8f2a1d;}

/* Per-field validation message, shown under the input it belongs to. */
.s9-fielderr{font-size:var(--fs-xs);color:var(--red);margin-top:5px;}
.s9-input[aria-invalid="true"],
.s9-textarea[aria-invalid="true"]{border-color:var(--red);}

/* Inline button spinner. Replaces Bootstrap's .spinner-border. */
.s9-spinner{
  display:inline-block;width:14px;height:14px;margin-right:8px;
  vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:s9-spin .65s linear infinite;
}
@keyframes s9-spin{to{transform:rotate(360deg);}}

/* --------------------------------------------------------- 11b2. SEVERITY */
/* A graded scale — each row carries its own severity color from the shared
   --sev* ramp. The color is the information, so it does not re-brand. */
.s9-levels{display:grid;gap:10px;}
.s9-level{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:start;
  background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--sev);
  border-radius:var(--r-md);padding:16px 18px;
  transition:box-shadow .15s ease,transform .15s ease;
}
.s9-level:hover{box-shadow:var(--sh-lift);transform:translateX(2px);}
.s9-level__tag{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--sev-bg);color:var(--sev-ink);
  border-radius:var(--r-pill);padding:6px 13px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.s9-level__tag::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--sev);flex-shrink:0;
}
.s9-level__n{
  font-family:var(--font-display);font-weight:700;font-size:12px;
  color:var(--sev-ink);opacity:.75;
}
.s9-level p{font-size:var(--fs-sm);color:var(--muted);}
.s9-level b{color:var(--ink);}
.s9-level--1{--sev:var(--sev1);--sev-bg:var(--sev1-bg);--sev-ink:var(--sev1-ink);}
.s9-level--2{--sev:var(--sev2);--sev-bg:var(--sev2-bg);--sev-ink:var(--sev2-ink);}
.s9-level--3{--sev:var(--sev3);--sev-bg:var(--sev3-bg);--sev-ink:var(--sev3-ink);}
.s9-level--4{--sev:var(--sev4);--sev-bg:var(--sev4-bg);--sev-ink:var(--sev4-ink);}
.s9-level--5{--sev:var(--sev5);--sev-bg:var(--sev5-bg);--sev-ink:var(--sev5-ink);}
@media(max-width:560px){
  .s9-level{grid-template-columns:1fr;gap:10px;}
}

/* Live indicator — a quietly pulsing dot for "monitoring right now". */
.s9-live{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green);
}
.s9-live::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);
  animation:s9-pulse 2s ease-out infinite;
}
@keyframes s9-pulse{
  70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--green) 0%,transparent);}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 0%,transparent);}
}

/* Card with the brand as a solid fill — for one emphasis card in a grid. */
.s9-card--filled{
  background:linear-gradient(150deg,var(--brand-dark),var(--brand));
  border-color:transparent;color:#fff;
}
.s9-card--filled .s9-card__mark{color:#fff;}
.s9-card--filled p{color:rgba(255,255,255,.82);}
.s9-card--filled .s9-card__go{color:var(--brand-bright);}
.s9-card--filled:hover{border-color:transparent;box-shadow:var(--sh-lift);}

/* ---------------------------------------------------- 11b3. REGULATION CITE */
/* A statute or rule reference sitting beside a feature. Monospace and quiet
   on purpose: it is evidence, not decoration. Built for WAC 230 citations on
   the PlayerIQ card room pages; reusable for any regulated claim. */
.s9-cite{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.02em;
  color:var(--brand-ink);background:var(--brand-light);
  border-radius:var(--r-sm);padding:2px 7px;white-space:nowrap;
}
.s9-band-dark .s9-cite{
  color:var(--brand-bright);background:rgba(255,255,255,.08);
}

/* A feature row that carries a citation. */
.s9-reg{
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-3) var(--sp-4);
  align-items:start;padding:13px 0;border-bottom:1px solid var(--line);
}
.s9-reg:last-child{border-bottom:0;}
.s9-reg b{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--ink);}
.s9-reg p{font-size:13.5px;color:var(--muted);margin-top:2px;}
.s9-band-dark .s9-reg{border-bottom-color:rgba(255,255,255,.1);}
.s9-band-dark .s9-reg b{color:#fff;}
.s9-band-dark .s9-reg p{color:rgba(255,255,255,.7);}
@media(max-width:560px){
  .s9-reg{grid-template-columns:1fr;}
}

/* ------------------------------------------------------- 11c. VERDICT CARD */
/* A card whose top border carries a judgement. The color is semantic, so it
   uses --red/--amber/--green and never a brand color: "prohibited" must mean
   the same thing on every site. Used by the platform policy guide. */
.s9-vcard{
  background:var(--card);border:1px solid var(--line);border-top:4px solid var(--muted);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-card);
}
.s9-vcard + .s9-vcard{margin-top:14px;}
.s9-vcard--no{border-top-color:var(--red);}
.s9-vcard--maybe{border-top-color:var(--amber);}
.s9-vcard--yes{border-top-color:var(--green);}
.s9-vcard__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;margin-bottom:10px;
}
.s9-vcard__head h3{font-size:19px;}
.s9-vcard__date{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;}
.s9-vcard p{font-size:var(--fs-sm);color:var(--muted);}
.s9-vcard p + p,.s9-vcard p + a{margin-top:10px;}
.s9-vcard a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px;}
.s9-vcard__more{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:600;text-decoration:none;}

/* Callout — a disclosure or aside inside prose */
.s9-callout{
  background:var(--brand-light);border-left:4px solid var(--brand);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 18px;
  font-size:var(--fs-sm);color:var(--ink);
}
.s9-callout a{color:var(--brand-ink);}

.s9-fineprint{font-size:var(--fs-xs);color:var(--muted);line-height:1.6;}

/* -------------------------------------------------------- 12a. FAQ / STEPS */
.s9-faq{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);overflow:hidden;
}
.s9-faq + .s9-faq{margin-top:10px;}
.s9-faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  text-align:left;background:none;border:0;cursor:pointer;padding:16px 20px;
  font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);
}
.s9-faq__q:hover{background:var(--brand-light);}
.s9-faq__q svg{flex-shrink:0;color:var(--brand);transition:transform .2s ease;}
.s9-faq__a{padding:0 20px 18px;font-size:var(--fs-sm);color:var(--muted);}

/* Numbered steps */
.s9-steps{counter-reset:s9step;}
.s9-step{display:flex;gap:var(--sp-5);align-items:flex-start;}
.s9-step + .s9-step{margin-top:var(--sp-6);}
.s9-step__n{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:15px;
}
.s9-step h3{font-size:var(--fs-h4);margin-bottom:4px;}
.s9-step p{font-size:var(--fs-sm);color:var(--muted);}

/* ---------------------------------------------------- 12b. PAGE HEAD/PROSE */
/* Compact header for pages that don't warrant a full hero — legal, policy,
   support. Same gradient family, a third of the height. */
.s9-pagehead{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand) 80%);
  color:#fff;padding:44px 0 40px;
}
.s9-pagehead h1{font-size:clamp(27px,3.2vw,38px);}
.s9-pagehead p{opacity:.85;margin-top:10px;max-width:640px;font-size:var(--fs-lede);}
.s9-pagehead .s9-kicker{color:rgba(255,255,255,.75);}

/* Long-form text. Styles bare elements so legal copy needs no classes at all —
   which matters, because the safest migration of a policy page is to strip the
   markup classes and leave every word untouched. */
.s9-prose{max-width:760px;}
.s9-prose > * + *{margin-top:var(--sp-4);}
.s9-prose h2{
  font-size:23px;margin-top:var(--sp-7);margin-bottom:0;
  padding-top:var(--sp-5);border-top:1px solid var(--line);
}
.s9-prose h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.s9-prose h3{font-size:17px;margin-top:var(--sp-5);}
.s9-prose h4{font-size:15px;margin-top:var(--sp-4);}
.s9-prose p,.s9-prose li{color:var(--muted);}
.s9-prose a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px;}
.s9-prose a:hover{color:var(--brand-dark);}
.s9-prose ul,.s9-prose ol{padding-left:22px;}
.s9-prose li{margin-bottom:7px;}
.s9-prose li::marker{color:var(--brand-bright);}
.s9-prose strong,.s9-prose b{color:var(--ink);font-weight:600;}
.s9-prose table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.s9-prose th,.s9-prose td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;
}
.s9-prose th{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:700;
}
.s9-prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 6px;
}
.s9-prose hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0;}
.s9-prose blockquote{margin-left:0;}

/* Wide tables must scroll inside themselves, never the page */
.s9-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Date stamp on policy pages */
.s9-updated{
  font-size:var(--fs-xs);color:var(--muted);
  padding:10px 14px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-md);display:inline-block;
}

/* ------------------------------------------------------------ 12c. CAROUSEL */
/* The /g2e pain-point carousel. The inner class names (pain-slide, dot,
   progress-bar, active, prev) are NOT design-system names — they are the
   contract with the inline showSlide() script in Views/G2e/Index.cshtml,
   which finds them with getElementsByClassName. They are scoped under
   .s9-carousel so they cannot leak into the global namespace, and renaming
   any of them means editing that script in the same commit. */
.s9-carousel{position:relative;}
.s9-carousel__track{
  position:relative;min-height:230px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-card);overflow:hidden;
}
.s9-carousel .pain-slide{
  position:absolute;inset:0;padding:30px 32px;
  display:flex;gap:var(--sp-5);align-items:flex-start;
  opacity:0;transform:translateX(28px);pointer-events:none;
  transition:opacity .4s ease,transform .4s ease;
}
.s9-carousel .pain-slide.active{opacity:1;transform:none;pointer-events:auto;}
.s9-carousel .pain-slide.prev{transform:translateX(-28px);}
.s9-carousel .pain-number{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:17px;
}
.s9-carousel .pain-title{font-size:var(--fs-h3);margin-bottom:12px;}
.s9-carousel .pain-problem,
.s9-carousel .pain-solution{font-size:var(--fs-sm);color:var(--muted);margin-bottom:8px;}
.s9-carousel .pain-problem strong{color:var(--amber);}
.s9-carousel .pain-solution strong{color:var(--green);}

.s9-carousel__controls{
  display:flex;align-items:center;justify-content:center;
  gap:var(--sp-4);margin-top:var(--sp-4);
}
.s9-carousel__btn{
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:var(--card);border:1px solid var(--line);color:var(--brand-ink);
  font-size:20px;line-height:1;
}
.s9-carousel__btn:hover{background:var(--brand-light);border-color:var(--brand);}
.s9-carousel .carousel-dots{display:flex;gap:7px;}
.s9-carousel .dot{
  width:8px;height:8px;border-radius:50%;background:var(--line);
  cursor:pointer;transition:background .2s ease,transform .2s ease;
}
.s9-carousel .dot.active{background:var(--brand);transform:scale(1.35);}
.s9-carousel__progress{
  height:3px;background:var(--line);border-radius:2px;
  margin-top:var(--sp-4);overflow:hidden;
}
.s9-carousel .progress-bar{
  height:100%;width:10%;background:var(--brand);
  border-radius:2px;transition:width .4s ease;
}
@media(max-width:640px){
  .s9-carousel__track{min-height:300px;}
  .s9-carousel .pain-slide{padding:22px;flex-direction:column;gap:var(--sp-3);}
}

/* -------------------------------------------------------- 12d. TIMELINE */
.s9-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.s9-timeline__item{
  background:var(--card);border:1px solid var(--line);border-top:4px solid var(--brand);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-card);
}
.s9-timeline__period{
  font-family:var(--font-display);font-size:38px;font-weight:700;
  color:var(--brand-dark);line-height:1;letter-spacing:-0.03em;
}
.s9-timeline__title{
  font-family:var(--font-display);font-weight:700;font-size:15px;
  margin:4px 0 14px;color:var(--ink);
}

/* ---------------------------------------------------------- 12e. MODAL */
.s9-modal{
  position:fixed;inset:0;z-index:2000;padding:20px;
  background:rgba(14,25,34,.78);
  display:flex;align-items:center;justify-content:center;
}
.s9-modal__panel{
  background:var(--card);border-radius:var(--r-xl);
  max-width:520px;width:100%;max-height:90vh;overflow-y:auto;
  position:relative;box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.s9-modal__head{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  color:#fff;padding:26px 30px;border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.s9-modal__head h2{color:#fff;font-size:22px;}
.s9-modal__head p{opacity:.88;margin-top:6px;font-size:var(--fs-sm);}
.s9-modal__body{padding:26px 30px 30px;}
.s9-modal__close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);border:0;cursor:pointer;font-size:17px;line-height:1;
  color:var(--ink);display:flex;align-items:center;justify-content:center;
}
.s9-modal__close:hover{background:#fff;}

/* ------------------------------------------------------- 12f. CAMPAIGN BITS */
.s9-banner{
  background:var(--amber);color:#fff;text-align:center;
  padding:11px 20px;font-size:var(--fs-sm);font-weight:600;
}
.s9-eyebrow{
  display:inline-block;background:var(--brand-light);color:var(--brand-ink);
  border-radius:var(--r-pill);padding:5px 15px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.s9-metric{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 22px;text-align:center;box-shadow:var(--sh-card);
}
.s9-metric b{
  display:block;font-family:var(--font-display);font-size:36px;font-weight:700;
  color:var(--brand-dark);letter-spacing:-0.03em;line-height:1;
}
.s9-metric span{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:8px;}

/* ------------------------------------------------------------ 12g. BOOKING */
/* /book. As with the carousel, the inner names (day-chip, slot-btn, active,
   picked, show) are the contract with the inline script in Views/Book/Index —
   it creates these elements with document.createElement and toggles these
   exact classes. Scoped under .s9-booking so they stay out of the global
   namespace. Renaming one means editing that script in the same commit. */
.s9-booking label{
  display:block;font-size:13px;font-weight:600;color:var(--ink);
  margin:var(--sp-4) 0 6px;
}
.s9-booking input[type=text],
.s9-booking input[type=email],
.s9-booking input[type=tel],
.s9-booking textarea{
  width:100%;font-family:var(--font-text);font-size:var(--fs-body);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;
}
.s9-booking input:focus,.s9-booking textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);
}
.s9-booking textarea{resize:vertical;min-height:88px;}

.s9-booking .choices{display:grid;gap:8px;margin-top:4px;}
.s9-booking .choices label{
  display:flex;align-items:flex-start;gap:9px;margin:0;font-weight:500;
  font-size:var(--fs-sm);color:var(--muted);cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;
}
.s9-booking .choices label:hover{border-color:var(--brand);background:var(--brand-light);}
.s9-booking .choices input{margin-top:2px;accent-color:var(--brand);}
.s9-booking .products-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
.s9-booking .product-note{display:block;font-size:11.5px;color:var(--muted);opacity:.8;}

.s9-booking .days,.s9-booking .slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.s9-booking .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));}
.s9-booking .day-chip,.s9-booking .slot-btn{
  font-family:var(--font-text);font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-md);padding:10px 15px;transition:all .15s ease;
}
.s9-booking .day-chip:hover:not(.active),
.s9-booking .slot-btn:hover:not(:disabled):not(.picked){border-color:var(--brand);background:var(--brand-light);}
.s9-booking .day-chip.active,.s9-booking .slot-btn.picked{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.s9-booking .slot-btn:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through;}

.s9-booking .status{font-size:var(--fs-xs);color:var(--muted);margin:2px 0 6px;}
.s9-booking .fine{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-4);text-align:center;}
.s9-booking .fine a{color:var(--brand-ink);}
.s9-booking .err{display:none;margin-top:var(--sp-3);}
.s9-booking .err.show{
  display:block;background:#fdecea;color:#8f2a1d;
  border-radius:var(--r-md);padding:12px 15px;font-size:var(--fs-sm);
}
.s9-booking .thanks{
  display:none;margin-top:var(--sp-4);background:#e8f7f0;color:#136945;
  border-radius:var(--r-md);padding:14px 16px;font-size:var(--fs-sm);
}
.s9-booking .thanks a{color:#0d5335;font-weight:600;}

/* -------------------------------------------------------------- 12h. ADMIN */
/* /g2e/admin. Internal tooling, so it is deliberately plainer than the public
   pages. Use alongside .s9-booking, which supplies the label/input styling.
   admin-row/field/check/table are the contract with the inline admin script. */
.s9-admin .admin-row{
  display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--sp-3);
}
.s9-admin .admin-field{flex:1 1 150px;min-width:130px;}
.s9-admin .admin-field label{margin-top:0;}
.s9-admin .admin-field input{
  width:100%;font-family:var(--font-text);font-size:var(--fs-sm);
  border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px;background:#fff;
}
.s9-admin .admin-check{
  display:flex;align-items:center;gap:8px;margin:0 0 1px;
  font-size:var(--fs-sm);font-weight:500;color:var(--muted);white-space:nowrap;
}
.s9-admin .admin-check input{accent-color:var(--brand);}
.s9-admin .admin-row .s9-btn{flex:0 0 auto;}

.s9-admin .admin-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:var(--sp-4);}
.s9-admin .admin-table th{
  text-align:left;padding:9px 11px;border-bottom:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;
}
.s9-admin .admin-table td{
  padding:10px 11px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink);
}
.s9-admin .admin-table tr:hover td{background:var(--bg);}
.s9-admin h2{font-size:var(--fs-h3);margin-bottom:var(--sp-4);}

/* --------------------------------------------------- 12i. NATIVE ACCORDION */
/* details/summary, not a JS accordion. No library, keyboard accessible for
   free, and the content is in the DOM for crawlers even when collapsed —
   which is why the Bootstrap collapse accordions on EmailIQ became these. */
.s9-details{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);overflow:hidden;
}
.s9-details + .s9-details{margin-top:10px;}
.s9-details > summary{
  list-style:none;cursor:pointer;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);
}
.s9-details > summary::-webkit-details-marker{display:none;}
/* A heading may sit inside the summary so the document outline survives the
   conversion from a Bootstrap accordion. It inherits the summary's type. */
.s9-details > summary > :where(h2,h3,h4){font:inherit;letter-spacing:inherit;margin:0;}
.s9-details > summary:hover{background:var(--brand-light);}
.s9-details > summary::after{
  content:"";flex-shrink:0;width:9px;height:9px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);margin-top:-4px;transition:transform .2s ease;
}
.s9-details[open] > summary::after{transform:rotate(-135deg);margin-top:2px;}
.s9-details__body{padding:0 20px 18px;font-size:var(--fs-sm);color:var(--muted);}
.s9-details__body > * + *{margin-top:var(--sp-3);}

/* ------------------------------------------------------ 12j. NATIVE DIALOG */
/* <dialog> + showModal(). The browser supplies the backdrop, focus trap,
   Esc-to-close and inertness that a Bootstrap modal needed JS for. */
.s9-dialog{
  border:0;padding:0;max-width:520px;width:calc(100% - 40px);
  border-radius:var(--r-xl);background:var(--card);color:var(--ink);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.s9-dialog::backdrop{background:rgba(14,25,34,.72);backdrop-filter:blur(2px);}
.s9-dialog__head{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  color:#fff;padding:24px 28px;position:relative;
}
.s9-dialog__head h2{color:#fff;font-size:21px;}
.s9-dialog__head p{opacity:.88;margin-top:6px;font-size:var(--fs-sm);}
.s9-dialog__body{padding:24px 28px 28px;}
.s9-dialog__close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);border:0;cursor:pointer;
  font-size:17px;line-height:1;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.s9-dialog__close:hover{background:#fff;}
@media(max-width:560px){
  .s9-dialog{max-height:92vh;overflow-y:auto;}
}

/* ------------------------------------------------------------ 13. A11Y/MISC */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--brand-bright);outline-offset:2px;border-radius:var(--r-sm);
}
/* Scroll-reveal. site.js adds .animate-on-scroll, then .animated when the
   element enters the viewport. Guarded so that if the JS never runs the
   content is visible rather than permanently invisible. */
.animate-on-scroll{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.animate-on-scroll.animated{opacity:1;transform:none;}

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