/* =============================================================================
   CircuitShepherd marketing site — shared stylesheet
   Design tokens + shared components (fonts, reset, background, typography,
   nav [3 variants + responsive collapse], footer, buttons, badges, tooltips,
   keyframes). Per-page layout rules are appended below by the page tasks under
   their own clearly-labeled section comments (e.g. "===== landing =====").
   Source of truth: docs/design-handoff/README.md + the *.dc.html exports.
   ============================================================================= */

/* ===== @font-face ===== */
/* Space Grotesk was served by Google as a VARIABLE font, so the 400/500/600/700
   woff2 files were byte-identical. One variable face (400–700) replaces all four;
   the three redundant weight files were removed from the repo. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/site/assets/fonts/space-grotesk-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site/assets/fonts/ibm-plex-mono-400.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site/assets/fonts/ibm-plex-mono-500.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/site/assets/fonts/ibm-plex-mono-600.woff2) format('woff2');
}

/* ===== tokens ===== */
:root {
  /* surfaces */
  --bg: #07090c;
  --surface: #0d1319;
  --surface-2: #0a0f13;
  --surface-3: #0a1410;

  /* accent (phosphor green) */
  --accent: #37e6a4;
  --accent-hover: #5ff0b8;
  --accent-pressed: #2bd694;
  --accent-tint: #c4ffe6;
  --on-accent: #04110b;

  /* text */
  --text: #e7eef3;
  --text-2: #a9b8c4;
  --muted: #9fb0bd;
  --muted-2: #7c8b98;
  --muted-3: #6b7a86;
  --muted-4: #5c6a75;

  /* borders */
  --hair: rgba(255, 255, 255, 0.06);
  --hair-2: rgba(255, 255, 255, 0.08);
  --accent-border: rgba(55, 230, 164, 0.22);
  --accent-border-strong: rgba(55, 230, 164, 0.35);
  --accent-tint-bg: rgba(55, 230, 164, 0.06);

  /* paypal button (purchase page) */
  --paypal-bg: #ffc439;
  --paypal-text: #003087;
  --paypal-pal: #009cde;

  /* type */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* layout */
  --maxw: 1240px;
  --maxw-narrow: 860px;
  --pad-x: 40px;
  --pad-x-mobile: 20px;

  /* radii */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-card: 16px;
  --r-xl: 22px;
  --r-pill: 100px;

  /* effects */
  --glow: 0 0 20px rgba(55, 230, 164, 0.35);
  --glow-strong: 0 0 30px rgba(55, 230, 164, 0.4);
  --nav-bg: rgba(7, 9, 12, 0.6);
  --z-nav: 50;
}

/* ===== reset / base ===== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* anchor targets clear the sticky nav */
[id] { scroll-margin-top: 90px; }

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

a { color: var(--accent); }
@media (hover: hover) {
  a:hover { color: var(--accent-hover); }
}

::selection { background: var(--accent); color: var(--on-accent); }

.mono { font-family: var(--font-mono); }

/* ===== fixed background ===== */
/* 44px oscilloscope grid (radially masked) + top-right radial green glow.
   Rendered as an aria-hidden fixed layer behind the page content. */
.cs-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cs-bg::before,
.cs-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}
.cs-bg::before {
  background-image:
    linear-gradient(rgba(55, 230, 164, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 230, 164, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
}
.cs-bg::after {
  background: radial-gradient(1200px 600px at 78% -5%, rgba(55, 230, 164, 0.14), transparent 60%);
}

/* ===== typography ===== */
h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
}
h1 {
  font-size: clamp(2.125rem, 1.1rem + 4vw, 3.75rem); /* 34px → 60px */
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h2 {
  font-size: 36px;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
p {
  margin: 0 0 1rem;
  line-height: 1.6;
}
@media (max-width: 700px) {
  h2 { font-size: 28px; }
}

/* uppercase mono label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ===== buttons & badges ===== */
/* accent (green) CTA — base size; page tasks may resize per context */
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  cursor: pointer;
  padding: 15px 26px;
  border-radius: var(--r-md);
  box-shadow: var(--glow-strong);
  transition: filter .15s, transform .1s;
}
@media (hover: hover) {
  .btn-accent:hover {
    color: var(--on-accent);
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 26px rgba(55, 230, 164, 0.8));
  }
}
.btn-accent:active {
  filter: brightness(0.9) drop-shadow(0 0 6px rgba(55, 230, 164, 0.5));
  transform: scale(0.97);
}

/* ghost (outlined) button */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #cdd8e0;
  background: transparent;
  cursor: pointer;
  padding: 15px 22px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
@media (hover: hover) {
  .btn-ghost:hover {
    color: #cdd8e0;
    border-color: rgba(55, 230, 164, 0.5);
    box-shadow: 0 0 22px rgba(55, 230, 164, 0.25);
  }
}
.btn-ghost:active {
  border-color: rgba(55, 230, 164, 0.8);
  box-shadow: 0 0 12px rgba(55, 230, 164, 0.3);
  transform: scale(0.97);
}

/* pill badge (eyebrow label with a glowing status dot) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(55, 230, 164, 0.3);
  background: var(--accent-tint-bg);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.badge::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.badge--nodot::before { display: none; }

/* ===== nav ===== */
.cs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 22px 40px;
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}

/* nav variants — see the *.dc.html exports:
   --landing : brand · store badges · spacer · section links · "Get it" CTA
   --minimal : brand · spacer · "back to overview" (+ App Store badge)  [purchase/contact]
   --manual  : brand (+ "manual" pill) · spacer · "back to overview"    [manual]
   The modifiers are markup hooks; the base .cs-nav handles their layout. Only the
   landing variant carries .cs-links (base gap 30px, below) — minimal/manual must NOT,
   so the ≤1000px `.cs-links{display:none}` collapse can never hide the checkout nav. */

