/* ==========================================================
   Majir – Shared Styles
   ========================================================== */

/* ---------- Theme custom properties ---------- */
:root {
    --canvas: #FBFAF7;
    --canvas-sunk: #F4F1EA;
    --ink: #0E1512;
    --ink-soft: #3A4440;
    --ink-muted: #6B7570;
    --brand: #008000;
    --brand-hover: #006B00;
    --line: #E8E3D8;
    --surface: #FFFFFF;
}

[data-theme="dark"] {
    /* Elevation ramp (darkest to lightest): canvas < canvas-sunk < surface.
       Each layer is a clear step so cards lift off both the page and the
       recessed sections they sit in (OpenAI / Resend style). */
    --canvas: #0A0D0C;
    --canvas-sunk: #141E19;
    --ink: #F4F1EA;
    --ink-soft: #C6D2CB;
    --ink-muted: #93A39A;
    --brand: #33A033;
    --brand-hover: #008000;
    --line: #3E5C4A;
    --surface: #2A4234;
    --surface-raised: #345040;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--canvas);
    color: var(--ink);
}
.font-display {
    font-family: 'Archivo', 'Inter', 'Inter', -apple-system, sans-serif;
}
/* Logo wordmark: Archivo 800, letter-spacing -0.02em, every surface.
   Unbounded was the locked sync target, but majirshop-web retired it and
   ships no woff2 files. Archivo 800 matches the live web app wordmark. */
.font-logo {
    font-family: 'Archivo', 'Inter', -apple-system, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 800;
}

/* Brand lockup (icon + vector wordmark as one SVG). Light/dark variants swap
   via [data-theme]; the dark variant stays hidden unless dark mode is active. */
.logo-lockup-dark {
    display: none;
}
[data-theme="dark"] .logo-lockup-light {
    display: none;
}
[data-theme="dark"] .logo-lockup-dark {
    display: inline-block;
}

html {
    scroll-behavior: smooth;
}

/* ---------- Grain overlay (disabled for light theme) ---------- */
.grain::after {
    display: none;
}

/* ---------- Glow & mesh ---------- */
.glow-green {
    box-shadow: 0 0 60px rgba(0,128,0,0.10), 0 0 120px rgba(0,128,0,0.04);
}
.text-glow {
    text-shadow: 0 0 40px rgba(0,128,0,0.2);
}
.mesh-bg {
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0,128,0,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0,128,0,0.03) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 50% 80%, rgba(0,107,0,0.02) 0%, transparent 50%);
}
/* Dark mode: OpenAI-style vertical hero fade. The top of the hero is a clearly
   lighter green-tinted surface that falls off smoothly into the near-black
   canvas at the bottom, with a faint top-center pool of light for depth. */
