/* ============================================================================
   PDFwerk — site theme: PDF TOOLS

   A clean, white, card-driven layout in the manner of a modern online PDF
   toolkit: a red brand accent, a centred title, category chips that filter a
   grid of tool cards, and a light footer that indexes every tool.

   Written from scratch for PDFwerk. Only colour, type, spacing and shapes are
   defined here; the shared components in app.css (.btn, .card, .dropzone,
   .results, .tool-form …) are re-skinned, not re-declared. Every geometry token
   the editor depends on (--header-h, .container width, .toast-host position) is
   left alone, and the brand red is scoped to body.site-shell so the editor
   (body.app-shell) keeps its neutral working surface.
   ========================================================================== */

:root {
  /* Brand palette, sampled from the client's logo (static/img/brand-*.png):
     the document blue, its deep shadow, the wordmark navy and the orange
     pencil/check. --brand is the site accent (was red #e5322d); navy + orange
     ink the wordmark. */
  --brand:        #2079c8;
  --brand-dark:   #0c4d8f;
  --brand-soft:   #e8f3fb;
  --brand-line:   #c6e2f3;
  --brand-navy:   #1b395b;
  --brand-orange: #f4781d;
  --brand-orange-soft: #fdefe2;
  /* The client's two blues ("replace it to sky blue and ocean blue") — used
     wherever the site used to lean on the orange accent outside the logo. */
  --sky-blue: #5bb6ef;
  --ocean-blue: #1a72c2;
  --ink:          #1b2129;
  --ink-2:        #3d4550;
  --muted:        #6b7280;
  --line:         #e6e9ea;
  --line-2:       #d7dcdf;
  --surface:      #ffffff;
  --surface-2:    #f7f8f9;
  --radius:       12px;
  --radius-sm:    9px;
  --shadow-sm:    0 1px 2px rgba(20, 30, 35, .06);
  --shadow-md:    0 12px 28px rgba(20, 30, 35, .10);
  --shadow-lg:    0 18px 44px rgba(20, 30, 35, .14);

  /* one accent per tool family, used by the grid and the index */
  --c-organize:   #ee6c4d;
  --c-edit:       #ab6993;
  --c-format:     #6a7bd1;
  --c-optimize:   #8fbc5d;
  --c-security:   #e5322d;
  --c-from:       #5f83c6;
  --c-to:         #5ea162;
  --c-scans:      #d6a72d;
  --c-automate:   #8a5a3c;
}

/* Brand red belongs to the public site, not the editor's neutral chrome. */
body.site-shell {
  --accent: var(--brand);
  --accent-2: var(--brand);
  --accent-dark: var(--brand-dark);
  --accent-soft: var(--brand-soft);
  --accent-line: var(--brand-line);
  /* A soft brand wash behind the masthead on every public page — the tool
     screens and the homepage share one ground (client: "redesgin inside it
     the background"). Client later pointed at this exact blue ("this color")
     and asked for it through the whole site: the gradient now runs to the
     bottom of the document instead of fading to near-white after 420px. */
  background: linear-gradient(180deg, #e2effa 0px, #e9f3fc 420px, #eef6fd 100%);
  color: var(--ink);
}
body.site-shell .site-footer {
  margin-top: 72px;
  /* Deep navy (client: "change footer colors and text") — the old pale-blue
     wash sat on the page's own pale blue and the footer vanished. */
  background: linear-gradient(180deg, #1d2f3f 0px, #16242f 100%);
}
/* The tool screens sit on the sky × ocean mix (client: "not fully white but
   sky blue and ocean blue mix") — the drop card and the workspaces now live
   on blue, not on near-white; the editor start screen wears it too. */
body.tool-shell {
  background: linear-gradient(180deg,
    #c9e7fa 0px,
    color-mix(in srgb, var(--ocean-blue) 16%, #fff) 55%,
    color-mix(in srgb, var(--ocean-blue) 24%, #fff) 100%);
}
body.app-shell:has(#start-screen:not([hidden])) {
  background: linear-gradient(180deg,
    #c9e7fa 0px,
    color-mix(in srgb, var(--ocean-blue) 16%, #fff) 55%,
    color-mix(in srgb, var(--ocean-blue) 24%, #fff) 100%);
}
body.tool-shell .site-footer {
  background: linear-gradient(180deg, #1d2f3f 0px, #16242f 100%);
}

/* ------------------------------------------------------------- masthead */
/* The bar mirrors the PDF tool the client benchmarks us against: a plain
   white strip with no rule, the brand at the left, a light "All Tools" box
   that opens the whole toolkit, then the busiest tools as plain black links.
   The wordmark and its colours stay ours — only the shape is Sejda's. */
.site-header {
  background: var(--surface);
  border-bottom: 0;
}
.header-inner {
  height: 64px;
  /* The reference bar BREATHES: measured live on sejda.com at 1408px, the
     tool links end and the account cluster only starts ~171px later — open
     air in the middle of the bar. Our page container is 1160px, which left
     no slack at all, so the header alone runs a little wider and the two
     clusters finally separate the way the reference's do. */
  max-width: 1280px;
}
/* Stretch chain that creates the middle air: the right block takes all the
   room left of the brand, the nav stretches inside it, and .nav-right's auto
   margin (app.css) parks the account cluster against the right edge.
   flex-wrap: translated labels run far longer than the English ones ("All
   Tools" -> "Alle gereedschappen", "Fill & Sign" -> "Vullen en
   ondertekenen") — the row must wrap rather than push the bar "much wider"
   (client screenshot, Dutch header at 1300px). */
.header-right { flex: 1 1 auto; margin-left: 0; }
.site-header .nav { flex: 1 1 auto; flex-wrap: wrap; row-gap: 2px; }
.brand { color: var(--ink); letter-spacing: -.015em; flex: 0 0 auto; }
.brand-img { width: 34px; height: 34px; display: block; flex: 0 0 auto; }
/* No hover animation on the brand mark — the client stopped the spin
   ("stop the brand logo spining it didnt fornow"). It used to do a full
   rotate(1turn) scale(1.1) turn on hover (sejda-parity, commit 5e4c35d);
   the icon now stays still, like the footer mark. */
/* The wordmark is one line, always — wrapped to "Free PDF / Editor" it read as
   a broken header with a gap (client screenshot). Size steps down so the row
   still fits while the nav is horizontal (620–1020px). */
.brand-words { display: inline-flex; gap: 6px; font-size: 1.32rem; font-weight: 700;
  letter-spacing: -.02em; white-space: nowrap; }
.bw-free { color: var(--brand-orange); }
.bw-name { color: var(--brand-navy); }
.nav-pill { white-space: nowrap; }
@media (max-width: 1020px) { .brand-words { font-size: 1.05rem; } }
@media (max-width: 560px) { .brand-words { font-size: .98rem; } }
/* One line for every header link — the account four (Pricing / Help / Log in /
   Sign up) used to wrap into two lines and stop matching the tool shortcuts
   beside them (client screenshot). Size and padding are measured off the
   reference bar itself (sejda.com, computed live): 17px, weight 400, pure
   black, 6px/8px padding — so the header reads exactly like theirs. */
.nav-link { color: #000; white-space: nowrap; font-weight: 400;
  font-size: 1.0625rem; padding: 6px 8px; }
.nav-link:hover { background: none; color: var(--brand); text-decoration: none; }
.nav-toggle { background: var(--surface); border-color: var(--line-2); }
.dropdown-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 22px;
  width: min(1080px, 94vw);
  grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 24px;
}
.dropdown-panel h4 {
  color: var(--brand); font-size: .7rem; letter-spacing: .07em;
}
.dropdown-panel a { border-radius: 7px; }
.dropdown-panel a:hover { background: var(--brand-soft); color: var(--brand); }
.dropdown-panel .ico-sm { color: var(--brand); }

/* The masthead follows the shape of the tools people compare us against: brand,
   a pill that opens every tool, then a few shortcuts to the busiest tools. The
   right-hand group is pushed to the far edge, and the shortcut links thin out as
   the window narrows before the whole bar collapses to the hamburger. */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 5px;
  font-weight: 400;
  color: #000;
  padding: 6px 9px 4px 8px;
}
.nav-pill:hover { background: #f2f2f2; color: #000; }
.nav-pill::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s cubic-bezier(.2, .7, .25, 1);
}
.nav-dropdown.open .nav-pill::after { transform: rotate(-135deg) translate(-1px, 1px); }

/* The account links (Pricing / Help / Log in / Sign up) sit to the far right
   and stay plain black, with the language globe last — matching the reference
   bar rather than wearing the brand ink. */
.nav-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-right .nav-link { color: #000; }
.nav-globe { display: inline-flex; align-items: center; }
.nav-globe-ico { font-size: 1.05rem; }
.nav-globe:hover { background: var(--brand-soft); border-radius: 20px; }

@media (min-width: 1021px) {
  /* Measured off the reference bar: the brand sits ~40px clear of the
     All Tools box, and the link anchors keep a word-space gap (~4px) so the
     shortcuts read spaced-out rather than glued together. */
  .header-inner { gap: 40px; }
  .site-header .nav { gap: 4px; }
}
@media (max-width: 1240px) {
  .nav-extra { display: none; }
}
/* In every translated language the two extra shortcuts stand down at ANY
   width — their labels ("Pagina's verwijderen", "Zijsnijden") are what made
   the translated bar run past its English width; both stay one click away
   inside the All-tools panel. English keeps them as before. */
html:not([lang="en"]) .nav-extra { display: none; }
@media (max-width: 1020px) {
  /* Shortcuts live inside the All-tools panel from here down. */
  .nav-tool { display: none; }
  .nav-right { gap: 2px; }
}
@media (max-width: 620px) {
  .nav-right { flex-direction: column; align-items: stretch; margin-left: 0;
    width: 100%; border-left: 0; padding-left: 0; }
  .nav-pill { width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------- the All-tools mega panel */
/* Every tool on one sheet, grouped by job, each with the same colour mark its
   card wears. FULL SCREEN (client: "make it full screen bro"): edge to edge
   under the bar and down to the bottom of the viewport — a tools screen, not
   a floating card. CLICK-ONLY, everywhere (client: "it doesnt closwe"): with
   a full-screen sheet the pointer is always over it, so a hover rule can
   never un-hover and the sheet stayed pinned open; clicking the pill toggles
   it, Escape closes it, and a click on the sheet's own background closes it
   (see app.js). The :not(.open) hides it while merely hovering or focused. */
.dropdown-panel.dropdown-mega {
  position: fixed;
  top: var(--header-h, 65px);
  left: 0;
  right: 0;
  transform: none;
  width: auto;
  height: calc(100dvh - var(--header-h, 65px));
  max-height: none;
  overflow-y: auto;
  display: none;
  grid-template-columns: none;
  padding: 30px 44px 36px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.nav-dropdown:not(.open) .dropdown-panel.dropdown-mega { display: none; }
.nav-dropdown.open .dropdown-panel.dropdown-mega { display: block; }

.mega-cols { columns: 6 220px; column-gap: 44px; }
.mega-col { break-inside: avoid; margin: 0 0 16px; }
.mega-col h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.mega-h4-ico { font-size: 12px; color: var(--brand); }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin: 0; }
.mega-col a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
}
.mega-col a:hover,
.mega-col a:focus-visible {
  background: var(--surface-2);
  color: var(--brand);
  text-decoration: none;
}
/* The same FA mark the card wears (pdfwerk/tool_fa.py), at menu size. */
.mega-col a .tool-ico { width: auto; height: auto; font-size: 15px; flex: 0 0 auto; }
.mega-col a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mega-recent { border-bottom: 1px solid var(--line); padding-bottom: 12px; }

@media (max-width: 1240px) {
  .mega-cols { columns: 5 200px; column-gap: 34px; }
}
@media (max-width: 1020px) {
  .mega-cols { columns: 4 190px; column-gap: 28px; }
  .dropdown-panel.dropdown-mega { padding: 22px 26px 26px; }
}
@media (max-width: 620px) {
  /* In the mobile menu the panel is a plain block inside the drawer. */
  .dropdown-panel.dropdown-mega {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 6px 0 10px 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .mega-cols { columns: 1; }
  .mega-col a { white-space: normal; padding: 8px; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  transition: background .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); }
/* Scoped to the marketing shell, exactly as this file's header says: the
   editor and every tool workspace keep app.css's teal accent. Unscoped, this
   rule turned every tool action red (the Watermark bar was the giveaway). */
body.site-shell .btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 6px 14px rgba(229, 50, 45, .18);
}
body.site-shell .btn-primary:hover {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 18px rgba(229, 50, 45, .24);
}
/* Everywhere else — the editor and the tool workspaces — the action keeps
   app.css's teal. This has to be said here because this file's plain `.btn`
   (white surface) loads after app.css and would otherwise win the cascade. */
body:not(.site-shell) .btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 14px rgba(31, 122, 109, .18);
}
body:not(.site-shell) .btn-primary:hover {
  background: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
  transform: translateY(-1px); box-shadow: 0 8px 18px rgba(31, 122, 109, .24);
}
.btn-signal { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.btn-signal:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--brand); }

/* -------------------------------------------------------- type & labels */
.site-shell h1, .site-shell h2, .site-shell h3 { letter-spacing: -.02em; }
.site-shell h1 { font-weight: 800; }
.lead { color: var(--muted); }
.eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 12px;
}
.eyebrow::before { content: none; }

/* --------------------------------------------------- warm opening (Sejda) */
/* Sejda's index opens on a soft cream field (#F3E5D8) with a white wave
   lapping along its top edge, then melts into white as the index begins —
   the "soft warm friendly" look the client picked. Ours is the same recipe: 
   two wave layers for depth, cream fading out before the full tool index. */
.home-warm {
  position: relative;
  background: linear-gradient(180deg, #f3e5d8 0%, #f5e9de 52%, #fbf5ef 78%, #ffffff 100%);
}
.warm-waves { position: absolute; top: -1px; left: 0; right: 0; height: 96px; pointer-events: none; overflow: hidden; }
.warm-waves::before, .warm-waves::after {
  content: ""; position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: 100% 96px;
}
.warm-waves::before {
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,30 C260,74 470,6 760,30 C1050,54 1230,86 1440,34 L1440,0 L0,0 Z' fill='%23ffffff'/></svg>");
}
.warm-waves::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,52 C300,92 560,26 860,50 C1140,72 1300,94 1440,58 L1440,0 L0,0 Z' fill='%23fbf2e9'/></svg>");
  opacity: .85;
}
.home-warm .home-hero { padding-top: 128px; }
.home-warm .pop { padding-bottom: 34px; }

/* ------------------------------------------------------------- home hero */
/* A left-aligned promise with the drop card beside it — the iLovePDF
   opening, dressed in our own red and white. */
.home-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr);
  gap: 42px; align-items: center; padding: 54px 0 38px;
}
.hero-copy h1 {
  font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800;
  line-height: 1.1; margin: 0 0 16px; max-width: 20ch;
}
.hero-lede {
  color: var(--muted); font-size: 1.06rem; max-width: 46ch;
  margin: 0 0 22px; line-height: 1.65;
}
.hero-badges {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 18px;
}
.hero-badges li {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2); font-size: .86rem; font-weight: 600;
}
.hero-badges .ico { color: var(--brand); font-size: 15px; }

/* The drop card: somewhere for the promise to land, without an install. */
.hero-drop .home-drop { max-width: none; margin: 0; background: var(--surface); border-radius: 12px 12px 26px 12px; box-shadow: 0 2px 3px rgba(243, 229, 216, .6), 0 10px 30px rgba(20, 30, 35, .07); }
.hero-drop .dropzone-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 30px 22px;
}
.hero-drop-ico {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); font-size: 26px;
}
.hero-drop .dropzone-inner p {
  margin: 0; font-size: .86rem; max-width: 34ch; text-align: center; line-height: 1.55;
}
@media (max-width: 980px) {
  .home-hero { grid-template-columns: 1fr; padding-top: 38px; gap: 24px; }
  .home-warm .home-hero { padding-top: 96px; }
  .warm-waves, .warm-waves::before, .warm-waves::after { height: 64px; background-size: 100% 64px; }
  .hero-copy h1 { max-width: none; }
}

/* ------------------------------------------------------- the tool index */
/* No panel: on the warm field the cards carry themselves (Sejda's index is
   cards straight on the page). The chips row stays centred above them. */
.home-tools {
  padding: 8px 0 14px; margin-top: 8px;
}

/* ------------------------------------------------------- most used tools */
/* Both houses open with their popular tools — a short row before the long
   index, built from the same registry the tool pages read. The header wears
   Sejda's uppercase blue "MOST POPULAR" treatment. */
.pop { padding: 36px 0 8px; }
.pop .section-head h2 {
  font-size: 1.05rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #3f80da; margin: 0;
}
.pop-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
/* The card is Sejda's own shape: white with no frame, one softly asymmetric
   corner (their 10/10/25, scaled up) and a warm-tinted shadow so it sits on
   cream without a hard edge. */
.pop-card, .tcard {
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  border: 0; border-radius: 12px 12px 26px 12px;
  padding: 18px 20px 18px;
  box-shadow: 0 2px 3px rgba(243, 229, 216, .55), 0 6px 22px rgba(20, 30, 35, .06);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pop-card:hover, .tcard:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(243, 229, 216, .7), 0 14px 34px rgba(20, 30, 35, .1);
}
.pop-card h3, .tcard h3 { font-size: 1.02rem; margin: 0 0 6px; font-weight: 700; letter-spacing: -.01em; }
.pop-card p, .tcard p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }

