/* ===========================================================================
   Self-hosted fonts
   ---------------------------------------------------------------------------
   These faces used to come from fonts.googleapis.com / fonts.gstatic.com.
   They are served from this origin instead, for three reasons:

     1. Privacy. Google received every visitor's IP address. It is not
        tracking, but it is the only third party the site talked to, and it is
        the first thing a school district's privacy review flags.
     2. Security. It was the only reason the CSP had to allow external style
        and font origins. Removing it lets the policy tighten to 'self'.
     3. Speed. No DNS lookup, TCP connect and TLS handshake to two extra
        origins before the first glyph can render.

   Latin and latin-ext only — Cyrillic, Greek, Devanagari and Vietnamese were
   dropped, which is most of the payload. If the site is ever translated,
   re-run the subset rather than assuming these cover it.

   To refresh: fetch the Google CSS with a modern browser User-Agent, keep the
   latin blocks, download the woff2 files into assets/fonts/, and rewrite the
   URLs. IBM Plex Sans arrives as a variable font, so two files cover 400-600.
   =========================================================================== */

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibmplexsans-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibmplexsans-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibmplexsans-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibmplexsans-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibmplexsans-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibmplexsans-zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Nice Technologies, Inc. — site stylesheet
   Innovate. Connect. Elevate.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Brand colours sampled directly from the master logo artwork
     (brand/logo/nice-logo-full.png) and the supplied brand sheet, so the
     site matches the identity exactly rather than approximating it.
     ------------------------------------------------------------------ */

  --violet:        #9E54C5;  /* sampled: the dot and the divider rule       */
  --violet-brand:  #A259D1;  /* brand sheet primary — reference, decoration  */
  --violet-text:   #8E44C4;  /* small text / links on white  (5.6:1 AA)     */
  --violet-mid:    #763FAA;  /* sampled: mid letter gradient — reference     */
  --violet-deep:   #3D287B;  /* sampled: deep end of the letter gradient    */
  --violet-navy:   #0D1642;  /* sampled: darkest end of the logo gradient   */
  --violet-soft:   #C79BF0;  /* light accent on dark surfaces  (8.4:1 AA)   */

  --ink:           #0D1120;  /* brand sheet */
  --ink-2:         #161A2B;  /* brand sheet */

  --paper:         #FFFFFF;  /* brand sheet */
  --haze:          #F2F3F7;  /* brand sheet */

  --text:          #161A2B;
  --text-muted:    #4A4F66;
  --text-faint:    #5F6478;  /* was #6B7089 — only 4.40:1 on --haze, failed AA */

  --line:          rgba(22, 26, 43, .12);
  --line-strong:   rgba(22, 26, 43, .20);
  --line-dark:     rgba(255, 255, 255, .14);

  /* Follows the logo's own sweep: deep violet up into the brand purple. */
  --grad-violet:   linear-gradient(100deg, #6F32A6, #9E54C5);
  --grad-deep:     linear-gradient(115deg, #0D1120 0%, #3D287B 55%, #8E44C4 100%);

  /* Type */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Layout */
  --wrap:    1200px;
  --gutter:  clamp(20px, 4vw, 48px);
  --section: clamp(64px, 8vw, 112px);
  --radius:  14px;

  --shadow-md: 0 16px 40px rgba(13, 17, 32, .10);
  --shadow-lg: 0 30px 70px rgba(13, 17, 32, .18);
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--violet-text); text-decoration: none; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.05; }
h2 { font-size: clamp(29px, 3.4vw, 44px); }
h3 { font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -.015em; }
h4 { font-size: 17px; letter-spacing: -.01em; }

p { margin: 0; text-wrap: pretty; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------ helpers --- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.stack { display: flex; flex-direction: column; }
.gap-8  { gap: 8px; }  .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-22 { gap: 22px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.center { text-align: center; }
.measure { max-width: 34em; }
.measure-narrow { max-width: 28em; }
.mx-auto { margin-inline: auto; }
.mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--violet-text);  /* --violet is 4.18:1 on --haze; eyebrows are 12px, so AA needs 4.5 */
  margin: 0;
}
.eyebrow--light { color: var(--violet-soft); }

.lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; color: var(--text-muted); }
.lede--light { color: rgba(255, 255, 255, .74); }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Four tiles. auto-fit gave 3+1 around 900px, which reads as a dropped item
   rather than a reflow. Go 4 -> 2 -> 1; never three. */
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .grid--4 { grid-template-columns: 1fr; } }

