/* Blabb homepage stylesheet.
   Self-contained: the homepage links only this sheet; subpages keep css/style.css. */

:root {
  --ink-950: #07080A;
  --ink-900: #0B0C0F;
  --ink-850: #0F1015;
  --ink-800: #14151B;
  --ink-700: #1C1D25;
  --ink-600: #2A2B35;
  --cream: #F3EFE4;
  --fog: #A6A194;
  --gold-100: #F6EAC6;
  --gold-200: #EDD796;
  --gold-300: #E5C46C;
  --gold-400: #DCB04B;
  --gold-500: #CD9A33;
  --hairline: rgba(246, 234, 198, 0.09);
  /* Hybrid type: editorial faces for the headline voice (Fraunces display,
     JetBrains Mono kickers); body copy stays on the platform's system sans. */
  --font-sans: "Segoe UI Variable Text", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* Springs. Settle = critically damped (no overshoot) — the default for UI.
     Bounce = slight overshoot, reserved for interactions the user "throws"
     (a selection pop, a panel arriving with momentum). */
  --spring-settle: var(--ease-out);
  --spring-bounce: linear(
    0, 0.009 1.1%, 0.035 2.3%, 0.141 4.9%, 0.281 7.4%, 0.723 14.6%,
    0.938 20.5%, 1.017 26.4%, 1.028 32.1%, 1.012 40.2%, 0.999 50%, 1
  );
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  overflow-x: clip;
  background: var(--ink-950);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: #CD9A33; color: #0B0C0F; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0B0C0F; }
::-webkit-scrollbar-thumb { background: #2A2B35; border-radius: 8px; border: 2px solid #0B0C0F; }
::-webkit-scrollbar-thumb:hover { background: #CD9A33; }

/* ---------- Shared primitives ---------- */

.k-wrap { max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.k-wrap-narrow { max-width: 1000px; }
.k-wrap-tight { max-width: 760px; }
.k-section { padding-top: 130px; padding-bottom: 130px; position: relative; }
.k-band { border-top: 1px solid var(--hairline); background: rgba(11, 12, 15, 0.4); }

.mono { font-family: var(--font-mono); }
.t-gold { color: var(--gold-300); }

.gold-text {
  background-image: linear-gradient(105deg, #f6eac6 0%, #e5c46c 38%, #cd9a33 62%, #f0d68e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.glass {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(246, 234, 198, 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  /* bright top edge — light catching the material */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--gold-400);
}

.k-card {
  background: rgba(11, 12, 15, 0.7);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

/* Demo card (before/after "you said / Blabb typed") — k-card shell + the seg-output
   centering, without .k-step so .seg-spoken/.seg-result keep their own type hierarchy. */
.seg-output.k-card { padding: 24px; }

/* Hover response stays under 200ms — 500ms reads as lag, not elegance */
.card-lift { transition: transform 0.2s var(--ease-out), border-color 0.3s ease; }
.card-lift:hover { transform: translateY(-6px); border-color: rgba(229, 196, 108, 0.35); }

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--gold-400);
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-950);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s var(--ease-out);
  box-shadow: 0 0 0 0 rgba(220, 176, 75, 0.4), 0 12px 40px -12px rgba(220, 176, 75, 0.55);
}
.btn-gold:hover {
  background: var(--gold-300);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(246, 234, 198, 0.25), 0 20px 55px -12px rgba(220, 176, 75, 0.7);
}
/* Response on pointer-down: instant compress, quick release */
.btn-gold:active { transform: scale(0.97); transition-duration: 0.1s; }
.btn-gold svg { width: 16px; height: 16px; }
.btn-gold.btn-sm { padding: 12px 24px; font-size: 13px; }
.btn-gold.btn-lg { padding: 16px 36px; font-size: 16px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(243, 239, 228, 0.9);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.btn-ghost:hover { border-color: rgba(220, 176, 75, 0.6); color: var(--gold-200); }
.btn-ghost:active { transform: scale(0.97); transition: transform 0.1s ease-out; }
.btn-ghost svg { width: 16px; height: 16px; }

/* Section head */
.k-head { max-width: 760px; }
.k-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.k-head-row { display: flex; align-items: center; gap: 16px; }
.k-head-center .k-head-row { justify-content: center; }
.k-index { font-size: 11px; letter-spacing: 0.32em; color: var(--fog); }
.k-rule { height: 1px; width: 40px; background: rgba(205, 154, 51, 0.5); }
.k-head h1, .k-head h2 {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.k-head > p { margin-top: 24px; max-width: 640px; font-size: 16px; line-height: 1.7; color: var(--fog); }
.k-head-center > p { margin-left: auto; margin-right: auto; }

/* Scroll reveal (JS adds .js on <html>; without JS everything stays visible).
   0.5s + light blur: reveals should never make the reader wait, and animated
   filter blur on full sections is expensive — keep it small. Stagger steps
   sit in the 30–80ms band. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--spring-settle), transform 0.5s var(--spring-settle);
}
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.06s; }
.js .reveal.d2 { transition-delay: 0.12s; }
.js .reveal.d3 { transition-delay: 0.18s; }
.js .reveal.d4 { transition-delay: 0.24s; }
.js .reveal.d5 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* infinite decorative loops: badge dot */
  .k-badge-dot { animation: none; }
  .k-style-tab.selected { animation: none; }
}

/* Skip link */
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 300;
  padding: 10px 18px;
  background: var(--gold-400);
  color: var(--ink-950);
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  transform: translateY(-64px);
  opacity: 0;
  pointer-events: none;
}
.skip-link:focus-visible { transform: none; opacity: 1; pointer-events: auto; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; border-radius: 6px; }

/* ---------- Navigation ---------- */

.k-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.5s ease, backdrop-filter 0.5s ease;
}
.k-nav.scrolled {
  background: rgba(7, 8, 10, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
/* Scroll edge effect: a hairline that fades out toward the sides, only while
   content actually passes beneath the chrome — no hard full-width divider. */
.k-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(246, 234, 198, 0.14) 18% 82%, transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.k-nav.scrolled::after { opacity: 1; }
.k-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 72px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.k-brand { display: flex; align-items: center; gap: 10px; }
.k-brand-mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(220, 176, 75, 0.4);
  background: rgba(220, 176, 75, 0.1);
  color: var(--gold-300);
  transition: background 0.3s ease;
}
.k-brand:hover .k-brand-mark { background: rgba(220, 176, 75, 0.2); }
.k-brand-mark svg { width: 18px; height: 18px; }
.k-brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--cream); }

.k-nav-links { display: flex; align-items: center; gap: 32px; }
.k-nav-links > a, .k-drop-btn {
  font-size: 13px;
  font-weight: 500;
  color: rgba(243, 239, 228, 0.6);
  transition: color 0.3s ease;
  line-height: 72px;
}
.k-nav-links > a:hover, .k-drop-btn:hover, .k-drop.open .k-drop-btn { color: var(--gold-200); }

.k-drop { position: relative; }
.k-drop-panel {
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  /* anchored to its trigger: scales open from the top, where the button is */
  transform-origin: 50% 0;
  transform: translateX(-50%) translateY(4px) scale(0.97);
  background: rgba(11, 12, 15, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 48px rgba(0, 0, 0, 0.6);
  padding: 22px 26px 16px;
  width: max-content;
  opacity: 0;
  visibility: hidden;
  /* enter and exit share the same path (fade + settle back toward the trigger) */
  transition: opacity 0.2s ease, transform 0.25s var(--spring-settle), visibility 0.25s;
}
.k-drop.open .k-drop-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); }
.k-drop-cols { display: flex; gap: 40px; }
.k-drop-col { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.k-drop-head {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fog);
  margin-bottom: 8px;
}
.k-drop-col a { font-size: 13px; padding: 4px 0; color: rgba(243, 239, 228, 0.7); line-height: 1.6; }
.k-drop-col a:hover { color: var(--gold-200); }
.k-drop-all { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--gold-300); line-height: 1.6; }

