/* ===== tokens/fonts.css ===== */
/* Manrope (Google Fonts, variable 200-800) — licensed substitute for Gilroy */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== tokens/colors.css ===== */
:root{
  /* Base palette */
  --color-ink-navy:#0b3558;      /* primary text, headings, icons, dark CTA, nav links */
  --color-signal-blue:#006bff;   /* primary CTA fill, active nav, selected states */
  --color-slate-gray:#476788;    /* secondary body copy, helper text, muted labels */
  --color-mist-gray:#a6bbd1;     /* disabled text, inactive labels, light icon strokes */
  --color-cloud:#f8f9fb;         /* page canvas, footer background */
  --color-paper:#ffffff;         /* card surfaces, text on dark fills */
  --color-pebble:#f0f3f8;        /* badge bg, input fills, hover washes */
  --color-hairline:#d4e0ed;      /* card + input borders, dividers */
  --color-carbon:#0a0a0a;        /* logo glyph only — never body text */
  --color-coral-magenta:#e55cff; /* decorative blob only, never UI fill */
  --color-sky-cyan:#0099ff;      /* decorative blob only, never UI fill */
  --color-deep-cobalt:#004eba;   /* badge text on Pebble fills, info labels */
  /* Surfaces */
  --surface-canvas:#f8f9fb;
  --surface-card:#ffffff;
  --surface-input-fill:#f0f3f8;
  --surface-dark-surface:#0b3558;
  --surface-accent-surface:#006bff;
  /* Semantic aliases */
  --text-primary:var(--color-ink-navy);
  --text-secondary:var(--color-slate-gray);
  --text-disabled:var(--color-mist-gray);
  --text-on-dark:var(--color-paper);
  --text-badge:var(--color-deep-cobalt);
  --action-primary:var(--color-signal-blue);
  --action-dark:var(--color-ink-navy);
  --border-default:var(--color-hairline);
  --badge-bg:#e6f0ff;
}

/* ===== tokens/typography.css ===== */
:root{
  /* Manrope substitutes Gilroy (unlicensed) — same slot, same weights */
  --font-sans:'Manrope',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-gilroy:var(--font-sans); /* compat alias for the source token name */
  /* Scale */
  --text-caption:12px;   --leading-caption:1.5;
  --text-body-sm:14px;   --leading-body-sm:1.4;
  --text-body:16px;      --leading-body:1;
  --text-button:18px;    --leading-button:1.6;
  --text-body-lg:20px;   --leading-body-lg:1.4;
  --text-subheading:28px;--leading-subheading:1.4;
  --text-heading-sm:38px;--leading-heading-sm:1.21;
  --text-heading:50px;   --leading-heading:1.2;
  --text-heading-lg:68px;--leading-heading-lg:1.2;
  --text-display:80px;   --leading-display:1.2;
  /* Weights */
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
}

/* ===== tokens/spacing.css ===== */
:root{
  --spacing-unit:8px;
  --spacing-8:8px; --spacing-16:16px; --spacing-24:24px; --spacing-32:32px;
  --spacing-40:40px; --spacing-48:48px; --spacing-56:56px; --spacing-64:64px;
  --spacing-72:72px; --spacing-96:96px;
  /* Layout */
  --page-max-width:1200px;
  --card-padding:24px;
}

/* ===== tokens/effects.css ===== */
:root{
  /* Radius */
  --radius-md:4px; --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-3xl:24px;
  --radius-full:50px; --radius-full-2:9999px;
  /* Named radii */
  --radius-cards:24px;        /* feature panels */
  --radius-productcards:16px; /* product/media cards */
  --radius-buttons:8px;
  --radius-inputs:8px;
  --radius-badges:9999px;
  --radius-small:4px;
  /* Blue-tinted shadows — never neutral black */
  --shadow-sm:rgba(71,103,136,0.04) 0px 4px 5px 0px,rgba(71,103,136,0.03) 0px 4px 10px 0px,rgba(71,103,136,0.05) 0px 10px 20px 0px;
  --shadow-sm-2:rgba(71,103,136,0.04) 0px 4px 5px 0px,rgba(71,103,136,0.03) 0px 8px 15px 0px,rgba(71,103,136,0.08) 0px 30px 50px 0px;
  --shadow-sm-3:rgba(71,103,136,0.04) 0px 4px 5px 0px,rgba(71,103,136,0.03) 0px 8px 15px 0px,rgba(71,103,136,0.06) 0px 15px 30px 0px;
  /* Semantic */
  --shadow-card:var(--shadow-sm-2);
  --shadow-link-card:var(--shadow-sm);
  --shadow-button:var(--shadow-sm-3);
}

