/*
Theme Name: Writespace
Theme URI: https://writespace.app
Author: Writespace
Author URI: https://writespace.app
Description: Custom marketing theme for Writespace — a fast, quiet workspace for writers. Warm stone + amber palette matches the product themes. Admin-bar aware sticky nav.
Version: 0.1.1
License: Proprietary
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: writespace
Tags: marketing, landing, one-page, custom
*/

/* =========================================================
   Writespace — landing page stylesheet
   Warm stone + amber palette, matches product themes.
   ========================================================= */

:root {
  --bg: #0c0a09;
  --bg-2: #1c1917;
  --surface: #292524;
  --surface-2: #211d1c;
  --surface-hover: #44403c;
  --border: #3a3431;
  --border-soft: rgba(120, 113, 108, 0.22);

  --text: #fafaf9;
  --text-2: #d6d3d1;
  --text-3: #a8a29e;
  --text-4: #78716c;

  --accent: #d97706;     /* amber-600 */
  --accent-2: #f59e0b;   /* amber-500 */
  --accent-ink: #fffaf3;

  --cream: #FAF7F2;
  --cream-2: #F0EBE1;
  --sepia: #E8E0D4;
  --ink-warm: #3D3530;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(120, 113, 108, 0.08);
  --shadow-md: 0 16px 32px -12px rgba(0,0,0,0.45);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: var(--text); text-decoration: none; }
kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  color: var(--text);
  padding: 1px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(217, 119, 6, 0.1);
  color: var(--accent-2);
  padding: 1px 5px;
  border-radius: 5px;
  white-space: nowrap;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ----- Typography ----- */

.h-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 18px;
}
.h-display em {
  font-style: italic;
  color: var(--accent-2);
  font-weight: 400;
}
.h-2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 18px;
}
.h-2 em { font-style: italic; color: var(--accent-2); }
.lede {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
  color: var(--text-3);
  max-width: 56ch;
  margin: 0 0 28px;
}
.body { font-size: 17px; line-height: 1.7; color: var(--text-3); margin: 0 0 20px; max-width: 52ch; }
.subhead {
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--text-3);
  max-width: 62ch;
  line-height: 1.6;
  margin: 0 auto 36px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 18px;
}
.eyebrow--muted { color: var(--text-4); }
.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 120ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
  cursor: pointer;
  letter-spacing: 0.005em;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--surface); }
.btn--lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; }
.btn--xl { padding: 18px 28px; font-size: 17px; border-radius: 14px; }
.btn--block { width: 100%; justify-content: center; }

/* ----- Nav ----- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(12, 10, 9, 0.72);
  border-bottom: 1px solid var(--border-soft);
}
/* Override .wrap inside the nav so brand + CTAs hug the viewport edges,
   while the menu stays visually centered via 3-column grid.
   NOTE: use padding-left/right only (NOT the shorthand) so .nav__inner's
   padding-top/bottom below isn't clobbered by higher-specificity cascade. */
.nav > .wrap {
  max-width: none;
  padding-left: 32px;
  padding-right: 32px;
}
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  min-height: 56px;
  gap: 24px;
}
.nav__inner .brand { justify-self: start; }
.nav__inner .nav__links { justify-self: center; }
.nav__inner .nav__cta { justify-self: end; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.brand__mark {
  width: 22px;
  height: 22px;
  color: var(--accent-2);
}
.brand__name { line-height: 1; }
.nav__links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--text-3);
}
.nav__links a:hover { color: var(--text); }
.nav__cta { display: flex; gap: 10px; align-items: center; }

/* Hamburger button — only visible on mobile. Three stacked bars that
   morph into an X when the drawer is open. */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-soft, rgba(150,130,105,0.25));
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  justify-self: end;
}
.nav__burger-bar {
  display: block;
  position: absolute;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 180ms ease, opacity 120ms ease;
  border-radius: 2px;
}
.nav__burger-bar:nth-child(1) { transform: translateY(-6px); }
.nav__burger-bar:nth-child(3) { transform: translateY(6px); }
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

/* Mobile drawer — sits below the nav, slides down when open. Hidden
   via [hidden] when closed (no JS needed to toggle display:none). */