/* brand (logo + name, optional pill) */
.cs-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  transition: filter .15s, text-shadow .15s, transform .1s;
}
@media (hover: hover) {
  .cs-brand:hover {
    color: var(--text);
    filter: drop-shadow(0 0 10px rgba(55, 230, 164, 0.5));
    text-shadow: 0 0 12px rgba(55, 230, 164, 0.6);
  }
}
.cs-brand:active {
  filter: drop-shadow(0 0 6px rgba(55, 230, 164, 0.4));
  transform: scale(0.97);
}
.cs-brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: block;
  box-shadow: 0 0 16px rgba(55, 230, 164, 0.35);
}
.cs-brand span:not(.cs-pill) {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* small green "manual" pill next to the brand name */
.cs-pill {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  border: 1px solid rgba(55, 230, 164, 0.3);
  background: var(--accent-tint-bg);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  margin-left: 2px;
  white-space: nowrap;
}

/* store badge (App Store / Purchase-for-Mac image link) — 34px tall, never shrinks */
.cs-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}
.cs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 0;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: filter .15s, transform .1s;
}
@media (hover: hover) {
  .cs-badge:hover { filter: drop-shadow(0 0 14px rgba(55, 230, 164, 0.45)); }
}
.cs-badge:active {
  filter: drop-shadow(0 0 7px rgba(55, 230, 164, 0.35));
  transform: scale(0.97);
}
.cs-badge img {
  height: 34px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* flexible spacer between the brand cluster and the right-hand nav group */
.cs-spacer { flex: 1; }

/* landing section links group (hidden on tablet collapse) */
.cs-links {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}

/* nav text links + "back to overview" link */
.cs-links a,
.cs-back {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 14.5px;
  white-space: nowrap;
  transition: color .15s, text-shadow .15s, transform .1s;
}
@media (hover: hover) {
  .cs-links a:hover,
  .cs-back:hover {
    color: var(--accent);
    text-shadow: 0 0 12px rgba(55, 230, 164, 0.8), 0 0 28px rgba(55, 230, 164, 0.4);
  }
}
.cs-links a:active,
.cs-back:active {
  color: var(--accent-tint);
  text-shadow: 0 0 6px rgba(55, 230, 164, 1), 0 0 16px rgba(55, 230, 164, 0.6);
  transform: scale(0.96);
}

/* landing nav "Get it" CTA — smaller than the in-page accent buttons, with
   correspondingly smaller hover/active glow than the base .btn-accent
   (values from docs/design-handoff/CircuitShepherd.dc.html, data-cs="navget"). */
.cs-nav--landing .btn-accent {
  font-size: 14.5px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 20px rgba(55, 230, 164, 0.35);
  white-space: nowrap;
}
@media (hover: hover) {
  .cs-nav--landing .btn-accent:hover {
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 20px rgba(55, 230, 164, 0.75));
  }
}
.cs-nav--landing .btn-accent:active {
  filter: brightness(0.9) drop-shadow(0 0 5px rgba(55, 230, 164, 0.5));
  transform: scale(0.96);
}

/* ----- responsive nav collapse (badges keep full size at every width) ----- */
@media (max-width: 1070px) {
  .cs-nav { gap: 14px; }
  .cs-links { gap: 18px; }
  .cs-badges { gap: 8px; }
}
@media (max-width: 1000px) {
  .cs-links { display: none; } /* only the landing section-links group uses .cs-links */
}
@media (max-width: 700px) {
  .cs-nav { gap: 10px; padding: 14px 20px; }
  .cs-badges { gap: 6px; }
  .cs-brand img { width: clamp(26px, 7vw, 36px); height: clamp(26px, 7vw, 36px); }
  .cs-brand span:not(.cs-pill) { font-size: clamp(11px, 3.6vw, 18px); }
  .cs-nav--landing .btn-accent { font-size: 12.5px; padding: 8px 12px; }
}
@media (max-width: 640px) {
  /* Header only: once the landing nav gets tight, drop the "Purchase for Desktop"
     badge (the 2nd/last .cs-badge in the header) so brand + App Store badge + "Get it"
     never overlap. The get-it section (.cs-getit-badges) keeps BOTH badges — unaffected;
     the minimal/manual navs have a single App Store badge (no .cs-badges) — unaffected. */
  .cs-nav--landing .cs-badges .cs-badge:last-child { display: none; }
}
@media (max-width: 430px) {
  /* Phone: the App Store badge is the CTA here — drop the redundant nav "Get it"
     button (it only scrolls to #getit; the get-it section at the page bottom keeps
     its own CTAs). Leaves brand + App Store badge, which fit down to ~360px. */
  .cs-nav--landing .btn-accent { display: none; }
}
@media (max-width: 360px) {
  /* Extreme narrow (small phones down to 320px): shrink the single remaining nav
     badge a touch so brand + badge never collide. Get-it section badges (56px,
     .cs-getit-badges) are unaffected — this only scopes to badges inside the nav. */
  .cs-nav .cs-badge img { height: 29px; }
}
@media (max-width: 500px) {
  /* Phone: the minimal/manual nav (brand [+ 'manual' pill] + '← back to overview' +
     App Store badge) doesn't fit and forces the whole page to scroll horizontally.
     Drop the secondary App Store badge here — the brand (home) + back-link are what
     matter on these pages, and the badge is redundant with the landing/get-it section.
     (Never wraps to a second row.) Scoped to minimal/manual only; landing nav handled above. */
  .cs-nav--minimal .cs-badge,
  .cs-nav--manual .cs-badge { display: none; }
  /* also shorten "← back to overview" → "← back" so brand [+ pill] + back-link fit
     (the manual nav's 'manual' pill makes the full label overflow even without the badge). */
  .cs-back-rest { display: none; }
}

