/* ===========================================================================
   Excise PDF — excisepdf.com

   Light theme, on purpose: this is a documents product, so the page is paper
   and the one high-contrast surface on it is the receipt (positioning brief,
   locked decision 3). The restrained ink-and-paper palette keeps document
   screenshots readable and lets the current red-and-blue app icon carry the
   product colour without turning the site into an imitation of the artwork.

   Structure follows rangefinderinvest/styles.css (its class vocabulary,
   its reveal/skip-link/focus rules); the palette and the sections are this
   site's own. No blackout-bar motif anywhere — the product's argument is that
   a black box is a drawing, and leading with one sells the thing it refuses
   to be (docs/NAMING-USAGE.md, "Never").
   =========================================================================== */

:root {
  /* --- Ink & slate ------------------------------------------------------ */
  --ink: #16212f;
  --excised: #1d2636;
  --slate-800: #273245;
  --slate-700: #3c4d69;
  --slate-600: #55668a;
  --slate-500: #6f7e9a;
  --slate-400: #9da9bb;
  --slate-300: #c5cddb;

  /* --- Accent ----------------------------------------------------------- */
  --accent: #34527d;
  --accent-strong: #243a5c;
  --accent-soft: #eef2f8;
  --cta: #0b5fc2;
  --cta-hover: #084b99;
  --cta-soft: #eaf3ff;

  /* --- Surfaces --------------------------------------------------------- */
  --page: #ffffff;
  --band: #f5f7fa;
  --card: #ffffff;
  --card-border: #e2e7f0;
  --line: #eaeef4;
  --line-soft: #f1f4f8;

  /* --- Status. Matched to the app's own receipt banner. ------------------ */
  --good-text: #15803d;
  --good-bg: #ecfdf3;
  --good-border: #bbf7d0;
  --warn-text: #b45309;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;

  --shadow-card: 0 10px 28px rgba(22, 33, 47, 0.06);
  --shadow-pop: 0 24px 60px rgba(22, 33, 47, 0.16);

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;

  --font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
    Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.022em; line-height: 1.12; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }

