/* Merged for a single render-blocking request instead of two sequential ones.
   Source order preserved: landing.css rules first, guides.css second. */

/* ============================================================
   Verity — Public landing page (logged-out)
   Design tokens mirror frontend/app.html exactly so the theme
   (dark default / light via .light class, same --accent values)
   stays visually consistent when a visitor moves from here into
   the signed-in app. Key used in localStorage: 'verity-theme'.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #080A0E;
  --bg2: #0D1017;
  --surface: #111418;
  --surface2: #181C23;
  --surface3: #1E2330;
  --border: #232A38;
  --border2: #2D3748;
  --accent: #4ADE80;
  --accent-dim: rgba(74,222,128,0.10);
  --accent-glow: rgba(74,222,128,0.20);
  --blue: #60A5FA;
  --blue-dim: rgba(96,165,250,0.10);
  --amber: #FBBF24;
  --amber-dim: rgba(251,191,36,0.10);
  --red: #A78BFA;
  --red-dim: rgba(167,139,250,0.12);
  --text: #FFFFFF;
  --text2: #C8D6EE;
  --text3: #8892A6;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --radius: 10px;
  --radius-lg: 16px;
  --maxw: 1180px;
  /* Fixed (non-theme-swapped) dark blue used for card hover states, so the
     "action" reads the same rich navy in both light and dark mode. */
  --hover-blue: #1D4ED8;
  --hover-blue-ring: rgba(29,78,216,0.45);
  --hover-blue-glow: rgba(29,78,216,0.22);
  /* "3D card" depth — a resting elevation shadow + top inset highlight,
     tuned separately per theme since drop-shadows read very differently
     against a near-black background vs. a white one. */
  --depth-shadow: 0 2px 4px rgba(0,0,0,.5), 0 14px 28px rgba(0,0,0,.35), 0 32px 60px rgba(0,0,0,.28);
  --depth-highlight: inset 0 1px 0 rgba(255,255,255,.05);
  --depth-shadow-hover: 0 4px 10px rgba(0,0,0,.55), 0 26px 50px rgba(0,0,0,.4);

  /* ── Type scale — ported directly from the approved Adobe-style preview
     (rankanalyze_landing_v2_preview.html), so every size below is the exact
     value that preview used, named as a token instead of repeated as a
     one-off number. One place to change each size going forward — no more
     inventing new numbers per element. Hero h1 is the single exception,
     kept at this site's current size per request; everything else matches
     the preview. (Purely decorative/functional glyphs — icon buttons, the
     price amount, step numerals — stay hardcoded; they're not part of the
     reading-text hierarchy.) ── */
  --fs-h1: clamp(2.6rem, 5.4vw, 4.2rem);       /* hero — kept as-is */
  --fs-h2: clamp(2.1rem, 3.8vw, 3rem);          /* section-head h2 */
  --fs-h2-band: clamp(1.8rem, 3.2vw, 2.4rem);   /* cta-band h2 */
  --fs-h3-lg: 1.55rem;                          /* showcase-text h3 */
  --fs-h3: 1.2rem;                              /* front-card h3 */
  --fs-h4: 1.15rem;                             /* step-card h3 */
  --fs-h4-sm: 1.05rem;                          /* why-list h4 */
  --fs-h4-xs: 0.98rem;                          /* audit-card h4 */
  --fs-h4-xxs: 0.95rem;                         /* price-card h3 */
  --fs-lead: 1.15rem;                           /* hero lead paragraph */
  --fs-body-lg: 1.1rem;                         /* section-head p */
  --fs-body: 0.98rem;                           /* showcase-text p */
  --fs-body-std: 0.92rem;                       /* front-card li, step-card p, why-list p, faq copy, buttons */
  --fs-body-sm: 0.9rem;                         /* nav links, showcase-list li, demo title */
  --fs-caption-lg: 0.88rem;                     /* footer links */
  --fs-caption: 0.86rem;                        /* footer-brand p, showcase-more, audit-card p */
  --fs-caption-sm: 0.82rem;                     /* eyebrow, demo-label, pricing-note, cta tagline, price-card li */
  --fs-caption-xs: 0.8rem;                      /* demo-serp desc, footer-bottom */
  --fs-caption-2xs: 0.78rem;                    /* demo-serp-q, showcase-tag, price-card desc */
  --fs-micro: 0.76rem;                          /* footer-col h5, demo-panel-bar, demo-serp src */
  --fs-nano: 0.72rem;                           /* front-card-tag, pill, showcase-num */
  --fs-nano-sm: 0.7rem;                         /* price-tag */
  --fs-btn-lg: 1rem;                            /* btn-lg, faq-q */
}