/* Nine modules. Any two-column layout leaves one stranded on a fifth row,
   so hold three columns as long as they stay legible, then stack. */
.grid--modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .grid--modules { grid-template-columns: 1fr; } }

/* Three short stats inside the narrow half of a split. They always fit
   across; auto-fit was breaking them 2+1 whenever the column tightened. */
.grid--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A numbered sequence must never orphan its last step on a row of its own.
   auto-fit gave 2+1 between roughly 700 and 940px, which reads as broken
   when the steps are labelled 01, 02, 03. Three across, or stacked. */
.grid--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) {
  .grid--steps { grid-template-columns: 1fr; gap: 26px; }
  .grid--steps p { max-width: 62ch; }
}
.grid--split { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(36px, 5vw, 64px); align-items: center; }

.dark { background: var(--ink); color: #fff; }
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }
.dark a { color: var(--violet-soft); }
.dark a:hover { color: #fff; }
.haze { background: var(--haze); border-block: 1px solid var(--line); }

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 10px;
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  text-align: center;
}
.btn--primary { background: var(--grad-violet); color: #fff; box-shadow: 0 12px 28px rgba(158, 84, 197, .28); }
.btn--primary:hover { background: linear-gradient(100deg, var(--violet-navy), var(--violet-text)); color: #fff; }
.btn--ghost { border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--violet); color: var(--violet); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--violet-soft); color: var(--ink); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .32); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------------------------------------- header --- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 20px;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo img { height: 48px; width: auto; display: block; }
.logo__name {
  display: none;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  line-height: 1.25; color: var(--text); letter-spacing: -.01em;
  border-left: 1px solid var(--line-strong); padding-left: 12px;
}
.logo__name span { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 9px; letter-spacing: .18em; color: var(--text-faint); }
@media (min-width: 560px) { .logo__name { display: block; } }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  background: none; border: 1px solid var(--line-strong); border-radius: 8px;
  font-family: var(--font-body); font-size: 14px; color: var(--text); cursor: pointer;
}
.nav-toggle__bars { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -5px; } .nav-toggle__bars::after { top: 5px; }

.site-nav { display: flex; align-items: center; gap: 4px 26px; margin-left: auto; }
.site-nav a { color: var(--text); font-size: 15px; padding: 10px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--violet); }
.site-nav a[aria-current="page"] { font-weight: 500; }
.site-nav .btn { color: #fff; }

@media (max-width: 899px) {
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px; box-shadow: var(--shadow-md);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 16px; border-bottom: none; }
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* --------------------------------------------------------------- hero --- */

.hero {
  background: linear-gradient(165deg, #FFFFFF 0%, #F6F2FB 46%, #EDE4F7 100%);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.hero__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(52px, 7vw, 96px) var(--gutter) clamp(52px, 6vw, 84px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 5vw, 64px); align-items: center;
}
.hero__title span { display: block; }
.hero__title .v { color: var(--violet); }
.hero__title .i { color: var(--ink); }

.page-hero {
  background: linear-gradient(165deg, #FFFFFF 0%, #F6F2FB 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 80px);
}

/* -------------------------------------------------------------- cards --- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--violet); box-shadow: var(--shadow-md); }
.card p { font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.card--flat:hover { border-color: var(--line); box-shadow: none; }

.card--dark { background: rgba(255, 255, 255, .05); border-color: var(--line-dark); }
.card--dark p { color: rgba(255, 255, 255, .70); }
.card--dark:hover { border-color: var(--violet-soft); box-shadow: none; }

.icon-tile {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--grad-violet);
  display: grid; place-items: center; color: #fff; flex: none;
}
.icon-tile svg { width: 21px; height: 21px; display: block; }
.icon-tile--outline { background: none; border: 1px solid var(--violet-soft); color: var(--violet); }
.icon-tile--dark { background: rgba(199, 155, 240, .16); color: var(--violet-soft); border: 1px solid rgba(199, 155, 240, .38); }

.numbered {
  /* .card sets a white background, a border, a radius and 28px of padding.
     A numbered step is a column with a rule on top, not a card — so all four
     are reset. The background especially: white on --haze rendered as a slab
     with the text flush to its edge. */
  background: transparent;
  border: none; border-top: 2px solid var(--violet); border-radius: 0;
  padding: 22px 0 0;
}
.numbered:hover { box-shadow: none; }
.numbered__n { font-family: var(--font-mono); font-size: 12px; color: var(--violet); }

/* --------------------------------------------------------------- role --- */

.role {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
  background: var(--paper);
}
.role__tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--violet);
  border: 1px solid rgba(158, 84, 197, .3); border-radius: 999px;
  padding: 4px 10px; align-self: flex-start;
}
.role ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.75; color: var(--text-muted); }
.role ul li::marker { color: var(--violet-soft); }

