/* ===========================
   ThesisAI — New Design System
   =========================== */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #F0ECE3;
  --surface: #FFFFFF;
  --surface-2: #F4F1EB;
  --ink: #1A1816;
  --ink-soft: #4A4540;
  --ink-muted: #807A72;
  --line: rgba(26, 24, 22, 0.10);
  --line-soft: rgba(26, 24, 22, 0.06);
  --accent: #2E7A28;
  --accent-ring: rgba(46, 122, 40, 0.22);
  --citation: #2C6CDB;
  --danger: #B14A28;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ===========================
   Global page background: dot grid + colour blooms
   =========================== */
html { background: var(--bg); }
body {
  position: relative;
  isolation: isolate;
  /* BFC so the navbar's top margin does not collapse out of body and expose
     the html background as a strip above the page background */
  display: flow-root;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--bg);
  background-image: repeating-radial-gradient(circle at 50% 40%, transparent 0, transparent 30px, rgba(26, 24, 22, 0.05) 30px, rgba(26, 24, 22, 0.05) 31px);
  background-size: auto;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 45%, transparent 92%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 45%, transparent 92%);
  filter: blur(0.8px);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px 480px at 18% 12%, rgba(44, 108, 219, 0.10), transparent 70%),
    radial-gradient(640px 460px at 88% 18%, rgba(46, 122, 40, 0.08), transparent 70%),
    radial-gradient(800px 520px at 50% 95%, rgba(217, 119, 87, 0.06), transparent 72%);
  pointer-events: none;
}
body[data-bs-theme="dark"]::before,
body[data-bs-theme="dark"]::after { display: none; }

/* ===========================
   Shared body override for landing page
   =========================== */
