/* StitchBlock Studio — marketing site ("Apex website redesign")
   Ported from the Claude Design project "Apex website redesign"
   (b66c88c6-bc59-4157-986c-a1bf208fc059). The .dc.html files there are the
   design source of record; every inline style in them becomes a class here
   because the site CSP (site/_headers) forbids inline styles and scripts.

   Self-hosted fonts: no third-party requests on any page, which is what the
   Privacy Policy promises. Both families are variable; latin-ext only
   downloads if a page actually uses an accented glyph. */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/HankenGrotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/HankenGrotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/Newsreader-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/Newsreader-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens + base ---------- */

:root {
  color-scheme: dark;
  --bg: #0a0f1c;
  --ink: #f2eee3;
  --muted: #b7bdc9;
  --faint: #7e8698;
  --dim: #565e70;
  --amber: #e2a95e;
  --amber-hi: #edbb74;
  --amber-ink: #1a1206;
  --coral: #e07a5f;
  --teal: #4fa3a5;
  --gold: #e0a458;
  --sage: #8fb491;
  --line: rgba(242, 238, 227, 0.09);
  --line-strong: rgba(242, 238, 227, 0.12);
  --card: rgba(242, 238, 227, 0.035);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --ease-pop: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-hi); }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }

.wrap { max-width: 1320px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.wrap-h { max-width: 1240px; margin: 0 auto; padding-left: 36px; padding-right: 36px; }

/* ---------- keyframes ---------- */

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glowDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.08); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes cGlow { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, -50px) scale(1.14); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(7px); opacity: 1; } }
@keyframes marqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes btnShine { 0% { transform: translateX(-160%) skewX(-18deg); } 55% { transform: translateX(320%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes navGlintA { 0% { transform: translateX(-300px); } 58% { transform: translateX(108vw); } 100% { transform: translateX(108vw); } }
@keyframes navGlintB { 0% { transform: translateX(-300px); } 46% { transform: translateX(108vw); } 100% { transform: translateX(108vw); } }
@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pRing { to { --ga: 360deg; } }

.anim-up { animation: fadeUp 0.7s var(--ease-pop) both; }
.anim-up-2 { animation: fadeUp 0.8s var(--ease-pop) 0.08s both; }
.anim-up-3 { animation: fadeUp 0.8s var(--ease-pop) 0.16s both; }

/* ---------- ambient background glows (subpages) ---------- */

.bg-glows { position: fixed; inset: 0; pointer-events: none; overflow: clip; }
.bg-glows span { position: absolute; border-radius: 50%; }
.bg-glows .g1 { width: 940px; height: 940px; left: -16%; top: -22%; background: radial-gradient(circle, rgba(224, 122, 95, 0.11), transparent 62%); animation: cGlow 26s ease-in-out infinite; }
.bg-glows .g2 { width: 820px; height: 820px; right: -14%; top: 24%; background: radial-gradient(circle, rgba(79, 163, 165, 0.09), transparent 60%); animation: cGlow 34s ease-in-out infinite reverse; }
.bg-glows .g3 { width: 720px; height: 720px; left: 22%; bottom: -26%; background: radial-gradient(circle, rgba(226, 169, 94, 0.08), transparent 62%); animation: cGlow 42s ease-in-out -12s infinite; }

/* ---------- nav ---------- */

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(10, 15, 28, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(242, 238, 227, 0.13);
}
.site-nav--home {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 300ms, border-color 300ms;
}
.site-nav--home.is-scrolled {
  background: rgba(10, 15, 28, 0.78);
  border-bottom-color: rgba(242, 238, 227, 0.13);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav-glint { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; pointer-events: none; }
.site-nav--home .nav-glint { opacity: 0; transition: opacity 600ms; }
.site-nav--home.is-scrolled .nav-glint { opacity: 1; }
.nav-glint span { position: absolute; top: 0; bottom: 0; left: 0; }
.nav-glint .ga { width: 300px; background: linear-gradient(90deg, transparent, rgba(237, 203, 148, 0.6) 50%, transparent); animation: navGlintA 18s cubic-bezier(0.4, 0.1, 0.5, 0.9) 2s infinite; }
.nav-glint .gb { width: 220px; background: linear-gradient(90deg, transparent, rgba(242, 238, 227, 0.45) 50%, transparent); animation: navGlintB 29s cubic-bezier(0.4, 0.1, 0.5, 0.9) -13s infinite; }

.nav-bar { padding-top: 15px; padding-bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav--home .nav-bar { padding-top: 14px; padding-bottom: 14px; }

/* The brand is ONE image, not a mark plus a typeset name. Rebuilding the
   lockup in HTML meant its two halves sat at whatever gap and relative size
   CSS happened to give them; the real logo's spacing and its own wordmark
   face are the lockup (Jared, 2026-08-24). stitchblock-lockup-dark.png is
   the app's /stitchblock-logo-dark.png — the cream-wordmark twin this dark
   background needs — cropped to its ink, so `height` below IS the mark's
   drawn height and nothing has to compensate for transparent padding.
   Heights are picked so the wordmark's cap height matches the type size each
   spot used before: 36px ≈ 22px Newsreader, 33px ≈ 20px, 30px ≈ 18px. */
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 36px; width: auto; display: block; flex: none; }  /* flex: none — a one-image lockup would otherwise be squashed by the nav's flex shrink at ~320px */

.nav-links { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; }
.site-nav--home .nav-links { gap: 30px; font-size: 14.5px; letter-spacing: 0; }
.nav-links a { color: var(--muted); white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); }
.nav-links .btn-nav { background: var(--amber); color: var(--amber-ink); font-weight: 600; padding: 9px 18px; border-radius: 8px; }
.nav-links .btn-nav:hover { background: var(--amber-hi); color: var(--amber-ink); }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); position: relative; }
.footer-bar { padding-top: 46px; padding-bottom: 56px; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; font-size: 14px; line-height: 1.8; color: var(--muted); }
.footer-id .brand { margin-bottom: 10px; }
.footer-id .brand img { height: 33px; }
.footer-copy { font-size: 13px; margin-top: 8px; color: var(--dim); }
.footer-cols { display: flex; gap: 72px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col span { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.footer-col a { color: var(--muted); }
.footer-col a:hover { color: var(--ink); }

.site-footer--compact .footer-bar { padding-bottom: 54px; color: var(--faint); }
.site-footer--compact .footer-id .brand { margin-bottom: 8px; }
.site-footer--compact .footer-id .brand img { height: 30px; }
.site-footer--compact .footer-copy { color: var(--faint); margin-top: 8px; }
.site-footer--compact .footer-cols { gap: 64px; }
.site-footer--compact .footer-col span { font-size: 12px; letter-spacing: 0.1em; }

/* ---------- shared bits ---------- */

.kicker { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); margin-bottom: 22px; }
.mono-kicker { font-family: var(--mono); font-size: 13px; color: var(--amber); letter-spacing: 0.14em; margin-bottom: 16px; }

.page-head { position: relative; padding-top: 180px; padding-bottom: 64px; }
.page-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(52px, 6.6vw, 92px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 24px; }
.page-head .lede { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 56ch; margin: 0; text-wrap: pretty; }

/* reveal-on-scroll (initial hidden state is applied by JS, so no-JS still reads) */
.a-rv { }

/* conic hover ring shared by plan cards (Home + Pricing) */
.p-ring {
  position: absolute; inset: 0; padding: 1.5px; border-radius: inherit;
  background: conic-gradient(from var(--ga), transparent 0deg, rgba(226, 169, 94, 0.9) 55deg, rgba(242, 238, 227, 0.55) 95deg, transparent 150deg, transparent 215deg, rgba(226, 169, 94, 0.45) 275deg, transparent 330deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 350ms;
  animation: pRing 3s linear infinite;
  pointer-events: none;
}
.p-ring--card { inset: -1px; border-radius: 18px; }
.p-cell { position: relative; }
.p-cell:hover .p-ring { opacity: 1; }

/* joined card grid (Pricing plans, Contact cells) */
.joined {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  border: 1px solid var(--line-strong);
  background: var(--card);
  border-radius: 18px;
  overflow: clip;
}
.joined > * { border-right: 1px solid rgba(242, 238, 227, 0.1); }
.joined > *:last-child { border-right: 0; }

/* =========================================================
   HOME
   ========================================================= */

.home-root { overflow-x: clip; }

/* --- hero --- */

.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: clip; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg .h1g { position: absolute; width: 720px; height: 720px; left: -180px; top: -220px; background: radial-gradient(circle, rgba(224, 122, 95, 0.16), transparent 62%); animation: glowDrift 14s ease-in-out infinite; }
.hero-bg .h2g { position: absolute; width: 640px; height: 640px; right: -160px; top: 10%; background: radial-gradient(circle, rgba(79, 163, 165, 0.13), transparent 60%); animation: glowDrift 18s ease-in-out infinite reverse; }
.hero-bg .dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(242, 238, 227, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(720px at 50% 42%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(720px at 50% 42%, #000 30%, transparent 75%);
}

.hero-inner { position: relative; padding-top: 130px; padding-bottom: 72px; width: 100%; }
.hero-text { max-width: 640px; }
@media (min-width: 781px) { .hero-text { max-width: min(640px, 48vw); } }

.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(50px, 5.2vw, 82px); line-height: 1.03; letter-spacing: -0.025em;
  margin: 0 0 24px; max-width: 12ch; text-wrap: balance;
}
.hero .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--muted); max-width: 44ch; margin: 0 0 38px; text-wrap: pretty; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
  display: inline-block; background: var(--amber); color: var(--amber-ink);
  font-size: 16px; font-weight: 600; padding: 15px 30px; border-radius: 10px;
  box-shadow: 0 10px 34px rgba(226, 169, 94, 0.28);
}
.btn-primary:hover { background: var(--amber-hi); color: var(--amber-ink); }
.btn-ghost {
  display: inline-block; background: rgba(242, 238, 227, 0.05); color: var(--ink);
  font-size: 16px; font-weight: 600; padding: 15px 30px; border-radius: 10px;
  border: 1px solid rgba(242, 238, 227, 0.16);
}
.btn-ghost:hover { background: rgba(242, 238, 227, 0.1); color: var(--ink); }

.scroll-cue { margin-top: 58px; display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; animation: fadeUp 0.8s 0.4s both; }
.scroll-cue .rule { display: inline-block; width: 34px; height: 1px; background: rgba(242, 238, 227, 0.25); }
.scroll-cue .down { animation: bob 1.6s ease-in-out infinite; font-size: 15px; }

/* floating block cloud (populated by home.js) */
#a-cloudwrap { position: absolute; left: 51%; right: 1.5%; top: 13%; bottom: 6%; pointer-events: none; z-index: 1; }
#a-cloud { position: absolute; inset: 0; }
.a-fb { position: absolute; opacity: 0; }
.a-fb-bob { display: block; }
.a-fb-card {
  background: #f3ead8; border-radius: 10px; padding: 6.5%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  aspect-ratio: 1 / 1;
}
.qb-wrap { position: relative; width: 100%; height: 100%; border-radius: 5px; overflow: hidden; }
.qb-layer { position: absolute; inset: 0; }
.qb-layer svg { display: block; width: 100%; height: 100%; }
.qb-layer path { shape-rendering: geometricPrecision; }
.cloud-caption { position: absolute; right: 3%; bottom: 0; display: flex; align-items: baseline; gap: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; white-space: nowrap; }
.cloud-caption .bn { color: var(--amber); display: inline-block; }
.cloud-caption .bs { color: var(--faint); }
@media (max-width: 780px) { #a-cloudwrap { display: none; } }

/* --- scroll story ---
   Base styles are the STATIC layout (mobile, no-JS, reduced motion): the
   finished quilt followed by the four captions. home.js adds .js-story on
   wide pointer screens, which switches on the pinned scroll animation. */

#a-story { position: relative; }
.story-pin { position: relative; }
/* overflow:clip — the s1/s2 glows are wider than a phone and would otherwise
   stretch the page. That matters far beyond a stray scrollbar: .home-root
   is `overflow-x: clip`, which makes <body> the containing block for the
   FIXED nav, so any horizontal overflow widens the nav bar itself and
   carries its right-aligned links off-screen. Clip decoration at its own
   box. (Clip, not hidden — hidden would create a scroll container and
   break the pinned scroll story's sticky.) */
.story-glows { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.story-glows .s1 { position: absolute; width: 860px; height: 860px; left: 42%; top: 4%; background: radial-gradient(circle, rgba(226, 169, 94, 0.09), transparent 60%); animation: glowDrift 30s ease-in-out infinite; }
.story-glows .s2 { position: absolute; width: 600px; height: 600px; left: -140px; bottom: -160px; background: radial-gradient(circle, rgba(43, 58, 85, 0.55), transparent 65%); animation: glowDrift 38s ease-in-out -12s infinite reverse; }

.story-flex { position: relative; max-width: 1280px; margin: 0 auto; padding: 90px 36px; width: 100%; display: flex; flex-direction: column; gap: 56px; }
/* Static layout (no JS, narrow screens, reduced motion): caption, frame,
   caption, frame, in DOM order. */
.story-rail-wrap { display: none; }
.a-frame { margin: 0 auto; width: 100%; max-width: 980px; }
.a-frame img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 238, 227, 0.09), 0 -1px 24px rgba(226, 169, 94, 0.13); }

.a-cap { max-width: 620px; margin: 0 auto; width: 100%; }
.a-frame + .a-cap { margin-top: 30px; }
.cap-num { font-family: var(--mono); font-size: 13px; color: var(--amber); letter-spacing: 0.14em; margin-bottom: 14px; }
.a-cap h2 { font-family: var(--serif); font-size: 38px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; margin: 0 0 14px; }
.a-cap p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.btn-sample {
  position: relative; display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  background: linear-gradient(180deg, #edbb74, #d99a48); color: var(--amber-ink);
  font-size: 14.5px; font-weight: 600; padding: 12px 22px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(226, 169, 94, 0.35), inset 0 1px 0 rgba(255, 248, 232, 0.6);
}
.btn-sample:hover { background: linear-gradient(180deg, #f2c684, #e2a95e); color: var(--amber-ink); }
.btn-sample .shine { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 252, 244, 0.55) 50%, transparent); animation: btnShine 3.4s cubic-bezier(0.4, 0.1, 0.5, 0.9) 1.2s infinite; pointer-events: none; }
.btn-sample .dl { font-size: 16px; }
.sample-note { max-width: 320px; margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* JS-driven pinned mode: captions stack in one grid cell on the left and
   crossfade; the four REAL app captures stack in the right cell and each
   fades in over the one before it, so the quilt visibly comes together. */
.js-story#a-story { height: 530vh; }
.js-story .story-pin { position: sticky; top: 0; height: 100vh; overflow: clip; display: flex; align-items: center; }
.js-story .story-flex { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 60px; align-items: center; padding: 0 36px; }
.js-story .story-rail-wrap { display: block; grid-area: 1 / 1; align-self: center; justify-self: start; }
.story-rail-track { position: relative; height: 210px; width: 2px; background: rgba(242, 238, 227, 0.12); border-radius: 2px; margin-left: 5px; }
#a-rail { position: absolute; left: 0; top: 0; width: 2px; height: 0%; background: linear-gradient(var(--amber), var(--coral)); border-radius: 2px; }
.js-story .a-cap { grid-area: 1 / 1; align-self: center; margin: 0 0 0 42px; max-width: 320px; opacity: 0; }
.js-story .a-frame { grid-area: 1 / 2; align-self: center; margin: 0; max-width: none; opacity: 0; will-change: opacity, transform; }
.js-story .a-frame img { max-height: 82vh; object-fit: contain; }
.js-story .a-frame:nth-of-type(2) { z-index: 2; }
.js-story .a-frame:nth-of-type(3) { z-index: 3; }
.js-story .a-frame:nth-of-type(4) { z-index: 4; }

/* --- stats band --- */

.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(242, 238, 227, 0.02); }
.stats-grid { padding-top: 54px; padding-bottom: 54px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; }
.stat-num { font-family: var(--serif); font-size: 54px; font-weight: 500; letter-spacing: -0.02em; color: var(--amber); }
.stat-label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }

/* --- section scaffolding --- */

.h-section { border-top: 1px solid var(--line); }
.h-section--seam { overflow: clip; }
.h-pad { padding-top: 100px; padding-bottom: 100px; }
.sec-head { max-width: 640px; margin-bottom: 54px; }
.sec-head h2, .split h2 { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 48px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 18px; }
.sec-head p { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 56ch; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 70px; align-items: center; }
.split p { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0 0 16px; max-width: 52ch; }
.split p:last-of-type { margin-bottom: 0; }
.split b, .sec-head b { color: var(--ink); font-weight: 600; }

/* --- worktable mock --- */

.wt-intro { padding-top: 110px; padding-bottom: 90px; }
.wt-outer { position: relative; }
.wt-glow { position: absolute; inset: -40px -80px; background: radial-gradient(720px at 50% 40%, rgba(226, 169, 94, 0.1), transparent 65%); pointer-events: none; }
.wt-cap { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--faint); text-align: center; margin-bottom: 12px; }
.wt-frame {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 60px 140px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(242, 238, 227, 0.1);
  transform: perspective(1600px) rotateX(1.6deg);
}
.wt-shot { display: block; width: 100%; height: auto; }

/* --- catalog & stash split --- */

.stash-cards { display: flex; gap: 10px; max-width: 420px; align-items: stretch; margin-top: 26px; }
.stash-card { border-radius: 10px; padding: 12px 14px; }
.stash-card--have { flex: 1.4; background: rgba(143, 180, 145, 0.14); border: 1px solid rgba(143, 180, 145, 0.4); }
.stash-card--buy { flex: 1; background: rgba(224, 122, 95, 0.12); border: 1px solid rgba(224, 122, 95, 0.4); }
.stash-card .lab { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.stash-card--have .lab { color: var(--sage); }
.stash-card--buy .lab { color: var(--coral); }
.stash-card .amt { font-family: var(--serif); font-size: 24px; margin-top: 3px; }

.mq-col { position: relative; min-height: 340px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.mq-halo { position: absolute; inset: -20px -60px; background: radial-gradient(480px at 60% 50%, rgba(79, 163, 165, 0.12), transparent 65%); pointer-events: none; }
.mq-row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display: flex; gap: 14px; width: max-content; animation: marqueeL 36s linear infinite; }
.mq-track--r { animation: marqueeR 44s linear infinite; }
.mq-item { width: 128px; }
.mq-tile { height: 96px; border-radius: 10px; border: 1px solid rgba(242, 238, 227, 0.14); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); }
.mq-name { font-size: 11.5px; color: var(--faint); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* marquee swatches, row A then row B */
.t-a1 { background: #e07a5f; }
.t-a2 { background: repeating-linear-gradient(45deg, #3f8f91 0 6px, #357c7e 6px 12px); }
.t-a3 { background: #e0a458; }
.t-a4 { background: radial-gradient(#6f9472 2.4px, transparent 2.6px) 0 0 / 14px 14px, #86ab88; }
.t-a5 { background: #2b3a55; }
.t-a6 { background: repeating-linear-gradient(45deg, #e0a458 0 6px, #d19244 6px 12px); }
.t-a7 { background: #c96a50; }
.t-a8 { background: radial-gradient(#7a1f2b 2.4px, transparent 2.6px) 0 0 / 14px 14px, #9b2a38; }
.t-a9 { background: #3f8f91; }
.t-a10 { background: repeating-linear-gradient(45deg, #2b3a55 0 6px, #22304a 6px 12px); }
.t-b1 { background: radial-gradient(#c65f47 2.4px, transparent 2.6px) 0 0 / 14px 14px, #e07a5f; }
.t-b2 { background: #86ab88; }
.t-b3 { background: #e9dcc4; }
.t-b4 { background: #a75d43; }
.t-b5 { background: radial-gradient(#8d9a86 2.4px, transparent 2.6px) 0 0 / 14px 14px, #a8b3a0; }
.t-b6 { background: #e8b063; }
.t-b7 { background: repeating-linear-gradient(45deg, #86ab88 0 6px, #74996f 6px 12px); }
.t-b8 { background: #22304a; }
.t-b9 { background: radial-gradient(#c98f3f 2.4px, transparent 2.6px) 0 0 / 14px 14px, #e0a458; }
.t-b10 { background: #efe4cd; }

/* --- cut list card --- */

.cl-outer { position: relative; }
/* -20px, not -50px: the page gutter is 22px below 900 and 36px above, so a
   50px bleed pushed this decorative halo past the viewport and widened the
   page — which drags the fixed nav with it (see .story-glows). 20px clears
   the narrowest gutter at every width, and the glow is a 10%-opacity
   radial: the trim is imperceptible. */
.cl-halo { position: absolute; inset: -30px -20px; background: radial-gradient(520px at 40% 50%, rgba(226, 169, 94, 0.1), transparent 65%); pointer-events: none; }
.cl-shot { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 14px; box-shadow: 0 46px 110px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(242, 238, 227, 0.1); position: relative; }

/* --- the parts that feel like magic --- */

.h-section--dusk { background: linear-gradient(180deg, rgba(43, 58, 85, 0.25), transparent 70%); }
.sec-head--tight { margin-bottom: 50px; }
.magic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.magic-card { background: var(--card); border: 1px solid rgba(242, 238, 227, 0.1); border-radius: 16px; padding: 28px; min-height: 240px; display: flex; flex-direction: column; transition: border-color 250ms, background 250ms; }
.magic-card:hover { border-color: rgba(226, 169, 94, 0.45); background: rgba(226, 169, 94, 0.05); }
.magic-ico { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.magic-ico .arr { color: var(--faint); }
.mg-dotswatch { width: 34px; height: 34px; border-radius: 6px; background: radial-gradient(#c65f47 2.2px, transparent 2.4px) 0 0 / 9px 9px, #e07a5f; }
.mg-quad { width: 34px; height: 34px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.mg-quad i { border-radius: 2px; }
.mg-quad--mixed i:nth-child(1), .mg-quad--mixed i:nth-child(4) { background: radial-gradient(#c65f47 1.6px, transparent 1.8px) 0 0 / 7px 7px, #e07a5f; }
.mg-quad--mixed i:nth-child(2), .mg-quad--mixed i:nth-child(3) { background: #4fa3a5; }
.mg-quad--warm i:nth-child(1), .mg-quad--warm i:nth-child(4) { background: #e07a5f; }
.mg-quad--warm i:nth-child(2), .mg-quad--warm i:nth-child(3) { background: #e0a458; }
.mg-render { width: 44px; height: 34px; border-radius: 6px; background: linear-gradient(135deg, #e07a5f 0%, #e0a458 55%, #8fb491 100%); box-shadow: 0 6px 18px rgba(224, 122, 95, 0.4); }
.mg-phone { width: 22px; height: 38px; border-radius: 5px; border: 1.5px solid var(--faint); }
.mg-stripes { width: 34px; height: 34px; border-radius: 6px; background: repeating-linear-gradient(45deg, #8fb491 0 5px, #7da380 5px 10px); }
.mg-stack { position: relative; width: 34px; height: 34px; }
.mg-stack i { position: absolute; width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(242, 238, 227, 0.18); }
.mg-stack i:nth-child(1) { left: 0; top: 10px; background: #86ab88; }
.mg-stack i:nth-child(2) { left: 5px; top: 5px; background: #e0a458; }
.mg-stack i:nth-child(3) { left: 10px; top: 0; background: #e07a5f; }
.mg-quad--lit i { background: rgba(242, 238, 227, 0.14); }
.mg-quad--lit i:nth-child(1), .mg-quad--lit i:nth-child(4) { background: #e0a458; }
.mg-pill { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #1a2a1c; background: #8fb491; border-radius: 999px; padding: 6px 11px; }
.mg-frame { width: 34px; height: 34px; border-radius: 4px; background: #2b3a55; display: flex; align-items: center; justify-content: center; }
.mg-frame i { width: 20px; height: 20px; background: #e0a458; border-radius: 2px; }
.mg-frame--coped { background: #e07a5f; }
.mg-frame--coped i { width: 14px; height: 14px; background: #2b3a55; box-shadow: 0 0 0 3px #f3ead8; }
.magic-card h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0 0 10px; }
.magic-card p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

/* --- haberdashery --- */

.hab-side { display: flex; justify-content: center; }
.hab-card { background: rgba(242, 238, 227, 0.04); border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px; width: min(340px, 100%); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); }
.hab-shot { display: block; width: 100%; height: auto; border-radius: 8px; }
.hab-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; gap: 10px; }
.hab-name { font-family: var(--serif); font-size: 18px; }
.hab-by { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.hab-stats { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.hab-open { margin-top: 14px; background: var(--amber); color: var(--amber-ink); border-radius: 8px; padding: 10px 0; font-size: 13.5px; font-weight: 600; text-align: center; }
.hab-inc { margin-top: 9px; font-size: 11.5px; color: var(--faint); text-align: center; }
.hab-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  color: var(--amber); font-size: 15.5px; font-weight: 600;
}
.hab-link:hover { color: var(--amber-hi); }
.hab-link .arw { transition: transform 0.2s ease; }
.hab-link:hover .arw { transform: translateX(4px); }

/* --- trust strip --- */

.trust-grid { padding-top: 52px; padding-bottom: 52px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px 44px; }
.trust { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.trust b { color: var(--ink); font-weight: 600; }
.trust-badge { flex: none; display: inline-flex; justify-content: center; min-width: 52px; }
.trust-badge--quilt { font-family: var(--mono); color: var(--amber); background: rgba(226, 169, 94, 0.1); border: 1px solid rgba(226, 169, 94, 0.3); border-radius: 6px; padding: 3px 8px; font-size: 13px; }
.trust-badge--dot { align-items: center; height: 26px; }
.trust-badge--dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 12px rgba(143, 180, 145, 0.8); }
.trust-badge--zero { font-family: var(--mono); color: var(--amber); font-size: 14px; padding-top: 3px; }

/* --- home pricing --- */

#a-pricing { position: relative; overflow: clip; }
.hp-halo { position: absolute; width: 900px; height: 500px; left: 50%; margin-left: -450px; top: -180px; background: radial-gradient(closest-side, rgba(226, 169, 94, 0.1), transparent); pointer-events: none; animation: glowDrift 34s ease-in-out infinite; }
.hp-head { text-align: center; margin-bottom: 54px; }
.hp-head h2 { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 48px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 14px; }
.hp-head p { font-size: 17px; color: var(--muted); margin: 0; }
.hp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 20px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.hp-card { position: relative; background: rgba(242, 238, 227, 0.03); border: 1px solid rgba(242, 238, 227, 0.11); border-radius: 18px; padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; }
.hp-card--maker { background: linear-gradient(180deg, rgba(226, 169, 94, 0.1), rgba(226, 169, 94, 0.03)); border-color: rgba(226, 169, 94, 0.5); box-shadow: 0 30px 80px rgba(226, 169, 94, 0.13); }
.hp-pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--amber); color: var(--amber-ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 5px 13px; }
.hp-tier { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.hp-card--maker .hp-tier { color: var(--amber); }
.hp-price { font-family: var(--serif); font-size: 44px; font-weight: 500; }
.hp-price span { font-size: 19px; color: var(--muted); font-family: var(--sans); }
.hp-alt { font-size: 13.5px; color: var(--muted); margin-top: -10px; }
.hp-alt b { color: var(--ink); font-weight: 600; }
.hp-blurb { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.hp-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.hp-card--maker .hp-list { color: #d6d9e0; }
.hp-list .mono { font-family: var(--mono); font-size: 12.5px; }
.hp-cta { margin-top: auto; text-align: center; border: 1px solid rgba(242, 238, 227, 0.2); border-radius: 10px; padding: 12px; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.hp-cta:hover { background: rgba(242, 238, 227, 0.07); color: var(--ink); }
.hp-cta--amber { background: var(--amber); border: 0; color: var(--amber-ink); font-weight: 700; }
.hp-cta--amber:hover { background: var(--amber-hi); color: var(--amber-ink); }
.hp-fine { text-align: center; font-size: 13.5px; color: var(--faint); margin: 26px 0 0; }

/* --- closing CTA --- */

.cta { position: relative; overflow: clip; }
.cta-halo { position: absolute; inset: 0; background: radial-gradient(760px at 50% 120%, rgba(224, 122, 95, 0.16), transparent 70%); pointer-events: none; animation: glowDrift 44s ease-in-out -20s infinite; }
.cta-inner { position: relative; padding-top: 130px; padding-bottom: 130px; text-align: center; }
.cta h2 { font-family: var(--serif); font-size: clamp(44px, 5.4vw, 72px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.04; margin: 0 0 20px; }
.cta p { font-size: 18px; color: var(--muted); margin: 0 0 36px; }
.btn-big { display: inline-block; background: var(--amber); color: var(--amber-ink); font-size: 17px; font-weight: 700; padding: 17px 38px; border-radius: 12px; box-shadow: 0 14px 44px rgba(226, 169, 94, 0.3); }
.btn-big:hover { background: var(--amber-hi); color: var(--amber-ink); }

/* =========================================================
   PRICING PAGE
   ========================================================= */

.plan-cell { position: relative; padding: 36px 34px 40px; display: flex; flex-direction: column; gap: 15px; }
.plan-cell--maker { background: rgba(226, 169, 94, 0.08); }
.plan-tier { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.plan-tier--amber { color: var(--amber); }
.plan-tier-row { display: flex; justify-content: space-between; align-items: center; }
.plan-pop { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--amber); color: var(--amber-ink); border-radius: 999px; padding: 4px 11px; }
.plan-price { font-family: var(--serif); font-size: 52px; font-weight: 500; }
.plan-price span { font-size: 20px; color: var(--muted); font-family: var(--sans); }
.plan-alt { font-size: 13.5px; color: var(--muted); margin-top: -10px; }
.plan-alt b { font-weight: 600; color: var(--ink); }
/* The yearly price is a second buy path, not just a number to read.
   Used by both plan cards — .plan-alt on /pricing/ and .hp-alt on Home. */
.plan-alt-link { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(226, 169, 94, 0.55); }
.plan-alt-link:hover { color: var(--amber-hi); text-decoration-color: var(--amber-hi); }
.plan-blurb { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.plan-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.plan-list .mono { font-family: var(--mono); font-size: 12.5px; }
.plan-link { margin-top: auto; font-weight: 600; font-size: 15px; color: var(--ink); }
.plan-link:hover { color: var(--amber); }
.plan-btn { margin-top: auto; text-align: center; background: var(--amber); color: var(--amber-ink); border-radius: 10px; padding: 13px; font-weight: 600; font-size: 14.5px; }
.plan-btn:hover { background: var(--amber-hi); color: var(--amber-ink); }

.packs { padding-top: 26px; }
.packs-banner { border: 1px solid var(--line-strong); background: rgba(226, 169, 94, 0.07); border-radius: 18px; padding: 28px 32px; display: flex; gap: 40px; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
.packs-copy { max-width: 52ch; }
.packs-copy h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.packs-copy p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.packs-tiles { display: flex; gap: 14px; flex-wrap: wrap; }
.pack { background: rgba(242, 238, 227, 0.05); border: 1px solid var(--line-strong); border-radius: 12px; padding: 16px 24px; min-width: 130px; }
.pack .amt { font-family: var(--serif); font-size: 30px; font-weight: 500; }
.pack .qty { font-size: 13px; color: var(--muted); margin-top: 2px; }

.billing { padding-top: 90px; padding-bottom: 100px; }
.billing h2 { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 42px); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 34px; }
.billing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 34px 48px; }
.billing h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.billing p { font-size: 14.8px; line-height: 1.68; color: var(--muted); margin: 0; text-wrap: pretty; }
.billing b { font-weight: 600; color: var(--ink); }
.fineprint { font-size: 14px; color: var(--faint); margin: 36px 0 0; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-cells { margin-bottom: 110px; }
.contact-cell { padding: 34px 32px 38px; }
.contact-cell--guild { background: rgba(226, 169, 94, 0.07); }
.cc-label { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.contact-cell--guild .cc-label { color: var(--amber); }
.cc-big { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.cc-body { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 16px 0 0; }
.cc-body--tight { margin: 12px 0 0; line-height: 1.7; }
.cc-body--tight .site { margin-top: 8px; }
.contact-cell--guild p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0 0 20px; }
.cc-btn { display: inline-block; background: var(--amber); color: var(--amber-ink); font-size: 14.5px; font-weight: 600; padding: 12px 24px; border-radius: 10px; }
.cc-btn:hover { background: var(--amber-hi); color: var(--amber-ink); }

/* =========================================================
   LEGAL PAGES (Terms + Privacy)
   ========================================================= */

.legal { position: relative; max-width: 820px; margin: 0 auto; padding: 170px 40px 100px; width: 100%; }
.legal h1 { font-family: var(--serif); font-size: clamp(42px, 5vw, 60px); line-height: 1.05; font-weight: 500; letter-spacing: -0.025em; margin: 0 0 14px; }
.legal-date { font-size: 14px; color: var(--faint); margin: 0 0 46px; }
.legal h2 { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -0.012em; margin: 44px 0 14px; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
.legal p { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0 0 14px; }
.legal p b, .legal li b { font-weight: 600; color: var(--ink); }
.legal ul { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.legal code { font-family: var(--mono); font-size: 0.87em; background: rgba(242, 238, 227, 0.12); padding: 1px 5px; border-radius: 3px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.legal td { padding: 11px 14px 11px 0; vertical-align: top; border-bottom: 1px solid rgba(242, 238, 227, 0.1); }
.legal td:last-child { padding-right: 0; }
.legal tr:last-child td { border-bottom: 0; }
.tbl-52 td:first-child { width: 52%; }
.tbl-32 td:first-child { width: 32%; }
.tbl-48 td:first-child { width: 48%; }

.summary-card { border: 1px solid var(--line-strong); background: var(--card); border-radius: 18px; padding: 28px 32px; margin: 0 0 46px; }
.summary-card .cc-label { color: var(--amber); }
.summary-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.summary-card p { font-size: 14px; color: var(--faint); margin: 16px 0 0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 880px) {
  .wrap, .wrap-h { padding-left: 22px; padding-right: 22px; }
  .page-head { padding-top: 140px; padding-bottom: 44px; }
  .legal { padding: 130px 22px 70px; }
  .h-pad { padding-top: 72px; padding-bottom: 72px; }
  .wt-intro { padding-top: 72px; padding-bottom: 64px; }
  .split { gap: 44px; }
  .story-flex { padding: 64px 22px; gap: 44px; }
  .a-cap h2 { font-size: 32px; }
  .cta-inner { padding-top: 90px; padding-bottom: 90px; }
  .stats-grid { gap: 26px; padding-top: 44px; padding-bottom: 44px; }
  .stat-num { font-size: 44px; }
  .footer-cols { gap: 44px; }
  .hero-inner { padding-top: 120px; padding-bottom: 56px; }
  .scroll-cue { margin-top: 44px; }
}

@media (max-width: 700px) {
  .joined > * { border-right: 0; border-bottom: 1px solid rgba(242, 238, 227, 0.1); }
  .joined > *:last-child { border-bottom: 0; }
  .packs-banner { padding: 24px 22px; }
  .plan-cell { padding: 30px 24px 34px; }
  .contact-cell { padding: 28px 24px 32px; }
}

@media (max-width: 600px) {
  .hero { min-height: 0; }
  .hero-inner { padding-top: 108px; }
  .footer-bar { padding-top: 36px; padding-bottom: 44px; }
}

@media (max-width: 520px) {
  /* The wordmark stays at EVERY width (Jared, 2026-08-23). The Apex port
     hid it below 520 as part of a generic nav condense; the brand instead
     pays its own way here — one step down on the lockup — and the bar sheds
     the Pricing link below 420 (see that block). Note the trim is scoped to
     .site-nav: the footer brand keeps full size, its column has ~58px to
     spare even at 320. */
  .site-nav .brand img { height: 30px; }
  .nav-links, .site-nav--home .nav-links { gap: 14px; font-size: 13.5px; }
  .nav-links .btn-nav { padding: 8px 11px; }
  .legal { padding-left: 18px; padding-right: 18px; }
  .summary-card { padding: 22px 18px; }
}

/* Pricing is a section anchor with two other entrances on every page (the
   hero's "See pricing" button and the footer Product column), so it is the
   link the bar can afford to drop to keep the wordmark. */
@media (max-width: 420px) {
  .nav-links a.nav-pricing { display: none; }
}

@media (max-width: 380px) {
  .nav-links a.nav-product { display: none; }
  /* One indivisible image cannot give ground the way the old mark-plus-text
     pair did, so the last narrow step trims the lockup itself and tightens
     the bar's gap — at 320 that leaves ~26px between the lockup and the
     links rather than squashing the logo out of proportion. */
  .site-nav .brand img { height: 27px; }
  .site-nav .nav-bar { gap: 14px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-up, .anim-up-2, .anim-up-3, .scroll-cue { animation: none; }
  .scroll-cue .down { animation: none; }
  .bg-glows span, .hero-bg .h1g, .hero-bg .h2g, .story-glows .s1, .story-glows .s2,
  .hp-halo, .cta-halo { animation: none; }
  .nav-glint { display: none; }
  .btn-sample .shine { display: none; }
  .mq-track, .mq-track--r { animation: none; }
  .p-ring { animation: none; }
}