/* --------------------------------------------------------- category chips */
.tags {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 0 0 22px;
}
.tag {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 17px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tag:hover { border-color: var(--brand); color: var(--brand); }
.tag.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ------------------------------------------------------------- tool grid */
.tgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}
.tcard-ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f5efe8;
  background: color-mix(in srgb, var(--c, var(--brand)) 14%, #fff);
  color: var(--c, var(--brand));
  margin-bottom: 14px; font-size: 20px; line-height: 1;
}
.tcard-ico svg { width: 22px; height: 22px; display: block; }
.tcard .badge { margin-top: 10px; align-self: flex-start; }

/* Family colours, keyed to the registry's category names. */
:is(.tcard, .pop-card)[data-cat="Organize"]          { --c: var(--c-organize); }
:is(.tcard, .pop-card)[data-cat="Edit & Sign"]       { --c: var(--c-edit); }
:is(.tcard, .pop-card)[data-cat="Format & Style"]    { --c: var(--c-format); }
:is(.tcard, .pop-card)[data-cat="Optimize & Repair"] { --c: var(--c-optimize); }
:is(.tcard, .pop-card)[data-cat="Security"]          { --c: var(--c-security); }
:is(.tcard, .pop-card)[data-cat="Convert from PDF"]  { --c: var(--c-from); }
:is(.tcard, .pop-card)[data-cat="Convert to PDF"]    { --c: var(--c-to); }
:is(.tcard, .pop-card)[data-cat="Scans"]             { --c: var(--c-scans); }
:is(.tcard, .pop-card)[data-cat="Automate"]          { --c: var(--c-automate); }
:is(.fh-card, .fh-chip)[data-cat="Organize"]          { --c: var(--c-organize); }
:is(.fh-card, .fh-chip)[data-cat="Edit & Sign"]       { --c: var(--c-edit); }
:is(.fh-card, .fh-chip)[data-cat="Format & Style"]    { --c: var(--c-format); }
:is(.fh-card, .fh-chip)[data-cat="Optimize & Repair"] { --c: var(--c-optimize); }
:is(.fh-card, .fh-chip)[data-cat="Security"]          { --c: var(--c-security); }
:is(.fh-card, .fh-chip)[data-cat="Convert from PDF"]  { --c: var(--c-from); }
:is(.fh-card, .fh-chip)[data-cat="Convert to PDF"]    { --c: var(--c-to); }
:is(.fh-card, .fh-chip)[data-cat="Scans"]             { --c: var(--c-scans); }
:is(.fh-card, .fh-chip)[data-cat="Automate"]          { --c: var(--c-automate); }

.tcard[hidden] { display: none; }
.grid-empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* ----------------------------------------------------------- sections */
.section { padding: 30px 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.section-head h2 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.section-head .eyebrow { margin-bottom: 4px; }
.section-sub { color: var(--muted); margin: 0; }
.section-head .btn { flex: 0 0 auto; }

/* A three-up promise band, the way a toolkit landing page closes. */
.promise {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.promise-cell {
  background: var(--surface); border: 0;
  border-radius: 12px 12px 26px 12px; padding: 22px 22px;
  box-shadow: 0 2px 3px rgba(243, 229, 216, .55), 0 6px 22px rgba(20, 30, 35, .06);
}
.promise-cell b { display: block; font-size: .72rem; letter-spacing: .1em; color: var(--brand); margin-bottom: 10px; }
.promise-cell h3 { font-size: 1.02rem; margin: 0 0 6px; }
.promise-cell p { margin: 0; color: var(--muted); font-size: .9rem; }
/* A round white medallion for the step icon — friendly, and it ties the band
   to the pastel chips on the cards above. */
.promise-ico {
  width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--brand); font-size: 24px;
  box-shadow: 0 2px 3px rgba(243, 229, 216, .6), 0 6px 16px rgba(20, 30, 35, .07);
  margin-bottom: 14px;
}
.promise-4 { grid-template-columns: repeat(4, 1fr); }
/* The warm band: the cream field comes back for the lower sections so the
   page keeps Sejda's soft feel after the cards (client: "change ui from here
   more friendly informative"). */
.warm-band {
  background: #faf3ec; border-radius: 24px;
  padding: 32px 30px 34px; margin: 28px 0;
}
.warm-band .section-sub { max-width: 62ch; }
.section-sub { max-width: 68ch; }
@media (max-width: 1100px) { .promise-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .promise, .promise-4 { grid-template-columns: 1fr; }
  .warm-band { padding: 24px 18px 26px; }
}

/* ------------------------------------------------------------ tool page */
.tool-page { max-width: 860px; margin: 0 auto; padding: 24px 0; }
.tool-head { text-align: center; border: 0; padding: 0; margin-bottom: 16px; }
.tool-head h1 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin: 6px 0 6px; }
.tool-head .lead { margin: 0 auto; font-size: .95rem; }
/* The tool's own colourful mark, right above its name — the same face the home
   cards wear, so a tool is recognisable the moment the page opens. */
/* The tool's own FA face above its name — the same mark the cards wear
   (pdfwerk/tool_fa.py): the glyph over its colour's circle. The page mark
   sits on the blue wash, so its disc runs a touch deeper than the card's
   (20% there, on white) or it would melt into the ground. */
.tool-head-ico { display: grid; place-items: center; width: 54px; height: 54px;
  margin: 0 auto 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--brand)) 32%, #fff); }
.tool-head-ico i { font-size: 25px; color: var(--c, var(--brand)); }
.pill {
  background: var(--brand-soft); color: var(--brand-dark);
  border: 0; border-radius: 999px; padding: 5px 13px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tool-hint {
  display: inline-block; background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-dark); border-radius: 999px; padding: 6px 14px; font-size: .85rem;
}
.tool-steps { justify-content: center; }
.tool-steps span {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted);
}
.tool-steps b { background: var(--brand); color: #fff; }
/* The drop screen wears ONE card — the dashed dropzone — straight on the wash
   (client: "make evrypage look like this every tool", pointing at the Edit
   PDF screen). The white slab that used to wrap it was the "fully white" that
   had to go; options keep a card of their own. */
.tool-form { background: none; border: 0; box-shadow: none; padding: 0; }
.tool-form .options {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-sm); padding: 24px 28px; margin-top: 16px;
}
.options { gap: 18px 22px; }
.field label { color: var(--ink-2); font-size: .84rem; font-weight: 700; }
.field input[type=text], .field input[type=number], .field input[type=password],
.field select, .field textarea {
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface);
  padding: 10px 12px; min-height: 42px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand);
}
.switch span { background: var(--line-2); }
.switch input:checked + span { background: var(--brand); }
.notice { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); border-radius: var(--radius-sm); }
.error { background: #fbeceb; border-color: var(--brand-line); color: var(--brand-dark); border-radius: var(--radius-sm); }
.progress { background: var(--line); border-radius: 999px; height: 8px; }
.progress .bar { background: var(--brand); }
.results { border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 4px; }
.results-head .check-mark { background: var(--brand); color: #fff; border-radius: 50%; }
.result-name .file-icon {
  background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); border-radius: 6px;
}
.result-row { border-bottom: 1px solid var(--line); }
/* A finished file always offers the same two things, side by side: look at it, or
   take it away. Preview opens the stored file in the browser's own viewer and is
   omitted where a browser cannot render the output (docx, xlsx, pptx, zip). */
.file-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.results .file-actions { margin-left: auto; }
.badge { border-radius: 999px; }
.badge.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.dropzone {
  background: var(--surface); border: 2px dashed var(--brand-line);
  border-radius: 16px; box-shadow: 0 18px 44px rgba(12, 77, 143, .07);
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.dragover { border-color: var(--brand); background: var(--brand-soft); }
.dropzone-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.dropzone-inner p { margin: 0; text-align: center; }
/* The little mark above "Choose file" — same chip as the home hero. */
.drop-ico {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); font-size: 26px;
}
.file-list li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.privacy-note { font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------- walkthrough */
/* The per-tool how-to guide is styled in app.css (Sejda's layout in the
   theme's tokens: centred title, quiet grey numerals, a live mock of the
   tool's own panel ringed in amber, tips and FAQ). It used to be re-declared
   here as red-circle cards, which silently overrode the newer design — every
   change to app.css looked like it did nothing. One owner only. */

/* --------------------------------------------------------- help centre */
.help-hero { text-align: center; padding: 46px 0 6px; }
.help-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 10px; }
.help-hero p { color: var(--muted); max-width: 58ch; margin: 0 auto 20px; font-size: 1.05rem; }
.help-search { max-width: 540px; margin: 0 auto; }
.help-search input {
  width: 100%; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 13px 20px; font: inherit; font-size: 1rem; color: var(--ink);
}
.help-search input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.help-topics {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; margin-top: 30px;
}
.help-topic {
  display: block; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.help-topic:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.help-topic .tcard-ico { font-size: 28px; margin-bottom: 13px; }
.help-topic h3 { font-size: 1.02rem; margin: 0 0 6px; }
.help-topic p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.5; }
.help-block { max-width: 800px; margin: 44px auto 0; }
.help-block > h2 { font-size: 1.35rem; margin: 0 0 14px; }
.help-block ol { padding-left: 20px; display: grid; gap: 10px; color: var(--ink-2); }
.help-topic[hidden] { display: none; }

/* --------------------------------------------------------- guide cards */
.guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guide-card {
  display: block; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.guide-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-line); }
.guide-kick {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand);
}
.guide-kick i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.guide-card h3 { font-size: 1.08rem; margin: 0 0 7px; font-weight: 700; }
.guide-lede { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }
.guide-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.guide-steps li { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.guide-num {
  flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark);
  font-size: .72rem; font-weight: 700;
}
.guide-go {
  display: inline-flex; align-items: center; gap: 7px; font-size: .78rem;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand);
}
.guide-go span { transition: transform .18s ease; }
.guide-card:hover .guide-go span { transform: translateX(4px); }

/* --------------------------------------------------- tools index (search) */
.index-page { padding: 46px 0 8px; }
.index-page h1 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); margin: 0 0 10px; }
.index-page .lead { max-width: 62ch; margin: 0; }
.filter-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 12px 15px; box-shadow: var(--shadow-sm);
  margin: 0 0 22px;
}
.filter-bar label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.filter-bar input {
  flex: 1 1 240px; min-width: 0; border: 0; border-bottom: 2px solid var(--line-2);
  background: transparent; font: inherit; font-size: 1rem; padding: 7px 2px; color: var(--ink);
}
.filter-bar input:focus { outline: none; border-bottom-color: var(--brand); }
.filter-count { font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* -------------------------------------------------------------- pricing */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 24px;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.card h3 { font-weight: 800; }
.card p { color: var(--muted); }
.card-cat { color: var(--brand); font-weight: 700; }

/* ---------------------------------------------------------------- about
   The About page, restructured (client: "desgin and more info on about page
   and rrsucture it"): hero + two calls to action, the number row, the
   how-it-works steps, the privacy promises, the engine chips, the company
   block and a closing band — all on the site's card furniture. */
.about-page .tool-head { margin-bottom: 0; }
.ab-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 18px; }
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 26px 0 4px; }
.ab-stat { background: var(--white); border: 1.5px solid #e5eef7;
  border-radius: 16px; padding: 16px 18px; text-align: center; }