.k-nav-cta {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--gold-400);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-950);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
}
.k-nav-cta:hover { background: var(--gold-300); box-shadow: 0 10px 35px -10px rgba(220, 176, 75, 0.7); }
.k-nav-cta:active { transform: scale(0.96); transition: transform 0.1s ease-out; }

.k-nav-toggle { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--hairline); font-size: 18px; }
.k-nav-mobile { display: none; }
.k-nav-mobile:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 40px 24px;
  border-top: 1px solid var(--hairline);
  background: rgba(7, 8, 10, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.k-nav-mobile a { font-size: 14px; font-weight: 500; color: rgba(243, 239, 228, 0.7); }
.k-nav-mobile a.k-nav-cta { color: var(--ink-950); width: fit-content; }

/* ---------- Fixed video background (homepage) ---------- */

.k-video-bg { position: fixed; inset: 0; z-index: -1; }
.k-video-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.07; filter: blur(4px); transform: scale(1.05); }

/* ---------- Hero ---------- */

.k-hero { position: relative; overflow: hidden; padding-top: 72px; }
.k-hero-bg { position: absolute; inset: 0; }
.k-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.k-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7, 8, 10, 0.7), rgba(7, 8, 10, 0.55) 50%, var(--ink-950));
}
.k-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(7, 8, 10, 0.6) 75%);
}
.k-hero-inner { position: relative; padding-top: 96px; padding-bottom: 110px; }
.k-hero-head { max-width: 880px; margin: 0 auto; text-align: center; }

.k-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(220, 176, 75, 0.3);
  background: rgba(220, 176, 75, 0.1);
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-200);
}
.k-badge-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold-300); animation: pulse-dot 1.4s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.k-hero h1 {
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(52px, 9vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.k-hero-sub {
  margin: 28px auto 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(243, 239, 228, 0.7);
}
.k-hero-ctas {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.k-hero-stats {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 32px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fog);
}
.k-hero-stats b { font-weight: 500; color: rgba(243, 239, 228, 0.7); }
.k-hero-stats b.t-gold { color: var(--gold-300); }
.k-vr { height: 12px; width: 1px; background: rgba(255, 255, 255, 0.15); }

/* Dictation demo */
.k-demo-wrap { max-width: 800px; margin: 0 auto; }
.k-demo-note { margin-top: 0; text-align: center; font-size: 10px; letter-spacing: 0.3em; color: rgba(166, 161, 148, 0.7); }

/* ---------- Marquee ---------- */

.k-marquee-band { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: rgba(11, 12, 15, 0.6); padding: 28px 0; }
.k-marquee { position: relative; overflow: hidden; }
.k-marquee::before, .k-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 128px;
  z-index: 2;
  pointer-events: none;
}
.k-marquee::before { left: 0; background: linear-gradient(to right, var(--ink-950), transparent); }
.k-marquee::after { right: 0; background: linear-gradient(to left, var(--ink-950), transparent); }
.k-marquee-row {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding-right: 56px;
}
@media (prefers-reduced-motion: no-preference) {
  .k-marquee-row.animate { animation: marquee 42s linear infinite; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.k-marquee-row span {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  white-space: nowrap;
  color: rgba(243, 239, 228, 0.45);
  transition: color 0.3s ease;
}
.k-marquee-row span:hover { color: var(--gold-200); }
.k-marquee-row i { width: 4px; height: 4px; border-radius: 999px; background: rgba(205, 154, 51, 0.6); flex-shrink: 0; }
.k-marquee-note { margin-top: 20px; text-align: center; font-size: 10px; letter-spacing: 0.34em; color: rgba(166, 161, 148, 0.7); }

/* ---------- How it works ---------- */

.k-steps { margin-top: 64px; display: grid; gap: 20px; }
@media (min-width: 768px) { .k-steps { grid-template-columns: repeat(3, 1fr); } }
.k-step { position: relative; overflow: hidden; padding: 32px; }
.k-ghost-num {
  position: absolute;
  top: -32px; right: -16px;
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  transition: color 0.5s ease;
}
.k-step:hover .k-ghost-num { color: rgba(220, 176, 75, 0.1); }
.k-tile {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(220, 176, 75, 0.25);
  background: rgba(220, 176, 75, 0.1);
  color: var(--gold-300);
}
.k-tile svg { width: 20px; height: 20px; }
.k-step h3 { margin-top: 28px; font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--cream); }
.k-step > p { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--fog); }
.k-step-meta { margin-top: 24px !important; font-size: 10px !important; letter-spacing: 0.28em; color: rgba(220, 176, 75, 0.8) !important; }

/* ---------- Writing styles ---------- */

.k-style-tabs { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 10px; }
.k-style-tab {
  border-radius: 999px;
  border: 1px solid var(--hairline);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(243, 239, 228, 0.6);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.k-style-tab:hover { border-color: rgba(220, 176, 75, 0.4); color: var(--gold-200); }
.k-style-tab:active { transform: scale(0.96); transition: transform 0.1s ease-out; }
.k-style-tab.selected {
  border-color: transparent;
  background: var(--gold-400);
  color: var(--ink-950);
  box-shadow: 0 10px 30px -10px rgba(220, 176, 75, 0.6);
  /* the click carried momentum — a small overshoot pop on arrival */
  animation: tab-pop 0.35s var(--spring-bounce);
}
@keyframes tab-pop { from { transform: scale(0.96); } to { transform: scale(1); } }

.k-style-grid { margin-top: 40px; display: grid; gap: 20px; }
@media (min-width: 1024px) { .k-style-grid { grid-template-columns: 1fr 1fr; } }
.k-said { padding: 32px; background: rgba(7, 8, 10, 0.7); }
.k-panel-kicker { font-size: 10px; letter-spacing: 0.3em; color: var(--fog); }
.k-panel-kicker.t-gold { color: var(--gold-300); }
.k-said-text {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--fog);
}
.k-panel-foot { margin-top: 24px; font-size: 13px; color: rgba(166, 161, 148, 0.7); }

/* Screen match only: the window Blabb reads for context, shown beside the speech.
   Collapsed by default; .show expands it with the same easing as the rest of the page. */
.k-screen-ctx {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  border: 1px solid rgba(220, 176, 75, 0.2);
  border-radius: 10px;
  background: rgba(220, 176, 75, 0.05);
  padding: 0 16px;
  transform: translateY(8px);
  /* max-height/padding are layout-animating — kept for the collapse mechanic,
     but shortened so the layout work is over quickly */
  transition: max-height 0.3s var(--ease-out), opacity 0.3s var(--ease-out),
    transform 0.3s var(--ease-out), margin-top 0.3s var(--ease-out), padding 0.3s var(--ease-out);
}
.k-screen-ctx.show {
  max-height: 140px;
  opacity: 1;
  margin-top: 20px;
  padding: 14px 16px;
  transform: none;
}
@media (prefers-reduced-motion: reduce) { .k-screen-ctx { transition: none; } }
.k-screen-snippet { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--fog); }
.k-screen-snippet b { font-weight: 600; color: var(--cream); }

.k-typed-panel {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-color: rgba(220, 176, 75, 0.25);
  background: linear-gradient(to bottom, rgba(220, 176, 75, 0.07), transparent);
}
.k-typed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.k-style-chip {
  border-radius: 999px;
  background: rgba(220, 176, 75, 0.15);
  padding: 4px 12px;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-200);
}
.k-typed-text {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--cream);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), filter 0.45s var(--ease-out);
}
.k-style-chip { transition: opacity 0.25s ease, transform 0.25s ease; }
.k-typed-note { margin-top: 24px; font-size: 13px; color: rgba(237, 215, 150, 0.7); transition: opacity 0.4s ease 0.1s; }
.k-fade { opacity: 0 !important; transform: translateY(12px); filter: blur(4px); }

.k-note { margin-top: 40px; max-width: 760px; font-size: 14px; line-height: 1.7; color: var(--fog); }
.k-note a, .k-composite a, .k-numbers-foot a, .k-it-strip a, .k-ed-more a, .k-plan-more a, .k-table-foot a { color: var(--gold-300); }
.k-note a:hover, .k-composite a:hover, .k-numbers-foot a:hover, .k-it-strip a:hover, .k-ed-more a:hover, .k-plan-more a:hover, .k-table-foot a:hover { text-decoration: underline; }

