/*
  alventis.ai — site stylesheet.

  Extracted from index.html on the multi-page split. It was 882 lines inline
  on a single page; as a file the browser fetches it once and every
  subsequent page load is HTML only, which is what makes real navigation
  feel as quick as the anchor-jumping it replaced.

  Rebranded 2026-08: the :root block below was repointed from a dark
  navy/mint palette to paper-and-ink, and the override block at the end
  handles what a colour swap cannot — square corners, serif display type,
  monospace labels.
*/

    /* ── RESET & BASE ──────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* ── Alventis palette, 2026-08 ──────────────────────────────────────
         The previous values were a dark navy with a mint-teal accent. That
         combination is the default output of every SaaS page generator
         working today, which is a poor look for a company whose entire
         pitch is that it is more honest than its competitors.

         The fourteen names below are unchanged on purpose: 754 lines of
         rules and 178 classes reference them, so repointing the variables
         rebrands the whole page without touching a single selector or any
         of the JavaScript. */
      --bg:         #F2EDE3;   /* warm paper, not white and not navy */
      --surface:    #FBF8F2;
      --card:       #FBF8F2;
      --card-h:     #F2EDE3;   /* hover DARKENS now — the old card-h was a
                                  lift, which reads wrong on a light ground */
      --accent:     #101010;   /* the brand mark is ink; clay does emphasis */
      --accent-dim: rgba(180,72,42,0.10);
      --accent-mid: rgba(180,72,42,0.20);
      --txt1:       #101010;
      --txt2:       #47433C;
      --txt3:       #837C71;
      --border:     rgba(16,16,16,0.14);
      --border-m:   rgba(16,16,16,0.30);
      --fail:       #B4482A;
      --warn:       #8A6516;

      /* New names, used only by the override block at the end of this
         stylesheet. Nothing above references them. */
      --ink:    #101010;
      --clay:   #B4482A;
      --moss:   #2F4A32;
      --paper:  #F2EDE3;
      --panel:  #FBF8F2;
      --line:   #101010;
      --line-2: #D7CDBA;
      --serif:  'Instrument Serif', Georgia, serif;
      --mono:   'JetBrains Mono', ui-monospace, monospace;
      --sans:   'Inter', system-ui, -apple-system, sans-serif;
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
      background: var(--bg); color: var(--txt1);
      line-height: 1.6; overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    /* ── NAV ───────────────────────────────────────────────────── */
    nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 48px; position: sticky; top: 0; z-index: 100;
      background: rgba(242,237,227,0.85); backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .nav-logo { display: flex; align-items: center; gap: 10px; }
    .nav-logomark {
      width: 34px; height: 34px; border-radius: 9px;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      display: flex; align-items: center; justify-content: center;
    }
    .nav-logomark svg { display: block; }
    .nav-brand { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
    .nav-brand span { color: var(--accent); }
    .nav-links { display: flex; align-items: center; gap: 32px; }
    /* Nav links must never wrap. "How it works" breaking across three lines
       is what a too-narrow flex child looks like, and it reads as a broken
       page rather than a tight one. */
    .nav-links a { white-space: nowrap; }
    .nav-links a { font-size: 14px; font-weight: 500; color: var(--txt2); transition: color 0.15s; }
    .nav-links a:hover { color: var(--txt1); }
    .nav-cta {
      display: flex; align-items: center; gap: 6px;
      padding: 9px 20px; border-radius: 10px;
      background: var(--accent); color: #F2EDE3;
      font-size: 13px; font-weight: 800; transition: filter 0.15s;
    }
    .nav-cta:hover { filter: brightness(1.1); }

    /* ── HERO ──────────────────────────────────────────────────── */
    .hero {
      max-width: 900px; margin: 0 auto; padding: 100px 24px 80px;
      text-align: center;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 16px; border-radius: 20px;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.3px;
      margin-bottom: 28px;
    }
    .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
    .hero h1 {
      font-size: clamp(34px, 5vw, 60px);
      font-weight: 900; letter-spacing: -1.5px; line-height: 1.1;
      margin-bottom: 22px;
    }
    .hero h1 em { color: var(--accent); font-style: normal; }
    .hero-sub {
      font-size: clamp(15px, 2vw, 19px); color: var(--txt2);
      max-width: 560px; margin: 0 auto 42px;
    }
    .hero-cta-group { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .btn-primary-lg {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 32px; border-radius: 12px;
      background: var(--accent); color: #F2EDE3;
      font-size: 15px; font-weight: 900;
      transition: filter 0.15s, transform 0.1s;
    }
    .btn-primary-lg:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .browser-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
    .btn-browser {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 22px; border-radius: 10px;
      background: var(--card); border: 1px solid var(--border-m);
      color: var(--txt2); font-size: 13px; font-weight: 700;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .btn-browser:hover { background: var(--card-h); color: var(--txt1); border-color: var(--accent); }
    .btn-browser svg { flex-shrink: 0; }
    .btn-ghost-lg {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 28px; border-radius: 12px;
      background: var(--card); color: var(--txt2);
      font-size: 15px; font-weight: 600;
      border: 1px solid var(--border-m);
      transition: background 0.15s, color 0.15s;
    }
    .btn-ghost-lg:hover { background: var(--card-h); color: var(--txt1); }
    .hero-trust {
      margin-top: 36px; font-size: 12px; color: var(--txt3);
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .trust-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--txt3); }

    /* ── BROWSER PREVIEW MOCKUP ────────────────────────────────── */
    .mockup-wrap {
      max-width: 800px; margin: 0 auto 0; padding: 0 24px 80px;
      position: relative;
    }
    .mockup-glow {
      position: absolute; inset: 30% 10% 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(180,72,42,0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .mockup-frame {
      background: var(--surface); border-radius: 16px;
      border: 1px solid var(--border-m); overflow: hidden;
      box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    }
    .mockup-chrome {
      background: var(--card); padding: 10px 16px;
      display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid var(--border);
    }
    .chrome-dots { display: flex; gap: 6px; }
    .chrome-dot {
      width: 10px; height: 10px; border-radius: 50%;
    }
    .chrome-dot-r { background: #FF5F57; }
    .chrome-dot-y { background: #FEBC2E; }
    .chrome-dot-g { background: #28C840; }
    .chrome-bar {
      flex: 1; height: 26px; background: var(--bg);
      border-radius: 6px; border: 1px solid var(--border);
      display: flex; align-items: center; padding: 0 10px;
      font-size: 11px; color: var(--txt3);
    }
    .mockup-body { padding: 24px; }
    .mockup-coupon-panel {
      background: var(--card); border-radius: 12px;
      border: 1px solid var(--accent-mid); padding: 18px 20px;
      position: relative; overflow: hidden;
    }
    .mockup-coupon-panel::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--accent), #B4482A);
    }
    .mcp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .mcp-logo { display: flex; align-items: center; gap: 8px; }
    .mcp-logodot { width: 28px; height: 28px; background: var(--accent-dim); border-radius: 7px; display: flex; align-items: center; justify-content: center; }
    .mcp-name { font-size: 13px; font-weight: 800; }
    .mcp-name span { color: var(--accent); }
    .mcp-found { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-mid); padding: 3px 10px; border-radius: 20px; }
    .mcp-hero-card {
      background: linear-gradient(135deg, #F2EDE3, #F2EDE3);
      border-radius: 10px; border: 1px solid var(--accent-mid);
      padding: 14px 16px; margin-bottom: 12px;
    }
    .mcp-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.8px; color: var(--txt3); text-transform: uppercase; margin-bottom: 4px; }
    .mcp-savings { font-size: 26px; font-weight: 900; color: var(--accent); margin-bottom: 8px; }
    .mcp-code-row { display: flex; align-items: center; gap: 10px; }
    .mcp-code {
      font-family: monospace; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
      padding: 4px 10px; border-radius: 6px; color: var(--txt1);
    }
    .mcp-applied { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-mid); padding: 3px 10px; border-radius: 20px; }
    .mcp-list { display: flex; flex-direction: column; gap: 6px; }
    .mcp-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--surface); border-radius: 6px; border: 1px solid var(--border); }
    .mcp-row-code { font-family: monospace; font-size: 11px; color: var(--txt1); }
    .mcp-row-desc { font-size: 10px; color: var(--txt2); margin-top: 2px; }
    .mcp-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
    .mcp-badge-ok   { color: var(--accent); background: var(--accent-dim); }
    .mcp-badge-warn { color: var(--warn);   background: rgba(245,158,11,0.12); }
    .mcp-badge-exp  { color: var(--txt3);   background: var(--surface); border: 1px solid var(--border); }

    /* ── STATS BAR ──────────────────────────────────────────────── */
    .stat-item:last-child { border-right: none; }

    /* ── FEATURES ───────────────────────────────────────────────── */
    .features {
      max-width: 900px; margin: 0 auto; padding: 90px 24px;
    }
    .section-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
      text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
    }
    .section-title {
      font-size: clamp(26px, 4vw, 40px); font-weight: 900;
      letter-spacing: -0.8px; margin-bottom: 16px;
    }
    .section-sub { font-size: 16px; color: var(--txt2); max-width: 520px; margin-bottom: 56px; }
    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .feature-card {
      background: var(--card); border-radius: 16px;
      border: 1px solid var(--border); padding: 26px 22px;
      position: relative; overflow: hidden;
      transition: border-color 0.2s, transform 0.2s;
    }
    .feature-card:hover { border-color: var(--border-m); transform: translateY(-3px); }
    .feature-card--accent { border-color: var(--accent-mid); background: linear-gradient(135deg, #F2EDE3 0%, #F2EDE3 100%); }
    .feature-card--soon { opacity: 0.6; }
    .feature-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .feature-icon svg { display: block; }
    .soon-badge {
      position: absolute; top: 14px; right: 14px;
      font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
      color: var(--txt3); background: var(--surface);
      border: 1px solid var(--border); padding: 2px 8px; border-radius: 20px;
    }
    .feature-title { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
    .feature-desc  { font-size: 13px; color: var(--txt2); line-height: 1.6; }

    /* ── HOW IT WORKS ───────────────────────────────────────────── */
    .how-section {
      background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .how-inner {
      max-width: 900px; margin: 0 auto; padding: 90px 24px;
    }
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 56px; }
    .step {
      padding: 24px 20px; text-align: center; position: relative;
    }
    .step:not(:last-child)::after {
      content: '→'; position: absolute; right: -4px; top: 50%;
      transform: translateY(-50%); font-size: 18px; color: var(--txt3);
    }
    .step-num {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 900; color: var(--accent);
      margin: 0 auto 14px;
    }
    .step-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
    .step-desc  { font-size: 12px; color: var(--txt3); }

    /* ── TRANSPARENCY PLEDGE ────────────────────────────────────── */
    .pledge-section {
      max-width: 900px; margin: 0 auto; padding: 90px 24px;
    }
    .pledge-card {
      background: linear-gradient(135deg, #F2EDE3 0%, #F2EDE3 100%);
      border-radius: 20px; border: 1px solid var(--accent-mid);
      padding: 48px 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
      align-items: center;
    }
    .pledge-title { font-size: 28px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 14px; }
    .pledge-title em { color: var(--accent); font-style: normal; }
    .pledge-body { font-size: 14px; color: var(--txt2); line-height: 1.75; }
    .pledge-items { display: flex; flex-direction: column; gap: 14px; }
    .pledge-item { display: flex; align-items: flex-start; gap: 12px; }
    .pledge-check {
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; color: var(--accent); flex-shrink: 0; margin-top: 2px;
    }
    .pledge-item-text { font-size: 14px; color: var(--txt1); font-weight: 500; }
    .pledge-item-sub  { font-size: 12px; color: var(--txt3); margin-top: 1px; }

    /* ── CTA SECTION ────────────────────────────────────────────── */
    .cta-section {
      background: var(--surface); border-top: 1px solid var(--border);
      text-align: center; padding: 90px 24px;
    }
    .cta-section h2 { font-size: clamp(26px, 4vw, 42px); font-weight: 900; letter-spacing: -0.8px; margin-bottom: 16px; }
    .cta-section p  { font-size: 16px; color: var(--txt2); max-width: 440px; margin: 0 auto 42px; }

    /* ── FOOTER ─────────────────────────────────────────────────── */
    footer {
      background: var(--bg); border-top: 1px solid var(--border);
      padding: 40px 48px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .footer-brand { font-size: 14px; font-weight: 800; }
    .footer-brand span { color: var(--accent); }
    .footer-links { display: flex; gap: 24px; }
    .footer-links a { font-size: 12px; color: var(--txt3); transition: color 0.15s; }
    .footer-links a:hover { color: var(--txt2); }
    .footer-copy { font-size: 12px; color: var(--txt3); }

    /* ── HONEY CALLOUT ───────────────────────────────────────────── */

    /* ── RESPONSIVE ─────────────────────────────────────────────── */
    @media (max-width: 720px) {
      nav { padding: 14px 20px; }
      .nav-links { display: none; }
      .stat-item:nth-child(2) { border-right: none; }
      .feature-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr 1fr; }
      .pledge-card { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
      footer { flex-direction: column; gap: 16px; text-align: center; }
    }

    .notify-input {
      width: 100%; padding: 12px 16px; border-radius: 10px;
      background: var(--surface); border: 1px solid var(--border-m);
      color: var(--txt1); font-size: 14px; outline: none;
      transition: border-color 0.15s;
    }
    .notify-input:focus { border-color: var(--accent); }
    .notify-input::placeholder { color: var(--txt3); }

    /* ── SIGNUP SECTION ────────────────────────────────────────── */
    .signup-section {
      max-width: 560px; margin: 0 auto 80px; padding: 0 24px;
      text-align: center;
    }
    .signup-card {
      background: var(--card); border: 1px solid var(--border-m);
      border-radius: 20px; padding: 40px 36px;
    }
    .signup-eyebrow {
      font-size: 11px; font-weight: 700; color: var(--accent);
      letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 12px;
    }
    .signup-card h3 {
      font-size: clamp(20px, 3vw, 28px); font-weight: 900;
      letter-spacing: -0.5px; margin-bottom: 8px;
    }
    .signup-card p {
      font-size: 14px; color: var(--txt2); margin-bottom: 28px; line-height: 1.6;
    }
    .signup-benefits {
      display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; text-align: left;
    }
    .signup-benefit {
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; color: var(--txt2);
    }
    .signup-benefit-dot {
      width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      display: flex; align-items: center; justify-content: center;
      color: var(--accent); font-size: 10px; font-weight: 900;
    }
    .signup-form { display: flex; flex-direction: column; gap: 10px; }
    .signup-input {
      width: 100%; padding: 13px 16px; border-radius: 10px;
      background: var(--surface); border: 1px solid var(--border-m);
      color: var(--txt1); font-size: 14px; outline: none;
      transition: border-color 0.15s;
    }
    .signup-input:focus { border-color: var(--accent); }
    .signup-input::placeholder { color: var(--txt3); }
    .signup-btn {
      width: 100%; padding: 13px; border-radius: 10px;
      background: var(--accent); color: #F2EDE3;
      font-size: 14px; font-weight: 900; cursor: pointer;
      border: none; transition: filter 0.15s;
    }
    .signup-btn:hover { filter: brightness(1.08); }
    .signup-skip {
      margin-top: 14px; font-size: 13px; color: var(--txt3);
    }
    .signup-skip a {
      color: var(--txt2); text-decoration: underline;
      text-underline-offset: 3px; cursor: pointer;
    }
    .signup-skip a:hover { color: var(--txt1); }
    .signup-divider {
      display: flex; align-items: center; gap: 12px; margin: 16px 0;
      font-size: 12px; color: var(--txt3);
    }
    .signup-divider::before, .signup-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }
    .signup-success {
      display: none; padding: 20px;
      background: var(--accent-dim); border-radius: 12px;
      border: 1px solid var(--accent-mid); color: var(--accent);
      font-weight: 700; font-size: 15px;
    }

    /* ── INSTALL SECTION ────────────────────────────────────────── */
    .install-section {
      max-width: 900px; margin: 0 auto; padding: 80px 24px;
      text-align: center;
    }
    .install-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
      text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
    }
    .install-section h2 {
      font-size: clamp(26px, 4vw, 40px); font-weight: 900;
      letter-spacing: -0.8px; margin-bottom: 10px;
    }
    .install-sub { font-size: 15px; color: var(--txt2); margin-bottom: 36px; }
    .tab-row {
      display: inline-flex; gap: 6px; background: var(--surface);
      border: 1px solid var(--border-m); border-radius: 12px; padding: 5px;
      margin-bottom: 28px;
    }
    .tab-btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 18px; border-radius: 8px; border: none;
      background: transparent; color: var(--txt2);
      font-size: 13px; font-weight: 600; cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .tab-btn:hover { color: var(--txt1); }
    .tab-btn.active {
      background: var(--card-h); color: var(--txt1);
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }
    .install-card {
      max-width: 520px; margin: 0 auto; text-align: left;
      background: var(--card); border: 1px solid var(--border-m);
      border-radius: 16px; padding: 28px 32px;
    }
    .install-card-header {
      display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
    }
    .install-icon {
      width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
      background: var(--surface); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
    }
    .install-card-title { font-size: 16px; font-weight: 800; margin-bottom: 3px; }
    .install-card-desc  { font-size: 12px; color: var(--txt2); }
    .install-badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 700;
      padding: 4px 12px; border-radius: 20px; margin-bottom: 16px;
    }
    .badge-dot { width: 7px; height: 7px; border-radius: 50%; }
    .badge-pending {
      color: var(--warn); background: rgba(245,158,11,0.1);
      border: 1px solid rgba(245,158,11,0.25);
    }
    .badge-pending .badge-dot { background: var(--warn); }
    .badge-live {
      color: var(--accent); background: var(--accent-dim);
      border: 1px solid var(--accent-mid);
    }
    .badge-live .badge-dot {
      background: var(--accent);
      animation: pulse-dot 1.5s infinite;
    }
    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }
    .install-cta-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 24px; border-radius: 10px;
      background: var(--accent); color: #F2EDE3;
      font-size: 14px; font-weight: 800; cursor: pointer;
      border: none; text-decoration: none;
      transition: filter 0.15s, transform 0.1s;
    }
    .install-cta-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .install-steps {
      list-style: none; display: flex; flex-direction: column;
      gap: 12px; margin-bottom: 22px;
    }
    .install-steps li {
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 14px; color: var(--txt2); line-height: 1.55;
    }
    .install-steps .step-num {
      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 900; color: var(--accent); margin: 0;
    }
    .pwa-qr-hint { font-size: 12px; color: var(--txt3); margin-top: 10px; }
    .notify-form { display: flex; flex-direction: column; }
    @media (max-width: 720px) {
      .tab-row { flex-wrap: wrap; justify-content: center; }
      .install-card { padding: 22px 20px; }
    }
  
    /* ════════════════════════════════════════════════════════════════
       APP SHELL — activates when installed as PWA or user is logged in
       ════════════════════════════════════════════════════════════════ */
    #app-shell {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: var(--bg); flex-direction: column; overflow: hidden;
    }
    #app-shell.active { display: flex; }

    /* ── App header ── */
    .app-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; background: var(--surface);
      border-bottom: 1px solid var(--border); flex-shrink: 0;
      padding-top: max(14px, env(safe-area-inset-top));
    }
    .app-header-logo { display: flex; align-items: center; gap: 8px; }
    .app-header-logo .logomark {
      width: 30px; height: 30px; border-radius: 8px;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      display: flex; align-items: center; justify-content: center;
    }
    .app-header-logo .brand { font-size: 16px; font-weight: 800; }
    .app-header-logo .brand span { color: var(--accent); }
    .app-header-right { display: flex; gap: 10px; align-items: center; }
    .app-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer;
    }

    /* ── Scrollable content area ── */
    .app-content {
      flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }

    /* ── Bottom tab bar ── */
    .app-tabbar {
      display: flex; background: var(--surface);
      border-top: 1px solid var(--border); flex-shrink: 0;
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    .tab-btn {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 3px; padding: 10px 4px; background: none; border: none;
      color: var(--txt3); cursor: pointer; transition: color 0.15s; font-size: 10px;
      font-weight: 600; letter-spacing: 0.3px;
    }
    .tab-btn svg { display: block; }
    .tab-btn.active { color: var(--accent); }
    .tab-btn.active svg { stroke: var(--accent); }

    /* ── Views ── */
    .app-view { display: none; padding: 20px; }
    .app-view.active { display: block; }

    /* ── Login view ── */
    .login-wrap {
      max-width: 360px; margin: 60px auto 0;
      display: flex; flex-direction: column; align-items: center; gap: 24px;
    }
    .login-logo { font-size: 28px; font-weight: 900; letter-spacing: -1px; }
    .login-logo span { color: var(--accent); }
    .login-tagline { font-size: 14px; color: var(--txt2); text-align: center; line-height: 1.5; }
    .login-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
    .login-input {
      width: 100%; padding: 13px 16px; border-radius: 10px;
      background: var(--card); border: 1px solid var(--border);
      color: var(--txt1); font-size: 15px; outline: none;
      transition: border-color 0.15s;
    }
    .login-input:focus { border-color: var(--accent); }
    .login-input::placeholder { color: var(--txt3); }
    .login-btn {
      width: 100%; padding: 14px; border-radius: 10px;
      background: var(--accent); color: #F2EDE3;
      font-size: 15px; font-weight: 900; border: none; cursor: pointer;
      transition: filter 0.15s;
    }
    .login-btn:hover { filter: brightness(1.08); }
    .login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .login-err {
      width: 100%; padding: 11px 14px; border-radius: 8px;
      background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3);
      color: #B4482A; font-size: 13px; display: none;
    }
    .login-switch { font-size: 13px; color: var(--txt2); }
    .login-switch a { color: var(--accent); cursor: pointer; }

    /* ── Balance card ── */
    .balance-card {
      background: linear-gradient(135deg, #F2EDE3 0%, #FBF8F2 100%);
      border: 1px solid rgba(180,72,42,0.2); border-radius: 16px;
      padding: 24px; margin-bottom: 20px; position: relative; overflow: hidden;
    }
    .balance-card::after {
      content: ''; position: absolute; top: -40px; right: -40px;
      width: 160px; height: 160px; border-radius: 50%;
      background: rgba(180,72,42,0.06);
    }
    .balance-label { font-size: 12px; font-weight: 600; color: var(--txt2); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; }
    .balance-amount { font-size: 42px; font-weight: 900; color: var(--accent); letter-spacing: -1.5px; line-height: 1; margin-bottom: 4px; }
    .balance-sub { font-size: 13px; color: var(--txt3); }
    .balance-actions { display: flex; gap: 10px; margin-top: 18px; }
    .balance-btn {
      flex: 1; padding: 10px 0; border-radius: 8px; border: none; cursor: pointer;
      font-size: 13px; font-weight: 700; transition: filter 0.15s;
    }
    .balance-btn-primary { background: var(--accent); color: #F2EDE3; }
    .balance-btn-secondary { background: rgba(180,72,42,0.12); color: var(--accent); border: 1px solid rgba(180,72,42,0.25); }
    .balance-btn:hover { filter: brightness(1.08); }

    /* ── Stats row ── */
    .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
    .stat-card {
      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
      padding: 16px;
    }
    .stat-card-label { font-size: 11px; color: var(--txt3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
    .stat-card-value { font-size: 22px; font-weight: 800; color: var(--txt1); }
    .stat-card-value.green { color: #2F4A32; }

    /* ── Section header ── */
    .section-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .section-hdr h3 { font-size: 14px; font-weight: 700; color: var(--txt1); }
    .section-hdr a { font-size: 12px; color: var(--accent); cursor: pointer; }

    /* ── Transaction list ── */
    .txn-list { display: flex; flex-direction: column; gap: 8px; }
    .txn-item {
      display: flex; align-items: center; gap: 12px;
      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
      padding: 12px 14px;
    }
    .txn-icon {
      width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      display: flex; align-items: center; justify-content: center; font-size: 16px;
    }
    .txn-info { flex: 1; min-width: 0; }
    .txn-merchant { font-size: 14px; font-weight: 600; color: var(--txt1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .txn-date { font-size: 11px; color: var(--txt3); margin-top: 2px; }
    .txn-amount { text-align: right; flex-shrink: 0; }
    .txn-cashback { font-size: 14px; font-weight: 700; color: #2F4A32; }
    .txn-sale { font-size: 11px; color: var(--txt3); margin-top: 2px; }
    .txn-badge {
      font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
      margin-top: 4px; display: inline-block;
    }
    .txn-badge.pending { background: rgba(245,158,11,0.15); color: #8A6516; }
    .txn-badge.confirmed { background: rgba(74,222,128,0.12); color: #2F4A32; }

    /* ── Empty state ── */
    .empty-state { text-align: center; padding: 48px 24px; }
    .empty-state-icon { font-size: 40px; margin-bottom: 12px; }
    .empty-state h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
    .empty-state p { font-size: 13px; color: var(--txt2); line-height: 1.6; }

    /* ── Coupon cards ── */
    .coupon-grid { display: flex; flex-direction: column; gap: 10px; }
    .coupon-card {
      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
      padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    }
    .coupon-merchant { font-size: 13px; color: var(--txt2); margin-bottom: 2px; }
    .coupon-code {
      font-family: ui-monospace, monospace; font-size: 15px; font-weight: 700;
      color: var(--accent); letter-spacing: 0.5px;
    }
    .coupon-meta { font-size: 11px; color: var(--txt3); margin-top: 3px; }
    .coupon-copy {
      margin-left: auto; padding: 7px 14px; border-radius: 7px; flex-shrink: 0;
      background: var(--accent-dim); border: 1px solid var(--accent-mid);
      color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer;
      border: none; transition: background 0.15s;
    }
    .coupon-copy:hover { background: rgba(180,72,42,0.2); }
    .coupon-copy.copied { background: rgba(74,222,128,0.15); color: #2F4A32; }

    /* ── Merchant blocks (Companion App coupon browser) ── */
    .merchant-block {
      margin-bottom: 20px; background: var(--card); border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden;
    }
    .merchant-header {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--card-h);
    }
    .merchant-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
    .merchant-name-wrap { flex: 1; min-width: 0; }
    .merchant-name { font-size: 15px; font-weight: 800; color: var(--txt1); }
    .merchant-sub { font-size: 11px; color: var(--txt3); margin-top: 2px; }
    .merchant-codes { display: flex; flex-direction: column; }
    .coupon-row {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
    }
    .coupon-row:last-child { border-bottom: none; }
    .coupon-row-left { flex: 1; min-width: 0; }
    .coupon-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .coupon-rate {
      font-size: 10px; font-weight: 700;
      color: #8A6516;
      background: rgba(245,158,11,0.10);
      border: 1px solid rgba(245,158,11,0.25);
      padding: 3px 7px; border-radius: 5px;
      white-space: nowrap;
    }

    /* ── Settings view ── */
    .settings-section { margin-bottom: 24px; }
    .settings-label { font-size: 11px; font-weight: 700; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding-left: 4px; }
    .settings-row {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
      padding: 14px 16px; margin-bottom: 2px;
    }
    .settings-row:first-of-type { border-radius: 10px 10px 4px 4px; }
    .settings-row:last-of-type { border-radius: 4px 4px 10px 10px; }
    .settings-row-label { font-size: 14px; color: var(--txt1); }
    .settings-row-value { font-size: 13px; color: var(--txt2); }
    .logout-btn {
      width: 100%; padding: 13px; border-radius: 10px; margin-top: 8px;
      background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
      color: #B4482A; font-size: 14px; font-weight: 700; cursor: pointer;
      transition: background 0.15s;
    }
    .logout-btn:hover { background: rgba(239,68,68,0.18); }

    /* ── Loading skeleton ── */
    .skeleton {
      background: linear-gradient(90deg, var(--card) 25%, var(--card-h) 50%, var(--card) 75%);
      background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px;
    }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .skeleton-line { height: 14px; margin-bottom: 8px; }
    .skeleton-card { height: 80px; border-radius: 12px; margin-bottom: 10px; }

    /* ── Payout modal ── */
    .modal-backdrop {
      display: none; position: fixed; inset: 0; z-index: 10000;
      background: rgba(0,0,0,0.7); align-items: flex-end; justify-content: center;
    }
    .modal-backdrop.open { display: flex; }
    .modal-sheet {
      background: var(--surface); border-radius: 20px 20px 0 0;
      padding: 24px 24px max(24px, env(safe-area-inset-bottom));
      width: 100%; max-width: 480px;
    }
    .modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 20px; }
    .modal-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
    .modal-sub { font-size: 13px; color: var(--txt2); margin-bottom: 20px; }
    .modal-input {
      width: 100%; padding: 13px 16px; border-radius: 10px; margin-bottom: 12px;
      background: var(--card); border: 1px solid var(--border);
      color: var(--txt1); font-size: 18px; font-weight: 700; outline: none;
    }
    .modal-input:focus { border-color: var(--accent); }
    .modal-note { font-size: 12px; color: var(--txt3); margin-bottom: 16px; }
    .modal-actions { display: flex; gap: 10px; }
    .modal-cancel { flex: 1; padding: 13px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); color: var(--txt2); font-size: 14px; font-weight: 700; cursor: pointer; }
    .modal-submit { flex: 2; padding: 13px; border-radius: 10px; background: var(--accent); color: #F2EDE3; font-size: 14px; font-weight: 900; border: none; cursor: pointer; }


    /* ══════════════════════════════════════════════════════════════════
       REBRAND OVERRIDE — 2026-08
       ══════════════════════════════════════════════════════════════════

       Appended rather than merged into the rules above. Those 754 lines
       work and are wired to 62 JS hooks; rewriting them to change how the
       page LOOKS would risk how it WORKS for no benefit.

       The :root block already repointed colour. This block does the three
       things a palette swap cannot:

         1. kills every border-radius. The 8-12px rounded corner is the
            single most reliable tell of a generated interface.
         2. puts a serif on the display type. Effectively no generated
            landing page uses one, so it does more differentiating work
            than any colour choice.
         3. makes labels and buttons monospace, which reads as a document
            rather than an app.
       ══════════════════════════════════════════════════════════════════ */

    *, *::before, *::after { border-radius: 0 !important; }

    body {
      background: var(--paper);
      font-family: var(--sans);
    }

    /* ── Display type ────────────────────────────────────────────────── */
    h1, h2, h3,
    .hero h1, .section-h, .section-title, .cta-section h2 {
      font-family: var(--serif) !important;
      font-weight: 400 !important;
      letter-spacing: -0.025em;
    }
    .hero h1 { line-height: 0.95; }

    /* The old hero put its second line in the accent colour — the exact
       "one line in mint" pattern every generated page uses. Italic serif
       does the same emphasis without the association. */
    .hero h1 .accent,
    .hero h1 span[style*="color"] {
      color: var(--clay) !important;
      font-style: italic;
    }

    /* ── Structure: hairlines, never shadows ─────────────────────────── */
    .card, .feature-card, .install-card, .pledge-card,
    .coupon-card, .step, .signup-card {
      border: 1px solid var(--line-2) !important;
      box-shadow: none !important;
    }
    nav { border-bottom: 1px solid var(--line) !important; backdrop-filter: none !important; }
    footer { border-top: 1px solid var(--line) !important; }

    /* ── Buttons: square, monospace, ink ─────────────────────────────── */
    .btn, .btn-primary, .btn-secondary, .cta-btn, button[class*="btn"] {
      font-family: var(--mono) !important;
      font-size: 12px !important;
      letter-spacing: 0.1em !important;
      text-transform: uppercase !important;
      font-weight: 400 !important;
      border-radius: 0 !important;
    }
    .btn-primary, .cta-btn {
      background: var(--ink) !important;
      color: var(--panel) !important;
      border: 1px solid var(--ink) !important;
    }
    .btn-primary:hover, .cta-btn:hover {
      background: var(--moss) !important;
      border-color: var(--moss) !important;
    }

    /* ── Eyebrows, pills and badges become labels ────────────────────── */
    .badge, .pill, .eyebrow, .tag, .chip, .section-label {
      font-family: var(--mono) !important;
      font-size: 11px !important;
      letter-spacing: 0.11em !important;
      text-transform: uppercase !important;
      background: transparent !important;
      border: 1px solid var(--line-2) !important;
      color: var(--txt2) !important;
    }

    /* ── Figures read as a statement ─────────────────────────────────── */
    .stat-value, .balance, .amount, .price, .cashback-amount {
      font-family: var(--mono) !important;
    }

    /* ── Inputs ──────────────────────────────────────────────────────── */
    input, select, textarea {
      border-radius: 0 !important;
      border: 1px solid var(--line-2) !important;
      background: #FFFFFF !important;
      color: var(--ink) !important;
    }
    input:focus, select:focus, textarea:focus {
      outline: 1px solid var(--ink) !important;
      outline-offset: -2px;
    }

    /* ── Anything still glowing from the dark theme ──────────────────── */
    [style*="box-shadow"] { box-shadow: none !important; }

/* ── Site footer navigation (added with the multi-page split) ───────────
   Every page reachable from every page. On a multi-page site this replaces
   what a one-pager got for free by having everything already on screen. */
.site-footer-nav {
  display: flex; flex-wrap: wrap; gap: 0 26px;
  padding: 0 0 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
}
.site-footer-nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt2);
  text-decoration: none; padding: 6px 0;
}
.site-footer-nav a:hover { color: var(--clay); }

/* The masthead marks the page you are on, so the nav doubles as a location
   indicator — the cue a scrolling one-pager provided implicitly. */
nav a[aria-current="page"] { color: var(--clay) !important; }


/* ── Nav, after the rebrand ────────────────────────────────────────────
   The background was rgba(10,22,40,.85) — the old navy written as an rgba,
   which is why the hex sweep missed it and the bar stayed dark on a paper
   page. Fixed at the declaration; these rules handle the rest. */
nav {
  background: rgba(242,237,227,0.92) !important;
  backdrop-filter: blur(10px) !important;
  padding: 14px 32px !important;
  gap: 24px;
}
.nav-brand { font-family: var(--serif) !important; font-weight: 400 !important; font-size: 21px !important; }
.nav-brand span { color: var(--clay) !important; }
.nav-logomark { border: 1px solid var(--line-2); }

.nav-links { gap: 24px !important; }
.nav-links a {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-cta {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  white-space: nowrap;
  background: var(--ink) !important;
  color: var(--panel) !important;
  border: 1px solid var(--ink) !important;
  padding: 10px 16px !important;
}
.nav-cta:hover { background: var(--moss) !important; border-color: var(--moss) !important; filter: none !important; }

/* The Chrome/Firefox "Soon" badges are the widest thing in the bar and the
   least important. They go first when space runs out, before the links do. */
@media (max-width: 1180px) {
  nav > div:last-child > span:first-child { display: none !important; }
}
@media (max-width: 860px) {
  nav { padding: 12px 18px !important; }
  .nav-links { display: none !important; }
}