.nav__mobile {
  display: none;
  background: rgba(12, 10, 9, 0.94);
  border-top: 1px solid var(--border-soft, rgba(150,130,105,0.25));
  padding: 20px 24px 24px;
}
.nav__mobile nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.nav__mobile nav a {
  display: block;
  padding: 12px 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid var(--border-soft, rgba(150,130,105,0.15));
}
.nav__mobile nav a:last-child { border-bottom: none; }
.nav__mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.btn--block {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (max-width: 840px) {
  /* Hide the desktop nav links + show the hamburger at the same
     breakpoint so there's never a dead zone where menu access is
     missing entirely. The primary Sign-in / Start-writing CTAs stay
     visible on tablet widths for conversion.
     Grid becomes: brand | cta | burger. Forces the burger into the
     rightmost cell instead of auto-placing into the empty middle
     column that .nav__links vacated. */
  .nav__inner {
    grid-template-columns: 1fr auto auto;
    gap: 12px;
  }
  .nav__links { display: none; }
  .nav__burger {
    display: inline-flex;
    position: relative;
    justify-self: end;
  }
  .nav__mobile:not([hidden]) { display: block; }
}
@media (max-width: 640px) {
  /* On phones, hide the right-side CTA buttons — the drawer provides
     Sign-in + Start-writing with full-width tap targets. Grid drops
     to brand | burger so the burger stays anchored right. */
  .nav__inner {
    grid-template-columns: 1fr auto;
  }
  .nav__cta { display: none; }
}
/* Mobile nav — tighten padding and CTA size so brand + Sign-in + Start
   fit comfortably on 375px iPhones. Under 480px we drop Sign-in back
   to a text link instead of a full ghost button so the primary CTA
   has room to breathe. */
@media (max-width: 640px) {
  .nav > .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .nav__inner {
    padding-top: 14px;
    padding-bottom: 14px;
    min-height: 0;
    gap: 12px;
  }
  .brand__name {
    font-size: 17px;
  }
  .nav__cta .btn {
    padding: 7px 12px;
    font-size: 13px;
  }
}
/* (Removed: under-480px .nav__cta tweak. The CTA is hidden at ≤640px
   and the drawer provides the CTAs on phones instead.) */

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

.hero {
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto 0;
  height: 700px;
  background:
    radial-gradient(ellipse 60% 40% at 70% 0%, rgba(217, 119, 6, 0.16), transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 10%, rgba(217, 119, 6, 0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 56px 0 32px; }
}
@media (max-width: 560px) {
  /* Smaller hero padding on phones so the big heading lands above
     the fold on typical mobile viewports (~667-844 tall). */
  .hero { padding: 32px 0 24px; }
  .hero__grid { gap: 28px; }
}
.hero__ctas {
  display: flex; gap: 12px; margin: 8px 0 24px;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  /* Stack CTAs full-width on narrow phones so tap targets are generous
     and the "watch the tour" secondary link doesn't cramp the primary. */
  .hero__ctas .btn { width: 100%; justify-content: center; }
}
.hero__checks {
  display: flex; flex-wrap: wrap; gap: 18px 22px;
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; color: var(--text-4);
  font-family: var(--font-mono); letter-spacing: 0.03em;
}
.hero__checks li {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.hero__checks li::before {
  content: "✓";
  color: var(--accent-2);
  font-weight: 700;
  line-height: inherit;
  flex: 0 0 auto;
}

/* hero figure */
.hero__figure {
  position: relative;
  margin: 0;
  min-height: 420px;
}
.device {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.device--dark { background: #0c0a09; }
.device--full img, .device--full video, .device img, .device video {
  width: 100%;
  display: block;
  background: var(--bg-2);
}
.device__chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #211d1c, #1c1917);
  border-bottom: 1px solid var(--border);
}
.device__chrome span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3a3431;
}
.device__chrome span:nth-child(1) { background: #b45309; opacity: 0.85; }
.device__chrome span:nth-child(2) { background: #78716c; }
.device__chrome span:nth-child(3) { background: #44403c; }

.floaty {
  position: absolute;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.floaty--1 {
  width: 40%;
  bottom: -28px;
  left: -34px;
  transform: rotate(-2.5deg);
  z-index: 2;
}
.floaty--1 video { width: 100%; display: block; }
.floaty--2 {
  position: absolute;
  top: -18px; right: -8px;
  display: flex; flex-direction: column; gap: 8px;
  background: transparent; border: none; box-shadow: none;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  color: var(--text);
}
.chip::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.chip--dim  { background: #1c1917; }
.chip--dim::before  { background: #0c0a09; box-shadow: inset 0 0 0 1px #44403c; }
.chip--warm { background: #E8E0D4; color: #3D3530; border-color: #C8BFAF; }
.chip--warm::before { background: #996633; }
.chip--light { background: #FAF7F2; color: #1C1917; border-color: #E7E0D6; }
.chip--light::before { background: #B45309; }

/* hero logos row */
.hero__logos { margin-top: 70px; position: relative; z-index: 1; }
.logos__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 16px;
  text-align: center;
}
.logos {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px 38px;
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text-3);
  opacity: 0.72;
  letter-spacing: -0.01em;
}
.logos span { font-style: italic; }

/* ----- Problem section ----- */
.problem {
  padding: 100px 0 80px;
  background: var(--bg-2);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.problem .h-2 { max-width: 22ch; }
.problem__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 980px) { .problem__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .problem__grid { grid-template-columns: 1fr; } }
.problem__card {
  padding: 24px 22px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: transform 200ms ease, border-color 200ms ease;
}
.problem__card:hover { transform: translateY(-2px); border-color: var(--accent); }
.problem__card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.25;
  color: var(--text);
  font-weight: 500;
  margin: 0 0 10px;
}
.problem__card p { color: var(--text-3); font-size: 15px; line-height: 1.55; margin: 0; }

/* ----- Promise ----- */
.promise {
  padding: 110px 0 80px;
  text-align: center;
  position: relative;
}
.promise .eyebrow, .promise .subhead { text-align: center; }
.promise .eyebrow { justify-content: center; display: inline-flex; }
.promise__media {
  margin: 40px auto 0;
  max-width: 1000px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-2);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.promise__media video { width: 100%; display: block; }
.promise__media figcaption {
  position: absolute;
  bottom: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(12, 10, 9, 0.75);
  backdrop-filter: blur(10px);
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--text-3);
  font-size: 13px;
  border: 1px solid var(--border-soft);
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- Feature blocks ----- */
.feature { padding: 120px 0; }
.feature--dark { background: var(--bg-2); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.feature--sepia {
  background: linear-gradient(180deg, #241f1b 0%, #2a231e 50%, #241f1b 100%);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.feature--sepia::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 50%, rgba(184, 118, 61, 0.16), transparent 60%),
    radial-gradient(ellipse 40% 30% at 90% 80%, rgba(232, 224, 212, 0.05), transparent 60%);
  pointer-events: none;
}
.feature--sepia .wrap { position: relative; }
.feature--cream {
  background: linear-gradient(180deg, #1f1a16 0%, #242018 50%, #1f1a16 100%);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.feature--cream::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(250, 247, 242, 0.06), transparent 60%),
    radial-gradient(ellipse 40% 30% at 10% 70%, rgba(180, 83, 9, 0.12), transparent 60%);
  pointer-events: none;
}
.feature--cream .wrap { position: relative; }

/* Theme-accurate "device" framing matching each product theme */
.device--sepia {
  background: var(--sepia);
  border: 1px solid #C8BFAF;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45), 0 0 0 1px rgba(200, 191, 175, 0.2);
}
.device__chrome--sepia {
  background: linear-gradient(180deg, #DDD4C6, #D8CFC0);
  border-bottom: 1px solid #C8BFAF;
}
.device__chrome--sepia span:nth-child(1) { background: #996633; }
.device__chrome--sepia span:nth-child(2) { background: #8B7355; opacity: 0.8; }
.device__chrome--sepia span:nth-child(3) { background: #A89888; }

.device--cream {
  background: var(--cream);
  border: 1px solid #E7E0D6;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.35), 0 0 0 1px rgba(231, 224, 214, 0.2);
}
.device__chrome--cream {
  background: linear-gradient(180deg, #F0EBE1, #EDE8DD);
  border-bottom: 1px solid #E7E0D6;
}
.device__chrome--cream span:nth-child(1) { background: #B45309; }
.device__chrome--cream span:nth-child(2) { background: #A8A29E; }
.device__chrome--cream span:nth-child(3) { background: #DFD8CC; }
.feature__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}
.feature__grid--reverse { grid-template-columns: 1.1fr 0.9fr; }
.feature__grid--reverse .feature__copy { order: 2; }
.feature__grid--reverse .feature__media { order: 1; }
@media (max-width: 980px) {
  .feature { padding: 80px 0; }
  .feature__grid, .feature__grid--reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .feature__grid--reverse .feature__copy,
  .feature__grid--reverse .feature__media { order: unset; }
}
.feature__copy .h-2 { max-width: 18ch; }

.check-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 8px;
}
.check-list li {
  font-size: 15px;
  color: var(--text-2);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  line-height: 1.55;
}
.check-list li::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 0.4em;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-2) 0 4px, transparent 5px);
  border: 1px solid rgba(245,158,11,0.3);
}

/* ----- Keyboard grid ----- */
.keyboard { padding: 120px 0; text-align: center; }
.keyboard .h-2 { text-align: center; margin-left: auto; margin-right: auto; max-width: 24ch; }
.keyboard__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
  margin: 40px 0 56px;
}
@media (max-width: 980px) { .keyboard__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .keyboard__grid { grid-template-columns: repeat(2, 1fr); } }
.kc {
  padding: 22px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform 200ms ease, border-color 200ms ease;
}
.kc:hover { transform: translateY(-3px); border-color: var(--accent); }
.kc kbd {
  display: inline-block;
  font-size: 18px;
  padding: 6px 14px;
  margin-bottom: 10px;
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--accent-2);
}
.kc p { font-size: 13px; color: var(--text-3); margin: 0; }

.keyboard__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.keyboard__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.keyboard__item img, .keyboard__item video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  background: var(--bg-2);
}
.keyboard__item figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.5;
  padding: 0 4px;
}
.keyboard__item figcaption kbd {
  background: var(--bg-2);
  color: var(--accent-2);
  border-color: var(--border);
}
@media (max-width: 820px) { .keyboard__media { grid-template-columns: 1fr; } }

/* ----- Writers ----- */
.writers { padding: 120px 0; background: var(--bg-2); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.writers .h-2 { max-width: 28ch; }
.writers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 1020px) { .writers__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .writers__grid { grid-template-columns: 1fr; } }
.writer-card {
  padding: 26px 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.writer-card:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--surface); }
.writer-card__kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 14px;
}
.writer-card p { color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0; }

/* ----- Testimonials ----- */
.testimonials { padding: 120px 0; }
.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 36px;
}
@media (max-width: 820px) { .testimonials__grid { grid-template-columns: 1fr; } }
.quote {
  margin: 0;
  padding: 30px 28px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
}
.quote::before {
  content: "";
  position: absolute;
  top: 20px; left: 28px;
  width: 26px; height: 4px; border-radius: 2px;
  background: var(--accent-2);
}
.quote blockquote {
  margin: 16px 0 14px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -0.005em;
}
.quote figcaption { font-size: 13px; color: var(--text-3); font-style: italic; }

/* ----- Plans ----- */
.plans { padding: 120px 0; background: var(--bg-2); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.plans .h-2 { max-width: 24ch; }
.plans .subhead { margin: 0 0 36px; max-width: 64ch; }
.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
/* 2-column variant — used when the team/Studio plan isn't surfaced yet
   so Free + Pro stay readable instead of stretching across the full
   container width. Centered + capped so cards don't sprawl. */
.plans__grid--two {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  gap: 24px;
}
@media (max-width: 980px) {
  .plans__grid,
  .plans__grid--two { grid-template-columns: 1fr; }
}
/* Optional annual subline under the headline price — "or $79/year — save $17". */
.plan__sub {
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--text-3);
}
.plan__sub strong { color: var(--text-2); font-weight: 500; }
.plan {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  position: relative;
}
.plan header { margin-bottom: 22px; }
.plan h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 4px;
}
.plan__price {
  font-family: var(--font-serif);
  font-size: 44px;
  color: var(--text);
  line-height: 1;
  margin: 10px 0;
}
.plan__price span { font-size: 16px; color: var(--text-4); margin-left: 4px; }
.plan__desc { color: var(--text-3); font-size: 14px; margin: 0 0 8px; }
.plan .check-list {
  /* content-sized — flex: 1 previously expanded the list container on
     the shorter (Free) card, distributing rows with extra vertical
     space and making the two cards feel mismatched. Now the list
     stays tight to its content on both cards and the CTA button
     below picks up margin-top: auto to stay pinned at the bottom. */
  margin-bottom: 28px;
}
.plan .btn--block {
  margin-top: auto;
}
.plan--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(217,119,6,0.15), var(--shadow-md);
}
.plan__badge {
  position: absolute;
  top: -12px; left: 28px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  font-weight: 600;
}

/* Coming-soon variant — muted so it reads as "not yet" at a glance */
.plan--soon {
  background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 12px, rgba(28,25,23,0.6) 12px, rgba(28,25,23,0.6) 24px);
  border-style: dashed;
  border-color: rgba(120, 113, 108, 0.35);
}
.plan--soon h3,
.plan--soon .plan__price--soon {
  color: var(--text-2);
}
.plan--soon .plan__price--soon {
  font-size: 24px;
  letter-spacing: -0.005em;
}
.plan__badge--soon {
  background: var(--bg-2);
  color: var(--text-3);
  border: 1px solid var(--border);
  font-weight: 500;
}
.plan--soon .check-list li {
  color: var(--text-3);
}
.plan--soon .check-list li::before {
  background: radial-gradient(circle, var(--text-4) 0 3px, transparent 4px);
  border-color: rgba(120, 113, 108, 0.25);
}

/* ----- Sources & citations — stacked media column ----- */
.feature__media--stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sources__shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sources__shot .device img { width: 100%; display: block; }
.sources__shot figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  padding: 0 4px;
  font-style: italic;
}

/* ----- Database showcase ----- */
.db__header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 36px;
}
.db__header .h-2 { margin-left: auto; margin-right: auto; max-width: 22ch; }
.db__header .subhead { margin-left: auto; margin-right: auto; }
.db__header em { color: var(--text); font-style: italic; }
.db__showcase { display: grid; gap: 48px; }
.db__hero {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.db__hero video { width: 100%; display: block; background: var(--bg-2); }

/* The "record = draft" linked-document callout */
.db__linked {
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 36px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(217,119,6,0.06), rgba(28,25,23,0.6));
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.db__linked::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: 0.55;
}
.db__linked-copy { display: grid; gap: 14px; }
.db__linked-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.db__linked-title em { color: var(--accent-2); font-style: italic; }
.db__linked-body {
  color: var(--text-3);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
  max-width: 62ch;
}
.db__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  max-width: none;
  margin-top: 6px;
}
@media (max-width: 680px) { .db__checks { grid-template-columns: 1fr; } }

/* Typewriter mode sub-copy under keyboard grid */
.keyboard__typewriter {
  max-width: 60ch;
  margin: 0 auto 40px;
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.65;
}
.keyboard__typewriter strong { color: var(--text); font-weight: 500; }

/* ----- Bring-your-own-AI ----- */
.byoa {
  padding: 120px 0;
  background: linear-gradient(180deg, var(--bg), #120f0d 50%, var(--bg));
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.byoa::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 35% at 80% 20%, rgba(217, 119, 6, 0.08), transparent 65%),
    radial-gradient(ellipse 50% 35% at 15% 85%, rgba(217, 119, 6, 0.06), transparent 65%);
  pointer-events: none;
}
.byoa__inner { position: relative; text-align: center; }
.byoa .h-2 { max-width: 24ch; margin-left: auto; margin-right: auto; }
.byoa__lede {
  margin-left: auto; margin-right: auto;
  margin-bottom: 18px;
  max-width: 64ch;
  text-align: center;
}
.byoa__lede em { color: var(--text); font-style: italic; }
.byoa__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 40px 0 36px;
  text-align: left;
}
@media (max-width: 1020px) { .byoa__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .byoa__grid { grid-template-columns: 1fr; } }
.byoa__card {
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), rgba(28, 25, 23, 0.6));
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease;
}
.byoa__card:hover { transform: translateY(-3px); border-color: var(--accent); }
.byoa__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, var(--accent-2), transparent);
}
.byoa__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.12);
  color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  border: 1px solid rgba(217, 119, 6, 0.22);
}
.byoa__card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.3;
}
.byoa__card p {
  color: var(--text-3);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}