html.light {
  --bg:       #F1F5FB;
  --bg2:      #FFFFFF;
  --surface:  #FFFFFF;
  --surface2: #F1F5F9;
  --surface3: #E2E8F0;
  --border:  #D3DEF0;
  --border2: #B9CBE8;
  --accent:      #2563EB;
  --accent-dim:  #EFF6FF;
  --accent-glow: #BFDBFE;
  --blue:       #2563EB;
  --blue-dim:   #EFF6FF;
  --amber:      #D97706;
  --amber-dim:  #FFFBEB;
  --red:        #DC2626;
  --red-dim:    #FEF2F2;
  --text:  #0F172A;
  --text2: #475569;
  --text3: #475569;
  --depth-shadow: 0 2px 4px rgba(15,23,42,.05), 0 14px 28px rgba(15,23,42,.07), 0 32px 60px rgba(15,23,42,.05);
  --depth-highlight: inset 0 1px 0 rgba(255,255,255,.9);
  --depth-shadow-hover: 0 4px 10px rgba(15,23,42,.08), 0 26px 50px rgba(15,23,42,.1);
}

/* One place to flatten every 3D tilt for people who don't want motion —
   keeps the depth shadow (harmless, static) but drops perspective/rotate. */
@media (prefers-reduced-motion: reduce) {
  .front-card, .audit-card, .step-card, .price-card, .guide-card, .demo-panel {
    transform: none !important;
  }
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.012em; line-height: 1.12; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-caption-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text3);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ── Top nav ── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 32px;
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 7px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: var(--fs-body-sm); color: var(--text2); transition: color .15s; position: relative; }
.nav-links a:hover { color: var(--text); }
/* Scrollspy — active section's nav link highlighted (see the small script
   at the bottom of landing.html). */
.nav-links a.active { color: var(--text); font-weight: 700; }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px;
  background: var(--accent); border-radius: 2px;
}

.nav-actions { display: flex; align-items: center; gap: 10px; }
#nav-auth-buttons { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px;
  border-radius: 8px; font-size: var(--fs-body-std); font-weight: 600;
  border: 1px solid transparent;
  transition: opacity .15s, background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #06210F; }
html.light .btn-primary { color: #FFFFFF; }
.btn-primary:hover { opacity: .88; }
.btn-ghost { background: transparent; color: var(--text2); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--border2); }
.btn-dark { background: var(--text); color: var(--bg); }
html.light .btn-dark { background: #0F172A; color: #fff; }
.btn-dark:hover { opacity: .9; }
.btn-lg { height: 46px; padding: 0 24px; font-size: var(--fs-btn-lg); }

.theme-toggle {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--surface3); color: var(--text); }

.nav-burger { display: none; }

/* ── Hero ── */
.hero { padding: 96px 0 64px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -120px; right: -160px; width: 640px; height: 640px;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  pointer-events: none; opacity: .5;
}
/* NOTE: hero-inner is intentionally full-width (matches .wrap, same as every
   section below it) so the demo panel's edges line up with the card grids
   in the sections underneath. Only the text (h1/lead) is capped narrower. */