/* ---------- Privacy ---------- */

.k-privacy-glow {
  position: absolute;
  top: 0; left: 50%;
  width: min(900px, 96vw); height: 500px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(205, 154, 51, 0.05);
  filter: blur(48px);
  pointer-events: none;
}
.k-privacy-grid { position: relative; display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .k-privacy-grid { grid-template-columns: 1.05fr 1fr; } }

.k-cable {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 440px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: rgba(11, 12, 15, 0.7);
  padding: 20px 24px;
  text-align: left;
  transition: border-color 0.3s ease;
}
.k-cable:hover { border-color: rgba(220, 176, 75, 0.4); }
.k-cable-left { display: flex; align-items: center; gap: 16px; }
.k-cable-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--fog);
  transition: background 0.3s ease, color 0.3s ease;
}
.k-cable-ico svg { width: 20px; height: 20px; }
.k-cable[data-online="true"] .ico-disconnected { display: none; }
.k-cable[data-online="false"] .ico-connected { display: none; }
.k-cable[data-online="false"] .k-cable-ico { background: rgba(220, 176, 75, 0.15); color: var(--gold-300); }
.k-cable-state { display: block; font-size: 10px; letter-spacing: 0.3em; color: var(--fog); }
.k-cable-line { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--cream); }

.k-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px; height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}
.k-switch i {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--cream);
  transition: left 0.3s ease, background 0.3s ease;
}
.k-cable[data-online="false"] .k-switch, .k-switch.on { background: var(--gold-400); }
.k-cable[data-online="false"] .k-switch i, .k-switch.on i { left: 22px; background: var(--ink-950); }
.k-cable-hint { margin-top: 12px; font-size: 10px; letter-spacing: 0.2em; color: rgba(166, 161, 148, 0.6); }

.k-promises { display: grid; gap: 14px; }
@media (min-width: 640px) { .k-promises { grid-template-columns: 1fr 1fr; } }
.k-promise { border-radius: 12px; padding: 20px; }
.k-check { color: var(--gold-300); font-size: 14px; font-weight: 700; }
.k-promise h3 { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--cream); }
.k-promise p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--fog); }

.k-it-strip {
  position: relative;
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid rgba(220, 176, 75, 0.2);
  background: rgba(220, 176, 75, 0.05);
  padding: 20px 28px;
}
.k-shield { flex-shrink: 0; color: var(--gold-300); }
.k-shield svg { width: 24px; height: 24px; }
.k-it-strip p { font-size: 14px; line-height: 1.7; color: rgba(243, 239, 228, 0.8); }

/* ---------- The Library ---------- */

.k-library-glow {
  position: absolute;
  top: 96px; right: 0;
  width: min(520px, 96vw); height: 420px;
  border-radius: 999px;
  background: rgba(205, 154, 51, 0.06);
  filter: blur(48px);
  pointer-events: none;
}
.k-library-grid { position: relative; margin-top: 64px; display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .k-library-grid { grid-template-columns: 1.1fr 1fr; } }

.k-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 24px; }
.k-book { position: relative; aspect-ratio: 2 / 3; perspective: 900px; text-align: left; container-type: inline-size; }
.k-book::after {
  content: "";
  position: absolute;
  left: 5%; right: 5%; bottom: -7.5%;
  height: 7%;
  z-index: -1;
  background: radial-gradient(50% 60% at 50% 50%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.28) 55%, transparent 78%);
  filter: blur(5px);
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out), filter 0.25s var(--ease-out);
}
.k-book:hover::after { transform: scale(1.08, 1.2); opacity: 0.75; filter: blur(8px); }
.k-book.selected::after { transform: scale(1.14, 1.35); opacity: 0.6; filter: blur(10px); }
.k-book-img {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  transition: transform 0.25s var(--ease-out);
  transform-style: preserve-3d;
  box-shadow: 0 35px 70px -20px rgba(0, 0, 0, 0.85);
}
/* Kimi behavior: hover tilts only; the lift is reserved for the selected volume */
.k-book:hover .k-book-img { transform: rotateY(-7deg); }
.k-book.selected .k-book-img { transform: translateY(-12px) rotateY(-4deg); }
.k-book.selected:hover .k-book-img { transform: translateY(-12px) rotateY(-7deg); }
.k-book-img { position: relative; }
.k-book-img img { width: 100%; height: 100%; object-fit: cover; }
.k-book-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 8, 10, 0.45), transparent 55%);
}
/* Traveling spotlight: one glow element glides between books (the framer-motion
   layoutId animation from the original); positioned by JS. */
.k-shelf { position: relative; }
.k-shelf::before {
  content: "";
  position: absolute;
  inset: -16% -10% -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.69 0 0 0 0 0.29 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    radial-gradient(70% 65% at 50% 40%, rgba(220, 176, 75, 0.07), transparent 70%),
    radial-gradient(90% 45% at 50% 102%, rgba(0, 0, 0, 0.55), transparent 72%);
  -webkit-mask-image: radial-gradient(72% 68% at 50% 52%, #000 38%, transparent 76%);
  mask-image: radial-gradient(72% 68% at 50% 52%, #000 38%, transparent 76%);
}
.k-shelf-glow {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  border-radius: 24px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(220, 176, 75, 0.28), rgba(220, 176, 75, 0.08) 65%, transparent);
  filter: blur(26px);
  pointer-events: none;
  /* transform-only glide: the books share one size, so width/height only change
     on resize (set instantly by JS) — never animate layout properties */
  transition: transform 0.5s var(--ease-out);
}
.k-book { z-index: 1; }

.k-book-label {
  position: absolute;
  left: 0; right: 0;
  bottom: -36px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(166, 161, 148, 0.6);
  transition: color 0.3s ease;
}
.k-book:hover .k-book-label { color: rgba(243, 239, 228, 0.7); }
.k-book.selected .k-book-label { color: var(--gold-300); }
.k-shelf-hint { margin-top: 64px; text-align: center; font-size: 10px; letter-spacing: 0.3em; color: rgba(166, 161, 148, 0.6); }

.k-ed { padding: 40px; background: rgba(7, 8, 10, 0.7); }
/* Detail swap — the original's AnimatePresence: exit up with blur, enter from below.
   Extra specificity so it wins over the .js .reveal transition. */
.js .k-ed.reveal.visible {
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), filter 0.45s var(--ease-out);
}
.js .k-ed.swap-out { opacity: 0; transform: translateY(-16px); filter: blur(5px); }
.js .k-ed.swap-pre { transition: none !important; opacity: 0; transform: translateY(22px); filter: blur(5px); }
@media (min-width: 1024px) {
  /* rise level with the section copy above the shelf, trimming the dead space */
  .k-ed { position: sticky; top: 112px; margin-top: -150px; }
}
.k-ed-sub { font-size: 10px; letter-spacing: 0.3em; color: var(--gold-400); }
.k-ed-name { margin-top: 12px; font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); font-weight: 300; color: var(--cream); }
.k-ed-blurb { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--fog); }
.k-ed-demo {
  margin-top: 28px;
  border-radius: 12px;
  border: 1px solid rgba(220, 176, 75, 0.2);
  background: rgba(220, 176, 75, 0.06);
  padding: 20px;
}
.k-ed-demo .mono { font-size: 10px; letter-spacing: 0.28em; color: var(--fog); }
.k-ed-demo .mono.t-gold { margin-top: 16px; color: var(--gold-300); }
.k-ed-say, .k-ed-types { margin-top: 6px; font-family: var(--font-display); font-size: 18px; font-weight: 300; }
.k-ed-say { font-style: italic; color: var(--fog); }
.k-ed-types { color: var(--cream); }
.k-ed-points { margin-top: 28px; list-style: none; display: grid; gap: 10px; }
.k-ed-points li { position: relative; padding-left: 28px; font-size: 14px; color: rgba(243, 239, 228, 0.85); }
.k-ed-points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold-400); font-weight: 700; }
.k-ed-points.k-req-list { text-align: left; max-width: 640px; margin-left: auto; margin-right: auto; }
.k-ed-foot {
  margin-top: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
.k-ed-price { font-family: var(--font-display); font-size: 24px; color: var(--cream); }
.k-ed-yearly { margin-top: 4px; font-size: 12px; color: var(--fog); }
.k-ed-more { margin-top: 20px; font-size: 13px; }

/* ---------- Quotes ---------- */

.k-quotes { margin-top: 64px; display: grid; gap: 20px; }
@media (min-width: 768px) { .k-quotes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .k-quotes { grid-template-columns: repeat(3, 1fr); }
  .k-quote.span2 { grid-column: span 2; }
}
.k-quote { position: relative; display: flex; flex-direction: column; padding: 32px; }
.k-quote .k-scenario {
  flex: 1;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(243, 239, 228, 0.9);
}
.k-quote figcaption { margin-top: 28px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.k-quote figcaption .mono { font-size: 10px; letter-spacing: 0.22em; color: rgba(220, 176, 75, 0.8); }
.k-composite { margin: 40px auto 0; max-width: 560px; text-align: center; font-size: 12px; line-height: 1.7; color: rgba(166, 161, 148, 0.7); }

/* ---------- Numbers ---------- */

.k-numbers { overflow: hidden; padding-top: 96px; padding-bottom: 110px; }
.k-numbers-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: min(700px, 96vw); height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(205, 154, 51, 0.05);
  filter: blur(48px);
  pointer-events: none;
}
.k-numbers-kicker { position: relative; text-align: center; font-size: 11px; letter-spacing: 0.32em; color: var(--fog); }
.k-stats { position: relative; margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; }
@media (min-width: 1024px) { .k-stats { grid-template-columns: repeat(4, 1fr); } }
.k-stat { text-align: center; }
.k-stat-num {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 60px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.k-stat-label { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--gold-200); }
.k-stat-note { margin-top: 4px; font-size: 10px; letter-spacing: 0.18em; color: rgba(166, 161, 148, 0.7); }
.k-numbers-foot { position: relative; margin: 56px auto 0; max-width: 640px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--fog); }