.byoa__cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ----- Plan list accents ----- */
.check-list li.muted {
  color: var(--text-4);
  font-style: italic;
}
.check-list li.muted::before {
  background: radial-gradient(circle, var(--text-4) 0 3px, transparent 4px);
  border-color: rgba(120, 113, 108, 0.35);
}
.check-list li.highlight {
  color: var(--text);
  font-weight: 500;
}
.check-list li.highlight::before {
  background: radial-gradient(circle, var(--accent-2) 0 5px, transparent 6px);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

/* Multi-column check lists (databases foot + anywhere else) */
.db__checks li { align-items: flex-start; }

/* ----- Stakes ----- */
.stakes { padding: 120px 0; }
.stakes .h-2 { text-align: center; max-width: 22ch; margin-left: auto; margin-right: auto; }
.stakes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 48px;
  max-width: 1000px; margin-left: auto; margin-right: auto;
}
@media (max-width: 820px) { .stakes__grid { grid-template-columns: 1fr; } }
.stakes__col {
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.stakes__col--after {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.25) inset;
  background: linear-gradient(180deg, rgba(217,119,6,0.06), var(--surface-2));
}
.stakes__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--text-4);
}
.stakes__col--after .stakes__label { color: var(--accent-2); }
.stakes__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.stakes__col li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
}
.stakes__col li::before {
  flex: 0 0 16px;
  font-weight: 700;
  line-height: inherit;
  text-align: center;
}
.stakes__col--before li::before { content: "✕"; color: var(--text-4); }
.stakes__col--after li::before  { content: "→"; color: var(--accent-2); }

