/* ============================================================
   STITCHCORE · Components
   Organized top-to-bottom by page section.
   0. Base & layout
   1. Pinstripe system (kept from current site)
   2. Header / nav
   3. Hero
   4. Sub-hero band
   5. Problem section
   9. Footer
   10. Get Started page (hero · form · what happens next)
   11. About page (story · principles · close)
   12. Privacy & Security page (glance · data · built · answers)
   13. Legal document layout (Privacy Policy)
   ============================================================ */

/* ---------- 0. Base & layout ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.sc-wrap {
  width: min(var(--container-max), 100% - 2 * var(--container-pad));
  margin-inline: auto;
}

.sc-section { padding-block: var(--section-y); }

.sc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background: var(--sc-ink);
  color: var(--sc-paper);
  font-weight: 600;
}
.sc-skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-4);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- 1. Pinstripe system ----------
   Kept from the current site (DIRECTION §2). Apply .sc-stripes to any
   section with position context; the two layers read the surface's
   stripe tokens, so it works on .sc-light and .sc-dark alike. */

.sc-stripes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.sc-stripes::before,
.sc-stripes::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.sc-stripes::before {
  opacity: var(--stripe-o1, 0.6);
  background: repeating-linear-gradient(90deg, var(--stripe) 0 1px, transparent 1px 16px);
  animation: sc-stripe-drift 30s linear infinite;
}
.sc-stripes::after {
  opacity: var(--stripe-o2, 0.35);
  background: repeating-linear-gradient(90deg, var(--stripe-plum) 0 1px, transparent 1px 32px);
  animation: sc-stripe-rise 42s linear infinite;
}
@keyframes sc-stripe-drift { to { background-position: 24px 0; } }
@keyframes sc-stripe-rise  { to { background-position: 0 24px; } }

/* Divider band — fabric stripes + stitched seam + plum tacks */
.sc-divider {
  position: relative;
  height: 10px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.sc-divider__stripes {
  position: absolute;
  inset: 0;
  opacity: 0.75;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%),
    repeating-linear-gradient(90deg, var(--stripe) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, var(--stripe-plum) 0 1px, transparent 1px 32px);
  animation: sc-divider-drift 30s linear infinite;
}
@keyframes sc-divider-drift { to { background-position: 0, 24px 0, 0 24px; } }
.sc-divider__seam {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 0;
  border-top: 1px dashed var(--line-strong);
}
.sc-divider__tack {
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--accent);
  opacity: 0.5;
}
.sc-divider__tack--l { left: var(--container-pad); }
.sc-divider__tack--r { right: var(--container-pad); }

@media (prefers-reduced-motion: reduce) {
  .sc-stripes::before,
  .sc-stripes::after,
  .sc-divider__stripes { animation: none; }
}

/* ---------- 2. Header / nav ----------
   Pattern kept from the live site: transparent bar at top (over the
   dark hero), solid surface once scrolled, full-screen overlay menu. */

.sc-site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  height: 70px;
  padding-inline: var(--container-pad);
  transition: background var(--dur-base) var(--ease-quiet), box-shadow var(--dur-base) var(--ease-quiet);
}
.sc-site-header.is-top {
  background: transparent;
}
.sc-site-header.is-stuck {
  background: color-mix(in srgb, var(--sc-paper) 96%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 1px 0 var(--sc-ink-12);
}

/* Live-site sizing: 60px logo image in the 70px bar. */
.sc-logo { display: inline-flex; align-items: center; height: 30px; }
.sc-logo__img { height: 60px; width: auto; }
/* Logo swaps with the surface behind the bar: white over the dark hero, black on the stuck light bar. */
.is-top   .sc-logo__img--onLight { display: none; }
.is-stuck .sc-logo__img--onDark  { display: none; }

.sc-header__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Live-site mobile behavior: 60px bar, CTA leaves the bar (it reappears
   inside the overlay menu as the nav CTA). */
@media (max-width: 900px) {
  .sc-site-header { height: 60px; }
  /* Needs the parent selector — .sc-btn's display rule sits later in the
     file and ties on specificity, so a lone class here loses the cascade. */
  .sc-site-header .sc-header__cta { display: none; }
  .sc-logo__img { height: 42px; }
}

/* Menu toggle (hamburger → X) — ported from the live source:
   #111 chip, hairline white border, 8px radius, 14px normal weight. */
.sc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 0.5px solid #ffffff;
  background: #111111;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-quiet);
}
.sc-toggle:hover { transform: translateY(-1px); }
.sc-burger { width: 18px; height: 14px; position: relative; display: block; }
.sc-burger span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-quiet), opacity var(--dur-fast) var(--ease-quiet), top var(--dur-fast) var(--ease-quiet), bottom var(--dur-fast) var(--ease-quiet);
}
.sc-burger span:nth-child(1) { top: 0; width: 70%; }
.sc-burger span:nth-child(2) { top: 6px; }
.sc-burger span:nth-child(3) { bottom: 0; width: 50%; }
.sc-toggle[aria-expanded="true"] .sc-burger span:nth-child(1) { width: 100%; top: 6px; transform: rotate(45deg); }
.sc-toggle[aria-expanded="true"] .sc-burger span:nth-child(2) { opacity: 0; }
.sc-toggle[aria-expanded="true"] .sc-burger span:nth-child(3) { width: 100%; bottom: 6px; transform: rotate(-45deg); }
.sc-toggle__lbl--close { display: none; }
.sc-toggle[aria-expanded="true"] .sc-toggle__lbl--open  { display: none; }
.sc-toggle[aria-expanded="true"] .sc-toggle__lbl--close { display: inline; }

/* Overlay menu */
.sc-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-quiet);
  background: color-mix(in srgb, var(--sc-night) 98%, transparent);
}
.sc-menu.is-open { opacity: 1; pointer-events: auto; }

.sc-menu__grid {
  height: 100%;
  width: min(var(--container-max), 100% - 2 * var(--container-pad));
  margin-inline: auto;
  padding-block: calc(70px + var(--sp-6)) var(--sp-9);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-7);
}
.sc-menu__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}
.sc-menu__nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-decoration: none;
  width: fit-content;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), color var(--dur-fast) var(--ease-quiet);
}
.sc-menu.is-open .sc-menu__nav a { opacity: 1; transform: none; }
.sc-menu__nav a:hover { color: var(--fg-2); }