body.landing-page {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===========================
   Navbar (pill)
   =========================== */
nav {
  position: sticky;
  top: 16px;
  z-index: 100;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 16px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  /* Left padding nests the 40px logo circle concentrically inside the pill's
     rounded cap: cap radius is height/2 (31px), so the circle needs an 11px
     inset, which is 10px of padding plus the 1px border. */
  padding: 10px 16px 10px 10px;
  display: flex;
  align-items: center;
  gap: 36px;
  box-shadow: 0 8px 28px rgba(20, 18, 16, 0.06);
  /* Eases up a little once the page scrolls (.is-scrolled, toggled in
     navbar.html) - a transition rather than a smaller sticky top, which
     would track the scroll 1:1 and snap with one wheel tick. `translate`,
     not transform, so it stacks with the auth pages' translateX(-50%). */
  transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
nav.is-scrolled { translate: 0 -8px; }
@media (prefers-reduced-motion: reduce) { nav { transition: none; } }

[data-bs-theme="dark"] nav {
  background: #1A1816;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.30);
}

.brand-mark {
  display: block;
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

.nav-links {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line);
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); }
[data-bs-theme="dark"] .nav-links a { color: rgba(232,226,214,0.70); }
[data-bs-theme="dark"] .nav-links a:hover { color: #FAF8F4; }

.nav-actions {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

/* Login button (plain text - matches nav-links hover) */
.btn-nav-login {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.15s ease;
}
.btn-nav-login:hover { color: var(--ink); text-decoration: underline; }
[data-bs-theme="dark"] .btn-nav-login { color: rgba(232,226,214,0.70); }
[data-bs-theme="dark"] .btn-nav-login:hover { color: #FAF8F4; }

/* Sign Up button (dark pill) */
.btn-nav-signup {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 7px 7px 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 4px 12px rgba(20,18,16,0.12);
}
.btn-nav-signup:hover {
  transform: translateY(-1px);
  background: #000;
  color: #fff;
  box-shadow: 0 8px 22px rgba(20,18,16,0.20);
}
.btn-nav-signup .signup-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease;
  flex-shrink: 0;
}
.btn-nav-signup:hover .signup-arrow {
  transform: translateX(2px);
  background: var(--citation);
}

/* User pill + dropdown (signed-in) */
.user-wrap { position: relative; display: inline-flex; }
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.user-pill:hover {
  border-color: rgba(26, 24, 22, 0.18);
  box-shadow: 0 4px 14px rgba(20, 18, 16, 0.06);
}
.user-pill[aria-expanded="true"] {
  border-color: rgba(46, 122, 40, 0.35);
  box-shadow: 0 0 0 3px rgba(46, 122, 40, 0.10);
}
.user-pill .avatar,
.user-menu .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.user-menu .avatar-lg { width: 40px; height: 40px; font-size: 15px; }
.user-pill .user-meta {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
}
.user-pill .user-name {
  font-size: 13.5px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.user-pill .user-plan {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.user-pill .user-caret {
  color: var(--ink-muted);
  transition: transform 0.18s ease;
}
.user-pill[aria-expanded="true"] .user-caret { transform: rotate(180deg); color: var(--ink); }

.user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1000;
  width: 260px;
  background: #fff;
  border: 1px solid rgba(20, 20, 25, 0.10);
  border-radius: 14px;
  box-shadow: 0 18px 48px -20px rgba(20, 30, 50, 0.22), 0 2px 6px rgba(20, 30, 50, 0.06);
  padding: 8px;
  font-family: var(--font-sans);
}
.user-menu.show {
  display: block;
  animation: userMenuIn 0.16s ease-out;
}
@keyframes userMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-menu-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 12px;
}
.user-menu-head-text { min-width: 0; }
.user-menu-name {
  font-size: 14px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.005em;
}
.user-menu-email {
  font-size: 11.5px; color: var(--ink-muted);
  font-family: var(--font-mono);
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu-sep { height: 1px; background: var(--line-soft); margin: 2px 0; }
.user-menu-item {
  width: 100%;
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: none; border: 0;
  text-align: left;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.user-menu-item:hover { background: rgba(44, 108, 219, 0.08); color: var(--ink); }
.user-menu-item.is-danger { color: #B5453A; }
.user-menu-item.is-danger:hover { background: rgba(217, 119, 87, 0.10); color: #8E2E26; }
.user-menu-ico { width: 17px; height: 17px; opacity: 0.85; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: currentColor; }
.user-menu-ico svg { width: 17px; height: 17px; display: block; }
.user-menu-item-mobile { display: none; }
@media (max-width: 920px) {
  .user-menu-item-mobile { display: inline-flex; }
  div.user-menu-item-mobile { display: block; }
}
.user-menu-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  background: rgba(46, 122, 40, 0.10);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

[data-bs-theme="dark"] .user-pill { background: rgba(255,255,255,0.04); }
[data-bs-theme="dark"] .user-pill .user-name { color: #FAF8F4; }
[data-bs-theme="dark"] .user-menu { background: #1A1816; border-color: rgba(255,255,255,0.10); }
[data-bs-theme="dark"] .user-menu-name { color: #FAF8F4; }
[data-bs-theme="dark"] .user-menu-item { color: rgba(232,226,214,0.85); }
[data-bs-theme="dark"] .user-menu-item:hover { background: rgba(255,255,255,0.06); color: #FAF8F4; }

@media (max-width: 760px) {
  .user-pill .user-meta { display: none; }
  .user-pill { padding: 3px 8px 3px 3px; }
}

/* Language picker */
.nav-lang {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  position: relative;
}
.nav-lang-trigger {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-lang-trigger:hover { color: var(--ink); }
.nav-lang .dropdown-menu {
  font-family: var(--font-sans);
  border-radius: 12px;
  border: 1px solid rgba(20,20,25,0.10);
  box-shadow: 0 18px 48px -20px rgba(20,30,50,0.22), 0 2px 6px rgba(20,30,50,0.06);
  padding: 6px;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  /* Force open down + right-edge anchored - never flip to top */
  position: absolute !important;
  inset: 100% 0 auto auto !important;
  transform: none !important;
  margin-top: 6px;
}
.nav-lang .dropdown-item {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-lang .dropdown-item:hover { background: rgba(44,108,219,0.08); color: var(--ink); }
.nav-lang .dropdown-item.active,
.nav-lang .dropdown-item:active {
  background: rgba(44,108,219,0.12);
  color: #2C6CDB;
}
.nav-lang .lang-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  min-width: 22px;
}
.nav-lang .dropdown-item.active .lang-code { color: #2C6CDB; }
.nav-lang .lang-name {
  font-family: var(--font-sans);
  font-size: 13.5px;
  letter-spacing: -0.005em;
}
.nav-lang-search-item { padding: 2px 2px 6px; }
.nav-lang-search {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  padding: 7px 10px;
  background: rgba(20,20,25,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.nav-lang-search:focus { outline: none; border-color: var(--ink-muted); }
[data-bs-theme="dark"] .nav-lang .dropdown-menu {
  background: #1A1816;
  border-color: rgba(255,255,255,0.10);
}
[data-bs-theme="dark"] .nav-lang .dropdown-item { color: rgba(232,226,214,0.85); }
[data-bs-theme="dark"] .nav-lang .dropdown-item:hover { background: rgba(255,255,255,0.06); color: #FAF8F4; }
[data-bs-theme="dark"] .nav-lang-search {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: #F2EFE8;
}

/* Collection dropdown (Zotero / Mendeley) */
.coll-trigger {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface, #fff);
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  letter-spacing: -0.005em;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.coll-trigger:hover:not(:disabled) { border-color: rgba(44,108,219,0.4) !important; }
.coll-trigger:disabled { opacity: 0.45; cursor: not-allowed; }
.coll-trigger svg { margin-left: auto; flex-shrink: 0; color: var(--ink-muted); }
.coll-menu {
  display: none;
  position: fixed;
  z-index: 9999;
  list-style: none;
  margin: 0;
  font-family: var(--font-sans);
  border-radius: 12px;
  border: 1px solid rgba(20,20,25,0.10);
  box-shadow: 0 18px 48px -20px rgba(20,30,50,0.22), 0 2px 6px rgba(20,30,50,0.06);
  padding: 6px;
  background: #fff;
  max-height: 280px;
  overflow-y: auto;
}
.coll-menu.show { display: block; }
.coll-item {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  cursor: pointer;
}
.coll-item:hover { background: rgba(44,108,219,0.08); color: var(--ink); }
.coll-item.active { background: rgba(44,108,219,0.12); color: #2C6CDB; }
[data-bs-theme="dark"] .coll-trigger { background: var(--surface, #1A1816); }
[data-bs-theme="dark"] .coll-menu { background: #1A1816; border-color: rgba(255,255,255,0.10); }
[data-bs-theme="dark"] .coll-item { color: rgba(232,226,214,0.85); }
[data-bs-theme="dark"] .coll-item:hover { background: rgba(255,255,255,0.06); color: #FAF8F4; }

/* Theme toggle */
#themeToggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-muted);
  transition: background 0.18s ease;
  flex-shrink: 0;
}
#themeToggle:hover { background: var(--line); }
#themeToggle svg path { stroke: var(--ink-soft); }
[data-bs-theme="dark"] #themeToggle svg path { stroke: rgba(232,226,214,0.70); }

@media (max-width: 920px) {
  nav {
    width: calc(100% - 32px);
    /* 8px all round: the logo circle and the CTA pill are both 40px, so a
       uniform inset seats each concentrically in its end of the pill. */
    padding: 8px;
  }
  .nav-links { display: none !important; }
  .nav-actions { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) {
  nav { width: calc(100% - 16px); top: 8px; gap: 12px; }
  nav.is-scrolled { translate: 0 -4px; }
  .btn-nav-login { display: none; }
  /* Brand plus one CTA is all the pill holds on a phone. The picker and the
     36px gap pushed the row past the rounded edge, leaving the language code
     sitting on the page background outside the pill. The links next to it are
     already gone at 920px, so this is the last thing the mobile nav drops. */
  .nav-lang { display: none; }
  /* Below ~360px that is still not enough, and a long CTA label - "Inscrie-te",
     "Zarejestruj sie" - takes more room than "Sign up". Let the logo scale
     rather than push the row wider; it stays full size on anything from 390px.
     136px is the SVG's natural width at the 40px height used everywhere else,
     so this only ever shrinks the logo - it never blows it up. */
  .nav-brand { min-width: 0; }
  .brand-mark { width: 136px; height: auto; max-width: 100%; }
}

/* Returning-user mobile swap: show login (styled like signup), hide signup */
.btn-nav-login-mobile { display: none !important; }
@media (max-width: 767px) {
  nav.is-returning .btn-nav-login-mobile { display: inline-flex !important; }
  nav.is-returning .btn-nav-signup:not(.btn-nav-login-mobile) { display: none; }
}

/* ---------- Phone bar and sheets (<= 760px) ----------
   Layout from siriusly's phone navbar, in ThesisAI's colours: a full-width
   frosted bar pinned to the top edge (logo, language code, avatar or burger),
   and the user / guest / language menus open as full-screen sheets under it.
   The button that opened a sheet turns into its close button; the other bar
   controls step aside (html.nav-sheet-open, set by navbar.html). Desktop and
   tablet keep the pill above. "Phone" is <= 760px wide, or a short screen in
   landscape - a big phone turned sideways is ~930px wide, which would
   otherwise get the desktop pill. No pointer:coarse check: device simulators
   report a mouse, and a desktop window under 500px tall is rare. */
.nav-tiles, .nav-guest, .nav-x, .nav-phone-only, .nav-lang-title { display: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  /* html prefix: outranks the auth pages' floating-nav rule further down. */
  nav,
  html body.login-page nav, html body.signup-page nav, html body.rp-page nav, html body.np-page nav {
    width: 100%;
    max-width: none;
    margin: 0;
    top: 0;
    left: 0;
    transform: none;
    translate: none;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px -16px rgba(20, 18, 16, 0.22);
  }
  nav.is-scrolled { translate: none; }
  .brand-mark { width: auto; height: 34px; }
  /* A landscape phone can be wider than the 920px that drops these. */
  .nav-links { display: none !important; }
  .user-menu-item-mobile { display: flex; }
  .nav-actions { gap: 8px; }
  nav .nav-actions a.btn-nav-login, nav .nav-actions a.btn-nav-signup { display: none !important; }

  /* Bar controls: 38px circles. The language code sits left of the avatar. */
  .nav-lang { display: block; order: -1; padding-left: 0; border-left: 0; }
  .nav-lang-trigger,
  .user-pill, .user-pill:hover, .user-pill[aria-expanded="true"],
  .nav-burger {
    width: 38px;
    height: 38px;
    padding: 0;
    gap: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line) !important;
    border-radius: 50%;
    background: var(--surface) !important;
    box-shadow: none;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-lang-trigger { font-size: 12.5px; }
  .nav-lang-trigger > svg:last-child, .user-pill .user-meta, .user-pill .user-caret { display: none; }
  .user-pill .avatar { width: 36px; height: 36px; font-size: 14px; }
  .nav-guest { display: flex; }
  nav [aria-expanded="true"] > :not(.nav-x) { display: none !important; }
  nav [aria-expanded="true"] > .nav-x { display: block; }
  .nav-lang-trigger[aria-expanded="true"],
  .user-pill[aria-expanded="true"],
  .nav-burger[aria-expanded="true"] { background: var(--surface-2) !important; border-color: transparent !important; }

  html.nav-sheet-open { overflow: hidden; }
  /* Above the support bubble and cookie banner. Fixed, not sticky: body has
     overflow-x:hidden, so once html is overflow:hidden body becomes the
     scroller and a sticky nav would scroll away with the page. */
  html.nav-sheet-open nav { z-index: 1000; position: fixed; top: 0; left: 0; right: 0; }
  html.nav-sheet-open .user-wrap:not(:has(.show)),
  html.nav-sheet-open .nav-guest:not(:has(.show)),
  html.nav-sheet-open .nav-lang:not(:has(.show)) { display: none; }

  /* Sheets hang off nav (sticky/fixed), not off their own wrapper. */
  .user-wrap, .nav-guest, .nav-lang.dropdown { position: static; }
  nav .user-menu,
  nav .nav-lang .dropdown-menu {
    position: absolute;
    inset: 100% 0 auto 0 !important;
    width: auto;
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%);
    max-height: none;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    padding: 14px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #FBF9F5;
    color: var(--ink);
    transform: none !important;
    animation: none;
  }
  nav .user-menu.show { display: flex; }
  .user-menu-sep { display: none !important; }
  .nav-hide-phone { display: none !important; }
  .nav-phone-only { display: flex; }

  .nav-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .nav-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 78px;
    padding: 12px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
  }
  .nav-tile:hover { color: var(--ink); }
  .nav-tile-primary, .nav-tile-primary:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(20, 18, 16, 0.55);
  }
  .nav-tile-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 122, 40, 0.10);
    color: var(--accent);
  }
  .nav-tile-primary .nav-tile-ico { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .nav-tile-ico svg { width: 22px; height: 22px; }
  .nav-tile-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .nav-tile-label svg { opacity: 0.6; }

  .user-menu-head { margin-top: 10px; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
  .user-menu-item {
    gap: 14px;
    min-height: 46px;
    padding: 0 4px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
  }
  .user-menu-item:hover { background: none; color: var(--ink); }
  .user-menu-ico, .user-menu-ico svg { width: 20px; height: 20px; }
  .user-menu-badge { font-size: 11.5px; padding: 4px 10px; }
  .nav-menu-label { flex: 1; }
  .nav-menu-value { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-muted); }
  .user-menu-item.is-danger, .user-menu-item.is-danger:hover {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--danger);
  }

  /* Guest sheet: pitch, Sign up / Login, then the links and language. */
  .nav-guest-head { display: flex; flex-direction: column; gap: 8px; padding: 12px 4px 4px; }
  .nav-guest-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .nav-guest-title { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
  .nav-guest-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink-soft); }
  .nav-guest-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
  .nav-guest-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .nav-guest-btn:hover { color: var(--ink); }
  .nav-guest-signup, .nav-guest-signup:hover,
  nav.is-returning .nav-guest-login, nav.is-returning .nav-guest-login:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(20, 18, 16, 0.6);
  }
  /* Returning visitors get Login first and filled, as the old bar did. */
  nav.is-returning .nav-guest-login { order: -1; }
  nav.is-returning .nav-guest-signup { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
  .nav-guest-rows { margin-top: 22px; border-top: 1px solid var(--line); }
  .nav-guest-rows .user-menu-item { border-bottom: 1px solid var(--line); min-height: 50px; }

  /* Language list as a sheet: title, search, then code + name rows. */
  nav .nav-lang .dropdown-menu { padding-top: 0; }
  nav .nav-lang .dropdown-menu.show { display: block; }
  .nav-lang-title { display: block; padding: 16px 0 12px; font-family: var(--font-sans); font-size: 22px; font-weight: 600; color: var(--ink); }
  .nav-lang-search-item { padding: 0 0 8px; }
  .nav-lang-search { height: 46px; padding: 0 14px; border-radius: 12px; font-size: 16px; background: var(--surface); }
  .nav-lang .dropdown-item { min-height: 46px; padding: 0 12px; border-radius: 12px; font-size: 15px; gap: 14px; }
  .nav-lang .lang-code { min-width: 26px; }

  [data-bs-theme="dark"] nav { background: rgba(26, 24, 22, 0.86); border-color: rgba(255, 255, 255, 0.10); }
  [data-bs-theme="dark"] nav .user-menu,
  [data-bs-theme="dark"] nav .nav-lang .dropdown-menu { background: #1A1816; color: #FAF8F4; }
  [data-bs-theme="dark"] .nav-lang-trigger, [data-bs-theme="dark"] .user-pill, [data-bs-theme="dark"] .nav-burger,
  [data-bs-theme="dark"] .nav-tile:not(.nav-tile-primary), [data-bs-theme="dark"] .user-menu-head, [data-bs-theme="dark"] .nav-guest-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #FAF8F4;
  }
  [data-bs-theme="dark"] .user-menu-item, [data-bs-theme="dark"] .nav-lang-title, [data-bs-theme="dark"] .nav-tile { color: #FAF8F4; }
}

/* Brevo chat launcher, a bit smaller (51px), and smaller still on phones
   (45px). Its button is drawn inside Brevo's iframe, so the 60px container is
   scaled rather than resized - and only while collapsed, so the opened chat
   keeps its full size. !important beats the transform:none Brevo writes inline. */
#brevo-conversations:not(.brevo-conversations--expanded) {
  transform: scale(0.85) !important;
  transform-origin: bottom right;
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  #brevo-conversations:not(.brevo-conversations--expanded) { transform: scale(0.75) !important; }
}

/* ===========================
   Hero Section
   =========================== */
.hero {
  width: 100%;
  padding: 80px 32px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  width: 100%;
  max-width: 1240px;
  position: relative;
  z-index: 2;
}

.hero-head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 920px;
}

/* Eyebrow pill */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

/* Headline */
.hero-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(48px, 6.4vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 22px 0 24px;
  text-wrap: balance;
  color: var(--ink);
}
.hero-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
[data-bs-theme="dark"] .hero-headline { color: #FAF8F4; }
[data-bs-theme="dark"] .hero-headline em { color: rgba(250,248,244,0.60); }

/* CTA row */
.cta-row {
  display: inline-flex;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-cta {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 12px 12px 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
}
.hero-cta .cta-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}
.hero-cta.primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 32px rgba(20,18,16,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero-cta.primary .cta-arrow {
  background: var(--citation);
  color: #fff;
}
.hero-cta.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(20,18,16,0.26), inset 0 1px 0 rgba(255,255,255,0.10);
  color: #fff;
}
.hero-cta.primary:hover .cta-arrow { transform: translateX(3px) rotate(-2deg); }

.hero-cta.secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 2px 0 rgba(20,18,16,0.04);
  padding: 12px 22px;
  min-height: 56px;
}
.hero-cta.secondary:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(20,18,16,0.10);
  color: var(--ink);
}

/* Subhead */
.hero-subhead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  /* Wide enough for the four-sentence subhead to hold two lines on desktop in */
  /* every language - Hungarian is the longest and needs 870px. Matches */
  /* .hero-head's cap; balance keeps the two lines even rather than long/short. */
  max-width: 920px;
  margin: 28px auto 0;
  text-wrap: balance;
}
[data-bs-theme="dark"] .hero-subhead { color: rgba(232,226,214,0.70); }

/* Hero body — 2-col grid */
.hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 56px;
  align-items: center;
  margin-top: 40px;
}

/* Feature list */
.features-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.2s ease;
}
.feature-item:hover { padding-left: 14px; }
.feature-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}
.feature-ico > svg { width: 22px; height: 22px; }
[data-bs-theme="dark"] .feature-ico {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: rgba(232,226,214,0.85);
}
.feature-label {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-bs-theme="dark"] .feature-label { color: rgba(232,226,214,0.90); }
.feature-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Testimonial visual (hero right column) */
.chat-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.chat-visual .lg-hero-stack {
  max-width: 100%;
}
.chat-visual #hero-anim-app { width: 100%; }

/* Testimonial / social proof band (relocated from hero, sits just before the FAQ) */
.testimonial-band {
  width: 100%;
  padding: 32px 32px 8px;
  display: flex;
  justify-content: center;
}
.testimonial-band-inner {
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: center;
}
.testimonial-band .lg-hero-stack {
  max-width: 560px;
  margin: 0 auto;
}

/* ===========================
   ThesisAI vs Claude
   =========================== */
.vs-section {
  width: 100%;
  padding: 96px 32px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vs-inner {
  width: 100%;
  max-width: 1240px;
}
.vs-head {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.vs-headline {
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 22px 0 16px;
  text-wrap: balance;
}
.vs-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.vs-word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
  margin: 0 6px;
}
.vs-subhead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0 auto;
  text-wrap: pretty;
}
.vs-subhead strong { color: var(--ink); font-weight: 600; }

/* Two-phone layout */
.vs-phones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  position: relative;
  max-width: 760px;
  margin: 32px auto 0;
}
.vs-phone-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.vs-phone-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.vs-phone-tag.vs-win { color: var(--citation); }
.vs-phone-tag.vs-lose { color: #D87756; }

/* Phone frame */
.vs-phone {
  width: 300px;
  height: 600px;
  background: #1A1816;
  border-radius: 44px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(20,18,16,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  position: relative;
}
.vs-phone-notch {
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 26px;
  background: #1A1816;
  border-radius: 14px;
  z-index: 5;
}
.vs-phone-screen {
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Status bar */
.vs-status-bar {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 26px 0;
  font-size: 13px;
  font-weight: 600;
  color: #1A1816;
}
.vs-status-right { display: inline-flex; gap: 5px; align-items: center; opacity: 0.85; }

/* App bar */
.vs-app-bar {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid rgba(26,24,22,0.06);
}
.vs-icon-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(74,69,64,0.8);
}
.vs-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  color: #1A1816;
}

/* ThesisAI document */
.vs-doc-body {
  flex: 1;
  overflow: hidden;
  padding: 16px 20px;
  font-family: 'Newsreader', Georgia, serif;
  color: #1A1816;
  font-size: 8px;
  line-height: 1.5;
}
.vs-doc-title {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  line-height: 1.25;
  margin: 0 0 6px;
  color: #000;
}
.vs-doc-meta {
  text-align: center;
  font-size: 8px;
  margin: 0 0 1px;
  color: #1A1816;
}
.vs-doc-email { color: #2C6CDB; text-decoration: underline; }
.vs-doc-abstract-h {
  font-family: 'Newsreader', serif;
  font-weight: 700;
  font-size: 8.5px;
  text-align: center;
  margin: 7px 0 2px;
}
.vs-doc-abstract {
  font-size: 7.5px;
  text-align: justify;
  margin: 0 12px 4px;
  hyphens: auto;
  line-height: 1.5;
}
.vs-doc-section-h {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 10px;
  margin: 8px 0 3px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.vs-doc-body p {
  margin: 0;
  text-align: justify;
  hyphens: auto;
  text-indent: 8px;
}
.vs-doc-abstract,
.vs-doc-section-h + p {
  text-indent: 0;
}
.vs-doc-body p.vs-doc-meta {
  text-align: center;
  text-indent: 0;
}
.vs-cite { color: #2C6CDB; font-style: italic; }
.vs-doc-pageno {
  font-family: var(--font-mono);
  font-size: 5px;
  text-align: center;
  color: rgba(26,24,22,0.4);
  margin-top: 6px;
}

/* Claude chat screen */
.vs-gpt-body {
  flex: 1;
  overflow: hidden;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 8.5px;
  line-height: 1.55;
  color: #1A1816;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vs-msg { display: flex; gap: 7px; align-items: flex-start; }
.vs-avatar {
  width: 17px; height: 17px; border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 600;
  border: 1px solid rgba(26,24,22,0.12);
}
.vs-avatar.vs-user { background: transparent; color: #1A1816; }
.vs-avatar.vs-gpt { background: transparent; }
.vs-avatar.vs-gpt img { width: 70%; height: 70%; object-fit: contain; display: block; }
.vs-msg-body { flex: 1; }
.vs-who { font-weight: 700; font-size: 8.5px; margin-bottom: 2px; }
.vs-msg-body p { margin: 0 0 3px; }
.vs-msg-body h4 { font-size: 9.5px; font-weight: 700; margin: 3px 0; letter-spacing: -0.005em; }
.vs-msg-body h5 { font-size: 8.5px; font-weight: 700; margin: 5px 0 2px; }
.vs-gpt-input {
  border-top: 1px solid rgba(26,24,22,0.06);
  padding: 8px 14px 12px;
  flex-shrink: 0;
}
.vs-gpt-field {
  display: block;
  height: 26px;
  border-radius: 13px;
  border: 1px solid rgba(26,24,22,0.12);
  padding: 0 12px;
  font-size: 8.5px;
  color: rgba(26,24,22,0.4);
  line-height: 26px;
}

/* Annotation cards */
.vs-annot-group {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 18px 40px rgba(20,18,16,0.08), 0 1px 0 rgba(0,0,0,0.02);
  position: absolute;
  width: 260px;
  top: 230px;
  overflow: hidden;
  z-index: 4;
}
.vs-annot-group::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.vs-annot-group.vs-win { left: -176px; }
.vs-annot-group.vs-win::before { background: var(--accent); }
.vs-annot-group.vs-lose { right: -176px; }
.vs-annot-group.vs-lose::before { background: #D87756; }
.vs-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vs-annot-row {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  padding: 8px 0;
  border-top: 1px solid rgba(26,24,22,0.06);
  color: var(--ink);
}
.vs-annot-row:first-of-type { border-top: none; padding-top: 2px; }
.vs-badge {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vs-badge.vs-ok { background: rgba(46,122,40,0.10); color: var(--accent); }
.vs-badge.vs-bad { background: rgba(216,119,86,0.10); color: #D87756; }

/* Dark mode */
[data-bs-theme="dark"] .vs-phone-screen { background: #1C1E2B; }
[data-bs-theme="dark"] .vs-status-bar { color: #E8E2D6; }
[data-bs-theme="dark"] .vs-app-bar { border-color: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .vs-brand { color: #E8E2D6; }
[data-bs-theme="dark"] .vs-icon-btn { color: rgba(232,226,214,0.6); }
[data-bs-theme="dark"] .vs-doc-body { color: #E8E2D6; }
[data-bs-theme="dark"] .vs-doc-title { color: #E8E2D6; }
[data-bs-theme="dark"] .vs-doc-meta { color: #E8E2D6; }
[data-bs-theme="dark"] .vs-gpt-body { color: #E8E2D6; }
[data-bs-theme="dark"] .vs-who { color: #E8E2D6; }
[data-bs-theme="dark"] .vs-gpt-field { color: rgba(232,226,214,0.35); border-color: rgba(255,255,255,0.10); }
[data-bs-theme="dark"] .vs-annot-group { background: #1A1816; border-color: rgba(255,255,255,0.10); }
[data-bs-theme="dark"] .vs-annot-row { color: rgba(232,226,214,0.90); border-color: rgba(255,255,255,0.06); }

/* VS responsive.
   The side-annotation layout below parks a 260px card 176px outside each edge
   of the 760px phone row, so it needs 760 + 2*176 = 1112px of viewport before
   it fits. Stacking therefore has to hold until 1160px - at the old 860px
   breakpoint every width in between overflowed the page by up to 134px, which
   is exactly the landscape-phone range. */
@media (max-width: 1160px) {
  .vs-section { padding: 72px 24px 96px; }
  .vs-phones { max-width: 100%; }
  .vs-phone { width: 100%; max-width: 300px; height: 560px; }
  .vs-annot-group { position: static; width: 100%; margin-top: 20px; }
  .vs-phone-col { gap: 0; }
}
@media (max-width: 560px) {
  .vs-phones { grid-template-columns: 1fr; max-width: 340px; }
  .vs-subhead { font-size: 16px; }
}

/* ===========================
   Logo Strip (integration)
   =========================== */
.logo-strip {
  margin-top: 0;
  width: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.4) 100%);
}
[data-bs-theme="dark"] .logo-strip {
  border-color: rgba(255,255,255,0.08);
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.08) 100%);
}
.logo-strip-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 32px;
}
.logo-strip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}
.logo-grid {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
}
.logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.logo-grid img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease;
}
.logo-item:hover img {
  opacity: 1;
  filter: grayscale(0) drop-shadow(0 4px 12px rgba(0,0,0,0.12));
  transform: translateY(-4px) scale(1.08);
}
.logo-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
}
.logo-item:hover .logo-name {
  opacity: 1;
  transform: translateY(0);
}
.logo-item img[alt="Overleaf"],
.logo-item img[alt="Semantic Scholar"] { height: 56px; }

/* ===========================
   Footer (dark)
   =========================== */
.site-footer {
  position: relative;
  background: #14110F;
  color: #E8E2D6;
  padding: 96px 32px 32px;
  margin-top: 80px;
  overflow: hidden;
  font-family: var(--font-sans);
}
.site-footer::before {
  display: none;
}
.site-footer::after {
  content: '';
  position: absolute;
  bottom: -200px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46,122,40,0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.site-footer > * {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer tagline block */
.footer-tagline {
  text-align: center;
  padding-bottom: 64px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(232,226,214,0.10);
}
.footer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232,226,214,0.65);
  padding: 6px 12px;
  border: 1px solid rgba(232,226,214,0.14);
  border-radius: 999px;
  background: rgba(232,226,214,0.04);
}
.footer-bigline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 26px 0 32px;
  color: #FAF8F4;
  text-wrap: balance;
}
.footer-bigline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: rgba(250,248,244,0.62);
}

/* Footer link columns */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 48px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(232,226,214,0.10);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232,226,214,0.50);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 14px;
  color: rgba(232,226,214,0.85);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.15s ease, transform 0.15s ease;
  display: inline-block;
  width: fit-content;
}
.footer-col a:hover { color: #FAF8F4; transform: translateX(2px); }

/* Disclaimer */
.footer-disclaimer {
  display: flex;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(232,226,214,0.04);
  border: 1px solid rgba(232,226,214,0.08);
  border-radius: 14px;
  margin-bottom: 40px;
}
.footer-disclaimer-mark {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(44,108,219,0.18);
  color: #7DA8F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.footer-disclaimer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(232,226,214,0.70);
  letter-spacing: -0.005em;
}
.footer-disclaimer a {
  color: #7DA8F0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(125,168,240,0.40);
}
.footer-disclaimer a:hover { text-decoration-color: #7DA8F0; }

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-socials { display: inline-flex; gap: 8px; }
.footer-socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(232,226,214,0.06);
  border: 1px solid rgba(232,226,214,0.10);
  color: rgba(232,226,214,0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.footer-socials a:hover {
  background: #FAF8F4;
  color: #14110F;
  border-color: #FAF8F4;
  transform: translateY(-2px);
}
.footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(232,226,214,0.55);
}
.footer-status { display: inline-flex; align-items: center; gap: 7px; }
.footer-divider {
  width: 1px; height: 12px;
  background: rgba(232,226,214,0.18);
}

/* Responsive */
@media (max-width: 920px) {
  .hero { padding: 60px 24px 48px; }
  .hero-body { grid-template-columns: 1fr; gap: 40px; }
  .feature-item { padding-top: 18px; padding-bottom: 18px; }
  .logo-strip { margin-top: 48px; }
  .site-footer { padding: 64px 24px 28px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .lg-hero-stack .lg-logo-wall { order: 1; margin-bottom: 16px; }
  .lg-hero-stack .lg-quote-card { order: 2; }
  .lg-hero-stack .lg-stat-row { order: 3; }
}
@media (max-width: 560px) {
  .hero { padding: 40px 16px 36px; }
  .hero-headline { font-size: clamp(38px, 10vw, 60px); }
  .hero-subhead { font-size: 15px; }
  .feature-label { font-size: 15px; }
  .logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 12px;
  }
  .logo-item { flex: 0 0 calc(33.333% - 12px); }
  .logo-grid img { height: 32px; }
  .logo-item img[alt="Overleaf"],
  .logo-item img[alt="Semantic Scholar"] { height: 44px; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ===========================
   Pricing Section
   =========================== */
.pricing-section {
  width: 100%;
  padding: 96px 32px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pricing-inner {
  width: 100%;
  max-width: 1240px;
}
.pricing-head {
  text-align: center;
  margin-bottom: 48px;
}
.pricing-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 22px 0 16px;
}
.pricing-headline em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink-soft);
}
.pricing-subhead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

/* Billing toggle */
.pricing-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
}
.pc-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  position: relative;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(26, 24, 22, 0.08);
}
.pc-toggle button {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 11px 22px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color 180ms ease;
}
.pc-toggle button.active { color: #fff; }
/* left/width carry no useful value until JS has measured the active button, so
   they are pinned to zero here rather than left to the static flow - otherwise
   the thumb paints as a pill at the left edge, under the wrong label, for every
   frame before the measuring script runs. It stays invisible and unanimated
   until .pc-thumb-ready says it has been placed, so that first placement lands
   silently instead of sliding across the toggle on load. */
.pc-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  opacity: 0;
  background: var(--ink);
  border-radius: 999px;
  z-index: 0;
  box-shadow: 0 2px 6px rgba(26, 24, 22, 0.22);
}
.pc-toggle.pc-thumb-ready .pc-thumb {
  opacity: 1;
  transition: left 240ms cubic-bezier(.2,.7,.2,1), width 240ms cubic-bezier(.2,.7,.2,1);
}
.pc-toggle:hover .pc-thumb { box-shadow: 0 3px 10px rgba(26, 24, 22, 0.3); }
/* One-time nudge so users see the thumb is slidable */
.pc-thumb.pc-hint { animation: pcThumbHint 1.1s cubic-bezier(.2,.7,.2,1) 1; }
@keyframes pcThumbHint {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(-46px); }
  70%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
/* Attention pulse - a soft accent ring breathes a few times to flag the control */
.pc-toggle.pc-attn { animation: pcTogglePulse 1.4s ease-out 3; }
@keyframes pcTogglePulse {
  0%   { box-shadow: 0 2px 10px rgba(26, 24, 22, 0.08), 0 0 0 0 var(--accent-ring); }
  60%  { box-shadow: 0 2px 10px rgba(26, 24, 22, 0.08), 0 0 0 12px rgba(46, 122, 40, 0); }
  100% { box-shadow: 0 2px 10px rgba(26, 24, 22, 0.08), 0 0 0 0 rgba(46, 122, 40, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-thumb.pc-hint, .pc-toggle.pc-attn { animation: none; }
}
.pc-save-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  background: var(--accent);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Cards grid */
.pc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}
.pc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 32px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease, border-color 320ms ease;
  will-change: transform;
}
.pc-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(46,122,40,0.10), transparent 55%);
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: 0;
}
.pc-card > * { position: relative; z-index: 1; }
.pc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(20,18,16,0.10), 0 4px 12px rgba(20,18,16,0.05);
  border-color: var(--accent-ring);
}
.pc-card:hover::before { opacity: 1; }
.pc-card.pc-pro {
  background: #1A1816;
  color: #FAF8F4;
  border-color: #1A1816;
}
.pc-card.pc-pro::before {
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(184,221,168,0.14), transparent 55%);
}
.pc-card.pc-pro:hover {
  box-shadow: 0 32px 72px rgba(20,18,16,0.32), 0 0 0 1px rgba(184,221,168,0.30);
  border-color: rgba(184,221,168,0.30);
}
.pc-card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 6px;
}
.pc-card.pc-pro .pc-card-tag { color: rgba(250,248,244,0.65); }
.pc-tier-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pc-tier-name {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pc-card.pc-pro .pc-tier-name { color: #FAF8F4; }
.pc-pop-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  transition: transform 280ms cubic-bezier(.3,1.6,.5,1);
}
.pc-card.pc-pro:hover .pc-pop-pill { transform: translateY(-1px) scale(1.04); }
.pc-tagline {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 24px;
  min-height: 42px;
}
.pc-card.pc-pro .pc-tagline { color: rgba(250,248,244,0.72); }

/* Price block */
.pc-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.pc-symbol {
  font-weight: 500;
  font-size: 24px;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.pc-card.pc-pro .pc-symbol { color: rgba(250,248,244,0.7); }
.pc-amount {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), letter-spacing 320ms ease;
}
.pc-card:hover .pc-amount { transform: translateY(-1px); letter-spacing: -0.032em; }
.pc-period {
  font-size: 14px;
  color: var(--ink-muted);
  align-self: center;
  margin-left: 2px;
}
.pc-card.pc-pro .pc-period { color: rgba(250,248,244,0.6); }
.pc-price-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  min-height: 18px;
}
.pc-card.pc-pro .pc-price-meta { color: rgba(250,248,244,0.6); }
/* Card-tag row: the eyebrow and, when a coupon applies, the saving pill. Mirrors
   .pc-tier-label's space-between below it, so the pill sits directly above the
   "Most popular" badge and shares its right edge. nowrap keeps it from breaking
   into two lines on a narrow phone. */
.pc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.pc-card-head .pc-card-tag { margin-bottom: 0; }
.pc-card-head .pc-pop-pill { white-space: nowrap; flex-shrink: 0; }

.pc-strike { text-decoration: line-through; text-decoration-color: rgba(26,24,22,0.35); }
.pc-card.pc-pro .pc-strike { text-decoration-color: rgba(250,248,244,0.45); }
.pc-saved { color: var(--accent); }
.pc-card.pc-pro .pc-saved { color: #B8DDA8; }

/* Stepper */
.pc-slider-block {
  background: rgba(250,248,244,0.13);
  border: 1px solid rgba(250,248,244,0.22);
  border-radius: 12px;
  padding: 16px 18px 14px;
  margin-bottom: 22px;
}
.pc-slider-block.pc-light {
  background: var(--surface-2);
  border-color: var(--line);
}
.pc-sl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
}
.pc-sl-label { color: rgba(250,248,244,0.85); font-weight: 500; }
.pc-slider-block.pc-light .pc-sl-label { color: var(--ink-soft); }

/* Stepper control */
.pc-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pc-step-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  padding: 0;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(250,248,244,0.36);
  background: #57524D;
  color: #FAF8F4;
  font-family: var(--font-sans);
  font-size: 20px; line-height: 1;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.pc-step-btn:hover:not(:disabled) { background: #FFFFFF; border-color: #FFFFFF; color: #1A1816; transform: scale(1.06); }
.pc-step-btn:active:not(:disabled) { transform: scale(0.92); }
.pc-step-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.pc-slider-block.pc-light .pc-step-btn {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}
.pc-slider-block.pc-light .pc-step-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.06); }

.pc-step-readout {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.pc-step-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pc-slider-block.pc-light .pc-step-num { color: var(--ink); }
.pc-step-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250,248,244,0.55);
}
.pc-slider-block.pc-light .pc-step-unit { color: var(--ink-muted); }
.pc-sl-helper {
  font-size: 12px;
  color: rgba(250,248,244,0.72);
  margin-top: 12px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.pc-slider-block.pc-light .pc-sl-helper { color: var(--ink-soft); }
.pc-sl-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(184,221,168,0.18);
  color: #B8DDA8;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  flex-shrink: 0;
}
.pc-slider-block.pc-light .pc-sl-pill {
  background: rgba(46,122,40,0.10);
  color: var(--accent);
}

/* Features */
.pc-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pc-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
.pc-card:hover .pc-features li { transform: translateX(2px); }
.pc-card.pc-pro .pc-features li { color: rgba(250,248,244,0.88); }
.pc-check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(46,122,40,0.10);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: transform 280ms cubic-bezier(.3,1.6,.5,1);
}
.pc-card:hover .pc-features li:hover .pc-check { transform: scale(1.15) rotate(-6deg); }
.pc-card.pc-pro .pc-check { background: rgba(184,221,168,0.18); color: #B8DDA8; }

/* CTA */
.pc-cta {
  margin-top: auto;
  width: 100%;
  padding: 14px 20px;
  font: 500 15px/1 var(--font-sans);
  letter-spacing: -0.005em;
  border-radius: 10px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 200ms ease, background 140ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pc-card:hover .pc-cta { box-shadow: 0 8px 22px rgba(20,18,16,0.18); }
.pc-card.pc-basic:hover .pc-cta { transform: translateY(-1px); }
.pc-card.pc-pro .pc-cta { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.pc-card.pc-pro:hover .pc-cta { background: #fff; box-shadow: 0 8px 22px rgba(184,221,168,0.22); }
.pc-arrow { transition: transform 180ms ease; }
.pc-cta:hover .pc-arrow { transform: translateX(3px); }
.pc-cta-foot {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 10px;
  text-align: center;
}
.pc-card.pc-pro .pc-cta-foot { color: rgba(250,248,244,0.55); }

/* Social proof */
.pc-social-proof {
  margin-top: 56px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.pc-sp-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pc-sp-logos { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.pc-uni {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  opacity: 0.78;
}

/* Compare table */
.pc-compare-wrap { margin-top: 96px; }
.pc-compare-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}
.pc-compare-head h2 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.pc-compare-sub { font-size: 14px; color: var(--ink-muted); }
.pc-compare-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pc-compare-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.pc-th-tier { text-align: center; width: 220px; }
.pc-th-pro { color: var(--ink) !important; position: relative; }
.pc-th-pro::after {
  content: "";
  position: absolute;
  inset: 8px 12px 0;
  background: var(--ink);
  border-radius: 8px 8px 0 0;
  z-index: -1;
}
.pc-tr-group td {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 24px 20px 8px;
  border-bottom: none;
}
.pc-tr-row td { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.pc-td-feat { color: var(--ink); font-weight: 500; }
.pc-td-cell { text-align: center; width: 220px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pc-td-pro { background: rgba(26,24,22,0.97); color: rgba(250,248,244,0.92); }
.pc-yes, .pc-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
}
.pc-yes { color: var(--accent); background: rgba(46,122,40,0.10); }
.pc-td-pro .pc-yes { color: #B8DDA8; background: rgba(184,221,168,0.16); }
.pc-no { color: var(--ink-muted); }
.pc-td-pro .pc-no { color: rgba(250,248,244,0.35); }
.pc-tr-row:last-child .pc-td-pro { border-radius: 0 0 8px 8px; }

/* ===========================
   FAQ Section
   =========================== */
.faq-section {
  width: 100%;
  padding: 96px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.faq-inner {
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.faq-head h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
}
.faq-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.faq-head p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid var(--line-soft);
  padding: 22px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font: 500 17px/1.4 var(--font-sans);
  color: var(--ink);
  letter-spacing: -0.005em;
  padding: 0;
}
.faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 280ms ease, opacity 220ms ease, margin-top 220ms ease;
  opacity: 0;
}
.faq-item.open .faq-a { max-height: 400px; opacity: 1; margin-top: 12px; }
.faq-a p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
}

/* ===========================
   Academic Integrity Section
   ===========================
   Rendered only under the ads_safe_copy waffle switch
   (templates/components/index/integrity.html). Sits between the FAQ and the
   contact card, so it borrows their rhythm rather than introducing a third. */
.integrity-section {
  width: 100%;
  padding: 0 32px 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.integrity-inner {
  width: 100%;
  max-width: 1240px;
}
.integrity-head {
  max-width: 680px;
  margin-bottom: 44px;
}
.integrity-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.integrity-head h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
}
.integrity-head h2 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink-soft);
}
.integrity-head p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.integrity-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.integrity-points li {
  background: var(--bg);
  padding: 28px 28px 32px;
}
.integrity-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.integrity-points h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.integrity-points p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
}
.integrity-points a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===========================
   Contact Section
   =========================== */
.contact-section {
  width: 100%;
  padding: 0 32px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-inner {
  width: 100%;
  max-width: 1240px;
  display: flex;
  justify-content: center;
}
.contact-card {
  padding: 24px 0 48px;
  max-width: 640px;
  width: 100%;
  text-align: center;
}
.contact-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.contact-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.contact-card h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
}
.contact-card h2 em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink-soft);
}
.contact-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 580px;
}

/* Responsive — pricing / faq / contact */
@media (max-width: 720px) {
  .pricing-section { padding: 72px 20px 60px; }
  .pc-cards { grid-template-columns: 1fr; max-width: 440px; }
  .pc-social-proof { gap: 16px; flex-direction: column; align-items: flex-start; padding: 20px; }
  .pc-sp-logos { gap: 20px; flex-wrap: nowrap; overflow: hidden; width: 100%; }
  .pc-compare-head { flex-direction: column; align-items: flex-start; }
  .pc-th-tier { width: 130px; }
  .pc-td-cell { width: 130px; }
  .faq-section { padding: 72px 20px; }
  .faq-inner { grid-template-columns: 1fr; gap: 32px; }
  .contact-section { padding: 0 20px 72px; }
  .integrity-section { padding: 0 20px 72px; }
  .integrity-points { grid-template-columns: 1fr; }
  .integrity-head { margin-bottom: 32px; }
}

/* ===========================
   Video Section
   =========================== */
.vid-section {
  position: relative;
  padding: 96px 32px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.vid-section::before {
  content: "";
  position: absolute;
  top: -120px; left: -160px;
  width: 520px; height: 520px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(44,108,219,0.08), transparent 70%);
  z-index: 0; pointer-events: none;
}
.vid-section::after {
  content: "";
  position: absolute;
  bottom: -120px; right: -160px;
  width: 520px; height: 520px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46,122,40,0.06), transparent 70%);
  z-index: 0; pointer-events: none;
}
.vid-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vid-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 22px 0 18px;
  text-align: center;
  text-wrap: balance;
}
.vid-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.vid-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 580px;
  text-align: center;
  margin: 0 auto 28px;
}

/* Creator credit */
.vid-creator {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  margin: 0 auto 56px;
  box-shadow: 0 2px 0 var(--line-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.vid-creator:hover {
  transform: translateY(-1px);
  border-color: rgba(26,24,22,0.18);
  box-shadow: 0 8px 22px -8px rgba(20,18,16,0.18);
}
.vid-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2C6CDB 0%, #2E7A28 100%);
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vid-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-creator-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.vid-creator-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.vid-creator-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 3px;
}
.vid-creator-arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  margin-left: 4px;
}
.vid-creator:hover .vid-creator-arrow { background: var(--ink); color: #fff; transform: translateX(2px); }

/* Video card */
.vid-card-wrap {
  position: relative;
  width: 100%;
  max-width: 1040px;
}
.vid-card-wrap::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 28px;
  background: conic-gradient(from 140deg at 60% 50%,
    rgba(255,122,86,0.55) 0deg,
    rgba(231,86,162,0.55) 90deg,
    rgba(125,95,215,0.5) 180deg,
    rgba(44,108,219,0.45) 250deg,
    rgba(255,122,86,0.55) 360deg);
  filter: blur(28px);
  opacity: 0.55;
  z-index: 0;
  animation: vid-drift 16s ease-in-out infinite alternate;
}
@keyframes vid-drift {
  from { transform: translate(-6px,-4px) scale(1.0); }
  to   { transform: translate(8px,6px) scale(1.04); }
}
.vid-card {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  background: #0e1320;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -20px rgba(20,18,16,0.30), 0 8px 28px rgba(20,18,16,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.vid-thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
}
.vid-card:hover .vid-thumb { transform: scale(1.02); filter: brightness(1.05); }
.vid-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,19,32,0) 30%, rgba(14,19,32,0.45) 100%), radial-gradient(60% 60% at 50% 50%, rgba(14,19,32,0) 0%, rgba(14,19,32,0.18) 100%);
  pointer-events: none;
  z-index: 1;
}
.vid-play-btn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  z-index: 3;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 18px 48px rgba(20,18,16,0.35), 0 0 0 1px rgba(20,18,16,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.vid-play-btn::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.40);
  animation: vid-ring 2.6s ease-out infinite;
}
@keyframes vid-ring {
  0%   { transform: scale(0.95); opacity: 0.7; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.vid-play-btn svg { display: block; margin-left: 6px; color: #0e1320; }
.vid-card:hover .vid-play-btn {
  transform: translate(-50%,-50%) scale(1.05);
  background: #fff;
  box-shadow: 0 24px 60px rgba(20,18,16,0.45);
}
.vid-caption {
  position: absolute;
  left: 20px; bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  background: rgba(20,18,16,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #fff;
}
.vid-yt-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vid-yt-mark svg { display: block; color: #FF0033; }
.vid-caption-title { font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; }
.vid-duration {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid rgba(255,255,255,0.18);
}
.vid-card.playing .vid-play-btn,
.vid-card.playing .vid-caption,
.vid-card.playing .vid-thumb,
.vid-card.playing::after { display: none; }
.vid-card.playing { border: 0; background: #000; }

/* Stats */
.vid-stats {
  display: flex;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  width: 100%;
  max-width: 920px;
}
.vid-stat {
  flex: 1;
  padding: 22px 24px 22px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vid-stat:last-child { border-right: 0; padding-right: 0; }
.vid-stat + .vid-stat { padding-left: 24px; }
.vid-stat-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.vid-stat-num em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.vid-stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* CTAs */
.vid-cta-row { display: inline-flex; gap: 12px; margin-top: 48px; }
.vid-cta {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 12px 12px 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
}
.vid-cta-arrow, .vid-cta-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}
.vid-cta-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 32px rgba(20,18,16,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
}
.vid-cta-primary .vid-cta-arrow { background: #2C6CDB; color: #fff; }
.vid-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(20,18,16,0.26), inset 0 1px 0 rgba(255,255,255,0.10);
}
.vid-cta-primary:hover .vid-cta-arrow { transform: translateX(3px); }
.vid-cta-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.vid-cta-secondary .vid-cta-icon { background: var(--surface-2); color: var(--ink-soft); width: 28px; height: 28px; }
.vid-cta-secondary:hover { border-color: var(--ink); transform: translateY(-2px); }
.vid-cta-secondary:hover .vid-cta-icon { background: var(--ink); color: #fff; }

/* Responsive */
@media (max-width: 720px) {
  .vid-section { padding: 64px 20px 56px; }
  .vid-play-btn { width: 72px; height: 72px; }
  .vid-stats { flex-wrap: wrap; }
  .vid-stat { flex: 1 1 50%; border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 0; }
  .vid-stat:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--line); }
  .vid-stat + .vid-stat { padding-left: 0; }
  .vid-stat:nth-child(even) { padding-left: 16px; }
  .vid-cta-row { flex-direction: column; align-items: stretch; }
  .vid-creator {
    width: 100%;
    flex-wrap: nowrap;
    padding: 7px 12px 7px 7px;
    gap: 10px;
    margin-bottom: 40px;
    overflow: hidden;
  }
  .vid-creator-text { min-width: 0; flex: 1; overflow: hidden; }
  .vid-creator-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vid-creator-role { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vid-creator-arrow { flex-shrink: 0; }
}

/* ===========================
   Documents page
   =========================== */
.docs-section {
  width: 100%; padding: 80px 32px 96px; position: relative;
  color: var(--ink); font-family: var(--font-sans);
  min-height: calc(100vh - 80px);
}
.docs-inner { width: 100%; max-width: 1240px; margin: 0 auto; position: relative; z-index: 2; }
.docs-head { text-align: center; margin: 0 auto 56px; max-width: 760px; }
.docs-head .eyebrow { margin-bottom: 0; }
.docs-headline {
  font-family: var(--font-sans);
  font-weight: 600; font-size: clamp(40px,4.6vw,60px); line-height: 1.05;
  letter-spacing: -0.02em; margin: 22px 0 18px; text-wrap: balance;
}
.docs-headline em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink-soft); }
.docs-subhead { font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 600px; margin: 0 auto; }

/* Grid */
.doc-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.doc-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 18px; min-height: 180px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  overflow: hidden; font-family: inherit; color: var(--ink); width: 100%;
}
.doc-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(140px 140px at var(--mx,50%) var(--my,50%), rgba(44,108,219,0.08), transparent 70%);
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.doc-card:hover { transform: translateY(-4px); border-color: rgba(26,24,22,0.18); box-shadow: 0 18px 40px rgba(20,18,16,0.10); }
.doc-card:hover::before { opacity: 1; }
.doc-card:hover .doc-arrow { transform: translate(2px,-2px); opacity: 1; }
.doc-card:hover .doc-icon { background: var(--ink); color: #fff; border-color: var(--ink); }
.doc-card-head { display: flex; align-items: center; gap: 14px; }
.doc-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); flex-shrink: 0;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.doc-icon svg { display: block; }
.doc-meta { display: flex; flex-direction: column; gap: 2px; }
.doc-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink); letter-spacing: 0.02em; font-weight: 500; }
.doc-pages { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-muted); }
.doc-card .doc-num { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.04em; }
.doc-title {
  font-family: var(--font-sans); font-size: 16.5px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.4; color: var(--ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1;
}
.doc-title.rtl { direction: rtl; text-align: right; }
.doc-arrow {
  position: absolute; right: 16px; bottom: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); opacity: 0.55;
  transition: transform 0.22s ease, opacity 0.22s ease;
  flex-shrink: 0; z-index: 1;
}

