/*
 * Script homepage 2026 — light/dark themed landing page.
 * Tokens mirror design/homepage-mock/TOKENS.md. Light is the base; dark is
 * applied by prefers-color-scheme unless the visitor has picked light, and by
 * [data-theme="dark"] when they pick dark explicitly.
 */

:root {
  --page: #FFFFFF;
  --fg: #1C1320;
  --fg-body: #1C1320;
  --muted: #6B6B6B;
  --hairline: #D9D2DE;
  --surface: #F4EEFA;
  --surface-inset: #FFFFFF;
  --action: #5E2A8C;
  --action-fg: #FFFFFF;
  --action-quiet: #D9D2DE;
  --underscore: #CE83FF;
  --accent: #CE83FF;
  --icon: #5E2A8C;
  --hero-bg: #FFFFFF;
  --hero-image: none;
  --ok: #167A3C;
  --warn: #9A6B00;
  --bad: #B3261E;

  --band-bg: #150C18;
  --band-image:
    radial-gradient(760px 360px at 10% 18%, rgba(199, 36, 169, 0.34), transparent 66%),
    radial-gradient(700px 340px at 90% 92%, rgba(59, 47, 160, 0.44), transparent 68%);

  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 64px;
  --maxw: 1440px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #1D111F; --fg: #FFFFFF; --fg-body: rgba(255,255,255,0.86); --muted: rgba(255,255,255,0.62); --hairline: rgba(217,210,222,0.20); --surface: #251829; --surface-inset: #1D111F; --action: #CE83FF; --action-fg: #1C1320; --action-quiet: rgba(217,210,222,0.35); --underscore: #EBFF00; --icon: #CE83FF; --hero-bg: #140B17;
    --hero-image:
      radial-gradient(1020px 640px at 80% 6%, rgba(199, 36, 169, 0.34), transparent 62%),
      radial-gradient(860px 660px at 2% 82%, rgba(59, 47, 160, 0.40), transparent 64%); }
}

:root[data-theme="dark"] { --page: #1D111F; --fg: #FFFFFF; --fg-body: rgba(255,255,255,0.86); --muted: rgba(255,255,255,0.62); --hairline: rgba(217,210,222,0.20); --surface: #251829; --surface-inset: #1D111F; --action: #CE83FF; --action-fg: #1C1320; --action-quiet: rgba(217,210,222,0.35); --underscore: #EBFF00; --icon: #CE83FF; --hero-bg: #140B17;
  --hero-image:
    radial-gradient(1020px 640px at 80% 6%, rgba(199, 36, 169, 0.34), transparent 62%),
    radial-gradient(860px 660px at 2% 82%, rgba(59, 47, 160, 0.40), transparent 64%); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--fg-body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--action); text-decoration: none; }