/* ===== store-badge tooltip ===== */
/* dark box with green text/border + a diamond arrow; fades and slides in on hover */
[data-cs-tip] { position: relative; }
[data-cs-tip]::after {
  content: attr(data-cs-tip);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, -6px);
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent-border-strong);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(55, 230, 164, 0.12);
  z-index: 10;
}
[data-cs-tip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translate(-50%, -6px) rotate(45deg);
  width: 9px;
  height: 9px;
  background: var(--surface);
  border-left: 1px solid var(--accent-border-strong);
  border-top: 1px solid var(--accent-border-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 11;
}
@media (hover: hover) {
  [data-cs-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
  [data-cs-tip]:hover::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
}

/* ===== footer ===== */
.cs-footer { border-top: 1px solid var(--hair); }
.cs-footer-row {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cs-footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.cs-footer-brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: block;
}
.cs-footer-brand .name {
  font-weight: 600;
  font-size: 16px;
}
.cs-footer-brand .tag {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted-3);
  margin-left: 6px;
}
.cs-footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 14px;
}
.cs-footer-links a {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s, text-shadow .15s, transform .1s;
}
@media (hover: hover) {
  .cs-footer-links a:hover {
    color: var(--accent);
    text-shadow: 0 0 12px rgba(55, 230, 164, 0.8), 0 0 28px rgba(55, 230, 164, 0.4);
  }
}
.cs-footer-links a:active {
  color: var(--accent-tint);
  transform: scale(0.96);
}
.cs-copy {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-4);
}
@media (max-width: 700px) {
  .cs-footer-row { padding: 32px 20px; }
  .cs-copy { padding: 0 20px 32px; }
}

/* ===== keyframes ===== */
/* diagonal light sweep across the landing hero screenshot */
@keyframes cs-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
/* gentle idle float of the get-it app icon */
@keyframes cs-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
/* lightning storm flashes behind the get-it app icon (two offset instances) */
@keyframes cs-storm1 {
  0%, 14.5% { opacity: 0; background-position: 8% 20%; background-size: 200px 150px; }
  15%   { opacity: 0.9; }
  16%   { opacity: 0.1; }
  17.5% { opacity: 1; }
  19%, 37.5% { opacity: 0; background-position: 78% 68%; background-size: 140px 110px; }
  38.5% { opacity: 0.8; }
  39.5% { opacity: 0.15; }
  41%   { opacity: 0.95; }
  43%, 59.5% { opacity: 0; background-position: 48% 6%; background-size: 260px 190px; }
  60.5% { opacity: 1; }
  61.5% { opacity: 0.2; }
  62.5% { opacity: 0.7; }
  64%, 83.5% { opacity: 0; background-position: 20% 84%; background-size: 170px 130px; }
  84.5% { opacity: 0.85; }
  85.5% { opacity: 0.1; }
  87%   { opacity: 0.9; }
  89%, 100% { opacity: 0; background-position: 8% 20%; background-size: 200px 150px; }
}
@keyframes cs-storm2 {
  0%, 9.5% { opacity: 0; background-position: 86% 14%; background-size: 150px 120px; }
  10.2% { opacity: 0.75; }
  11%   { opacity: 0.05; }
  12%   { opacity: 0.9; }
  13.5%, 35% { opacity: 0; background-position: 12% 58%; background-size: 230px 160px; }
  35.8% { opacity: 0.9; }
  36.8% { opacity: 0.1; }
  38%   { opacity: 0.8; }
  39.5%, 63% { opacity: 0; background-position: 62% 92%; background-size: 160px 120px; }
  63.8% { opacity: 0.85; }
  65%   { opacity: 0.15; }
  66.2% { opacity: 0.95; }
  68%, 86% { opacity: 0; background-position: 36% 30%; background-size: 280px 200px; }
  86.8% { opacity: 1; }
  88%   { opacity: 0.2; }
  89%   { opacity: 0.6; }
  90.5%, 100% { opacity: 0; background-position: 86% 14%; background-size: 150px 120px; }
}
/* jolt shakes of the get-it app icon, synchronized with the storm flashes */
@keyframes cs-jolt1 {
  0%, 16%, 25%, 39.5%, 48%, 61.5%, 70%, 85.5%, 94%, 100% { transform: none; }
  17.5% { transform: scale(1.11) translate(-2px, 1px) rotate(-2deg); }
  19.5% { transform: scale(0.95) translate(2px, -1px) rotate(1.5deg); }
  21.5% { transform: scale(1.06) rotate(1deg); }
  23.5% { transform: scale(0.99); }
  41%   { transform: scale(1.09) translate(2px, 1px) rotate(1.5deg); }
  43%   { transform: scale(0.96) rotate(-1deg); }
  45%   { transform: scale(1.04); }
  47%   { transform: scale(1); }
  63%   { transform: scale(1.12) translate(-2px, 0) rotate(2deg); }
  65%   { transform: scale(0.95) translate(1px, 1px) rotate(-1.5deg); }
  67%   { transform: scale(1.05); }
  69%   { transform: scale(1); }
  87%   { transform: scale(1.1) translate(1px, -1px) rotate(-1.5deg); }
  89%   { transform: scale(0.96) rotate(1deg); }
  91%   { transform: scale(1.04); }
  93%   { transform: scale(1); }
}
@keyframes cs-jolt2 {
  0%, 11%, 19%, 36.5%, 45%, 64.5%, 73%, 87.5%, 96%, 100% { transform: none; }
  12.5% { transform: scale(1.1) translate(1px, -1px) rotate(1.5deg); }
  14.5% { transform: scale(0.95) translate(-2px, 1px) rotate(-1.5deg); }
  16.5% { transform: scale(1.05) rotate(-1deg); }
  18%   { transform: scale(0.99); }
  38%   { transform: scale(1.11) rotate(-2deg); }
  40%   { transform: scale(0.95) translate(2px, -1px) rotate(1deg); }
  42%   { transform: scale(1.05); }
  44%   { transform: scale(1); }
  66%   { transform: scale(1.09) translate(-1px, 1px) rotate(-1.5deg); }
  68%   { transform: scale(0.96) rotate(1.5deg); }
  70.5% { transform: scale(1.04); }
  72%   { transform: scale(1); }
  89%   { transform: scale(1.12) translate(2px, 0) rotate(2deg); }
  91%   { transform: scale(0.95) rotate(-1deg); }
  93.5% { transform: scale(1.05); }
  95.5% { transform: scale(1); }
}