/* ----- FAQ ----- */
.faq { padding: 120px 0; background: var(--bg-2); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); text-align: center; }
.faq .eyebrow { justify-content: center; display: inline-flex; }
.faq .h-2 { max-width: 22ch; margin-left: auto; margin-right: auto; text-align: center; }
.faq__list {
  margin: 28px auto 0;
  max-width: 820px;
  text-align: left;
}
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
.faq details[open] summary { color: var(--text); }
.faq summary {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 36px;
  line-height: 1.4;
  transition: color 120ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 0;
  font-size: 26px;
  font-weight: 300;
  color: var(--accent-2);
  line-height: 1;
  transition: transform 180ms ease;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin: 14px 0 0;
  color: var(--text-3);
  line-height: 1.65;
  max-width: 62ch;
}

/* ----- Final ----- */
.final {
  padding: 140px 0 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 70%, rgba(217, 119, 6, 0.12), transparent 65%);
  pointer-events: none;
}
.final__inner { position: relative; }
.final .h-display { margin-bottom: 18px; }
.final .lede { margin: 0 auto 34px; text-align: center; }
.final__small { margin-top: 18px; color: var(--text-4); font-size: 14px; }
.final__small a { color: var(--accent-2); }

/* ----- Footer ----- */
.foot { padding: 72px 0 32px; background: var(--bg-2); border-top: 1px solid var(--border-soft); }
.foot__inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 60px;
}
@media (max-width: 820px) { .foot__inner { grid-template-columns: 1fr; gap: 30px; } }
.foot__tag { color: var(--text-4); font-size: 14px; margin: 10px 0 0; max-width: 32ch; font-style: italic; font-family: var(--font-serif); }
.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 560px) { .foot__cols { grid-template-columns: 1fr 1fr; } }
.foot__cols h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 14px;
}
.foot__cols a {
  display: block;
  color: var(--text-3);
  font-size: 14px;
  margin-bottom: 8px;
  transition: color 160ms;
}
.foot__cols a:hover { color: var(--text); }
.foot__legal {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-4);
}
.foot__legal a { color: var(--text-4); }
.foot__legal a:hover { color: var(--text-2); }