.hero-inner { position: relative; }
.hero h1 { font-size: var(--fs-h1); margin: 22px 0 20px; max-width: 880px; }
.hero h1 .muted { color: var(--text3); }
.hero h1 .accent { color: var(--accent); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.hero p.lead { font-size: var(--fs-lead); color: var(--text2); max-width: 620px; margin-bottom: 32px; }
.hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.hero-note { margin-top: 14px; font-size: 0.85rem; color: var(--text3); }

/* ── Live demo panel — floats as a tilted 3D screen, like the product
   screenshot is propped up in space rather than lying flat on the page. ── */
/* NOTE: deliberately NOT perspective-tilted like the cards — this panel
   holds real screenshots with straight lines (input boxes, table borders),
   and a rotateX/rotateY skew makes those visibly non-rectangular/crooked.
   Depth comes from the shadow alone, panel stays flat and square. */
.demo-panel {
  margin-top: 72px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--depth-highlight), 0 2px 4px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.35), 0 60px 100px rgba(0,0,0,.22);
  overflow: hidden;
  position: relative;
  transition: box-shadow .3s ease, transform .3s ease;
}
.demo-panel:hover { transform: translateY(-4px); }
.demo-panel-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--text3); letter-spacing: .06em; text-transform: uppercase;
}
.demo-panel-live { color: var(--accent); font-weight: 600; }
.demo-grid { display: grid; grid-template-columns: 1fr 1px 1fr; position: relative; min-height: 300px; }
.demo-col { padding: 26px 30px; }
.demo-divider { background: var(--border); }
.demo-label { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-caption-sm); color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.demo-label .avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--surface3); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.demo-serp-q { font-family: var(--mono); font-size: var(--fs-caption-2xs); background: var(--surface2); border-radius: 8px; padding: 8px 12px; margin-bottom: 18px; color: var(--text2); }
.demo-serp-item { margin-bottom: 16px; }
.demo-serp-item .src { font-size: var(--fs-micro); color: var(--text3); margin-bottom: 2px; }
.demo-serp-item .title { font-size: var(--fs-body-sm); color: var(--blue); text-decoration: underline; margin-bottom: 4px; }
.demo-serp-item .desc { font-size: var(--fs-caption-xs); color: var(--text3); line-height: 1.5; }
/* Real product screenshot column (right side) — shown whole, not cropped.
   Height is `auto`, so the image keeps its own aspect ratio at 100% of the
   column's width instead of being forced into a box (which either crops
   content via object-fit:cover, or silently no-ops if the box height is a
   percentage of an indeterminate grid row — both tried and rejected here). */
