/* ============================================================
   LATITUDE — Design System
   Premium K-12 student-operations platform marketing site.
   Type scale: 1.25 major third. Spacing: 8pt grid.
   ============================================================ */

:root {
  /* Ink & paper — official Latitude palette */
  --ink: #0E1420;          /* Latitude ink */
  --ink-soft: #44506A;     /* secondary text on light */
  --ink-faint: #5C6880;    /* captions, meta — AA on paper */
  --paper: #FAF7F1;
  --paper-raised: #ffffff;
  --line: #E7E1D4;
  --line-strong: #CFC7B6;

  /* Brand */
  --brand: #315FA8;        /* Latitude/COMPASS blue */
  --brand-deep: #1D3D73;
  --gold: #F5A623;         /* Latitude amber — primary accent */
  --gold-deep: #9E6108;    /* amber legible on light backgrounds */
  --gold-soft: #FEF4E3;

  /* Official module colors (deep variants: AA text on light) */
  --c-compass: #1D3D73;
  --c-spark: #1B4229;
  --c-roam: #9E6108;
  --c-vista: #5C1710;
  --c-bloom: #5733A0;
  --c-atlas: #0C5C56;
  --c-tier: #C2410C;
  --c-compass-mid: #315FA8;
  --c-spark-mid: #2F6B47;
  --c-roam-mid: #D4870F;
  --c-vista-mid: #8E2B1E;
  --c-bloom-mid: #7A4FD0;
  --c-atlas-mid: #138A82;
  --c-tier-mid: #F2683C;
  /* light variants — AA on dark surfaces */
  --c-compass-lite: #8FB3EC;
  --c-spark-lite: #82CBA0;
  --c-roam-lite: #F2B94F;
  --c-vista-lite: #EC9A8C;
  --c-bloom-lite: #BCA4EC;
  --c-atlas-lite: #63C8C0;
  --c-tier-lite: #FA9A73;

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Scale (1.25) */
  --t-xs: 0.8rem;
  --t-sm: 0.9rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.5625rem;
  --t-xl: 1.953rem;
  --t-2xl: 2.441rem;
  --t-3xl: 3.052rem;
  --t-4xl: 3.815rem;

  /* Spacing */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  --radius: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(64,48,20,.05), 0 8px 28px rgba(64,48,20,.08);
  --shadow-lift: 0 2px 4px rgba(64,48,20,.06), 0 16px 44px rgba(64,48,20,.13);
  --max-w: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 var(--s-3); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 5.2vw, var(--t-4xl)); letter-spacing: -0.022em; }
h2 { font-size: clamp(1.7rem, 3.6vw, var(--t-3xl)); }
h3 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s-2); color: var(--ink-soft); }
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-3); }
.section { padding: 72px 0; }
.section--tight { padding: 56px 0; }

/* Latitude line motif — hairline with a coordinate tick */
.lat-line { position: relative; border: 0; border-top: 1px solid var(--line-strong); margin: 0; }
.lat-line::after {
  content: ""; position: absolute; left: 48px; top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--paper);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: var(--s-2);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold-deep); }