/* ---------- Compare ---------- */

.k-table { margin-top: 56px; overflow: hidden; border-radius: 16px; border: 1px solid var(--hairline); }
.k-tr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 640px) { .k-tr { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr); } }
.k-tr.alt { background: rgba(11, 12, 15, 0.4); }
.k-tr:not(.alt):not(.k-thead) { background: rgba(7, 8, 10, 0.6); }
.k-thead { border-bottom: 1px solid var(--hairline); background: rgba(11, 12, 15, 0.8); }
.k-thead .k-tc { display: block; text-align: center; }
.k-th { font-size: 13px; font-weight: 600; color: var(--fog); }
.k-th-blabb { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--gold-200); }
.k-th-sub { margin-top: 4px; font-size: 9px; letter-spacing: 0.22em; color: rgba(166, 161, 148, 0.6); }
.k-th-sub.t-gold { color: rgba(220, 176, 75, 0.8); }
.k-tl { display: flex; align-items: center; padding: 20px; font-size: 13px; font-weight: 500; color: rgba(243, 239, 228, 0.8); }
.k-tc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left: 1px solid var(--hairline);
  padding: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fog);
}
.k-tc-blabb { border-left-color: rgba(220, 176, 75, 0.3); background: rgba(220, 176, 75, 0.06); color: var(--cream); }
.k-tc-win { border-left-color: rgba(220, 176, 75, 0.45); background: rgba(220, 176, 75, 0.1); color: var(--cream); }
.k-x { flex-shrink: 0; margin-top: 1px; color: rgba(248, 113, 113, 0.7); font-size: 12px; }
.k-c { flex-shrink: 0; margin-top: 1px; color: var(--gold-300); font-size: 12px; font-weight: 700; }
.k-table-foot { margin-top: 24px; text-align: center; font-size: 10px; letter-spacing: 0.2em; color: rgba(166, 161, 148, 0.6); }
.k-caveat { margin: 16px auto 0; max-width: 640px; text-align: center; font-size: 13px; line-height: 1.7; color: var(--fog); }

/* ---------- Pricing ---------- */

.k-pricing-glow {
  position: absolute;
  top: 64px; left: 50%;
  width: min(800px, 96vw); height: 400px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(205, 154, 51, 0.06);
  filter: blur(48px);
  pointer-events: none;
}
.k-bill { position: relative; margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.k-bill-label { font-size: 14px; color: var(--fog); transition: color 0.3s ease; }
.k-bill-label.on { color: var(--cream); }
.k-bill-switch { width: 52px; height: 28px; }
.k-bill-switch i { width: 24px; height: 24px; top: 2px; }
.k-bill-switch.on i { left: 26px; }
.k-bill-chip {
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(220, 176, 75, 0.15);
  padding: 3px 10px;
  font-size: 11px;
  color: var(--gold-200);
}

.k-plans { position: relative; margin-top: 48px; display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 1024px) { .k-plans { grid-template-columns: repeat(3, 1fr); } }
.k-plan { position: relative; display: flex; flex-direction: column; padding: 32px; background: rgba(7, 8, 10, 0.7); transition: border-color 0.3s ease, transform 0.2s var(--ease-out); }
.k-plan:hover { border-color: rgba(220, 176, 75, 0.3); }
.k-plan-featured {
  border-color: rgba(220, 176, 75, 0.5);
  background: linear-gradient(to bottom, rgba(220, 176, 75, 0.1), var(--ink-950));
  box-shadow: 0 30px 90px -30px rgba(220, 176, 75, 0.35);
}
@media (min-width: 1024px) { .k-plan-featured { transform: translateY(-12px); } }
@media (max-width: 1023px) { .k-plan-featured { order: -1; } }
.k-plan-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: 999px;
  background: var(--gold-400);
  padding: 6px 16px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--ink-950);
}
.k-plan-tag { font-size: 10px; letter-spacing: 0.3em; color: var(--fog); }
.k-plan h3 { margin-top: 12px; font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--cream); }
.k-plan-price { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.k-amount { font-family: var(--font-display); font-size: 48px; font-weight: 300; letter-spacing: -0.02em; color: var(--cream); }
.k-per { font-size: 14px; color: var(--fog); }
.k-per em { font-style: normal; }
.k-plan-note { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--fog); }
.k-plan-equiv { margin-top: 6px; font-size: 12px; color: var(--fog); }
.k-plan-equiv:empty { display: none; }
.k-plan-list { margin-top: 28px; flex: 1; list-style: none; display: grid; gap: 12px; align-content: start; }
.k-plan-list li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.5; color: rgba(243, 239, 228, 0.85); }
.k-plan-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold-400); font-weight: 700; }
.k-plan-cta {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.k-plan-cta.gold { background: var(--gold-400); color: var(--ink-950); }
.k-plan-cta.gold:hover { background: var(--gold-300); box-shadow: 0 15px 45px -12px rgba(220, 176, 75, 0.7); }
.k-plan-cta.ghost { border: 1px solid rgba(255, 255, 255, 0.15); color: var(--cream); }
.k-plan-cta.ghost:hover { border-color: rgba(220, 176, 75, 0.6); color: var(--gold-200); }
.k-plan-cta:active { transform: scale(0.98); transition: transform 0.1s ease-out; }
.k-plan-more { margin-top: 16px; text-align: center; font-size: 12px; }
.k-pricing-foot { margin: 40px auto 0; max-width: 640px; text-align: center; font-size: 12px; line-height: 1.7; color: rgba(166, 161, 148, 0.8); }

/* ---------- FAQ ---------- */

.k-faq { margin-top: 56px; }
.k-faq details { border-bottom: 1px solid var(--hairline); }
.k-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 300;
  color: var(--cream);
  transition: color 0.3s ease;
}
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-mono); font-size: 16px; color: var(--gold-400); transition: transform 0.25s ease; }
.k-faq details[open] summary { color: var(--gold-200); }
.k-faq details[open] summary::after { transform: rotate(45deg); }
.k-faq summary:hover { color: var(--gold-200); }
.k-faq details p { padding: 0 0 24px; font-size: 15px; line-height: 1.7; color: var(--fog); }
.js .k-faq details p {
  overflow: hidden;
  transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
}

