/* The shared stylesheet for every page on the site.
 *
 * This lived inside index.html until the product page was added; two pages
 * sharing one masthead, one footer and one set of colours cannot each keep
 * their own copy of it without drifting apart within a week. Page-specific
 * rules stay in that page's own <style> block.
 */
  /* ── palette ───────────────────────────────────────────────────────────────
     Bold and saturated, in the manner of Google Cloud's marketing pages: deep
     primary blue, a navy block, vivid tint fills on big-radius cards, and type
     that is large and heavy. The hues are ours rather than Google's exact brand
     set, but the structure is theirs — one strong primary, one dark section,
     and pastel fills doing the work that borders used to do.

     The semantic trio (allowed / needs a person / blocked) stays green, amber
     and red and is deliberately NOT reused decoratively, so colour on a
     decision still means something. */
  :root {
    --blue:    #0B57D0;
    --blue-b:  #3186FF;
    --blue-d:  #06409E;
    --navy:    #001D35;
    --purple:  #6E3AE8;
    --cyan:    #007990;

    --sky:     #DCF1FF;
    --mint:    #DAF6E4;
    --cream:   #FFF0D6;
    --blush:   #FFE4E0;
    --lilac:   #EFE6FF;

    --page:    #FFFFFF;
    --surface: #FFFFFF;
    --line:    #DADCE0;

    --text:    #1F1F1F;
    --text-2:  #444746;
    --text-3:  #5F6368;
    --on-dark: #FFFFFF;
    --on-dark-2: #C7D7E6;

    --ok:      #0A7B44;
    --ok-bg:   #DAF6E4;
    --warn:    #9A5B00;
    --warn-bg: #FFF0D6;
    --bad:     #C5221F;
    --bad-bg:  #FFE4E0;

    --sans: "Figtree", "Google Sans", Roboto, -apple-system, system-ui, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --wide: 1180px;
    --r-lg: 28px;
    --r-md: 24px;
    --r-sm: 12px;

    color-scheme: light;
  }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }

  body {
    margin: 0; background: var(--page); color: var(--text);
    font-family: var(--sans); font-size: 17px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; }
  .wrap { max-width: var(--wide); margin: 0 auto; padding-inline: 28px; }

  /* Heavy and tight: the single biggest lever on "bold". */
  h1, h2, h3 { text-wrap: balance; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
  p { margin: 0; }

  a { color: var(--blue); }
  a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--blue-b); outline-offset: 2px; }

  .eyebrow {
    font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--blue); margin-bottom: 16px;
  }

  /* Visually hidden, still read aloud. Lost when the stylesheet was replaced,
     which put a literal "Work email" label beside the hero field. */
  .sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* The honeypot. Not .sr: this one must be absent to people and to assistive
     technology alike, and only present for something filling in every field. */
  .hp { display: none; }

  /* ── logo ─────────────────────────────────────────────── */
  .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
  .logo svg { width: 42px; height: 42px; flex: none; }
  .logo .name { font-weight: 800; font-size: 22px; letter-spacing: -0.035em; }

  /* ── masthead ─────────────────────────────────────────── */
  .masthead { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
  .masthead .wrap { height: 80px; display: flex; align-items: center; gap: 26px; }
  /* The nav takes the slack, which puts it and the button together on the
     right exactly as justify-content: space-between did when the button was
     still inside the nav. */
  .masthead nav { display: flex; align-items: center; gap: 26px; font-size: 15px; margin-left: auto; }
  /* :not(.btn) — these are (0,2,1) and would otherwise beat .btn (0,1,0) and
     repaint the button's label in body grey on its own fill. */
  .masthead nav a:not(.btn) { color: var(--text-2); text-decoration: none; font-weight: 600; }
  .masthead nav a:not(.btn):hover { color: var(--blue); }
  /* Narrow screens used to hide every link and leave only the button, which
     meant that on a phone there was no way to reach the other page at all.
     They wrap to a second row instead: the logo and the call to action keep
     the first row, the links get the second. */
  @media (max-width: 820px) {
    .masthead .wrap {
      height: auto; padding-block: 13px;
      flex-wrap: wrap; row-gap: 11px; justify-content: space-between; gap: 14px;
    }
    .masthead nav {
      order: 3; width: 100%; margin-left: 0;
      /* Left aligned rather than spread: space-between pushed the four links
         into the far corners of a tablet and they stopped reading as one
         menu. Wrapping is allowed so that a label breaks onto its own line
         rather than across the middle of itself. */
      flex-wrap: wrap; justify-content: flex-start; gap: 9px 18px; font-size: 14.5px;
    }
    .masthead nav a { white-space: nowrap; }
    .masthead .logo svg { width: 34px; height: 34px; }
    .masthead .logo .name { font-size: 19px; }
    .masthead .btn { padding: 10px 18px; font-size: 14.5px; }
    /* The underline would otherwise sit on top of the page below. */
    .masthead nav a[aria-current="page"] { text-underline-offset: 5px; }
  }
  /* On a phone the nav is only this button, and "Get started" was breaking
     across two lines inside the pill. */
  .masthead nav .btn { white-space: nowrap; }

  /* Every page carries the same menu, so the menu has to say which page you
     are on. Underlined rather than merely recoloured: colour alone is not a
     distinction for a reader who cannot see it. */
  .masthead nav a[aria-current="page"] {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 7px;
  }

  /* The same links again at the bottom, for anyone who has read to the end
     rather than scrolled back up. */
  footer nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14.5px; }
  footer nav a { color: var(--on-dark-2); text-decoration: none; font-weight: 600; }
  footer nav a:hover { color: #fff; }
  footer nav a[aria-current="page"] { color: #fff; }

  /* ── buttons: pill, solid, confident ──────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--sans); font-weight: 700; font-size: 16px;
    padding: 14px 28px; border-radius: 999px; border: 2px solid var(--blue);
    background: var(--blue); color: #fff; cursor: pointer; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
  }
  .btn:hover { background: var(--blue-d); border-color: var(--blue-d); transform: translateY(-1px); }
  .btn-sm { font-size: 15px; padding: 10px 20px; }

  /* ── hero ─────────────────────────────────────────────── */
  .hero {
    position: relative; overflow: hidden; padding-block: 96px 92px;
    background:
      radial-gradient(52% 62% at 88% 6%, rgba(110,58,232,.28), transparent 62%),
      radial-gradient(46% 58% at 8% 90%, rgba(0,168,200,.26), transparent 62%),
      linear-gradient(180deg, var(--sky) 0%, #F2F8FF 62%, #FFFFFF 100%);
  }
  .hero > .wrap { position: relative; }
  .hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,500px); gap: 60px; align-items: center; }
  @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } .hero { padding-block: 56px 54px; } }

  .hero h1 { font-size: clamp(40px, 5.6vw, 66px); line-height: 1.02; margin-bottom: 22px; max-width: 17ch; }
  .lede { font-size: clamp(17.5px, 1.7vw, 20.5px); color: var(--text-2); max-width: 54ch; margin-bottom: 32px; }

  .stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
    margin-top: 46px; padding-top: 30px; border-top: 2px solid rgba(11,87,208,.18);
  }
  @media (max-width: 460px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
  .stat b { display: block; font-size: 38px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
  .stat:nth-child(2) b { color: var(--purple); }
  .stat:nth-child(3) b { color: var(--cyan); }
  .stat span { font-size: 14.5px; color: var(--text-3); display: block; margin-top: 8px; line-height: 1.35; }

  /* hero capture */
  .hero-cta form { display: flex; gap: 12px; max-width: 520px; margin: 0; }
  .hero-cta input {
    flex: 1; min-width: 0; font-family: var(--sans); font-size: 16px; color: var(--text);
    background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 13px 20px;
  }
  .hero-cta input::placeholder { color: var(--text-3); }
  .hero-cta input:focus { border-color: var(--blue); }
  .hero-cta .btn { white-space: nowrap; }
  @media (max-width: 560px) { .hero-cta form { flex-direction: column; } .hero-cta input { border-radius: 14px; } }
  .hero-cta-note { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--text-3); }
  .hero-cta-note b { color: var(--blue); font-weight: 800; }
  .hero-cta-done { margin-top: 14px; font-size: 15px; color: var(--text-2); }
  .hero-cta-done b { color: var(--ok); }
  .cta-alt { margin-top: 20px; font-size: 16px; }
  .cta-alt a { color: var(--text-2); text-decoration: none; font-weight: 600; }
  .cta-alt a:hover { color: var(--blue); }

  /* ── console ──────────────────────────────────────────── */
  .console {
    background: #fff; border-radius: var(--r-md); overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,29,53,.08), 0 24px 60px -18px rgba(0,29,53,.35);
  }
  .console-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 20px; background: var(--navy); color: #fff;
    font-size: 13px; font-weight: 700;
  }
  .live { display: inline-flex; align-items: center; gap: 7px; color: #6EE7A8; font-weight: 800; }
  .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6EE7A8; }

  .feed { font-family: var(--mono); font-size: 12.5px; }
  .ev { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid #EDF0F3; }
  .ev:last-child { border-bottom: 0; }
  .t { color: var(--text-3); }
  .who { color: var(--blue); font-weight: 500; }
  .arrow { color: var(--line); }
  .what { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .why { color: var(--text-3); display: block; font-size: 11px; margin-top: 3px; }
  .tag { font-family: var(--sans); font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
  .tag-ok   { color: var(--ok);   background: var(--ok-bg); }
  .tag-bad  { color: var(--bad);  background: var(--bad-bg); }
  .tag-warn { color: var(--warn); background: var(--warn-bg); }
  @media (max-width: 460px) { .ev { grid-template-columns: 1fr auto; } .t { display: none; } }

  /* ── sections: a bold colour rhythm ───────────────────── */
  section { padding-block: 104px; }
  @media (max-width: 720px) { section { padding-block: 64px; } }
  section h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; max-width: 22ch; margin-bottom: 16px; }
  .sub { color: var(--text-2); max-width: 60ch; font-size: 18px; }

  /* 1. the gap — deep navy block */
  #problem { background: var(--navy); color: var(--on-dark); }
  #problem h2, #problem h3 { color: #fff; }
  #problem .eyebrow { color: #7FD4FF; }
  #problem .sub, #problem p { color: var(--on-dark-2); }
  .claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
  #problem .claim { background: rgba(255,255,255,.07); border-radius: var(--r-md); padding: 30px 28px; }
  #problem .claim h3 { font-size: 20px; margin-bottom: 10px; }
  .claim p { font-size: 16px; }
  @media (max-width: 880px) { .claims { grid-template-columns: 1fr; } }

  /* 2. how it works — white, with tinted cards */
  .decide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
  .dec { border-radius: var(--r-md); padding: 30px 26px 32px; }
  .dec-ok    { background: var(--mint); }
  .dec-bad   { background: var(--blush); }
  .dec-warn  { background: var(--cream); }
  .dec-watch { background: var(--sky); }
  .dec .tag { display: inline-block; margin-bottom: 18px; background: rgba(255,255,255,.75); }
  .dec h3 { font-size: 19px; margin-bottom: 8px; }
  .dec p { font-size: 15.5px; color: var(--text-2); }
  @media (max-width: 1000px) { .decide { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .decide { grid-template-columns: 1fr; } }

  /* the three details, below the decisions */
  #how .claims { margin-top: 28px; }
  #how .claim { background: #F6F8FC; border-radius: var(--r-md); padding: 28px 26px; }
  #how .claim h3 { font-size: 19px; margin-bottom: 9px; }

  /* 3. what you get — sky band */
  #proof { background: var(--sky); }
  .diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
  .diff { background: #fff; border-radius: var(--r-md); padding: 34px 30px; }
  .diff .mark { width: 44px; height: 6px; border-radius: 999px; background: var(--blue); margin-bottom: 22px; }
  .diffs > .diff:nth-child(2) .mark { background: var(--purple); }
  .diffs > .diff:nth-child(3) .mark { background: var(--cyan); }
  .diff h3 { font-size: 20px; margin-bottom: 11px; }
  .diff p { font-size: 16px; color: var(--text-2); }
  @media (max-width: 900px) { .diffs { grid-template-columns: 1fr; } }

  .pull {
    margin-top: 56px; padding: 34px 38px; border-radius: var(--r-md);
    background: var(--navy); color: #fff;
    font-size: clamp(20px, 2.4vw, 27px); line-height: 1.34; letter-spacing: -0.025em; max-width: 64ch;
  }
  .pull b { font-weight: 800; color: #7FD4FF; }

  /* 4. coverage — white */
  .fw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; margin-top: 48px; }
  .fw { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
  .fw span:first-child { display: flex; align-items: baseline; gap: 12px; font-weight: 600; }
  .fw span:first-child::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); transform: translateY(-1px); }
  .fw:nth-child(3n+2) span:first-child::before { background: var(--purple); }
  .fw:nth-child(3n)   span:first-child::before { background: var(--cyan); }
  .fw span:last-child { font-size: 14.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
  .fw-total { margin-top: 28px; font-size: 16.5px; color: var(--text-2); }
  .fw-total b { color: var(--blue); font-weight: 800; }
  @media (max-width: 760px) { .fw-grid { grid-template-columns: 1fr; gap: 0; } }

  /* 5. early access.
     Full bleed and left aligned in the same container as every other section,
     because a centred box floating in white margins read as a different
     component bolted on. The gradient stays — it should still be the loudest
     block on the page — but it is now the section's background rather than a
     card's, so the colour lands without the seams. */
  #signup {
    padding-block: 104px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue) 0%, #2E5BE0 44%, var(--purple) 100%);
  }
  .signup-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 72px; align-items: start;
  }
  @media (max-width: 940px) { .signup-grid { grid-template-columns: 1fr; gap: 44px; } }

  #signup .eyebrow { color: #A9D7FF; }
  #signup h2 { color: #fff; max-width: 18ch; }
  #signup .sub { color: rgba(255,255,255,.95); margin-bottom: 32px; }
  #signup a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

  /* Matches the claim/diff cards elsewhere: a rule on top, a bold lead-in,
     then the explanation. */
  .perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
  .perks li {
    font-size: 15.5px; color: rgba(255,255,255,.95);
    padding-top: 18px; border-top: 3px solid rgba(255,255,255,.4);
  }
  .perks b { display: block; color: #fff; font-weight: 800; margin-bottom: 4px; }

  .signup-main form { display: flex; gap: 12px; max-width: 520px; margin: 0; }
  .signup-main input {
    flex: 1; min-width: 0; font-family: var(--sans); font-size: 16px; color: var(--text);
    background: #fff; border: 2px solid transparent; border-radius: 999px; padding: 14px 20px;
  }
  .signup-main input::placeholder { color: var(--text-3); }
  #signup .btn { background: #fff; border-color: #fff; color: var(--blue-d); white-space: nowrap; }
  #signup .btn:hover { background: var(--sky); border-color: var(--sky); color: var(--blue-d); }
  @media (max-width: 560px) { .signup-main form { flex-direction: column; } .signup-main input { border-radius: 14px; } }

  .note { font-size: 14px; color: rgba(255,255,255,.95); margin: 18px 0 0; max-width: 54ch; }
  .done { font-size: 15.5px; color: #fff; margin: 20px 0 0; max-width: 54ch; }
  .done b { color: #6EE7A8; }
  .done b.is-error, .hero-cta-done b.is-error { color: #FFD3CD; }
  .hero-cta-done b.is-error { color: var(--bad); }
  .status {
    font-size: 14px; color: rgba(255,255,255,.95);
    margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.3);
  }

  /* ── footer ───────────────────────────────────────────── */
  footer { background: var(--navy); color: var(--on-dark-2); padding-block: 40px 52px; font-size: 14.5px; }
  footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
  footer .logo { color: #fff; }
  footer a { color: #9FD2FF; }