/* ===== tokens/base.css ===== */
body{margin:0;font-family:var(--font-sans);font-size:var(--text-body);color:var(--text-primary);background:var(--surface-canvas);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-family:var(--font-sans)}
a{color:var(--color-ink-navy);font-weight:var(--font-weight-medium);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:var(--color-hairline);text-underline-offset:3px}
::selection{background:#e6f0ff;color:var(--color-ink-navy)}

/* ===== styles.css ===== */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/effects.css";
@import "tokens/base.css";

/* ===== page ===== */
    html, body { margin: 0; padding: 0; }
    body { background: #f8f9fb; color: #0b3558; font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
    * { box-sizing: border-box; }
    a { color: #0b3558; text-decoration: none; }
    a:hover { color: #006bff; }
    h1, h2, h3, p { margin: 0; }
    html.js .rv { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
    html.js .rv-in { opacity: 1; transform: none; }
    .rvd1 { transition-delay: 0.1s; } .rvd2 { transition-delay: 0.2s; } .rvd3 { transition-delay: 0.3s; }
    .skel { height: 9px; border-radius: var(--radius-small); background: linear-gradient(90deg, #f0f3f8 25%, #e2e9f2 50%, #f0f3f8 75%); background-size: 200% 100%; animation: shim 2.2s linear infinite; }
    @keyframes shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
    .wd { display: inline-block; margin-right: 0.26em; }
    html.js .wd { opacity: 0.16; transition: opacity 0.4s ease-out; }
    html.js .wd-in { opacity: 1; }
    html.js .dm { opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
    html.js .dm-in { opacity: 1; transform: none; }
    .faq summary { list-style: none; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: "+"; font-size: 26px; font-weight: 400; line-height: 1; color: #006bff; flex: 0 0 auto; transition: transform 0.2s ease-out; }
    .faq details[open] summary::after { transform: rotate(45deg); }
    .show-m { display: none !important; }
    @media (max-width: 960px) {
      .wrap { padding-left: 24px !important; padding-right: 24px !important; }
      .cols { grid-template-columns: 1fr !important; }
      .hide-m { display: none !important; }
      .show-m { display: flex !important; }
      .stack-m { flex-direction: column !important; align-items: stretch !important; }
      .rb { border-right: 0 !important; }
    }
  

/* ===== flatten additions ===== */
@media (max-width: 520px) {
  header .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .header-row { gap: 12px !important; }
  .header-row img { height: 32px !important; }
  .header-row > div { gap: 12px !important; }
  .header-cta { font-size: 14px !important; padding: 6px 12px !important; }
}
html, body { overflow-x: hidden; overflow-x: clip; }
.mnav { display: none; flex-direction: column; padding: 8px 0 20px; border-top: 1px solid var(--border-default); }
.mnav.open { display: flex; }
/* #faq and #contact have no top padding, so the anchor jump hid their labels under the 64px sticky header */
#faq, #contact { scroll-margin-top: 88px; }

/* ===== hero rotating word ===== */
.rw { position: relative; z-index: 0; display: inline-block; white-space: nowrap; font-style: italic; color: var(--color-signal-blue); padding: 0 0.24em; margin: 0 -0.04em; line-height: 1.18; transition: opacity 0.28s ease-out, transform 0.28s ease-out, width 0.35s ease-out; }
/* the highlighter swipe behind the word — tilted, gradient, soft glow */
.rw::before { content: ""; position: absolute; inset: 0.04em -0.02em; z-index: -1; border-radius: 0.22em; background: linear-gradient(112deg, #e6f0ff 0%, #d4ecff 55%, #efe4ff 100%); box-shadow: 0 10px 28px -12px rgba(0, 153, 255, 0.45); }
.rw-out { opacity: 0; transform: translateY(0.35em); }
@media (min-width: 961px) { .nowrap-d { white-space: nowrap; } }

/* ===== hero — mobile/tablet only (≤960px); desktop untouched ===== */
@media (max-width: 960px) {
  [data-hero="root"] .wrap { padding: 64px 20px !important; min-height: 0 !important; }
  [data-hero="root"] .wrap > div { gap: 28px !important; align-items: center; text-align: center; }
  /* scales with the screen so "AI that does the" stays on one line; 43px on a 375px phone, 52px cap on tablets */
  [data-hero="root"] h1 { font-size: min(52px, calc(12.8vw - 5px)) !important; line-height: 1.1 !important; }
  [data-hero="root"] h1 br { display: none; }
  /* the rotating word takes its own centred line (table = shrink-to-fit, so the width easing still works) */
  [data-hero="root"] h1 .rw { display: table; margin: 0.06em auto; }
  [data-hero="root"] .wrap > div > p { font-size: 18px !important; max-width: 34ch !important; text-wrap: balance; }
  [data-hero="root"] .stack-m { width: 100%; }
  [data-hero="root"] .stack-m a { width: 100%; }
  [data-hero="root"] .rvd3 { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 10px 20px !important; }
}
@media (max-width: 380px) {
  [data-hero="root"] .wrap > div > p { font-size: 17px !important; }
}

/* ===== interactive demo ===== */
.demo-btn { appearance: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 600; font-size: 14px; height: 38px; padding: 0 18px; border-radius: var(--radius-buttons); background: var(--action-primary); color: #fff; box-shadow: var(--shadow-button); transition: filter 150ms ease-out; align-self: flex-start; }
.demo-btn:hover { filter: brightness(1.08); }
.demo-btn-sm { height: 28px; padding: 0 12px; font-size: 12px; box-shadow: none; }
.demo-btn-ghost { background: transparent; color: var(--color-ink-navy); border: 1px solid var(--border-default); }
.demo-gate { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.demo-gate .demo-btn { margin-left: 0; }
.demo-hint { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-badge); white-space: nowrap; }
@keyframes demo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 107, 255, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(0, 107, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 107, 255, 0); }
}
.demo-pulse { animation: demo-pulse 1.6s ease-out infinite; }

/* ===== 88% / 6% dot grid ===== */
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; width: 100%; max-width: 400px; }
.wf { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--color-pebble); transition: background 0.25s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-out; }
.wf-on { background: #c9dcff; }
.wf-hit { background: var(--color-signal-blue); transform: scale(1.22); box-shadow: 0 6px 14px rgba(0, 107, 255, 0.35); }
@keyframes wf-breathe {
  0%, 100% { transform: scale(1.22); box-shadow: 0 6px 14px rgba(0, 107, 255, 0.35); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(0, 107, 255, 0.14); }
}
.waffle .wf-hit { animation: wf-breathe 2.4s ease-in-out 0.4s infinite; }
@media (prefers-reduced-motion: reduce) { .waffle .wf-hit { animation: none; } }
html.js .demo-locked > p:first-child { opacity: 0.45; }
@media (max-width: 960px) {
  html.js .demo-locked { display: none !important; }
}