.demo-col-shot { padding: 0; overflow: hidden; background: #fff; align-self: stretch; }
.demo-shot { display: block; width: 100%; height: auto; }

/* the scanning line — a thin bright core (::after) inside a soft wide wash,
   sweeps edge-to-edge of .demo-grid using `left` (percentage = container
   width, so it travels the *panel's* full width, not a fixed pixel amount).
   Linear timing = constant speed, no easing pause in the middle. */
.scan-line {
  position: absolute; top: 0; left: -60px; height: 100%; width: 60px;
  background: linear-gradient(90deg, transparent, var(--blue-dim) 60%, transparent);
  pointer-events: none;
  animation: scan-sweep-panel 3.6s linear infinite;
}
.scan-line::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--blue);
  box-shadow: 0 0 8px 1px var(--blue), 0 0 22px 3px var(--blue-dim);
  transform: translateX(-50%);
}
@keyframes scan-sweep-panel {
  0%   { left: -60px; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-line { animation: none; opacity: .3; left: 50%; }
  .scan-line::after { box-shadow: none; }
}

/* ── Section shell ── */
section { padding: 88px 0; border-top: 1px solid var(--border); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head h2 .muted { color: var(--text3); }
.section-head p { margin-top: 16px; font-size: var(--fs-body-lg); color: var(--text2); max-width: 620px; }

/* ── Two fronts ── */
.fronts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.front-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; background: var(--surface);
  box-shadow: var(--depth-highlight), var(--depth-shadow);
  transform-style: preserve-3d;
  transition: border-color .18s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.front-card:hover {
  border-color: var(--hover-blue);
  box-shadow: var(--depth-highlight), var(--depth-shadow-hover), 0 0 0 1px var(--hover-blue-ring), 0 20px 40px var(--hover-blue-glow);
  transform: translateY(-8px);
}
.front-card.ai { background: var(--accent-dim); border-color: var(--accent-glow); }
.front-card.ai:hover { border-color: var(--hover-blue); }
.front-card-tag { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.front-card-tag span:first-child { font-family: var(--mono); font-size: var(--fs-nano); letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.pill { font-size: var(--fs-nano); font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); }
.front-card h3 { font-size: var(--fs-h3); margin-bottom: 18px; }
.front-card ul li { display: flex; gap: 10px; font-size: var(--fs-body-std); color: var(--text2); margin-bottom: 12px; line-height: 1.5; }
.front-card ul li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.front-card .caveat { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); font-size: var(--fs-caption-2xs); color: var(--text3); }

/* ── Audits grid ── */
.audits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.audit-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; background: var(--surface);
  box-shadow: var(--depth-highlight), var(--depth-shadow);
  transform-style: preserve-3d;
  transition: border-color .18s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.audit-card:hover {
  border-color: var(--hover-blue);
  box-shadow: var(--depth-highlight), var(--depth-shadow-hover), 0 0 0 1px var(--hover-blue-ring), 0 20px 40px var(--hover-blue-glow);
  transform: translateY(-8px);
}
.audit-card:hover .audit-card-icon { background: var(--hover-blue); color: #fff; }
.audit-card-icon { width: 38px; height: 38px; border-radius: 9px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.12); transition: background .18s ease, color .18s ease, transform .3s ease; }
.audit-card h4 { font-size: var(--fs-h4-xs); margin-bottom: 8px; }
.audit-card p { font-size: var(--fs-caption); color: var(--text3); line-height: 1.55; }

/* ── Feature showcase — real product screenshots, alternating sides.
   Added alongside .audits-grid (kept for Asset Audit / Rank Tracker, which
   don't have screenshots yet) rather than replacing it outright. Reuses
   the site's existing depth-shadow / hover-blue tokens so it matches the
   rest of the card system instead of introducing a new visual language. */
.showcase { display: flex; flex-direction: column; gap: 104px; }
.showcase-row {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center;
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.showcase-row.in-view { opacity: 1; transform: translateY(0); }
.showcase-row.reverse { grid-template-columns: 1fr 1.15fr; }
.showcase-row.reverse .showcase-shot { order: 2; }
.showcase-row.reverse .showcase-text { order: 1; }
.showcase-shot {
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--depth-highlight), var(--depth-shadow); overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.showcase-shot:hover { transform: translateY(-6px); box-shadow: var(--depth-highlight), var(--depth-shadow-hover); }
.showcase-shot-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.showcase-shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border2); }
.showcase-shot img { display: block; width: 100%; height: auto; background: #fff; }
.showcase-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: var(--fs-caption-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.showcase-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-dim);
  font-size: var(--fs-nano); font-weight: 700;
}
.showcase-text h3 { font-size: var(--fs-h3-lg); margin-bottom: 14px; }
.showcase-text > p { font-size: var(--fs-body); color: var(--text2); line-height: 1.6; margin-bottom: 18px; }
.showcase-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.showcase-list li { display: flex; gap: 10px; font-size: var(--fs-body-sm); color: var(--text2); line-height: 1.5; }
.showcase-list li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.showcase-list li b { color: var(--text); font-weight: 600; }
.showcase-more { margin-top: 14px; font-size: var(--fs-caption); font-weight: 600; color: var(--accent); }

/* ── Steps ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; background: var(--surface);
  box-shadow: var(--depth-highlight), var(--depth-shadow);
  transform-style: preserve-3d;
  transition: border-color .18s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.step-card:hover {
  border-color: var(--hover-blue);
  box-shadow: var(--depth-highlight), var(--depth-shadow-hover), 0 0 0 1px var(--hover-blue-ring), 0 20px 40px var(--hover-blue-glow);
  transform: translateY(-8px);
}
.step-card:hover .step-num { color: var(--hover-blue); }
.step-num { font-family: var(--serif); font-size: 2.2rem; color: var(--border2); margin-bottom: 14px; transition: color .18s ease; }
.step-card h3 { font-size: var(--fs-h4); margin-bottom: 10px; }
.step-card p { font-size: var(--fs-body-std); color: var(--text2); line-height: 1.6; }

/* ── Why it matters ── */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.why-list li { display: flex; gap: 16px; margin-bottom: 28px; }
.why-num { font-family: var(--mono); color: var(--accent); font-size: var(--fs-body-std); flex-shrink: 0; padding-top: 2px; min-width: 1.4em; }
.why-list h4 { font-size: var(--fs-h4-sm); margin-bottom: 6px; }
.why-list p { font-size: var(--fs-body-std); color: var(--text2); line-height: 1.6; }

/* ── Pricing ── */
.pricing-note { font-size: var(--fs-caption-sm); color: var(--amber); background: var(--amber-dim); border: 1px solid var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); padding: 6px 12px; border-radius: 999px; display: inline-block; margin-bottom: 32px; }
/* 5 real plans (Trial/Starter/Pro/Scale/Enterprise) — auto-fit reflows
   5 → 3 → 2 → 1 columns as the viewport narrows, no manual breakpoints. */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.price-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 22px; background: var(--surface); display: flex; flex-direction: column;
  box-shadow: var(--depth-highlight), var(--depth-shadow);
  transform-style: preserve-3d;
  transition: border-color .18s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.price-card:hover {
  border-color: var(--hover-blue);
  box-shadow: var(--depth-highlight), var(--depth-shadow-hover), 0 0 0 1px var(--hover-blue-ring), 0 20px 40px var(--hover-blue-glow);
  transform: translateY(-8px);
}
.price-card.featured { border-color: var(--accent); box-shadow: var(--depth-highlight), var(--depth-shadow), 0 0 0 1px var(--accent); }
.price-card.featured:hover { border-color: var(--hover-blue); box-shadow: var(--depth-highlight), var(--depth-shadow-hover), 0 0 0 1px var(--hover-blue-ring), 0 20px 40px var(--hover-blue-glow); }
.price-tag { font-size: var(--fs-nano-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); padding: 3px 9px; border-radius: 999px; display: inline-block; margin-bottom: 12px; align-self: flex-start; }
.price-card h3 { font-size: var(--fs-h4-xxs); margin-bottom: 4px; }
.price-amount { font-size: 1.5rem; font-weight: 700; margin: 6px 0 2px; }
.price-amount span { font-size: var(--fs-caption-sm); font-weight: 500; color: var(--text3); }
.price-card > p.desc { font-size: var(--fs-caption-2xs); color: var(--text3); margin-bottom: 16px; }
.price-card ul { margin-bottom: 20px; flex: 1; }
.price-card ul li { display: flex; gap: 7px; font-size: var(--fs-caption-sm); color: var(--text2); margin-bottom: 8px; }
.price-card ul li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.price-card .btn { width: 100%; font-size: var(--fs-body-std); height: 40px; }