/* Live-site behavior: CTA hidden in the overlay on desktop (it's in the
   bar), shown as a chip inside the menu once the bar CTA leaves. */
.sc-menu__nav .sc-menu__cta {
  display: none;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  width: fit-content;
  color: var(--sc-ink);
  margin-top: var(--sp-3);
}
@media (max-width: 1200px) {
  .sc-menu__nav .sc-menu__cta { display: inline-flex; }
}

.sc-menu__side {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-5);
}
.sc-menu__social { display: flex; gap: var(--sp-5); }
.sc-menu__social a,
.sc-menu__contact a {
  color: var(--fg-2);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  font-weight: 500;
}
.sc-menu__social a:hover,
.sc-menu__contact a:hover { color: var(--fg-1); }
.sc-menu__contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: right;
}
.sc-menu__foot {
  position: absolute;
  left: var(--container-pad); right: var(--container-pad); bottom: var(--sp-4);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 12px;
  color: var(--fg-3);
}
.sc-menu__foot a { color: inherit; }
.sc-menu__foot a:hover { color: var(--fg-1); }

body.sc-menu-open { overflow: hidden; }

/* With the overlay open, the bar floats over the dark menu — regardless
   of scroll state: transparent, white logo, paper CTA. */
body.sc-menu-open .sc-site-header {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body.sc-menu-open .sc-logo__img--onLight { display: none; }
body.sc-menu-open .sc-logo__img--onDark  { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .sc-menu, .sc-menu__nav a, .sc-burger span { transition: none; }
}

/* ---------- Buttons ---------- */

/* Buttons — ported from the live site source: compact 8px-radius chips.
   Primary is ALWAYS a white chip, black text, hairline black border,
   with the subtle sheen sweep (the site's quietest accent moment).
   Hover inverts to near-black. Works unchanged on light and dark. */
.sc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 11px 16px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-quiet), color var(--dur-fast) var(--ease-quiet), border-color var(--dur-fast) var(--ease-quiet), transform var(--dur-fast) var(--ease-quiet);
}
.sc-btn:hover { transform: translateY(-1px); }
.sc-btn:active { transform: translateY(0); }

.sc-btn--primary {
  background: var(--sc-paper);
  color: var(--sc-ink);
  border: 0.5px solid var(--sc-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.sc-btn--primary::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0.95;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 44%, rgba(43,18,76,.16) 50%, rgba(255,255,255,.10) 56%, transparent 64%);
  background-size: 300% 100%;
  animation: sc-sheen 9s linear infinite;
}
@keyframes sc-sheen { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
.sc-btn--primary:hover {
  background: #191919;
  color: var(--sc-paper);
  border-color: var(--sc-paper);
}

.sc-btn--ghost {
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
}
.sc-btn--ghost:hover { color: var(--fg-1); border-color: var(--fg-3); }

/* Surface-inverting section button (all buttons except the header's):
   dark section → light chip, light section → dark chip. Hover flips
   to an outline of itself. */
.sc-btn--solid {
  background: var(--fg-1);
  color: var(--bg);
  border: 0.5px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.sc-btn--solid::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0.95;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 44%, rgba(43,18,76,.16) 50%, rgba(255,255,255,.10) 56%, transparent 64%);
  background-size: 300% 100%;
  animation: sc-sheen 9s linear infinite;
}
.sc-btn--solid:hover {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--fg-1);
}
.sc-btn--solid:hover::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sc-btn--primary::after,
  .sc-btn--solid::after { animation: none; }
}

/* ---------- 3. Hero ----------
   One composed viewport: copy left, screenshot right. Never taller than
   the screen (capped at 820px on tall displays). Dark surface — the page
   alternates dark/light per section, continuing the live site's rhythm. */

.sc-hero {
  display: grid;
  align-items: center;
  /* Just under one viewport — the sub-hero's rule + first line peek in,
     signalling there's more below the fold. */
  min-height: min(88svh, 800px);
  /* header is fixed (out of flow) — reserve its height at the top */
  padding-block: calc(70px + var(--sp-6)) var(--sp-7);
}
.sc-hero > .sc-wrap {
  display: grid;
  /* Media-weighted split — the device composite carries its own air,
     so it takes the wider column and a tighter gap. */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
}
.sc-hero__eyebrow { margin: 0 0 var(--sp-5); }
.sc-hero__title {
  margin: 0;
  font-size: var(--fs-hero);
  max-width: 15ch;
}
.sc-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
/* Transparent device composite — floats directly on the dark surface.
   No chip frame: the PNG carries its own bezels and shadows. */
.sc-hero__shot { margin: 0; }
.sc-hero__shot img {
  display: block;
  width: 100%;
  height: auto;
}
.sc-hero__shot--pending {
  display: grid;
  place-items: center;
  /* 16:10 — matches the hero visual's export spec (3200×2000). */
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  color: var(--fg-3);
  font-size: var(--fs-body-sm);
  text-align: center;
  padding: var(--sp-5);
}

