/* Filerra.com — bundled styles. Generated from the Filerra Design System tokens. */

/* ============================================================
   Filerra — Color tokens
   A warm, friendly-but-grounded palette:
   - Paper/Ink   → the professional anchor (cream + near-black)
   - Azure       → primary brand (confident blue, the hero)
   - Pine        → trust / approved / success
   - Sunbeam     → playful highlight pops
   - Stone        → warm neutral grayscale
   Base ramps first, then semantic aliases consumers should use.
   ============================================================ */

:root {
  /* ---- Brand: Azure (primary) ---- */
  --azure-50:  #EEF4FF;
  --azure-100: #D8E6FF;
  --azure-200: #B4CDFF;
  --azure-300: #84ABFB;
  --azure-400: #5285F4;
  --azure-500: #2D6BE4;  /* primary */
  --azure-600: #1E54C4;
  --azure-700: #18459E;
  --azure-800: #15397E;
  --azure-900: #112B5C;

  /* ---- Brand: Pine (trust / success) ---- */
  --pine-50:  #ECF7F0;
  --pine-100: #D2EDDD;
  --pine-200: #A6DCBC;
  --pine-300: #6FC494;
  --pine-400: #3DA871;
  --pine-500: #228B5A;  /* secondary */
  --pine-600: #1A7049;
  --pine-700: #16593B;
  --pine-800: #12462F;
  --pine-900: #0C2E1F;

  /* ---- Brand: Sunbeam (playful highlight) ---- */
  --sun-50:  #FFF9E8;
  --sun-100: #FFF0C2;
  --sun-200: #FFE389;
  --sun-300: #FFD24E;
  --sun-400: #FBC02D;  /* accent */
  --sun-500: #E9A412;
  --sun-600: #C2820A;

  /* ---- Neutrals: Stone (warm gray) ---- */
  --stone-0:   #FFFFFF;
  --stone-50:  #FBF7F0;  /* paper */
  --stone-100: #F4ECE0;
  --stone-150: #ECE2D3;
  --stone-200: #E0D4C2;
  --stone-300: #C9BBA6;
  --stone-400: #A89C88;
  --stone-500: #847C6E;
  --stone-600: #645E54;
  --stone-700: #4A453E;
  --stone-800: #322F2A;
  --stone-900: #1F1D1A;
  --stone-950: #161412;

  /* ---- Ink (warm near-black for text) ---- */
  --ink:       #1B1A22;
  --ink-soft:  #4B4955;

  /* ---- Semantic: status ---- */
  --info-50:  #ECF1FD;
  --info-100: #D4E0FA;
  --info-500: #2D6CDF;
  --info-600: #1F54B8;

  --warn-50:  #FEF6E7;
  --warn-100: #FCE8BE;
  --warn-500: #E5972A;
  --warn-600: #BF7A14;

  --danger-50:  #FCEDEB;
  --danger-100: #F8D5D0;
  --danger-500: #D2382B;
  --danger-600: #AE2A1F;

  --success-50:  var(--pine-50);
  --success-100: var(--pine-100);
  --success-500: var(--pine-500);
  --success-600: var(--pine-600);

  /* ============================================================
     SEMANTIC ALIASES — prefer these in product code
     ============================================================ */

  /* Brand */
  --brand:            var(--azure-500);
  --brand-hover:      var(--azure-600);
  --brand-press:      var(--azure-700);
  --brand-tint:       var(--azure-100);
  --brand-tint-soft:  var(--azure-50);
  --brand-on:         #FFFFFF;          /* text/icon on brand fill */

  --brand-2:          var(--pine-500);  /* secondary brand */
  --brand-2-hover:    var(--pine-600);
  --brand-2-tint:     var(--pine-100);
  --brand-2-on:       #FFFFFF;

  --accent:           var(--sun-400);
  --accent-tint:      var(--sun-100);
  --accent-on:        var(--stone-900);

  /* Surfaces */
  --surface-page:     var(--stone-50);   /* app/page background (cream) */
  --surface-sunk:     var(--stone-100);  /* recessed wells, table stripes */
  --surface-card:     var(--stone-0);    /* raised cards */
  --surface-card-alt: var(--stone-50);
  --surface-inverse:  var(--stone-900);  /* dark sections, footers */
  --surface-overlay:  rgba(27,26,34,0.48);

  /* Text */
  --text-strong:   var(--ink);
  --text-body:     var(--stone-800);
  --text-muted:    var(--stone-500);
  --text-faint:    var(--stone-400);
  --text-inverse:  var(--stone-50);
  --text-on-brand: var(--brand-on);
  --text-link:     var(--azure-600);

  /* Borders / dividers */
  --border-soft:   var(--stone-150);
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --border-brand:  var(--azure-300);
  --ring:          color-mix(in oklab, var(--azure-500) 45%, transparent);

  /* Status (semantic, ready to use) */
  --status-success-fg: var(--pine-700);
  --status-success-bg: var(--pine-50);
  --status-success-bd: var(--pine-200);

  --status-warn-fg: var(--warn-600);
  --status-warn-bg: var(--warn-50);
  --status-warn-bd: var(--warn-100);

  --status-danger-fg: var(--danger-600);
  --status-danger-bg: var(--danger-50);
  --status-danger-bd: var(--danger-100);

  --status-info-fg: var(--info-600);
  --status-info-bg: var(--info-50);
  --status-info-bd: var(--info-100);
}