[data-theme="dark"] .mesh-bg {
    background:
        radial-gradient(ellipse 95% 75% at 50% 26%, rgba(51,160,51,0.15) 0%, transparent 72%),
        linear-gradient(180deg, #203023 0%, #1D2C22 42%, #17231B 66%, #0A0D0C 100%);
}

/* ---------- Gradient border ---------- */
.gradient-border { position: relative; }
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0,128,0,0.3), transparent 40%, transparent 60%, rgba(0,128,0,0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* ---------- Keyframes ---------- */
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes marquee { 0%{transform:translateX(0%)} 100%{transform:translateX(-50%)} }

.animate-float    { animation: float 6s ease-in-out infinite; }
.animate-fade-up  { animation: fadeUp 0.8s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.6s ease-out forwards; }
.animate-marquee  { animation: marquee 30s linear infinite; }

.delay-100{animation-delay:.1s}
.delay-200{animation-delay:.2s}
.delay-300{animation-delay:.3s}
.delay-400{animation-delay:.4s}

/* ---------- Light section green override ---------- */
/* Apply .section-light to any white/cream background container.
   All green text inside will use a darker shade for better contrast. */
.section-light .text-majir-green { color: #006B00 !important; }
.section-light svg[stroke="#008000"] { stroke: #006B00; }
.section-light svg[fill="#008000"] { fill: #006B00; }
.section-light .step-number {
    background: linear-gradient(135deg, #006B00, #005200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section-light .border-majir-green\/20 { border-color: rgba(0,107,0,0.2); }

/* ---------- Step numbers (gradient text) ---------- */
.step-number {
    background: linear-gradient(135deg, #008000, #006B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- Cards ---------- */
.card-hover {
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.card-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 40px rgba(0,128,0,0.06);
}

/* ---------- Neumorphic (light sections) ---------- */
.neumorphic {
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid var(--line);
}
.neumorphic.card-hover:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
}

/* ---------- Glassmorphic (now light card style) ---------- */
.glass {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.glass.card-hover:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
}

/* ---------- Phone mockup (iPhone frame) ----------
   The device frame is graphite/gunmetal titanium by default (light mode)
   and the original Space Black in dark mode. Colours are exposed as custom
   properties consumed by inline styles on the frame elements in index.html,
   so the same markup themes itself without duplication. */
.iphone-frame {
    filter: drop-shadow(0 25px 60px rgba(0,0,0,0.22)) drop-shadow(0 8px 20px rgba(0,0,0,0.14));
    /* IMPORTANT: the INNER body is the dominant visible frame band - the shell
       shows only as a ~1px outer edge (the screen sits 6px in, the inner body
       1px in, so the inner body fills the ~5px ring you actually see). So the
       frame colour must live on --frame-inner; --frame-shell is just the thin
       outer edge line. Light mode = carbon/graphite with a metallic sheen and
       lit side buttons; dark = Space Black. */
    --frame-shell:  #3a4048;
    --frame-inner:  linear-gradient(145deg, #4a525b 0%, #323841 25%, #262c33 50%, #323841 75%, #4a525b 100%);
    --frame-btn-hi: #757d87;
    --frame-btn-lo: #3a4149;
    --frame-rim:    rgba(255,255,255,0.12);
}
[data-theme="dark"] .iphone-frame {
    --frame-shell:  linear-gradient(145deg, #2a2a2a 0%, #111 15%, #000 40%, #000 60%, #111 85%, #1a1a1a 100%);
    --frame-inner:  #000000;
    --frame-btn-hi: #333333;
    --frame-btn-lo: #111111;
    --frame-rim:    rgba(255,255,255,0.15);
}

/* ---------- Phone mockup screen (themed app UI) ----------
   The mockup depicts the Majir iOS app, so its SCREEN carries its own
   light/dark palette, independent of the marketing-site tokens. That keeps
   the device reading as a real phone in both site themes:
     - light site theme -> light app screen (the default values below)
     - dark site theme  -> dark app screen  (the [data-theme="dark"] block)
   Light is the default to match the site's light-first :root (a first
   visit with no stored theme has no data-theme attribute at all). The
   dark values equal the previously hard-coded hexes, so dark mode is
   visually unchanged. Palette is declared on .phone-screen-bg (the outer
   screen wrapper) so the custom properties cascade to .phone-screen and
   every element inside it. */
.phone-screen-bg {
    --p-screen:   #FFFFFF;  /* device screen background              */
    --p-surface:  #F2F5F1;  /* cards, header buttons, inactive pills  */
    --p-chip:     #E7ECE6;  /* small source / location chips          */
    --p-border:   rgba(14,21,18,0.08);
    --p-ink:      #0E1512;  /* primary text (Wallet title, counts)    */
    --p-ink-soft: #4A554F;  /* merchant names                         */
    --p-muted:    #66726B;  /* muted labels, expiry, nav captions     */
    --p-green:    #008000;  /* brand green on the screen              */
    --p-sb:       #0E1512;  /* status-bar glyphs (time, wifi, signal) */
    --p-sb-30:    rgba(14,21,18,0.30);
    --p-sb-40:    rgba(14,21,18,0.40);
}
/* In dark mode the phone keeps its LIGHT screen (a bright product shot on
   near-black, OpenAI-style) while the frame stays Space Black. The screen is a
   themeable mockup, and its light palette is the primary way the app is shown,
   so pinning it light here is a deliberate focal point, not a mismatch. */
[data-theme="dark"] .phone-screen-bg {
    --p-screen:   #FFFFFF;
    --p-surface:  #F2F5F1;
    --p-chip:     #E7ECE6;
    --p-border:   rgba(14,21,18,0.08);
    --p-ink:      #0E1512;
    --p-ink-soft: #4A554F;
    --p-muted:    #66726B;
    --p-green:    #008000;
    --p-sb:       #0E1512;
    --p-sb-30:    rgba(14,21,18,0.30);
    --p-sb-40:    rgba(14,21,18,0.40);
}
.phone-screen-bg,
.phone-screen { background: var(--p-screen); }
.phone-screen { overflow: hidden; color: var(--p-ink); }

/* Surfaces, borders, and accent fills inside the screen (both themes) */
.phone-screen .bg-\[\#1e2220\]         { background-color: var(--p-surface) !important; }
.phone-screen .bg-\[\#282c2a\]         { background-color: var(--p-chip) !important; }
.phone-screen .border-white\/\[0\.08\] { border-color: var(--p-border) !important; }
.phone-screen .bg-majir-green          { background-color: var(--p-green) !important; }

/* Text inside the screen (both themes) */
.phone-screen .text-majir-green        { color: var(--p-green) !important; }
.phone-screen .text-majir-gray-muted   { color: var(--p-muted) !important; }
.phone-screen .text-gray-600           { color: var(--p-ink-soft) !important; }

/* Status-bar glyphs follow the screen's own light/dark ink via --p-sb */
.phone-screen .text-white       { color: var(--p-sb); }
.phone-screen .bg-white         { background-color: var(--p-sb); }    /* solid signal bars */
.phone-screen .bg-white\/30     { background-color: var(--p-sb-30); } /* faded signal bars */
.phone-screen .bg-white\/40     { background-color: var(--p-sb-40); } /* battery nub        */
.phone-screen svg[fill="white"] { fill: var(--p-sb); }                /* wifi glyph         */
/* Glyphs that sit on the green logo tile / battery stay white in both themes.
   The extra class outranks the --p-sb status-bar rules above. */
.phone-screen .bg-majir-green .text-white       { color: #ffffff; }
.phone-screen .bg-majir-green svg[fill="white"] { fill: #ffffff; }
/* "All" active filter pill sits on green: white label in light mode,
   restored to the original cream ink in dark mode (unchanged). */
.phone-screen .text-majir-dark                      { color: #ffffff !important; }
[data-theme="dark"] .phone-screen .text-majir-dark  { color: var(--ink) !important; }

/* Merchant-logo count badge (the small numbered bubble on each logo). Flips
   with the screen palette so it stays visible in both modes, ringed by the
   card surface it sits on. */
.phone-screen .phone-badge {
    background: var(--p-ink);
    color: var(--p-screen);
    box-shadow: 0 0 0 1.5px var(--p-surface);
}
/* Bottom fade so the scrolled list trails off like a real scroll view */
.phone-screen .phone-fade {
    background: linear-gradient(to bottom, transparent, var(--p-screen));
}

/* ---------- Navigation ---------- */
.nav-blur {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
/* Liquid-glass nav: a translucent background lets the backdrop blur show
   through. !important overrides the opaque .bg-majir-cream fallback so the
   glass effect is consistent across the site (and matches the dev pages). */
nav.nav-blur,
#mobile-menu.nav-blur { background-color: rgba(251,250,247,0.72) !important; }
[data-theme="dark"] nav.nav-blur,
[data-theme="dark"] #mobile-menu.nav-blur { background-color: rgba(14,21,18,0.72) !important; }

/* ---------- Icon containers ---------- */
.icon-container {
    background: linear-gradient(135deg, rgba(0,128,0,0.12), rgba(0,128,0,0.04));
    border: 1px solid rgba(0,128,0,0.1);
}

/* ---------- hCaptcha compact ---------- */
.h-captcha {
    transform: scale(0.5);
    transform-origin: left top;
    max-height: 40px;
}
#cta-captcha {
    transform-origin: center top;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--canvas-sunk); }
::-webkit-scrollbar-thumb { background: var(--ink-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ---------- Spacing overrides ---------- */
/* Final CTA keeps the shared vertical rhythm (DESIGN.md). Set here because the
   #waitlist id outranks the utility classes on the section. */
#waitlist { padding-top: 3.5rem; padding-bottom: 3.5rem; }  /* vertical rhythm: py-14 */
@media (min-width: 1024px) {
    #waitlist { padding-top: 5rem; padding-bottom: 5rem; }  /* vertical rhythm: lg:py-20 */
}

/* ---------- Dark mode overrides ---------- */
/* Nav and footer use Tailwind classes for bg/border; override via data-theme */
[data-theme="dark"] nav {
    background-color: rgba(14,21,18,0.95) !important;
    border-color: var(--line) !important;
    color: var(--ink);
}
[data-theme="dark"] #mobile-menu {
    background-color: rgba(14,21,18,0.95) !important;
    border-color: var(--line) !important;
}
[data-theme="dark"] footer {
    background-color: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink);
}
/* Section-light green override is not needed in dark mode */
[data-theme="dark"] .section-light .text-majir-green { color: var(--brand) !important; }

/* ---------- Tailwind custom-color fallbacks ----------
   Tailwind Play CDN intermittently fails to generate these classes before
   paint, so define them directly against theme custom properties. They
   auto-invert in dark mode via [data-theme="dark"] redefining the vars. */
.bg-majir-cream         { background-color: var(--canvas); }
.bg-majir-dark          { background-color: var(--ink); }
.bg-majir-dark-card     { background-color: var(--surface); }
.bg-majir-dark-surface  { background-color: var(--canvas-sunk); }
.text-majir-dark        { color: var(--ink); }
.text-majir-cream       { color: var(--canvas); }
.text-majir-gray-light  { color: var(--ink-soft); }
.text-majir-gray-muted  { color: var(--ink-muted); }
.text-majir-green       { color: var(--brand); }
.text-majir-green-dark  { color: var(--brand-hover); }
.bg-majir-green         { background-color: var(--brand); }
.bg-majir-green\/10     { background-color: rgba(0,128,0,0.10); }
.bg-majir-green\/90:hover{ background-color: var(--brand-hover); }
.border-majir-green     { border-color: var(--brand); }
.border-majir-green\/20 { border-color: rgba(0,128,0,0.2); }
.border-majir-green\/30 { border-color: rgba(0,128,0,0.3); }
.border-majir-green\/40 { border-color: rgba(0,128,0,0.4); }

/* The hero "Connect Your Inbox" button sits on a green fill - text must be
   cream in both modes for contrast, not inverting with --ink. */
a.bg-majir-green { color: var(--canvas); }
[data-theme="dark"] a.bg-majir-green { color: #0E1512; }

/* Primary hero CTA - neumorphic-lifted green pill with animated glow.
   Restores the "magic" shimmer that was lost when the button lost its
   box-shadow after the Tailwind-fallback refactor. */
/* Unified site-wide button: add the `cta-primary` class to any button/CTA to
   get the canonical Majir button look (green pill, white text, lifted hover).
   The !important rules let it override a button's existing Tailwind colour,
   radius, and border utilities without having to strip them per element. */
.cta-primary {
    color: #ffffff !important;
    background-color: var(--brand) !important;
    border-radius: 9999px !important;     /* same pill radius as Connect Your Inbox */
    border-color: transparent !important;
    transition: all 0.2s ease;
    box-shadow:
        0 2px 8px rgba(0,128,0,0.22),
        0 1px 2px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.cta-primary:hover {
    background-color: var(--brand-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 4px 14px rgba(0,128,0,0.28),
        0 1px 3px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
[data-theme="dark"] .cta-primary {
    box-shadow:
        0 2px 8px rgba(51,160,51,0.28),
        0 1px 2px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

/* In dark mode the .section-light utility was designed to darken greens on
   cream backgrounds. Dark mode uses dark bg, so reset text-ink to inherit. */
[data-theme="dark"] .section-light { color: var(--ink); }
[data-theme="dark"] .section-light .text-majir-dark,
[data-theme="dark"] .section-light h1,
[data-theme="dark"] .section-light h2,
[data-theme="dark"] .section-light h3,
[data-theme="dark"] .section-light h4 { color: var(--ink); }
[data-theme="dark"] .section-light p,
[data-theme="dark"] .section-light li,
[data-theme="dark"] .section-light span:not(.text-majir-green):not(.step-number) { color: var(--ink-soft); }
[data-theme="dark"] .section-light .text-majir-green { color: var(--brand) !important; }
[data-theme="dark"] .section-light .text-majir-gray-light { color: var(--ink-soft); }
[data-theme="dark"] .section-light .text-majir-gray-muted { color: var(--ink-muted); }

/* Neumorphic / glass cards inside .section-light must use dark surface in dark mode.
   Dark-mode elevation: a soft drop shadow plus a 1px top inner highlight lifts the
   panel off the canvas (OpenAI / Resend look), the way the tile shadow does in light. */
[data-theme="dark"] .section-light .neumorphic,
[data-theme="dark"] .section-light .glass,
[data-theme="dark"] .neumorphic,
[data-theme="dark"] .glass {
    /* A subtle top-to-bottom gradient gives the panel dimension (lit from above)
       instead of a flat, washed-out grey; a deeper shadow grounds it on the
       near-black canvas. */
    background: linear-gradient(180deg, #304C3B 0%, #223528 100%);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 32px rgba(0,0,0,0.5);
}
[data-theme="dark"] .section-light .neumorphic.card-hover:hover,
[data-theme="dark"] .section-light .glass.card-hover:hover,
[data-theme="dark"] .neumorphic.card-hover:hover,
[data-theme="dark"] .glass.card-hover:hover {
    background: linear-gradient(180deg, #3A5A46 0%, #294232 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 16px 40px rgba(0,0,0,0.55);
}
/* Vivid green icon tiles so the accent pops against the lifted surface */
[data-theme="dark"] .icon-container {
    background: linear-gradient(135deg, rgba(51,160,51,0.32), rgba(51,160,51,0.14));
    border-color: rgba(51,160,51,0.42);
}
[data-theme="dark"] .icon-container svg[stroke="#008000"],
[data-theme="dark"] .icon-container svg { stroke: #5BD15B; }
[data-theme="dark"] .icon-container svg[fill="#008000"] { fill: #5BD15B; }

/* Body text inside dark elevated cards needs to be brighter than the global
   muted tone, or it reads as dim grey on the lifted surface. */
[data-theme="dark"] .neumorphic .text-majir-gray-muted,
[data-theme="dark"] .glass .text-majir-gray-muted,
[data-theme="dark"] .neumorphic .text-majir-gray-light,
[data-theme="dark"] .glass .text-majir-gray-light,
[data-theme="dark"] .section-light .neumorphic .text-majir-gray-muted,
[data-theme="dark"] .section-light .neumorphic .text-majir-gray-light,
[data-theme="dark"] .neumorphic .text-gray-600,
[data-theme="dark"] .neumorphic .text-gray-500,
[data-theme="dark"] .glass .text-gray-600,
[data-theme="dark"] .glass .text-gray-500 { color: #CBD6CF !important; }

/* Step numbers (01/02/03) must be a bright green in dark mode, or the dark-green
   gradient washes into the dark-green tile. */
[data-theme="dark"] .step-number,
[data-theme="dark"] .section-light .step-number {
    background: linear-gradient(135deg, #5BD15B, #33A033);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Borders that used gray-200 in light mode need to switch in dark mode */
[data-theme="dark"] .border-gray-200 { border-color: var(--line) !important; }
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-theme="dark"] .bg-gray-50 { background-color: var(--canvas-sunk) !important; }
[data-theme="dark"] .bg-gray-100 { background-color: var(--canvas-sunk) !important; }
[data-theme="dark"] .text-gray-900 { color: var(--ink) !important; }
[data-theme="dark"] .text-gray-800 { color: var(--ink) !important; }
[data-theme="dark"] .text-gray-700 { color: var(--ink-soft) !important; }
[data-theme="dark"] .text-gray-600 { color: var(--ink-soft) !important; }
[data-theme="dark"] .text-gray-500 { color: var(--ink-muted) !important; }
[data-theme="dark"] .text-gray-400 { color: var(--ink-muted) !important; }

/* Phone mockup lives inside the hero and renders a fake iOS screen. The
   expiry notification is a white floating card, it must stay
   a light card with dark text in both themes, otherwise dark text inherits
   down from .section-light overrides and goes invisible on white. */
.bg-white\/90 { background-color: rgba(255,255,255,0.9) !important; color: #0E1512; }
.bg-white\/90 * { color: inherit; }
.bg-white\/90 .text-majir-gray-muted { color: #6B7570 !important; }
[data-theme="dark"] .bg-white\/90,
[data-theme="dark"] .bg-white\/90 * { color: #0E1512 !important; }
[data-theme="dark"] .bg-white\/90 .text-majir-gray-muted { color: #6B7570 !important; }

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-toggle:hover {
    color: var(--brand);
    border-color: var(--brand);
}

/* Current page in static nav / footer */
nav.fixed a.nav-current,
footer a.nav-current {
    color: var(--ink);
    font-weight: 600;
}

/* Ask AI floating pills (plain links, no widget script) */
.ask-ai-pills {
    position: fixed;
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
}
.ask-ai-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(14, 21, 18, 0.08);
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ask-ai-pill:hover {
    border-color: var(--brand);
    color: var(--brand);
    box-shadow: 0 6px 20px rgba(0, 128, 0, 0.12);
}
.ask-ai-pill-secondary {
    font-weight: 500;
    color: var(--ink-soft);
}
@media (max-width: 640px) {
    .ask-ai-pills {
        right: calc(0.75rem + env(safe-area-inset-right, 0px));
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
    .ask-ai-pill {
        font-size: 0.6875rem;
        padding: 0.4375rem 0.75rem;
    }
}
@media print {
    .ask-ai-pills { display: none; }
}
/* Claude MCP system-status chip (homepage hero). Compact, hairline, no pulse/glow. */
.mcp-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 1.25rem;
    max-width: 28rem;
}
.mcp-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.mcp-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.5rem 0.2rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--canvas-sunk);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 0 rgba(14, 21, 18, 0.04);
}
.mcp-status-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
}
.mcp-status-check {
    flex-shrink: 0;
    color: var(--brand);
}
.mcp-status-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1.2;
}
.mcp-status-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}
.mcp-status-link:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}
.mcp-status-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.mcp-status-copy {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-muted);
}
 [data-theme="dark"] .mcp-status-chip {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(0, 0, 0, 0.2);
}
/* ---------- Compact hero savings estimator ----------
   A single-slider quick estimate that reuses the same formula and
   calibration as the full 3-step calculator at #calculator. Hairline,
   small type, one accent. No glow, no pulse. */
.hero-calc {
    margin-top: 1.25rem;
    max-width: 28rem;
    padding: 0.875rem 1rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--canvas-sunk);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 0 rgba(14, 21, 18, 0.04);
}
.hero-calc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.hero-calc-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1.2;
}
.hero-calc-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}
.hero-calc-link:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}
.hero-calc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.hero-calc-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 9999px;
    background: var(--line);
    outline: none;
    cursor: pointer;
}
.hero-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: var(--brand);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(14, 21, 18, 0.18);
}
.hero-calc-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: var(--brand);
    border: 2px solid var(--surface);
    box-shadow: 0 1px 3px rgba(14, 21, 18, 0.18);
}
.hero-calc-slider:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.hero-calc-estimate {
    flex-shrink: 0;
    font-family: 'Archivo', 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand);
    line-height: 1.1;
    min-width: 4.5rem;
    text-align: right;
}
.hero-calc-copy {
    margin: 0.5rem 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-muted);
}
.hero-calc-copy a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
}
.hero-calc-copy a:hover {
    text-decoration: underline;
}
@media (max-width: 640px) {
    .hero-calc {
        max-width: 100%;
    }
    .hero-calc-estimate {
        font-size: 1rem;
        min-width: 4rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-calc-slider {
        cursor: default;
    }
}
/* ---------- Floating "Ask AI" button (coframe pattern) ----------
   A single chatbot-style affordance pinned to the bottom-right
   corner, hovering over page content. */
.ask-ai-fab {
    position: fixed;
    right: calc(1.25rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    pointer-events: none;
}
.ask-ai-fab__btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(14, 21, 18, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ask-ai-fab__icon {
    display: inline-flex;
    color: var(--brand);
}
.ask-ai-fab__btn:hover {
    border-color: var(--brand);
    box-shadow: 0 6px 20px rgba(0, 128, 0, 0.12);
    transform: translateY(-1px);
}
.ask-ai-fab__btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.ask-ai-fab__popover {
    pointer-events: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    min-width: 15rem;
    padding: 0.375rem;
    border-radius: 0.875rem;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(14, 21, 18, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.ask-ai-fab.is-open .ask-ai-fab__popover {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ask-ai-fab__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ask-ai-fab__link-icon {
    display: inline-flex;
    color: var(--ink-muted);
    flex-shrink: 0;
}
.ask-ai-fab__link-text {
    flex: 1;
}
.ask-ai-fab__live {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    flex-shrink: 0;
    color: #008000;
    border: 1px solid rgba(0, 128, 0, 0.35);
    background: rgba(0, 128, 0, 0.06);
}
.ask-ai-fab__link--live {
    color: var(--ink);
}
.ask-ai-fab__link--live:hover {
    background: rgba(0, 128, 0, 0.07);
}
.ask-ai-fab__link:hover {
    background: var(--canvas-sunk);
    color: var(--brand);
}
.ask-ai-fab__link:hover .ask-ai-fab__link-icon {
    color: var(--brand);
}
.ask-ai-fab__link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}
@media (max-width: 640px) {
    .ask-ai-fab {
        right: calc(0.75rem + env(safe-area-inset-right, 0px));
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
    .ask-ai-fab__btn {
        padding: 0.5rem 0.8125rem;
        font-size: 0.75rem;
    }
    .ask-ai-fab__popover {
        min-width: 13rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ask-ai-fab__btn,
    .ask-ai-fab__popover,
    .ask-ai-fab__link {
        transition: none;
    }
    .ask-ai-fab__popover {
        transform: none;
    }
}
/* Never print a floating widget */
@media print {
    .ask-ai-fab { display: none; }
}

/* ---------- Dev environment badge ----------
   Injected by js/components.js on any non-production host. Deliberately quiet:
   a small floating pill bottom-right, not a full-width banner, so it never
   competes with the page or shifts layout. */
#env-badge {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(14, 21, 18, 0.06), 0 8px 24px -12px rgba(14, 21, 18, 0.28);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    pointer-events: none;
}

#env-badge .env-badge-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: #C2841A;
    box-shadow: 0 0 0 3px rgba(194, 132, 26, 0.16);
    flex-shrink: 0;
}

[data-theme="dark"] #env-badge {
    background: rgba(20, 30, 25, 0.82);
    border-color: var(--line);
    color: var(--ink-soft);
}

[data-theme="dark"] #env-badge .env-badge-dot {
    background: #E2B65E;
    box-shadow: 0 0 0 3px rgba(226, 182, 94, 0.18);
}

@media (max-width: 640px) {
    #env-badge {
        right: 0.75rem;
        bottom: 0.75rem;
        padding: 0.4rem 0.7rem;
        font-size: 0.6875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #env-badge { transition: none; }
}