/* =============================================================================
   Per-page sections are appended below by later tasks, e.g.:
   ===== landing =====, ===== purchase =====, ===== manual =====, ===== contact =====
   ============================================================================= */

/* =============================================================================
   ===== landing =====
   Landing page body (site/index.php): hero, marquee, shorts strip, how-it-works,
   why-different, use-cases, video/tutorial, get-it. Nav + footer + background come
   from the shared components above. Breakpoints mirror the design source
   (docs/design-handoff/CircuitShepherd.dc.html): 1100 / 980 / 700px.
   ============================================================================= */

/* content sits above the fixed .cs-bg grid; centered content column */
.cs-landing { position: relative; z-index: 1; }
.cs-wrap { max-width: var(--maxw); margin: 0 auto; }

/* subtle decorative artwork glow at the top-right (3rd fixed background layer) */
.cs-landing-art {
  position: fixed;
  top: -60px;
  right: -80px;
  width: min(52vw, 760px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  background-image: url('/site/assets/img/artwork-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  filter: grayscale(1) sepia(1) hue-rotate(105deg) saturate(2.6) brightness(0.9) blur(2px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
}

/* accent-colored H1 phrase */
.accent { color: var(--accent); }

/* ----- hero ----- */
.cs-hero {
  padding: 66px 40px 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.cs-hero-copy { container-type: inline-size; }
.cs-hero .badge { margin-bottom: 26px; }
.cs-hero-h1 {
  font-size: clamp(34px, 10.2cqw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 22px;
}
.cs-hero-h1 .h1a,
.cs-hero-h1 .accent { white-space: nowrap; }
.cs-hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 480px;
  margin: 0 0 34px;
}
.cs-hero-sub em { color: var(--text); font-style: normal; }
.cs-hero-ctas {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.cs-hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  font-family: var(--font-mono);
}
.cs-hero-stat .num { font-size: 24px; font-weight: 600; color: var(--text); }
.cs-hero-stat .lbl { font-size: 12.5px; color: var(--muted-2); letter-spacing: 0.06em; }
.cs-hero-stat-div { width: 1px; background: rgba(255, 255, 255, 0.1); }

/* hero product shot ("scope frame") */
.cs-hero-shot { position: relative; }
.cs-hero-shot-glow {
  position: absolute;
  inset: -14px;
  border-radius: 20px;
  background: radial-gradient(circle at 60% 30%, rgba(55, 230, 164, 0.25), transparent 65%);
  filter: blur(24px);
}
.cs-hero-shot-frame {
  position: relative;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  padding: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.cs-hero-shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #5f6f7b;
}
.cs-hero-shot-bar .dot { width: 9px; height: 9px; border-radius: 50%; }
.cs-hero-shot-bar .dot-r { background: #ff5f57; }
.cs-hero-shot-bar .dot-y { background: #febc2e; }
.cs-hero-shot-bar .dot-g { background: #28c840; }
.cs-hero-shot-bar .title { margin-left: 8px; }
.cs-hero-shot-bar .live { margin-left: auto; color: var(--accent); }
.cs-hero-shot-img {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
}
.cs-hero-shot-img img { width: 100%; display: block; border-radius: 9px; }
.cs-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(55, 230, 164, 0.14), transparent);
  animation: cs-sweep 3.6s linear infinite;
}

/* ----- marquee strip ----- */
.cs-marquee-strip {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.015);
  margin-top: 34px;
  overflow: hidden;
}
.cs-marquee {
  padding: 16px 40px;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted-2);
}
.cs-marquee .lead { color: var(--accent); }

/* ----- shorts strip ----- */
.cs-shorts { padding: 48px 40px; }
.cs-shorts-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.cs-short {
  position: relative;
  aspect-ratio: 9 / 20;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--surface-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.cs-short iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----- generic section padding block ----- */
.cs-sec-pad { padding: 64px 40px; }
.cs-sechead { margin-bottom: 14px; }
.cs-h2 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.cs-lead {
  color: var(--text-2);
  font-size: 18px;
  margin: 0 0 40px;
}

/* ----- how it works ----- */
.cs-how { border-top: 1px solid var(--hair); background: rgba(255, 255, 255, 0.015); }
.cs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.cs-step {
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  padding: min(8%, 40px);
  position: relative;
  overflow: hidden;
}
.cs-step-n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.cs-step-media {
  aspect-ratio: 2 / 1;
  margin: 16px 0 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cs-step-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 14px rgba(55, 230, 164, 0.18));
}
.cs-step h3 { font-size: 20px; font-weight: 600; margin: 0 0 9px; letter-spacing: -0.01em; }
.cs-step p { color: #98a7b3; font-size: 15px; line-height: 1.55; margin: 0; }

/* ----- why different ----- */
.cs-different {
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(55, 230, 164, 0.03), transparent 260px);
}
.cs-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cs-feature {
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.02);
  padding: 24px;
  transition: border-color .2s;
}
@media (hover: hover) {
  .cs-feature:hover { border-color: rgba(55, 230, 164, 0.4); }
}
.cs-feature-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cs-feature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(55, 230, 164, 0.12);
  color: var(--accent);
  font-size: 15px;
  border: 1px solid rgba(55, 230, 164, 0.25);
}
.cs-feature h3 { font-size: 17.5px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.cs-feature p { color: #95a4b0; font-size: 14.5px; line-height: 1.56; margin: 0; }

/* ----- use cases ----- */
.cs-usecases { border-top: 1px solid var(--hair); background: rgba(255, 255, 255, 0.015); }
.cs-uc-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.cs-uc-left { position: sticky; top: 100px; }
.cs-usecases .cs-h2 { margin: 0 0 18px; font-size: 34px; }
.cs-usecases .cs-lead { font-size: 16.5px; line-height: 1.6; margin: 0 0 24px; }
.cs-uc-card {
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.cs-uc-card img { width: 100%; display: block; }
.cs-uc-list { display: flex; flex-direction: column; }
.cs-uc-row {
  display: flex;
  gap: 18px;
  padding: 20px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cs-uc-id {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  padding-top: 3px;
  min-width: 30px;
}
.cs-uc-row h3 { font-size: 18px; font-weight: 600; margin: 0 0 5px; letter-spacing: -0.01em; }
.cs-uc-row p { color: #95a4b0; font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ----- video / tutorial ----- */
.cs-video { border-top: 1px solid var(--hair); }
.cs-video-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 64px;
  align-items: center;
  justify-content: start;
}
.cs-video .cs-h2 { font-size: 36px; }
.cs-video .cs-lead { font-size: 18px; line-height: 1.6; margin: 0 0 28px; max-width: 440px; }
.cs-video-thumb {
  position: relative;
  display: block;
  width: 340px;
  max-width: 100%;
  justify-self: start;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.cs-video-thumb img { width: 100%; display: block; }
.cs-video-thumb .shade { position: absolute; inset: 0; background: rgba(7, 9, 12, 0.28); }
.cs-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
  font-size: 17px;
  box-shadow: 0 0 26px rgba(55, 230, 164, 0.55);
  transition: filter .18s ease, transform .18s ease, background .18s ease;
}
@media (hover: hover) {
  .cs-video-thumb:hover .cs-play {
    background: var(--accent-hover);
    filter: brightness(1.15) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 30px rgba(55, 230, 164, 0.8));
    transform: translate(-50%, -50%) scale(1.08);
  }
}
.cs-video-thumb:active .cs-play {
  background: var(--accent-pressed);
  filter: brightness(0.92) drop-shadow(0 0 8px rgba(55, 230, 164, 0.5));
  transform: translate(-50%, -50%) scale(0.94);
}

/* ----- get it ----- */
.cs-getit { padding: 72px 40px; }
.cs-getit-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(900px 400px at 50% -20%, rgba(55, 230, 164, 0.16), transparent 60%),
    linear-gradient(160deg, var(--surface), var(--surface-2));
  padding: 64px 40px;
  text-align: center;
}
.cs-getit-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(55, 230, 164, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 230, 164, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
}
.cs-getit-inner { position: relative; z-index: 0; }
.cs-getit-icon { position: relative; width: 92px; margin: 0 auto 22px; }
.cs-getit-icon .cs-storm1,
.cs-getit-icon .cs-storm2 {
  position: absolute;
  inset: -70px -90px;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  opacity: 0;
}
.cs-getit-icon .cs-storm1 {
  background-image: radial-gradient(closest-side, rgba(230, 255, 245, 0.95), rgba(55, 230, 164, 0.35) 45%, transparent 72%);
  background-position: 8% 20%;
  background-size: 200px 150px;
  animation: cs-storm1 8s linear infinite;
}
.cs-getit-icon .cs-storm2 {
  background-image: radial-gradient(closest-side, rgba(230, 255, 245, 0.85), rgba(55, 230, 164, 0.3) 45%, transparent 72%);
  background-position: 86% 14%;
  background-size: 150px 120px;
  animation: cs-storm2 11s linear infinite;
}
.cs-getit-icon .cs-jolt1 { display: block; animation: cs-jolt1 8s linear infinite; }
.cs-getit-icon .cs-jolt2 { display: block; animation: cs-jolt2 11s linear infinite; }
.cs-getit-icon img {
  position: relative;
  display: block;
  width: 92px;
  height: 92px;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(55, 230, 164, 0.35);
  animation: cs-float 5s ease-in-out infinite;
}
.cs-getit .eyebrow { font-size: 13px; }
.cs-getit-h2 { font-size: 46px; font-weight: 700; letter-spacing: -0.025em; margin: 14px 0 16px; }
.cs-getit-badges { display: flex; gap: 16px; justify-content: center; align-items: center; }
.cs-getit-badges .cs-badge { border-radius: 12px; }
@media (hover: hover) {
  .cs-getit-badges .cs-badge:hover { filter: drop-shadow(0 0 18px rgba(55, 230, 164, 0.45)); }
}
.cs-getit-badges .cs-badge:active { filter: drop-shadow(0 0 8px rgba(55, 230, 164, 0.35)); transform: scale(0.97); }
.cs-getit-badges .cs-badge img { height: 56px; }
@media (max-width: 430px) {
  /* Phone: stack the two get-it badges vertically so neither is clipped. */
  .cs-getit-badges { flex-direction: column; }
  /* The TOP (first) badge's hover hint defaults to BELOW it, which would land on the
     badge beneath it — flip this one's tooltip + arrow to appear ABOVE the badge. */
  .cs-getit-badges .cs-badge:first-child::after {
    top: auto;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 6px);
  }
  .cs-getit-badges .cs-badge:first-child:hover::after {
    transform: translate(-50%, 0);
  }
  .cs-getit-badges .cs-badge:first-child::before {
    top: auto;
    bottom: calc(100% + 7px);
    border-left: none;
    border-top: none;
    border-right: 1px solid var(--accent-border-strong);
    border-bottom: 1px solid var(--accent-border-strong);
    transform: translate(-50%, 6px) rotate(45deg);
  }
  .cs-getit-badges .cs-badge:first-child:hover::before {
    transform: translate(-50%, 0) rotate(45deg);
  }
}
.cs-getit-manual {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted-2);
  margin: 26px 0 0;
  text-align: center;
}
.cs-getit-manual a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  transition: color .15s, text-shadow .15s, transform .1s;
}
@media (hover: hover) {
  .cs-getit-manual a:hover {
    color: var(--accent);
    text-shadow: 0 0 12px rgba(55, 230, 164, 0.8), 0 0 28px rgba(55, 230, 164, 0.4);
  }
}
.cs-getit-manual a:active { color: var(--accent-tint); transform: scale(0.96); }