/* --------------------------------------------------------------- misc --- */

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__n { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 32px); color: var(--violet); line-height: 1.1; }
.stat__l { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.dark .stat__n { color: var(--violet-soft); }
.dark .stat__l { color: rgba(255, 255, 255, .6); }

.checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.65; color: var(--text-muted); }
.checklist svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--violet); }
.dark .checklist li { color: rgba(255, 255, 255, .74); }
.dark .checklist svg { color: var(--violet-soft); }

.divider { border: none; border-top: 1px solid var(--line); margin: 0; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; color: var(--text-muted);
}
.dark .pill { border-color: var(--line-dark); color: rgba(255, 255, 255, .66); }

/* ------------------------------------------------------------- tables --- */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); background: var(--haze); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
td strong { font-weight: 600; color: var(--text); }

/* ------------------------------------------------------------ pricing --- */

.plan {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  padding: 30px; display: flex; flex-direction: column; gap: 18px;
}
.plan--featured { border-color: var(--violet); box-shadow: var(--shadow-md); position: relative; }
.plan__badge {
  position: absolute; top: -12px; left: 30px;
  background: var(--grad-violet); color: #fff; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 12px;
}
.plan__price { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; color: var(--text); }
.plan__price small { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--text-faint); display: block; margin-top: 8px; letter-spacing: 0; }
.plan__price--quote { font-size: 27px; letter-spacing: -0.01em; }
.plan .checklist { flex: 1; }

/* --------------------------------------------------------------- form --- */