.ab-stat b { display: block; font-size: 24px; color: var(--ocean-blue); }
.ab-stat span { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-sec { margin-top: 34px; }
.ab-sec h2 { margin: 0 0 14px; font-size: 1.35rem; color: var(--brand-navy); }
.ab-body { color: var(--muted); margin: 0; line-height: 1.6; }
.ab-steps { list-style: none; counter-reset: ab; margin: 0; padding: 0;
  display: grid; gap: 12px; }
.ab-steps li { counter-increment: ab; position: relative; background: var(--white);
  border: 1.5px solid #e5eef7; border-radius: 14px; padding: 14px 18px 14px 58px; }
.ab-steps li::before { content: counter(ab); position: absolute; left: 16px; top: 14px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ocean-blue) 12%, #fff); color: var(--ocean-blue);
  font-size: 13px; font-weight: 700; }
.ab-steps b { display: block; color: var(--brand-navy); margin-bottom: 2px; }
.ab-steps span { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.ab-points { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.ab-points li { position: relative; padding-left: 26px; color: #33475c;
  font-size: .92rem; line-height: 1.5; }
.ab-points li::before { content: ""; position: absolute; left: 0; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--sky-blue); }
@media (max-width: 640px) { .ab-points { grid-template-columns: 1fr; } }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ab-chip { font-size: .82rem; font-weight: 600; color: #3d6c9e; background: #eef6fd;
  border: 1px solid #cfe3f5; border-radius: 999px; padding: 6px 12px; }
.ab-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-top: 16px; }
.ab-val { background: var(--white); border: 1.5px solid #e5eef7;
  border-radius: 16px; padding: 16px 18px; }
.ab-val b { display: block; color: var(--brand-navy); margin-bottom: 6px; }
.ab-val span { color: var(--muted); font-size: .88rem; line-height: 1.5; }
@media (max-width: 760px) { .ab-vals { grid-template-columns: 1fr; } }
.ab-cta { margin-top: 36px; text-align: center;
  background: color-mix(in srgb, var(--sky-blue) 10%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--sky-blue) 22%, #fff);
  border-radius: 18px; padding: 28px 24px; }
.ab-cta h2 { margin: 0 0 6px; font-size: 1.3rem; color: var(--brand-navy); }
.ab-cta p { margin: 0; color: var(--muted); }

/* ------------------------------------------------------------- accounts
   Log in / Sign up — real forms, demo backend (client: "add login and
   singup forms [for now backend will be add soon anyone try it]"). The
   fields are the final design; submitting reveals the .auth-note that says
   accounts open soon and nothing was sent (static/js/auth.js). */
.auth-page .tool-head { margin-bottom: 24px; }
.auth-card { max-width: 420px; margin: 0 auto; background: var(--white);
  border: 1.5px solid #e5eef7; border-radius: 18px; padding: 26px 26px 20px;
  box-shadow: 0 2px 3px rgba(12, 77, 143, .05), 0 1px 3px rgba(0, 0, 0, .07); }
.auth-card label { display: block; margin: 0 0 6px; font-size: .9rem;
  font-weight: 600; color: var(--brand-navy); }
.auth-card input[type=email], .auth-card input[type=password],
.auth-card input[type=text] { border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; font: inherit; width: 100%; margin-bottom: 14px;
  background: var(--white); color: var(--ink); }
.auth-card input:focus { outline: 2px solid color-mix(in srgb, var(--sky-blue) 55%, #fff);
  outline-offset: 1px; border-color: var(--sky-blue); }
.auth-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: -2px 0 16px; font-size: .86rem; flex-wrap: wrap; }
.auth-remember { display: flex; align-items: center; gap: 8px; color: var(--muted);
  margin: 0 !important; font-weight: 500 !important; }
.auth-link { background: none; border: 0; padding: 0; font: inherit; font-size: .86rem;
  color: var(--ocean-blue); font-weight: 600; cursor: pointer; }
.auth-link:hover { text-decoration: none; }
.auth-submit { width: 100%; }
.auth-terms { color: var(--muted); font-size: .78rem; line-height: 1.5;
  margin: 14px 0 0; }
.auth-alt { text-align: center; color: var(--muted); font-size: .9rem;
  margin: 12px 0 0; }
.auth-alt a { color: var(--ocean-blue); font-weight: 600; }
.auth-note { max-width: 420px; margin: 18px auto 0; text-align: center;
  background: color-mix(in srgb, var(--sky-blue) 10%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--sky-blue) 24%, #fff);
  border-radius: 16px; padding: 18px 20px; }
.auth-note b { color: var(--brand-navy); }
.auth-note p { color: var(--muted); font-size: .9rem; line-height: 1.55;
  margin: 6px 0 14px; }

/* --------------------------------------------------------------- api demo
   The API preview page (client: "add more info in api as demo and api info
   and limits and comercial sellls and personal use and desgin like terminal
   wwith animation [the boxes]"): every code box is a terminal window — a
   title bar with traffic-light dots and a title, a blinking block caret, and
   the demo responses typing in line by line (.term-line stagger, driven by
   static/js/api-demo.js). The amber badge keeps "demo" from reading as live. */
.api-page .tool-head { margin-bottom: 4px; }
.api-badge { display: inline-block; margin-top: 14px; font-size: .74rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  color: var(--amber-ink); border-radius: 999px; padding: 5px 12px; }
.api-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; }
.api-info-item { background: var(--white); border: 1.5px solid #e5eef7;
  border-radius: 14px; padding: 14px 16px; }
.api-info-item b { display: block; margin-bottom: 8px; color: var(--brand-navy);
  font-size: .9rem; }
.api-info-item code { display: inline-block; max-width: 100%; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; color: var(--ocean-blue); background: #eef6fd;
  border: 1px solid #cfe3f5; border-radius: 6px; padding: 3px 7px; }
@media (max-width: 640px) { .api-info { grid-template-columns: 1fr; } }
.api-endpoints { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px; margin-top: 16px; }
.api-card { background: var(--white); border: 1.5px solid #e5eef7;
  border-radius: 16px; padding: 20px 22px; min-width: 0; }
.api-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.api-method { font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  border-radius: 6px; padding: 4px 8px; color: #fff; background: var(--ocean-blue); }
.api-method.api-get { background: #64798f; }
.api-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem; color: var(--brand-navy); background: #eef6fd;
  border: 1px solid #cfe3f5; border-radius: 6px; padding: 3px 8px; }
.api-card > p { color: var(--muted); font-size: .92rem; margin: 10px 0 14px; }
/* The terminal window itself. */
.api-code { background: #16324f; border-radius: 12px; overflow: hidden;
  min-width: 0; box-shadow: 0 10px 26px rgba(9, 30, 54, .18); }
.api-code-head { display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: rgba(255, 255, 255, .06); }
.term-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.term-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; }
.term-dots i:nth-child(1) { background: #ff5f57; }
.term-dots i:nth-child(2) { background: #febc2e; }
.term-dots i:nth-child(3) { background: #28c840; }
.api-code-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: #9fc3e4; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; }
.api-run { flex: 0 0 auto; font: inherit; font-size: .8rem; font-weight: 700;
  color: #d7e8f8; background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 7px;
  padding: 5px 10px; cursor: pointer; transition: background-color .15s ease; }
.api-run:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.api-run:disabled { opacity: .6; cursor: default; }
.api-code pre { margin: 0; padding: 14px 16px; color: #d7e8f8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.55; overflow-x: auto; }
/* the block caret sitting at the end of every terminal */
.api-code pre::after { content: "▍"; margin-left: 2px; color: #7fb4e2;
  animation: api-blink 1.1s steps(1) infinite; }
.api-result { border-top: 1px dashed rgba(255, 255, 255, .18); }
.api-status { display: inline-block; padding: 10px 16px 0; color: #8fe3b0;
  font-size: .78rem; font-weight: 700; }
/* the line-by-line typing of a demo response (--i set by api-demo.js) */
.term-line { display: block; opacity: 0; transform: translateY(3px);
  animation: term-in .2s ease forwards;
  animation-delay: calc(var(--i, 0) * 140ms); }
@keyframes term-in { to { opacity: 1; transform: none; } }
@keyframes api-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .api-code pre::after { animation: none; }
  .term-line { animation: none; opacity: 1; transform: none; }
}
/* limits table + the over-the-limit terminal sitting under it */
.api-limits { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px; margin-top: 16px; }
.api-limits table { width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--white); border: 1.5px solid #e5eef7; border-radius: 14px;
  overflow: hidden; }
.api-limits th, .api-limits td { text-align: left; padding: 11px 16px;
  font-size: .88rem; border-top: 1px solid #e5eef7; }
.api-limits thead th { border-top: 0; background: #f6fafd; color: var(--brand-navy);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.api-limits tbody td:first-child { color: var(--ink); font-weight: 600; }
.api-limits tbody td:not(:first-child) { color: var(--muted); }
@media (max-width: 640px) {
  .api-limits table { font-size: .82rem; }
  .api-limits th, .api-limits td { padding: 9px 11px; }
}
/* personal vs commercial */
.api-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 16px; }
.api-use-card { background: var(--white); border: 1.5px solid #e5eef7;
  border-radius: 16px; padding: 20px 22px; }
.api-use-card h3 { margin: 8px 0; color: var(--brand-navy); font-size: 1.05rem; }
.api-use-card p { color: var(--muted); font-size: .9rem; line-height: 1.55;
  margin: 0 0 12px; }
.api-use-card .ab-points { grid-template-columns: 1fr; }
.api-use-cta { margin-top: 14px; }
@media (max-width: 760px) { .api-use { grid-template-columns: 1fr; } }
.api-fineprint { color: var(--muted); font-size: .82rem; margin: 14px 0 0; }
.api-foot { margin-top: 26px; }

/* --------------------------------------------------------------- footer */
.site-footer {
  background: #16242f; color: #c3d0da;
  border-top: 1px solid rgba(255, 255, 255, .1); padding: 48px 0 24px;
}
.foot-main {
  display: grid; grid-template-columns: minmax(240px, 1.2fr) 2.6fr; gap: 40px;
  padding-bottom: 30px;
}
.foot-brand-link {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; text-decoration: none;
}
.foot-brand .brand-img { width: 30px; height: 30px; }
.foot-brand .brand-words { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; }
.foot-brand-name { color: var(--brand-orange); font-weight: 800; font-size: 1.22rem; letter-spacing: -.02em; }
.foot-tag { color: var(--muted); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; }

/* ----------------------------------------------------- homepage: the Finder
   The client picked practice #2 for the real page ("home 2 but color according
   to brand"): a live search box over the whole index, family chips, and every
   tool as a card — brand blues, orange for the batch badge, navy ink. */
.fh-hero { text-align: center; padding: 44px 0 4px; }
.fh-hero h1 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -.03em;
  margin: 0 0 10px; color: var(--brand-navy); }
.fh-sub { color: var(--muted); max-width: 560px; margin: 0 auto 22px; }

/* Sejda-pattern hero (the client's reference: big title, coloured tagline,
   one big editor call to action, “or choose one of our tools” under it, and
   dotted clusters in the corners). The finder keeps its place below — the
   search was the client's earlier pick, so it stays. */
.fh-hero { position: relative; }
.fh-hero::before, .fh-hero::after {
  content: ""; position: absolute; top: 22px; width: 200px; height: 250px;
  background-image: radial-gradient(circle, rgba(32, 121, 200, .38) 1.6px, transparent 1.7px);
  background-size: 13px 13px; opacity: .45; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.fh-hero::before { left: 3%; }
.fh-hero::after { right: 3%; }
.fh-tag { font-weight: 700; margin: 0 0 22px;
  font-size: clamp(17px, 2vw, 22px); color: var(--ocean-blue);
  background: linear-gradient(92deg, var(--ocean-blue) 5%, var(--sky-blue) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.fh-cta { display: inline-flex; align-items: center; gap: 12px;
  background: var(--ocean-blue); color: #fff; font-weight: 700;
  font-size: 1.06rem; padding: 15px 28px; border-radius: 10px;
  box-shadow: 0 16px 34px rgba(26, 114, 194, .30);
  transition: background-color .15s ease, transform .15s ease; }
.fh-cta:hover { background: #155f9f; transform: translateY(-1px); }
.fh-cta .fh-cta-go { font-size: 14px; }
.fh-or { margin: 14px 0 26px; color: var(--muted); font-size: 15px; }
.fh-or a { color: #5c7390; font-weight: 600; display: inline-flex;
  align-items: center; gap: 6px; }
.fh-or a:hover { color: var(--accent); }
.fh-or .fh-or-go { font-size: 12px; }
#fh-grid { scroll-margin-top: 92px; }
@media (max-width: 900px) {
  .fh-hero::before, .fh-hero::after { display: none; }
}
/* The search box, the "N tools shown" line and the family chips used to live
   here — all removed on request (client: "remove it … remove search bar
   also … mirror excate same ui like sajde"). The page now flows hero → bands
   exactly like Sejda's index. */
/* Sejda's index rhythm (client: "same cards and full all tools on screen like
   sajde"): the one wall becomes bands — "Most popular" first, then one band
   per family — each band a grid of the same card. The sheet itself is
   Sejda's: a 975px column, centred. */
.fh-grid { padding: 22px 0 8px; max-width: 975px; margin: 0 auto; }
.fh-sec { padding: 4px 0 14px; }
/* Their band heading: 18px, light, uppercase, 10px 20px of air — the text
   lines up with the card marks below it. */
.fh-sec h3 { margin: 0; padding: 6px 20px 10px; font-size: 18px; font-weight: 400;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sky-blue) 52%, var(--brand-navy)); }
.fh-sec-pop h3 { color: var(--ocean-blue); }
/* Three cards to a row, Sejda's own count (client: "not same it has 3 cards
   one row") — two on tablets, one on phones. */
.fh-sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 14px; }
@media (max-width: 1020px) {
  .fh-sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fh-sec-grid { grid-template-columns: 1fr; }
}
/* The card, Sejda's composition measured off their live index: 15/20/7/7
   padding, corners 10 10 25, white and borderless; a small circle plus an
   18px black title share one row, the grey 14px/16px description sits 15px
   under it. Same anatomy for every tool, in every band. */
.fh-card { display: block; background: var(--white); border: 0;
  border-radius: 10px 10px 25px; padding: 15px 20px 12px 16px;
  box-shadow: 0 2px 3px rgba(12, 77, 143, .05), 0 1px 3px rgba(0, 0, 0, .08);
  transition: transform .15s ease, box-shadow .15s ease; }
.fh-card:hover { transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(12, 77, 143, .13); }
/* No link underline on the cards (client: "remove underline when u move
   cursor on cards … remove it only") — app.css's global a:hover underline
   is silenced for the cards alone; the hover lift + shadow already read as
   interactive. Everything else keeps its underline. */
.fh-card, .fh-card:hover { text-decoration: none; }
.fh-card[hidden], .fh-sec[hidden] { display: none; }
.fh-top { display: flex; align-items: center; gap: 12px; }
.fh-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c, var(--brand)) 20%, #fff); }
/* Sejda's mark anatomy: their circle is the tool colour at .2 under a Light
   glyph (pdfwerk/tool_fa.py carries the glyph + colour per tool). */
.fh-ico i { font-size: 17px; color: var(--c, var(--brand)); }
.fh-name { font-size: 18px; font-weight: 400; line-height: 18px; color: #000; }
.fh-desc { display: block; margin: 15px 0 0; font-size: 14px; line-height: 16px;
  color: #777; }
.fh-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.fh-badge { font-size: 11px; font-weight: 600; border: 1px solid var(--brand-line);
  background: #f6fafd; color: #52677e; border-radius: 999px; padding: 3px 9px; }
.fh-badge.out { background: var(--brand); border-color: var(--brand); color: #fff; }
.fh-badge.batch { background: #e8f3fc; border-color: #c6e0f5;
  color: var(--ocean-blue); }
.fh-empty { text-align: center; color: var(--muted); padding: 36px 0 10px; }

/* The how-to guide bands under the index — Sejda's "How-to PDF Guides"
   section, mirrored band for band (client: "can u mirror their design?").
   Measured off their live page: full-bleed bands with 60px top/bottom, an
   800px post column at 20px/28px #333, a 24px #666 heading, steps as 23px
   numbered circles (blue, or green) or square bullets, and a bold 20px
   arrow link. Every other band takes one of their pastel tints and two of
   their soft rounded shapes, floating slowly at the band edges. */
.fh-guides { margin: 0 calc(-1 * var(--home-gutter)); background: var(--white); }
.hg-head { padding: 60px 20px 25px; text-align: center; }
.hg-head h2 { margin: 0; font-size: 36px; font-weight: 700; color: #666; }
.hg-band { position: relative; overflow: hidden; padding: 60px 0; }
.hg-band-c1d1, .hg-band-a1b1 { background: #ebf5fe; }
.hg-band-a2b2 { background: #fff2eb; }
.hg-post { position: relative; max-width: 800px; margin: 0 auto; padding: 0 20px;
  font-size: 20px; line-height: 28px; }
.hg-post h3 { margin: 40px 0; font-size: 24px; font-weight: 700; color: #666; }
.hg-steps { list-style: none; counter-reset: hg-num; margin: 0;
  padding: 0 0 0 26px; }
.hg-steps li { position: relative; padding-left: 10px; color: #333; }
.hg-steps li::before { counter-increment: hg-num; content: counter(hg-num);
  position: absolute; left: -26px; top: 0; width: 23px; height: 23px;
  border-radius: 999px; font-size: 16px; line-height: 23px; text-align: center;
  color: #0282e5; background: rgba(65, 161, 240, .2); }
.hg-steps--squares { list-style: square outside none; padding: 0 0 0 20px; }
.hg-steps--squares li { list-style: square outside none; padding-left: 10px; }
.hg-steps--squares li::before { content: none; }
.hg-cta { display: inline-block; margin-top: 30px; font-weight: 700;
  font-size: 20px; color: #41a1f0; }
.hg-band-c1d1 .hg-cta, .hg-band-a1b1 .hg-cta { color: #41a1f0; }
.hg-band-a2b2 .hg-cta { color: #ff7c3f; }
.hg-cta i { margin-left: 4px; font-size: .85em; }
.hg-cta:hover { text-decoration: none; }
.hg-shape { position: absolute; width: 200px; height: 200px; opacity: .25;
  pointer-events: none; animation: hg-float 4s ease-out infinite alternate; }
.hs-c1 { right: -108px; top: 13px; width: 197px; border-radius: 42px; background: rgba(65, 161, 240, .5); }
.hs-d1 { left: -160px; top: 85px; width: 197px; border-radius: 86px; background: rgba(65, 161, 240, .5); }
.hs-a1 { right: -101px; top: 68px; border-radius: 91px; background: rgba(65, 161, 240, .5); }
.hs-b1 { left: -69px; top: 237px; width: 131px; border-radius: 108px; background: rgba(65, 161, 240, .5); }
.hs-a2 { right: -100px; top: 183px; border-radius: 34px; background: rgba(255, 124, 63, .5); }
.hs-b2 { left: -158px; top: 73px; border-radius: 34px; background: rgba(255, 124, 63, .5); }
/* .hs-a3 / .hs-b3 (the mint band's green shapes) and .hg-band-a3b3 are gone
   with the green dress — the client wanted the colour out of the guides. */
@media (min-width: 768px) { .hg-shape { opacity: 1; } }
@keyframes hg-float { from { translate: 0 0; } to { translate: 0 5vh; } }
@media (prefers-reduced-motion: reduce) { .hg-shape { animation: none; } }

/* Full-page index (client: "all tools make it full page like sajde" → "like
   sajde"): the page drops its 1160px reading column and every band carries
   its own gutter — the grid then fits as many cards as the window can hold,
   edge to edge. The hero keeps its centred dress: its contents already limit
   themselves, so it looks identical — just wider arms. */
main.home-wide { --home-gutter: clamp(16px, 2.2vw, 40px); max-width: none; padding: 0; }
main.home-wide .fh-hero { padding: 44px var(--home-gutter) 4px; }
main.home-wide .fh-grid-wrap { padding: 0 var(--home-gutter); }

/* One column, one set of edges (client: "align the card and footers too"):
   on the homepage the sheet under the hero — the band column, the stats row
   and the footer — all share the cards' 975px width, so their left and right
   edges line up. Other pages keep the wider footer. */
main.home-wide ~ .site-footer .container { max-width: 975px; }

/* On the homepage the guide bands ARE the page end — flush the footer right
   against them so no pale strip floats between the last band and the footer
   (client: "fix footer area and desgin it"). Other pages keep the 72px of
   breath above the footer from the site-shell rule. */
main.home-wide ~ .site-footer { margin-top: 0; }

/* The PDF Editor promo band — removed on request (client: "remove this and add
   color into whole site"). The colour instead goes into the surfaces below. */

/* Colour pass (same request): the hero tagline runs blue → orange, the editor
   button wears the brand orange, every card gets a top edge in its family's
   colour, and the three stats count in three different brand inks. */

/* The group mark under the footer: its own band below the bottom row — a
   hairline above, LEFT-ALIGNED with the © line on every width (client's
   annotation), stepping the size down so it never crowds the row. The mark
   is the client's remove.bg export, trimmed to the artwork by
   tools/qepl_process.py — real alpha, box interiors clear — so it sits
   straight on any footer wash with no pale rectangle behind it (client:
   "put it and fix footer area and desgin it"). */
.foot-group { display: flex; justify-content: flex-start; align-items: center;
  border-top: 1px solid var(--line); margin-top: 22px; padding: 24px 0 8px; }
/* Client: "resize the qepl logo" — a touch smaller so the mark closes the
   footer instead of dominating the row. */
.foot-group img { display: block; width: 160px; height: auto; }
@media (max-width: 900px) { .foot-group img { width: 145px; } }
@media (max-width: 560px) { .foot-group { margin-top: 18px; padding: 18px 0 6px; }
  .foot-group img { width: 130px; } }
.foot-blurb { color: var(--muted); margin: 0 0 16px; max-width: 34ch; line-height: 1.55; }
.foot-points { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.foot-points li {
  font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 8px;
}
.foot-points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }

/* The feature columns at the top of the footer, set in even tracks. */
.foot-cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.foot-tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 22px 26px; padding: 28px 0 6px; border-top: 1px solid var(--line);
}
.foot-head {
  font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 12px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 0 0 8px; }
.foot-col a { color: var(--muted); font-size: .86rem; text-decoration: none; transition: color .14s ease; }
.foot-col a:hover { color: var(--brand); }

.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted);
}
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--brand); }
.foot-top { color: var(--muted); text-decoration: none; }
.foot-top:hover { color: var(--brand); }

/* ------------------------------------------------ footer palette (dark navy)
   "change footer colors and text": the footer is a deep navy surface now —
   headings in white, body ink in soft silver-blue, links settle to sky on
   hover, rules as faint white lines. The QEPL mark renders white via a filter
   so the client's artwork carries on dark, and the brand words flip light
   (the navy "PDF Editor" would vanish on navy). */
.site-footer .foot-tag { color: #8fa6b6; }
.site-footer .foot-blurb { color: #aebfca; }
.site-footer .foot-points li { color: #c3d0da; }
.site-footer .foot-head { color: #f2f7fa; }
.site-footer .foot-col a { color: #aebfca; }
.site-footer .foot-col a:hover { color: #7cc0f0; }
.site-footer .foot-bottom { color: #8fa6b6; border-top-color: rgba(255, 255, 255, .1); }
.site-footer .foot-links a { color: #aebfca; }
.site-footer .foot-links a:hover { color: #7cc0f0; }
.site-footer .foot-top { color: #aebfca; }
.site-footer .foot-top:hover { color: #7cc0f0; }
.site-footer .foot-group { border-top-color: rgba(255, 255, 255, .1); }
.site-footer .foot-tools { border-top-color: rgba(255, 255, 255, .1); }
.site-footer .foot-group img { filter: brightness(0) invert(1); opacity: .92; }
.site-footer .bw-name { color: #f2f7fa; }

@media (max-width: 900px) {
  .foot-main { grid-template-columns: 1fr; gap: 28px; }
  .promise { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .guides { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .foot-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .home-hero { padding-top: 40px; }
  .tgrid { grid-template-columns: 1fr; }
  .tags { justify-content: flex-start; }
  .filter-bar input { flex-basis: 100%; }
}

/* --------------------------------------------------------------- toasts */
.toast { border-radius: var(--radius-sm); background: var(--ink); }
.toast.ok { background: var(--brand-dark); }

/* ------------------------------------------------------------- motion */
@keyframes t-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); }
html.js-reveal [data-reveal].in {
  animation: t-rise .55s cubic-bezier(.2, .7, .25, 1) both;
  animation-delay: var(--d, 0s);
}
.site-header { transition: box-shadow .25s ease; }
.site-header.scrolled { box-shadow: 0 4px 16px rgba(20, 30, 35, .08); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ glassy buttons
   Client: "add glassy effect on all buttons". Each .btn keeps its shell colour
   and layout — the glass is a frosted translucent fill, a light sheen on top
   and a soft drop, with the two shells (site red / workspace teal) keeping
   their own hover colours underneath. */
.btn {
  background-color: rgba(255, 255, 255, .6);
  border-color: rgba(255, 255, 255, .8);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .72), rgba(255, 255, 255, .14) 52%,
    rgba(255, 255, 255, .42));
  backdrop-filter: blur(14px) saturate(1.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92),
              inset 0 -1px 0 rgba(255, 255, 255, .38),
              0 8px 22px rgba(20, 45, 70, .10);
}
.btn:hover {
  background-color: rgba(255, 255, 255, .78);
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
              inset 0 -1px 0 rgba(255, 255, 255, .45),
              0 12px 28px rgba(20, 45, 70, .15);
}
.btn-ghost { background-color: rgba(255, 255, 255, .28); }
.btn-ghost:hover { background-color: rgba(255, 255, 255, .55); }
/* Filled actions wear the glass OVER their colour: a white sheen on top, a
   frosted edge, and a glow in the shell's own hue. */
.btn-primary, .btn-signal {
  border-color: rgba(255, 255, 255, .58);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .42), rgba(255, 255, 255, .03) 55%,
    rgba(255, 255, 255, .22));
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
}
body.site-shell .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6),
              0 8px 24px rgba(229, 50, 45, .28);
}
body.site-shell .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
              0 12px 30px rgba(229, 50, 45, .36);
}
body:not(.site-shell) .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6),
              0 8px 24px rgba(31, 122, 109, .26);
}
body:not(.site-shell) .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
              0 12px 30px rgba(31, 122, 109, .34);
}
.btn-signal {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6),
              0 8px 24px rgba(229, 50, 45, .28);
}

/* ---------------------------------------------------- account & dashboard
   The signed-in chrome: a header chip (avatar + username → My Account / API /
   Log out) and the dashboard — a profile rail beside the cards for Profile,
   Password and Subscription (client: "lets work on dashboard after login …
   my account will be ghave prorfile avatar with edit option email username,
   password change with current password then add subscriptiom"). The API
   preview page wears the same rail since it lives behind the login now. */

/* --- the header chip --- */
.nav-account { position: relative; }
.nav-account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 5px; border-radius: 999px;
  border: 1px solid transparent; background: none; cursor: pointer;
}
.nav-account-btn:hover { background: #f2f2f2; }
.nav-account-name { font-weight: 600; max-width: 130px; overflow: hidden;
  text-overflow: ellipsis; }
.nav-account-btn::after {
  content: ""; width: 6px; height: 6px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s;
}
.nav-account.open .nav-account-btn::after {
  transform: rotate(-135deg) translate(-1px, 1px);
}
.acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 320;
  min-width: 200px; display: none; flex-direction: column; gap: 2px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 8px;
}
.nav-account.open .acct-menu { display: flex; }
.acct-menu a { display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--ink); font-size: .92rem; font-weight: 500; }
.acct-menu a:hover { background: var(--surface-2); color: var(--brand);
  text-decoration: none; }

/* The language menu (masthead globe) — sejda.com's language set, native
   names. Two columns, scrolls for the 29 entries; RTL names right-align and
   the current language is marked. */
.nav-lang { position: relative; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 320;
  display: none; grid-template-columns: repeat(2, minmax(128px, 1fr)); gap: 2px;
  width: min(368px, 92vw); max-height: min(62vh, 480px); overflow: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 8px;
}
.nav-lang.open .lang-menu { display: grid; }
.lang-item {
  font: inherit; text-align: left; padding: 8px 11px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font-size: .92rem; font-weight: 500;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lang-item:hover { background: var(--surface-2); color: var(--brand); }
.lang-item[dir="rtl"] { text-align: right; }
.lang-item.is-active { color: var(--brand); font-weight: 700;
  background: var(--brand-soft); }

/* --- avatar discs (header chip · rail · profile card) --- */
.acct-avatar { position: relative; display: inline-grid; place-items: center;
  border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--brand-soft); color: var(--brand-navy); font-weight: 700; }
.acct-avatar img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.acct-avatar-sm { width: 26px; height: 26px; font-size: .72rem; }
.acct-avatar-lg { width: 58px; height: 58px; font-size: 1.35rem; }
.acct-avatar-xl { width: 96px; height: 96px; font-size: 2.1rem; }

/* --- the dashboard shell ---
   Standard FULL-WIDTH dashboard (client: "the syandard version of full
   dashboard not like this splited version"): a top bar carries the user
   chip and the tabs (My Account · API · Log out), the content runs full
   width underneath — no side rail. Overrides the .tool-page 860px cap.
   Checkout / auth pages keep the centred narrow column on purpose. */
.account-shell { display: block; }
.account-page.tool-page, .appr-page.tool-page {
  max-width: none; padding-left: 28px; padding-right: 28px; }
.account-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Wide screens: the dashboard cards flow in TWO columns (client: "still had
   space") — Profile | Password, API keys | Credits; Plans spans the full
   row. Scoped to .acct-grid so the API page keeps its stacked column. */
.acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; align-items: start; }
.acct-grid .acct-span { grid-column: 1 / -1; }
.acct-grid .acct-flash { grid-column: 1 / -1; }
.acct-grid .acct-head { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .acct-grid { grid-template-columns: 1fr; }
}
/* The dashboard runs wider than the 1160px site container (main_class =
   dashboard-main) on a soft app-gray canvas — client: "dashbaord its. not
   anything else make it proffesinal". Dashboard pages only. */
body.dashboard-shell { background: #f1f5fa; }
.dashboard-main { max-width: 1600px; margin: 0 auto; }
/* Dashboard chrome (client: "bruh what is this" — mid-scroll the marketing
   header stayed pinned while the dashboard bar scrolled away and the cards
   got cut in half under the wrong bar): on dashboard pages the marketing
   header scrolls away with the page and the ACCOUNT BAR pins to the top
   instead — identity + tabs + log out stay reachable the whole way down. */
body.dashboard-shell .site-header { position: static; }
body.dashboard-shell .account-nav { position: sticky; top: 0; z-index: 60; }
body.dashboard-shell #plans { scroll-margin-top: 92px; }
.acct-head { margin: 0 0 2px; }
.acct-head h1 { margin: 0 0 5px; font-size: 1.55rem;
  color: var(--brand-navy); letter-spacing: -.01em; }
.acct-head p { margin: 0; color: var(--muted); font-size: .92rem; }
.account-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--white); border: 1.5px solid #e5eef7; border-radius: 14px;
  padding: 10px 16px; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.account-nav-id { display: flex; flex-direction: row; align-items: center;
  gap: 10px; text-align: left; padding: 0 16px 0 0; margin: 0; min-width: 0;
  border-right: 1px solid var(--line); }
.account-nav-id .acct-avatar { width: 38px; height: 38px; font-size: .95rem; }
.account-nav-name { color: var(--brand-navy); font-size: .95rem;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.account-nav-mail { display: none; }
.account-nav-links { display: flex; flex-direction: row; align-items: center;
  gap: 4px; flex-wrap: wrap; flex: 1 1 auto; }
.account-nav-links a { padding: 8px 14px; border-radius: 999px; color: var(--ink);
  font-weight: 600; font-size: .9rem; }
.account-nav-links a:hover { background: var(--surface-2); color: var(--brand);
  text-decoration: none; }
.account-nav-links a.is-active { background: var(--brand-soft); color: var(--brand); }
.account-nav-links a.account-nav-out { margin-left: auto; color: var(--muted); }
.account-nav-links a.account-nav-out:hover { color: var(--brand); }

/* --- cards --- */
.acct-card { background: var(--white); border: 1.5px solid #e5eef7;
  border-radius: 18px; padding: 26px 28px;
  box-shadow: 0 2px 3px rgba(12, 77, 143, .05), 0 1px 3px rgba(0, 0, 0, .07); }
.acct-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 4px;
  font-size: 1.18rem; color: var(--brand-navy); }
.acct-card h2 i { font-size: 1.08rem; color: var(--accent-dark); }
.acct-sub { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.acct-profile { display: flex; align-items: center; gap: 18px;
  margin-bottom: 18px; flex-wrap: wrap; }
.acct-photo-actions { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; }
.acct-photo-actions form { margin: 0; }
.acct-upload { position: relative; overflow: hidden; }
.acct-upload input[type=file] { position: absolute; inset: 0; opacity: 0;
  cursor: pointer; }
.acct-hint { flex-basis: 100%; margin: 0; color: var(--muted);
  font-size: .78rem; }
.acct-form { display: grid; gap: 8px; max-width: 460px; }
.acct-form label { font-size: .88rem; font-weight: 600;
  color: var(--brand-navy); margin-top: 6px; }
.acct-form input { border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; font: inherit; width: 100%; background: var(--white);
  color: var(--ink); }
.acct-form input:focus {
  outline: 2px solid color-mix(in srgb, var(--sky-blue) 55%, #fff);
  outline-offset: 1px; border-color: var(--sky-blue); }
.acct-form button { justify-self: start; margin-top: 10px; }

/* Password fields with the eye toggle (JS delegated in app.js) — the auth
   cards and the account dashboard share the same wrapper. */
.pw-field { position: relative; display: block; }
.pw-field > input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; right: 5px; top: 50%;
  transform: translateY(-50%); width: 34px; height: 34px; border: 0;
  border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; }
.pw-eye:hover { background: var(--surface-2); color: var(--ink); }
.pw-eye:focus-visible { outline: 2px solid var(--accent-soft); }

/* API-key application dialog + approval page: success and error states
   (static/js/keyapply.js, templates/apply_approve.html). */
.ka-done { background: #e8f6ee; border: 1px solid #bfe3cd; border-radius: 12px;
  padding: 14px 16px; margin: 8px 0 16px; }
.ka-done > b { display: block; color: #156f3f; margin-bottom: 4px; }
.ka-done span { color: #156f3f; font-size: .88rem; line-height: 1.55; }
.ka-error { margin: 10px 0 0; color: var(--red); font-size: .84rem; }

/* The plan picker inside the apply dialog (client: "add plans here so no
   confusing") — ID-scoped so it outranks the #keyapply-modal label rule. */
#keyapply-modal .ka-plans-title { display: block; margin: 0 0 6px;
  font-size: .9rem; font-weight: 500; }
#keyapply-modal .ka-plans { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 12px; }
#keyapply-modal .ka-plan { display: flex; flex-direction: column; gap: 1px;
  margin: 0; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 9px 10px; cursor: pointer; background: var(--white);
  transition: border-color .15s, box-shadow .15s; }
#keyapply-modal .ka-plan input { position: absolute; opacity: 0;
  pointer-events: none; }
#keyapply-modal .ka-plan b { font-size: .84rem; color: var(--ink); }
#keyapply-modal .ka-plan-price { font-size: .92rem; font-weight: 700;
  color: var(--brand-navy); }
#keyapply-modal .ka-plan-sub { font-size: .68rem; color: var(--muted); }
#keyapply-modal .ka-plan:has(input:checked) { border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 520px) {
  #keyapply-modal .ka-plans { grid-template-columns: 1fr; }
}

/* --------------------- admin: application approved page (full width) -----
   Client: "we need to do this full page[,] lots of space is free" — two
   full-width cards instead of the narrow centred box. */
.appr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; align-items: start; }
.appr-rows { display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 18px; }
.appr-row { display: grid; grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px; font-size: .9rem; color: var(--ink); align-items: baseline; }
.appr-row > b { color: var(--muted); font-weight: 700; font-size: .7rem;
  letter-spacing: .09em; text-transform: uppercase; }
.appr-label { display: block; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 6px; }
.appr-msg { margin: 0; padding: 12px 14px; border-left: 3px solid var(--accent);
  background: var(--surface-2); border-radius: 0 10px 10px 0; color: var(--ink);
  font-size: .9rem; line-height: 1.6; white-space: pre-line; }
.appr-plan { display: flex; gap: 24px; flex-wrap: wrap; margin: 4px 0 14px; }
.appr-plan div b { display: block; font-size: 1.15rem;
  color: var(--brand-navy); line-height: 1.3; }
.appr-plan div span { color: var(--muted); font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; }
.appr-link { display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--white);
  padding: 10px 12px; margin: 0 0 12px; }
.appr-link code { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: .82rem;
  color: var(--brand-navy); }
@media (max-width: 900px) { .appr-grid { grid-template-columns: 1fr; } }

/* --- flash notes + auth errors --- */
.acct-flash { display: flex; flex-direction: column; gap: 8px; }
.acct-flash-msg { margin: 0; padding: 12px 15px; border-radius: 12px;
  font-size: .9rem; }
.acct-flash-msg.is-ok { background: #e8f6ee; border: 1px solid #bfe3cd;
  color: #156f3f; }
.acct-flash-msg.is-error { background: var(--red-bg);
  border: 1px solid var(--red-line); color: var(--red); }
.auth-error { margin: 0 0 14px; padding: 11px 13px; border-radius: 10px;
  background: var(--red-bg); border: 1px solid var(--red-line);
  color: var(--red); font-size: .88rem; }
.auth-form .is-busy { opacity: .7; cursor: progress; }

/* --- subscription plans --- */
.acct-plans { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.acct-plan { display: flex; flex-direction: column; align-items: flex-start;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 20px 20px 18px; }
.acct-plan.is-current {
  border-color: color-mix(in srgb, var(--brand) 30%, #fff);
  background: linear-gradient(180deg, rgba(229, 50, 45, .04), rgba(229, 50, 45, 0)); }
.acct-plan-badge { font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-soft);
  padding: 4px 9px; border-radius: 999px; }
.acct-plan-badge.soon { color: var(--ocean-blue);
  background: color-mix(in srgb, var(--sky-blue) 16%, #fff); }
.acct-plan h3 { margin: 12px 0 0; font-size: 1.25rem; color: var(--brand-navy); }
.acct-plan-price { margin: 2px 0 4px; font-size: 1.5rem; font-weight: 700;
  color: var(--ink); }
.acct-plan-price span { font-size: .82rem; font-weight: 500;
  color: var(--muted); }
/* the yearly-line under the price + the Bill-yearly tick on the buy form
   (client 2026-10-13: "change pricing to monthly and yearly") */
.acct-plan-alt { margin: 0 0 12px; font-size: .78rem; color: var(--muted); }
.acct-bill-year { display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; color: var(--muted); margin: 0 0 10px;
  cursor: pointer; }
.acct-plan .ab-points { grid-template-columns: 1fr; margin: 0 0 16px; }
/* A limit rather than a feature ("No API keys") — muted with a faded mark. */
.acct-plan .ab-points li.is-off { color: var(--muted); }
.acct-plan .ab-points li.is-off::before { opacity: .45; }
/* Plan cards carry the Buy action (a form) — keep it pinned to the bottom. */
.acct-plan .btn { margin-top: auto; }
.acct-plan form { margin: auto 0 0; }
.acct-fine { margin: 14px 0 0; color: var(--muted); font-size: .8rem; }

/* --- narrower screens --- */
@media (max-width: 900px) {
  .account-page.tool-page, .appr-page.tool-page {
    padding-left: 16px; padding-right: 16px; }
  .account-nav { gap: 10px; padding: 10px 12px; }
  .account-nav-id { padding-right: 10px; }
}
@media (max-width: 620px) {
  /* In the mobile drawer the chip is a plain full-width row; its menu sits
     in the flow right below it (nothing to float over on a phone). */
  .nav-account { width: 100%; }
  .nav-account-btn { width: 100%; justify-content: flex-start; }
  .acct-menu { position: static; box-shadow: none; border-radius: 10px;
    margin-top: 4px; width: 100%; }
  .nav-lang { width: 100%; }
  .nav-globe { width: 100%; justify-content: flex-start; }
  .lang-menu { position: static; box-shadow: none; border-radius: 10px;
    margin-top: 4px; width: 100%; }
}

/* ------------------------------------------------ verify page (signup OTP)
   Step two of signup: the 6-digit code from the email. In practice mode
   (no SMTP on the server) the code rides a labelled amber note. */
.auth-card input.auth-code { font-size: 1.45rem; font-weight: 700;
  letter-spacing: .38em; text-align: center; padding-left: 22px; }
.auth-practice { margin: 0 0 16px; padding: 13px 15px; border-radius: 12px;
  background: var(--amber-bg); border: 1px solid var(--amber-line); }
.auth-practice b { display: block; color: var(--amber-ink); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.auth-practice p { margin: 0; color: #6b5a33; font-size: .87rem;
  line-height: 1.55; }
.auth-practice code { background: rgba(255, 255, 255, .78); border-radius: 6px;
  padding: 1px 6px; font-weight: 700; color: var(--amber-ink); }
.auth-resend { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 14px 0 0; font-size: .88rem; color: var(--muted);
  flex-wrap: wrap; }
.auth-resend form { margin: 0; }
.auth-resend a { color: var(--ocean-blue); font-weight: 600; }

/* ------------------------------------------ API keys card (account page) */
.acct-keys { display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px; }
.acct-key { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--surface-2); }
.acct-key-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem; font-weight: 600; color: var(--brand-navy);
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; }
.acct-key-meta { color: var(--muted); font-size: .78rem; flex: 1 1 180px; }
.acct-key-actions { display: flex; align-items: center; gap: 6px;
  margin-left: auto; }
.acct-key-actions form { margin: 0; }
.btn.acct-key-btn { padding: 6px 12px; font-size: .82rem; }
.acct-key-revoke { color: var(--red); }
.acct-keys-empty { margin: 0 0 16px; color: var(--muted); font-size: .88rem;
  background: var(--surface-2); border: 1px dashed var(--line-strong);
  border-radius: 12px; padding: 14px 16px; }
.acct-keys-empty code { background: var(--white); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 6px; font-size: .84rem; }
/* The locked API-keys card for Free-plan accounts — apply for a key and we
   enable the Commercial plan ("free accounts are locked they donta have api
   keys"). */
.acct-locked { display: flex; gap: 14px; align-items: flex-start;
  border: 1px dashed var(--line-strong); border-radius: 12px;
  padding: 18px 20px; background: var(--surface-2); }
.acct-locked-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-dark); font-size: 1.1rem; }
.acct-locked-body { min-width: 0; }
.acct-locked-body b { display: block; margin: 2px 0 4px; }
.acct-locked-body p { margin: 0 0 12px; color: var(--muted); font-size: .88rem;
  line-height: 1.55; }
.acct-keys-foot { display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; }
.acct-keys-foot form { margin: 0; }
.acct-keys-count { color: var(--muted); font-size: .82rem; }
.acct-keys-foot .btn[disabled] { opacity: .55; cursor: not-allowed; }
/* Revoked rows stay in the list as history ("counted as used") — muted, with
   a chip instead of the Reveal/Copy/Revoke buttons. */
.acct-key.is-revoked { background: var(--white); opacity: .82; }
.acct-key.is-revoked .acct-key-code { color: var(--muted);
  background: var(--surface-2); }
.acct-key-state { color: #156f3f; font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; }
.acct-key-chip { flex: 0 0 auto; margin-left: auto; font-size: .68rem;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; }
.acct-keys-note { margin: 10px 0 0; color: var(--muted); font-size: .8rem; }

/* ---------------------------------------- credits & usage (account page) */
.acct-credit-sum { display: flex; align-items: center; gap: 26px;
  flex-wrap: wrap; margin-bottom: 16px; }
.acct-credit-balance { display: flex; align-items: baseline; gap: 8px; }
.acct-credit-balance b { font-size: 2rem; color: var(--brand-navy); }
.acct-credit-balance span { color: var(--muted); font-size: .9rem; }
.acct-credit-facts { display: flex; gap: 18px; color: var(--muted);
  font-size: .86rem; }
.acct-credit-facts b { color: var(--ink); font-size: 1rem; }
.acct-usage { border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; margin-bottom: 16px; }
.acct-usage table { width: 100%; border-collapse: collapse; }
.acct-usage th { text-align: left; font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); background: var(--surface-2);
  padding: 8px 14px; font-weight: 700; }
.acct-usage td { padding: 9px 14px; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--ink); }
.acct-usage td code { background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 5px;
  font-size: .78rem; color: var(--muted); }
.acct-usage .acct-usage-num { text-align: right; white-space: nowrap;
  font-weight: 700; }
.acct-usage .is-plus { color: #156f3f; }
.acct-usage .is-minus { color: var(--red); }

/* ------------------------------- checkout / payment step (/pay/<ref>) ----
   Gateway-ready checkout: order summary + the payment panel ("the gateway
   slot") whose methods come from accounts.payment_methods() and the
   provider name from accounts.payment_provider() — connecting a real
   gateway relabels the panel; the verify flow stays the same. */
.pay-shell { max-width: 560px; margin: 36px auto 64px; padding: 0 18px; }
.pay-card { margin-top: 14px; }
.pay-steps { counter-reset: paystep; display: flex; justify-content: center;
  gap: 20px; list-style: none; margin: 0; padding: 0; }
.pay-steps li { counter-increment: paystep; display: inline-flex;
  align-items: center; gap: 7px; font-size: .8rem; font-weight: 600;
  color: var(--muted); }
.pay-steps li::before { content: counter(paystep); width: 20px; height: 20px;
  border-radius: 50%; display: grid; place-items: center; font-size: .7rem;
  background: var(--surface-2); border: 1.5px solid var(--line);
  color: var(--muted); }
.pay-steps .is-done { color: #156f3f; }
.pay-steps .is-done::before { content: "\2713"; background: #e8f6ee;
  border-color: #bfe3cd; color: #156f3f; }
.pay-steps .is-now { color: var(--accent-dark); }
.pay-steps .is-now::before { background: var(--accent-soft);
  border-color: var(--accent); color: var(--accent-dark); }
.pay-sum { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 16px 18px; background: var(--surface-2); margin-bottom: 16px; }
.pay-sum-pack b { display: block; font-size: 1.1rem; color: var(--brand-navy); }
.pay-sum-pack span { display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pay-sum-total { text-align: right; }
.pay-sum-total span { display: block; color: var(--muted); font-size: .8rem; }
.pay-sum-total b { font-size: 1.5rem; color: var(--ink); }
.pay-gateway { border: 1.5px solid var(--line); border-radius: 14px;
  padding: 16px 18px; background: var(--surface-2); margin-bottom: 16px; }
.pay-gateway-head { display: flex; align-items: center;
  justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pay-gateway-name { font-weight: 700; color: var(--brand-navy);
  font-size: .95rem; }
.pay-gateway-mode { font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--amber-ink);
  background: var(--amber-bg); border: 1px solid var(--amber-line);
  padding: 3px 9px; border-radius: 999px; }
.pay-gateway-mode.is-live { color: #156f3f; background: #e8f6ee;
  border-color: #bfe3cd; }
.pay-gateway-note { margin: 0 0 14px; color: #6b5a33; font-size: .84rem;
  line-height: 1.55; }
/* the gateway being unreachable (Razorpay order creation failed) — the
   panel shows this and only offers Try again / Cancel. */
.pay-gateway-note.is-error { color: #a33b2e; font-weight: 600; }
.pay-label { display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 8px; }
.pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-bottom: 18px; }
.pay-method { position: relative; display: flex; flex-direction: column;
  gap: 2px; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px; cursor: pointer; background: var(--white);
  transition: border-color .15s, box-shadow .15s; }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method i { color: var(--ocean-blue); font-size: 1.15rem; margin-bottom: 4px; }
.pay-method b { font-size: .9rem; color: var(--ink); }
.pay-method span { font-size: .76rem; color: var(--muted); }
.pay-method:has(input:checked) { border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.pay-method:has(input:checked) i { color: var(--accent-dark); }
.pay-trx { width: 100%; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: .95rem; margin-bottom: 18px; }
.pay-trx:focus { outline: 2px solid var(--accent-soft);
  border-color: var(--accent); }
.pay-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-actions form { margin: 0; }
.pay-back { display: inline-block; margin-top: 14px; color: var(--ocean-blue);
  font-size: .84rem; font-weight: 600; }
@media (max-width: 560px) { .pay-methods { grid-template-columns: 1fr; } }

/* ------------------------------------- API page: how token auth works ---- */
.api-token { display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px;
  align-items: start; }
.api-token-steps { list-style: none; margin: 0; padding: 0;
  counter-reset: tok; display: flex; flex-direction: column; gap: 12px; }
.api-token-steps li { position: relative; padding-left: 40px; color: #33475c;
  font-size: .92rem; line-height: 1.55; }
.api-token-steps li::before { counter-increment: tok; content: counter(tok);
  position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-weight: 700;
  font-size: .82rem; }
.api-token-steps code,
.api-token .ab-body code { background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px;
  font-size: .84rem; }
.api-try-row { display: flex; gap: 8px; padding: 12px 14px; }
.api-try-row input { flex: 1 1 auto; min-width: 0;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 9px;
  padding: 9px 12px; color: #eaf4fc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; }
.api-try-row input::placeholder { color: #7fa6c8; }
.api-try-row input:focus { outline: 2px solid rgba(127, 180, 226, .55);
  outline-offset: 0; border-color: #7fb4e2; }
@media (max-width: 900px) { .api-token { grid-template-columns: 1fr; } }

/* ---------------------------------- API page: endpoint directory ---------
   The full list of tool endpoints (client: "ADD all tools api as list"):
   one row per endpoint — method chip, path, name, description — grouped by
   the same categories as the tools. */
.api-eplist { border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; margin: 0 0 20px; background: var(--white); }
.api-ep { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 4px 14px; align-items: start; padding: 11px 16px;
  border-top: 1px solid var(--line); }
.api-ep:first-child { border-top: 0; }
.api-ep:hover { background: var(--surface-2); }
.api-ep-method { justify-self: start; margin-top: 2px; font-size: .62rem;
  font-weight: 700; letter-spacing: .09em; color: #1d6fb8;
  background: color-mix(in srgb, var(--sky-blue) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--sky-blue) 30%, #fff);
  padding: 3px 8px; border-radius: 999px; }
.api-ep-method.api-get { color: #156f3f; background: #e8f6ee;
  border-color: #bfe3cd; }
.api-ep-body { min-width: 0; display: flex; flex-direction: column;
  gap: 2px; }
.api-ep-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; color: var(--brand-navy); }
.api-ep-line { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.api-ep-line b { color: var(--ink); font-weight: 600; }
.api-ep-tag { justify-self: end; margin-top: 2px; font-size: .62rem;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #156f3f; background: #e8f6ee; border: 1px solid #bfe3cd;
  padding: 3px 9px; border-radius: 999px; }
.api-ep-tag.soon { color: var(--amber-ink); background: var(--amber-bg);
  border-color: var(--amber-line); }
.api-ep-cat { margin: 24px 0 10px; display: flex; align-items: baseline;
  gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ocean-blue); }
.api-ep-cat span { font-size: .72rem; font-weight: 600; color: var(--muted);
  letter-spacing: .03em; text-transform: none; }

/* ------------------------------------------------ admin dashboard -------- */
/* The /admin screens (templates/admin.html, admin_user.html): stat cards,
   filter pills, dense tables with chips, and the action rows. Same visual
   language as the account dashboard. */
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.adm-stat { background: var(--white); border: 1.5px solid #e5eef7; border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow-sm); }
.adm-stat b { display: block; font-size: 1.3rem; color: var(--brand-navy); line-height: 1.2; }
.adm-stat span { font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
/* Database tables as FINISHED tiles (client: "make it more polish its
   sekaleton right noe"): no pale pills or opacity dimming — tinted icon
   tiles, real numbers, hover lift. */
.adm-db-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-db-meta { display: flex; align-items: center; gap: 10px; }
.adm-db-open { font-size: .82rem; font-weight: 700; color: var(--accent-dark);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.adm-db-open:hover { color: var(--accent); }
.adm-db-grid { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.adm-db-tile { display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1.5px solid #e5eef7; border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
  text-decoration: none; min-width: 0;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.adm-db-tile:hover { border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(20, 60, 110, .10); }
.adm-db-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-dark); font-size: 1rem; }
.adm-db-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-db-count { margin-left: auto; font-size: .92rem; font-weight: 800;
  color: var(--accent-dark); }
.adm-db-tile.is-zero .adm-db-ic { background: var(--surface-2); color: var(--muted); }
.adm-db-tile.is-zero .adm-db-count { color: var(--muted); font-weight: 700; }

.adm-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-filter { padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: .82rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.adm-filter:hover { border-color: var(--accent); }
.adm-filter.is-active { border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); }
.adm-search { margin-left: auto; display: flex; gap: 6px; }
.adm-search input { border: 1.5px solid var(--line); border-radius: 9px; padding: 7px 11px;
  font: inherit; font-size: .85rem; min-width: 200px; }

.adm-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th { text-align: left; font-size: .64rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); background: var(--surface-2);
  padding: 8px 12px; white-space: nowrap; }
.adm-table td { padding: 9px 12px; border-top: 1px solid var(--line);
  font-size: .85rem; vertical-align: top; }
.adm-table tr:hover td { background: var(--surface-2); }
.adm-nowrap { white-space: nowrap; }
.adm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.adm-msg-cell { max-width: 320px; white-space: pre-line; }
.adm-plus { color: #156f3f; font-weight: 700; }
.adm-minus { color: var(--red); font-weight: 700; }

.adm-chip { display: inline-block; font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); vertical-align: middle; }
.adm-chip.is-commercial { color: #1d6fb8; background: color-mix(in srgb, var(--sky-blue) 14%, #fff);
  border-color: color-mix(in srgb, var(--sky-blue) 30%, #fff); }
.adm-chip.is-free { color: var(--muted); }
.adm-chip.is-banned { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.adm-chip.is-admin { color: var(--accent-dark); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, #fff); }
.adm-chip.is-blocked { color: var(--amber-ink); background: var(--amber-bg);
  border-color: var(--amber-line); }
.adm-chip.is-paid, .adm-chip.is-live { color: #156f3f; background: #e8f6ee;
  border-color: #bfe3cd; }
.adm-chip.is-declined { color: var(--muted); }
.adm-table .btn, td .btn { padding: 6px 12px; font-size: .8rem; }
.adm-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-actions .btn { padding: 6px 11px; font-size: .8rem; white-space: nowrap; }
.adm-actions .btn ~ .btn { margin-left: 0; }
.adm-actions form { margin: 0; }

.adm-sub { margin: 18px 0 8px; font-size: .95rem; color: var(--brand-navy); }
.adm-email-reset { margin-top: 10px; }

/* ---------------------------------------------- admin console, round 2 -- */
/* Clickable stat cards + table chips ("make this clickable"). */
a.adm-stat { display: block; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
a.adm-stat:hover { border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(20, 60, 110, .10); }
a.adm-stat:hover b { color: var(--accent-dark); }

/* State line + danger button (separate ban vs API controls). */
.adm-state-line { display: flex; align-items: center; gap: 10px;
  margin: 2px 0 12px; flex-wrap: wrap; }
.adm-danger { color: var(--red); border-color: var(--red-line); }
.adm-danger:hover { background: var(--red-bg); color: var(--red); }

/* Audit feed (dashboard + user detail). */
.adm-feed { display: flex; flex-direction: column; }
.adm-feed-row { display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px; border-top: 1px solid var(--line); font-size: .86rem; }
.adm-feed-row:first-child { border-top: 0; }
.adm-feed-row i { font-size: .45rem; color: var(--accent); }
.adm-feed-row p { flex: 1; margin: 0; color: var(--ink); min-width: 0; }
.adm-feed-row time { color: var(--muted); font-size: .74rem; white-space: nowrap; }

/* Database browser. */
.db-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.db-tab { padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: .8rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.db-tab b { color: var(--muted); font-weight: 600; font-size: .72rem; }
.db-tab:hover { border-color: var(--accent); }
.db-tab.is-active { border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-dark); }
.db-tab.is-active b { color: var(--accent-dark); }
.db-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px; }
.db-search select, .db-search input { border: 1.5px solid var(--line);
  border-radius: 9px; padding: 7px 10px; font: inherit; font-size: .85rem; }
.db-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .8rem; }
.db-pager { display: flex; gap: 10px; align-items: center; margin-top: 12px;
  flex-wrap: wrap; }

/* The staff console door — dark, deliberately unlike the user login. */
body.admin-login-shell { background: radial-gradient(1100px 520px at 20% -10%,
  #14304f 0%, #0b1c33 55%, #081324 100%); min-height: 100vh; }
body.admin-login-shell .site-header { display: none; }
body.admin-login-shell main { min-height: 100vh; display: flex;
  align-items: center; justify-content: center; padding: 40px 16px; }
.adm-login { width: min(440px, 100%); }
.adm-login-card { background: var(--white); border-radius: 18px;
  padding: 26px 26px 22px; box-shadow: 0 30px 80px rgba(3, 12, 26, .5); }
.adm-login-head { text-align: center; margin-bottom: 16px; }
.adm-login-badge { display: inline-flex; width: 54px; height: 54px;
  align-items: center; justify-content: center; border-radius: 15px;
  background: #0b1c33; color: #fff; font-size: 1.55rem; margin-bottom: 12px; }
.adm-login-head h1 { margin: 0 0 6px; font-size: 1.35rem; color: var(--brand-navy, var(--accent-dark)); }
.adm-login-head p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.adm-login-error { background: var(--red-bg); border: 1px solid var(--red-line);
  color: var(--red); border-radius: 10px; padding: 9px 12px; font-size: .85rem;
  margin: 0 0 12px; }
.adm-login-note { background: var(--amber-bg); border: 1px solid var(--amber-line);
  color: var(--amber-ink); border-radius: 10px; padding: 9px 12px;
  font-size: .84rem; margin: 0 0 12px; }
.adm-login-note a { color: inherit; }
.adm-login-foot { text-align: center; color: var(--muted); font-size: .82rem;
  margin: 14px 0 0; }
.adm-login .auth-form label { color: var(--ink); }
.auth-staff { margin-top: 6px; font-size: .78rem; opacity: .75; }

/* The staff card borrows .auth-card's form layout but keeps its own size. */
.adm-login-card { max-width: none; }

/* The sign-in code step: big centered digits + the attempts note. */
.otp-note { color: var(--muted); font-size: .8rem; margin: -6px 0 12px; }

/* The neutral "reset link on its way" note on the forgot-password page. */
.auth-note { background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-dark); border-radius: 10px; padding: 10px 13px;
  font-size: .88rem; line-height: 1.5; margin: 0 0 14px; }

/* ------------------------------------------------------------ plans page
   Plans & pricing, rebuilt 2026-10-13 (client: "we should [price] more or
   less than iLovePDF … reconstruct and redesign the whole page"): one-time
   credit packs priced under the big APIs. A wider shell than .tool-page's
   860px so the four cards and the comparison table breathe; every number
   comes from COMMERCIAL_PLANS in the template — the page cannot drift from
   what is sold. */
.plans-page.tool-page { max-width: 1120px; }
.plans-hero { text-align: center; max-width: 760px; margin: 10px auto 40px; }
.plans-eyebrow { display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ocean-blue);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
.plans-hero h1 { margin: 0 0 12px; font-size: 2.35rem; }
.plans-hero .lead { margin: 0 auto 18px; }
.plans-note-inline { color: var(--muted); font-size: .84rem; margin: 12px 0 0;
  text-align: center; }

/* the billing switch (client 2026-10-13: "change pricing to monthly and
   yearly … from monthly to yearly"): a segmented pill above the cards; each
   card carries BOTH price sets and the grid's is-yearly class picks one. */
.plans-billing { display: flex; justify-content: center; margin: 0 0 30px; }
.plans-billing-inner { display: inline-flex; gap: 4px; background: #edf3f9;
  border: 1.5px solid #d9e7f2; border-radius: 999px; padding: 4px; }
.plans-billing button { display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; color: var(--muted); font: inherit;
  font-size: .86rem; font-weight: 700; border-radius: 999px;
  padding: 8px 18px; cursor: pointer; }
.plans-billing button.is-on { background: var(--brand); color: #fff;
  box-shadow: 0 2px 9px rgba(23, 89, 156, .28); }
.plans-billing-save { font-size: .66rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; border-radius: 999px;
  padding: 2px 8px; background: var(--brand-soft); color: var(--ocean-blue);
  border: 1px solid var(--brand-line); }
.plans-billing button.is-on .plans-billing-save {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .4); color: #fff; }
/* the two price sets per card; the grid class set by the toggle picks */
.plans-grid .b-yearly { display: none; }
.plans-grid.is-yearly .b-monthly { display: none; }
.plans-grid.is-yearly .b-yearly { display: block; }

/* the four cards */
.plans-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin: 6px 0 10px; align-items: stretch; }
.plans-card { position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1.5px solid #e5eef7; border-radius: 18px;
  padding: 26px 20px 22px; }
.plans-card.is-best { border-color: var(--brand); box-shadow: var(--shadow-md); }
.plans-card.is-current { border-color: var(--brand-line); background: #fbfdff; }
.plans-badge { position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%); white-space: nowrap; font-size: .64rem;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 11px; background: #eef6fd;
  border: 1px solid #cfe3f5; color: var(--ocean-blue); }
.plans-badge.is-hot { background: var(--brand); border-color: var(--brand);
  color: #fff; }
.plans-badge.is-quiet { background: #f2f5f7; border-color: var(--line);
  color: var(--muted); }
.plans-card h3 { margin: 12px 0 0; color: var(--brand-navy); font-size: 1.15rem; }
.plans-price { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 2px; }
.plans-price b { font-size: 2.05rem; color: var(--brand-navy);
  letter-spacing: -.02em; }
.plans-price span { color: var(--muted); font-size: .8rem; font-weight: 600; }
.plans-per { margin: 0 0 12px; color: var(--ocean-blue); font-size: .8rem;
  font-weight: 600; }
.plans-credits { margin: 0 0 12px; color: var(--ink-2); font-size: .86rem; }
.plans-credits b { color: var(--brand-navy); font-size: 1.02rem; }
.plans-card .ab-points { grid-template-columns: 1fr; margin: 0 0 18px; }
.plans-card .ab-points li { font-size: .84rem; }
.plans-card .ab-points li.is-off { color: var(--muted); }
.plans-card .ab-points li.is-off::before { opacity: .45; }
.plans-cta { margin-top: auto; }
.plans-cta .btn, a.plans-cta { width: 100%; justify-content: center; }

/* what a credit buys */
.plans-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 4px 0 14px; }
.plans-fact { background: var(--white); border: 1.5px solid #e5eef7;
  border-radius: 14px; padding: 15px 17px; }
.plans-fact b { display: block; color: var(--brand-navy); font-size: 1.02rem;
  margin-bottom: 5px; }
.plans-fact span { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.plans-fact code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
  monospace; font-size: .78rem; color: var(--ocean-blue); background: #eef6fd;
  border: 1px solid #cfe3f5; border-radius: 5px; padding: 1px 5px; }

/* the full API price list (accounts.API_COSTS, grouped like the tools) */
.plans-costs { margin-top: 16px; }
.plans-costs table { width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--white); border: 1.5px solid #e5eef7; border-radius: 14px;
  overflow: hidden; }
.plans-costs th, .plans-costs td { text-align: left; padding: 9px 18px;
  font-size: .86rem; border-top: 1px solid #f0f4f8; }
.plans-costs thead th { border-top: 0; background: #f6fafd;
  color: var(--brand-navy); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; }
.plans-costs-cat td { background: #fbfdff; color: var(--ocean-blue);
  font-weight: 800; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; padding: 7px 18px; }
.plans-costs td:nth-child(1) { color: var(--ink); }
.plans-costs td:nth-child(2) { color: var(--brand-navy); font-weight: 700;
  white-space: nowrap; width: 110px; }
.plans-costs td:nth-child(3) { color: var(--muted); white-space: nowrap;
  width: 150px; }

/* comparison table (borrows the .api-limits table dress) */
.plans-compare { margin-top: 16px; }
.plans-compare table { width: 100%; border-collapse: separate;
  border-spacing: 0; background: var(--white); border: 1.5px solid #e5eef7;
  border-radius: 14px; overflow: hidden; }
.plans-compare th, .plans-compare td { text-align: left; padding: 13px 18px;
  font-size: .88rem; border-top: 1px solid #e5eef7; }
.plans-compare thead th { border-top: 0; background: #f6fafd;
  color: var(--brand-navy); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; }
.plans-compare tbody td { color: var(--muted); }
.plans-compare tbody td:first-child { color: var(--ink); font-weight: 600; }
.plans-compare .is-ours { background: #f2f9ff; color: var(--ink-2); }
.plans-compare thead th.is-ours { background: #e8f3fb; }
.plans-dim { opacity: .8; font-size: .8rem; }
.plans-footnote { color: var(--muted); font-size: .8rem; margin: 12px 0 0;
  line-height: 1.55; }

/* faq */
.plans-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  margin-top: 4px; }
.plans-faq details { background: var(--white); border: 1.5px solid #e5eef7;
  border-radius: 12px; padding: 0 16px; }
.plans-faq summary { cursor: pointer; padding: 13px 26px 13px 0;
  font-weight: 600; color: var(--brand-navy); font-size: .92rem;
  list-style: none; position: relative; }
.plans-faq summary::-webkit-details-marker { display: none; }
.plans-faq summary::after { content: "+"; position: absolute; right: 2px;
  top: 50%; transform: translateY(-50%); color: var(--ocean-blue);
  font-weight: 700; font-size: 1.05rem; transition: transform .18s ease; }
.plans-faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg); }
.plans-faq details p { margin: 0 0 14px; color: var(--muted); font-size: .88rem;
  line-height: 1.6; }
.plans-faq a { color: var(--ocean-blue); }
.plans-faq code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
  monospace; font-size: .8rem; color: var(--ocean-blue); background: #eef6fd;
  border: 1px solid #cfe3f5; border-radius: 5px; padding: 1px 5px; }

/* closing band */
.plans-close { margin: 34px 0 10px; text-align: center; background: var(--white);
  border: 1.5px solid #e5eef7; border-radius: 18px; padding: 28px 22px; }
.plans-close h2 { margin: 0 0 8px; color: var(--brand-navy); font-size: 1.35rem; }

@media (max-width: 980px) {
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-hero h1 { font-size: 2rem; }
}
@media (max-width: 640px) {
  .plans-grid { grid-template-columns: minmax(0, 1fr); }
  .plans-facts { grid-template-columns: minmax(0, 1fr); }
  .plans-compare th, .plans-compare td { padding: 10px 12px; font-size: .82rem; }
}

/* ------------------------------------------------------------- faq hub ----
   /faq — every answer in one crawlable place (client 2026-10-13: "faq btter
   for all of our tools and regulations" + "add in footer also"). Reuses
   .howto-faq / .faq-item from app.css; adds the category head, the per-tool
   API cost chip and the stacked answers inside a tool row. */
.faq-cat { margin: 22px 0 10px; color: var(--brand-navy); font-size: 1.02rem; }
.faq-cat:first-of-type { margin-top: 12px; }
.faq-cost { display: inline-block; margin-left: 8px; color: var(--ocean-blue);
  background: #eef6fd; border: 1px solid #cfe3f5; border-radius: 999px;
  font-size: .7rem; font-weight: 700; padding: 2px 8px; white-space: nowrap; }
.faq-tool-body { padding: 2px 0 10px; }
.faq-tool-body p { margin: 0 0 10px; color: var(--muted); font-size: .9rem;
  line-height: 1.6; max-width: 72ch; }
.faq-tool-body p b { color: var(--ink); }
.faq-tool-body p:last-child { margin-bottom: 0; }

/* -------------------------------------------- admin console, sleek pass --
   The console rebuilt for a professional, hand-made feel (client: "desgin
   dashboard more proffesnoal not vibe coding"): restrained surfaces, tight
   grids, hairline dividers, tables over tiles, colour only where it means
   something. Scoped to .admin-page so My Account keeps its own look; the
   shared .adm-* primitives are restyled here, so admin_user / admin_orders
   / admin_db stay in step. */
.admin-page { --adm-line: #e3e8ee; --adm-line-soft: #eef1f4; }

/* page head + meta */
.admin-page .acct-head h1 { color: var(--ink); font-size: 1.45rem;
  letter-spacing: -.01em; }
.admin-page .acct-head p { font-size: .88rem; }
.adm-head-meta { margin: 6px 0 0; color: var(--muted); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* cards: hairline surfaces, no float */
.admin-page .acct-card { border: 1px solid var(--adm-line); border-radius: 10px;
  padding: 18px 20px; box-shadow: none; }
.admin-page .acct-card h2 { margin: 0 0 2px; font-size: .98rem;
  color: var(--ink); }
.admin-page .acct-card h2 i { display: none; }
.admin-page .acct-sub { margin: 0 0 14px; font-size: .82rem; }

/* buttons: compact, square-ish */
.admin-page .btn { border-radius: 8px; font-size: .82rem; padding: 7px 13px;
  box-shadow: none; }

/* the overview strip */
.adm-statbar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--white); border: 1px solid var(--adm-line);
  border-radius: 10px; overflow: hidden; }
.adm-stat { display: block; padding: 13px 16px; text-decoration: none;
  color: inherit; border-left: 1px solid var(--adm-line-soft);
  transition: background-color .12s ease; }
.adm-stat:first-child { border-left: 0; }
.adm-stat:hover { background: #f7fafc; }
.adm-stat b { display: block; font-size: 1.32rem; font-weight: 700;
  color: var(--ink); line-height: 1.15; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.adm-stat span { display: block; margin-top: 3px; font-size: .64rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
@media (max-width: 1180px) {
  .adm-statbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-stat:nth-child(4n + 1) { border-left: 0; }
  .adm-stat:nth-child(n + 5) { border-top: 1px solid var(--adm-line-soft); }
}
@media (max-width: 640px) {
  .adm-statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-stat { border-left: 1px solid var(--adm-line-soft) !important; }
  .adm-stat:nth-child(odd) { border-left: 0 !important; }
  .adm-stat:nth-child(n + 3) { border-top: 1px solid var(--adm-line-soft); }
}

/* two-column working area: content left, system rail right */
.adm-grid { display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(300px, 1fr); gap: 18px;
  align-items: start; }
.adm-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 1150px) { .adm-grid { grid-template-columns: minmax(0, 1fr); } }

/* filters as underline tabs + a quiet search */
.admin-page .adm-filters { gap: 16px; flex-wrap: wrap; margin: 4px 0 0;
  border-bottom: 1px solid var(--adm-line); align-items: center; }
.admin-page .adm-filter { border: 0; border-radius: 0; padding: 9px 2px 10px;
  font-size: .84rem; font-weight: 600; color: var(--muted); position: relative; }
.admin-page .adm-filter:hover { color: var(--ink); border-color: transparent; }
.admin-page .adm-filter.is-active { color: var(--ink); background: none;
  border-color: transparent; }
.admin-page .adm-filter.is-active::after { content: ""; position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand);
  border-radius: 2px; }
.admin-page .adm-search { margin-left: auto; gap: 8px; padding-bottom: 6px; }
.admin-page .adm-search input { border: 1px solid #d9e0e8; border-radius: 8px;
  padding: 7px 12px; font-size: .84rem; background: var(--white); }
.admin-page .adm-search input:focus {
  outline: 2px solid rgba(32, 121, 200, .18); outline-offset: 1px;
  border-color: var(--brand); }

/* tables: crisp, tabular, quiet hover */
.admin-page .adm-table-wrap { border: 1px solid var(--adm-line);
  border-radius: 10px; margin-top: 14px; }
.admin-page .adm-table th { background: transparent;
  border-bottom: 1px solid var(--adm-line); padding: 9px 14px;
  font-size: .66rem; letter-spacing: .07em; color: #7a8699; }
.admin-page .adm-table td { padding: 10px 14px;
  border-top: 1px solid var(--adm-line-soft); font-size: .84rem;
  font-variant-numeric: tabular-nums; }
.admin-page .adm-table tbody tr:first-child td { border-top: 0; }
.admin-page .adm-table tr:hover td { background: #f8fafc; }
.admin-page .adm-num { color: var(--ink); font-weight: 600; }
.admin-page .adm-right { text-align: right; }

/* chips: subtle tags, not candy */
.admin-page .adm-chip { border-radius: 4px; padding: 2px 7px; font-size: .6rem;
  letter-spacing: .05em; background: #f4f6f8; border: 1px solid var(--adm-line);
  color: #66707f; }
.admin-page .adm-chip.is-commercial { color: #1d6fb8; background: #f0f7fd;
  border-color: #d3e6f7; }
.admin-page .adm-chip.is-banned { color: #c0392b; background: #fdf3f3;
  border-color: #f2d7d4; }
.admin-page .adm-chip.is-admin { color: var(--brand-navy); background: #f2f6fb;
  border-color: #dbe6f3; }
.admin-page .adm-chip.is-blocked { color: #9a6b00; background: #fdf8ec;
  border-color: #f0e2c4; }
.admin-page .adm-chip.is-paid, .admin-page .adm-chip.is-live { color: #1e7d4f;
  background: #f1faf5; border-color: #cfe9db; }

/* maintenance: status dot + action on one line */
.adm-sys-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0; }
.adm-status { display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--muted); font-weight: 600; }
.adm-status i { width: 7px; height: 7px; border-radius: 50%;
  background: #2f9e63; }
.adm-status.is-off i { background: #d6a72d; }

/* database: a quiet list, not tiles */
.adm-db-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; }
.admin-page .adm-db-open { font-size: .8rem; font-weight: 600;
  color: var(--ocean-blue); text-decoration: none; }
.admin-page .adm-db-open:hover { text-decoration: underline; }
.adm-db-list { display: flex; flex-direction: column; margin-top: 2px; }
.adm-db-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  border-top: 1px solid var(--adm-line-soft); text-decoration: none; }
.adm-db-row:first-child { border-top: 0; }
.adm-db-row:hover { background: #f8fafc; }
.adm-db-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.adm-db-count { margin-left: auto; font-size: .82rem; font-weight: 700;
  color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.adm-db-row.is-zero .adm-db-name { color: var(--muted); }
.adm-db-row.is-zero .adm-db-count { color: #a6b0bd; font-weight: 600; }

/* activity feed: quiet list with a neutral dot */
.admin-page .adm-feed-row { padding: 8px 0;
  border-top: 1px solid var(--adm-line-soft); }
.admin-page .adm-feed-row i { width: 5px; height: 5px; border-radius: 50%;
  background: #c4cdd8; font-size: 0; flex: 0 0 5px; position: relative;
  top: -1px; }
.admin-page .adm-feed-row p { font-size: .83rem; }
.admin-page .adm-feed-row time { font-size: .72rem; }

/* empty states: plain muted lines */
.admin-page .acct-keys-empty { border: 0; background: transparent;
  padding: 2px 0; color: var(--muted); }

/* ------------------------------------------- admin console, glass pass --
   The client, right after the sleek rebuild: "twerk the color and glossy
   and glassic" — then the member dashboard inherited the same language
   when it got its full redesign. A soft fixed blue haze sits behind
   every dashboard page, and the panes (nav bar, cards, overview strip,
   tables) become frosted glass: white hairline edges, inner top
   highlights, diagonal sheens, blur(16-20px) saturate. The admin
   console and the member dashboard share it; the API preview keeps its
   own look. Light-mode glassmorphism — translucency, blur and light,
   never candy. */
body.dashboard-shell {
  background:
    radial-gradient(920px 540px at 8% -10%, rgba(91, 182, 239, .4), transparent 62%),
    radial-gradient(860px 560px at 94% -8%, rgba(32, 121, 200, .32), transparent 60%),
    radial-gradient(760px 520px at 30% 40%, rgba(123, 156, 255, .2), transparent 62%),
    radial-gradient(720px 520px at 90% 58%, rgba(91, 182, 239, .18), transparent 62%),
    radial-gradient(820px 660px at 76% 108%, rgba(26, 114, 194, .24), transparent 64%),
    linear-gradient(180deg, #e7effb, #dfe8f5);
  background-attachment: fixed;
}

/* the sticky dashboard bar: frosted glass */
.account-page:not(.api-page) .account-nav {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
              0 12px 32px -20px rgba(21,57,99,.4);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.account-page:not(.api-page) .account-nav-links a.is-active {
  background: linear-gradient(180deg, rgba(32,121,200,.16), rgba(32,121,200,.10));
  box-shadow: inset 0 0 0 1px rgba(32,121,200,.22);
}

/* cards: frosted panes with a diagonal gloss sheen */
.account-page:not(.api-page) .acct-card {
  background: linear-gradient(120deg, rgba(255,255,255,.8),
              rgba(255,255,255,.48) 52%, rgba(255,255,255,.68));
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1),
              0 20px 44px -26px rgba(21,57,99,.5),
              0 2px 12px -6px rgba(21,57,99,.16);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

/* overview strip: same glass, gradient numbers */
.adm-statbar {
  background: linear-gradient(115deg, rgba(255,255,255,.84),
              rgba(255,255,255,.5) 50%, rgba(255,255,255,.7));
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1),
              0 20px 44px -28px rgba(21,57,99,.55);
  backdrop-filter: blur(20px) saturate(1.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.55);
}
.adm-stat { border-left-color: rgba(23,57,99,.09); }
.adm-stat:hover { background: rgba(255,255,255,.62); }
.adm-stat b {
  color: #1d6fb8;
  background: linear-gradient(180deg, #17365a 6%, #1d6fb8 94%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.adm-stat span { color: #6d7b8d; }

/* buttons: glossy but restrained */
.account-page:not(.api-page) .btn.btn-primary {
  background: linear-gradient(180deg, #3390da, #1d6fb8);
  border: 1px solid #1a639f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4),
              0 8px 18px -10px rgba(26,99,159,.65);
}
.account-page:not(.api-page) .btn.btn-primary:hover {
  background: linear-gradient(180deg, #3c9ae4, #2079c8); }
.account-page:not(.api-page) .btn.btn-ghost {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(23,57,99,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* search field: inset glass */
.account-page:not(.api-page) .adm-search input {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(23,57,99,.15);
  box-shadow: inset 0 1px 2px rgba(21,57,99,.07);
}

/* the working tables: a pane with a tinted header */
.account-page:not(.api-page) .adm-table-wrap {
  background: linear-gradient(120deg, rgba(255,255,255,.62),
              rgba(255,255,255,.42) 55%, rgba(255,255,255,.55));
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
}
.account-page:not(.api-page) .adm-table th { background: rgba(238,244,252,.6);
  border-bottom-color: rgba(23,57,99,.1); color: #64748b; }
.account-page:not(.api-page) .adm-table td { border-top-color: rgba(23,57,99,.07); }
.account-page:not(.api-page) .adm-table tr:hover td { background: rgba(255,255,255,.66); }

/* chips: translucent tints instead of flat fills */
.account-page:not(.api-page) .adm-chip { background: rgba(242,245,248,.85);
  border-color: rgba(23,57,99,.12); }
.account-page:not(.api-page) .adm-chip.is-commercial { color: #175b9c;
  background: rgba(103,175,231,.16); border-color: rgba(103,175,231,.45); }
.account-page:not(.api-page) .adm-chip.is-banned { color: #b3382c;
  background: rgba(224,90,74,.12); border-color: rgba(224,90,74,.35); }
.account-page:not(.api-page) .adm-chip.is-paid, .account-page:not(.api-page) .adm-chip.is-live { color: #1e7d4f;
  background: rgba(47,158,99,.13); border-color: rgba(47,158,99,.35); }
.account-page:not(.api-page) .adm-chip.is-admin { color: var(--brand-navy);
  background: rgba(27,57,91,.07); border-color: rgba(27,57,91,.18); }
.account-page:not(.api-page) .adm-chip.is-blocked { color: #92660a;
  background: rgba(214,167,45,.14); border-color: rgba(214,167,45,.4); }

/* hovers pick up the light */
.adm-db-row:hover { background: rgba(255,255,255,.6); }
.account-page:not(.api-page) .adm-feed-row:hover { background: rgba(255,255,255,.55); }

/* status dot with a soft halo */
.adm-status i { box-shadow: 0 0 0 3px rgba(47,158,99,.16); }
.adm-status.is-off i { box-shadow: 0 0 0 3px rgba(214,167,45,.2); }

/* filter underline gets a gradient */
.account-page:not(.api-page) .adm-filter.is-active::after {
  background: linear-gradient(90deg, #5bb6ef, #1d6fb8); }


/* ------------------------------------ user dashboard, full redesign pass --
   The member-facing dashboard rebuilt (client: "useer dashbard need full
   new desgin") on the same glass language as the console: a hero identity
   band, an overview strip of four doors, and cards whose heading icons sit
   in tinted glass chips. Account page only — the admin console and the API
   preview keep their own passes. */

/* the overview strip: four doors instead of the admin's seven */
.acct-statbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-stat-frac { font-style: normal; -webkit-text-fill-color: #7d8ea1;
  color: #7d8ea1; font-size: .86rem; }

/* the hero identity band */
.acct-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(115deg, rgba(255,255,255,.85),
              rgba(255,255,255,.5) 50%, rgba(255,255,255,.72));
  border: 1px solid rgba(255,255,255,.95); border-radius: 18px;
  padding: 20px 24px;
  box-shadow: inset 0 1px 0 #fff, 0 20px 44px -28px rgba(21,57,99,.55);
  backdrop-filter: blur(20px) saturate(1.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.55); }
.acct-hero-id { display: flex; align-items: center; gap: 15px; min-width: 0; }
.acct-hero .acct-avatar {
  width: 64px; height: 64px; font-size: 1.5rem;
  box-shadow: 0 0 0 4px rgba(255,255,255,.75),
              0 12px 26px -14px rgba(21,57,99,.55); }
.acct-hero-kicker { margin: 0 0 3px; font-size: .66rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ocean-blue); }
.acct-hero h1 { margin: 0; font-size: 1.5rem; color: var(--brand-navy);
  letter-spacing: -.01em; }
.acct-hero-sub { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.acct-hero-side { margin-left: auto; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; }
.acct-hero-chip { font-size: .66rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; border-radius: 999px; padding: 5px 12px;
  color: var(--ocean-blue); background: rgba(103,175,231,.16);
  border: 1px solid rgba(103,175,231,.4); }
.acct-hero-chip.is-com { color: #1e7d4f; background: rgba(47,158,99,.13);
  border-color: rgba(47,158,99,.35); }
.acct-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .acct-hero-side { margin-left: 0; } }

/* card headings: the icon gets a tinted glass chip */
.acct-grid-user .acct-card h2 i { display: inline-flex; width: 30px;
  height: 30px; align-items: center; justify-content: center;
  border-radius: 9px; font-size: .95rem; color: var(--ocean-blue);
  background: linear-gradient(180deg, rgba(255,255,255,.95),
              rgba(224,238,250,.9));
  border: 1px solid rgba(103,175,231,.35);
  box-shadow: inset 0 1px 0 #fff; }

/* the cards breathe a little more on the member dashboard */
.acct-grid-user .acct-card { padding: 22px 24px; }

/* the member dashboard's two columns stack independently — cards of
   different heights sit flush, with no ragged gaps between them (the admin
   grid's pattern; client: "u see dasktop had gaps"). Left: profile +
   password. Right: API keys + credits. The columns also end flush: the
   shorter column's last card absorbs the difference, so no void is left
   above the full-width Plans row (client: "still"). */
.acct-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; }
.acct-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.acct-col > .acct-card:last-child { flex: 1 1 auto;
  display: flex; flex-direction: column; }
.acct-grid-user .acct-col > .acct-card:last-child .acct-keys-note {
  margin-top: auto; }
/* admin user page: the credit ledger and the audit feed can each hold 50
   rows — bundle them with their own scroll so the two columns stay visually
   balanced for every account (client: "admin dsshjbo0ard havelots of gap
   betwen pages"). */
.admin-page .acct-col .adm-table-wrap { max-height: 430px;
  overflow-y: auto; }
.admin-page .acct-col .adm-feed { max-height: 430px; overflow-y: auto; }
@media (max-width: 1100px) {
  .acct-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- tool FAQs
   Every tool page and every legal page closes with a compact FAQ band
   (client 2026-10-13: "faq btter for all of our tools and regulations") —
   collapsed details below the work area. The accordion itself borrows
   .howto-faq / .faq-item from app.css; only the band lives here. */
.tool-faq { background: rgba(255, 255, 255, .78); border-top: 1px solid var(--line);
  padding: 34px 20px 42px; margin-top: 44px; }
.tool-faq-inner { max-width: 1000px; margin: 0 auto; }
.tool-faq h2 { margin: 0 0 4px; color: var(--brand-navy); font-size: 1.22rem; }
.tool-faq .howto-faq { margin: 14px 0 0; }
.tool-faq .faq-item p { max-width: 64ch; }
.tool-faq-more { margin: 16px 0 0; color: var(--muted); font-size: .86rem; }
.tool-faq-more a { color: var(--ocean-blue); font-weight: 600; }

/* ------------------------------------------------------------- blog page
   (client 2026-10-13: "client a blog for seo"): index cards + article
   typography; posts live in pdfwerk/blog.py, structured data on every
   post, and the whole section is listed in the sitemap. */
.blog-page.tool-page { max-width: 1060px; }
.blog-hero { text-align: center; max-width: 700px; margin: 10px auto 34px; }
.blog-hero h1 { margin: 0 0 10px; font-size: 2.2rem; }
.blog-hero .lead { margin: 0 auto; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; }
.blog-card { display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border: 1.5px solid #e5eef7; border-radius: 16px;
  padding: 20px 22px; text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.blog-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md);
  transform: translateY(-2px); }
.blog-tag { align-self: flex-start; font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ocean-blue);
  background: #eef6fd; border: 1px solid #cfe3f5; border-radius: 999px;
  padding: 3px 10px; }
.blog-card h2, .blog-card h3 { margin: 2px 0 0; color: var(--brand-navy);
  font-size: 1.08rem; line-height: 1.35; }
.blog-card p { margin: 0; color: var(--muted); font-size: .88rem;
  line-height: 1.55; }
.blog-meta { margin-top: auto; padding-top: 6px; color: var(--muted);
  font-size: .78rem; }

/* one post */
.blog-post-page.tool-page { max-width: 820px; }
.blog-crumb { display: flex; gap: 8px; align-items: center; color: var(--muted);
  font-size: .84rem; margin: 6px 0 18px; }
.blog-crumb a { color: var(--ocean-blue); font-weight: 600;
  text-decoration: none; }
.post-head { margin-bottom: 8px; }
.post-head h1 { margin: 12px 0 8px; font-size: 2rem; letter-spacing: -.02em;
  color: var(--brand-navy); }
.post-meta { color: var(--muted); font-size: .84rem; margin: 0; }
.post-body { color: var(--ink-2); font-size: 1rem; line-height: 1.75; }
.post-body h2 { margin: 30px 0 10px; color: var(--brand-navy); font-size: 1.3rem; }
.post-body p { margin: 0 0 16px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin-bottom: 7px; }
.post-body a { color: var(--ocean-blue); }
.post-body strong { color: var(--ink); }
.post-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0;
  padding-top: 24px; border-top: 1px solid var(--line); }
.blog-related { margin-top: 42px; }
.blog-related h2 { margin: 0 0 14px; color: var(--brand-navy); font-size: 1.25rem; }
.blog-related .blog-card h3 { font-size: .98rem; }

@media (max-width: 700px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-hero h1 { font-size: 1.8rem; }
  .post-head h1 { font-size: 1.6rem; }
}