/* ---------- Final CTA ---------- */

.k-final { position: relative; overflow: hidden; border-top: 1px solid var(--hairline); }
.k-final-bg { position: absolute; inset: 0; }
.k-final-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.k-final-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--ink-950), rgba(7, 8, 10, 0.4), var(--ink-950));
}
.k-final-inner { position: relative; max-width: 1000px; padding-top: 150px; padding-bottom: 150px; text-align: center; }
.k-final-kicker { font-size: 11px; letter-spacing: 0.34em; color: var(--gold-300); }
.k-final h2 {
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.k-final-sub { margin: 28px auto 0; max-width: 540px; font-size: 17px; line-height: 1.7; color: rgba(243, 239, 228, 0.7); }
/* Homepage only: the lone CTA inside its reveal wrapper needs the gap under
   the subtitle. Subpages put their CTA pair in a flex row that carries its own
   margin — an extra margin on the gold button there inflates the row and
   stretches the ghost button (align-items defaults to stretch). */
.k-final .reveal > .btn-gold { margin-top: 44px; }
.k-final-note { margin-top: 24px; font-size: 10px; letter-spacing: 0.28em; color: var(--fog); }

/* ---------- Footer ---------- */

.k-footer { border-top: 1px solid var(--hairline); background: var(--ink-950); padding: 56px 0 0; }
.k-footer-top { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 1024px) { .k-footer-top { flex-direction: row; justify-content: space-between; } }
.k-footer-brand p { margin-top: 16px; max-width: 340px; font-size: 14px; line-height: 1.7; color: var(--fog); }
.k-footer-brand .k-footer-trust { margin-top: 28px; }
.k-footer-cols { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
@media (min-width: 1024px) {
  .k-footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-left: 64px; }
}
.k-footer-col { display: flex; flex-direction: column; gap: 10px; }
.k-footer-col > .mono { font-size: 10px; letter-spacing: 0.3em; color: rgba(166, 161, 148, 0.7); margin-bottom: 6px; }
.k-footer-col a { font-size: 13px; color: rgba(243, 239, 228, 0.7); transition: color 0.3s ease; }
.k-footer-col a:hover { color: var(--gold-200); }
.k-footer-bottom {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--hairline);
  padding: 28px 0 32px;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(166, 161, 148, 0.6);
}
@media (min-width: 640px) { .k-footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }

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

@media (max-width: 1100px) {
  .k-nav-links { display: none; }
  .k-nav-cta { display: none; }
  .k-nav-toggle { display: grid; place-items: center; }
}
@media (max-width: 640px) {
  .k-wrap { padding-left: 24px; padding-right: 24px; }
  .k-nav-inner { padding: 0 24px; }
  .k-section { padding-top: 90px; padding-bottom: 90px; }
  .k-shelf { gap: 14px; }
  .k-ed { padding: 28px; }
}

/* Contextual "read more" lines under sections */
.k-more-line { margin-top: 40px; text-align: center; font-size: 10px; letter-spacing: 0.22em; color: rgba(166, 161, 148, 0.6); }
.k-more-line a { color: var(--gold-300); }
.k-more-line a:hover { text-decoration: underline; }

/* ---------- CSS-built volumes (foil text stays crisp at shelf size) ---------- */

.k-bookc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-top: 13%;
  border-radius: 4px 8px 8px 4px;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  transform-style: preserve-3d;
  /* layered depth: long throw shadow, tight contact shadow, top-edge highlight */
  box-shadow:
    0 35px 70px -20px rgba(0, 0, 0, 0.85),
    0 14px 28px -14px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 245, 215, 0.3),
    inset -1px 0 0 rgba(255, 245, 215, 0.12);
}
/* Resting pose is already angled; hover deepens the tilt, scales up and glows;
   the lift stays reserved for the selected volume - whose cover also cracks
   open around the spine, revealing the page block underneath. */