/* ── FAQ — plain, always-visible Q&A (no JS/accordion). Every question is
   real static text in the page source from first paint, numbered like a
   simple reference list rather than hidden behind a click-to-expand. Shared
   by the home page FAQ and every guide's FAQ (guides.css loads after this
   file, so it reuses this rule rather than redefining it).
   Sizes are set to match .guide-prose's own body/heading sizes (1.02rem /
   1.15rem) rather than the smaller --fs-body-std token, so the FAQ reads at
   the same size as the rest of the article instead of visibly shrinking. ── */
.faq-plain { counter-reset: faqnum; margin-top: 8px; max-width: 780px; }
.faq-plain .faq-block { counter-increment: faqnum; padding-top: 20px; border-top: 1px solid var(--border); }
.faq-plain .faq-block:first-child { border-top: none; padding-top: 0; }
.faq-plain .faq-block h3 { margin: 0 0 8px; font-size: 1.15rem; }
.faq-plain .faq-block h3::before { content: counter(faqnum) ". "; color: var(--text); }
.faq-plain .faq-block p { margin: 0 0 14px; font-size: 1.02rem; color: var(--text2); line-height: 1.6; }

/* ── Final CTA ── */
.cta-band {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0B1220, #131A2B);
  color: #fff;
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
}
html.light .cta-band { background: linear-gradient(135deg, #0F172A, #1E293B); }
.cta-band::after {
  content: ''; position: absolute; right: -80px; bottom: -80px; width: 360px; height: 360px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 0 60px rgba(255,255,255,0.02), 0 0 0 120px rgba(255,255,255,0.015);
}
.cta-band h2 { color: #fff; font-size: var(--fs-h2-band); max-width: 640px; }
.cta-band h2 .muted { color: #94A3B8; }
.cta-band p { color: #CBD5E1; max-width: 560px; margin: 18px 0 28px; font-size: var(--fs-btn-lg); }
.cta-band-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta-band-actions .tagline { font-family: var(--mono); font-size: var(--fs-caption-sm); color: #64748B; }

/* ── Footer (slim, per feedback — no Careers/Company/Resources/newsletter) ── */
footer { border-top: 1px solid var(--border); padding: 56px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand p { font-size: var(--fs-caption); color: var(--text3); line-height: 1.6; margin-top: 14px; max-width: 320px; }
.footer-col h5 { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--text3); margin-bottom: 16px; }
.footer-col a { display: block; font-size: var(--fs-caption-lg); color: var(--text2); margin-bottom: 11px; transition: color .15s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-bottom, .footer-bottom a { font-size: var(--fs-caption-xs); color: var(--text3); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .wrap, .nav-inner { padding: 0 20px; }
  .nav-links { display: none; }
  .fronts, .steps, .why-grid { grid-template-columns: 1fr; }
  .audits-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .showcase-row, .showcase-row.reverse { grid-template-columns: 1fr; gap: 24px; }
  .showcase-row.reverse .showcase-shot, .showcase-row.reverse .showcase-text { order: initial; }
  .pricing-grid { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-divider { display: none; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 28px; }
  section { padding: 64px 0; }
}
@media (max-width: 560px) {
  .audits-grid { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 40px; }
}

/* ── Auth modal (same Supabase project/flow as app.html — email +
   Google — so signing in from the marketing page and from /app is one
   identical account system, not two). ── */
.auth-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.auth-overlay.open { display: flex; }
.auth-modal {
  width: 400px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 36px; box-shadow: 0 8px 40px rgba(0,0,0,.3);
  position: relative;
}
.auth-close {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: transparent; color: var(--text3); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.auth-close:hover { background: var(--surface2); color: var(--text); }
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-head .brand { justify-content: center; margin-bottom: 6px; }
.auth-head p { font-size: var(--fs-body-sm); color: var(--text2); }
.auth-tabs { display: flex; background: var(--surface2); border-radius: 10px; padding: 4px; margin-bottom: 22px; }
.auth-tab { flex: 1; height: 34px; border: none; border-radius: 7px; font-family: var(--font); font-size: var(--fs-body-sm); font-weight: 600; background: transparent; color: var(--text2); transition: all .15s; }
.auth-tab.active { background: var(--accent); color: #06210F; }
html.light .auth-tab.active { color: #fff; }
.auth-field { margin-bottom: 14px; }
.auth-field label { font-size: var(--fs-caption-sm); font-weight: 600; color: var(--text2); display: block; margin-bottom: 6px; }
.auth-field input {
  width: 100%; height: 42px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); font-family: var(--font); font-size: var(--fs-body-sm);
  padding: 0 14px; outline: none; transition: border-color .15s;
}
.auth-field input:focus { border-color: var(--accent); }
.auth-field-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.auth-field-label-row label { margin-bottom: 0; }
.auth-forgot-link { background: none; border: none; cursor: pointer; color: var(--accent); font-family: var(--font); font-size: var(--fs-caption-sm); padding: 0; }
.auth-password-wrap { position: relative; }
.auth-password-wrap input { padding-right: 42px; }
.auth-eye-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; display: flex; color: var(--text3); }
.auth-msg { display: none; border-radius: 8px; padding: 10px 14px; font-size: var(--fs-caption-sm); margin-bottom: 14px; }
.auth-msg.error { display: block; background: var(--red-dim); border: 1px solid var(--red); color: var(--red); }
.auth-msg.success { display: block; background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); }
.auth-submit { width: 100%; margin-bottom: 16px; height: 44px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.auth-divider span { flex: 1; height: 1px; background: var(--border); }
.auth-divider em { font-style: normal; font-size: var(--fs-micro); color: var(--text3); }
.auth-google {
  width: 100%; height: 44px; background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; font-family: var(--font);
  font-size: var(--fs-body-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s;
}
.auth-google:hover { background: var(--surface3); }
.auth-note { text-align: center; margin-top: 16px; font-size: var(--fs-micro); color: var(--text3); }
.auth-otp-hint { text-align: center; margin-bottom: 18px; font-size: var(--fs-body-sm); color: var(--text2); }
.auth-otp-links { display: flex; justify-content: space-between; margin-top: 4px; }
.auth-otp-links button { background: none; border: none; cursor: pointer; font-family: var(--font); font-size: var(--fs-caption-sm); padding: 0; }
.auth-otp-back { color: var(--text2); }
.auth-otp-resend { color: var(--accent); }

/* ---- guides.css ---- */
/* ============================================================
   Verity — Guides section (static HTML pages, separate from the
   app.html SPA — plain server-rendered markup for SEO).
   Loaded *after* landing.css: reuses all the same tokens, .nav,
   .btn, .wrap, footer etc. This file only adds the bits specific
   to a guide listing page and a guide article page.
   ============================================================ */

/* ── Listing page ── */
.guides-hero { padding: 72px 0 48px; }
.guides-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 16px 0 14px; max-width: 760px; }
.guides-hero p.lead { font-size: 1.02rem; color: var(--text2); max-width: 620px; }

.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guide-card {
  display: flex; flex-direction: column; height: 280px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; background: var(--surface);
  box-shadow: var(--depth-highlight), var(--depth-shadow);
  transform-style: preserve-3d;
  transition: border-color .18s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.guide-card:hover {
  border-color: var(--hover-blue);
  box-shadow: var(--depth-highlight), var(--depth-shadow-hover), 0 0 0 1px var(--hover-blue-ring), 0 20px 40px var(--hover-blue-glow);
  transform: translateY(-8px);
}
.guide-card-tag {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue);
  background: var(--blue-dim); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}
.guide-card h3 {
  font-size: 1.1rem; margin-bottom: 10px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.guide-card p {
  font-size: 0.88rem; color: var(--text2); line-height: 1.55; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.guide-card-meta { font-size: 0.76rem; color: var(--text3); margin-top: auto; }

/* placeholder card — marks scaffold entries so nobody ships them by accident */
.guide-card.placeholder { border-style: dashed; }
.guide-card.placeholder .guide-card-tag { color: var(--amber); background: var(--amber-dim); }

/* ── Article page ── */
.guide-back { display: flex; align-items: center; gap: 6px; max-width: 848px; margin: 0 auto 24px; font-size: 0.86rem; color: var(--text2); }
.guide-back:hover { color: var(--text); }

.guide-article { padding: 56px 0 40px; }
.guide-article-head { max-width: 848px; margin: 0 auto 40px; }
.guide-article-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 16px 0 16px; }
.guide-meta-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text3); margin-top: 18px; }
.guide-meta-row .dot-sep::before { content: '·'; margin: 0 2px; }

.guide-placeholder-banner {
  max-width: 720px; margin: 0 auto 32px; padding: 12px 16px; border-radius: 10px;
  background: var(--amber-dim); border: 1px solid var(--amber); color: var(--amber);
  font-size: 0.85rem; line-height: 1.5;
}

.guide-prose { max-width: 848px; margin-left: auto; margin-right: auto; font-size: 1.02rem; line-height: 1.6; color: var(--text2); }
.guide-prose h2 { font-size: 1.4rem; color: var(--text); margin: 32px 0 12px; }
.guide-prose h3 { font-size: 1.15rem; color: var(--text); margin: 22px 0 10px; padding-left: 20px; border-left: 2px solid var(--border); }
.guide-prose p { margin-bottom: 14px; }
/* landing.css sets a global `ul { list-style: none }` for the site's card
   lists, which use custom ::before checkmarks instead of real bullets.
   Article prose has no such checkmark styling, so restore real markers
   here or every <ul>/<ol> in a guide renders with nothing in front of it. */
.guide-prose ul, .guide-prose ol { margin: 0 0 14px 22px; list-style-position: inside; }
.guide-prose ul { list-style: disc; }
.guide-prose ol { list-style: decimal; }
.guide-prose li { margin-bottom: 6px; }
.guide-prose ul ul { list-style: circle; margin-top: 6px; margin-bottom: 0; }
.guide-prose ul ul ul { list-style: square; }

/* Numbered checklist subsections: real <ol> wrapping each numbered
   h3 + its "What to check" bullets as one <li>, so indentation comes
   from the browser's native nested-list behavior instead of manually
   matched margin/padding values across different element types. The
   h3 itself has no left padding/border here -- its indent IS the
   <ol>'s own numbering column, so it reads as the outermost level,
   with everything else inside the <li> naturally nested under it. */
ol.guide-checklist-ol { list-style: none; counter-reset: checknum; margin: 0 0 24px 0; padding: 0; }
.guide-checklist-ol > li { counter-increment: checknum; margin-bottom: 28px; padding-left: 0; }
.guide-checklist-ol > li > h3 { margin: 0 0 10px; padding-left: 0; border-left: none; }
.guide-checklist-ol > li > h3::before { content: counter(checknum) ". "; color: var(--text3); }
.guide-prose li::marker { color: var(--text3); }
.guide-prose a { color: var(--blue); text-decoration: underline; }
.guide-prose strong { color: var(--text); }

.guide-cta {
  max-width: 848px; margin: 48px auto 0; padding: 28px 30px; border-radius: var(--radius-lg);
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.guide-cta p { font-size: 0.95rem; color: var(--text2); margin: 0; max-width: 420px; }

/* ── Related guides (cross-links between article pages + a link back
   to the homepage — added 2026-09-06 so authority/relevance flows
   between guides and to "/" instead of every guide being an island) ── */
.guide-related { max-width: 848px; margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--border); }
.guide-related-cta { font-size: 1rem; color: var(--text2); margin: 0 0 24px; }
.guide-related h2 { font-size: 1.15rem; color: var(--text); margin-bottom: 16px; }
.guide-related-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.guide-related-list li { font-size: 0.9rem; line-height: 1.4; }
.guide-related-list a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 2;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 76px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  box-shadow: var(--depth-highlight, none);
  transition: border-color .18s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22,1,.36,1), color .18s ease;
}
.guide-related-list a:hover {
  border-color: var(--hover-blue, var(--blue));
  box-shadow: var(--depth-highlight, none), 0 10px 24px var(--hover-blue-glow, rgba(37,99,235,.15));
  transform: translateY(-2px);
  color: var(--hover-blue, var(--blue));
}
@media (max-width: 640px) {
  .guide-related-list { grid-template-columns: 1fr; }
}

/* .faq-plain / .faq-block (numbered, always-visible Q&A) now lives in
   landing.css — it's shared by the home page FAQ and every guide's FAQ, and
   landing.html doesn't load this file, so it has to live in the file both
   pages actually include. Don't redefine it here. */

@media (max-width: 900px) {
  .guides-grid { grid-template-columns: 1fr; }
}