@media (max-width: 860px) {
  /* The 60px fixed bar sits inside the top padding — without adding it,
     the eyebrow starts right under the header. One viewport is not the
     goal on mobile: generous air above, and a full spacing step between
     the copy and the device composite. */
  .sc-hero { min-height: 0; padding-block: calc(60px + 140px) var(--sp-8); }
  .sc-hero > .sc-wrap { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ---------- 4. Sub-hero band ----------
   A short supporting strip, NOT a full section — one paragraph,
   compact height. It exists to say what StitchCore is, then get
   out of the way. */

/* Continues the hero's dark striped surface — hero + sub-hero read as
   one block, no white break. Compact: says what StitchCore is, then ends.
   Statement register: base text sits dim, the phrases that carry the
   positioning (specialist claim / garment-level / one record) sit bright. */
.sc-subhero {
  padding-block: 0 clamp(56px, 8vw, 104px);
}
.sc-subhero__inner {
  position: relative;
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
/* Short bright segment over the hairline — the seam detail, legible on dark
   where a plum tack would vanish. */
.sc-subhero__inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--fg-1);
}
.sc-subhero__text {
  margin: 0;
  font-size: clamp(21px, 2.5vw, 29px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  color: var(--fg-3);
  max-width: 34em;
  text-wrap: pretty;
}
.sc-subhero__text strong {
  font-weight: 500;
  color: var(--fg-1);
}

/* ---------- 5. Problem section ----------
   Recognition, not explanation: eyebrow + headline, then four one-line
   hints with restrained line-art glyphs in a single row across the full
   measure. The dark→light surface flip is the section break; no divider
   band here. */

.sc-problem__eyebrow { margin: 0 0 var(--sp-5); }
.sc-problem__title {
  margin: 0 0 var(--sp-8);
  max-width: 18ch;
}
.sc-problem__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-7) var(--sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-problem__item {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.sc-problem__glyph {
  display: block;
  margin-bottom: var(--sp-5);
  width: 40px;
  height: 40px;
  color: var(--fg-3);
}
.sc-problem__glyph svg { width: 100%; height: 100%; }
.sc-problem__moment {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
.sc-problem__pivot {
  margin: var(--sp-8) 0 0;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--accent);
  max-width: 44em;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

@media (max-width: 1000px) {
  .sc-problem__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .sc-problem__list { grid-template-columns: 1fr; }
}

/* ---------- 6. Solution — four beats ----------
   Alternating text/media rows, each composing well under a viewport.
   Media are plain placeholders until visuals are decided (screenshots
   vs UI-inspired graphics). Closing strip: the bespoke details the
   beats didn't cover → Features page. */

.sc-solution__eyebrow { margin: 0 0 var(--sp-5); }
.sc-solution__title {
  margin: 0 0 var(--sp-9);
  max-width: 16ch;
}
.sc-solution__beats {
  display: grid;
  gap: clamp(64px, 8vw, 104px);
}
.sc-beat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-7), 6vw, var(--sp-9));
  align-items: center;
}
.sc-beat:nth-child(even) .sc-beat__media { order: -1; }
.sc-beat__kicker {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
}
.sc-beat__title { margin: 0 0 var(--sp-4); }
.sc-beat__copy {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 34em;
  text-wrap: pretty;
}
/* The pillar's own feature cluster — quiet lines under the copy. */
.sc-beat__features {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}
.sc-beat__features li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.sc-beat__features li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--fg-mute);
}
/* Plain placeholder — a quiet sunken panel, nothing fancy.
   16:10 — the shared Remotion video spec (same clips on Features page). */
.sc-beat__media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-sunken);
  color: var(--fg-3);
  font-size: var(--fs-body-sm);
  text-align: center;
  padding: var(--sp-5);
}

/* Section close — one line + the route to full depth. */
.sc-solution__more {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.sc-solution__more-lead {
  margin: 0;
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
}

@media (max-width: 860px) {
  .sc-beat { grid-template-columns: 1fr; gap: var(--sp-5); }
  .sc-beat:nth-child(even) .sc-beat__media { order: 0; }
  .sc-beat__media { aspect-ratio: 16 / 10; }
  .sc-solution__more { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

/* ---------- 7. Why not another SaaS ----------
   Three grouped points in the page's hairline-rule card rhythm.
   Light surface, text + glyphs only — no CTAs; settle the doubt and
   let the scroll continue. */

.sc-why__eyebrow { margin: 0 0 var(--sp-5); }
.sc-why__title {
  margin: 0 0 var(--sp-8);
  max-width: 20ch;
}
.sc-why__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
}
.sc-why__point {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.sc-why__glyph {
  display: block;
  margin-bottom: var(--sp-5);
  width: 40px;
  height: 40px;
  color: var(--fg-3);
}
.sc-why__glyph svg { width: 100%; height: 100%; }
.sc-why__label {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.sc-why__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .sc-why__points { grid-template-columns: 1fr; }
}

/* ---------- 8. Trust — provenance + commitments ----------
   Dark surface. Statement lead (dim base, bright key phrases — the
   sub-hero's treatment), then four commitment cards in the hairline
   rhythm. Trust = who builds it + terms we hold ourselves to. */

.sc-trust__eyebrow { margin: 0 0 var(--sp-5); }
.sc-trust__title {
  margin: 0 0 var(--sp-6);
  max-width: 22ch;
}
.sc-trust__lead {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-3);
  max-width: 36em;
  text-wrap: pretty;
}
.sc-trust__lead strong {
  font-weight: 500;
  color: var(--fg-1);
}
.sc-trust__about { margin: calc(-1 * var(--sp-6)) 0 var(--sp-8); }
.sc-trust__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7) var(--sp-8);
}
.sc-trust__item {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.sc-trust__glyph {
  display: block;
  margin-bottom: var(--sp-5);
  width: 40px;
  height: 40px;
  color: var(--fg-3);
}
.sc-trust__glyph svg { width: 100%; height: 100%; }
.sc-trust__label {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.sc-trust__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 34em;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .sc-trust__grid { grid-template-columns: 1fr; }
}

/* ---------- 8c. Closing beat ----------
   A statement moment, not a card grid. Light, airy relief after the
   dark trust section; one primary CTA on the whole lower page.
   Right column: the stitched path — seam draws once on scroll into
   view, stations fade up as the stitch reaches them. */

.sc-close__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(var(--sp-7), 6vw, var(--sp-9));
  align-items: center;
}
.sc-close__eyebrow { margin: 0 0 var(--sp-5); }
.sc-close__title {
  margin: 0 0 var(--sp-5);
  max-width: 18ch;
}
.sc-close__text {
  margin: 0 0 var(--sp-7);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 32em;
  text-wrap: pretty;
}
.sc-close__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.sc-close__note {
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
}