/* Modal */
.doc-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(20,18,16,0.40); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1080; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
.doc-modal-scrim.open { opacity: 1; pointer-events: auto; }
.doc-modal {
  width: 100%; max-width: 780px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 22px; padding: 30px 30px 26px;
  box-shadow: 0 30px 80px rgba(20,18,16,0.22); position: relative;
  transform: translateY(8px) scale(0.985); transition: transform 0.24s ease;
  isolation: isolate; overflow: hidden;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.doc-modal::before {
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(44,108,219,0.08), transparent 70%);
  pointer-events: none; z-index: 0;
}
.doc-modal-scrim.open .doc-modal { transform: translateY(0) scale(1); }
.doc-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  z-index: 3; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform 220ms cubic-bezier(.2,.8,.2,1);
}
.doc-modal-close:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: rotate(90deg); }
.doc-modal-head {
  position: relative; z-index: 1; padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line); padding-right: 44px;
}
.doc-modal-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface-2);
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-soft); margin-bottom: 14px;
}
.doc-modal-title { font-family: var(--font-sans); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.32; margin: 0; color: var(--ink); text-wrap: pretty; }
.doc-modal-title.rtl { direction: rtl; text-align: right; }

/* Stat row */
.doc-stat-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.doc-stat-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 14px; }
.doc-stat-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-stat-label { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; line-height: 1.2; }
.doc-stat-hint { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.doc-stat-bignum { font-family: var(--font-sans); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); width: 56px; text-align: center; flex-shrink: 0; line-height: 1; }