.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 14px; font-weight: 500; color: var(--text); }
.field .hint { font-size: 13px; color: var(--text-faint); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--text);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 13px 14px; min-height: 50px; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(158, 84, 197, .35); outline-offset: 1px; border-color: var(--violet); }
.field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.field--check input { width: 18px; min-height: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--violet); }
.field--check label { font-weight: 400; font-size: 14px; color: var(--text-muted); }
.form__note { font-size: 13px; color: var(--text-faint); }
.form-status { font-size: 14.5px; border-radius: 9px; padding: 12px 14px; display: none; }
.form-status[data-state="ok"] { display: block; background: rgba(158, 84, 197, .09); border: 1px solid rgba(158, 84, 197, .3); color: var(--violet-deep); }
.form-status[data-state="error"] { display: block; background: #FDF0F0; border: 1px solid #E7B7B7; color: #8A2B2B; }

/* ----------------------------------------------------------- dash art --- */

.dash {
  background: var(--ink-2); border: 1px solid rgba(199, 155, 240, .24); border-radius: 16px;
  padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg);
}
.dash__bar { display: flex; align-items: center; gap: 10px; }
.dash__bar img { height: 24px; width: auto; }
.dash__search { flex: 1; min-width: 80px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.06); }
.dash__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--grad-violet); flex: none; }
.dash__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.dash__tile { background: rgba(255,255,255,.05); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.dash__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.dash__value { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: #fff; line-height: 1; }
.dash__delta { font-size: 12px; color: var(--violet-soft); }
.dash__track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.dash__fill { height: 100%; background: linear-gradient(90deg, #7A38B4, #A259D1); border-radius: 3px; }
.dash__spark { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.dash__spark i { flex: 1; background: rgba(162,123,232,.5); border-radius: 2px; display: block; }
.dash__spark i:nth-child(4) { background: #A259D1; }
.dash__spark i:last-child { background: #9E54C5; }
.dash__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dash__row span:first-child { flex: 1 1 130px; font-size: 13px; color: #fff; }
.dash__row .dash__track { flex: 2 1 120px; }
.dash__row span:last-child { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.6); }

/* ---------------------------------------------------------------- cta --- */

.cta-band {
  position: relative; overflow: hidden; border-radius: 20px;
  background: var(--grad-deep); color: #fff;
  padding: clamp(38px, 6vw, 68px) clamp(26px, 5vw, 60px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px; align-items: center;
}
.cta-band h2 { color: #fff; }

/* ------------------------------------------------------------- footer --- */

.site-footer { background: var(--ink); color: rgba(255, 255, 255, .72); }
.site-footer__top {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 6vw, 72px) var(--gutter) 34px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 36px;
}

/* The brand column carries a logo, the company name, a description and the
   tagline; the link columns carry a heading and four short links. Equal
   widths made the tagline wrap onto two lines, which reads as a mistake. */
@media (min-width: 900px) {
  .site-footer__top { grid-template-columns: 1.45fr 1fr 1fr 1fr 1fr; }
}
.site-footer img.logo-mark { width: 100%; max-width: 178px; height: auto; display: block; }
.site-footer h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 4px;
}
.site-footer a { display: block; color: rgba(255, 255, 255, .72); font-size: 15px; padding: 5px 0; }
.site-footer a:hover { color: var(--violet-soft); }
.site-footer__col { display: flex; flex-direction: column; }
.site-footer__meta {
  max-width: var(--wrap); margin: 0 auto;
  padding: 18px var(--gutter) 40px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13px; color: rgba(255, 255, 255, .52);
}
.site-footer__meta nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.site-footer__meta a { color: rgba(255, 255, 255, .52); font-size: 13px; padding: 0; display: inline; }
.tagline { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; text-transform: uppercase; color: var(--violet-soft); }

/* -------------------------------------------------------------- print --- */

@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; }
}

/* ------------------------------------------------------- breakpoints --- */

@media (max-width: 900px) {
  .hero__inner, .grid--split, .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn-row { justify-content: flex-start !important; }
}
@media (max-width: 620px) {
  .dash__row span:first-child { flex: 1 1 100%; }
  .dash__row .dash__track { flex: 1 1 auto; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .site-nav .btn { width: 100%; }
}

/* -------------------------------------------------------- legal pages --- */

.legal { max-width: 760px; }
.legal h2 { font-size: clamp(21px, 2vw, 26px); margin-top: 42px; }
.legal h3 { font-size: 18px; margin-top: 26px; }
.legal p, .legal li { color: var(--text-muted); font-size: 16px; line-height: 1.75; }
.legal p { margin-top: 12px; }
.legal ul, .legal ol { margin-top: 12px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--violet-soft); }
.legal strong { color: var(--text); }

/* -------------------------------------------------------- corrections --- */

/* Visually hidden, still announced by screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Cards that are themselves links must not inherit the link colour for
   their heading and body text, or they read as a wall of purple. */
.card h3, a.card h3 { color: var(--text); }
.card--dark h3, .card--dark .card-title { color: #fff; }   /* must follow .card h3 — equal specificity, so source order decides */
a.card:hover h3 { color: var(--violet-text); }
.field--check > div { display: flex; flex-direction: column; gap: 3px; }
.field--check .hint { font-size: 13px; color: var(--text-faint); }

/* Footer identity: the mark is artwork, but the company name and tagline are
   live text. Rendering them from the raster lockup put the tagline at 6px and
   the rule at sub-pixel — unreadable however clean the source file is. */
.footer-name {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: -.005em; color: #fff; margin-top: 2px;
}
.site-footer .tagline { margin-top: 2px; }

/* Honeypot wrapper. Must be genuinely hidden from people (and from assistive
   tech, via aria-hidden on the element) while remaining in the DOM for bots.
   display:none is avoided — some bots skip it, and some browsers skip its
   fields on submit. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------- legal documents --- */

/* Callout used for "in short" summaries and reviewer notes. */
.legal-box {
  background: var(--haze);
  border: 1px solid var(--line);
  border-left: 3px solid var(--violet);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 22px;
}
.legal-box p { margin-top: 0; }
.legal-box p + p { margin-top: 10px; }

/* Reviewer note — deliberately loud so it cannot be published by accident. */
.legal-box--note {
  background: #FFF8E6;
  border-color: #E8D08A;
  border-left-color: #C9962B;
}
.legal-box--note p { color: #6B5312; }
.legal-box--note strong { color: #4A3908; }


/* Clauses conventionally set in caps (disclaimers, liability limits). Kept as
   normal sentence case in the markup for readability and screen readers, and
   given visual emphasis here instead — all-caps body text is markedly harder
   to read, which is the opposite of what a limitation clause needs. */
.legal-caps {
  font-weight: 500;
  color: var(--text);
  background: var(--haze);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 14px;
}

.legal code {
  font-family: var(--font-mono); font-size: .92em;
  background: var(--haze); padding: 1px 5px; border-radius: 4px;
}
.legal table { font-size: 14.5px; }
.legal .table-scroll { margin-top: 16px; }
/* Card headings that are h2 for document structure but sized as card titles. */
.card .card-title { font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -.015em; color: var(--text); }
a.card:hover .card-title { color: var(--violet-text); }