/* The stitched path. Grid: glyph row / seam (spans all) / label row. */
.sc-close__flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  max-width: 560px;
  justify-self: end;
  width: 100%;
}
.sc-flow__glyph {
  justify-self: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-4);
  color: var(--fg-3);
}
.sc-flow__glyph svg { width: 100%; height: 100%; }
.sc-flow__seam {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: auto;
  color: var(--fg-mute);
}
.sc-flow__seam circle { fill: var(--bg); }
.sc-flow__tack {
  fill: var(--accent);
  stroke: none;
  opacity: 0.6;
}
.sc-flow__label {
  grid-row: 3;
  justify-self: center;
  align-self: start;
  margin: var(--sp-4) 0 0;
  padding-inline: var(--sp-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  text-align: center;
  max-width: 16ch;
  text-wrap: balance;
}
.sc-flow__index {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}

/* Animation: seam reveals left→right via clip; stations fade up as the
   stitch reaches them. Runs once, when main.js flags .is-inview. */
.sc-flow__draw {
  clip-path: inset(-20% 100% -20% 0);
  transition: clip-path 1.4s var(--ease-out) 0.2s;
}
.sc-flow__glyph,
.sc-flow__label {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease-quiet), transform 0.5s var(--ease-out);
}
.sc-close__flow.is-inview .sc-flow__draw { clip-path: inset(-20% 0% -20% 0); }
.sc-close__flow.is-inview .sc-flow__glyph,
.sc-close__flow.is-inview .sc-flow__label { opacity: 1; transform: none; }
/* Stagger matched to the stitch's arrival at each station. */
.sc-close__flow.is-inview .sc-flow__glyph:nth-child(1),
.sc-close__flow.is-inview .sc-flow__label:nth-of-type(1) { transition-delay: 0.4s; }
.sc-close__flow.is-inview .sc-flow__glyph:nth-child(2),
.sc-close__flow.is-inview .sc-flow__label:nth-of-type(2) { transition-delay: 0.85s; }
.sc-close__flow.is-inview .sc-flow__glyph:nth-child(3),
.sc-close__flow.is-inview .sc-flow__label:nth-of-type(3) { transition-delay: 1.3s; }

@media (prefers-reduced-motion: reduce) {
  .sc-flow__draw, .sc-flow__glyph, .sc-flow__label { transition: none !important; }
}

@media (max-width: 860px) {
  .sc-close__inner { grid-template-columns: 1fr; }
  .sc-close__flow { justify-self: start; margin-top: var(--sp-6); }
}

/* ---------- 8d. FAQ ----------
   Split layout: header left, Q&As right — both columns work, no empty
   half. Answers visible (no accordions) for crawlers and AI engines. */

.sc-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--sp-7) clamp(var(--sp-7), 6vw, var(--sp-9));
  align-items: start;
}
.sc-faq__eyebrow { margin: 0 0 var(--sp-5); }
.sc-faq__title {
  margin: 0 0 var(--sp-5);
  max-width: 14ch;
}
.sc-faq__more {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-3);
  max-width: 26em;
}
.sc-faq__more a {
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sc-faq__more a:hover { color: var(--fg-1); }
.sc-faq__list { display: grid; }
.sc-faq__item {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
}
.sc-faq__item:last-child { border-bottom: 1px solid var(--line); }
.sc-faq__q {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.sc-faq__a {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 52ch;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .sc-faq__inner { grid-template-columns: 1fr; }
}

/* ---------- 8e. Journal strip (conditional — only with posts) ---------- */

.sc-journal { padding-block: clamp(56px, 8vw, 96px); }
.sc-journal__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.sc-journal__eyebrow { margin: 0 0 var(--sp-5); }
.sc-journal__title { margin: 0; }
.sc-journal__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
}
.sc-journal__item {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.sc-journal__date {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
}
.sc-journal__itemtitle {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  text-wrap: pretty;
  transition: color var(--dur-fast) var(--ease-quiet);
}
.sc-journal__item:hover .sc-journal__itemtitle { color: var(--fg-2); }

@media (max-width: 860px) {
  .sc-journal__head { flex-direction: column; align-items: flex-start; }
  .sc-journal__list { grid-template-columns: 1fr; }
}

/* ---------- 9. Footer ----------
   Structure kept from the live site: description + four link columns
   (Menu · Social · Contact · Legal) + ghost wordmark. Dark surface. */

.sc-site-footer {
  padding-block: var(--sp-9) var(--sp-5);
}
.sc-footer__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(120px, 1fr));
  gap: var(--sp-7) var(--sp-6);
  align-items: start;
}
.sc-footer__desc {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 24em;
  text-wrap: pretty;
}
.sc-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sc-footer__col .sc-eyebrow { margin: 0 0 var(--sp-2); }
.sc-footer__col a {
  color: var(--fg-2);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-quiet);
}
.sc-footer__col a:hover { color: var(--fg-1); }

/* Brand mark — the live site's SC icon (white, transparent bg).
   Asset: assets/img/sc-icon-white.png|webp — pending. */
.sc-footer__brand {
  display: inline-block;
  margin-bottom: var(--sp-5);
}
.sc-footer__brand img {
  width: 44px;
  height: auto;
}
.sc-footer__brand--pending {
  display: block;
  width: 44px;
  height: 44px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-2);
}

/* Ghost wordmark — one uniform tone, like the live site. Rendered as
   SVG with textLength so it spans the full container width at every
   viewport size. */
.sc-footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--sp-9);
  user-select: none;
}
.sc-footer__wordmark text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 200px;
  fill: var(--sc-paper-12);
}

.sc-footer__base {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-3);
}

@media (max-width: 900px) {
  .sc-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .sc-footer__about { grid-column: 1 / -1; }
}

/* ---------- Fixed WhatsApp bubble (kept from live site) ---------- */

.sc-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #25d366;   /* WhatsApp brand green — deliberate literal */
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform var(--dur-fast) var(--ease-quiet);
}
.sc-wa:hover { transform: translateY(-2px); }

/* ---------- 10. Get Started page ---------- */

/* Page hero — compact, dark. The visitor already decided to act;
   the form is one scroll away, so no viewport-filling composition. */
.sc-pghero {
	padding-block: calc(70px + clamp(56px, 8vw, 96px)) clamp(56px, 8vw, 96px);
}
.sc-pghero__eyebrow { margin: 0 0 var(--sp-5); }
.sc-pghero__title {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-hero);
	max-width: 18ch;
}
.sc-pghero__lead {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	color: var(--fg-2);
	max-width: 36em;
	text-wrap: pretty;
}
.sc-pghero__note {
	margin: 0;
	font-size: var(--fs-body-sm);
	color: var(--fg-3);
}

