/* =====================================================================
   ExpressIndexing — express.css

   One theme, two products. This file loads ONLY on expressindexing.com,
   after whichever base stylesheet the page uses (theme / app / auth), and
   repaints all of them.

   Almost everything here is a token override rather than a rule override.
   The base stylesheets are written against CSS variables, so redefining the
   variables changes every screen at once — and, more importantly, any screen
   built later inherits the new look without anyone remembering to come back
   here. The handful of rules below the tokens exist only where a colour was
   written as a literal in the base file, or where the shape language itself
   changes.

   THE IDEA: IndexInstantly is the marketing-facing product — deep navy,
   blue-violet gradients, soft glows, generous radii. Express is the tool:
   near-black chrome, one signal colour, flat surfaces, tighter corners,
   a different typeface. Nobody should mistake one for the other, and no
   customer of either should be able to tell they share a codebase.
   ===================================================================== */

:root{
  /* Chrome — near-black instead of navy. Flat, no blue in it at all. */
  --ii-navy-900:#0a0a0b;
  --ii-navy-800:#141417;
  --ii-navy-700:#1f1f24;

  /* Text */
  --ii-ink:#111113;
  --ii-slate:#57575f;
  --ii-muted:#8c8c96;

  /* One signal colour, used where the base sheets reach for blue/violet. */
  --ii-blue:#ea580c;
  --ii-blue-bright:#f97316;
  --ii-violet:#c2410c;
  --ii-cyan:#f59e0b;

  /* Surfaces — warm paper rather than cool blue-white. */
  --ii-bg:#faf8f5;
  --ii-bg-2:#f3efe9;
  --ii-card:#ffffff;
  --ii-border:#e8e2d9;
  --ii-border-dark:rgba(255,255,255,.09);

  --ii-grad:linear-gradient(120deg,#f97316 0%,#ea580c 55%,#c2410c 100%);
  --ii-grad-soft:linear-gradient(120deg,rgba(249,115,22,.14),rgba(194,65,12,.10));

  /* Flatter. The base look leans on big coloured glows; this one doesn't. */
  --ii-shadow-sm:0 1px 2px rgba(17,17,19,.06);
  --ii-shadow:0 12px 30px -20px rgba(17,17,19,.45);
  --ii-shadow-lg:0 26px 60px -34px rgba(17,17,19,.55);

  /* Tighter corners — the quickest way two products stop looking alike. */
  --ii-radius:10px;
  --ii-radius-lg:14px;
  --ii-sidebar:240px;

  --ii-font-display:'Space Grotesk','Sora',system-ui,sans-serif;
  --ii-font-body:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
}

/* ----------------------------- CHROME ----------------------------- */

/* Marketing hero: flat near-black with one warm bloom, no blue/violet wash. */
.ii-express .ii-hero{
  background:radial-gradient(900px 520px at 78% -12%,rgba(249,115,22,.20),transparent 62%),
             linear-gradient(180deg,#141417,#0a0a0b);
}
.ii-express .ii-hero::after{opacity:.35}
.ii-express .ii-eyebrow{color:#fb923c}
.ii-express .ii-hero .ii-eyebrow{color:#fdba74}
/* Legal + docs heroes are the same dark slab as the marketing hero. */
.ii-express .ii-legal-hero{background:linear-gradient(180deg,#141417,#0a0a0b)}
.ii-express .ii-legal-hero .ii-eyebrow{color:#fdba74}
.ii-express .ii-legal-hero p{color:#b9b4ac}
.ii-express .ii-legal-updated{color:#a49d94}
.ii-express .ii-hero-sub,
.ii-express .ii-hero p{color:#b9b4ac}
/*
 * The accent word in the hero headline. Written as `.ii-hero h1 .ii-accent` in
 * the base sheet, which outranks a plain `.ii-express .ii-accent` — so the
 * selector has to be matched, not just prefixed, or "Google" stays blue on an
 * orange page.
 */
.ii-express .ii-accent,
.ii-express .ii-hero h1 .ii-accent{
  background:linear-gradient(120deg,#fdba74,#f97316,#fb923c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Hero mock-up: the little dashboard picture is full of literal blues too. */
.ii-express .ii-hero-pill{color:#d8d2ca}
.ii-express .ii-bar{background:linear-gradient(180deg,#f97316,rgba(234,88,12,.22))}
.ii-express .ii-mock-url{color:#c9c3ba}

/* Header sits on the warm page colour, not the cool blue-white one. */
.ii-express .ii-header{background:rgba(250,248,245,.86);border-bottom:1px solid var(--ii-border)}
.ii-express .ii-logo-mark{border-radius:8px;box-shadow:none}
.ii-express .ii-logo-i{color:var(--ii-blue)}

/* ----------------------------- APP SHELL ----------------------------- */

/* Sidebar: flat black slab with a hairline, not a navy gradient. */
.ii-express .ii-sidebar{
  background:#0a0a0b;
  border-right:1px solid #1e1e22;
  color:#b4b0a9;
  padding:20px 14px;
}
.ii-express .ii-side-logo{color:#fff;letter-spacing:-.02em}
.ii-express .ii-side-logo .ii-mark{border-radius:8px;box-shadow:none}
.ii-express .ii-side-nav a{border-radius:8px;color:#9b968e;font-weight:500}
.ii-express .ii-side-nav a:hover{background:rgba(255,255,255,.055);color:#fff}
.ii-express .ii-side-nav a.ii-active{background:var(--ii-grad);color:#fff;box-shadow:none}
.ii-express .ii-side-label{color:#6f6a63}
.ii-express .ii-side-foot{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
}
.ii-express .ii-side-foot .ii-pl,
.ii-express .ii-side-foot small{color:#96918a}
.ii-express .ii-side-foot small a{color:#fdba74 !important}
.ii-express .ii-side-prog{background:rgba(255,255,255,.10)}
.ii-express .ii-side-prog span{background:var(--ii-grad)}

/* Topbar sits on the warm page colour, not the blue-white one. */
.ii-express .ii-topbar{background:rgba(250,248,245,.88)}

/* ----------------------------- VOLUME BAND ----------------------------- */

/*
 * The agency band on /pricing was written with literal blues — a light-blue
 * jump link, a blue highlight on the featured row, a pale blue badge. None of
 * them come from a token, so each one has to be named here or the band stays
 * the only blue thing on an orange site.
 */
.ii-express .ii-volume{background:linear-gradient(150deg,#141417,#0a0a0b)}
.ii-express .ii-volume-jump a{color:#c2410c}
.ii-express .ii-volume-jump a:hover{color:var(--ii-ink)}
.ii-express .ii-hero .ii-volume-jump a{color:#fdba74}
.ii-express .ii-hero .ii-volume-jump a:hover{color:#fff}
.ii-express .ii-volume-badge{background:rgba(249,115,22,.18);color:#fdba74}
.ii-express .ii-vrow{border-color:rgba(255,255,255,.09)}
.ii-express .ii-vrow.is-featured{border-color:rgba(249,115,22,.45);background:rgba(249,115,22,.13)}
.ii-express .ii-vrow-credits{color:#e6e0d8}
.ii-express .ii-vrow-name small,
.ii-express .ii-vrow-price small{color:#a49d94}

/* ----------------------------- SURFACES ----------------------------- */

/* Flat cards. Borders do the work that shadows do on the other site. */
.ii-express .ii-panel,
.ii-express .ii-stat,
.ii-express .ii-plan{box-shadow:none}
.ii-express .ii-panel:hover,
.ii-express .ii-stat:hover{box-shadow:none}
.ii-express .ii-plan:hover{transform:none;box-shadow:var(--ii-shadow-sm)}
.ii-express .ii-stat-ico{border-radius:8px}

/* Buttons: squarer, no coloured glow. */
.ii-express .ii-btn{border-radius:8px}
.ii-express .ii-btn--primary{box-shadow:none}
.ii-express .ii-btn--primary:hover{transform:none;filter:brightness(1.06)}
.ii-express .ii-btn--light{background:#fff;border-color:var(--ii-border);color:var(--ii-ink)}
.ii-express .ii-btn--light:hover{transform:none;background:var(--ii-bg-2)}
.ii-express .ii-plan .ii-btn{border-radius:8px}

/* Numbers read as data, not as display type. */
.ii-express .ii-stat-val,
.ii-express .ii-mock-stat .ii-v,
.ii-express table td{font-variant-numeric:tabular-nums}

/* ----------------------------- AUTH ----------------------------- */

.ii-express.ii-auth-body{background:var(--ii-bg)}

/*
 * On Express the auth page has no brand panel beside it, so the form is alone
 * on a wide empty page. The base design leaves .ii-form-card unstyled — it is
 * only a max-width wrapper there, because the split layout already frames it.
 * Here it becomes a real card, which also means giving it the padding and
 * background the base sheet never needed to.
 */
.ii-express .ii-form-card{
  background:var(--ii-card);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius-lg);
  box-shadow:var(--ii-shadow);
  padding:34px 30px;
}
.ii-express .ii-input{
  border-radius:8px;
  background:#fffdfb;
}
.ii-express .ii-input::placeholder{color:#b3aca3}
.ii-express .ii-input:focus{
  border-color:var(--ii-blue);
  box-shadow:0 0 0 3px rgba(234,88,12,.14);
}
.ii-express .ii-check input,
.ii-express .ii-terms input{accent-color:var(--ii-blue)}
.ii-express .ii-auth-body .ii-btn,
.ii-express .ii-form-card .ii-btn{border-radius:8px}