/* ----- landing responsive ----- */
@media (max-width: 1100px) {
  .cs-shorts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .cs-hero { grid-template-columns: 1fr; gap: 44px; padding: 52px 32px 36px; }
  .cs-hero-h1 { font-size: clamp(38px, 6.2vw, 54px); }
  .cs-features { grid-template-columns: repeat(2, 1fr); }
  .cs-uc-grid { grid-template-columns: 1fr; gap: 40px; }
  .cs-uc-left { position: static; }
  .cs-video-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 700px) {
  .cs-hero { padding: 44px 20px 28px; gap: 36px; }
  .cs-hero-h1 { font-size: clamp(34px, 10vw, 42px); }
  .cs-hero-h1 .h1a { white-space: normal; }
  .cs-hero-ctas a { width: 100%; justify-content: center; }
  .cs-hero-stats { gap: 18px; flex-wrap: wrap; }
  .cs-marquee { padding: 14px 20px; gap: 16px; }
  .cs-sec-pad { padding: 48px 20px; }
  .cs-shorts { padding: 36px 20px; }
  .cs-getit { padding: 56px 16px; }
  .cs-getit-card { padding: 44px 20px; }
  .cs-getit-h2 { font-size: 32px; }
  /* .cs-landing prefix outranks the section-specific H2 sizes
     (.cs-video/.cs-usecases .cs-h2) so every H2 drops to 28px on mobile,
     matching the design's `!important` collapse. */
  .cs-landing .cs-h2 { font-size: 28px; }
  .cs-h2 br { display: none; }
  .cs-sechead { flex-wrap: wrap; }
  .cs-steps { grid-template-columns: 1fr; }
  .cs-features { grid-template-columns: 1fr; }
}