/* Form section — FAQ's split rhythm: header left, form right. */
.sc-gsform__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--sp-7) clamp(var(--sp-7), 6vw, var(--sp-9));
	align-items: start;
}
.sc-gsform__eyebrow { margin: 0 0 var(--sp-5); }
.sc-gsform__title {
	margin: 0 0 var(--sp-5);
	max-width: 14ch;
}
.sc-gsform__lead {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--fg-2);
	max-width: 30em;
	text-wrap: pretty;
}
.sc-gsform__pricing {
	margin: 0;
	font-size: var(--fs-body-sm);
	color: var(--fg-3);
}

/* Notices — success replaces the form; error sits above it. */
.sc-notice {
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius-2);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	margin-bottom: var(--sp-6);
}
.sc-notice--ok {
	border: 1px solid var(--line-strong);
	background: var(--bg-sunken);
	color: var(--fg-1);
}
/* Success fast lane — thank-you line, skip-the-wait line, WhatsApp button. */
.sc-notice__line { margin: 0; }
.sc-notice__sub {
	margin: var(--sp-3) 0 var(--sp-4);
	font-size: var(--fs-body-sm);
	color: var(--fg-2);
}
.sc-notice--err {
	border: 1px solid color-mix(in srgb, var(--sc-error) 40%, transparent);
	background: color-mix(in srgb, var(--sc-error) 6%, transparent);
	color: var(--fg-1);
}

/* Honeypot — off-screen, not display:none (bots skip hidden fields). */
.sc-hp {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.sc-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5) var(--sp-5);
}
.sc-field--full { grid-column: 1 / -1; }
.sc-field label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-body-sm);
	font-weight: 500;
	color: var(--fg-1);
}
.sc-field__req { color: var(--accent); }
.sc-field__opt { font-weight: 400; color: var(--fg-3); }

.sc-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-2);
	background: var(--bg-raised);
	font: inherit;
	font-size: var(--fs-body);
	color: var(--fg-1);
	transition: border-color var(--dur-fast) var(--ease-quiet);
}
.sc-input:hover { border-color: var(--fg-3); }
/* Mouse focus: quiet border change only. Keyboard focus (:focus-visible):
   a visible accent ring — WCAG 2.4.7. */
.sc-input:focus { border-color: var(--fg-1); outline: none; }
.sc-input:focus-visible {
	border-color: var(--fg-1);
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}
/* Invalid field: the ring turns to the error colour so keyboard users see it. */
.sc-field.is-invalid .sc-input:focus-visible { outline-color: var(--sc-error); }
textarea.sc-input { resize: vertical; min-height: 100px; }
select.sc-input { appearance: auto; }

/* Consent row — native checkbox, brand accent. */
.sc-field--check label { margin-bottom: 0; }
.sc-check {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	cursor: pointer;
}
.sc-check input {
	margin: 3px 0 0;
	width: 16px; height: 16px;
	flex: none;
	accent-color: var(--accent);
}
.sc-check span {
	font-size: var(--fs-body-sm);
	font-weight: 400;
	line-height: var(--lh-body);
	color: var(--fg-2);
}

/* Inline validation (spans injected by main.js). */
.sc-field.is-invalid .sc-input { border-color: var(--sc-error); }
.sc-field__err {
	display: block;
	margin-top: var(--sp-2);
	font-size: 13px;
	color: var(--sc-error);
}

.sc-form__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	margin-top: var(--sp-6);
}
.sc-form__note {
	font-size: var(--fs-body-sm);
	color: var(--fg-3);
}

@media (max-width: 860px) {
	.sc-gsform__inner { grid-template-columns: 1fr; }
	.sc-form__grid { grid-template-columns: 1fr; }
	.sc-form__actions { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* What happens next — three steps, hairline rhythm, mono indexes. */
.sc-gsnext__eyebrow { margin: 0 0 var(--sp-5); }
.sc-gsnext__title {
	margin: 0 0 var(--sp-8);
	max-width: 16ch;
}
.sc-gsnext__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-7);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sc-gsnext__step {
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}
.sc-gsnext__index {
	display: block;
	margin-bottom: var(--sp-4);
	font-family: var(--font-mono);
	font-size: var(--fs-body-sm);
	color: var(--fg-3);
}
.sc-gsnext__text {
	margin: 0;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--fg-2);
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.sc-gsnext__steps { grid-template-columns: 1fr; }
}

/* ---------- 11. About page ---------- */

/* The story — split rhythm (header left, prose right), like the FAQ
   and the Get Started form. Opening paragraph carries lead scale. */
.sc-abstory__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--sp-7) clamp(var(--sp-7), 6vw, var(--sp-9));
	align-items: start;
}
.sc-abstory__eyebrow { margin: 0 0 var(--sp-5); }
.sc-abstory__title {
	margin: 0;
	max-width: 14ch;
}
.sc-abstory__prose { max-width: 58ch; }
.sc-abstory__para {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-loose);
	color: var(--fg-2);
	text-wrap: pretty;
}
.sc-abstory__para--open {
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	color: var(--fg-1);
}
.sc-abstory__para strong {
	font-weight: 600;
	color: var(--fg-1);
}
/* Founder line — quiet, hairline-set, reads as a signature. */
.sc-abstory__founder {
	margin: var(--sp-7) 0 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg-2);
	text-wrap: pretty;
}
.sc-abstory__founder strong {
	font-weight: 600;
	color: var(--fg-1);
}

@media (max-width: 860px) {
	.sc-abstory__inner { grid-template-columns: 1fr; }
}

/* Principles — the trust section's 2×2 hairline rhythm, dark. */
.sc-abprin__eyebrow { margin: 0 0 var(--sp-5); }
.sc-abprin__title {
	margin: 0 0 var(--sp-8);
	max-width: 20ch;
}
.sc-abprin__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-7) var(--sp-8);
}
.sc-abprin__item {
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}
.sc-abprin__label {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-snug);
	color: var(--fg-1);
}
.sc-abprin__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg-2);
	max-width: 34em;
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.sc-abprin__grid { grid-template-columns: 1fr; }
}