/* Keyboard focus only — mouse clicks stay unringed. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(52, 82, 125, 0.22);
}

/* Skip link — first tab stop, visible only once focused. */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 18px; border-radius: 10px; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow.on-dark { color: #9fb0cc; }

.section { padding: 88px 0; }
.section.band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 740px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h1, .section-head h2 { font-size: clamp(27px, 3.8vw, 38px); margin: 13px 0 14px; }
.section-head p { font-size: 17.5px; color: var(--slate-600); }
.lead { font-size: 18px; color: var(--slate-700); }
.lead + .lead { margin-top: 16px; }

/* ---------- Buttons + the App Store badge ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 12px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap; text-align: center;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--cta); color: #fff; box-shadow: 0 12px 26px rgba(11, 95, 194, .28); }
.btn-primary:hover { background: var(--cta-hover); transform: translateY(-2px); }
.btn:disabled { cursor: wait; opacity: .68; transform: none; box-shadow: none; }
.btn-light { background: #fff; color: var(--ink); border-color: var(--card-border); box-shadow: var(--shadow-card); }
.btn-light:hover { transform: translateY(-2px); border-color: #cfd8e6; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.launch-status {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 18px; border: 1px solid #bfd7f5; border-radius: 12px;
  background: var(--cta-soft); color: var(--accent-strong);
  font-size: 15px; font-weight: 750; text-align: center;
}

/* Apple's badge is artwork under Apple's identity guidelines: it is served
   as-is from assets/app-store-badge.svg, never recoloured, never redrawn, and
   never re-lettered. Only its rendered height changes, and the aspect ratio
   (119.664 x 40) rides along with it. */
.appstore { display: inline-block; line-height: 0; transition: transform .15s ease; }
.appstore img { height: 54px; width: auto; }
.appstore:hover { transform: translateY(-2px); }
.appstore.sm img { height: 44px; }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta-note { font-size: 14.5px; color: var(--slate-600); font-weight: 600; }

/* ===========================================================================
   Navbar
   =========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17.5px; }
/* The web master is the current macOS icon rendition, including its transparent
   corners. The matching radius here is defensive at small browser sizes and
   preserves the same silhouette shown by the App Store. */
.brand .logo { width: 34px; height: 34px; border-radius: 22%; box-shadow: 0 5px 14px rgba(22, 33, 47, .22); }
.brand a { color: inherit; text-decoration: none; }
.brand > a { display: flex; align-items: center; flex: 0 0 auto; }
.brand-stack { display: flex; flex-direction: column; line-height: 1.12; }
.brand-stack small { font-size: 11px; font-weight: 600; color: var(--slate-500); letter-spacing: 0; }
.brand-stack small a:hover { color: var(--ink); text-decoration: underline; }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a {
  font-size: 14px; font-weight: 600; color: var(--slate-700);
  padding: 8px 11px; border-radius: 9px; transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--accent-soft); color: var(--accent-strong); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-cta .appstore img { height: 40px; }
.nav-toggle { display: none; }

/* ===========================================================================
   Hero
   =========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(52, 82, 125, 0.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--band) 100%);
  padding: 36px 0 64px;
  border-bottom: 1px solid var(--line);
}
.hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 { font-size: clamp(33px, 4.8vw, 54px); line-height: 1.04; margin: 16px 0 18px; }
.hero-sub { font-size: 18.5px; color: var(--slate-700); max-width: 560px; }
/* The first screen carries the capability index. The longer feature section
   below explains these items instead of introducing them for the first time. */
.hero-capabilities {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; max-width: 560px; margin-top: 16px; padding: 0; list-style: none;
}
.hero-capabilities li { min-width: 0; }
.hero-capabilities a {
  display: block; position: relative; height: 100%; min-width: 0;
  padding: 8px 29px 8px 10px; color: inherit; text-decoration: none;
  border: 1px solid var(--card-border); border-radius: 10px;
  background: rgba(255,255,255,.82); box-shadow: var(--shadow-card);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.hero-capabilities a:hover {
  transform: translateY(-1px); border-color: rgba(41, 77, 125, .42);
  background: #fff; box-shadow: 0 7px 18px rgba(22, 33, 47, .10);
}
.hero-capabilities a:focus-visible {
  outline: 3px solid rgba(41, 77, 125, .30); outline-offset: 2px;
  border-color: var(--accent);
}
.hero-capability-title {
  display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 8.5px;
  font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
.hero-capabilities b { display: block; font-size: 12.5px; line-height: 1.3; color: var(--slate-800); }
.hero-capability-arrow {
  position: absolute; top: 7px; right: 10px; color: var(--slate-400);
  font-size: 13px; line-height: 1; transition: color .15s ease, transform .15s ease;
}
.hero-capabilities a:hover .hero-capability-arrow { color: var(--accent); transform: translateY(2px); }
.hero-cta { display: flex; align-items: center; gap: 16px; margin: 18px 0 20px; flex-wrap: wrap; }
.hero-platforms { font-size: 14.5px; font-weight: 700; color: var(--slate-700); }
.hero-windows-link { margin: -4px 0 18px; font-size: 14px; font-weight: 750; }
.hero-windows-link a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* The drop zone's own sentence, verbatim. Quoted UI keeps the site and the
   product the same argument — see the [UI] marks in the brief. */
.hero-trust {
  margin-top: 20px; display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--card-border); background: #fff; border-radius: var(--radius-sm);
  padding: 13px 16px; max-width: 560px; box-shadow: var(--shadow-card);
}
.hero-trust svg { flex: none; width: 17px; height: 17px; color: var(--good-text); margin-top: 2px; }
.hero-trust p { font-size: 14px; color: var(--slate-700); }

/* ===========================================================================
   Screenshot frames — real captures, in a window that reads as the app
   =========================================================================== */
.shot { display: block; width: 100%; height: auto; }
.window {
  border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--card-border); box-shadow: var(--shadow-pop);
}
.frame-bar {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px;
  background: #eef1f6; border-bottom: 1px solid var(--card-border);
}
.win-dot { width: 10px; height: 10px; border-radius: 50%; }
.win-dot.r { background: #ff5f57; } .win-dot.y { background: #febc2e; } .win-dot.g { background: #28c840; }
.win-title { margin-left: 9px; color: var(--slate-500); font-size: 11.5px; font-weight: 600; }
.shot-cap { font-size: 12.5px; color: var(--slate-500); margin: 11px auto 0; max-width: 660px; }
.shot-cap.center { text-align: center; }
/* Phone and tablet captures keep their own device proportions rather than
   being stretched into a desktop window. */
/* `width: 100%` is load-bearing, not decoration. .device is a flex item inside
   .pcard .shot-hold, so without an explicit width it is sized shrink-to-fit by
   its content — and its content is `.shot { width: 100% }`, which resolves
   against the parent. That circle collapsed the frame to its 2px border and the
   iPad and iPhone captures never loaded at all. max-width still caps it. */
.device { width: 100%; border-radius: 22px; overflow: hidden; border: 1px solid var(--card-border); box-shadow: var(--shadow-pop); background: #fff; }
.device.phone { max-width: 280px; }
.device.tablet { max-width: 440px; }

/* ===========================================================================
   Feature rows
   =========================================================================== */
.feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: 52px; align-items: center; }
.feature > * { min-width: 0; }
.feature.reverse { grid-template-columns: 1.1fr 1fr; }
.feature.reverse .feature-copy { order: 2; }
.feature + .feature { margin-top: 88px; }
.feature-copy h3 { font-size: clamp(23px, 3vw, 30px); margin: 13px 0 15px; }
.feature-copy > p { font-size: 16.5px; color: var(--slate-700); }
.feature-copy > p + p { margin-top: 14px; }
.flist { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; padding: 0; }
.flist li { list-style: none; display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--slate-700); }
.flist .tick { flex: none; width: 21px; height: 21px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-top: 2px; }
.flist .tick svg { width: 12px; height: 12px; }
.flist b { color: var(--ink); }

/* A limit, stated where the claim is. These are not footnotes: cut them and
   the copy has started claiming more (SHOWCASE.md, "Known limits"). */
.limit {
  margin-top: 20px; display: flex; gap: 11px; align-items: flex-start;
  border-left: 3px solid var(--slate-300); padding: 2px 0 2px 14px;
  font-size: 14.5px; color: var(--slate-600);
}
.limit b { color: var(--slate-800); }

/* ===========================================================================
   The receipt — the one high-contrast surface on the site
   =========================================================================== */
.receipt-section {
  background: linear-gradient(170deg, var(--slate-800) 0%, #131c2b 100%);
  color: #e7ecf4;
  padding: 90px 0;
}
.receipt-section h2, .receipt-section h3 { color: #fff; }
.receipt-section .section-head p, .receipt-section p { color: #b9c4d6; }
.receipt-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
.receipt-grid > * { min-width: 0; }
.receipt-copy p + p { margin-top: 15px; }
.receipt-copy b, .receipt-copy strong { color: #fff; }
/* The app's own receipt text, quoted as the app prints it. */
.receipt-quote {
  margin-top: 24px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm); padding: 18px 20px;
  font-family: var(--mono); font-size: 13px; line-height: 1.75; color: #d6dfec;
  white-space: pre-wrap; overflow-x: auto;
}
.pullquote {
  margin-top: 26px; padding: 20px 24px; border-left: 3px solid #9fb0cc;
  background: rgba(255, 255, 255, 0.05); border-radius: 0 12px 12px 0;
  font-size: 16px; line-height: 1.65; color: #dbe3ef;
}
.pullquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: #93a3bd; }
.receipt-section .shot-cap { color: #93a3bd; }
.receipt-section .window { border-color: rgba(255, 255, 255, 0.16); }

/* ===========================================================================
   Card grids
   =========================================================================== */
.grid-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gcard {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-card);
}
.gcard h3,
.gcard h4 { font-size: 16.5px; margin-bottom: 8px; }
.gcard p { color: var(--slate-600); font-size: 14.5px; }
.gcard .gi {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 14px;
}
.gcard .gi svg { width: 20px; height: 20px; }
.gcard .val { font-family: var(--mono); font-size: 12px; color: var(--slate-500); margin-top: 10px; }
.capability-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.capability {
  min-width: 0; padding: 20px; background: #fff; display: flex; flex-direction: column;
  border: 1px solid var(--card-border); border-radius: 14px;
  box-shadow: var(--shadow-card); scroll-margin-top: 88px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.capability:target {
  border-color: var(--accent); background: #fbfdff;
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-card);
}
.capability:focus-visible { outline: 3px solid rgba(41, 77, 125, .30); outline-offset: 3px; }
.capability-tag {
  display: block; margin-bottom: 9px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.capability h3 { font-size: 17px; margin-bottom: 7px; }
.capability p { font-size: 13.75px; line-height: 1.58; color: var(--slate-600); }
.capability .capability-more { margin-top: auto; padding-top: 12px; font-size: 12.75px; }
.capability-more a { color: var(--accent); font-weight: 700; }
.capability-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The argument after the feature summary. This stays typographically quieter
   than the cards: it explains why the features exist before the screenshots
   show how the user operates them. */
.why-layout {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 68px; align-items: start;
}
.why-layout .section-head { margin-bottom: 0; }
.why-list { border-top: 1px solid var(--line); }
.why-item {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 25px 0; border-bottom: 1px solid var(--line);
}
.why-item .n {
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  padding-top: 5px;
}
.why-item h3 { font-size: 20px; margin-bottom: 7px; }
.why-item p { font-size: 15.5px; color: var(--slate-600); line-height: 1.65; }

/* Detector table */
.dt-wrap { overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.dt { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dt th { text-align: left; color: var(--slate-600); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 13px 18px; border-bottom: 1px solid var(--line); background: #f8fafc; white-space: nowrap; }
.dt td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--slate-700); }
.dt tr:last-child td { border-bottom: 0; }
.dt td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.dt code { font-family: var(--mono); font-size: 12.5px; color: var(--accent-strong); }

/* The fourteen supported hidden-data categories, as a visible list */
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 26px 0 0; }
.cats li {
  list-style: none; display: flex; gap: 10px; align-items: baseline;
  border: 1px solid var(--card-border); border-radius: 11px; background: #fff;
  padding: 12px 14px; font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.cats .n { font-family: var(--mono); font-size: 11.5px; color: var(--slate-400); }
.cats small { display: block; font-weight: 500; color: var(--slate-500); font-size: 12.5px; margin-top: 2px; }

/* The "how it works" walkthrough: three real captures in sequence, because the
   thing the reader wants to know — how much work is this? — is answered by
   looking at the app, not by reading four sentences about it. Every frame is a
   real run from the app repo's capture script; none is a mock-up. */
/* One frame per row, caption alongside. Three-up was tried and abandoned: a
   1200px app window scaled into a 360px column is an illegible thumbnail — it
   proves an app exists without showing what using it looks like, which is the
   whole job of this section. The frame keeps ~60% of the container. */
.walk { display: grid; gap: 44px; padding: 0; margin: 34px 0 0; }
/* Direct-child selectors throughout: `.walk li` also matches the .blist bullets
   nested inside each caption, which turned every bullet into a two-column grid. */
.walk > li { list-style: none; display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: center; }
.walk > li > * { min-width: 0; }
.walk .cap > p { margin: 0; font-size: 15px; color: var(--slate-600); line-height: 1.6; }
/* Beats the rule above, which would otherwise flatten the deep-dive link
   against the last bullet. */
.walk .cap > p.more { margin-top: 16px; }
.walk .cap > b { display: block; color: var(--ink); font-size: 21px; letter-spacing: -.015em; margin-bottom: 6px; }
.walk .cap .n { font-family: var(--mono); font-size: 12px; color: var(--accent); display: block; margin-bottom: 5px; }

/* Plain bullets keep each product claim short and scannable. */
.blist { list-style: none; padding: 0; margin: 13px 0 0; display: grid; gap: 8px; }
.blist li { position: relative; padding-left: 17px; font-size: 14.5px; line-height: 1.55; color: var(--slate-600); }
.blist li::before { content: ""; position: absolute; left: 1px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.blist b { color: var(--ink); font-weight: 700; }
.blist a { color: var(--accent); font-weight: 600; }

/* The "→ in depth" line under a block. */
.more { margin: 16px 0 0; font-size: 14.5px; }
.more a { color: var(--accent); font-weight: 600; }
.more.center { text-align: center; margin-top: 24px; }

/* Platform blocks */
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.pcard { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 14px; }
.pcard h4 { font-size: 17px; }
.pcard p { font-size: 14.5px; color: var(--slate-600); }
.pcard .shot-hold { display: flex; justify-content: center; }
.uiquote {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 10px 10px 0; padding: 13px 16px;
  font-size: 14px; color: var(--slate-800); line-height: 1.6;
}
.uiquote small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--slate-500); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Legacy offer layout retained for the long-form pages. */
.offer-grid {
  max-width: 1080px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px;
  align-items: stretch;
}
/* Pricing — the only dollar figure on the site */
.price-card {
  max-width: 620px; margin: 0 auto; text-align: center; background: #fff;
  border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 42px 34px; box-shadow: var(--shadow-pop);
}
.offer-grid .price-card { max-width: none; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.price-card .fig { font-size: 54px; font-weight: 850; letter-spacing: -0.04em; }
.price-card .oneline { font-size: 17px; color: var(--slate-700); margin-top: 6px; }
.price-card .cta-row { justify-content: center; margin-top: 26px; }
.price-card .fine { font-size: 13px; color: var(--slate-500); margin-top: 18px; }

/* About */
.about-card { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); padding: 38px 42px; box-shadow: var(--shadow-card); }
.about-card p { font-size: 16.5px; color: var(--slate-700); }
.about-card p + p { margin-top: 14px; }
.about-card a { color: var(--accent); font-weight: 600; }
.about-card a:hover { text-decoration: underline; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; padding: 2px 22px; box-shadow: var(--shadow-card); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; font-size: 16.5px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; transition: transform .2s; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq p { color: var(--slate-600); font-size: 15px; padding: 0 0 18px; }
.faq p + p { padding-top: 0; margin-top: -6px; padding-bottom: 18px; }
.faq a { color: var(--accent); font-weight: 600; }

/* Closing CTA */
.closing { text-align: center; }
.closing h2 { font-size: clamp(26px, 3.6vw, 36px); }
.closing .cta-row { justify-content: center; margin-top: 26px; }
.closing .sig { margin-top: 30px; font-size: 16px; color: var(--slate-600); font-style: italic; }
.closing .sig a { color: var(--accent); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================================
   Footer
   =========================================================================== */
.footer { padding: 52px 0 40px; color: var(--slate-600); border-top: 1px solid var(--line); }
.footer-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.footer .brand { color: var(--ink); margin-bottom: 12px; }
.footer .tag { max-width: 330px; font-size: 14px; }
.footer .tag a { color: var(--accent); font-weight: 600; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.fcol h5 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); margin-bottom: 12px; }
.fcol a { display: block; font-size: 14px; color: var(--slate-700); padding: 5px 0; }
.fcol a:hover { color: var(--accent); }
.footer-bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ===========================================================================
   Reveal on scroll
   ---------------------------------------------------------------------------
   An ENHANCEMENT: the hidden state only applies once the inline head script
   has set .js on <html>. Without that guard a blocked or failed main.js
   leaves every .reveal block permanently invisible, and the JS safety net
   cannot help — it is the thing that did not run.
   =========================================================================== */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ===========================================================================
   Guide pages (the deep dives, the FAQ, the query pages)
   ---------------------------------------------------------------------------
   Same tokens, prose measure. Every one of these carries a crumb back to the
   section it came from and the footer Guides column, because a page reachable
   only from the sitemap is a page nobody reads.
   =========================================================================== */
/* Block-level flex, not inline-flex: the eyebrow that follows it is itself
   inline-flex and shared the crumb's line otherwise. */
.crumb { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--slate-500); margin-bottom: 16px; }
.crumb a { color: var(--accent); }
.crumb a:hover { text-decoration: underline; }
.crumb svg { width: 13px; height: 13px; }

.guide { max-width: 820px; margin: 0 auto; }
.guide h1 { font-size: clamp(30px, 4.4vw, 44px); margin: 8px 0 18px; }
.guide .standfirst { font-size: 19px; color: var(--slate-700); line-height: 1.6; }
.guide h2 { font-size: 24px; margin: 46px 0 14px; }
.guide h3 { font-size: 18.5px; margin: 30px 0 10px; }
.guide p, .guide li { color: var(--slate-700); font-size: 16.5px; line-height: 1.68; }
.guide p + p { margin-top: 14px; }
.guide ul, .guide ol { padding-left: 22px; margin: 12px 0 18px; }
.guide li { margin: 8px 0; }
.guide a { color: var(--accent); font-weight: 600; }
.guide a:hover { text-decoration: underline; }
.guide a.btn-primary { color: #fff; }
.guide a.btn-primary:hover { color: #fff; text-decoration: none; }
.guide a.btn-light { color: var(--ink); }
.guide a.btn-light:hover { text-decoration: none; }
.guide code { font-family: var(--mono); font-size: 14px; color: var(--accent-strong); }
.guide .dt-wrap, .guide .window, .guide .cats { margin: 26px 0; }
.guide .dt td, .guide .dt th { font-size: 15px; }
.guide .shot-cap { margin-left: 0; text-align: left; }

/* A statement the app makes about its own limits, pulled out of the prose so
   an editor cannot lose it in a paragraph. */
.callout {
  margin: 26px 0; padding: 20px 24px; border-radius: 14px;
  background: var(--band); border: 1px solid var(--card-border);
}
.callout p { font-size: 16px; }
.callout p + p { margin-top: 12px; }
.callout .lab {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 8px;
}
.callout.dark { background: var(--slate-800); border-color: var(--slate-800); }
.callout.dark p { color: #c3cddc; }
.callout.dark strong, .callout.dark b { color: #fff; }
.callout.dark .lab { color: #93a3bd; }

/* Where a guide ends: availability and launch price. */
.guide-end {
  margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.guide-end p { font-size: 15.5px; color: var(--slate-600); max-width: 460px; }

/* Sibling guides, so no page is a dead end. */
.also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.also a {
  display: block; background: #fff; border: 1px solid var(--card-border); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow-card); color: inherit; font-weight: 400;
}
.also a:hover { border-color: #cfd8e6; text-decoration: none; }
.also b { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 5px; }
.also span { font-size: 13.5px; color: var(--slate-600); }
@media (max-width: 860px) { .also { grid-template-columns: 1fr; } }

/* ===========================================================================
   Policy pages (privacy, terms) — prose on the site's tokens
   =========================================================================== */
.policy { max-width: 760px; margin: 0 auto; }
.policy h1 { font-size: clamp(29px, 4.4vw, 42px); margin: 10px 0 6px; }
.policy .effective { color: var(--slate-500); font-size: 14.5px; margin-bottom: 32px; }
.policy h2 { font-size: 21px; margin: 38px 0 12px; }
.policy p, .policy li { color: var(--slate-700); font-size: 16px; line-height: 1.68; }
.policy p + p { margin-top: 14px; }
.policy ul { padding-left: 22px; margin: 10px 0 18px; }
.policy li { margin: 6px 0; }
.policy a { color: var(--accent); font-weight: 600; }
.policy a:hover { text-decoration: underline; }
.policy code { font-family: var(--mono); font-size: 13.5px; color: var(--accent-strong); }
.policy .tldr {
  background: var(--slate-800); color: #e7ecf4; border-radius: 14px;
  padding: 22px 26px; margin: 24px 0 8px;
}
.policy .tldr p { color: #c3cddc; margin: 0; font-size: 16.5px; }
.policy .tldr strong { color: #fff; }
.policy .tldr a { color: #cfe0ff; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .feature, .feature.reverse { grid-template-columns: 1fr; gap: 30px; }
  .feature.reverse .feature-copy { order: 0; }
  .receipt-grid { grid-template-columns: 1fr; gap: 34px; }
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platforms { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr; max-width: 620px; }
  .pcard { flex-direction: row; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
  .pcard > div:first-child { flex: 1 1 260px; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Caption under the frame rather than beside it, so the frame keeps the
     full column width. */
  .walk > li { grid-template-columns: 1fr; gap: 15px; }
}
/* The nav collapses before the phone breakpoint: seven links plus the lockup
   and the badge need ~940px, and below that they overflowed the bar. */
@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; background: #fff; padding: 14px;
    border-bottom: 1px solid var(--card-border); box-shadow: var(--shadow-card);
  }
  .nav-toggle {
    display: inline-grid; place-items: center; width: 42px; height: 42px;
    border-radius: 11px; border: 1px solid var(--card-border); background: #fff; cursor: pointer;
  }
}
@media (max-width: 860px) {
  .why-layout { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .section { padding: 62px 0; }
  .receipt-section { padding: 62px 0; }
  /* The detector table stacks rather than scrolling sideways: three columns in
     a 390px viewport left the third one off-screen while it still set the row
     height, so every row grew a hundred points of empty space. */
  .dt-wrap { overflow-x: visible; }
  .dt, .dt tbody, .dt tr, .dt td { display: block; width: 100%; }
  .dt thead { display: none; }
  .dt tr { border-bottom: 1px solid var(--line); padding: 8px 0 14px; }
  .dt tr:last-child { border-bottom: 0; }
  .dt td { border: 0; padding: 3px 18px; }
  .dt td:first-child { font-size: 16.5px; padding-top: 12px; white-space: normal; }
  .dt td:nth-child(2) { color: var(--accent-strong); font-weight: 600; }
  .grid-cards, .grid-cards.two { grid-template-columns: 1fr; }
  /* Hidden-data labels remain legible two-up at ordinary phone widths. The
     shorter list is easier to scan than fourteen full-width rows. */
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-inner { gap: 10px; }
  /* The primary CTA stays on phones. The brand lockup gives up its
     "by Kalman Software" line to make room; a future App Store badge keeps
     Apple's 40px minimum height. */
  .nav-cta .appstore img { height: 40px; }
  .brand { font-size: 16px; gap: 9px; min-width: 0; }
  .brand .logo { width: 30px; height: 30px; }
  .brand-stack small { display: none; }
  .hero { padding: 44px 0 60px; }
  .hero-cta { gap: 12px; }
  .appstore img { height: 48px; }
  .about-card { padding: 28px 22px; }
  .price-card { padding: 32px 22px; }
  .price-card .fig { font-size: 44px; }
  .device.phone, .device.tablet { max-width: 100%; }
  .pcard { flex-direction: column; }
}
@media (max-width: 520px) {
  .capability-grid { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .nav .brand-stack { display: none; }
}
@media (max-width: 340px) {
  .cats { grid-template-columns: 1fr; }
}

/* 2026 ecosystem refresh */
[hidden] { display:none !important; }
.footer-cols { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:38px; }
@media (max-width:980px) {
  .footer-cols { grid-template-columns:repeat(2,minmax(150px,1fr)); }
}
@media (max-width:620px) {
  .footer-cols { grid-template-columns:1fr; width:100%; gap:24px; }
}

/* ===========================================================================
   Windows launch overhaul, 2026-09-15
   ---------------------------------------------------------------------------
   The home page is intentionally quieter than the original feature catalogue.
   It presents Excise PDF as a small, focused utility and gives Windows equal
   weight without erasing the Apple product. The guide and policy pages keep
   the established class vocabulary above.
   =========================================================================== */
:root {
  --ink: #17243a;
  --excised: #17243a;
  --slate-800: #25324a;
  --slate-700: #40506b;
  --slate-600: #5b6b82;
  --slate-500: #768399;
  --accent: #365fb5;
  --accent-strong: #24468c;
  --accent-soft: #edf3ff;
  --cta: #2358bd;
  --cta-hover: #18479f;
  --page: #fbfaf7;
  --band: #f3f5f8;
  --card-border: #dfe4ec;
  --line: #e7e6e1;
  --warm: #f7f4ee;
  --warm-strong: #eee8dd;
  --red: #b54845;
  --red-soft: #fbefed;
  --shadow-card: 0 10px 34px rgba(23, 36, 58, .07);
  --shadow-pop: 0 28px 80px rgba(23, 36, 58, .17);
  --radius: 22px;
  --maxw: 1200px;
}

body { background: var(--page); }
.nav { background: rgba(251, 250, 247, .9); }
.nav-get { padding: 10px 17px; font-size: 13.5px; box-shadow: none; }
.text-link { display: inline-flex; gap: 8px; margin-top: 22px; color: var(--accent-strong); font-weight: 750; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.light-link { color: #d8e6ff; }

/* Hero */
.ex-hero {
  position: relative; overflow: hidden; padding: 72px 0 76px;
  background:
    radial-gradient(850px 520px at 86% 8%, rgba(54, 95, 181, .13), transparent 68%),
    radial-gradient(620px 420px at 2% 95%, rgba(181, 72, 69, .08), transparent 72%),
    linear-gradient(145deg, #fff 0%, var(--warm) 55%, #f4f6fb 100%);
  border-bottom: 1px solid var(--line);
}
.ex-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: linear-gradient(rgba(23,36,58,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(23,36,58,.08) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: linear-gradient(to left, #000, transparent 67%);
}
.ex-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .88fr 1.12fr; gap: 58px; align-items: center; }
.ex-hero-grid > * { min-width: 0; }
.platform-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.platform-kicker span { padding: 7px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--card-border); color: var(--slate-700); font-size: 11px; font-family: var(--mono); font-weight: 700; letter-spacing: .03em; }
.platform-kicker span:first-child { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.ex-hero h1 { max-width: 650px; font-size: clamp(42px, 5.6vw, 72px); line-height: .98; letter-spacing: -.052em; }
.ex-hero-sub { max-width: 590px; margin-top: 24px; color: var(--slate-700); font-size: clamp(18px, 2vw, 21px); line-height: 1.55; }
.ex-hero .hero-cta { margin: 30px 0 12px; }
.hero-price { color: var(--slate-600); font-size: 14px; font-weight: 700; }
.trust-row { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 27px 0 0; padding: 21px 0 0; border-top: 1px solid rgba(23,36,58,.12); list-style: none; }
.trust-row li { display: flex; align-items: center; gap: 8px; color: var(--slate-700); font-size: 13px; font-weight: 650; }
.trust-row li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2c8a52; box-shadow: 0 0 0 4px rgba(44,138,82,.11); }
.ex-hero-visual { position: relative; margin: 0; transform: rotate(.6deg); }
.ex-hero-visual::before { content: ""; position: absolute; z-index: -1; inset: 5% -4% -6% 5%; border-radius: 28px; background: #dfe7f5; transform: rotate(-2deg); }
.ex-hero-visual .window { border-radius: 18px; border-color: #ccd4e1; }
.ex-hero-visual figcaption { margin: 14px 10px 0; color: var(--slate-600); font-size: 12.5px; text-align: right; }
.shot-label { display: flex; justify-content: space-between; margin: 0 4px 10px; color: var(--slate-600); font-family: var(--mono); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }

/* Small proof strip */
.quick-proof { background: #fff; border-bottom: 1px solid var(--line); }
.quick-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.quick-proof-grid > div { padding: 24px 30px; border-left: 1px solid var(--line); }
.quick-proof-grid > div:last-child { border-right: 1px solid var(--line); }
.quick-proof strong, .quick-proof span { display: block; }
.quick-proof strong { font-size: 14px; }
.quick-proof span { margin-top: 2px; color: var(--slate-600); font-size: 12.5px; }

/* Three-step workflow */
.ex-how { background: #fff; }
.simple-steps { max-width: 1030px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.simple-steps li { position: relative; display: flex; gap: 15px; padding: 29px 26px 31px; background: #fff; }
.simple-steps li + li { border-left: 1px solid var(--card-border); }
.step-number { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); font-family: var(--mono); font-size: 12px; font-weight: 800; }
.simple-steps h3 { margin: 4px 0 9px; font-size: 19px; }
.simple-steps p { color: var(--slate-600); font-size: 14.5px; line-height: 1.6; }
.process-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.process-shots figure { margin: 0; }
.process-shots .window { border-radius: 13px; box-shadow: 0 14px 40px rgba(23,36,58,.11); }
.process-shots figcaption { margin: 13px 4px 0; color: var(--slate-600); font-size: 13.5px; }
.process-shots figcaption b { color: var(--ink); }
.capture-note { margin-top: 18px; text-align: center; color: var(--slate-500); font-size: 12.5px; }

/* Capabilities */
.soft-section { background: var(--warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-tiles article { min-height: 220px; padding: 27px; border: 1px solid #e0ddd6; border-radius: 18px; background: rgba(255,255,255,.82); transition: transform .18s ease, box-shadow .18s ease; }
.feature-tiles article:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.feature-tiles article > span { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--red); }
.feature-tiles h3 { margin: 30px 0 10px; font-size: 20px; }
.feature-tiles p { color: var(--slate-600); font-size: 14.5px; }

/* Receipt */
.receipt-section { background: linear-gradient(150deg, #202d44 0%, #111a2a 100%); }
.receipt-copy h2 { margin: 14px 0 20px; font-size: clamp(30px, 4vw, 46px); }
.receipt-mini { display: grid; gap: 8px; margin-top: 34px; }
.receipt-status { display: grid; grid-template-columns: 10px auto 1fr; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.045); }
.receipt-status > span { width: 8px; height: 8px; border-radius: 50%; }
.receipt-status.good > span { background: #57c478; }
.receipt-status.warn > span { background: #f1b44c; }
.receipt-status.bad > span { background: #ed7670; }
.receipt-status b { color: #fff; font-size: 13px; }
.receipt-status small { justify-self: end; color: #aebbd0; font-size: 11.5px; }

/* Hidden data */
.hidden-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: center; }
.hidden-layout .section-head { margin: 0; }
.hidden-chips { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hidden-chips li { position: relative; padding: 12px 13px 12px 35px; border: 1px solid var(--card-border); border-radius: 10px; background: #fff; color: var(--slate-700); font-size: 13px; font-weight: 650; }
.hidden-chips li::before { content: "✓"; position: absolute; left: 13px; color: #2d8050; font-weight: 900; }

/* Platforms */
.platform-section { background: #fff; }
.platform-cards { max-width: 970px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.platform-card { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--card-border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.platform-card.windows-card { border-color: #bfcdec; background: linear-gradient(150deg, #f8fbff, #fff); }
.platform-card-head { display: flex; justify-content: space-between; align-items: center; }
.platform-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #2464cf; color: #fff; font-weight: 850; }
.platform-mark.apple-mark { background: var(--ink); }
.status-chip { padding: 6px 9px; border-radius: 99px; background: #e6efff; color: var(--accent-strong); font-family: var(--mono); font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.status-chip.quiet { background: var(--warm); color: var(--slate-600); }
.platform-card h3 { margin: 24px 0 5px; font-size: 27px; }
.platform-requirement { color: var(--slate-500); font-size: 12.5px; font-family: var(--mono); }
.platform-card ul { flex: 1; margin: 25px 0 28px; padding: 0; list-style: none; }
.platform-card li { position: relative; margin: 10px 0; padding-left: 22px; color: var(--slate-700); font-size: 14.5px; }
.platform-card li::before { content: "✓"; position: absolute; left: 0; color: #2d8050; font-weight: 800; }
.platform-card .btn, .platform-card .appstore { align-self: flex-start; }
.platform-note { margin-top: 24px; text-align: center; color: var(--slate-600); font-size: 13.5px; }

/* Download and purchase */
.get-section { background: #eef2f8; }
.get-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 20px; align-items: start; }
.get-card { padding: 32px; border: 1px solid var(--card-border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.get-card.featured { border-top: 5px solid var(--accent); }
.get-card.apple-card { border-top: 5px solid var(--ink); }
.get-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.get-card h3 { margin-top: 9px; font-size: clamp(23px, 3vw, 31px); }
.price { flex: none; text-align: right; }
.price strong, .price span { display: block; }
.price strong { font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.price span { margin-top: 4px; color: var(--slate-500); font-size: 11px; }
.get-lead { margin-top: 21px; color: var(--slate-700); font-size: 15.5px; }
.download-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 12px; }
.btn-store { background: #fff; color: var(--ink); border-color: var(--card-border); }
.win-pending { color: var(--slate-600); font-size: 12.5px; }
.download-meta { margin: 18px 0; padding: 13px 15px; border-radius: 10px; background: var(--band); color: var(--slate-600); font-family: var(--mono); font-size: 11.5px; }
.installer-note { margin-top: 14px; border: 1px solid #e7d7b2; border-radius: 12px; background: #fffbef; }
.installer-note summary { cursor: pointer; padding: 15px 17px; color: #79551f; font-size: 13.5px; font-weight: 750; }
.installer-note > div { padding: 0 18px 17px; color: #685b47; font-size: 13px; }
.installer-note p + p, .installer-note ol + p { margin-top: 10px; }
.installer-note ol { margin: 10px 0; padding-left: 21px; }
.installer-note li { margin: 7px 0; }
.checksum { margin-top: 14px; padding: 15px 17px; border: 1px solid var(--card-border); border-radius: 12px; }
.checksum span { display: block; color: var(--slate-500); font-family: var(--mono); font-size: 10.5px; font-weight: 650; }
.checksum code { display: block; margin-top: 7px; color: var(--slate-700); font-family: var(--mono); font-size: 10.5px; line-height: 1.55; overflow-wrap: anywhere; }
.checksum a { display: inline-block; margin-top: 7px; color: var(--accent); font-size: 12px; font-weight: 700; }
.buy-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 24px; padding-top: 23px; border-top: 1px solid var(--line); }
.buy-row div b, .buy-row div span { display: block; }
.buy-row div b { font-size: 14px; }
.buy-row div span { color: var(--slate-600); font-size: 12.5px; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #293953; transform: translateY(-2px); }
.appstore.large { margin-top: 27px; }
.plain-checks { margin: 27px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; }
.plain-checks li { position: relative; margin: 11px 0; padding-left: 22px; color: var(--slate-600); font-size: 13.5px; }
.plain-checks li::before { content: "✓"; position: absolute; left: 0; color: #2d8050; font-weight: 800; }
.refund-line { margin-top: 24px; text-align: center; color: var(--slate-600); font-size: 13px; }
.refund-line a { color: var(--accent); font-weight: 700; }

/* FAQ and origin */
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 72px; align-items: start; }
.faq-layout .section-head { margin: 0; position: sticky; top: 104px; }
.faq-preview .faq { max-width: none; }
.faq-preview code { font-family: var(--mono); font-size: 12px; }
.origin-section { background: var(--warm); border-top: 1px solid var(--line); }
.origin-card { display: grid; grid-template-columns: 110px 1fr; gap: 32px; align-items: center; max-width: 920px; padding: 42px 46px; border: 1px solid #ded9cf; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); }
.origin-card img { width: 110px; border-radius: 24%; box-shadow: 0 14px 30px rgba(23,36,58,.18); }
.origin-card h2 { margin: 10px 0 15px; font-size: clamp(25px, 3.5vw, 36px); }
.origin-card p { color: var(--slate-600); font-size: 15px; }
.origin-card p + p { margin-top: 10px; }
.origin-card a { color: var(--accent); font-weight: 700; }
.closing-simple { padding: 78px 0; text-align: center; background: linear-gradient(140deg, #233454, #141e31); color: #fff; }
.closing-simple h2 { margin-top: 15px; font-size: clamp(34px, 5vw, 52px); }
.closing-simple p { margin-top: 10px; color: #bdc9db; font-size: 18px; }
.closing-simple .hero-cta { justify-content: center; }

@media (max-width: 1040px) {
  .ex-hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .ex-hero-copy { max-width: 760px; }
  .ex-hero-visual { max-width: 850px; }
  .get-grid { grid-template-columns: 1fr; }
  .get-card.apple-card { display: grid; grid-template-columns: 1fr auto; column-gap: 30px; }
  .get-card.apple-card .plain-checks { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav-get { display: none; }
  .simple-steps { grid-template-columns: 1fr; }
  .simple-steps li + li { border-left: 0; border-top: 1px solid var(--card-border); }
  .process-shots { grid-template-columns: 1fr; gap: 30px; }
  .process-shots figure { max-width: 720px; }
  .feature-tiles { grid-template-columns: repeat(2, 1fr); }
  .hidden-layout, .faq-layout { grid-template-columns: 1fr; gap: 38px; }
  .faq-layout .section-head { position: static; }
}
@media (max-width: 720px) {
  .ex-hero { padding: 45px 0 54px; }
  .ex-hero h1 { font-size: clamp(40px, 12vw, 56px); }
  .ex-hero-visual { transform: none; }
  .quick-proof-grid { grid-template-columns: 1fr; padding-top: 9px; padding-bottom: 9px; }
  .quick-proof-grid > div { border: 0; padding: 12px 0; }
  .quick-proof-grid > div:last-child { border: 0; }
  .platform-cards { grid-template-columns: 1fr; }
  .get-card, .platform-card { padding: 25px 21px; }
  .receipt-status { grid-template-columns: 10px 1fr; }
  .receipt-status small { grid-column: 2; justify-self: start; }
  .get-card.apple-card { display: block; }
  .origin-card { grid-template-columns: 1fr; padding: 32px 26px; }
  .origin-card img { width: 82px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
@media (max-width: 560px) {
  .container { padding-left: 18px; padding-right: 18px; }
  .ex-hero .hero-cta { align-items: stretch; flex-direction: column; }
  .ex-hero .hero-cta .btn { width: 100%; }
  .ex-hero .appstore { align-self: flex-start; }
  .trust-row { flex-direction: column; }
  .feature-tiles, .hidden-chips { grid-template-columns: 1fr; }
  .get-card-top, .buy-row { align-items: flex-start; flex-direction: column; }
  .price { text-align: left; }
  .download-actions { flex-direction: column; }
  .download-actions .btn, .buy-row .btn { width: 100%; }
  .footer-cols { grid-template-columns: 1fr; }
}