/* ============================================================
   Filerra — Typography tokens
   Display: Bricolage Grotesque  (headings, hero, numbers)
   Body:    Hanken Grotesk       (UI + prose)
   Mono:    JetBrains Mono       (filing IDs, codes, $ amounts)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Manrope', 'Work Sans', system-ui, sans-serif;
  --font-body:    'Work Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Type scale (px, 1.0 = 16px base) ----
     Display sizes use --font-display; text sizes use --font-body. */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;   /* body default */
  --text-lg:  18px;
  --text-xl:  20px;
  --display-xs: 24px;
  --display-sm: 30px;
  --display-md: 38px;
  --display-lg: 48px;
  --display-xl: 62px;
  --display-2xl: 80px;

  /* ---- Line heights ---- */
  --leading-tight:   1.08;  /* big display */
  --leading-snug:    1.2;
  --leading-normal:  1.45;  /* UI */
  --leading-relaxed: 1.62;  /* long-form prose */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.022em;  /* large display */
  --tracking-snug:   -0.012em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.09em;    /* eyebrow / overline caps */

  /* ============================================================
     SEMANTIC ROLE BUNDLES (font / weight / size / leading / tracking)
     Use the matching role class in guidelines, or read individually.
     ============================================================ */
  --role-display-font:    var(--font-display);
  --role-body-font:       var(--font-body);
}

/* Optional role helper classes (used by specimen cards & kits) */
.fl-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}
.fl-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.fl-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
}
.fl-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.fl-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}


/* ============================================================
   Filerra — Spacing & layout tokens
   4px base grid. Use --space-* for padding/margin/gap.
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  96px;
  --space-13:  128px;

  /* Semantic spacing */
  --gap-inline:    var(--space-2);  /* icon ↔ label */
  --gap-control:   var(--space-3);  /* between form controls */
  --pad-card:      var(--space-6);  /* card interior */
  --pad-section:   var(--space-12); /* page section vertical rhythm */
  --gutter:        var(--space-6);  /* grid gutter */

  /* Container widths */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1100px;
  --container-xl:  1280px;

  /* Control sizing */
  --control-h-sm: 34px;
  --control-h-md: 42px;
  --control-h-lg: 52px;

  /* Z-index ladder */
  --z-base:    0;    /* @kind other */
  --z-sticky:  100;  /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal:   1100; /* @kind other */
  --z-toast:   1200; /* @kind other */
}


/* ============================================================
   Filerra — Effects: radii, shadows, borders, motion
   Friendly-but-grounded: generous rounding, soft warm shadows,
   buttons are full pills, cards are 16px rounded.
   ============================================================ */