/* Close — mission landed, one quiet route to the funnel. */
.sc-abclose__eyebrow { margin: 0 0 var(--sp-5); }
.sc-abclose__title {
	margin: 0 0 var(--sp-5);
	max-width: 16ch;
}
.sc-abclose__text {
	margin: 0 0 var(--sp-7);
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	color: var(--fg-2);
	max-width: 32em;
	text-wrap: pretty;
}
.sc-abclose__cta {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}
.sc-abclose__note {
	font-size: var(--fs-body-sm);
	color: var(--fg-3);
}

@media (max-width: 860px) {
	.sc-abclose__cta { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ---------- 12. Privacy & Security page ---------- */

/* At a glance — 2×2 hairline commitments, light. */
.sc-pcglance__eyebrow { margin: 0 0 var(--sp-5); }
.sc-pcglance__title {
	margin: 0 0 var(--sp-8);
	max-width: 20ch;
}
.sc-pcglance__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-7) var(--sp-8);
}
.sc-pcglance__item {
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}
.sc-pcglance__label {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-snug);
	color: var(--fg-1);
}
.sc-pcglance__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg-2);
	max-width: 34em;
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.sc-pcglance__grid { grid-template-columns: 1fr; }
}

/* What we hold — split layout, prose + labeled hairline blocks. */
.sc-pcdata { padding-top: 0; }
.sc-pcdata__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--sp-7) clamp(var(--sp-7), 6vw, var(--sp-9));
	align-items: start;
}
.sc-pcdata__eyebrow { margin: 0 0 var(--sp-5); }
.sc-pcdata__title {
	margin: 0;
	max-width: 14ch;
}
.sc-pcdata__body { max-width: 58ch; }
.sc-pcdata__para {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-loose);
	color: var(--fg-2);
	text-wrap: pretty;
}
.sc-pcdata__para--open {
	font-size: var(--fs-lead);
	line-height: var(--lh-body);
	color: var(--fg-1);
}
.sc-pcdata__block {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}
.sc-pcdata__label {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-snug);
	color: var(--fg-1);
}
.sc-pcdata__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg-2);
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.sc-pcdata__inner { grid-template-columns: 1fr; }
}

/* How it's built — three points, why-section rhythm, dark. */
.sc-pcbuilt__eyebrow { margin: 0 0 var(--sp-5); }
.sc-pcbuilt__title {
	margin: 0 0 var(--sp-8);
	max-width: 20ch;
}
.sc-pcbuilt__points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-7);
}
.sc-pcbuilt__point {
	padding-top: var(--sp-5);
	border-top: 1px solid var(--line);
}
.sc-pcbuilt__label {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-snug);
	color: var(--fg-1);
}
.sc-pcbuilt__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg-2);
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.sc-pcbuilt__points { grid-template-columns: 1fr; }
}

/* Close strip — plain-language note under the answers, hairline-set. */
.sc-pcclose {
	margin-top: clamp(64px, 8vw, 96px);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
}
.sc-pcclose__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg-2);
	max-width: 62ch;
	text-wrap: pretty;
}
.sc-pcclose__text a {
	color: var(--fg-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- 13. Legal document layout (Privacy Policy) ----------
   Long-form article with a sticky TOC on desktop. Reusable for any
   future legal page (Terms etc.). */

.sc-ppdoc__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
	gap: var(--sp-7) clamp(var(--sp-7), 6vw, var(--sp-9));
	align-items: start;
}
.sc-ppdoc__toc {
	position: sticky;
	top: calc(70px + var(--sp-5));
}
.sc-ppdoc__toclabel { margin: 0 0 var(--sp-4); }
.sc-ppdoc__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sp-2);
}
.sc-ppdoc__toc a {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-snug);
	color: var(--fg-2);
	text-decoration: none;
}
.sc-ppdoc__toc a:hover { color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }

.sc-ppdoc__article { max-width: 62ch; }
.sc-ppdoc__section {
	padding-block: var(--sp-6);
	border-top: 1px solid var(--line);
}
.sc-ppdoc__section:first-child { padding-top: 0; border-top: 0; }
/* Anchor landing offset — fixed header must not cover the heading. */
.sc-ppdoc__section { scroll-margin-top: calc(70px + var(--sp-4)); }
.sc-ppdoc__h {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--fs-h4);
	line-height: 1.25;
	color: var(--fg-1);
}
.sc-ppdoc__section p,
.sc-ppdoc__section li {
	font-size: var(--fs-body);
	line-height: var(--lh-loose);
	color: var(--fg-2);
	text-wrap: pretty;
}
.sc-ppdoc__section p { margin: 0 0 var(--sp-4); }
.sc-ppdoc__section p:last-child { margin-bottom: 0; }
.sc-ppdoc__section ul {
	margin: 0;
	padding-left: 1.2em;
	display: grid;
	gap: var(--sp-3);
}
.sc-ppdoc__section strong { font-weight: 600; color: var(--fg-1); }
.sc-ppdoc__section a {
	color: var(--fg-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 860px) {
	.sc-ppdoc__inner { grid-template-columns: 1fr; }
	.sc-ppdoc__toc { position: static; }
}

/* ---------- 14. Features page ----------
   The depth page. Light open (the homepage owns the dark hero);
   pillar sections read on hairline rows, FAQ flips dark, close is light.
   Copy source: FEATURES_OUTLINE.md. */

/* Light top: the transparent header sits over a light surface here,
   so the logo swaps to black while at the top of the page. */
body.sc-lighttop .sc-site-header.is-top .sc-logo__img--onDark { display: none; }
body.sc-lighttop .sc-site-header.is-top .sc-logo__img--onLight { display: inline-block; }

/* Intro — pghero on light. */
.sc-fthero .sc-pghero__title { max-width: 22ch; }

/* Pillar sections — header, then rows in the split rhythm. */
.sc-ft { scroll-margin-top: calc(70px + var(--sp-4)); }
.sc-ft__kicker {
	margin: 0 0 var(--sp-5);
	font-family: var(--font-mono);
	font-size: var(--fs-body-sm);
	letter-spacing: var(--ls-wide);
	color: var(--fg-3);
}
.sc-ft__title {
	margin: 0 0 var(--sp-5);
	max-width: 20ch;
}
.sc-ft__lead {
	margin: 0 0 var(--sp-7);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--fg-2);
	max-width: 38em;
	text-wrap: pretty;
}
/* Head: the screenshot fills the space right of the headline + lead. */
.sc-ft__head--media {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--sp-6) clamp(var(--sp-7), 6vw, var(--sp-9));
	align-items: center;
	margin-bottom: var(--sp-7);
}
.sc-ft__head--media .sc-ft__lead { margin-bottom: 0; }

