/* Self-hosted webfonts.
   Subsets: latin + latin-ext only. Each file carries a unicode-range, so a
   browser fetches latin-ext ONLY if the page actually contains those
   characters - an English page pays nothing for it.
   Inter and JetBrains Mono are VARIABLE fonts: Google serves one identical
   blob for weights 400 and 600 (verified by checksum), so each is declared
   once with a weight RANGE instead of being shipped twice.
   Serving these from our own origin removes the last third-party request:
   no visitor IP reaches Google, and the CSP keeps style-src/font-src 'self'. */

/* Inter 400 600 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 400 600 - latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.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;
}

/* JetBrains Mono 400 600 - latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono 400 600 - latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.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;
}

/* Space Grotesk 600 - latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk 600 - latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-ext.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;
}

  :root{
    --bg: #1B1A17;
    --panel: #232220;
    --panel-2: #29271F;
    --line: #3A372F;
    --text: #EDEAE3;
    --muted: #9C978C;
    --amber: #D98E33;
    --rust: #C1502E;
    --rust-soft: rgba(193,80,46,0.14);
    --amber-soft: rgba(217,142,51,0.14);
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }

  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family:'Inter', -apple-system, sans-serif;
    line-height:1.55;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    margin:0;
    letter-spacing:-0.02em;
  }

  .mono{ font-family:'JetBrains Mono', monospace; }

  a{ color: inherit; }

  :focus-visible{
    outline: 2px solid var(--amber);
    outline-offset: 3px;
  }

  .wrap{
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- Top bar ---------- */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 28px 0 0;
  }
  .brand{
    font-family:'JetBrains Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--text);
  }
  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--muted);
    border: 1px solid var(--line);
    padding: 5px 10px;
    border-radius: 20px;
  }
  .status-dot{
    width:6px; height:6px; border-radius:50%;
    background: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-soft);
  }

  /* ---------- Hero ---------- */
  .hero{ padding: 64px 0 8px; }
  .hero h1{
    font-size: clamp(28px, 5vw, 38px);
    line-height:1.18;
    max-width: 15ch;
  }
  .hero h1 .hl{ color: var(--amber); }
  .hero p.sub{
    margin-top: 18px;
    max-width: 52ch;
    color: var(--muted);
    font-size: 16px;
  }

  /* ---------- Editor mockup (signature element) ---------- */
  .editor{
    margin-top: 40px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .editor-titlebar{
    display:flex;
    align-items:center;
    gap:8px;
    padding: 10px 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--muted);
  }
  .dot{ width:9px; height:9px; border-radius:50%; background: var(--line); }
  .editor-body{
    font-family:'JetBrains Mono', monospace;
    font-size: 13px;
    padding: 16px 0;
  }
  .code-line{
    display:flex;
    padding: 1px 18px;
    white-space: pre;
  }
  .ln{
    width: 24px;
    flex-shrink:0;
    color: #55524A;
    user-select:none;
  }
  .kw{ color: #E2A857; }
  .cls{ color: #B7C6E0; }
  .str{ color: #9FBF8F; }
  .plain{ color: var(--text); }

  .flag-wrap{ position:relative; }
  .squiggle{
    text-decoration: underline wavy var(--amber);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
  }
  .callout{
    margin: 6px 18px 10px 42px;
    padding: 10px 12px;
    background: var(--amber-soft);
    border-left: 2px solid var(--amber);
    border-radius: 4px;
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    color: #EAD9BC;
    line-height:1.5;
  }
  .callout b{ color: var(--amber); font-weight:600; }

  /* ---------- Section headers ---------- */
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  section{ padding: 56px 0; border-top: 1px solid var(--line); }
  section h2{ font-size: 22px; max-width: 30ch; }
  section > p.lede{ color: var(--muted); margin-top: 10px; max-width: 56ch; font-size: 15px; }

  /* ---------- Problems panel ---------- */
  .problems{
    margin-top: 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .problem-row{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 14px 16px;
    background: var(--panel);
  }
  .problem-row + .problem-row{ border-top: 1px solid var(--line); }
  .sev{
    flex-shrink:0;
    width: 16px; height:16px;
    margin-top: 2px;
    border-radius: 3px;
  }
  .sev.warn{ background: var(--amber-soft); border: 1.5px solid var(--amber); }
  .sev.err{ background: var(--rust-soft); border: 1.5px solid var(--rust); }
  .problem-text b{
    font-size: 14.5px;
    font-weight: 600;
  }
  .problem-text p{
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 13.5px;
  }

  /* ---------- Local vs cloud ---------- */
  .compare{
    margin-top: 26px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .compare-card{
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: var(--panel);
  }
  .compare-card.mine{ border-color: var(--amber); }
  .compare-card .tag{
    font-family:'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing:0.05em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .compare-card.mine .tag{ color: var(--amber); }
  .compare-card ul{ margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
  .compare-card.mine ul{ color: var(--text); }
  .compare-card li + li{ margin-top: 6px; }

  @media (max-width: 560px){
    .compare{ grid-template-columns: 1fr; }
  }

  /* ---------- Email capture ---------- */
  .capture{ border-top: 1px solid var(--line); padding: 60px 0 70px; }
  .capture h2{ font-size: 24px; }
  .capture p.lede{ margin-top: 10px; }
  form{
    margin-top: 22px;
    display:flex;
    gap: 10px;
    max-width: 440px;
    flex-wrap: wrap;
  }
  input[type="email"]{
    flex: 1 1 220px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
  }
  input[type="email"]::placeholder{ color: #6B6759; }
  button{
    background: var(--amber);
    color: #201A0E;
    border: none;
    padding: 12px 18px;
    border-radius: 6px;
    font-family:'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
  }
  button:hover{ filter: brightness(1.07); }
  .microcopy{ margin-top: 12px; color: var(--muted); font-size: 12.5px; }
  .form-msg{ margin-top: 14px; font-size: 13.5px; color: var(--amber); }
  [hidden]{ display:none !important; }

  /* ---------- Footer ---------- */
  footer{
    border-top: 1px solid var(--line);
    padding: 26px 0 40px;
    font-family:'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--muted);
  }
  footer a{ color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
  footer a:hover{ color: var(--text); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
  }

  /* Replaces former inline style="" attributes so the CSP needs no
     'unsafe-inline' in style-src. */
  .hero--first{ border-top:none; padding-bottom:0; }
  .editor-filename{ margin-left:6px; }