.k-bookc { transform: rotateY(-10deg); transform-origin: left center; z-index: 1; }
.k-book { z-index: 1; }
.k-book:hover, .k-book.selected { z-index: 2; }
.k-bookc-pages {
  position: absolute;
  inset: 2% 2.5% 2% 4%;
  z-index: 0;
  border-radius: 3px 6px 6px 3px;
  transform-origin: left center;
  transform: rotateY(-10deg);
  transition: transform 0.25s var(--ease-out);
  /* page edges drawn as slightly wavy, unevenly spaced lines — a real stack,
     not a ruled strip */
  background:
    repeating-linear-gradient(90deg, #6d2434 0 2px, #e8dfc8 2px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23796b4c' stroke-opacity='0.4' stroke-width='0.9'%3E%3Cpath d='M4 2 q0.3 148 0.1 296'/%3E%3Cpath d='M8.4 2 q0.7 148 0.2 296'/%3E%3Cpath d='M12.8 1.5 q1.1 148 0.4 297'/%3E%3Cpath d='M17.2 1.5 q1.5 149 0.5 297'/%3E%3Cpath d='M21.6 1 q1.9 149 0.7 298'/%3E%3Cpath d='M26 1 q2.3 149 0.9 298'/%3E%3Cpath d='M30.4 0.5 q2.7 150 1.1 299'/%3E%3Cpath d='M34.8 0.5 q3.1 150 1.3 299'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20150%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%237d6f4e%27%20fill-opacity%3D%270.4%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%272.6%27%3E%3Ctext%20x%3D%2713%27%20y%3D%2716%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethe%20shows%20review%20notes%20the%20the%20entered%20and%20was%20the%20amendment%20follow%20same%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2721%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eupon%20the%20during%20session%20were%20spoken%20entry%20by%20without%20pages%20the%20and%20carry%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2726%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Etaken%20morning%20terms%20as%20the%20confirmed%20reader%20further%20in%20hand%20margins%20corrections%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2731%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethe%20entered%20and%20was%20the%20amendment%20follow%20same%20the%20small%20at%20date%20set%20the%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2741%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Espoken%20entry%20by%20without%20pages%20the%20and%20carry%20made%20later%20line%20upon%20the%20shows%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2746%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Econfirmed%20reader%20further%20in%20hand%20margins%20corrections%20a%20each%20close%20last%20record%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2751%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eamendment%20follow%20same%20the%20small%20at%20date%20set%20the%20quick%20that%20of%20taken%20morning%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2756%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethe%20and%20carry%20made%20later%20line%20upon%20the%20shows%20review%20notes%20the%20the%20entered%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2761%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Emargins%20corrections%20a%20each%20close%20last%20record%20upon%20the%20during%20session%20were%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2766%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eat%20date%20set%20the%20quick%20that%20of%20taken%20morning%20terms%20as%20the%20confirmed%20reader%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2776%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eline%20upon%20the%20shows%20review%20notes%20the%20the%20entered%20and%20was%20the%20amendment%20follow%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2781%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Elast%20record%20upon%20the%20during%20session%20were%20spoken%20entry%20by%20without%20pages%20the%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2786%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethat%20of%20taken%20morning%20terms%20as%20the%20confirmed%20reader%20further%20in%20hand%20margins%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2791%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Enotes%20the%20the%20entered%20and%20was%20the%20amendment%20follow%20same%20the%20small%20at%20date%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%2796%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Esession%20were%20spoken%20entry%20by%20without%20pages%20the%20and%20carry%20made%20later%20line%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%27101%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eas%20the%20confirmed%20reader%20further%20in%20hand%20margins%20corrections%20a%20each%20close%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%27111%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ewas%20the%20amendment%20follow%20same%20the%20small%20at%20date%20set%20the%20quick%20that%20of%20taken%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%27116%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ewithout%20pages%20the%20and%20carry%20made%20later%20line%20upon%20the%20shows%20review%20notes%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%27121%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ein%20hand%20margins%20corrections%20a%20each%20close%20last%20record%20upon%20the%20during%20session%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%27126%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethe%20small%20at%20date%20set%20the%20quick%20that%20of%20taken%20morning%20terms%20as%20the%20confirmed%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%27131%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Emade%20later%20line%20upon%20the%20shows%20review%20notes%20the%20the%20entered%20and%20was%20the%3C%2Ftext%3E%3Ctext%20x%3D%2713%27%20y%3D%27136%27%20textLength%3D%2779%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eeach%20close%20last%20record%20upon%20the%20during%20session%20were%20spoken%20entry%20by%20without%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    linear-gradient(to right, #cfc6ab 0%, #f2ebd6 30%, #ede4cc 85%, #d6cdb2 100%);
  background-size: 14% 1.4%, 18% 100%, 88% 100%, 100% 100%;
  background-position: right top, right, left, center;
  background-repeat: no-repeat;
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.7);
  /* deckle: the fore edge is minutely ragged, not die-cut */
  clip-path: polygon(0 0, 99.7% 0, 99.4% 6%, 99.9% 12%, 99.5% 19%, 99.8% 27%, 99.3% 34%, 99.9% 42%, 99.6% 50%, 99.4% 58%, 99.9% 65%, 99.5% 73%, 99.8% 81%, 99.4% 88%, 99.9% 94%, 99.6% 100%, 0 100%);
}
/* a couple of sheets sit proud of the stack */
.k-bookc-pages::before, .k-bookc-pages::after {
  content: "";
  position: absolute;
  top: 1.2%; bottom: 1%;
  right: -1.6%;
  width: 30%;
  border-radius: 0 5px 5px 0;
  /* the outermost sheet carries a hint of writing where it peeks past the cover */
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%20150%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%237d6f4e%27%20fill-opacity%3D%270.36%27%20font-family%3D%27Georgia%2Cserif%27%20font-size%3D%272.4%27%3E%3Ctext%20x%3D%274%27%20y%3D%2718%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethe%20shows%20review%20notes%20the%20the%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2724%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eupon%20the%20during%20session%20were%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2730%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Etaken%20morning%20terms%20as%20the%20confirmed%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2736%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethe%20entered%20and%20was%20the%20amendment%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2742%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Espoken%20entry%20by%20without%20pages%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2748%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Econfirmed%20reader%20further%20in%20hand%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2754%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eamendment%20follow%20same%20the%20small%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2760%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethe%20and%20carry%20made%20later%20line%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2766%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Emargins%20corrections%20a%20each%20close%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2772%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eat%20date%20set%20the%20quick%20that%20of%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2778%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eline%20upon%20the%20shows%20review%20notes%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2784%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Elast%20record%20upon%20the%20during%20session%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2790%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethat%20of%20taken%20morning%20terms%20as%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%2796%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Enotes%20the%20the%20entered%20and%20was%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%27102%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Esession%20were%20spoken%20entry%20by%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%27108%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Eas%20the%20confirmed%20reader%20further%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%27114%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ewas%20the%20amendment%20follow%20same%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%27120%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ewithout%20pages%20the%20and%20carry%20made%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%27126%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ein%20hand%20margins%20corrections%20a%3C%2Ftext%3E%3Ctext%20x%3D%274%27%20y%3D%27132%27%20textLength%3D%2730%27%20lengthAdjust%3D%27spacingAndGlyphs%27%3Ethe%20small%20at%20date%20set%20the%20quick%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    linear-gradient(to right, transparent 40%, #efe6cd 70%, #d9d0b4 100%);
  transform: rotate(0.7deg);
  box-shadow: 1px 0 1px rgba(90, 78, 52, 0.35);
}
.k-bookc-pages::after {
  top: 0.8%; bottom: 1.4%;
  right: -0.8%;
  transform: rotate(0.35deg);
  opacity: 0.85;
}
.k-book.selected .k-bookc-pages {
  transform: translateY(-12px) translateZ(30px) rotateX(3.5deg) rotateY(-2deg);
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.7), inset 30px 0 28px -18px rgba(0, 0, 0, 0.42);
}
.k-book:hover .k-bookc {
  transform: translateZ(26px) rotateX(3deg) rotateY(-18deg) scale(1.04);
  box-shadow:
    0 35px 70px -20px rgba(0, 0, 0, 0.85),
    0 14px 28px -14px rgba(0, 0, 0, 0.7),
    0 0 40px -6px rgba(220, 176, 75, 0.35),
    inset 0 1px 0 rgba(255, 245, 215, 0.3),
    inset -1px 0 0 rgba(255, 245, 215, 0.12);
}
.k-book.selected .k-bookc {
  transform: translateY(-12px) translateZ(34px) rotateX(3.5deg) rotateY(-38deg) scale(1.02);
  box-shadow:
    0 35px 70px -20px rgba(0, 0, 0, 0.85),
    0 14px 28px -14px rgba(0, 0, 0, 0.7),
    0 0 46px -4px rgba(220, 176, 75, 0.4),
    inset 0 1px 0 rgba(255, 245, 215, 0.3),
    inset -1px 0 0 rgba(255, 245, 215, 0.12);
}
.k-book.selected:hover .k-bookc { transform: translateY(-12px) translateZ(46px) rotateX(4deg) rotateY(-46deg) scale(1.04); }

/* cloth palettes */
.k-bookc-gold {
  background: radial-gradient(circle at 100% 0%, #b89034 0%, #8e6a1f 42%, #644a16 82%, #43300d 100%);
  color: #3d2c10;
}
.k-bookc-gold .k-bookc-title { text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45); }
.k-bookc-green {
  /* surgical green - the classic medical-text cloth */
  background: radial-gradient(circle at 100% 0%, #143a2c 0%, #0c271d 42%, #06150e 82%, #020c07 100%);
  color: #DCC489;
}
.k-bookc-oxblood {
  /* oxblood - the classic law-library leather */
  background: radial-gradient(circle at 100% 0%, #4e1822 0%, #341015 42%, #1c070c 82%, #0e0306 100%);
  color: #DCC489;
}
.k-bookc-green .k-bookc-title, .k-bookc-oxblood .k-bookc-title {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55), 0 0 10px rgba(220, 176, 75, 0.25);
}

/* spine shadow (left) */
.k-bookc::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12%;
  background: linear-gradient(to right,
    rgba(255, 246, 216, 0.14) 0%, rgba(255, 246, 216, 0.05) 5%,
    rgba(0, 0, 0, 0.5) 26%, rgba(0, 0, 0, 0.22) 60%, transparent 100%);
}
/* page-edge sliver (right) + sheen falling from the top light */
.k-bookc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    /* hinge crease where the cover bends, plus a faint gilt frame rule */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'%3E%3Crect x='8' y='4.5' width='85' height='141' fill='none' stroke='%23f0d68e' stroke-opacity='0.2' stroke-width='0.6'/%3E%3Cpath d='M0.5 13 H5.5 M0.5 16 H5.5 M0.5 134 H5.5 M0.5 137 H5.5' stroke='%23f0d68e' stroke-opacity='0.4' stroke-width='0.9'/%3E%3Cg fill='%23f0d68e' fill-opacity='0.3'%3E%3Cpath d='M12.5 7.2 l1.5 1.6 -1.5 1.6 -1.5 -1.6z'/%3E%3Cpath d='M88.5 7.2 l1.5 1.6 -1.5 1.6 -1.5 -1.6z'/%3E%3Cpath d='M12.5 139.6 l1.5 1.6 -1.5 1.6 -1.5 -1.6z'/%3E%3Cpath d='M88.5 139.6 l1.5 1.6 -1.5 1.6 -1.5 -1.6z'/%3E%3C/g%3E%3C/svg%3E"),
    /* hinge fold: a broad groove deepening to dark, with a light catch on the exit */
    linear-gradient(to right,
      transparent 3.5%,
      rgba(0, 0, 0, 0.22) 5.5%,
      rgba(0, 0, 0, 0.45) 6.8%,
      rgba(0, 0, 0, 0.2) 8%,
      rgba(255, 246, 216, 0.12) 8.8%,
      transparent 10.5%),
    /* page-edge sliver on the fore edge */
    linear-gradient(to left, rgba(255, 250, 235, 0.55) 0, rgba(255, 250, 235, 0.2) 1.6%, transparent 3.6%),
    /* the book's weight: shade gathering at the bottom */
    radial-gradient(120% 42% at 50% 106%, rgba(0, 0, 0, 0.32), transparent 62%),
    /* worn cloth at the corners */
    radial-gradient(14% 9% at 100% 100%, rgba(255, 246, 216, 0.09), transparent 72%),
    radial-gradient(14% 9% at 100% 0%, rgba(255, 246, 216, 0.07), transparent 72%),
    radial-gradient(12% 8% at 0% 100%, rgba(0, 0, 0, 0.18), transparent 70%),
    /* top light falling across the cloth */
    radial-gradient(120% 60% at 70% 0%, rgba(255, 240, 200, 0.32), transparent 55%),
    /* board edge at the tail: dark cut, thin light lip */
    linear-gradient(to top, rgba(0, 0, 0, 0.38) 0, rgba(0, 0, 0, 0.38) 0.7%, rgba(255, 245, 215, 0.09) 0.7%, rgba(255, 245, 215, 0.09) 1.3%, transparent 1.8%),
    /* warm bounce light reflected off the surface below */
    linear-gradient(to top, rgba(220, 176, 75, 0.07), transparent 9%);
}
/* leather grain: an embossed pebble relief — the same noise drives a
   lit-from-above highlight pass and its aligned shadow pass, so each
   pebble catches light on top and shades underneath (layers carry their
   own alpha; blend modes wash out against the near-black cloth) */