/* ----- Subtle entrance animations ----- */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy, .hero__figure, .problem__card, .writer-card, .plan, .quote, .stakes__col, .kc {
    animation: rise 0.8s cubic-bezier(.2,.7,.25,1) both;
  }
  .hero__figure { animation-delay: 0.08s; }
  .problem__card:nth-child(2), .writer-card:nth-child(2), .plan:nth-child(2) { animation-delay: 0.08s; }
  .problem__card:nth-child(3), .writer-card:nth-child(3), .plan:nth-child(3) { animation-delay: 0.16s; }
  .problem__card:nth-child(4), .writer-card:nth-child(4) { animation-delay: 0.24s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   WordPress admin bar offset — when logged-in users view the site
   the 32px (or 46px on narrow viewports) admin bar pushes page
   content down, so the sticky site nav needs to move too.
   ============================================================ */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}

/* Keep anchor-link jumps clear of both the admin bar AND our sticky nav */
html { scroll-padding-top: 88px; }
.admin-bar html,
.admin-bar body { scroll-padding-top: 120px; }
@media (max-width: 782px) {
  .admin-bar html,
  .admin-bar body { scroll-padding-top: 134px; }
}

/* Centered intro for the #plans section — eyebrow + heading + subhead
   above the founder ticker. All three elements share the same centered
   container so their optical centers line up exactly. Container is wide
   enough that the heading doesn't overflow at any clamped font size,
   and the subhead's own max-width (set by .plans .subhead below) is
   overridden to match so the two lines feel like one block. */