/* Screenshot slot — REAL captures only; quiet sunken panel until then. */
.sc-ft__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--line);
	border-radius: var(--radius-2);
	background: var(--bg-sunken);
	color: var(--fg-3);
	font-size: var(--fs-body-sm);
	text-align: center;
	padding: var(--sp-5);
}

/* Demo video variant — the rendered 4:3 composition fills the slot.
   Positioned so the Pause/Expand controls can overlay it (see § Demo video). */
.sc-ft__media--video {
	padding: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
}

/* ---------- Demo video (shared: Features pillars + homepage beats) ----------
   template-parts/media-video.php renders <video.sc-video> + hover controls
   inside a positioned 4:3 frame. Lazy-load + Pause/Expand wired in main.js. */

/* Homepage beat, video variant — override the placeholder panel's 16:10. */
.sc-beat__media--video {
	padding: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	place-items: stretch;
}

.sc-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Controls — text labels in brand vocabulary; hover/focus reveals. */
.sc-video__controls {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 3;
	display: flex;
	gap: var(--sp-2);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
	pointer-events: none;
}
.sc-ft__media--video:hover .sc-video__controls,
.sc-ft__media--video:focus-within .sc-video__controls,
.sc-beat__media--video:hover .sc-video__controls,
.sc-beat__media--video:focus-within .sc-video__controls {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
@media (hover: none) {
	.sc-video__controls { opacity: 1; transform: none; pointer-events: auto; }
}
.sc-video__ctrl {
	appearance: none;
	-webkit-appearance: none;
	background: var(--sc-ink-72);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	        backdrop-filter: blur(10px) saturate(120%);
	border: 0.5px solid var(--sc-paper-24);
	color: var(--sc-paper);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	cursor: pointer;
	padding: 7px 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--radius-1);
	line-height: 1;
	transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sc-video__ctrl:hover {
	background: var(--sc-ink);
	border-color: var(--sc-paper);
}
.sc-video__ctrl:focus-visible {
	outline: 2px solid var(--sc-paper);
	outline-offset: 2px;
}
.sc-video__ctrl-arrow {
	font-size: 12px;
	transform: translateY(-0.5px);
}

/* Shared preview lightbox (#sc-lightbox in footer.php). */
body.sc-no-scroll { overflow: hidden; }
.sc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(11, 11, 11, 0.92);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	        backdrop-filter: blur(10px) saturate(120%);
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-base) var(--ease-out);
}
.sc-lightbox[data-open="true"] {
	opacity: 1;
	pointer-events: auto;
}
.sc-lightbox__close {
	position: absolute;
	top: 20px;
	right: clamp(20px, 4vw, 40px);
	z-index: 2;
	background: transparent;
	border: 0;
	color: var(--sc-paper);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	cursor: pointer;
	padding: 6px 0;
	border-bottom: 1px solid var(--sc-paper);
}
.sc-lightbox__stage {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(60px, 8vw, 100px) clamp(20px, 6vw, 60px);
}
.sc-lightbox__inner {
	width: 100%;
	max-width: 1100px;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--sc-paper-24);
	background: var(--sc-night);
	overflow: hidden;
	transform: scale(0.985);
	transition: transform var(--dur-base) var(--ease-out);
}
.sc-lightbox[data-open="true"] .sc-lightbox__inner {
	transform: scale(1);
}
.sc-lightbox__inner video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: var(--sc-night);
}
@media (prefers-reduced-motion: reduce) {
	.sc-lightbox, .sc-lightbox__inner { transition: opacity 0.01ms !important; transform: none !important; }
}

/* One line per capability — two quiet columns, hairline-set. */
.sc-ft__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 clamp(var(--sp-7), 6vw, var(--sp-9));
}
.sc-ft__items li {
	padding-block: var(--sp-4);
	border-top: 1px solid var(--line);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg-2);
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.sc-ft__head--media { grid-template-columns: 1fr; }
	.sc-ft__items { grid-template-columns: 1fr; }
}

/* Close — compact centered beat; must not compete with the homepage close. */
.sc-ftclose__inner {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}
.sc-ftclose__eyebrow { margin: 0 0 var(--sp-5); }
.sc-ftclose__title {
	margin: 0 0 var(--sp-5);
	max-width: none;
}
.sc-ftclose__copy {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--fg-2);
	text-wrap: pretty;
}
.sc-ftclose__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
}
.sc-ftclose__note {
	margin: 0;
	font-size: var(--fs-body-sm);
	color: var(--fg-3);
}

/* =====================================================================
   10. Journal — index / archive list, single post, pagination, 404
   Reuses tokens + .sc-pghero + surface classes. Added Phase 5/11.
   ===================================================================== */

/* ---------- 10a. Entry list (home.php / archive.php) ---------- */
.sc-postlist {
	display: grid;
	gap: 0;
	max-width: 860px;
}
.sc-entry { border-top: 1px solid var(--line); }
.sc-entry:last-child { border-bottom: 1px solid var(--line); }
.sc-entry__link {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--sp-6);
	padding-block: var(--sp-6);
	text-decoration: none;
	color: inherit;
	transition: background var(--dur-fast) var(--ease-quiet);
}
.sc-entry__link:hover { background: var(--bg-sunken); }
.sc-entry__date {
	font-family: var(--font-mono);
	font-size: var(--fs-body-sm);
	color: var(--fg-3);
	padding-top: 4px;
}
.sc-entry__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--fg-1);
	text-wrap: pretty;
	transition: color var(--dur-fast) var(--ease-quiet);
}
.sc-entry__link:hover .sc-entry__title { color: var(--accent); }
.sc-entry__excerpt {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg-2);
	max-width: 62ch;
	text-wrap: pretty;
}
.sc-entry__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-body-sm);
	font-weight: 600;
	color: var(--accent);
}
.sc-entry__more svg { transition: transform var(--dur-fast) var(--ease-quiet); }
.sc-entry__link:hover .sc-entry__more svg { transform: translateX(3px); }