/* =============================================================================
   ===== purchase =====
   Purchase page body (site/purchase.php): eyebrow/H1/subcopy header, then a 2-col
   grid — left "what you'll receive" numbered cards + fine print, right an accent
   price card embedding the real cslic PayPal subscription button (`.cs-paypal`,
   rendered by \Cslic\echoPurchaseButton() — do not restyle the SDK's own iframe/
   button internals, only the container around it). Nav (--minimal) + footer +
   background come from the shared components above. Breakpoints mirror the design
   source (docs/design-handoff/Purchase.dc.html): 980 / 700px.
   ============================================================================= */

.cs-purchase {
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 64px 40px 88px;
}

/* header */
.cs-purchase .badge { margin-bottom: 24px; }
.cs-purchase-h1 { font-size: clamp(38px, 5vw, 54px); margin: 0 0 18px; }
.cs-purchase-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 560px;
  margin: 0 0 52px;
}

/* 2-col grid: left "what you get" / right price card */
.cs-purchase-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: start;
}

.cs-purchase-h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

/* numbered "you'll receive" cards */
.cs-purchase-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-purchase-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 22px;
}
.cs-purchase-card .n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  padding-top: 2px;
}
.cs-purchase-card .t { font-weight: 600; font-size: 16.5px; margin-bottom: 4px; }
.cs-purchase-card .b { color: var(--text-2); font-size: 15px; line-height: 1.55; }
/* card 03 — green-tinted highlight (the license key) */
.cs-purchase-card--accent {
  border-color: rgba(55, 230, 164, 0.28);
  background: linear-gradient(160deg, var(--surface), var(--surface-3));
  box-shadow: 0 0 24px rgba(55, 230, 164, 0.08);
}

.cs-purchase-fine {
  color: var(--muted-2);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 22px 0 0;
  max-width: 520px;
}

/* right: accent price card */
.cs-purchase-price {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(500px 260px at 50% -20%, rgba(55, 230, 164, 0.16), transparent 60%),
    linear-gradient(160deg, var(--surface), var(--surface-2));
  padding: 40px 36px;
}
/* faint grid overlay, masked to the top (mirrors .cs-getit-grid) */
.cs-purchase-price-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(55, 230, 164, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 230, 164, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
}
.cs-purchase-price-inner { position: relative; z-index: 0; }
.cs-purchase-price .eyebrow { margin-bottom: 18px; }

.cs-purchase-price-amt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.cs-purchase-price-amt .amt { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.cs-purchase-price-amt .per { color: var(--text-2); font-size: 17px; }

.cs-purchase-price-note {
  color: var(--muted-2);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 28px;
}

/* container for the real cslic PayPal button (SDK script + its own button/iframe
   render here) — sized to sit in the card; never restyle PayPal's own internals */
.cs-paypal { width: 100%; }

.cs-purchase-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
}
.cs-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.cs-purchase-eula {
  border-top: 1px solid var(--hair-2);
  margin-top: 26px;
  padding-top: 18px;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.6;
}
.cs-purchase-eula a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- purchase responsive ----- */
@media (max-width: 980px) {
  .cs-purchase-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 700px) {
  .cs-purchase { padding: 44px 20px 56px; }
  .cs-purchase-h1 { font-size: 34px; }
  .cs-purchase-grid { gap: 32px; }
}