.k-bookc-grain {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='5'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='0.65' diffuseConstant='1'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0 0.76 0.6 0 0 0 -0.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='5'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='0.65' diffuseConstant='1'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.03 0 0 0 0 0.03 0 0 0 0 0.03 -0.7 0 0 0 0.36'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}

.k-bookc-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(9px, 11cqw, 18px);
  letter-spacing: 0.3em;
  text-align: center;
  padding: 0 8%;
  text-wrap: balance;
}
.k-bookc-rule { position: relative; z-index: 1; margin-top: 9px; height: 1px; width: 36px; background: currentColor; opacity: 0.5; }
.k-bookc-icon {
  position: relative;
  z-index: 1;
  margin-top: 22%;
  width: 62%;
  /* foil emboss: dark press below, thin light catch above */
  filter: drop-shadow(0 1px 0.4px rgba(0, 0, 0, 0.55)) drop-shadow(0 -0.6px 0.3px rgba(255, 246, 216, 0.4));
}
.k-bookc-vol {
  position: relative;
  z-index: 1;
  margin: auto 0 10%;
  /* sized against the book itself so the line never spans past the cover */
  font-size: clamp(4px, 5.2cqw, 8px);
  letter-spacing: 0.2em;
  opacity: 0.85;
  white-space: nowrap;
}

/* Font Awesome field icons on the covers */
.k-bookc-icon-fa { width: 26%; margin-top: 16%; }
.k-bookc-icon-fa.k-bookc-icon-wide { width: 42%; margin-top: 19%; }

/* Grid children may not force tracks past the viewport (mobile overflow guard) */
.k-steps > *, .k-style-grid > *, .k-privacy-grid > *, .k-promises > *,
.k-library-grid > *, .k-quotes > *, .k-stats > *, .k-plans > *, .k-shelf > * { min-width: 0; }