.plans__intro {
  max-width: 880px;
  margin: 0 auto 16px;
  padding: 0 24px;
  text-align: center;
}
.plans__intro .eyebrow {
  /* Eyebrow is inline-flex; text-align on the parent centers it horizontally. */
  justify-content: center;
}
.plans__intro .h-2 {
  /* No explicit max-width — the 880px container gives the heading
     room on a single line at every clamp font size. */
  margin: 0 auto 18px;
}
.plans__intro .subhead {
  /* Override the generic .plans .subhead rule — explicit auto margins
     and a tighter cap so the two-line wrap reads as one centered block. */
  margin: 0 auto 36px;
  max-width: 52ch;
}

/* =========================================================
   Founder pricing ticker (minimal dot progression)
   Live-updating; hydrated from the app's /api/stripe/founder-tier
   ========================================================= */
.founder-ticker {
  margin: 48px auto 56px;
  max-width: 520px;
  text-align: center;
}
.founder-ticker__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3, #9a8e7e);
  margin: 0 0 24px;
}
.founder-ticker__rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 420px;
  margin: 0 auto;
  padding: 0 8px;
}
.founder-ticker__line {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 1px;
  background: var(--border-soft, rgba(150, 130, 105, 0.35));
  transform: translateY(-0.5px);
}
.founder-ticker__dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg, #0c0a09);
  border: 1px solid var(--border-soft, rgba(150, 130, 105, 0.5));
  transition: all 220ms ease;
}
/* Sold tiers: filled with muted color, no glow. */
.founder-ticker__dot.is-sold {
  background: var(--text-3, #9a8e7e);
  border-color: var(--text-3, #9a8e7e);
  opacity: 0.5;
}
/* Active tier: filled accent + slightly larger + gentle glow. */
.founder-ticker__dot.is-active {
  background: var(--accent-2, #d4a574);
  border-color: var(--accent-2, #d4a574);
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.12);
}

.founder-ticker__labels {
  display: flex;
  justify-content: space-between;
  max-width: 420px;
  margin: 14px auto 0;
  padding: 0 2px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 16px;
  color: var(--text-2, #c9bba8);
}
.founder-ticker__labels span {
  flex: 1;
  text-align: center;
}

.founder-ticker__summary {
  margin-top: 28px;
  margin-bottom: 24px;
  font-size: 15px;
  color: var(--text-2, #c9bba8);
  line-height: 1.5;
}
.founder-ticker__summary strong {
  color: var(--accent-2, #d4a574);
  font-weight: 500;
}

.founder-ticker__cta {
  display: inline-block;
}

@media (max-width: 560px) {
  .founder-ticker__rail,
  .founder-ticker__labels {
    max-width: 320px;
  }
  .founder-ticker__labels {
    font-size: 14px;
  }
}