:root {
  /* ---- Radii ---- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;   /* default card */
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-pill: 999px;  /* buttons, chips, avatars */

  /* ---- Borders ---- */
  --border-w:        1px;
  --border-w-strong: 1.5px;
  --hairline:        1px solid var(--border);

  /* ---- Shadows (warm-tinted, soft) ----
     Shadows use a warm brown-black so they sit naturally on cream. */
  --shadow-xs:  0 1px 2px rgba(43, 28, 18, 0.06);
  --shadow-sm:  0 1px 2px rgba(43, 28, 18, 0.06),
                0 2px 6px rgba(43, 28, 18, 0.06);
  --shadow-md:  0 2px 4px rgba(43, 28, 18, 0.05),
                0 8px 20px rgba(43, 28, 18, 0.09);
  --shadow-lg:  0 4px 8px rgba(43, 28, 18, 0.06),
                0 18px 40px rgba(43, 28, 18, 0.12);
  --shadow-xl:  0 8px 16px rgba(43, 28, 18, 0.08),
                0 30px 70px rgba(43, 28, 18, 0.16);

  /* Brand-tinted glow (used for primary CTAs on hover) */
  --shadow-brand: 0 6px 18px rgba(45, 107, 228, 0.30);

  /* Inset / well */
  --shadow-inset: inset 0 1px 2px rgba(43, 28, 18, 0.08);

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--ring);

  /* ---- Motion ----
     Playful: a gentle overshoot on press/appear; quick + crisp on hover. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */

  --dur-fast:  120ms;  /* @kind other */
  --dur-base:  200ms;  /* @kind other */
  --dur-slow:  320ms;  /* @kind other */

  /* ---- Textures ---- */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); /* @kind other */
}


/* ============================================================
   Filerra — Webfonts
   Loaded from Google Fonts (see the <link> in every page's <head>) —
   see FONT-UPDATE.md for why (couldn't be self-hosted from a
   competitor's proprietary files; these are the closest practicable
   open-license match).
     - Manrope    → display / headings   (wght 400–800) — rounded
       geometric sans, closest open-license match to ZenBusiness's
       warm/rounded brand headline style.
     - Work Sans  → body / UI text        (wght 400–700, +italic) —
       clean humanist grotesque matching their approachable body copy.
     - JetBrains Mono → filing IDs, codes  (wght 100–800) — unchanged,
       self-hosted below (not a visible brand font).
   ============================================================ */

/* ---------- JetBrains Mono (mono, self-hosted — unchanged) ---------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
  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;
}



/* ============================================================
   Filerra.com — site styles (static build, no framework)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--surface-page);background-image:var(--paper-grain);color:var(--text-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
button{font-family:inherit}
.container{max-width:1200px;margin:0 auto;padding-left:28px;padding-right:28px}
.narrow{max-width:760px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}

/* icons */
.ic{display:inline-flex;line-height:0;flex-shrink:0}
.ic svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-star svg{fill:var(--sun-400);stroke:var(--sun-400)}

/* buttons */
.btn{--_bg:var(--brand);--_fg:var(--brand-on);--_bd:transparent;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1.5px solid var(--_bd);background:var(--_bg);color:var(--_fg);cursor:pointer;white-space:nowrap;transition:transform .12s var(--ease-spring),background .12s,box-shadow .2s,border-color .12s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn .ic{font-size:1.1em}
.btn--sm{height:36px;padding:0 16px;font-size:14px}
.btn--md{height:44px;padding:0 22px;font-size:16px}
.btn--lg{height:54px;padding:0 30px;font-size:18px}
.btn--block{width:100%}
.btn--primary:hover{background:var(--brand-hover);box-shadow:var(--shadow-brand)}
.btn--secondary{--_bg:var(--brand-2);--_fg:#fff}
.btn--secondary:hover{background:var(--brand-2-hover)}
.btn--outline{--_bg:var(--surface-card);--_fg:var(--text-strong);--_bd:var(--border-strong)}
.btn--outline:hover{border-color:var(--ink);background:var(--surface-card-alt)}
.btn--ghost{--_bg:transparent;--_fg:var(--text-strong)}
.btn--ghost:hover{background:var(--surface-sunk)}
.btn--white{--_bg:#fff;--_fg:var(--brand)}
.btn--white:hover{background:var(--stone-50)}

/* badge */
.badge{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;line-height:1;padding:5px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--success{background:var(--status-success-bg);color:var(--status-success-fg);border-color:var(--status-success-bd)}
.badge--warning{background:var(--status-warn-bg);color:var(--status-warn-fg);border-color:var(--status-warn-bd)}
.badge--brand{background:var(--brand-tint);color:var(--azure-700)}

/* card */
.card{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}

/* nav */
.nav{position:sticky;top:0;z-index:100;background:color-mix(in oklab,var(--surface-page) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft)}
.nav__in{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
.nav__links{display:flex;gap:26px;margin-left:20px}
.nav__links a{font-size:15px;font-weight:500;color:var(--text-body)}
.nav__links a:hover{color:var(--text-strong)}
.nav__cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav__burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--surface-card);align-items:center;justify-content:center;cursor:pointer;font-size:22px;color:var(--text-strong)}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo__word{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;color:var(--text-strong)}

/* mobile menu sheet */
.msheet{display:none;border-top:1px solid var(--border-soft);background:var(--surface-page)}
.msheet a{display:block;padding:14px 28px;font-size:16px;font-weight:500;color:var(--text-body);border-bottom:1px solid var(--border-soft)}
.msheet .msheet__cta{padding:16px 28px;display:flex;gap:12px}
.msheet.open{display:block}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:72px 0 40px}
.eyebrow-pill{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:var(--surface-card);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--text-body);box-shadow:var(--shadow-xs)}
.eyebrow-pill .live{width:7px;height:7px;border-radius:50%;background:var(--pine-500)}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:60px;line-height:1.04;letter-spacing:-0.025em;color:var(--text-strong);margin-top:20px;text-wrap:balance}
.squig{position:relative;white-space:nowrap}
.squig svg{position:absolute;left:0;bottom:-6px;width:100%;height:10px;stroke:var(--sun-400);stroke-width:5;fill:none;stroke-linecap:round}
.hero__lead{font-size:19px;line-height:1.6;color:var(--text-body);margin-top:22px;max-width:460px}
.hero__cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero__checks{display:flex;align-items:center;gap:18px;margin-top:24px;font-size:14px;color:var(--text-muted);flex-wrap:wrap}
.hero__checks span{display:inline-flex;align-items:center;gap:6px}
.hero__checks .ic{color:var(--pine-500);font-size:16px}
.hero__art{display:flex;justify-content:center;position:relative}
.hero__art .glow{position:absolute;inset:-8% -4%;background:radial-gradient(60% 60% at 70% 30%,var(--brand-tint-soft),transparent 70%);border-radius:50%;z-index:0}