/* Ribbon bookmark trailing from the page block */
.k-ribbon {
  position: absolute;
  bottom: -9%;
  right: 24%;
  width: 5.5%;
  height: 15%;
  background: linear-gradient(to bottom, #6d2434, #4a1622);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  transform: rotate(1.6deg);
  transform-origin: top center;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45);
}
/* the oxblood volume takes a gold ribbon instead */
.k-book:nth-child(3) .k-ribbon { background: linear-gradient(to bottom, #b98a2e, #8a6a2a); }

/* Randomized wear, one pattern per volume — layered over the base grain
   (::after so it adds to the leather instead of replacing it) */
.k-bookc-grain::after {
  content: "";
  position: absolute;
  inset: 0;
}
.k-book:nth-child(1) .k-bookc-grain::after {
  background-image:
    radial-gradient(22% 12% at 86% 10%, rgba(255, 250, 230, 0.16), transparent 72%),
    linear-gradient(75deg, transparent 42%, rgba(0, 0, 0, 0.14) 47%, transparent 53%);
}
.k-book:nth-child(2) .k-bookc-grain {
  /* each hide is cut from different stock: shift the grain per volume */
  background-position: 37px 61px, 37px 61px;
}
.k-book:nth-child(2) .k-bookc-grain::after {
  background-image:
    radial-gradient(26% 10% at 50% 97%, rgba(255, 250, 230, 0.14), transparent 74%),
    radial-gradient(10% 7% at 28% 38%, rgba(0, 0, 0, 0.14), transparent 70%);
}
.k-book:nth-child(3) .k-bookc-grain {
  background-position: 71px 23px, 71px 23px;
}
.k-book:nth-child(3) .k-bookc-grain::after {
  background-image:
    linear-gradient(to left, rgba(255, 246, 216, 0.12), transparent 9%),
    radial-gradient(9% 6% at 13% 7%, rgba(0, 0, 0, 0.16), transparent 68%);
}

/* Incense smoke curling up behind the chosen volume. The launch zone sits
   at the book's top edge, so the rise happens in open air where it reads */
.k-smoke {
  position: absolute;
  inset: -58% -55% 32% -24%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.k-book.selected .k-smoke { opacity: 1; }
.k-book:not(.selected) .k-smoke i { animation-play-state: paused; }
.k-smoke i {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  filter: blur(6px);
  /* paler than the gold glow so it reads as smoke, not more glow */
  background: radial-gradient(closest-side,
    rgba(226, 218, 202, 0.6),
    rgba(226, 218, 202, 0.2) 58%,
    transparent);
  /* fractal noise mask tears the gradient into wisps */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  -webkit-mask-size: 230% 230%;
  mask-size: 230% 230%;
  opacity: 0;
  will-change: transform, opacity;
  animation: k-smoke-rise 8s linear infinite;
}
/* three rise from the head; two more curl out past the fore edge */
.k-smoke i:nth-child(1) { left: 4%;  width: 36%; height: 52%; --k-drift: -30%; animation-duration: 9.5s; }
.k-smoke i:nth-child(2) { left: 24%; width: 42%; height: 60%; --k-drift: 14%;  animation-delay: -3.4s; -webkit-mask-position: 42% 18%; mask-position: 42% 18%; }
.k-smoke i:nth-child(3) { left: 44%; width: 34%; height: 48%; --k-drift: 34%;  animation-duration: 11s; animation-delay: -6.8s; -webkit-mask-position: 80% 64%; mask-position: 80% 64%; }
.k-smoke i:nth-child(4) { left: 58%; bottom: 24%; width: 40%; height: 42%; --k-drift: 80%;  animation-duration: 10s;   animation-delay: -2s;   -webkit-mask-position: 18% 76%; mask-position: 18% 76%; }
.k-smoke i:nth-child(5) { left: 64%; bottom: 4%;  width: 36%; height: 36%; --k-drift: 105%; animation-duration: 12.5s; animation-delay: -8.2s; -webkit-mask-position: 64% 40%; mask-position: 64% 40%; }
@keyframes k-smoke-rise {
  0%   { transform: translate3d(0, 10%, 0) scale(0.55, 0.7); opacity: 0; }
  14%  { opacity: 0.8; }
  60%  { opacity: 0.5; transform: translate3d(calc(var(--k-drift) * 0.5), -60%, 0) scale(1.05, 1.15); }
  100% { transform: translate3d(var(--k-drift), -130%, 0) scale(1.55, 1.3); opacity: 0; }
}
/* Reduced motion (also matches when Windows animation effects are off):
   the smoke still appears, as a still haze drifting up and off to the right */
@media (prefers-reduced-motion: reduce) {
  .k-smoke i { animation: none; }
  .k-smoke i:nth-child(1) { opacity: 0.5;  transform: translate3d(-16%, -78%, 0) scale(1.1, 1.2); }
  .k-smoke i:nth-child(2) { opacity: 0.38; transform: translate3d(8%, -96%, 0) scale(1.2, 1.35); }
  .k-smoke i:nth-child(3) { opacity: 0.45; transform: translate3d(22%, -64%, 0) scale(1.05, 1.15); }
  .k-smoke i:nth-child(4) { opacity: 0.42; transform: translate3d(52%, -44%, 0) scale(1.2, 1.1); }
  .k-smoke i:nth-child(5) { opacity: 0.34; transform: translate3d(82%, -16%, 0) scale(1.25, 1.05); }
}

/* ---------- Hover gating ----------
   Touch fires emulated hovers on tap and they stick — neutralize hover *motion*
   on coarse/no-hover pointers. Selection poses (tap-driven state) are untouched. */
@media (hover: none), (pointer: coarse) {
  .card-lift:hover { transform: none; }
  .btn-gold:hover { transform: none; }
  .k-plan:hover { transform: none; }
  .k-book:not(.selected):hover .k-book-img { transform: none; }
  .k-book:not(.selected):hover .k-bookc { transform: rotateY(-10deg); }
  .k-book:not(.selected):hover::after { transform: none; opacity: 1; filter: blur(5px); }
}

/* No shelf is perfect: each volume rests a touch differently (handling a
   book — hover/select — straightens it) */
.k-book:nth-child(1) .k-bookc { transform: rotateY(-8.5deg) rotateZ(-0.45deg); }
.k-book:nth-child(3) .k-bookc { transform: rotateY(-11.5deg) rotateZ(0.4deg); }
.k-book:nth-child(1) .k-bookc-pages { transform: rotateY(-8.5deg) rotateZ(-0.45deg); }
.k-book:nth-child(3) .k-bookc-pages { transform: rotateY(-11.5deg) rotateZ(0.4deg); }
.k-book:nth-child(1):hover .k-bookc, .k-book:nth-child(3):hover .k-bookc {
  transform: translateZ(26px) rotateX(3deg) rotateY(-18deg) scale(1.04);
}
.k-book.selected:nth-child(1) .k-bookc, .k-book.selected:nth-child(3) .k-bookc {
  transform: translateY(-12px) translateZ(34px) rotateX(3.5deg) rotateY(-38deg) scale(1.02);
}
.k-book.selected:nth-child(1):hover .k-bookc, .k-book.selected:nth-child(3):hover .k-bookc {
  transform: translateY(-12px) translateZ(46px) rotateX(4deg) rotateY(-46deg) scale(1.04);
}
.k-book.selected:nth-child(1) .k-bookc-pages, .k-book.selected:nth-child(3) .k-bookc-pages {
  transform: translateY(-12px) translateZ(30px) rotateX(3.5deg) rotateY(-2deg);
}

/* ---------- Material fallbacks (accessibility) ----------
   Reduced transparency: translucent chrome goes frosty-solid, blur off.
   Increased contrast: hairlines become defined borders. */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .k-nav.scrolled,
  .k-drop-panel,
  .k-nav-mobile:not([hidden]) {
    background: #0B0C0F;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .glass, .k-card, .k-drop-panel, .k-plan, .k-table {
    border-color: rgba(246, 234, 198, 0.45);
  }
  .k-nav.scrolled::after {
    background: rgba(246, 234, 198, 0.45);
  }
}

/* ---------- Product screenshots ----------
   Two frame kinds, each consistent within its type:
   .k-shot  — clay frame for real app windows that already carry their own
              Windows titlebar (no fake browser chrome, avoids double-chrome).
   .k-stage — a dark desktop for the floating overlay pills, which have no
              window of their own. The captured pill sits on pure black, so
              mix-blend-mode:lighten dissolves that black into the stage. */
.k-shot {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(246, 234, 198, 0.1);
  background: var(--ink-850);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.k-shot img { width: 100%; height: auto; }

.k-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(246, 234, 198, 0.1);
  /* dark base so the pill (lighter grey) wins under lighten; gold halo up top */
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(220, 176, 75, 0.14), transparent 55%),
    linear-gradient(165deg, #0a0b0e 0%, #050506 100%);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.k-stage img {
  width: min(80%, 480px);
  height: auto;
  mix-blend-mode: lighten;
}

/* Captioned proof figure — kicker under the frame, editorial and quiet */
.k-shot-fig { margin: 0; }
.k-shot-fig figcaption {
  margin-top: 16px;
  color: var(--fog);
  font-size: 13.5px;
  line-height: 1.5;
}
.k-shot-fig figcaption b { color: var(--cream); font-weight: 600; }
.k-shot-kicker { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.18em; color: var(--gold-300); }

/* Walkthrough tour layout (used on walkthrough.html) */
.k-shot-proof { margin: 40px auto 0; max-width: 900px; }
.k-shot-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 40px;
}
.k-tour-cta { text-align: center; padding-top: 4px; padding-bottom: 60px; }

@media (max-width: 780px) {
  .k-shot-duo { grid-template-columns: 1fr; gap: 20px; }
  .k-stage { aspect-ratio: 16 / 8; }
  .k-stage img { width: min(88%, 420px); }
}

/* ============ #how — animated flow (Record → Transcribe → Refine → Types) ============ */
.k-flow-tabs { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 10px; }
.k-flow-tab {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(243, 239, 228, 0.6);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.k-flow-tab:hover { border-color: rgba(220, 176, 75, 0.4); color: var(--gold-200); }
.k-flow-tab:active { transform: scale(0.96); transition: transform 0.1s ease-out; }
.k-flow-tab.selected {
  border-color: transparent;
  background: var(--gold-400);
  color: var(--ink-950);
  box-shadow: 0 10px 30px -10px rgba(220, 176, 75, 0.6);
  animation: tab-pop 0.35s var(--spring-bounce);
}
.k-tab-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: 0.5; transform: scaleX(0); transform-origin: left center; }

.k-flow-grid { margin-top: 40px; display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 1024px) { .k-flow-grid { grid-template-columns: 0.9fr 1.1fr; } }
.k-flow-copy { padding: 32px; background: rgba(7, 8, 10, 0.7); border: 1px solid var(--hairline); border-radius: 16px; }
.k-flow-step-num { font-size: 10px; letter-spacing: 0.3em; color: var(--gold-300); transition: opacity 0.22s var(--ease-out); }
.k-flow-copy h3 { margin-top: 18px; font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--cream); transition: opacity 0.22s var(--ease-out); }
.k-flow-copy > p.k-flow-body { margin-top: 16px; font-size: 15px; line-height: 1.7; color: var(--fog); transition: opacity 0.22s var(--ease-out); }
.k-flow-meta { margin-top: 24px; font-size: 10px; letter-spacing: 0.28em; color: rgba(220, 176, 75, 0.8); transition: opacity 0.22s var(--ease-out); }
.k-fade { opacity: 0 !important; }
.k-flow-media {
  position: relative; border: 1px solid rgba(220, 176, 75, 0.25); border-radius: 16px; overflow: hidden;
  /* same brownie-gold wash as section 2's "Blabb typed" panel, over a dark base */
  background:
    linear-gradient(to bottom, rgba(220, 176, 75, 0.07), transparent 60%),
    radial-gradient(120% 140% at 50% 0%, #0F1015 0%, #07080A 70%);
  aspect-ratio: 16 / 10; min-height: 300px;
}
.k-flow-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Per-stage header pill (reuses .k-style-chip, the filled writing-style pill), top-left of the flow widget */
.flow-chip { position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; }
.flow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-300); box-shadow: 0 0 10px var(--gold-400); display: none; }
.flow-chip.is-live .flow-dot { display: inline-block; animation: flow-pulse 1.2s ease-in-out infinite; }
@keyframes flow-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }

/* Refine overlay styling (tokens, notes, keyframes) now lives in css/how-flow-polish.css */

/* Phones: give the flow box a taller portrait aspect so the four stages fit */
@media (max-width: 720px) {
  .k-flow-tabs { gap: 8px; }
  .k-flow-tab { padding: 8px 13px; font-size: 12px; }
  .k-flow-copy { padding: 22px; }
  .k-flow-media { width: 100%; aspect-ratio: 4 / 5; min-height: 380px; }
  .flow-chip { top: 12px; left: 12px; }
}