.lede { font-size: var(--t-md); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,247,241,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.nav__logo svg { display: block; }
.nav__links { display: flex; align-items: center; gap: var(--s-4); }
.nav__links a { color: var(--ink-soft); font-size: var(--t-sm); font-weight: 500; padding: 10px 2px; transition: color .2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a.btn--primary, .nav__links a.btn--primary:hover { color: #fff; }
.nav__links a.btn { padding: 12px 28px; font-weight: 600; border-bottom: 0; }
.nav__toggle { display: none; background: none; border: 0; padding: 12px; cursor: pointer; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .25s var(--ease), opacity .2s; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 28px; border-radius: 999px;
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 2px 8px rgba(14,20,32,.28); }
.btn--primary:hover { background: #1C2738; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,20,32,.32); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 64px; position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-6); align-items: center; }
.hero h1 { max-width: 22ch; }
.hero h1 em { font-style: italic; color: var(--brand); }
.hero__sub { font-size: var(--t-md); max-width: 58ch; margin-bottom: var(--s-4); }
.hero__ctas { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.hero__note { font-size: var(--t-xs); color: var(--ink-faint); }

/* Product frame — stylized UI mock */
.ui-frame {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden;
}
.ui-frame__bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ui-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.ui-frame__body { padding: var(--s-3); }

/* ---------- Replacement ticker ---------- */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-raised); padding: var(--s-3) 0 var(--s-2); }
.ticker__label { text-align: center; font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-1); }
.ticker__viewport { overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; animation: ticker-scroll 36s linear infinite; }
.ticker__viewport:hover .ticker__track, .ticker__track:focus-within { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 26px; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--t-md); color: var(--ink-soft); }
.ticker__item s { text-decoration: none; position: relative; transition: color .2s; }
.ticker__item s::after { content: ""; position: absolute; left: -1%; top: 54%; height: 2px; width: 0;
  background: var(--gold-deep); border-radius: 1px; transition: width .28s var(--ease); }
.ticker__x { font-size: var(--t-sm); color: var(--gold-deep); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.ticker__item:hover s, .ticker__item:focus-visible s, .ticker__item:active s { color: var(--ink); }
.ticker__item:hover s::after, .ticker__item:focus-visible s::after, .ticker__item:active s::after { width: 102%; }
.ticker__item:hover .ticker__x, .ticker__item:focus-visible .ticker__x { opacity: 1; transform: none; }
.ticker__item + .ticker__item { border-left: 1px solid var(--line); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker__track .ticker__item:nth-child(n+9) { display: none; } /* hide duplicated half */
  .ticker__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- About story: clipboard ---------- */
.clipboard { position: relative; max-width: 560px; margin: var(--s-4) auto; padding: var(--s-5) var(--s-4) var(--s-3);
  background: linear-gradient(180deg, #fffdf9 0%, #fdfbF6 100%); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: var(--shadow-lift), inset 0 0 0 1px rgba(255,255,255,.6); }
.clipboard::before { /* board edge */ content: ""; position: absolute; inset: -10px; z-index: -1;
  background: linear-gradient(180deg, #C89A62, #A87B45); border-radius: 18px; box-shadow: var(--shadow-card); }
.clipboard__clip { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 118px; height: 34px;
  background: linear-gradient(180deg, #E7EAEF, #B9C0CC); border-radius: 10px 10px 6px 6px;
  box-shadow: 0 2px 5px rgba(14,20,32,.3), inset 0 1px 0 rgba(255,255,255,.8); }
.clipboard__clip::after { content: ""; position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 34px; height: 9px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 1px 3px rgba(14,20,32,.4); }
.clipboard__title { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center; margin-bottom: var(--s-2); }
.clipboard__row { display: flex; align-items: center; gap: 14px; padding: 11px 2px; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-md); color: var(--ink); line-height: 1.35; }
.clipboard__row + .clipboard__row { border-top: 1px dashed var(--line); }
.clipboard__row input { position: absolute; opacity: 0; pointer-events: none; }
.clipboard__box { position: relative; flex: none; width: 20px; height: 20px; border: 2px solid var(--gold-deep);
  border-radius: 5px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.clipboard__row:hover .clipboard__box { box-shadow: 0 0 0 3px var(--gold-soft); }
.clipboard__row input:focus-visible + .clipboard__box { outline: 2px solid var(--brand); outline-offset: 2px; }
.clipboard__box svg { position: absolute; left: -4px; top: -11px; width: 30px; height: 30px;
  opacity: 0; transform: scale(.4) rotate(-14deg); transform-origin: 30% 70%;
  transition: opacity .18s var(--ease), transform .3s cubic-bezier(.2,1.6,.4,1); }
.clipboard__row input:checked + .clipboard__box svg { opacity: 1; transform: scale(1) rotate(-4deg); }
.clipboard__row input:checked ~ .clipboard__text { color: var(--ink-soft); }
.story-kicker { font-size: var(--t-md); color: var(--ink); }
.quote { margin: var(--s-4) 0; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.card {
  background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.card h3 { margin-bottom: var(--s-1); }
.card p { font-size: var(--t-sm); margin: 0; }

/* Module cards */
.mod-card--wide { grid-column: 1 / -1; }
.mod-card--wide p { max-width: 72ch; }
.mod-card { position: relative; display: block; color: var(--ink); overflow: hidden; }
.mod-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--mod-color, var(--brand));
  transition: width .25s var(--ease); opacity: .85;
}
.mod-card:hover::before { width: 7px; }
.mod-card__tag {
  display: inline-block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mod-color, var(--brand)); margin-bottom: var(--s-1);
}
.mod-card__more { font-size: var(--t-xs); font-weight: 600; color: var(--ink-faint); margin-top: var(--s-2); display: inline-block; }
.mod-card:hover .mod-card__more { color: var(--mod-color, var(--brand)); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--t-sm); color: var(--ink-faint); }

/* ---------- Dark band (Tier / CTA) ---------- */
.band-dark { --focus: #F5A623; background-color: #0A0E16; color: #EEF1F6;
  background-image:
    radial-gradient(ellipse 90% 70% at 70% 10%, rgba(245,166,35,.05), transparent 60%),
    linear-gradient(160deg, #0A0E16 0%, #141C2B 100%); }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p { color: #B7C2D4; }
.band-dark .eyebrow { color: var(--gold); }
.band-dark .eyebrow::before { background: var(--gold); }
.band-dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.band-dark .card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.band-dark .card h3 { font-size: var(--t-md); }
.band-dark .card p { color: #B7C2D4; }
.band-dark .mod-card { color: #EEF1F6; }
.band-dark .mod-card__more, .band-dark .mod-price { color: #9AA6B8; }
.band-dark .mod-card:hover .mod-card__more { color: #EEF1F6; }

/* ---------- Testimonials ---------- */
.quote {
  border-left: 3px solid var(--gold); padding: var(--s-1) 0 var(--s-1) var(--s-3);
  font-family: var(--font-display); font-size: var(--t-md); font-style: italic;
  color: var(--ink); line-height: 1.5;
}
.quote-attrib { font-family: var(--font-body); font-style: normal; font-size: var(--t-sm); color: var(--ink-faint); margin-top: var(--s-2); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--line); padding: var(--s-2) 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: var(--t-base); list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; color: var(--gold-deep); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-top: var(--s-1); max-width: 65ch; }

/* ---------- Feature rows ---------- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; padding: 40px 0; }
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row ul { padding-left: 1.2em; color: var(--ink-soft); }
.feature-row li { margin-bottom: var(--s-1); font-size: var(--t-sm); }

/* ---------- Footer ---------- */
.footer { background: #0A0E16; color: #9AA6B8; padding: 56px 0 var(--s-4); font-size: var(--t-sm); }
.footer p { color: #9AA6B8; }
.footer a { color: #C7D1E0; }
.footer .btn--gold, .band-dark .btn--gold { color: var(--ink); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-5); }
.footer__grid h4 { color: #fff; font-family: var(--font-body); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-2); }
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: 10px; }
.footer__cta { background-color: #141C2B; border: 1px solid #283449; border-radius: var(--radius-lg); padding: var(--s-5); text-align: center; margin-bottom: var(--s-5); }
.footer__cta h2 { color: #fff; font-size: var(--t-xl); }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--s-3); font-size: var(--t-xs); }

/* ---------- Reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--stagger-i, 0) * 75ms); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Mock UI internals ---------- */
.mock-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; }
.mock-row + .mock-row { margin-top: 6px; }
.mock-row--head { background: #f2f0ea; font-size: var(--t-xs); font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mock-bar { height: 8px; border-radius: 4px; background: var(--line); flex: 1; }
.mock-bar--fill { background: var(--brand); opacity: .75; }
.mock-chip { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; flex: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__grid, .grid-3, .grid-2, .feature-row, .stats { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 48px 0; }
  .section { padding: 56px 0; }
  .nav__links {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--s-3) var(--s-3);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 4px; min-height: 48px; border-bottom: 1px solid var(--line); }
  .nav__links .btn { margin-top: var(--s-2); }
  .nav__toggle { display: block; }
  .nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero__ctas .btn { width: 100%; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px;
}
.band-dark a:focus-visible, .band-dark .btn:focus-visible, .footer a:focus-visible { outline-color: var(--gold); }

/* Wordmark images */
.nav__logo img { height: 32px; width: auto; display: block; }
.footer__logo img { height: 28px; width: auto; margin-bottom: 12px; }
.mod-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-2); }
.mod-card__head .mod-card__tag, .mod-card__head .eyebrow { margin-bottom: 0; }

/* ---------- Hero convergence ---------- */
.converge-icons { display: flex; justify-content: space-between; padding: 0 1.5%; margin-bottom: 2px; }
.converge-icons svg { width: 24px; height: 24px; border-radius: 7px !important; box-shadow: 0 2px 6px rgba(64,48,20,.18); }
.converge-icons span { opacity: 0; animation: rowIn .5s var(--ease) forwards; }
.converge-icons span:nth-child(1){animation-delay:.05s}.converge-icons span:nth-child(2){animation-delay:.2s}
.converge-icons span:nth-child(3){animation-delay:.35s}.converge-icons span:nth-child(4){animation-delay:.5s}
.converge-icons span:nth-child(5){animation-delay:.65s}.converge-icons span:nth-child(6){animation-delay:.8s}
@media (prefers-reduced-motion: reduce){ .converge-icons span{animation:none;opacity:1} }
.converge { display: block; width: 100%; height: 54px; margin-bottom: -6px; }
.converge path { fill: none; stroke-width: 2; stroke-linecap: round; opacity: .8;
  stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw 1s var(--ease) forwards; }
.converge path:nth-child(1){animation-delay:.15s}.converge path:nth-child(2){animation-delay:.3s}
.converge path:nth-child(3){animation-delay:.45s}.converge path:nth-child(4){animation-delay:.6s}
.converge path:nth-child(5){animation-delay:.75s}.converge path:nth-child(6){animation-delay:.9s}
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-anim .mock-row { opacity: 0; transform: translateY(10px); animation: rowIn .55s var(--ease) forwards; }
.hero-anim .mock-row:nth-child(1){animation-delay:.2s}.hero-anim .mock-row:nth-child(2){animation-delay:.5s}
.hero-anim .mock-row:nth-child(3){animation-delay:.8s}.hero-anim .mock-row:nth-child(4){animation-delay:1.1s}
.hero-anim .mock-row:nth-child(5){animation-delay:1.4s}.hero-anim .mock-row:nth-child(6){animation-delay:1.7s}
.hero-anim .mock-row--rec { animation-name: recPop; animation-delay: 2.1s; animation-duration: .6s; }
@keyframes rowIn { to { opacity: 1; transform: none; } }
@keyframes recPop { 0%{opacity:0;transform:scale(.9)} 70%{opacity:1;transform:scale(1.035)} 100%{opacity:1;transform:scale(1)} }
@media (prefers-reduced-motion: reduce) {
  .converge path, .hero-anim .mock-row { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
}

/* ---------- Bespoke mock components ---------- */
.mock-cellrow { display: flex; gap: 5px; padding: 8px 12px; }
.mock-row .mock-cellrow { flex: 1; padding: 0; }
.mock-cell { flex: 1; height: 18px; border-radius: 5px; }
.mock-spark { display: block; width: 100%; height: 44px; padding: 4px 12px 8px; }
.mock-face { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.mock-toggle { width: 34px; height: 19px; border-radius: 999px; position: relative; flex: none; background: var(--line); }
.mock-toggle--on { background: var(--c-spark-mid); }
.mock-toggle::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mock-toggle--on::after { left: auto; right: 3px; }
.mock-name { font-size: 12px; font-weight: 600; color: var(--ink); flex: none; min-width: 86px; }
.mock-sub { font-size: 11px; color: var(--ink-faint); }
.mock-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--line-strong); flex: none; position: relative; }
.mock-check--done { border-color: var(--c-spark-mid); background: var(--c-spark-mid); }
.mock-check--done::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); }

/* ---------- Comparison table ---------- */
.compare-wrap { overflow-x: auto; margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-raised); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; }
.compare th, .compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.compare th { font-family: var(--font-body); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.compare td:first-child, .compare th:first-child { text-align: left; font-weight: 500; color: var(--ink); }
.compare tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--c-spark-mid); font-weight: 700; }
.compare .no { color: var(--ink-faint); }
.compare .col-latitude { background: var(--gold-soft); }
.compare tbody tr:hover { background: rgba(245,166,35,.05); }

/* ---------- Demo form ---------- */
.demo-form[hidden] { display: none; }
.demo-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); text-align: left; margin-top: var(--s-4); }
.demo-form .full { grid-column: 1 / -1; }
.demo-form label { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #B7C2D4; margin-bottom: 6px; }
.demo-form input, .demo-form select, .demo-form textarea { width: 100%; min-height: 48px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid #3A475F; background: #121A28; color: #EEF1F6;
  font-family: var(--font-body); font-size: var(--t-sm); }
.demo-form textarea { min-height: 90px; resize: vertical; }
.demo-form input::placeholder, .demo-form textarea::placeholder { color: #66738A; }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.demo-form .btn { justify-self: start; }

/* ---------- Avatars ---------- */
.avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: #fff; margin-bottom: var(--s-2);
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.14); }

/* ---------- Trust / pricing pages ---------- */
.check-list { list-style: none; margin: 0 0 var(--s-2); padding: 0; }
.check-list li { padding: 9px 0 9px 32px; position: relative; color: var(--ink-soft); font-size: var(--t-sm); }
.check-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 12px;
  border: solid var(--c-spark-mid); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); }

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

/* ---------- Mobile menu scroll lock ---------- */
body.menu-open { overflow: hidden; }

/* ---------- Product carousel ---------- */
.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.carousel-nav { display: flex; gap: 10px; flex: none; }
.carousel-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--paper-raised); color: var(--ink); font-size: 1.1rem; cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s, opacity .18s; }
.carousel-nav button:hover { border-color: var(--ink); transform: translateY(-1px); }
.carousel-nav button:disabled { opacity: .35; cursor: default; transform: none; }
.band-dark .carousel-nav button { background: rgba(255,255,255,.06); border-color: #3A475F; color: #EEF1F6; }
.band-dark .carousel-nav button:hover { border-color: #EEF1F6; }
.carousel { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 6px 22px; margin: var(--s-4) -6px 0; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { flex: 0 0 316px; scroll-snap-align: start; }
@media (max-width: 900px) { .carousel > * { flex-basis: 82%; } }

/* ---------- Product card v2 ---------- */
.pcard { position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--paper-raised); border: 1px solid var(--line); border-top: 3px solid var(--pc, var(--brand));
  border-radius: var(--radius-lg); padding: 28px 26px 24px; color: var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pcard__icon svg { width: 40px; height: 40px; border-radius: 11px !important; }
.pcard__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; line-height: 1.1; margin-top: 6px; }
.pcard__area { font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pc, var(--brand)); }
.pcard p { font-size: var(--t-sm); margin: 2px 0 0; color: var(--ink-soft); flex: 1; }
.pcard__more { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-top: var(--s-2); }
.pcard__more::after { content: " \2192"; display: inline-block; transition: transform .2s var(--ease); }
.pcard:hover .pcard__more::after { transform: translateX(4px); }
.pcard:hover .pcard__more { color: var(--pc, var(--brand)); }