/* =========================================================================
   PriLytics marketing site styles
   Self-contained: no external fonts, scripts or assets. Cloudflare-friendly.
   ========================================================================= */

/* Self-hosted Inter (variable weight, latin). No external requests. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}

:root {
  --brand:    #c15f3c;
  --brand-d:  #8b442b;
  --brand-l:  #df7d54;
  --sky:     #d4956b;
  --grn:     #34d399;
  --amb:     #c15f3c;
  --blue:    #2563eb;

  --ink:     #0f172a;
  --body:    #475569;
  --muted:   #64748b;
  --line:    #e2e8f0;
  --bg:      #ffffff;
  --bg-soft: #f8fafc;
  --bg-soft2:#f1f5f9;
  --dark:    #0f172a;
  --dark-2:  #1e293b;

  --radius:   4px;
  --radius-sm:3px;
  --shadow:   none;
  --shadow-lg:none;
  --container: 1100px;
  --reading:   760px;

  /* Type scale - 7 steps, nothing below 11px */
  --fs-xs:    .70rem;   /* 11.2px  badges, uppercase labels */
  --fs-label: .76rem;   /* 12.2px  eyebrow, kicker */
  --fs-meta:  .875rem;  /* 14px    captions, meta, footer */
  --fs-sec:   .9375rem; /* 15px    secondary body copy */
  --fs-base:  1rem;     /* 16px    body */
  --fs-md:    1.0625rem;/* 17px    lead */
  --fs-h4:    1.0625rem;/* 17px    card/caption headings */
  --fs-h3:    1.125rem; /* 18px    h3 */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

* { box-sizing: border-box; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.55rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.2vw, 1.8rem); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1rem; }
a  { color: var(--brand-d); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin: .3rem 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }

.section { padding: 32px 0; }
.section-sm { padding: 22px 0; }
.section-soft { background: var(--bg-soft); }

.eyebrow {
  display: inline-block; font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-d); margin-bottom: 14px;
}

.section-head.left { margin-left: 0; text-align: left; }

.lead { font-size: var(--fs-md); color: var(--muted); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: inherit; font-weight: 650; font-size: var(--fs-sec); line-height: 1;
  padding: 14px 22px; border-radius: 4px; border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand-d); color: #fff; }