/* Donut */
.doc-donut { position: relative; width: 56px; height: 56px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.doc-donut-blue { color: var(--citation); }
.doc-donut-green { color: var(--accent); }
.doc-donut svg { position: absolute; inset: 0; }
.doc-donut-val { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.doc-donut-val i { font-style: normal; font-size: 9px; font-weight: 600; margin-left: 1px; color: var(--ink-muted); letter-spacing: 0; }

/* Actions */
.doc-actions-block { position: relative; z-index: 1; margin-bottom: 18px; }
.doc-actions-block:last-child { margin-bottom: 0; }
.doc-actions-label { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.doc-actions-label span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.doc-actions-label i { flex: 1; height: 1px; background: var(--line-soft); }
.doc-dl-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.doc-dl-card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 14px 12px; cursor: pointer; font-family: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.doc-dl-card:hover { transform: translateY(-2px); border-color: rgba(26,24,22,0.20); box-shadow: 0 10px 26px rgba(20,18,16,0.08); }
.doc-dl-card:hover .doc-dl-icon { background: var(--ink); border-color: var(--ink); color: #fff; }
.doc-dl-card:hover .doc-dl-arrow { color: var(--ink); transform: translate(2px,-2px); }
.doc-dl-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.doc-dl-icon svg { display: block; width: 22px; height: 22px; }
.doc-dl-text { display: flex; flex-direction: column; gap: 2px; }
.doc-dl-label { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.doc-dl-sub { font-size: 12px; color: var(--ink-muted); letter-spacing: -0.005em; }
.doc-dl-arrow { position: absolute; top: 12px; right: 14px; color: var(--ink-muted); transition: color 0.18s ease, transform 0.18s ease; display: inline-flex; }
.doc-more-row { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-more-btn {
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 13px 9px 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  flex: 1 1 auto; justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.doc-more-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-1px); }
.doc-more-btn:hover .doc-more-icon { background: rgba(255,255,255,0.15); color: #fff; }
.doc-more-icon {
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}
.doc-more-icon svg { display: block; width: 13px; height: 13px; }
.doc-more-btn.danger { color: var(--danger); }
.doc-more-btn.danger .doc-more-icon { color: var(--danger); }
.doc-more-btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.doc-more-btn.danger:hover .doc-more-icon { background: rgba(255,255,255,0.18); color: #fff; }

/* Initial prompt dropdown (inside the doc modal) */
.doc-prompt-block { display: flex; flex-direction: column; gap: 0; }
.doc-prompt-header {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.doc-prompt-header:hover { border-color: rgba(26, 24, 22, 0.20); background: #FAF7F1; }
.doc-prompt-header.is-open {
  border-color: rgba(26, 24, 22, 0.20);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.doc-prompt-header-left {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1;
}
.doc-prompt-header-title {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.doc-prompt-header-preview {
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: -0.003em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-prompt-stack { display: inline-flex; align-items: center; flex-shrink: 0; }
.doc-prompt-stack-av {
  width: 26px; height: 26px;
  object-fit: contain;
  display: block;
}
.doc-prompt-stack-user {
  border-radius: 50%;
  background: #FFF6CC;
  padding: 2px;
  border: 1.5px solid var(--surface-2);
  box-shadow: 0 1px 2px rgba(20, 18, 16, 0.10);
}
.doc-prompt-header-caret {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.18s ease, color 0.15s ease;
  flex-shrink: 0;
}
.doc-prompt-header.is-open .doc-prompt-header-caret {
  transform: rotate(180deg);
  color: var(--ink);
}
.doc-prompt-thread {
  position: relative; z-index: 1;
  border: 1px solid var(--line);
  border-top: 0;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  background: var(--surface);
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  animation: docPromptExpand 0.22s ease-out;
}
@keyframes docPromptExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.doc-prompt-msg {
  display: flex; gap: 10px; align-items: flex-start;
}
.doc-prompt-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #FFF6CC;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.doc-prompt-avatar img { width: 22px; height: 22px; object-fit: contain; display: block; }
.doc-prompt-bubble {
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink);
  border-radius: 14px;
  border-top-left-radius: 4px;
  padding: 9px 14px 14px;
  max-width: 100%;
  position: relative;
}
.doc-prompt-bubble-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.doc-prompt-bubble-who {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.doc-prompt-bubble-time {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
}
.doc-prompt-bubble-text {
  font-size: 13.5px; line-height: 1.5;
  color: inherit; margin: 0;
  letter-spacing: -0.003em;
  text-wrap: pretty;
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.doc-prompt-copy {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink);
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 5px 11px 5px 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.doc-prompt-copy svg { flex-shrink: 0; color: var(--ink); }
.doc-prompt-copy:hover { background: #F4F1EB; border-color: #F4F1EB; transform: translateY(-1px); }
.doc-prompt-copy .doc-prompt-copy-done { display: none; align-items: center; gap: 6px; }
.doc-prompt-copy.is-copied { background: #DFF5E3; border-color: #DFF5E3; color: #1E5A1A; }
.doc-prompt-copy.is-copied svg { color: #1E5A1A; }
.doc-prompt-copy.is-copied .doc-prompt-copy-default { display: none; }
.doc-prompt-copy.is-copied .doc-prompt-copy-done { display: inline-flex; }

/* Responsive */
@media (max-width: 920px) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .docs-section { padding: 56px 20px 64px; }
  .doc-stat-row { grid-template-columns: 1fr 1fr; }
  .doc-dl-row { grid-template-columns: 1fr; }
  .doc-more-row { flex-wrap: wrap; }
}
@media (max-width: 600px) { .doc-grid { grid-template-columns: 1fr; } }

/* ─── Documents page: filter toolbar ─────────────────────────────── */
.docs-head { margin-bottom: 36px; }

.docs-filter-summary {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin-top: 10px;
}
.active-topic {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 4px 4px 14px;
  box-shadow: 0 4px 14px rgba(20,18,16,0.04);
  font-family: var(--font-sans);
}
.active-topic-tag {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
.active-topic-sep {
  display: inline-block; width: 1px; height: 14px;
  background: var(--line); margin: 0 12px;
}
.active-topic-name {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em;
}
.active-topic-clear {
  width: 28px; height: 28px; margin-left: 10px;
  border-radius: 50%; border: 0; background: var(--surface-2);
  color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.active-topic-clear:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.docs-filter-line {
  font-size: 14.5px; color: var(--ink-soft); margin: 0; line-height: 1.5;
}
.docs-filter-line strong { color: var(--ink); font-weight: 600; }
.docs-filter-line a {
  color: var(--citation); font-weight: 500; text-decoration: underline;
  text-decoration-color: rgba(44,108,219,0.22); text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.docs-filter-line a:hover { text-decoration-color: var(--citation); }

.filter-toolbar {
  position: sticky; top: 92px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 22px; padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(20,18,16,0.06);
}
.ft-left, .ft-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ft-right { gap: 14px; }

.ft-search {
  position: relative; display: inline-flex; align-items: center;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: 999px; padding: 0 12px 0 12px;
  height: 36px; flex: 1 1 320px; min-width: 320px;
  color: var(--ink-muted);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ft-search:focus-within {
  background: var(--surface); border-color: var(--line);
  box-shadow: 0 0 0 3px rgba(20,18,16,0.04);
}
.ft-search-input {
  border: 0; background: none; font: inherit; font-size: 13.5px;
  color: var(--ink); outline: none; padding: 0 8px; flex: 1; min-width: 0;
}
.ft-search-input::placeholder { color: var(--ink-muted); }
.ft-search-clear {
  width: 18px; height: 18px; border: 0;
  background: var(--ink); color: #fff; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

.fc-wrap { position: relative; display: inline-flex; }
.fc {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 36px; padding: 0 12px;
  font-family: inherit; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer; color: var(--ink-soft);
  letter-spacing: -0.005em; text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fc:hover { border-color: rgba(26,24,22,0.20); color: var(--ink); }
.fc-wrap.is-open .fc { border-color: var(--ink); color: var(--ink); }
.fc-label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
  text-align: center;
}
.fc-value { font-weight: 600; color: inherit; text-align: center; }
.fc-caret { color: var(--ink-muted); transition: transform 0.15s ease; }
.fc-wrap.is-open .fc-caret { transform: rotate(180deg); }
.fc.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.fc.is-active .fc-label, .fc.is-active .fc-caret { color: rgba(255,255,255,0.6); }
.fc.fc-accent.is-active {
  background: rgba(46,122,40,0.10);
  border-color: rgba(46,122,40,0.22);
  color: var(--accent);
}
.fc.fc-accent.is-active .fc-label { color: var(--accent); opacity: 0.8; }
.fc.fc-accent.is-active .fc-caret { color: var(--accent); }

.fc-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  z-index: 30; min-width: 220px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid rgba(20,20,25,0.10);
  border-radius: 12px;
  box-shadow: 0 18px 48px -20px rgba(20,30,50,0.22), 0 2px 6px rgba(20,30,50,0.06);
  padding: 6px; font-family: var(--font-sans);
  display: none;
  animation: fcMenuIn 0.16s ease-out;
}
.fc-wrap.is-open .fc-menu { display: block; }
@keyframes fcMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fc-opt {
  width: 100%; display: inline-flex; align-items: center; gap: 10px;
  text-align: left; background: none; border: 0; font: inherit; font-size: 13px;
  color: var(--ink-soft); padding: 8px 10px; border-radius: 8px; cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.fc-opt:hover { background: rgba(44,108,219,0.08); color: var(--ink); }
.fc-opt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.fc-opt.is-on { color: var(--ink); font-weight: 600; }
.fc-opt.is-on .fc-opt-dot { background: var(--accent); }

.ft-clear {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  background: none; border: 0; padding: 0 8px; height: 36px;
  cursor: pointer; letter-spacing: -0.005em; border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}
.ft-clear:hover { color: var(--ink); background: var(--surface-2); }

.ft-count {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  white-space: nowrap;
}
.ft-count-num { color: var(--ink); font-weight: 600; }
.ft-right .fc-menu { right: 0; left: auto; }

/* Topic chip on card */
.doc-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto;
}
.doc-topic-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); background: rgba(46,122,40,0.10);
  padding: 4px 9px; border-radius: 999px;
  max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-topic-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.doc-card-foot .doc-arrow {
  position: static; right: auto; bottom: auto;
}

/* Empty state */
.docs-empty {
  margin: 32px auto 0; padding: 48px 32px 56px;
  text-align: center; max-width: 520px;
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: 18px;
}
.docs-empty-ico {
  width: 56px; height: 56px; margin: 0 auto 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface-2); color: var(--ink-soft);
}
.docs-empty h3 {
  font-family: var(--font-sans); font-size: 19px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em; margin: 0 0 8px;
}
.docs-empty p {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  margin: 0 auto 22px; max-width: 360px;
}
.docs-empty-actions { display: inline-flex; gap: 10px; }
.docs-btn-dark, .docs-btn-light {
  display: inline-flex; align-items: center;
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  letter-spacing: -0.005em; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.docs-btn-dark { color: #fff; background: var(--ink); border: 1px solid var(--ink); }
.docs-btn-dark:hover { background: #000; }
.docs-btn-light { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.docs-btn-light:hover { border-color: var(--ink); }

@media (max-width: 800px) {
  .filter-toolbar { flex-direction: column; align-items: stretch; }
  .ft-search { min-width: 0; flex: 1; }
  .ft-right { justify-content: space-between; }
}

/* ─── Account page (acc-*) ─────────────────────────────────────────── */
.acc-section {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 56px 32px 96px;
}
.acc-section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.acc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.acc-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--ink);
}
.acc-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Grid */
.acc-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 28px;
  align-items: start;
}

/* Card base */
.acc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 32px;
  box-shadow: 0 1px 0 rgba(26, 24, 22, 0.02);
}
.acc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.acc-card-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.acc-card-action {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.acc-card-action:hover { color: var(--ink); border-color: var(--ink); }

/* Profile row */
.acc-profile-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 28px;
}
.acc-profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  flex-shrink: 0;
}
.acc-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.acc-profile-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.acc-profile-email {
  font-size: 13px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(46, 122, 40, 0.08);
  padding: 4px 9px;
  border-radius: 999px;
  align-self: flex-start;
}

/* Info rows */
.acc-info-list { display: flex; flex-direction: column; }
.acc-info-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.acc-info-row:first-child { border-top: none; padding-top: 4px; }
.acc-info-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acc-info-icon svg { width: 18px; height: 18px; display: block; }
.acc-info-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.acc-info-label {
  font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.acc-info-value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}
.acc-info-value--mono {
  font-family: var(--font-mono);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

/* Value pills */
.acc-value-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
}
.acc-value-pill--pro {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.acc-value-pill--active::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* CTA row */
.acc-profile-cta {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.acc-btn-pill {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.acc-btn-pill:hover { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }
.acc-btn-pill.is-loading { opacity: 1; cursor: progress; }
/* Stacks the value and its action button into a right-aligned column */
.acc-info-value--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
/* Pause row: the value stacks over three lines, so top-align the row and pull
   the icon back onto the label's line - offset is (line height - icon) / 2. */
.acc-info-row--top { align-items: start; }
.acc-info-row--top .acc-info-icon { margin-top: -7px; }
#acc-end-pause-status {
  margin-top: 12px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  padding: 10px 14px;
}
.acc-btn-pill--primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.acc-btn-pill--primary:hover { background: #000; border-color: #000; color: #fff; }
.acc-btn-pill--danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(177, 74, 40, 0.05);
}

/* Usage card */
.acc-usage-headline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}
.acc-usage-big {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.acc-usage-big small {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  font-weight: 500;
}
.acc-usage-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 6px;
  white-space: nowrap;
}
.acc-usage-hint {
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 0.7;
  white-space: nowrap;
}
.acc-usage-hint::before {
  content: "\00b7";
  margin-right: 6px;
}
.acc-usage-bar {
  position: relative;
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.acc-usage-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink-soft) 100%);
  border-radius: 999px;
  transition: width 0.6s ease;
}
.acc-usage-foot {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
}
.acc-foot-line { font-weight: 400; }
.acc-usage-foot strong { color: var(--ink); font-weight: 700; }
.acc-usage-meta { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--line-soft); }

/* Invoices card */
.acc-invoices { margin-top: 28px; }
.acc-invoices .acc-card-head { border-bottom: none; padding-bottom: 0; }
.acc-invoices-status { margin: 0 0 14px; font-size: 13px; color: var(--danger); }
.acc-invoices-empty { margin: 0; font-size: 14px; color: var(--ink-muted); }
.acc-invoices-loading { display: flex; justify-content: center; padding: 18px 0; }
/* One grid for the whole table, the rows its subgrids, so every column -
   headings included - takes the width of its widest cell. */
.acc-invoice-table {
  display: grid;
  grid-template-columns: 36px auto 1fr auto auto auto auto;
  column-gap: 32px;
}
.acc-invoice-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--ink);
}
.acc-invoice-head { padding: 0 0 10px; border-top: none; }
.acc-invoice-head span {
  font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}
.acc-invoice-date,
.acc-invoice-number,
.acc-invoice-method,
.acc-invoice-amount { white-space: nowrap; }
.acc-invoice-desc { min-width: 0; }
.acc-invoice-amount { text-align: right; }

/* Below tablet width the seven columns no longer fit: each invoice becomes a
   small stacked card - date and amount, then what it was for, then number and
   payment method, then the download button on its own line so a long
   translated label cannot run off the screen. */
@media (max-width: 900px) {
  .acc-invoice-table { display: block; }
  .acc-invoice-head { display: none; }
  .acc-invoice-row { grid-template-columns: auto 1fr auto; gap: 4px 14px; }
  .acc-invoice-row:nth-child(2) { border-top: none; padding-top: 0; }
  .acc-invoice-row .acc-info-icon { grid-row: 1 / span 3; align-self: start; }
  .acc-invoice-date { grid-row: 1; grid-column: 2; }
  .acc-invoice-amount { grid-row: 1; grid-column: 3; }
  .acc-invoice-desc { grid-row: 2; grid-column: 2 / -1; }
  .acc-invoice-number { grid-row: 3; grid-column: 2; }
  .acc-invoice-method { grid-row: 3; grid-column: 3; text-align: right; }
  .acc-invoice-desc, .acc-invoice-number, .acc-invoice-method { font-size: 12.5px; color: var(--ink-muted); }
  .acc-invoice-row .acc-btn-pill { grid-row: 4; grid-column: 2 / -1; justify-self: start; margin-top: 8px; }
}
/* Responsive */
@media (max-width: 1100px) {
  .acc-grid { grid-template-columns: 1fr; }
  .acc-section { padding: 40px 24px 80px; }
  .acc-headline { font-size: 40px; }
}
@media (max-width: 600px) {
  .acc-section { padding: 32px 16px 64px; }
  .acc-headline { font-size: 32px; }
  .acc-card { padding: 20px 18px; border-radius: 18px; }
  .acc-card-head { margin-bottom: 18px; padding-bottom: 14px; }
  .acc-profile-row { gap: 14px; margin-bottom: 22px; }
  .acc-profile-avatar { width: 56px; height: 56px; font-size: 22px; }
  .acc-profile-name { font-size: 17px; }
  .acc-profile-email { font-size: 12px; }
  .acc-info-row { grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 0; }
  .acc-info-icon { width: 32px; height: 32px; border-radius: 9px; }
  .acc-info-icon svg { width: 16px; height: 16px; }
  .acc-info-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .acc-info-value { text-align: left; font-size: 13.5px; word-break: break-word; }
  .acc-info-value--stack { align-items: flex-start; }
  .acc-info-row--top .acc-info-icon { margin-top: -6px; }
  .acc-info-value--mono { max-width: 100%; white-space: normal; overflow: visible; word-break: break-all; }
  .acc-usage-big { font-size: 40px; }
  .acc-usage-headline { gap: 10px; }
  .acc-usage-cap { font-size: 10px; letter-spacing: 0.06em; }
  .acc-profile-cta { flex-wrap: wrap; gap: 6px; }
  .acc-btn-pill { padding: 8px 12px; font-size: 12px; }
}
@media (max-width: 380px) {
  .acc-section { padding: 24px 12px 56px; }
  .acc-card { padding: 16px 14px; }
  .acc-headline { font-size: 28px; }
}

/* ─── Topic word cloud (account) ──────────────────────────────────── */
.acc-topics {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.acc-topics-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.acc-topics-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.acc-topics-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-align: right;
  line-height: 1.4;
}
.acc-topics-meta-count { color: var(--ink); font-weight: 600; }

.acc-cloud-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 480px;
  min-height: 260px;
  box-sizing: border-box;
  padding: 24px;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(46, 122, 40, 0.06), transparent 75%),
    radial-gradient(circle at 12% 18%, rgba(44, 108, 219, 0.06), transparent 50%),
    radial-gradient(circle at 88% 82%, rgba(217, 119, 87, 0.05), transparent 50%),
    var(--surface-2);
}
.acc-cloud-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(26, 24, 22, 0.07) 1px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}
.acc-cloud {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--ink);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.acc-cloud.is-revealed {
  opacity: 1;
}
.acc-cloud-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.acc-cloud-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  display: none;
}
.acc-cloud-loading * {
  pointer-events: none;
}
.acc-cloud-loading-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.acc-cloud-loading-dots {
  display: inline-flex;
  gap: 6px;
}
.acc-cloud-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--citation);
  opacity: 0.4;
  animation: acc-cloud-loading-dot 1.2s ease-in-out infinite;
}
.acc-cloud-loading-dots span:nth-child(2) { animation-delay: 0.18s; }
.acc-cloud-loading-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes acc-cloud-loading-dot {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}
.acc-cloud-word {
  color: inherit;
  opacity: var(--w-op, 0.85);
  line-height: 1;
  letter-spacing: -0.01em;
  border-radius: 4px;
  padding: 0 2px;
  transition: color 0.2s ease, opacity 0.25s ease, background 0.2s ease;
}
.acc-cloud-word:hover { color: var(--citation); opacity: 1; }
.acc-cloud.has-focus .acc-cloud-word.is-dim {
  opacity: 0.6;
  color: var(--ink-muted);
}
.acc-cloud.has-pinned .acc-cloud-word.is-dim {
  opacity: 0.35;
}
.acc-cloud.has-pinned .acc-cloud-word:not(.is-active):hover {
  color: var(--ink-muted);
  background: none;
}
.acc-cloud-word.is-active {
  color: var(--citation);
  opacity: 1;
  background: rgba(44, 108, 219, 0.10);
}

.acc-cloud-readout {
  flex-basis: 100%;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-2);
  height: 48px;
  box-sizing: border-box;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.acc-cloud-readout.is-on {
  background: var(--surface);
  border-color: var(--line);
}
.acc-cloud-frame.has-pinned + .acc-cloud-readout { padding-right: 100px; }
.acc-readout-hint {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.acc-readout-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.acc-readout-text[hidden] { display: none; }
.acc-readout-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.acc-readout-text strong::after {
  content: "·";
  display: inline-block;
  margin-left: 8px;
  color: var(--ink-muted);
  font-weight: 400;
}
.acc-readout-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.acc-readout-link {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.acc-readout-link[hidden] { display: none; }
.acc-readout-link:hover { background: #000; border-color: #000; color: #fff; }
.acc-readout-link svg { color: #fff; }

[data-bs-theme="dark"] .acc-cloud-word { color: var(--ink); }
[data-bs-theme="dark"] .acc-cloud-readout { background: rgba(255,255,255,0.04); }
[data-bs-theme="dark"] .acc-cloud-readout.is-on { background: var(--surface); }

/* ─── Churn / Subscription flow (cf-*) ─────────────────────────────── */
:root {
  --cf-hot: #D2552B;
  --cf-hot-soft: #FBE7DD;
  --cf-hot-deep: #A33A14;
  --cf-good: #2E7A28;
  --cf-good-soft: rgba(46, 122, 40, 0.12);
}

.cf-stage {
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 60px;
}

/* Progress dots */
.cf-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cf-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(26, 24, 22, 0.15);
  transition: background 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.cf-dot--on { background: var(--ink); transform: scale(1.15); }
.cf-dot--warn { background: var(--cf-hot) !important; }
.cf-progress-label { margin-left: 4px; }

/* Card */
.cf-card {
  position: relative;
  width: 520px;
  max-width: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 22px;
  padding: 40px 36px 32px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 30px 60px -24px rgba(70, 40, 20, 0.22),
    0 6px 18px -6px rgba(70, 40, 20, 0.10);
}

/* State panes */
.cf-state {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cf-state--hidden { display: none !important; }
.cf-state--rise {
  animation: cf-rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes cf-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow */
.cf-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  width: 100%;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cf-eyebrow--hot { background: var(--cf-hot-soft); color: var(--cf-hot-deep); }
.cf-eyebrow--good { background: var(--cf-good-soft); color: var(--cf-good); }
.cf-eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Headline */
.cf-headline {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 14px 0 10px;
  color: var(--ink);
}
.cf-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--cf-hot);
}

.cf-subhead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.cf-subhead strong { color: var(--ink); font-weight: 600; }

/* Plan card */
.cf-plan {
  margin: 18px 0;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cf-plan-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
}
.cf-plan-info { flex: 1; min-width: 0; }
.cf-plan-name { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.cf-plan-meta { font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); letter-spacing: 0.04em; margin-top: 2px; }

/* Actions stack */
.cf-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 10px; }

/* Buttons */
.cf-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  border-radius: 12px;
  padding: 14px 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  line-height: 1;
}
.cf-btn--primary { background: var(--ink); color: #fff; }
.cf-btn--primary:hover { background: #000; transform: translateY(-1px); color: #fff; }
.cf-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Loading state: keep full color so the wave dots stay visible (overrides the
   disabled opacity wash) and size is locked inline by JS */
.cf-btn.is-loading { opacity: 1; cursor: progress; }
.cf-btn--ghost { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line); }
.cf-btn--ghost:hover { color: var(--ink); border-color: rgba(26,24,22,0.25); background: var(--surface-2); }
.cf-btn--danger { background: transparent; color: var(--danger); border: 1.5px solid rgba(178,58,31,0.25); }
.cf-btn--danger:hover { background: rgba(178,58,31,0.06); border-color: var(--danger); }
.cf-btn--link { background: transparent; color: var(--ink-muted); font-weight: 500; font-size: 13px; padding: 8px; border-radius: 8px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(26,24,22,0.18); border: 0; }
.cf-btn--link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Reasons grid */
.cf-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 18px; }
.cf-reason {
  font: inherit;
  text-align: left;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.25;
}
.cf-reason:hover { border-color: var(--line); }
.cf-reason--on { border-color: var(--ink); background: var(--surface); color: var(--ink); font-weight: 600; }

/* Pause steps - dark Pro-card treatment, reusing the pricing card internals
   (.pc-slider-block / .pc-stepper / .pc-features) which are already dark by
   default; only the card shell and the cf-* typography need overriding. */
.cf-card--dark {
  background: #1A1816;
  color: #FAF8F4;
}
/* On the dark card the eyebrow is plain text (like .pc-card-tag), not a pill -
   the default .cf-eyebrow pill background is light and would swallow the text. */
.cf-card--dark .cf-eyebrow--onDark {
  background: transparent;
  color: rgba(250,248,244,0.65);
  width: auto;
  padding: 0;
  justify-content: flex-start;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.cf-card--dark .cf-state--center .cf-eyebrow--onDark { justify-content: center; }
/* Text link on the dark card - the default uses --ink-muted and would vanish */
.cf-card--dark .cf-btn--link-onDark {
  color: rgba(250,248,244,0.62);
  text-decoration-color: rgba(250,248,244,0.28);
}
.cf-card--dark .cf-btn--link-onDark:hover {
  color: #FAF8F4;
  text-decoration-color: #FAF8F4;
}
.cf-card--dark .cf-headline--onDark { color: #FAF8F4; }
.cf-card--dark .cf-headline--onDark em { color: #B8DDA8; }
.cf-card--dark .cf-subhead--onDark { color: rgba(250,248,244,0.72); }
.cf-card--dark .cf-subhead--onDark strong { color: #FAF8F4; }
.cf-card--dark .cf-subhead--bright,
.cf-card--dark .cf-subhead--bright strong { color: #FAF8F4; }
.cf-subhead--narrow { max-width: 40ch; margin-left: auto; margin-right: auto; }
.cf-card--dark .pc-features li { color: rgba(250,248,244,0.88); }
.cf-card--dark .pc-check { background: rgba(184,221,168,0.18); color: #B8DDA8; }
.cf-card--dark .pc-cta { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.cf-card--dark .pc-cta:hover { background: #fff; box-shadow: 0 8px 22px rgba(184,221,168,0.22); }
.cf-cta-arrow, .pc-arrow { transition: transform 160ms ease; }
.cf-card--dark .pc-cta:hover .pc-arrow { transform: translateX(3px); }
/* Secondary action on the dark card */
.pc-cta--ghost {
  margin-top: 0;
  background: transparent;
  color: rgba(250,248,244,0.85);
  border-color: rgba(250,248,244,0.28);
}
.pc-cta--ghost:hover { background: rgba(250,248,244,0.08); color: #FAF8F4; box-shadow: none; }
.cf-card--dark .pc-cta--ghost { background: transparent; color: rgba(250,248,244,0.85); border-color: rgba(250,248,244,0.28); }
.cf-card--dark .pc-cta--ghost:hover { background: rgba(250,248,244,0.08); color: #FAF8F4; box-shadow: none; }
/* Stack the two CTAs instead of pinning the first to the bottom */
.cf-actions--dark { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.cf-actions--dark .pc-cta { margin-top: 0; }

/* Paused confirmation */
.cf-state--center { text-align: center; align-items: center; }
.cf-state--center .cf-eyebrow { justify-content: center; }
.cf-paused-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(184,221,168,0.18);
  color: #B8DDA8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 22px;
}
.cf-paused-panel { text-align: left; width: 100%; }
.cf-paused-date {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: #FAF8F4;
  text-align: center;
}


/* Offer panel */
.cf-offer {
  position: relative;
  margin: 8px 0 22px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--cf-hot-soft) 0%, #F8DEC9 100%);
  border: 1.5px dashed rgba(210, 85, 43, 0.4);
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
}
.cf-offer--final {
  background: linear-gradient(135deg, #FDE5C6 0%, #FBD3A8 100%);
  border-color: rgba(184, 99, 23, 0.45);
}
.cf-offer-pct {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 72px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--cf-hot-deep);
  font-style: italic;
}
.cf-offer-pct sup {
  font-size: 24px;
  vertical-align: top;
  margin-left: 2px;
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
}
.cf-offer-body { display: flex; flex-direction: column; gap: 4px; }
.cf-offer-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cf-hot-deep);
}
.cf-offer-title { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; line-height: 1.2; }
.cf-offer-price { margin-top: 2px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }

/* Benefits checklist */
.cf-benefits { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cf-benefits li { font-size: 14px; color: var(--ink-soft); line-height: 1.45; display: flex; align-items: flex-start; gap: 10px; }
.cf-benefits li svg { flex-shrink: 0; color: var(--cf-good); margin-top: 1px; }
.cf-benefits li strong { color: var(--ink); font-weight: 600; }

/* Responsive */
@media (max-width: 580px) {
  .cf-card { padding: 28px 20px 24px; }
  .cf-headline { font-size: 26px; }
  .cf-offer-pct { font-size: 56px; }
  .cf-offer { gap: 14px; padding: 16px 18px; }
  .cf-reasons { grid-template-columns: 1fr; }
  .cf-paused-date { font-size: 22px; }
}

/* ============================================
   Login page  (lg-*)
   ============================================ */

.lg-hidden { display: none !important; }

.lg-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.lg-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 0% 30%, rgba(44, 108, 219, 0.06), transparent 70%),
    radial-gradient(ellipse 500px 400px at 100% 80%, rgba(217, 132, 74, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Form side */
.lg-form-side {
  position: relative;
  z-index: 2;
  padding: 56px 56px 48px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.lg-form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
}

/* Eyebrow */
.lg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-2);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  margin-bottom: 22px;
}

/* Headline */
.lg-headline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--ink);
}
.lg-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Subhead */
.lg-subhead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

/* Alert area */
.lg-alerts { margin-bottom: 16px; }
.lg-alerts:empty { display: none; }
.lg-alerts .alert {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  padding: 11px 38px 11px 14px;
  border-radius: 12px;
  margin: 0 0 10px;
  gap: 10px;
  position: relative;
  box-shadow: 0 1px 0 rgba(20, 18, 16, 0.02);
}
.lg-alerts .alert .bi { width: 18px !important; height: 18px !important; flex-shrink: 0; margin-right: 0 !important; }
.lg-alerts .alert > div { flex: 1; min-width: 0; }
.lg-alerts .alert .btn-close {
  position: absolute; top: 10px; right: 10px;
  width: 18px; height: 18px;
  padding: 0; opacity: 0.55;
  background-size: 10px 10px;
}
.lg-alerts .alert .btn-close:hover { opacity: 1; }
.lg-alerts .alert-danger {
  color: #8E2E26;
  background: rgba(217, 119, 87, 0.10);
  border: 1px solid rgba(177, 74, 40, 0.25);
}
.lg-alerts .alert-danger .bi { color: #B5453A; }
.lg-alerts .alert-success {
  color: #1F5A2A;
  background: rgba(46, 122, 40, 0.10);
  border: 1px solid rgba(46, 122, 40, 0.25);
}
.lg-alerts .alert-success .bi { color: var(--accent); }
[data-bs-theme="dark"] .lg-alerts .alert-danger {
  color: #F4B6A8;
  background: rgba(217, 119, 87, 0.16);
  border-color: rgba(217, 119, 87, 0.30);
}
[data-bs-theme="dark"] .lg-alerts .alert-success {
  color: #B7DBB1;
  background: rgba(46, 122, 40, 0.16);
  border-color: rgba(46, 122, 40, 0.30);
}

/* Options */
.lg-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lg-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  width: 100%;
}
.lg-option:hover {
  transform: translateY(-1px);
  border-color: var(--ink);
  box-shadow: 0 12px 28px rgba(26, 24, 22, 0.08);
  color: var(--ink);
  text-decoration: none;
}
.lg-option:focus-visible {
  outline: 2px solid var(--citation);
  outline-offset: 2px;
}
.lg-option.active {
  border-color: var(--ink);
  box-shadow: 0 16px 36px rgba(26, 24, 22, 0.10);
}

.lg-option .lg-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.lg-option:hover .lg-ico { background: var(--ink); border-color: var(--ink); color: #fff; }

.lg-option .lg-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.lg-option .lg-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.lg-option .lg-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.lg-option .lg-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
  flex-shrink: 0;
}
.lg-option:hover .lg-arrow { background: var(--citation); color: #fff; transform: translateX(3px) rotate(-3deg); }

/* Last-used badge */
.lg-last-used {
  position: absolute;
  top: -10px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 6px 14px rgba(26, 24, 22, 0.18);
  z-index: 3;
}

/* Email form (expanded) */
.lg-email-form {
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  animation: lgSlideDown 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-origin: top center;
}
.lg-email-form.lg-hidden { display: none; }
@keyframes lgSlideDown {
  from { opacity: 0; transform: translateY(-8px) scaleY(0.96); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

.lg-field-grp {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lg-field-grp label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lg-field-grp label a {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--citation);
  text-decoration: none;
}
.lg-field-grp label a:hover { text-decoration: underline; }
.lg-field-grp label .lg-optional {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 6px;
}

.lg-field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lg-field:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(26, 24, 22, 0.06);
}
.lg-field .lg-input-icon {
  width: 40px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.lg-field input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 0 14px 0 0;
  height: 44px;
  outline: none;
  letter-spacing: -0.005em;
}
.lg-field input::placeholder { color: var(--ink-muted); }
.lg-toggle-pw {
  margin-right: 6px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}
.lg-toggle-pw:hover { background: var(--surface-2); color: var(--ink); }

.lg-submit {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 12px 12px 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
  box-shadow: 0 12px 28px rgba(26, 24, 22, 0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.lg-submit .lg-arrow-chip {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--citation);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.lg-submit:hover {
  transform: translateY(-2px);
  background: #000;
  box-shadow: 0 18px 36px rgba(26, 24, 22, 0.24), inset 0 1px 0 rgba(255,255,255,0.10);
}
.lg-submit:hover .lg-arrow-chip { transform: translateX(3px) rotate(-3deg); }

.lg-alt-actions {
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lg-alt-actions a { color: var(--citation); text-decoration: none; }
.lg-alt-actions a:hover { text-decoration: underline; }

/* Footer */
.lg-foot {
  margin-top: 32px;
  font-size: 14px;
  color: var(--ink-soft);
}
.lg-foot a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.lg-foot a:hover { color: var(--citation); border-color: var(--citation); }

.lg-fine {
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  gap: 18px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.lg-fine a { color: inherit; text-decoration: none; }
.lg-fine a:hover { color: var(--ink); }

/* Visual side */
.lg-visual-side {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(ellipse 700px 500px at 30% 15%, rgba(44, 108, 219, 0.10), transparent 65%),
    radial-gradient(ellipse 600px 400px at 75% 90%, rgba(31, 138, 74, 0.08), transparent 65%),
    var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 56px;
  overflow: hidden;
  border-left: 1px solid var(--line);
}
body.login-page .lg-hero-stack { margin-top: 80px; }
.lg-visual-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(26, 24, 22, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 24, 22, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 78%);
  pointer-events: none;
}
.lg-visual-side::after {
  display: none;
}

.lg-hero-stack {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Quote card */
.lg-quote-card {
  position: relative;
  margin: 0;
  padding: 36px 32px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(26, 24, 22, 0.08);
}
.lg-quote-card blockquote::before,
.lg-quote-card blockquote::after {
  font-family: var(--font-serif);
  font-style: normal;
  color: var(--citation);
  font-size: 2.2em;
  line-height: 0;
  vertical-align: -0.45em;
  user-select: none;
  pointer-events: none;
}
.lg-quote-card blockquote::before {
  content: '\201C';
  margin-right: 0.05em;
  vertical-align: -0.38em;
}
.lg-quote-card blockquote::after {
  content: '\201D';
  margin-left: 0.05em;
}
.lg-quote-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.lg-quote-card blockquote {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.lg-quote-card blockquote em {
  font-style: italic;
  background: linear-gradient(to bottom, transparent 60%, rgba(44, 108, 219, 0.18) 60%);
  padding: 0 2px;
}
.lg-quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.lg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lg-who { display: flex; flex-direction: column; gap: 2px; }
.lg-who-name { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.lg-who-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-muted); }

/* Testimonial carousel: the card frame (::before) stays put, only the content swaps.
   All cards share one grid cell so the height stays fixed. */
.lg-quote-carousel { display: grid; }
.lg-quote-carousel::before {
  content: '';
  grid-area: 2 / 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(26, 24, 22, 0.08);
}
.lg-quote-carousel .lg-quote-card {
  grid-area: 2 / 1;
  background: none;
  border-color: transparent;
  box-shadow: none;
  visibility: hidden;
  transition: visibility 0s 0.7s;
}
.lg-quote-carousel .lg-quote-card.is-active { visibility: visible; transition: none; z-index: 1; }
.lg-quote-carousel .lg-quote-card > * {
  opacity: 0;
  /* content slides in from the side being navigated to and leaves the other way */
  transform: translateX(calc(var(--dir, 1) * 22px));
  filter: blur(4px);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}
.lg-quote-carousel .lg-quote-card.is-leaving > * { transform: translateX(calc(var(--dir, 1) * -16px)); transition-duration: 0.3s; }
.lg-quote-carousel .lg-quote-card.is-active > * { opacity: 1; transform: none; filter: none; }
/* the small tag just cross-fades in place (no move, no blur), so identical tags look static */
.lg-quote-carousel .lg-quote-card > .lg-quote-tag,
.lg-quote-carousel .lg-quote-card.is-leaving > .lg-quote-tag {
  transform: none;
  filter: none;
  transition: opacity 0.7s ease;
}
/* incoming content slides in one row after another, once the old text has left */
.lg-quote-carousel .lg-quote-card.is-active > blockquote { transition-delay: 0.26s; }
.lg-quote-carousel .lg-quote-card.is-active > figcaption { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .lg-quote-carousel .lg-quote-card > * { transform: none !important; filter: none !important; }
}
/* pin the author row to the bottom, whatever the quote length */
.lg-quote-carousel .lg-quote-card { display: flex; flex-direction: column; }
.lg-quote-carousel .lg-quote-tag {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font-size: 9px;
  color: var(--ink-muted);
}
.lg-quote-carousel blockquote { margin-bottom: 22px; }
.lg-quote-carousel figcaption { margin-top: auto; }
.lg-quote-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  grid-row: 1;
  margin-bottom: 14px;
}
.lg-quote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.lg-quote-btn:hover { color: var(--ink); border-color: var(--ink-muted); }
.lg-quote-count {
  min-width: 52px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Stat row */
.lg-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(26, 24, 22, 0.04);
}
.lg-stat {
  background: var(--surface);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lg-stat-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.lg-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Logo wall */
.lg-logo-wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.lg-logo-wall-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lg-logos {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.lg-logos span { white-space: nowrap; }


/* Divider (signup) */
.lg-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lg-divider::before,
.lg-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Password strength (signup) */
.lg-pw-strength,
.lg-pw-mismatch,
.lg-pw-match {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lg-pw-strength.s-1 { color: #B85C2A; }
.lg-pw-strength.s-2 { color: #B58A1F; }
.lg-pw-strength.s-3 { color: #5B7A1F; }
.lg-pw-strength.s-4,
.lg-pw-strength.s-5 { color: #1F6B3A; }
.lg-pw-mismatch { color: #B5301F; }
.lg-pw-match { color: #1F6B3A; }

.lg-pw-bar {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.lg-pw-bar span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.18s ease;
}
.lg-pw-bar.s-1 span:nth-child(-n+1) { background: #B85C2A; }
.lg-pw-bar.s-2 span:nth-child(-n+2) { background: #B58A1F; }
.lg-pw-bar.s-3 span:nth-child(-n+3) { background: #5B7A1F; }
.lg-pw-bar.s-4 span:nth-child(-n+4) { background: #1F6B3A; }
.lg-pw-bar.s-5 span:nth-child(-n+5) { background: #1F6B3A; }

/* Field-level validation errors */
.lg-field-error {
  font-size: 12px;
  color: #B5301F;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 960px) {
  .lg-page { grid-template-columns: 1fr; }
  .lg-visual-side { display: none; }
  .lg-form-side { padding: 32px 24px; min-height: 0; }
  .lg-headline { font-size: 44px; }
  .lg-form-wrap { max-width: 100%; }
  .lg-fine { max-width: 100%; }
}

/* Auth pages: hide the dark site footer so the full-viewport auth layout
   isn't cut by a dark band beneath the form/visual columns. */
body.login-page .site-footer,
body.signup-page .site-footer,
body.rp-page .site-footer,
body.np-page .site-footer {
  display: none;
}

/* Auth pages: kill the dot grid + colour blooms and float the navbar over
   .lg-page so the form / visual columns extend to the top of the viewport
   (no mismatched strip around the navbar). */
body.login-page::before,
body.signup-page::before,
body.rp-page::before,
body.np-page::before,
body.login-page::after,
body.signup-page::after,
body.rp-page::after,
body.np-page::after {
  display: none;
}
body.login-page nav,
body.signup-page nav,
body.rp-page nav,
body.np-page nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
body.login-page main,
body.signup-page main,
body.rp-page main,
body.np-page main {
  margin-top: 0;
}
body.login-page .lg-form-side,
body.signup-page .lg-form-side,
body.rp-page .lg-form-side,
body.np-page .lg-form-side,
body.login-page .lg-visual-side,
body.signup-page .lg-visual-side,
body.rp-page .lg-visual-side,
body.np-page .lg-visual-side {
  padding-top: 100px;
}

/* ===========================
   Pill buttons (chat, interview, interview invite popup)
   =========================== */
.pill-btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.pill-btn.primary {
  background: var(--c-ink, #141210);
  color: #fff;
  border: 1px solid var(--c-ink, #141210);
  box-shadow: 0 8px 18px rgba(20, 18, 16, 0.12);
}
.pill-btn.primary:hover { background: #000; box-shadow: 0 12px 24px rgba(20, 18, 16, 0.18); color: #fff; }
.pill-btn:not(.primary) {
  background: var(--c-surface, #fff);
  color: var(--c-ink, #141210);
  border: 1px solid var(--c-line, #E7E1D6);
}
.pill-btn:not(.primary):hover { background: var(--c-surface-2, #F4F1EB); border-color: var(--c-ink, #141210); }
.pill-btn:active { transform: translateY(1px); }
.pill-btn:disabled { opacity: 0.55; cursor: default; }

/* Landing scroll reveal: components/index/scripts.html adds .revealed when an element enters the viewport */
.landing-page .scroll-reveal,
.landing-page .scroll-reveal-scale {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.landing-page .scroll-reveal { transform: translateY(40px); }
.landing-page .scroll-reveal-scale { transform: scale(0.94); }
.landing-page .scroll-reveal.revealed,
.landing-page .scroll-reveal-scale.revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .scroll-reveal,
  .landing-page .scroll-reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}