/* PacketPulse — the shared look of the product site.
 *
 * Extracted from index.html so the self-test page and the marketing page are
 * one design rather than two that drift. The operations palette, in dark and
 * light, shared with the Flutter app and the PDF reports, so the site and the
 * product look like the same thing.
 *
 * Every colour is a token below. assets/packetpulse-theme.js sets data-theme on
 * <html> to "light" or "dark" (resolving "match system") before first paint;
 * without it the page is dark.
 */
  :root {
    color-scheme: dark;
    --bg: #0D0718;
    --surface: #170E28;
    --surface-raised: #22163B;
    --border: #3D2C5F;
    --ink: #F8F5FF;
    --muted: #A89AC4;
    --accent: #E10092;
    --on-accent: #FFFFFF;
    --accent-wash: rgba(225, 0, 146, 0.12);
    --accent-edge: rgba(225, 0, 146, 0.32);
    --success: #22C55E;
    --danger: #F43F5E;
    --warning: #F59E0B;
    --warning-wash: rgba(245, 158, 11, 0.07);
    --warning-edge: rgba(245, 158, 11, 0.28);
    --header-bg: rgba(13, 7, 24, 0.86);
    --shadow: rgba(0, 0, 0, 0.4);
    --max: 1120px;
  }

  /* The app's operations light palette, matching Tata Play Fiber's clean broadband plans theme */
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #F8F7FB;
    --surface: #FFFFFF;
    --surface-raised: #F1EEF8;
    --border: #DED7EB;
    --ink: #141414;
    --muted: #5C546B;
    --accent: #C90082;
    --on-accent: #FFFFFF;
    --accent-wash: rgba(201, 0, 130, 0.08);
    --accent-edge: rgba(201, 0, 130, 0.30);
    --success: #15803D;
    --danger: #BE123C;
    --warning: #B45309;
    --warning-wash: rgba(180, 83, 9, 0.07);
    --warning-edge: rgba(180, 83, 9, 0.30);
    --header-bg: rgba(248, 247, 251, 0.88);
    --shadow: rgba(34, 0, 70, 0.08);
  }

  /* Inline icons draw in currentColor; these give them the palette's. */
  .ic-accent { color: var(--accent); }
  .ic-warning { color: var(--warning); }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  code, .mono { font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; }

  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

  /* ---- header ---- */
  header {
    position: sticky; top: 0; z-index: 10;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .bar { display: flex; align-items: center; gap: 12px; height: 62px; }
  .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
  .logo-mark {
    width: 32px; height: 32px; display: grid; place-items: center;
    border-radius: 8px;
    background: var(--accent-wash);
    border: 1px solid var(--accent-edge);
  }
  .logo-text { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; }
  nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
  nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
  nav a:hover { color: var(--ink); }

  .btn {
    display: inline-block; padding: 9px 18px; border-radius: 10px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: transform .15s ease, background .15s ease;
  }
  .btn-primary { background: linear-gradient(135deg, #E10092 0%, #6B00DD 100%); color: var(--on-accent); }
  .btn-primary:hover { opacity: 0.94; transform: translateY(-1px); }
  .btn-ghost { border: 1px solid var(--border); color: var(--ink); }

  /* Light, dark, match system: three buttons, the chosen one pressed. Three
     rather than a toggle, because "follow the device" is a choice of its own
     and a two-state switch has nowhere to put it. */
  .theme-switch {
    display: inline-flex; padding: 3px; gap: 2px;
    border: 1px solid var(--border); border-radius: 10px;
  }
  .theme-switch button {
    display: grid; place-items: center; width: 30px; height: 28px;
    border: 0; border-radius: 7px; background: none; color: var(--muted);
    cursor: pointer;
  }
  .theme-switch button:hover { color: var(--ink); }
  .theme-switch button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); }
  .theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* ---- hero ---- */
  /* Top and bottom only: the hero is also a .wrap, and a padding shorthand
     here zeroed its side gutters, so the headline touched the screen edge on
     anything narrower than the 1120px column. */
  .hero { padding-top: 84px; padding-bottom: 64px; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: 100px; font-size: 12.5px;
    background: var(--accent-wash);
    border: 1px solid var(--accent-edge);
    color: var(--accent); margin-bottom: 22px;
  }
  h1 {
    font-size: clamp(34px, 5.5vw, 56px); line-height: 1.1;
    letter-spacing: -1.6px; font-weight: 700; max-width: 17ch;
  }
  .lede {
    margin-top: 20px; font-size: clamp(16px, 2vw, 19px);
    color: var(--muted); max-width: 62ch;
  }
  .cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

  /* ---- the artefact ---- */
  .terminal {
    margin-top: 52px; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface);
    box-shadow: 0 24px 60px var(--shadow);
  }
  .terminal-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 14px; border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
  }
  .dot { width: 10px; height: 10px; border-radius: 50%; }
  .terminal-title { margin-left: 10px; font-size: 12px; color: var(--muted); }
  .terminal-body { padding: 18px; font-size: 12.5px; overflow-x: auto; }
  .terminal-body pre { white-space: pre; color: var(--muted); }
  .ok { color: var(--success); } .bad { color: var(--danger); } .warn { color: var(--warning); }
  .hl { color: var(--ink); }

  /* ---- sections ---- */
  section { padding: 72px 0; border-top: 1px solid var(--border); }
  h2 { font-size: clamp(24px, 3.5vw, 32px); letter-spacing: -0.8px; }
  .section-lede { margin-top: 12px; color: var(--muted); max-width: 60ch; }

  .grid { display: grid; gap: 18px; margin-top: 40px; }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

  .card {
    padding: 24px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border);
  }
  .card h3 { font-size: 16px; margin-bottom: 9px; display: flex; align-items: center; gap: 9px; }
  .card p { color: var(--muted); font-size: 14.5px; }
  .card-icon {
    width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
    background: var(--accent-wash); flex-shrink: 0;
  }

  ul.checks { list-style: none; margin-top: 26px; }
  ul.checks li {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 9px 0; color: var(--muted); font-size: 14.5px;
  }
  ul.checks strong { color: var(--ink); font-weight: 600; }

  footer { border-top: 1px solid var(--border); padding: 34px 0; }
  .footer-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  .footer-row p { color: var(--muted); font-size: 13.5px; }
  .footer-links { margin-left: auto; display: flex; gap: 20px; }
  .footer-links a { color: var(--muted); font-size: 13.5px; text-decoration: none; }
  .footer-links a:hover { color: var(--ink); }

  /* A phone has room for the logo, the theme switch and Sign in, and no
     more: with the self-test button as well the header ran off the side of
     the page. The self-test stays one tap away in the footer. */
  @media (max-width: 480px) {
    .wrap { padding: 0 16px; }
    nav { gap: 10px; }
    nav .hide-xs { display: none; }
    .theme-switch button { width: 26px; }
  }

  /* The full set of links needs about 900px. Below that they ran off the
     side of the page from 681px down, so they go, and the in-page links stay
     reachable by scrolling. */
  @media (max-width: 900px) {
    nav .hide-sm { display: none; }
  }

  @media (max-width: 680px) {
    .hero { padding-top: 56px; padding-bottom: 40px; }
    section { padding: 52px 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
  }