/* status preview */
.status{position:relative;z-index:1;width:100%;max-width:420px;padding:0;overflow:hidden}
.status__top{padding:16px 20px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between}
.status__co{display:flex;align-items:center;gap:10px}
.status__ico{width:34px;height:34px;border-radius:10px;background:var(--brand-tint);display:grid;place-items:center;color:var(--azure-700);font-size:18px}
.status__name{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--text-strong)}
.status__sub{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.status__rows{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.status__row{display:flex;align-items:center;gap:12px}
.status__dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:14px}
.status__dot--done{background:var(--pine-500);color:#fff}
.status__dot--todo{background:var(--surface-sunk);color:var(--text-muted)}
.status__label{font-size:15px;color:var(--text-body);flex:1}

/* trust bar */
.trust{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;color:var(--text-muted);font-size:14px;padding:20px 0 8px}
.trust strong{color:var(--text-strong)}
.trust .stars{display:inline-flex;align-items:center;gap:3px;font-size:16px}
.trust .vr{width:1px;height:18px;background:var(--border)}

/* section heads */
.shead{text-align:center;max-width:620px;margin:0 auto}
.shead--left{text-align:left;margin:0}
.shead .ey{font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.shead h2{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1.1;letter-spacing:-0.02em;color:var(--text-strong);margin-top:10px;text-wrap:balance}
.shead p{font-size:18px;line-height:1.6;color:var(--text-muted);margin-top:14px}

.section{padding:72px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}

/* how it works */
.how__card{padding:26px}
.how__top{display:flex;align-items:center;justify-content:space-between}
.how__ico{width:48px;height:48px;border-radius:14px;background:var(--brand-tint-soft);display:grid;place-items:center;color:var(--brand);font-size:24px}
.how__n{font-family:var(--font-mono);font-size:14px;color:var(--text-faint)}
.how__card h3{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--text-strong);margin-top:18px}
.how__card p{font-size:15.5px;line-height:1.6;color:var(--text-muted);margin-top:8px}

/* pricing */
.pricing{background:var(--surface-sunk);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.tier{padding:28px;position:relative;background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.tier--feat{border:2px solid var(--brand);box-shadow:var(--shadow-lg)}
.tier__pop{position:absolute;top:-12px;left:28px}
.tier h3{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--text-strong)}
.tier__desc{font-size:14.5px;color:var(--text-muted);margin-top:6px;min-height:40px}
.tier__price{display:flex;align-items:baseline;gap:8px;margin:14px 0 18px}
.tier__price b{font-family:var(--font-display);font-weight:700;font-size:42px;color:var(--text-strong);letter-spacing:-0.02em}
.tier__price span{font-size:15px;color:var(--text-muted)}
.tier__feats{display:flex;flex-direction:column;gap:11px;margin-top:22px}
.tier__feat{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--text-body)}
.tier__feat .ic{color:var(--pine-500);font-size:18px;margin-top:1px}

/* faq */
.faq{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.faq__item{padding:0;box-shadow:var(--shadow-sm);overflow:hidden}
.faq__q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;background:transparent;border:0;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:17.5px;color:var(--text-strong)}
.faq__q .ic{color:var(--brand);font-size:20px;transition:transform .25s var(--ease-out)}
.faq__item[open] .faq__q .ic{transform:rotate(45deg)}
.faq__a{font-size:15.5px;line-height:1.6;color:var(--text-muted);padding:0 22px 20px}
.faq__q::-webkit-details-marker{display:none}

/* cta band */
.ctaband{background:var(--surface-inverse);border-radius:var(--radius-2xl);padding:56px 48px;position:relative;overflow:hidden;text-align:center;margin-bottom:72px}
.ctaband__glow{position:absolute;top:-40px;right:-20px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(45,107,228,.5),transparent 70%)}
.ctaband h2{font-family:var(--font-display);font-weight:700;font-size:42px;line-height:1.08;letter-spacing:-0.02em;color:#fff;position:relative}
.ctaband p{font-size:18px;color:rgba(255,255,255,.75);margin:14px auto 26px;max-width:460px;position:relative}
.ctaband .btn{position:relative}

/* footer */
.footer{background:var(--surface-card);border-top:1px solid var(--border-soft)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:48px 0 32px}
.footer__tag{font-size:14px;color:var(--text-muted);margin-top:14px;max-width:240px;line-height:1.6}
.footer h4{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong);margin-bottom:14px}
.footer__col a{display:block;font-size:14.5px;color:var(--text-muted);margin-bottom:9px}
.footer__col a:hover{color:var(--text-strong)}
.footer__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:0 0 28px;font-size:13px;color:var(--text-faint)}
.footer__bot a{color:var(--text-faint)}
.footer__bot a:hover{color:var(--text-body)}
.footer__legal{display:flex;gap:18px}