/* =============================================================================
   ===== purchase-done =====
   Post-checkout result page (site/purchase-done.php). Not in the design
   handoff — built in-theme to match ===== purchase ===== above: same
   eyebrow/H1/subcopy header, single narrow column instead of the 2-col grid.
   `.cs-done` wraps the *unmodified* output of the cslic function
   \Cslic\checkAndEchoPurchaseDone() (license key / download credentials on
   success, or a plain "ERROR: ..." string on an invalid/pending flow) in the
   same green-tinted accent-card look as purchase.php's card 03 / price card.
   Only generic element selectors are styled here — the function's markup is
   not our contract, so nothing depends on its exact structure.
   ============================================================================= */

.cs-done-main {
  max-width: var(--maxw-narrow);
  width: 100%;
  margin: 0 auto;
  padding: 64px 40px 96px;
}

.cs-done-h1 { font-size: clamp(38px, 5vw, 54px); margin: 18px 0 18px; }
.cs-done-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 560px;
  margin: 0 0 40px;
}

/* accent-card look (mirrors .cs-purchase-card--accent / .cs-purchase-price) */
.cs-done {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(55, 230, 164, 0.28);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--surface), var(--surface-3));
  box-shadow: 0 0 24px rgba(55, 230, 164, 0.08);
  padding: 36px 40px;
  /* the cslic result may contain a long license key or download URL — break them so
     they wrap instead of overflowing/clipping (esp. on phones). Critical content. */
  overflow-wrap: anywhere;
}
.cs-done a, .cs-done code, .cs-done span { overflow-wrap: anywhere; word-break: break-word; }

/* style whatever generic markup the cslic function happens to emit, without
   assuming its exact shape (headings, inline-colored spans, links, code) */
.cs-done h1,
.cs-done h2,
.cs-done h3 {
  margin: 0 0 12px;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.cs-done h1:not(:first-child),
.cs-done h2:not(:first-child),
.cs-done h3:not(:first-child) { margin-top: 26px; }
.cs-done p { margin: 0 0 14px; color: var(--text-2); line-height: 1.6; }
.cs-done p:last-child { margin-bottom: 0; }
.cs-done span { font-family: var(--font-mono); }
.cs-done a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cs-done code {
  font-family: var(--font-mono);
  background: var(--accent-tint-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-sm);
  padding: 2px 7px;
}

/* ----- purchase-done responsive ----- */
@media (max-width: 700px) {
  .cs-done-main { padding: 44px 20px 56px; }
  .cs-done-h1 { font-size: 34px; }
  .cs-done { padding: 28px 24px; }
}

/* =============================================================================
   ===== contact =====
   Contact page (site/contact.php): eyebrow/H1/subcopy header (narrow,
   .cs-contact max-width 860px — narrower than the shared 1240px .cs-nav/.cs-footer),
   then a centered accent card (app icon, name, mono role line, mailto CTA button,
   fine-print note) and a 2-col grid of link cards ("Prefer X?" / "Stuck
   somewhere?"). Nav (--minimal) + footer + background come from the shared
   components above. Breakpoints mirror the design source
   (docs/design-handoff/Contact.dc.html): 900 / 700px.
   ============================================================================= */

.cs-contact {
  max-width: var(--maxw-narrow);
  width: 100%;
  margin: 0 auto;
  padding: 72px 40px 96px;
}

.cs-contact .badge { margin-bottom: 24px; }
.cs-contact-h1 { font-size: clamp(38px, 5vw, 54px); margin: 0 0 18px; }
.cs-contact-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 600px;
  margin: 0 0 48px;
}

/* centered accent card (mirrors .cs-purchase-price look, centered content) */
.cs-contact-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 320px at 50% -20%, rgba(55, 230, 164, 0.16), transparent 60%),
    linear-gradient(160deg, var(--surface), var(--surface-2));
  padding: 44px 40px;
  margin-bottom: 20px;
}
.cs-contact-card-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(55, 230, 164, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 230, 164, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
}
.cs-contact-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cs-contact-icon {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  display: block;
  box-shadow: 0 0 26px rgba(55, 230, 164, 0.4);
  margin-bottom: 18px;
}
.cs-contact-name {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.cs-contact-role {
  font-size: 13.5px;
  color: var(--muted-2);
  margin-bottom: 26px;
}
.cs-contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  padding: 15px 28px;
  border-radius: var(--r-md);
  box-shadow: 0 0 30px rgba(55, 230, 164, 0.35);
  transition: filter .15s, transform .1s;
}
@media (hover: hover) {
  .cs-contact-mail:hover {
    color: var(--on-accent);
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 26px rgba(55, 230, 164, 0.8));
  }
}
.cs-contact-mail:active {
  filter: brightness(0.9) drop-shadow(0 0 6px rgba(55, 230, 164, 0.5));
  transform: scale(0.97);
}
.cs-contact-note {
  font-size: 12.5px;
  color: var(--muted-2);
  margin-top: 16px;
}

