/* ═══ SMAAI marketing — white + cyan (2026-08 light port) ═══
     Ported from docs/design/light-theme-prototype.html. Drives every public
     page except the landing hero, which carries its own copy of these tokens
     inline so the first paint needs no second request.

     Contrast rule, and it is the one that matters: --cyan-bright (#5eead4)
     measures ~1.6:1 on white. It is a glow and a surface wash, never text,
     never an icon, never a border a user has to see. Anything readable uses
     --cyan (#0d9488) or --cyan-deep (#0f766e). The two are deliberately
     separate tokens so they cannot be collapsed by a later find-and-replace. */
  :root {
    --paper:      #ffffff;   /* page */
    --mist:       #f2f7f8;   /* section wash */
    --ink:        #0b1f24;   /* headings */
    --slate:      #56676d;   /* body */
    --slate-soft: #8b9aa0;   /* captions */

    --cyan:       #0d9488;   /* anything that must be READ */
    --cyan-deep:  #0f766e;   /* hover / pressed */
    --cyan-bright:#5eead4;   /* glow and wash ONLY — never text */
    --cyan-wash:  #e6fffb;   /* tinted surfaces */

    --rule:       #dfe9eb;
    --rule-soft:  #edf3f4;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --gutter: 40px;

    /* Aliases kept so blocks carried over from the dark build keep resolving.
       New rules should use the names above. */
    --void: #ffffff;
    --text: #0b1f24;
    --text2: #56676d;
    --text3: #8b9aa0;
    --muted: #8b9aa0;
    --accent: #0d9488;
    --accent-ink: #ffffff;
    --accent-dim: rgba(13,148,136,0.10);
    --hairline: #dfe9eb;
    --hairline-strong: #cfdee1;
    --god-blue: #0d9488;
    --god-cyan: #0d9488;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    background: var(--paper); color: var(--slate);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  h1, h2, h3, h4, .display { font-family: 'Space Grotesk', sans-serif;
    color: var(--ink); letter-spacing: -0.028em; line-height: 1.08; font-weight: 600; }
  a { color: inherit; text-decoration: none; }
  img, svg, video { max-width: 100%; }
  ::selection { background: var(--cyan-wash); color: var(--ink); }
  :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

  .skip { position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--cyan); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 500; }
  .skip:focus { left: 0; }

  /* The void build layered a vignette and an animated film grain over the page.
     Both only read against near-black; on white the grain's screen blend is a
     no-op and the vignette is a grey smudge. Neutralised here rather than
     removed from each template. */
  .vignette, .grain { display: none !important; }

  section { padding: 11vh var(--gutter); max-width: 1180px; margin: 0 auto; }
  .content { position: relative; background: var(--paper); }

  .section-label { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--cyan-deep); margin-bottom: 12px; }
  .section-head { font-size: clamp(26px, 3.6vw, 42px); max-width: 20ch; margin-bottom: 8px; }
  .section-sub { font-size: 16px; color: var(--slate); max-width: 56ch; margin-top: 14px; }

  .reveal { opacity: 0; transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.visible, .reveal.in { opacity: 1; transform: none; }

  /* ── buttons ─────────────────────────────────────────────── */
  /* min-height is the touch target, not decoration — 44px is the floor the
     mobile audit checks for. */
  .btn, .btn-primary, .btn-ghost, .price-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
    padding: 12px 22px; border-radius: 100px; border: 1px solid transparent;
    cursor: pointer; min-height: 44px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease),
                background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
  .btn-primary { background: var(--ink); color: #fff; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(11,31,36,.22); }
  .btn-ghost { border-color: var(--rule); color: var(--ink); background: #fff; }
  .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan-deep); }
  .btn-primary .arrow, .btn .arrow { transition: transform .35s var(--ease); }
  .btn-primary:hover .arrow, .btn:hover .arrow { transform: translateX(3px); }

  /* ── nav ─────────────────────────────────────────────────── */
  /* Transparent at rest so the hero's cyan wash runs unbroken to the top edge;
     glass only once content is genuinely passing underneath.

     width:100vw, not 100%. A fixed element sizes against the initial
     containing block, and the comparison table's min-width:560px widens that
     block — so width:100% fed the bar's own width back in and rendered it
     wider than the screen. Viewport units break the loop. */
  .nav { position: fixed; top: 0; left: 0; width: 100vw; z-index: 60;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px var(--gutter);
    background: transparent; border-bottom: 1px solid transparent;
    transition: background .45s var(--ease), border-color .45s var(--ease),
                box-shadow .45s var(--ease); }
  .nav.scrolled { background: rgba(255,255,255,.62);
    backdrop-filter: blur(26px) saturate(190%);
    -webkit-backdrop-filter: blur(26px) saturate(190%);
    border-bottom-color: rgba(13,148,136,.12);
    box-shadow: 0 10px 34px -22px rgba(11,31,36,.28); }
  .wordmark { font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 15px; letter-spacing: .3em; color: var(--ink); position: relative; z-index: 2; }
  .nav-links { display: flex; align-items: center; gap: 26px; }
  .nav-links a:not(.btn):not(.btn-primary) { font-size: 13.5px; color: var(--slate);
    transition: color .3s var(--ease); }
  .nav-links a:not(.btn):not(.btn-primary):hover { color: var(--ink); }
  .nav-enter { font-size: 13.5px; color: var(--slate); display: inline-flex;
    align-items: center; gap: 8px; min-height: 44px; background: none; border: none;
    font-family: inherit; cursor: pointer; transition: color .3s var(--ease); }
  .nav-enter:hover { color: var(--cyan-deep); }
  .nav-enter .arrow { transition: transform .35s var(--ease); }
  .nav-enter:hover .arrow { transform: translateX(3px); }

  /* Sits above the sheet so the close affordance stays visible and tappable. */
  .burger { display: none; width: 44px; height: 44px; border: none; background: none;
    cursor: pointer; align-items: center; justify-content: center; position: relative; z-index: 2; }
  .burger span { display: block; width: 20px; height: 1.5px; background: var(--ink);
    position: relative; transition: transform .3s var(--ease), opacity .2s; }
  .burger span::before, .burger span::after { content: ''; position: absolute; left: 0;
    width: 20px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
  .burger span::before { top: -6px; }
  .burger span::after { top: 6px; }
  .nav.open .burger span { transform: rotate(45deg); }
  .nav.open .burger span::before { transform: rotate(-90deg) translateX(6px); }
  .nav.open .burger span::after { opacity: 0; }

  /* ── sub-page header + prose ─────────────────────────────── */
  .page-head { padding: 20vh var(--gutter) 7vh; max-width: 900px; margin: 0 auto; text-align: center; }
  .page-head h1 { font-size: clamp(34px, 5.4vw, 62px); margin-bottom: 20px; }
  .page-head .lede { font-size: 18px; color: var(--slate); max-width: 680px; margin: 0 auto; }
  .crumbs { padding: 0 var(--gutter); max-width: 1180px; margin: 0 auto 4vh;
    font-size: 12.5px; color: var(--slate-soft); letter-spacing: .04em; }
  .crumbs a { color: var(--slate-soft); }
  .crumbs a:hover { color: var(--cyan-deep); }

  .prose { max-width: 760px; margin: 0 auto; }
  .prose h2 { font-size: clamp(24px, 3vw, 34px); margin: 6vh 0 18px; }
  .prose h3 { font-size: 19px; margin: 4vh 0 12px; color: var(--ink); }
  .prose p { color: var(--slate); margin-bottom: 18px; line-height: 1.75; }
  .prose ul { color: var(--slate); margin: 0 0 20px 20px; line-height: 1.8; }
  .prose li { margin-bottom: 8px; }
  .prose strong { color: var(--ink); font-weight: 600; }
  .prose a { color: var(--cyan-deep); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .prose a:hover { color: var(--cyan); }

  .soon, .soon-tag { display: inline-block; font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--slate-soft); border: 1px solid var(--rule);
    border-radius: 100px; padding: 3px 10px; margin-left: 8px; vertical-align: middle;
    font-weight: 400; }

  .page-cta { text-align: center; padding: 10vh var(--gutter);
    background: var(--mist); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    max-width: none; }

  /* ── stats ───────────────────────────────────────────────── */
  .stats-band { display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    padding: 0; max-width: 1180px; margin: 0 auto; }
  .stat { padding: 34px 22px; text-align: center; border-right: 1px solid var(--rule-soft); }
  .stat:last-child { border-right: none; }
  .stat-n { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: clamp(28px, 3.4vw, 40px); color: var(--cyan-deep); letter-spacing: -.03em; line-height: 1; }
  .stat-l { display: block; margin-top: 6px; font-size: 12.5px; color: var(--slate-soft); }

  /* ── capability grid ─────────────────────────────────────── */
  .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--rule); border: 1px solid var(--rule); border-radius: 16px;
    overflow: hidden; margin-top: 38px; }
  .cap { background: #fff; padding: 28px 24px 30px; transition: background .3s var(--ease); }
  .cap:hover { background: var(--mist); }
  .cap-ic { width: 24px; height: 24px; color: var(--cyan); margin-bottom: 14px; }
  .cap h3 { font-size: 16px; margin-bottom: 8px; }
  .cap p { font-size: 13.5px; color: var(--slate); }

  /* ── pipeline rail ───────────────────────────────────────── */
  .rail-head { display: flex; align-items: baseline; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
  .rail-head p { font-size: 13.5px; color: var(--slate-soft); }
  .track { display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: #fff; }
  .node { position: relative; padding: 20px 18px 22px;
    border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
  .node:nth-child(3n) { border-right: none; }
  .node:nth-last-child(-n+3) { border-bottom: none; }
  .node .n { font-family: 'Space Grotesk', sans-serif; font-size: 11px;
    color: var(--slate-soft); letter-spacing: .1em; }
  .node .who { display: block; margin-top: 8px; font-family: 'Space Grotesk', sans-serif;
    font-weight: 600; font-size: 13.5px; color: var(--ink); line-height: 1.25; }
  .node .what { display: block; margin-top: 6px; font-size: 12px; color: var(--slate); }
  .node .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--cyan); }
  .node.on .bar { width: 100%; transition: width 1.1s linear; }
  .node.on .who { color: var(--cyan-deep); }
  .gate { background: var(--cyan-wash); }
  .gate .who { color: var(--cyan-deep); }

  /* ── comparison table ────────────────────────────────────── */
  /* The table keeps min-width:560px so its columns stay readable, and scrolls
     inside this wrapper. contain:paint stops that overflow widening the initial
     containing block — without it every position:fixed element (the nav)
     resolves its width against 560px instead of the viewport. */
  .vs-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 16px;
    margin-top: 34px; background: #fff; -webkit-overflow-scrolling: touch;
    max-width: 100%; contain: paint; }
  .vs-table { width: 100%; border-collapse: collapse; min-width: 560px; }
  .vs-table th, .vs-table td { padding: 16px 20px; text-align: left; font-size: 13.5px; }
  .vs-table thead th { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--slate-soft);
    border-bottom: 1px solid var(--rule); background: var(--mist); }
  .vs-table thead th:last-child { color: var(--cyan-deep); }
  .vs-table td { color: var(--slate); border-bottom: 1px solid var(--rule-soft); }
  .vs-table tr:last-child td { border-bottom: none; }
  .vs-table td:first-child { color: var(--ink); font-weight: 500; }
  .vs-yes { color: var(--cyan-deep); font-weight: 500; }

  /* ── channels ────────────────────────────────────────────── */
  .channels-sec { text-align: center; }
  .channels { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 36px; }
  .chan { display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: var(--slate); transition: color .3s var(--ease); }
  .chan:hover { color: var(--cyan-deep); }
  .chan svg { width: 26px; height: 26px; }
  .chan span { font-size: 12.5px; }

  /* ── security ────────────────────────────────────────────── */
  .sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--rule); border: 1px solid var(--rule); border-radius: 16px;
    overflow: hidden; margin-top: 36px; }
  .sec-item { background: #fff; padding: 30px 24px; }
  .sec-item svg { width: 22px; height: 22px; color: var(--cyan); margin-bottom: 12px; }
  .sec-item h4 { font-size: 15px; margin-bottom: 8px; }
  .sec-item p { font-size: 13px; color: var(--slate); }

  /* ── pricing ─────────────────────────────────────────────── */
  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px; }
  .price { border: 1px solid var(--rule); border-radius: 18px; padding: 30px 26px 32px;
    background: #fff; display: flex; flex-direction: column; position: relative; }
  .price.featured { border-color: var(--cyan); box-shadow: 0 18px 50px -26px rgba(13,148,136,.45); }
  .price-badge { position: absolute; top: -11px; left: 26px; background: var(--cyan);
    color: #fff; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 100px; }
  .price-name { font-family: 'Space Grotesk', sans-serif; font-size: 13px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--slate-soft); }
  .price-amt { font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 600;
    color: var(--ink); letter-spacing: -.03em; margin: 10px 0 20px; }
  .price-amt span { font-size: 14px; font-weight: 400; color: var(--slate-soft); }
  .price ul { list-style: none; margin-bottom: 26px; flex: 1; }
  .price li { font-size: 13.5px; color: var(--slate); padding: 7px 0 7px 22px; position: relative; }
  .price li::before { content: ''; position: absolute; left: 0; top: 14px; width: 10px; height: 2px;
    background: var(--cyan); border-radius: 2px; }
  .price-cta { width: 100%; margin-top: auto; }
  .price-cta.solid { background: var(--ink); color: #fff; }
  .price-cta.solid:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(11,31,36,.22); }
  .price-cta.ghost { border-color: var(--rule); color: var(--ink); background: #fff; }
  .price-cta.ghost:hover { border-color: var(--cyan); color: var(--cyan-deep); }
  .price-note { grid-column: 1/-1; text-align: center; margin-top: 22px;
    font-size: 12.5px; color: var(--slate-soft); }

  /* ── faq ─────────────────────────────────────────────────── */
  .faq-list { max-width: 760px; margin: 34px auto 0; border: 1px solid var(--rule);
    border-radius: 16px; overflow: hidden; background: #fff; }
  .faq-item { border-bottom: 1px solid var(--rule-soft); }
  .faq-item:last-child { border-bottom: none; }
  .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font-family: 'Space Grotesk', sans-serif; font-size: 15px; color: var(--ink);
    padding: 20px 54px 20px 24px; position: relative; min-height: 56px; }
  .faq-q::after { content: '+'; position: absolute; right: 22px; top: 50%;
    transform: translateY(-50%); color: var(--cyan); font-size: 20px;
    transition: transform .3s var(--ease); }
  .faq-q.open::after,
  .faq-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
  .faq-a.open { max-height: 420px; }
  .faq-a p { padding: 0 24px 22px; font-size: 14px; color: var(--slate); line-height: 1.75; }

  /* ── cta + footer ────────────────────────────────────────── */
  .cta, .cta-sec { text-align: center; background: var(--mist);
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: none; }
  .cta h2, .cta-sec h2 { font-size: clamp(30px, 4.4vw, 52px); }
  .cta p, .cta-sec p { margin: 16px auto 28px; max-width: 44ch; color: var(--slate); }

  .footer { max-width: 1180px; margin: 0 auto; padding: 70px var(--gutter) 50px;
    display: grid; grid-template-columns: 1.4fr 2.6fr; gap: 44px; }
  .foot-tag { font-size: 13px; color: var(--slate-soft); margin-top: 10px; max-width: 30ch; }
  .foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .foot-h { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--slate-soft); margin-bottom: 12px; }
  .foot-col a { display: block; font-size: 13.5px; padding: 5px 0; color: var(--slate);
    transition: color .3s var(--ease); }
  .foot-col a:hover { color: var(--cyan-deep); }
  .foot-copy { grid-column: 1 / -1; max-width: 1180px; margin: 0 auto; padding-top: 24px;
    font-size: 12.5px; color: var(--slate-soft); border-top: 1px solid var(--rule-soft); }

  /* ── responsive ──────────────────────────────────────────── */
  @media (max-width: 1020px) {
    .cap-grid, .sec-grid { grid-template-columns: repeat(2, 1fr); }
    .price-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
    .footer { grid-template-columns: 1fr; gap: 34px; }
  }
  @media (max-width: 820px) {
    :root { --gutter: 22px; }
    .nav { padding: 12px var(--gutter); }
    .burger { display: flex; }
    /* Full-height sheet rather than a cramped dropdown — thumbs reach the
       bottom of a phone far more easily than the top. box-sizing:border-box is
       global, but a fixed sheet still needs an explicit width or the padding
       pushes the CTA past the right edge. */
    .nav-links { position: fixed; top: 56px; left: 0; bottom: 0; width: 100vw;
      background: rgba(255,255,255,.98);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      flex-direction: column; align-items: stretch; justify-content: flex-start;
      gap: 0; padding: 14px var(--gutter) calc(24px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--rule);
      transform: translateY(-8px); opacity: 0; pointer-events: none;
      transition: opacity .3s var(--ease), transform .3s var(--ease);
      overflow-y: auto; }
    .nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
    .nav-links a:not(.btn):not(.btn-primary), .nav-links .nav-enter {
      font-size: 17px; padding: 16px 0; min-height: 52px;
      display: flex; align-items: center; border-bottom: 1px solid var(--rule-soft); }
    .nav-links .btn, .nav-links .btn-primary { margin-top: 18px; width: 100%;
      padding: 15px 22px; font-size: 15px; }
    section { padding: 8vh var(--gutter); }
    .page-head { padding: 16vh var(--gutter) 6vh; }
    .stats-band { grid-template-columns: repeat(2, 1fr); }
    .stat { border-bottom: 1px solid var(--rule-soft); }
    .stat:nth-child(2n) { border-right: none; }
    .stat:nth-last-child(-n+2) { border-bottom: none; }
    .track { grid-template-columns: repeat(2, 1fr); }
    .node:nth-child(3n) { border-right: 1px solid var(--rule-soft); }
    .node:nth-child(2n) { border-right: none; }
    .node:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule-soft); }
    .node:last-child { border-bottom: none; }
    .channels { gap: 26px 32px; }
    .foot-cols { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .cap-grid, .sec-grid, .track { grid-template-columns: 1fr; }
    .cap, .sec-item, .node { border-right: none !important; }
    .node { border-bottom: 1px solid var(--rule-soft) !important; }
    .node:last-child { border-bottom: none !important; }
    .section-head { font-size: clamp(23px, 6.6vw, 30px); max-width: 100%; }
    .page-head h1 { font-size: clamp(28px, 8vw, 38px); }
    .stats-band { grid-template-columns: repeat(2, 1fr); }
    .foot-cols { grid-template-columns: 1fr; }
    .faq-q { font-size: 14.5px; padding-right: 48px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .node .bar { transition: none; }
  }