/* modal */
.modal{position:fixed;inset:0;z-index:1100;background:var(--surface-overlay);backdrop-filter:blur(3px);display:none;place-items:center;padding:20px}
.modal.open{display:grid;animation:fl-fade .2s ease}
.modal__box{width:min(460px,100%);padding:0;animation:fl-rise .28s var(--ease-spring)}
.modal__top{padding:20px 24px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between}
.modal__x{border:0;background:transparent;cursor:pointer;color:var(--text-muted);display:flex;font-size:20px}
.modal__x:hover{color:var(--text-strong)}
.modal__body{padding:24px}
.modal__step{font-family:var(--font-mono);font-size:12px;color:var(--brand);font-weight:600;letter-spacing:.06em}
.modal__body h3{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--text-strong);margin:8px 0 4px}
.modal__body p.sub{font-size:14.5px;color:var(--text-muted);margin:0 0 18px}
.field{width:100%;background:var(--surface-card);border:1.5px solid var(--border);border-radius:var(--radius-md);height:46px;padding:0 14px;font-family:inherit;font-size:16px;color:var(--text-strong);transition:border-color .12s,box-shadow .2s}
.field:focus{outline:0;border-color:var(--ink);box-shadow:var(--focus-ring)}
.field::placeholder{color:var(--text-faint)}
select.field{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23847C6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.modal__success{text-align:center;padding:8px 0 4px}
.modal__check{width:64px;height:64px;border-radius:50%;background:var(--pine-500);display:grid;place-items:center;margin:0 auto 16px;color:#fff;font-size:34px;animation:fl-pop .4s var(--ease-spring)}

@keyframes fl-fade{from{opacity:0}to{opacity:1}}
@keyframes fl-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fl-pop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* legal / prose pages */
.legal{max-width:760px;margin:0 auto;padding:56px 28px 80px}
.legal h1{font-family:var(--font-display);font-weight:700;font-size:44px;letter-spacing:-0.02em;color:var(--text-strong);margin-bottom:8px}
.legal .updated{font-family:var(--font-mono);font-size:13px;color:var(--text-faint);margin-bottom:32px}
.legal h2{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--text-strong);margin:36px 0 10px}
.legal p{font-size:16px;line-height:1.7;color:var(--text-body);margin-bottom:14px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{font-size:16px;line-height:1.7;color:var(--text-body);margin-bottom:6px}
.legal a{color:var(--text-link);text-decoration:underline}
.legal .callout{background:var(--surface-sunk);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:16px 18px;font-size:15px;color:var(--text-muted);margin:0 0 24px}

/* responsive */
@media (max-width:920px){
  .hero{grid-template-columns:1fr;gap:36px;padding-top:48px}
  .hero h1{font-size:48px}
  .grid3{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:inline-flex}
  .shead h2{font-size:32px}
  .ctaband h2{font-size:32px}
}
@media (max-width:520px){
  .container{padding-left:20px;padding-right:20px}
  .hero h1{font-size:40px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:24px}
  .ctaband{padding:40px 24px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto}}

/* ============================================================
   Guides / blog + state landing pages
   ============================================================ */
.crumb{font-size:13px;color:var(--text-muted);padding-top:24px}
.crumb a{color:var(--text-link)}
.crumb a:hover{text-decoration:underline}

/* article */
.article{max-width:760px;margin:0 auto;padding:8px 28px 80px}
.article__cat{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.article__title{font-family:var(--font-display);font-weight:700;font-size:44px;line-height:1.08;letter-spacing:-0.02em;color:var(--text-strong);margin:10px 0 12px;text-wrap:balance}
.article__meta{font-family:var(--font-mono);font-size:13px;color:var(--text-faint);margin-bottom:30px}
.article__lead{font-size:20px;line-height:1.6;color:var(--text-muted);margin:0 0 24px}
.article p,.article li{font-size:17px;line-height:1.75;color:var(--text-body)}
.article p{margin:0 0 16px}
.article h2{font-family:var(--font-display);font-weight:600;font-size:27px;color:var(--text-strong);margin:36px 0 10px;letter-spacing:-0.01em}
.article ul{margin:0 0 16px;padding-left:22px}
.article li{margin-bottom:7px}
.article a{color:var(--text-link);text-decoration:underline}
.article__cta{background:var(--surface-inverse);border-radius:var(--radius-xl);padding:34px 34px;text-align:center;margin:44px 0 0;position:relative;overflow:hidden}
.article__cta h3{font-family:var(--font-display);font-weight:700;font-size:27px;color:#fff;margin:0 0 8px}
.article__cta p{color:rgba(255,255,255,.75);margin:0 0 18px;font-size:16px}
.disclaimer{font-size:13.5px;color:var(--text-faint);border-top:1px solid var(--border-soft);margin-top:44px;padding-top:18px;line-height:1.6}

/* state landing facts */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:6px 0}
.fact{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px 22px}
.fact__k{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-muted);font-weight:600}
.fact__k .ic{color:var(--brand);font-size:18px}
.fact__v{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--text-strong);letter-spacing:-0.01em;margin-top:8px}
.fact__v small{font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--text-muted)}

/* guides index */
.guides-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
.guide-card{display:flex;flex-direction:column;padding:26px;text-decoration:none;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.guide-card__cat{font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--brand)}
.guide-card__title{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--text-strong);margin:10px 0 8px;line-height:1.2}
.guide-card__excerpt{font-size:15px;line-height:1.6;color:var(--text-muted);flex:1}
.guide-card__meta{display:flex;align-items:center;gap:7px;margin-top:18px;font-size:13.5px;color:var(--text-link);font-weight:600}
.guide-card__meta .ic{font-size:16px}
.guide-card--feat{grid-column:1/-1;background:var(--surface-inverse)}
.guide-card--feat .guide-card__title{color:#fff;font-size:28px}
.guide-card--feat .guide-card__excerpt{color:rgba(255,255,255,.72)}
.guide-card--feat .guide-card__cat{color:var(--sun-300)}
.guide-card--feat .guide-card__meta{color:#fff}

@media (max-width:720px){
  .facts{grid-template-columns:1fr}
  .guides-grid{grid-template-columns:1fr}
  .article__title{font-size:32px}
}