.btn-primary:hover { background: #6f3622; color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #cbd5e1; }
.btn-lg { padding: 16px 26px; font-size: var(--fs-md); }

/* Microsoft Store button */
.btn-store {
  display: inline-flex; align-items: center; gap: 13px; cursor: pointer;
  background: var(--ink); color: #fff; border-radius: 4px; padding: 11px 22px;
  border: 1px solid var(--ink); text-decoration: none;
  transition: transform .14s ease, background .14s ease;
}
.btn-store:hover { background: #1e293b; color: #fff; text-decoration: none; }
.btn-store .ms-logo { flex: 0 0 auto; }
.btn-store .ms-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.btn-store .ms-small { font-size: var(--fs-xs); opacity: .75; color: #94a3b8; }
.btn-store .ms-big { font-size: var(--fs-md); font-weight: 650; letter-spacing: -.01em; }
/* "Coming soon" state: not yet on the Store */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row.center { justify-content: center; }

/* ----- Header / nav ----- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 68px; }
.brand { grid-column: 1; justify-self: start; }
.nav-links { grid-column: 2; justify-self: center; }
.nav-cta { grid-column: 3; justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800;
         color: var(--ink); font-size: 1.2rem; letter-spacing: -.02em; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand img { height: 42px; width: auto; }
.brand .tld { color: var(--brand); }
.nav-links { display: flex; align-items: center; gap: 26px; min-width: 0; }
.nav-links a { color: #334155; font-weight: 550; font-size: var(--fs-sec); white-space: nowrap; }
.nav-links a:hover { color: var(--brand-d); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.nav-links a.active { color: var(--brand-d); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; border-radius: 3px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----- Hero ----- */
.hero { padding: 44px 0 40px; background:
  radial-gradient(1100px 520px at 78% -8%, rgba(193,95,60,.10), transparent 60%),
  radial-gradient(820px 480px at 0% 8%, rgba(223,125,84,.08), transparent 55%); }
.hero-grid { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 18px; }
.hero .lead { margin-bottom: 28px; max-width: 560px; }/* ----- App mockup (CSS/SVG, used in hero & feature illustrations) ----- */
.mock {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.mock-bar .d { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.mock-bar .d.r, .mock-bar .d.y, .mock-bar .d.g { background: #cbd5e1; }
.mock-bar .t { margin-left: 10px; font-size: var(--fs-label); color: var(--muted); font-weight: 600; }/* Real screenshot sitting flush under the browser chrome (img or crisp <object> SVG) */
/* width/height attributes on each <img> reserve the correct box, so no CLS and
   (jump-and-settle) when a hidden carousel slide is revealed. Taller screens set
   their own ratio inline. */
.mock-shot { display: block; width: 100%; height: auto; }
object.mock-shot, img.mock-shot { pointer-events: none; }

/* ----- Component screenshots (small SVG crops via <object>) ----- */
/* A plain card frame (no browser chrome) for focused, single-panel crops. */
.shot-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
             box-shadow: var(--shadow); transition: border-color .16s ease; }
.shot-card:hover { box-shadow: var(--shadow-lg); border-color: #cbd5e1; }
.shot-card object, .shot-card img { display: block; width: 100%; height: auto; pointer-events: none; background: var(--bg-soft); }
.hero-shot .mock-bar .t { font-weight: 650; }/* Align currency/percentage figures like a real finance UI */
.kpi .val, .legend .pct, .panel, .specs .v { font-variant-numeric: tabular-nums; }

/* ----- Trust band ----- */
.trust { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; max-width: var(--reading); margin: 0 auto; }
.trust .item { display: flex; gap: 14px; align-items: flex-start; }
.trust .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center;
             background: rgba(193,95,60,.10); color: var(--brand-d); }
.trust h3 { font-size: var(--fs-h4); margin: 2px 0 4px; }
.trust p { font-size: var(--fs-sec); color: var(--muted); margin: 0; }

/* ----- Feature cards ----- */

/* ----- Split module rows ----- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.split + .split { margin-top: 44px; }
.split.rev .split-media { order: -1; }
.split h2 { font-size: 1.5rem; }
.feature-list { list-style: none; padding: 0; margin: 18px 0 0; }
.feature-list li { position: relative; padding-left: 33px; margin: 12px 0; color: #334155; font-size: var(--fs-sec); }
.feature-list .chk { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
                     background: rgba(193,95,60,.12); color: var(--brand-d); font-size: .8rem; }
.tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
       color: var(--brand-d); background: rgba(193,95,60,.10); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }.shot { background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; box-shadow: var(--shadow); }
.shot .cap { padding: 14px 18px; border-top: 1px solid var(--line); }
.shot .cap h4 { margin: 0 0 3px; font-size: var(--fs-h4); }
.shot .cap p { margin: 0; font-size: var(--fs-meta); color: var(--muted); }/* ----- Closer-look gallery: detail crops in uniform, symmetric tiles ----- */
.closeups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
.closeup { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
           border-radius: 4px; overflow: hidden;
           transition: border-color .16s ease; }
.closeup:hover { border-color: #cbd5e1; }
/* Crops vary from 1.04 to 3.40 in natural ratio. A 16:9 frame sits near the
   median, so letterboxing is minimised; contain guarantees no distortion and
   the soft ground reads as deliberate matting rather than accidental gap. */
.closeup .shot { background: #fff; overflow: hidden;
                 border-bottom: 1px solid var(--line); padding: 0; }
.closeup .shot object, .closeup .shot img { display: block; width: 100%; height: auto;
                 pointer-events: none; }
/* caption grows so every card in a row ends at the same baseline */
.closeup .cap { padding: 15px 20px; flex: 1 1 auto; }
.closeup .cap h4 { margin: 0 0 3px; font-size: var(--fs-h4); }
.closeup .cap p { margin: 0; font-size: var(--fs-meta); color: var(--muted); }
@media (max-width: 720px) { .closeups { grid-template-columns: 1fr; } }.split-extra .cap { color: var(--muted); font-size: var(--fs-meta); margin: 14px auto 0; max-width: 760px; text-align: center; }
.split-extra .cap strong { color: var(--ink); }

/* ----- Screenshot carousel (home: "See it in action"), one shot at a time ----- */
.shots { max-width: 860px; margin: 0 auto; }
.shots-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 22px; }
.shots-tab {
  appearance: none; background: #fff; border: 1px solid var(--line); color: var(--muted);
  font: inherit; font-size: var(--fs-meta); font-weight: 600; padding: 8px 16px; border-radius: 999px;
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.shots-tab:hover { color: var(--ink); border-color: #cbd5e1; }
.shots-tab[aria-selected="true"] { color: #fff; background: var(--brand); border-color: var(--brand); }
.shots-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.shots-stage { display: flex; align-items: center; gap: 14px; }
.shots-viewport { flex: 1 1 auto; min-width: 0; }
.shots-slide { display: block; }
.shots-slide[hidden] { display: none; }
.shots-slide .mock, .shots-slide .closeups { animation: shotFade .25s ease; }
@keyframes shotFade { from { opacity: 0; } to { opacity: 1; } }
.shots-cap { text-align: center; color: var(--muted); font-size: var(--fs-meta); margin: 16px auto 0; max-width: 660px; }
.shots-cap strong { color: var(--ink); }

.shots-arrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow); transition: border-color .14s ease, color .14s ease;
}
.shots-arrow:hover { border-color: #cbd5e1; color: var(--brand-d); }
.shots-arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 720px) {
  .shots-stage { gap: 8px; }
  .shots-arrow { width: 38px; height: 38px; font-size: 1.35rem; }
}

/* =========================================================================
   Mock UI building blocks: crisp CSS/SVG recreations of the app screens.
   Used in the hero, the "See it in action" carousel and the Guide. They
   stay razor-sharp and readable at any size (no raster screenshots).
   ========================================================================= */
.mock .m-tabbar { display: flex; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.mock .m-tabbar span { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; position: relative; }
.mock .m-tabbar span.on { color: var(--brand-d); }
.mock .m-tabbar span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 2px; background: var(--brand); }.kpi .val.sm { font-size: 1.02rem; }.m-seg b.on { background: #fff; color: var(--brand-d); box-shadow: var(--shadow); }.m-pills b.on { background: var(--brand); color: #fff; }.m-row .v { font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.m-row .v .sub { display: block; font-weight: 600; }
.m-row .v.pos, .m-row .pos { color: #0aa467; }.mock .legend.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }     /* home: "A closer look" gallery */
.split:has(.split-media .placeholder) { display: block; }  /* guide: drop empty frame, keep readable text */
.split:has(.split-media .placeholder) .split-media { display: none; }
.split:has(.split-media .placeholder) .split-copy { max-width: var(--reading); }

/* ----- Video block ----- */

/* ----- FAQ ----- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-section { font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
               color: var(--muted); margin: 30px 0 12px; }
.faq-section:first-child { margin-top: 0; }
.qa { border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.qa summary { cursor: pointer; list-style: none; padding: 18px 20px; font-weight: 650; color: var(--ink);
              display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .plus { flex: 0 0 auto; color: var(--brand); transition: transform .2s; font-size: 1.4rem; line-height: 1; }
.qa[open] summary .plus { transform: rotate(45deg); }
.qa .qa-body { padding: 0 20px 18px; color: var(--muted); font-size: var(--fs-sec); }

/* ----- CTA band ----- */

/* ----- Specs / definition lists ----- */
.specs { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px 36px; max-width: var(--reading); margin: 0 auto; }
.specs .row { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.specs .k { color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; }
.specs .v { color: var(--ink); font-weight: 600; font-size: var(--fs-sec); }

/* ----- Footer ----- */
.site-footer { background: var(--dark); color: #94a3b8; padding: 40px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.site-footer .brand { color: #fff; margin-bottom: 14px; }
.site-footer p { font-size: var(--fs-meta); color: #94a3b8; max-width: 320px; }
.footer-col h4 { color: #e2e8f0; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; margin: 4px 0 16px; }
.footer-col a { display: block; color: #94a3b8; font-size: var(--fs-meta); margin: 9px 0; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid #1e293b;
                 display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
                 font-size: var(--fs-meta); color: #94a3b8; }
.footer-bottom a { color: #94a3b8; }

/* ----- Page hero (sub pages) ----- */
.page-hero { padding: 30px 0 18px; background:
  radial-gradient(900px 420px at 80% -20%, rgba(193,95,60,.10), transparent 60%); }
.page-hero h1 { margin-bottom: 12px; }
.page-hero p { font-size: var(--fs-md); color: var(--muted); margin: 0; }

/* ----- Callout ----- */
.callout { border: 1px solid var(--line); border-left: 4px solid var(--brand); background: var(--bg-soft);
           border-radius: 4px; padding: 18px 22px; margin: 22px 0; }
.callout strong { color: var(--ink); }

/* ----- Reveal animation ----- */
/* Reveal animation disabled: all content shows immediately so there is never
   blank space before the viewer scrolls (and full-page captures look right). */
.reveal, .reveal.in { opacity: 1; transform: none; }
/* ----- Tabs ----- */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
/* Both FAQ's and Security's tab bars now align to the same width as every
   panel beneath them on their own page: FAQ's accordion is 820px, Security's
   panels (trust grid + text) are var(--reading), 760px. No more mixed-width
   pages anywhere on the site. */
.tabs[aria-label="FAQ categories"] { max-width: 820px; margin: 0 auto 30px; }
.tabs[aria-label="Privacy and security"],
.tabs[aria-label="About"] { max-width: var(--reading); margin: 0 auto 30px; }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
       padding: 11px 18px; font: inherit; font-size: var(--fs-sec); font-weight: 600; color: var(--muted);
       cursor: pointer; border-radius: 4px 4px 0 0; white-space: nowrap;
       transition: color .15s ease, border-color .15s ease, background .15s ease; }
.tab:hover { color: var(--ink); background: var(--bg-soft); }
.tab[aria-selected="true"] { color: var(--brand-d); border-bottom-color: var(--brand); }
.tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tab-panel[hidden] { display: none; }
.tab-panels .split { min-height: 320px; }/* ----- Responsive ----- */
@media (max-width: 1250px) {
  .nav { justify-content: space-between; }
  .nav-links, .nav-cta .btn-store { display: none; }
  .nav-toggle { display: block; }
  .nav-backdrop { display: none; }
  .nav-backdrop.open {
    display: block; position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, .45); z-index: 40;
  }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 68px; right: 22px; left: auto;
    width: 260px; max-width: calc(100vw - 44px);
    background: #fff; border: 1px solid var(--line); border-radius: 4px;
    padding: 8px 18px; z-index: 61;
  }
  .nav-links.open a { padding: 10px 0; border-bottom: 1px solid var(--bg-soft2); text-align: left; }
  .nav-links.open a:last-child { border-bottom: none; }
}

@media (max-width: 940px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 34px; }
  .split.rev .split-media { order: 0; }
  .hero-media { max-width: 560px; }
  .trust, .cards, .steps, .gallery, .specs { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 28px 0; }
}
@media (max-width: 720px) {
  .trust, .cards, .steps, .gallery, .kpis, .specs, .footer-grid, .faq-tabs { grid-template-columns: 1fr; }
  .mock-2col { grid-template-columns: 1fr; }
    .btn-row { justify-content: flex-start; }
}

/* ---- Gallery: fit screenshots to the viewport, click any to enlarge ---- */
.shots-slide .mock { max-width: min(100%, 104vh); margin-left: auto; margin-right: auto; cursor: zoom-in; }
.shots-slide .closeup .shot { cursor: zoom-in; }
.shots-slide .closeup .shot object { pointer-events: none; }

.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center;
  justify-content: center; padding: 24px; background: rgba(15, 23, 42, .82); }
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 92vh; width: auto; height: auto;
  background: #fff; border-radius: 4px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.lightbox-close { position: absolute; top: 16px; right: 20px; width: 42px; height: 42px;
  border-radius: 50%; border: 0; background: #fff; color: #0f172a; font-size: 1.5rem;
  line-height: 1; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.lightbox-close:hover { background: var(--bg-soft); }

/* Small "coming soon" badge (feature cards, headings) */
.soon-tag { display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-d); background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 8px; }

/* ============================================================
   Home page redesign: facts band, spec list, close bar
   ============================================================ */

/* Facts band (replaces icon trust strip) */
.facts { display: grid; grid-template-columns: repeat(3,1fr); }
.facts .fact { display: flex; gap: 14px; align-items: baseline; padding: 4px 32px; border-left: 1px solid var(--line); }
.facts .fact:first-child { border-left: 0; padding-left: 0; }
.facts .fn { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.facts .fl { color: var(--muted); font-size: var(--fs-sec); line-height: 1.45; }
@media (max-width: 860px) {
  .facts { grid-template-columns: 1fr; }
  .facts .fact { border-left: 0; padding: 10px 0; border-top: 1px solid var(--line); }
  .facts .fact:first-child { border-top: 0; }
}

/* Section lead */
.sec-lead { max-width: 60ch; margin-bottom: 28px; }
.sec-lead h2 { margin: 0 0 8px; }
.sec-lead p { color: var(--muted); margin: 0; }
.sec-more { margin: 26px 0 0; font-size: var(--fs-meta); }
.sec-more a { color: var(--brand-d); font-weight: 600; }
.sec-more span { color: #cbd5e1; margin: 0 8px; }

/* Specification list: two columns, hairline rules */
.spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px;
  border-top: 1px solid var(--ink); margin: 0; }
.spec-row { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-weight: 650; color: var(--ink); font-size: var(--fs-base); letter-spacing: -.01em; margin-bottom: 4px; }
.spec dd { margin: 0; color: var(--muted); font-size: var(--fs-sec); line-height: 1.55; }
@media (max-width: 820px) { .spec { grid-template-columns: 1fr; column-gap: 0; } }

/* Close bar: replaces gradient CTA banner */
.closebar { display: flex; align-items: center; justify-content: space-between; gap: 32px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand-d);
  border-radius: 4px; padding: 26px 30px; background: var(--bg-soft); }
.closebar h2 { margin: 0 0 5px; font-size: 1.4rem; }
.closebar p { margin: 0; color: var(--muted); font-size: var(--fs-sec); }
.closebar-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.closebar-link { font-size: var(--fs-meta); font-weight: 600; color: var(--brand-d); }
@media (max-width: 720px) {
  .closebar { flex-direction: column; align-items: flex-start; }
  .closebar-actions { align-items: flex-start; }
}

/* ============================================================
   Mobile corrections
   ============================================================ */
@media (max-width: 720px) {
  /* 32px each side ate 16% of a 390px screen */
  .container { padding: 0 18px; }

  /* desktop line-break must not fire once the line already wraps */
  .br-lg { display: none; }

  /* long headline needs a smaller floor on narrow screens */
  h1 { font-size: clamp(1.55rem, 1rem + 3.2vw, 1.9rem); }
  h2 { font-size: clamp(1.25rem, .95rem + 1.6vw, 1.5rem); }

  .section { padding: 24px 0; }
  .section-sm { padding: 18px 0; }

  .hero-grid { gap: 26px; }

  /* facts: number and label side by side reads better than stacked at this size */
  .facts .fn { font-size: 1.55rem; }

  /* separator dots wrap badly - stack the onward links */
  .sec-more { display: flex; flex-direction: column; gap: 8px; }
  .sec-more span { display: none; }

  .closebar { padding: 20px; }
  .closebar h2 { font-size: 1.15rem; }

  /* tabs wrap to 2 rows on a phone - tighten so they don't dominate */
  .tab { padding: 9px 12px; font-size: var(--fs-meta); }
  .tabs { margin-bottom: 22px; }

  .closeups { gap: 14px; }
}

@media (max-width: 400px) {
  .container { padding: 0 14px; }
  .facts .fact { gap: 10px; }
}

/* Tick before each privacy guarantee - reuses the .chk pattern used in feature lists */
.trust h3 { display: flex; align-items: center; gap: 9px; }
.trust h3 .chk { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
                 display: grid; place-items: center; font-size: .72rem;
                 background: rgba(193,95,60,.12); color: var(--brand-d); }

/* ============================================================
   Investor Corner
   ============================================================ */

/* Breadcrumb above the article eyebrow */
.ic-crumb { font-size: var(--fs-meta); color: var(--muted); margin: 0 0 14px; }
.ic-crumb a { color: var(--muted); }
.ic-crumb a:hover { color: var(--brand-d); }
.ic-crumb span { color: #cbd5e1; margin: 0 6px; }

/* Article body measure + typography */
.ic-article { max-width: var(--reading); margin: 0 auto; }
.ic-article > .lead { margin-top: 0; }
.ic-article h2 { font-size: 1.3rem; margin-top: 1.7em; }
.ic-article > h2:first-child { margin-top: 0; }
.ic-article h3 { margin-top: 1.4em; }
.ic-article p { margin: 0 0 1.05em; }
.ic-article ul, .ic-article ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.ic-article li { margin-bottom: .5em; color: var(--body); }
.ic-article strong { color: var(--ink); }

/* Figure */
.ic-figure { margin: 22px 0 26px; }
.ic-figure svg { display: block; width: 100%; height: auto; }
.ic-figure figcaption {
  margin-top: 10px; font-size: var(--fs-meta); color: var(--muted); text-align: center;
}

/* Soft-CTA note box, dropped inline in the article body */
.ic-note {
  border-left: 3px solid var(--brand); background: var(--bg-soft);
  padding: 16px 20px; margin: 1.6em 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.ic-note p { margin: 0; font-size: var(--fs-sec); }
.ic-note p + p { margin-top: 8px; }
.ic-note strong { color: var(--ink); }
.ic-note a { font-weight: 600; }

/* Meta row: day / category / read time */
.ic-meta { font-size: var(--fs-meta); color: var(--muted); margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.ic-meta span + span::before { content: "\00b7"; margin: 0 8px; color: #cbd5e1; }

/* Prev / next between articles */
.ic-pager {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.ic-pager a { max-width: 46%; font-size: var(--fs-sec); }
.ic-pager .ic-pager-lbl { display: block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ic-pager .ic-next { text-align: right; margin-left: auto; }

.ic-scope { font-size: var(--fs-meta); color: var(--muted); margin: 10px 0 0; }

.ic-search { position: relative; margin: 22px 0 18px; }
.ic-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ic-search input { width: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-sec); color: var(--ink); background: #fff; }
.ic-search input:focus { outline: none; border-color: var(--brand); }
.ic-search input::-webkit-search-cancel-button { cursor: pointer; }
.ic-search-empty { font-size: var(--fs-sec); color: var(--muted); padding: 20px 2px; }

.ic-group-acc { margin-bottom: 10px; }
.ic-group-acc .qa-body { padding: 0 20px 4px; }
.ic-group-acc .ic-list { border-top: none; margin-top: 0; }
.ic-group-acc[hidden] { display: none; }
.ic-row[hidden] { display: none; }
.ic-list { border-top: 1px solid var(--ink); margin: 14px 0 0; }
.ic-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 16px 2px; border-bottom: 1px solid var(--line); text-decoration: none;
}
.ic-row-num { font-variant-numeric: tabular-nums; }
.ic-row:hover .ic-row-t { color: var(--brand-d); }
.ic-row-n { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.ic-row-t { font-weight: 600; color: var(--ink); font-size: var(--fs-sec); }
.ic-row-tag { font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; }
.ic-row-tag.soon { color: var(--brand-d); }

/* Investor Corner pages: cap the reading measure but keep the left edge
   flush with the rest of the site (same pattern as .faq's max-width + margin:0),
   instead of centering a narrower column independently, which is what pushed
   the whole page right of where every other page starts. */
/* Investor Corner: a single centered reading column, same width top to
   bottom (hero text, article list, article body, pager, closing band),
   with equal whitespace on both sides rather than flush left with all the
   slack dumped on the right. */
.container-article { max-width: 800px; margin: 0 auto; }

/* Landing page: one-line description under each section title, replacing
   the article-count tag */
.ic-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ic-row-d { font-size: var(--fs-meta); color: var(--muted); font-weight: 400; }
.ic-row-arrow { color: var(--muted); font-size: var(--fs-sec); flex: 0 0 auto; }
.ic-row:hover .ic-row-arrow { color: var(--brand-d); }

/* Investor Corner hero paragraphs are single merged leads now, no
   secondary paragraph spacing needed. */