/* 2-col link cards ("Prefer X?" / "Stuck somewhere?") */
.cs-contact-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cs-contact-linkcard {
  display: block;
  text-decoration: none;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 24px 26px;
  transition: border-color .15s, background .15s;
}
@media (hover: hover) {
  .cs-contact-linkcard:hover {
    border-color: var(--accent-border-strong);
    background: #0f161c;
  }
}
.cs-contact-linkcard .t {
  font-weight: 600;
  font-size: 16.5px;
  color: var(--text);
  margin-bottom: 6px;
}
.cs-contact-linkcard .b {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ----- contact responsive ----- */
@media (max-width: 900px) {
  .cs-contact-links { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 700px) {
  .cs-contact { padding: 44px 20px 64px; }
  .cs-contact-card { padding: 36px 24px; }
}

/* =============================================================================
   ===== manual =====
   Shared layout for site/manual/*.php pages (design source:
   docs/design-handoff/Manual - How to start.dc.html) — a 260px sticky sidebar
   ("MANUAL" links, site/partials/manual-sidebar.php) + content column, used by
   Task 15 (how-to-start) and reused as-is by Tasks 16-17 (file-export-import,
   cost-function, opamp) and the root-level Progress-indicator page. Nav
   (--manual variant, brand + green "manual" .cs-pill) + footer + background
   come from the shared components above. Single breakpoint at 900px, per the
   design source (stack to 1 column, sidebar becomes a static top strip).
   ============================================================================= */

.cs-manual-main {
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 56px 40px 88px;
  flex: 1;
}
.cs-manual-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
}

/* ----- sidebar ----- */
.cs-manual-sidebar {
  position: sticky;
  top: 104px;
  border-right: 1px solid var(--hair-2);
  padding: 4px 32px 4px 0;
}
.cs-manual-sidebar-label {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.cs-manual-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-manual-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: color .15s, background .15s;
}
@media (hover: hover) {
  .cs-manual-link:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
  }
}
.cs-manual-link.is-active {
  color: var(--accent);
  background: rgba(55, 230, 164, 0.08);
  border-color: rgba(55, 230, 164, 0.25);
  font-weight: 600;
}
@media (hover: hover) {
  .cs-manual-link.is-active:hover { background: rgba(55, 230, 164, 0.08); }
}
.cs-manual-sidebar-note {
  margin-top: 28px;
  font-size: 12px;
  color: var(--muted-4);
  line-height: 1.6;
}

/* ----- content ----- */
.cs-manual-content { max-width: 680px; }
.cs-manual-h1 {
  font-size: clamp(34px, 4.5vw, 46px);
  line-height: 1.08;
  margin: 0 0 20px;
}
.cs-manual-intro {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 36px;
}

.cs-manual-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}
.cs-manual-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 22px;
}
.cs-manual-step .n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  padding-top: 2px;
  flex: 0 0 auto;
}
.cs-manual-step .b {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.cs-manual-step .b a,
.cs-manual-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cs-manual-step .b strong { color: var(--text); }

.cs-manual-callout {
  border: 1px solid var(--accent-border);
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--surface), var(--surface-3));
  padding: 24px 26px;
  margin-bottom: 36px;
}
.cs-manual-callout .t {
  font-weight: 600;
  font-size: 16.5px;
  margin-bottom: 6px;
}
.cs-manual-callout .b {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}

.cs-manual-closing {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}
.cs-manual-closing strong { color: var(--text); }

/* ----- content: technical prose (Tasks 16-17 sub-pages) -----
   Plain <h2>/<p>/<table>/<figure> laid into .cs-manual-content for pages whose
   body is captured verbatim from the live manual (file-export-import,
   cost-function, opamp) rather than built from bespoke step/callout blocks. */
.cs-manual-content h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 40px 0 14px;
}
.cs-manual-content h2:first-of-type { margin-top: 0; }
.cs-manual-content p {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 0 18px;
}
.cs-manual-figure {
  margin: 0 0 24px;
}
.cs-manual-figure img {
  width: 100%;
  display: block;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair-2);
  background: var(--surface-2);
}
.cs-manual-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 32px;
  font-size: 14.5px;
}
.cs-manual-table th,
.cs-manual-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hair-2);
}
.cs-manual-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
}
.cs-manual-table td { color: var(--text-2); }
.cs-manual-table td.mono { color: var(--accent); font-family: var(--font-mono); }

/* ----- manual responsive ----- */
@media (max-width: 900px) {
  .cs-manual-grid { grid-template-columns: 1fr; gap: 36px; }
  .cs-manual-sidebar {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--hair-2);
    padding: 0 0 28px;
  }
  .cs-manual-main { padding: 40px 20px 64px; }
}

/* =============================================================================
   ===== legal =====
   Readable single-column prose container for site/legal/*.php (eula,
   privacypolicy, privacy-policy-ios, privacy-policy-infinity-sketch). Content
   on these pages is captured verbatim from the live legal text, so this is
   deliberately a plain, quiet reading layout (no cards/grids) — narrower than
   .cs-manual-content's 680px because these pages are pure prose, no sidebar.
   Nav (--minimal variant) + footer + background come from the shared
   components above. Single breakpoint at 700px.
   ============================================================================= */

.cs-legal {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 72px 40px 96px;
}

.cs-legal .badge { margin-bottom: 24px; }

.cs-legal-h1 {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 36px;
}

.cs-legal h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 36px 0 14px;
}
.cs-legal h2:first-child { margin-top: 0; }

.cs-legal h3 {
  font-size: 17px;
  color: var(--text);
  margin: 28px 0 10px;
}

.cs-legal p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 20px;
}
.cs-legal p:last-child { margin-bottom: 0; }

.cs-legal ul,
.cs-legal ol {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 20px;
  padding-left: 22px;
}
.cs-legal li { margin-bottom: 8px; }
.cs-legal li:last-child { margin-bottom: 0; }
.cs-legal li > ul,
.cs-legal li > ol { margin: 8px 0 0; }

.cs-legal strong { color: var(--text); font-weight: 600; }

.cs-legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .cs-legal a:hover { color: var(--accent-hover); }
}

.cs-legal-more { margin-top: 8px; }

@media (max-width: 700px) {
  .cs-legal { padding: 44px 20px 64px; }
}

/* =============================================================================
   ===== 404 =====
   ErrorDocument target (site/404.php). Small, centered, themed — no card, just
   a quiet dead-end with a link home. Nav (--minimal) + footer + background
   come from the shared components above.
   ============================================================================= */

.cs-404 {
  max-width: var(--maxw-narrow);
  width: 100%;
  margin: 0 auto;
  padding: 140px 40px 180px;
  text-align: center;
}
.cs-404 h1 {
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--text);
}
.cs-404 p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}
.cs-404 a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .cs-404 a:hover { color: var(--accent-hover); }
}

@media (max-width: 700px) {
  .cs-404 { padding: 80px 20px 100px; }
}