.sc-postlist__empty { padding-block: var(--sp-7); max-width: 52ch; }
.sc-postlist__empty p { margin-top: var(--sp-4); color: var(--fg-2); }

@media (max-width: 640px) {
	.sc-entry__link { grid-template-columns: 1fr; gap: var(--sp-3); }
	.sc-entry__date { padding-top: 0; }
}

/* ---------- 10b. Pagination ---------- */
.sc-pagination { margin-top: var(--sp-8); }
.sc-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
}
.sc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-2);
	font-family: var(--font-mono);
	font-size: var(--fs-body-sm);
	color: var(--fg-2);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-quiet), color var(--dur-fast) var(--ease-quiet);
}
.sc-pagination a.page-numbers:hover { border-color: var(--line-strong); color: var(--fg-1); }
.sc-pagination .page-numbers.current {
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 600;
}
.sc-pagination .page-numbers.dots { border: 0; min-width: auto; }

/* ---------- 10c. Single post — hero meta + feature image ---------- */
.sc-posthero__title { max-width: 20ch; }
.sc-posthero__meta {
	margin: var(--sp-5) 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	font-family: var(--font-mono);
	font-size: var(--fs-body-sm);
	color: var(--fg-3);
}
.sc-post__feature { margin: 0; background: var(--bg); padding-top: var(--sp-8); }
.sc-post__feature-img { display: block; width: 100%; height: auto; border-radius: var(--radius-3); }

/* ---------- 10d. Prose (the_content output) ---------- */
.sc-prose {
	max-width: 68ch;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-loose);
	color: var(--fg-2);
}
.sc-prose > * + * { margin-top: var(--sp-5); }
.sc-prose h2,
.sc-prose h3,
.sc-prose h4 {
	color: var(--fg-1);
	font-family: var(--font-display);
	letter-spacing: var(--ls-tight);
	text-wrap: pretty;
}
.sc-prose h2 { margin-top: var(--sp-8); font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); }
.sc-prose h3 { margin-top: var(--sp-7); font-size: var(--fs-h4); font-weight: 600; }
.sc-prose h4 { margin-top: var(--sp-6); font-size: var(--fs-body-lg); font-weight: 700; }
.sc-prose p { margin-top: var(--sp-5); }
.sc-prose a {
	color: var(--fg-1);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--ease-quiet);
}
.sc-prose a:hover { color: var(--accent); }
.sc-prose ul,
.sc-prose ol { margin-top: var(--sp-5); padding-left: 1.4em; }
.sc-prose li { margin-top: var(--sp-2); }
.sc-prose li::marker { color: var(--fg-3); }
.sc-prose blockquote {
	margin: var(--sp-7) 0;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
	border-left: 2px solid var(--accent);
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: var(--lh-snug);
	color: var(--fg-1);
}
.sc-prose blockquote p { margin: 0; }
.sc-prose img,
.sc-prose figure { margin-top: var(--sp-6); max-width: 100%; height: auto; }
.sc-prose figure img { border-radius: var(--radius-2); }
.sc-prose figcaption {
	margin-top: var(--sp-3);
	font-size: var(--fs-body-sm);
	color: var(--fg-3);
	text-align: center;
}
.sc-prose hr { margin: var(--sp-8) 0; height: 1px; border: 0; background: var(--line); }
.sc-prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	padding: 0.15em 0.4em;
	background: var(--bg-sunken);
	border-radius: var(--radius-1);
}
.sc-prose pre {
	margin-top: var(--sp-5);
	padding: var(--sp-5);
	overflow-x: auto;
	background: var(--bg-sunken);
	border: 1px solid var(--line);
	border-radius: var(--radius-2);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
}
.sc-prose pre code { padding: 0; background: none; }

/* ---------- 10e. Tags · author · post nav ---------- */
.sc-post__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-7) 0 0;
	padding: 0;
}
.sc-post__tags li a {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: var(--fs-body-sm);
	color: var(--fg-2);
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-quiet);
}
.sc-post__tags li a:hover { border-color: var(--line-strong); color: var(--fg-1); }

.sc-post__author {
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
	max-width: 68ch;
}
.sc-post__author-name { margin: var(--sp-3) 0 var(--sp-2); font-weight: 600; color: var(--fg-1); }
.sc-post__author-bio { margin: 0; color: var(--fg-2); line-height: var(--lh-body); }

.sc-post__pages { margin-top: var(--sp-6); font-family: var(--font-mono); font-size: var(--fs-body-sm); }
.sc-post__pages a { color: var(--accent); }

.sc-postnav { padding-block: var(--sp-8); border-top: 1px solid var(--line); }
.sc-postnav__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--sp-5);
}
.sc-postnav__link { text-decoration: none; display: block; max-width: 30ch; }
.sc-postnav__link--next { text-align: right; justify-self: end; }
.sc-postnav__dir { display: block; font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--fg-3); }
.sc-postnav__title { display: block; margin-top: 4px; font-weight: 600; color: var(--fg-1); line-height: var(--lh-snug); }
.sc-postnav__link:hover .sc-postnav__title { color: var(--accent); }
.sc-postnav__all {
	font-size: var(--fs-body-sm);
	font-weight: 600;
	color: var(--fg-2);
	text-decoration: none;
	white-space: nowrap;
}
.sc-postnav__all:hover { color: var(--accent); }

@media (max-width: 640px) {
	.sc-postnav__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
	.sc-postnav__link--next { text-align: left; justify-self: start; }
	.sc-postnav__all { order: 3; }
}

/* ---------- 10f. 404 ---------- */
.sc-404__actions { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-3); }