h1, h2, h3 { color: var(--fg); font-weight: 700; letter-spacing: -0.5px; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- wordmark ---------------------------------------------------------- */
.wordmark { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 700; letter-spacing: -0.5px; color: var(--fg); font-size: 26px; }
.wordmark i { display: inline-block; width: 18px; height: 5px; background: var(--underscore); }
.rule { display: inline-block; width: 44px; height: 10px; background: var(--underscore); margin-left: 6px; vertical-align: baseline; }
.rule--sm { width: 30px; height: 8px; margin-left: 5px; background: var(--accent); }

/* ---- nav --------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--page); border-bottom: 1px solid var(--hairline); }
:root[data-theme="dark"] .nav, :root:not([data-theme="light"]) .nav { background: var(--page); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { color: var(--fg); font-size: 15px; }
.nav__links a:hover { color: var(--action); }
.nav__actions { display: flex; align-items: center; gap: 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 44px; padding: 11px 24px; border-radius: 999px; font-size: 16px; font-family: inherit; cursor: pointer; }
.btn--primary { background: var(--action); color: var(--action-fg); font-weight: 700; border: 1px solid var(--action); }
.btn--quiet { background: transparent; color: var(--fg); border: 1px solid var(--action-quiet); }
.btn--lg { min-height: 52px; padding: 15px 32px; font-size: 17px; }
.btn:focus-visible, .toggle:focus-visible, a:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

.toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--action-quiet); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; }
.toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toggle .icon-sun { display: none; }
:root[data-theme="dark"] .toggle .icon-sun { display: block; }
:root[data-theme="dark"] .toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .toggle .icon-moon { display: none; }
}

/* ---- hero -------------------------------------------------------------- */
.hero { background-color: var(--hero-bg); background-image: var(--hero-image); }
.hero__inner { padding-top: 96px; padding-bottom: 64px; max-width: 900px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.hero h1 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.05; letter-spacing: -1.5px; margin: 24px 0 0; }
.hero__sub { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; margin-top: 24px; max-width: 680px; color: var(--fg-body); }
.hero .cta-pair { margin-top: 34px; }
.cta-pair { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- product panel ----------------------------------------------------- */
.panel { padding-bottom: 40px; }
.panel__frame { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 40px; }
.panel__window { background: var(--surface-inset); border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.panel__chrome { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--hairline); }
.panel__chrome span.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--hairline); display: inline-block; }
.panel__chrome span.url { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 12px; }
.panel .shot--dark { display: none; }
:root[data-theme="dark"] .panel .shot--dark { display: block; }
:root[data-theme="dark"] .panel .shot--light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel .shot--dark { display: block; }
  :root:not([data-theme="light"]) .panel .shot--light { display: none; }
}
.caption { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* ---- trust strip ------------------------------------------------------- */
.strip { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; }
.strip__inner li { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ---- generic section --------------------------------------------------- */
.section { padding-top: 88px; padding-bottom: 88px; }
.section--tint { background: var(--surface); }
.section__head { max-width: 760px; }
.section__head h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -1px; margin: 18px 0 0; }
.section__head p { margin-top: 20px; font-size: 18px; color: var(--fg-body); }
.grid { display: grid; gap: 40px; margin-top: 48px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p, .card li { font-size: 16px; color: var(--fg-body); }
.card svg { width: 28px; height: 28px; stroke: var(--icon); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.bullets li { position: relative; padding-left: 22px; margin-top: 10px; font-size: 16px; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 3px; background: var(--accent); }
.lede { font-weight: 700; color: var(--fg); }

/* ---- comparison table -------------------------------------------------- */
.tablewrap { margin-top: 48px; overflow-x: auto; border: 1px solid var(--hairline); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--hairline); font-size: 15px; vertical-align: top; }
thead th { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 400; }
tbody th { font-weight: 400; color: var(--fg-body); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td.yes { color: var(--fg); }
td.no { color: var(--muted); }
.mark { font-family: var(--mono); margin-right: 8px; }
.mark--yes { color: var(--ok); }
.mark--no { color: var(--muted); }

/* ---- score bands ------------------------------------------------------- */
.bands { margin-top: 40px; display: grid; gap: 0; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.band { display: flex; align-items: baseline; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
.band:last-child { border-bottom: 0; }
.band b { font-family: var(--mono); font-size: 15px; min-width: 78px; }
.band--ok b { color: var(--ok); }
.band--warn b { color: var(--warn); }
.band--bad b { color: var(--bad); }
:root[data-theme="dark"] .band b { color: var(--fg); }
:root[data-theme="dark"] .band--ok b, :root[data-theme="dark"] .band--warn b, :root[data-theme="dark"] .band--bad b { padding: 2px 10px; border-radius: 6px; color: #FFFFFF; }
:root[data-theme="dark"] .band--ok b { background: var(--ok); }
:root[data-theme="dark"] .band--warn b { background: var(--warn); }
:root[data-theme="dark"] .band--bad b { background: var(--bad); }

/* ---- closing band ------------------------------------------------------ */
.band-cta { background-color: var(--band-bg); background-image: var(--band-image); border-top: 1px solid rgba(217, 210, 222, 0.20); }
.band-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 84px; padding-bottom: 84px; flex-wrap: wrap; }
.band-cta h2 { color: #FFFFFF; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -1px; }
.band-cta .rule--sm { background: #EBFF00; }
.band-cta .btn--primary { background: #FFFFFF; color: #1C1320; border-color: #FFFFFF; }
.band-cta .btn--quiet { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }

/* ---- footer ------------------------------------------------------------ */
.foot { border-top: 1px solid var(--hairline); }
.foot__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; padding-bottom: 28px; flex-wrap: wrap; }
.foot .wordmark { font-size: 18px; }
.foot .wordmark i { width: 13px; height: 4px; }
.foot p { font-size: 13px; color: var(--muted); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --gutter: 40px; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__links { display: none; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .grid, .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero__inner { padding-top: 56px; padding-bottom: 44px; }
  .section { padding-top: 56px; padding-bottom: 56px; }
  .panel__frame { padding: 16px; }
  .strip__inner { gap: 10px; }
  .strip__inner li { flex: 1 1 100%; }
  .band-cta__inner { padding-top: 56px; padding-bottom: 56px; }
  .cta-pair .btn { flex: 1 1 100%; }
  /* One action in the bar on a phone — "Book a demo" still sits in the hero and the closing band. */
  .nav__actions .btn--quiet { display: none; }
  .nav .btn { padding: 11px 18px; font-size: 15px; }
  .nav__inner { gap: 12px; }
}

/* ---- HubSpot demo form ------------------------------------------------- */
.demo__form { margin-top: 40px; max-width: 640px; }
/* The form's own colours are set in HubSpot and can't follow our theme toggle, so
   it sits on a white card in BOTH themes — a deliberate light panel rather than
   unreadable dark-on-dark. (The old site inverted the iframe with a CSS filter,
   which also inverts any logo or image inside it.) */
.demo__form .hs-form-frame { background: #FFFFFF; color: #1C1320; border: 1px solid var(--hairline); border-radius: 12px; padding: 24px; }
.demo__form .hs-form-frame :is(label, legend, p, span, li, h1, h2, h3) { color: #1C1320; }
.demo__form iframe { width: 100% !important; border: 0; }