/* =========================================================
   BLINK LANDING — Editorial Tech aesthetic
   Cream paper · ink black · persimmon orange
   ========================================================= */

/* ----- Reset ----- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
img,svg,video{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* ----- Tokens ----- */
:root{
  /* Colors — committed palette */
  --paper:        #f4efe4;   /* warm cream */
  --paper-deep:   #ebe4d4;
  --ink:          #161412;   /* not pure black: warmer */
  --ink-soft:     #2b2723;
  --ink-mute:     #6b6358;
  --rule:         #d9d0bb;
  --accent:       #e85d2f;   /* persimmon orange */
  --accent-deep:  #c1431b;
  --accent-soft:  #fae7da;
  --ok:           #2b6041;

  /* Type */
  --f-serif: 'Instrument Serif', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  --f-sans:  'Inter Tight', system-ui, -apple-system, sans-serif;
  --f-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --r: 6px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ----- Body ----- */
html,body{background:var(--paper);color:var(--ink)}
body{
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-0.005em;
  overflow-x:hidden;
}

/* Subtle grain overlay (CSS-only — adds editorial paper feel) */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.5;mix-blend-mode:multiply;
  background-image:
    radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

/* ----- Selection ----- */
::selection{background:var(--accent);color:var(--paper)}

/* ============== NAV ============== */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom:1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.scrolled{border-bottom-color:var(--rule)}

.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-sans);font-weight:700;font-size:18px;letter-spacing:-.02em}
.logo-mark{width:22px;height:22px;fill:var(--accent);transition:transform .4s var(--ease)}
.logo:hover .logo-mark{transform:rotate(45deg) scale(1.08)}
.logo-text{color:var(--ink)}
.logo-text em{font-family:var(--f-serif);font-weight:400;font-style:italic;color:var(--accent);font-size:1.05em;margin-left:1px}
.logo-dot{color:var(--accent)}

.nav-links{display:flex;gap:32px}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--ink-soft);
  position:relative;padding:6px 0;transition:color .2s
}
.nav-links a::after{
  content:'';position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--ink);
  transition:left .25s var(--ease),right .25s var(--ease)
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{left:0;right:0}

.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  background:var(--ink);color:var(--paper);
  font-size:14px;font-weight:600;letter-spacing:.01em;
  border:1.5px solid var(--ink);
  border-radius:var(--r);
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.nav-cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--accent)}
.nav-cta:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--accent)}
.nav-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.nav-cta:hover svg{transform:translateX(2px)}

@media (max-width: 760px){
  .nav-links{display:none}
}

/* ============== BUTTONS ============== */
/* Custom neo-brutalist style — tactile offset shadow */
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;
  background:var(--ink);color:var(--paper);
  font-family:var(--f-sans);
  font-size:15px;font-weight:600;letter-spacing:.01em;
  border:1.5px solid var(--ink);
  border-radius:var(--r);
  box-shadow: 5px 5px 0 var(--accent);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  position:relative;
}
.btn-primary svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn-primary:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--accent)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-primary:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--accent)}

.btn-primary-lg{padding:18px 32px;font-size:17px;box-shadow: 6px 6px 0 var(--accent)}
.btn-primary-lg:hover{box-shadow:3px 3px 0 var(--accent)}

.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 4px;
  font-size:15px;font-weight:600;color:var(--ink);
  position:relative;
}
.btn-secondary::after{
  content:'';position:absolute;left:0;right:24px;bottom:8px;height:1.5px;background:var(--ink);
  transform-origin:left;transition:transform .35s var(--ease)
}
.btn-secondary:hover::after{transform:scaleX(1.04)}
.btn-secondary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn-secondary:hover svg{transform:translateY(2px)}

/* ============== SECTION LABEL (numbered) ============== */
.section-label{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--f-mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-mute);
  margin-bottom:22px;
}
.section-label .num{
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:22px;color:var(--accent);letter-spacing:0;text-transform:none;
}
.section-label .cap::before{content:'— '}

.cap{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em}
.cap.dim{color:var(--ink-mute)}
.cap.accent{color:var(--accent)}

/* ============== REVEAL ANIMATION ============== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ============== HERO ============== */
.hero{padding: clamp(48px, 9vw, 100px) var(--gutter) clamp(60px, 8vw, 120px);position:relative}
.hero-inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;
  background:var(--paper-deep);
  border:1px solid var(--rule);
  border-radius:100px;
  font-size:13px;font-weight:500;color:var(--ink-soft);
  margin-bottom:32px;
}
.eyebrow-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}
  50%{box-shadow:0 0 0 6px transparent}
}

.hero-title{
  font-family:var(--f-sans);
  font-weight:700;
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color:var(--ink);
  margin-bottom:28px;
  max-width: 12ch;
}
.hero-title em{
  font-family:var(--f-serif);
  font-weight:400;
  font-style:italic;
  letter-spacing:-0.01em;
  color:var(--accent);
}

.hero-sub{
  font-size: clamp(17px, 1.4vw, 20px);
  line-height:1.55;
  color:var(--ink-soft);
  max-width: 58ch;
  margin-bottom: 36px;
}

.hero-ctas{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:22px}

.hero-meta{
  font-size:13px;color:var(--ink-mute);
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.check{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--ok);color:var(--paper);
  margin-right:2px;
}
.check svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Hero demo */
.hero-demo{
  margin-top: clamp(50px, 7vw, 90px);
  display:grid;
  grid-template-columns: 1fr auto 1.2fr;
  gap: clamp(20px, 3vw, 40px);
  align-items:center;
}
.demo-prompt, .demo-app{
  background:var(--paper-deep);
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 50px -30px rgba(0,0,0,.15);
}
.demo-label, .demo-app-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;
  background:color-mix(in srgb, var(--ink) 4%, var(--paper-deep));
  border-bottom:1px solid var(--rule);
}
.dot{width:9px;height:9px;border-radius:50%}
.dot-r{background:#e26060}.dot-y{background:#e3b342}.dot-g{background:#7aae6d}
.demo-tag{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--ink-mute)}
.demo-url{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--ink-mute)}

.demo-text{
  padding: 22px 20px 26px;
  font-family:var(--f-mono);
  font-size:13.5px;line-height:1.55;color:var(--ink);
}
.caret{
  display:inline-block;width:2px;height:13px;background:var(--accent);
  margin-right:6px;vertical-align:-2px;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}

.demo-arrow{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-mute)}
.demo-arrow svg{width:80px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.demo-arrow-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

.demo-app-body{display:grid;grid-template-columns:80px 1fr;min-height:160px;color:var(--ink)}
.demo-app-side{
  padding:14px 12px;background:color-mix(in srgb,var(--ink) 3%, var(--paper-deep));
  border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:8px
}
.line{display:block;height:6px;border-radius:3px;background:var(--rule)}
.line.w-50{width:50%}.line.w-60{width:60%}.line.w-70{width:70%}.line.w-80{width:80%}
.line.active{background:var(--accent)}

.demo-app-main{padding:16px;display:flex;flex-direction:column;gap:12px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:10px 12px;background:var(--paper);border:1px solid var(--rule);border-radius:6px}
.stat b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;font-family:var(--f-sans)}
.stat span{display:block;font-size:11px;color:var(--ink-mute);letter-spacing:.04em;margin-top:2px}
.chart{flex:1;color:var(--accent);min-height:60px}
.chart svg{width:100%;height:100%;fill:currentColor}

@media (max-width: 920px){
  .hero-demo{grid-template-columns:1fr;gap:14px}
  .demo-arrow{transform:rotate(90deg);margin: 0 auto}
}

/* ============== TRUST BAR ============== */
.trust{padding: 26px var(--gutter);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-deep)}
.trust-inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.trust-text{font-size:14px;color:var(--ink-soft)}
.trust-text strong{color:var(--ink);font-weight:600}
.trust-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:100px;
  color:var(--ink-soft);
}

/* ============== VIDEO / DEMO ============== */
.video{padding: clamp(70px, 9vw, 120px) var(--gutter)}
.video-inner{max-width:var(--maxw);margin:0 auto}

.video-title{
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight:700;line-height:1.08;letter-spacing:-.025em;
  max-width: 22ch;margin-bottom: 18px;
}
.video-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}

.video-sub{
  font-size:17px;line-height:1.6;color:var(--ink-soft);
  max-width:60ch;margin-bottom:48px;
}

/* The frame around the video — matches the editorial design language */
.video-frame{
  background:var(--paper-deep);
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  box-shadow: 10px 10px 0 var(--accent);
  margin-bottom:36px;
  position:relative;
}

/* Window-chrome bar on top of the video — matches hero demo aesthetic */
.video-bar{
  display:flex;align-items:center;gap:6px;
  padding:12px 16px;
  background: color-mix(in srgb, var(--ink) 4%, var(--paper-deep));
  border-bottom:1px solid var(--rule);
}
.video-bar-label{
  margin-left:auto;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--ink-mute);
}

/* Responsive 16:9 video embed */
.video-embed{
  position:relative;
  width:100%;
  padding-bottom:56.25%;  /* 16:9 aspect ratio */
  height:0;
  background:var(--ink);
}
.video-embed iframe{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  border:0;
}

.video-caption{
  padding:12px 18px;
  background:color-mix(in srgb, var(--ink) 3%, var(--paper-deep));
  border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--ink-mute);text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;
}
.video-caption::before{
  content:'▸';color:var(--accent);font-size:14px;margin-right:8px;
}

.video-cta{
  margin-top:8px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.video-cta-note{
  font-family:var(--f-serif);font-style:italic;font-size:17px;color:var(--ink-mute);
}

/* ============== CONTRAST (problem/solution) ============== */
.contrast{padding: clamp(70px, 9vw, 130px) var(--gutter)}
.contrast-inner{max-width:var(--maxw);margin:0 auto}
.contrast-title{
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight:700;line-height:1.08;letter-spacing:-.025em;
  max-width: 22ch;margin-bottom: 56px;
}
.contrast-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}

.contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap: clamp(20px, 3vw, 36px);align-items:stretch}
@media (max-width: 820px){.contrast-grid{grid-template-columns:1fr}}

.old-way, .new-way{
  padding: 32px 32px 28px;
  border-radius: 10px;
  border:1px solid var(--rule);
}
.old-way{background:var(--paper-deep)}
.new-way{
  background:var(--ink);color:var(--paper);
  border-color:var(--ink);
  box-shadow: 8px 8px 0 var(--accent);
}
.new-way .cap.accent{color:var(--accent)}
.old-way header, .new-way header{margin-bottom:20px}

.checklist{display:flex;flex-direction:column;gap:14px;font-size:15.5px}
.checklist li{display:flex;align-items:flex-start;gap:12px;line-height:1.45}
.checklist .x, .checklist .v{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:20px;height:20px;border-radius:50%;
  font-family:var(--f-sans);font-size:12px;font-weight:700;
  margin-top:1px;
}
.checklist .x{background:var(--rule);color:var(--ink-mute)}
.checklist .v{background:var(--accent);color:var(--ink)}
.checklist .v svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.old-foot, .new-foot{
  margin-top:24px;padding-top:18px;border-top:1px dashed var(--rule);
  font-family:var(--f-serif);font-style:italic;font-size:17px;line-height:1.4;color:var(--ink-soft);
}
.new-way .new-foot{color:color-mix(in srgb, var(--paper) 80%, transparent);border-top-color:color-mix(in srgb,var(--paper) 18%,transparent)}

.contrast-cta{margin-top:48px;display:flex}

/* ============== PILLARS ============== */
.pillars{padding: clamp(70px, 9vw, 130px) var(--gutter);background:var(--paper-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pillars-inner{max-width:var(--maxw);margin:0 auto}
.pillars-title{
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight:700;line-height:1.08;letter-spacing:-.025em;
  max-width: 22ch;margin-bottom:56px;
}
.pillars-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}

.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap: clamp(20px, 3vw, 32px)}
@media (max-width: 820px){.pillars-grid{grid-template-columns:1fr}}

.pillar{
  padding: 32px 28px 28px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:10px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pillar:hover{transform:translateY(-4px);box-shadow:0 12px 24px -16px rgba(0,0,0,.18)}

.pillar-icon{
  width:54px;height:54px;
  color:var(--ink);
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  margin-bottom:24px;
}
.pillar:nth-child(1) .pillar-icon{color:var(--accent)}
.pillar:nth-child(2) .pillar-icon{color:var(--ink)}
.pillar:nth-child(3) .pillar-icon{color:var(--accent)}

.pillar h3{
  font-size:22px;font-weight:700;letter-spacing:-.02em;
  margin-bottom:10px;line-height:1.2;
}
.pillar p{font-size:15px;color:var(--ink-soft);line-height:1.55}

/* ============== HOW ============== */
.how{padding: clamp(70px, 9vw, 130px) var(--gutter)}
.how-inner{max-width:var(--maxw);margin:0 auto}
.how-title{
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight:700;line-height:1.08;letter-spacing:-.025em;
  margin-bottom:56px;
}
.how-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}

.how-steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.step{
  display:grid;grid-template-columns: 120px 1fr;gap:32px;
  padding:36px 0;border-bottom:1px solid var(--rule);
  align-items:flex-start;
}
.step-num{
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:60px;line-height:.9;color:var(--accent);
  letter-spacing:-.02em;
}
.step-body h3{
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight:700;letter-spacing:-.02em;line-height:1.2;
  margin-bottom:10px;
}
.step-body p{font-size:16.5px;color:var(--ink-soft);line-height:1.55;max-width:62ch;margin-bottom:18px}

.step-visual{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;
  background:var(--paper-deep);
  border:1px dashed var(--rule);
  border-radius:6px;
  font-family:var(--f-mono);font-size:13px;color:var(--ink-soft);
}
.step-visual code{color:var(--ink)}

.step-visual-anim{padding:14px 18px;gap:6px}
.step-visual-anim .bar{
  display:inline-block;height:10px;background:var(--accent);border-radius:2px;
  animation: grow 1.4s var(--ease) infinite;
}
.step-visual-anim .bar:nth-child(1){width:60px;animation-delay:0s}
.step-visual-anim .bar:nth-child(2){width:90px;animation-delay:.15s}
.step-visual-anim .bar:nth-child(3){width:40px;animation-delay:.3s}
.step-visual-anim .bar:nth-child(4){width:120px;animation-delay:.45s}
@keyframes grow{
  0%,100%{opacity:.35;transform:scaleX(.9)}
  50%{opacity:1;transform:scaleX(1.04)}
}

.url-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 40%, transparent);
  animation: pulse 1.8s var(--ease) infinite;
}
.url-text{font-family:var(--f-mono);font-size:13.5px;color:var(--ink)}

@media (max-width:760px){
  .step{grid-template-columns:1fr;gap:8px}
  .step-num{font-size:42px}
}

.how-cta{margin-top:36px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.how-cta-note{font-family:var(--f-serif);font-style:italic;font-size:17px;color:var(--ink-mute)}

/* ============== PROOF ============== */
.proof{padding: clamp(70px, 9vw, 130px) var(--gutter);background:var(--paper-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proof-inner{max-width:var(--maxw);margin:0 auto}
.proof-title{
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight:700;line-height:1.08;letter-spacing:-.025em;
  max-width: 24ch;margin-bottom:56px;
}
.proof-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}

.pull-quote{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:10px;
  padding: clamp(36px, 5vw, 56px);
  position:relative;
  margin-bottom:32px;
  box-shadow: 8px 8px 0 var(--ink);
}
.quote-mark{
  position:absolute;top:-22px;left:32px;
  width:44px;height:44px;
  fill:var(--accent);
  background:var(--paper-deep);
  padding:8px;border-radius:6px;
  border:1px solid var(--rule);
}
.pull-quote blockquote{
  font-family:var(--f-serif);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);max-width:30ch;margin-bottom:26px;
}
.pull-quote figcaption{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);display:flex;flex-direction:column;gap:3px}
.cite-name{color:var(--ink);font-weight:600}
.cite-role{color:var(--ink-mute)}

.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width: 760px){.quote-grid{grid-template-columns:1fr}}

.quote-card{
  padding:26px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:8px;
  transition:transform .25s var(--ease);
}
.quote-card:hover{transform:translateY(-3px)}
.quote-card p{font-size:15.5px;line-height:1.55;color:var(--ink);margin-bottom:18px}
.quote-card footer{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}

/* ============== COMPARE ============== */
.compare{padding: clamp(70px, 9vw, 130px) var(--gutter)}
.compare-inner{max-width:var(--maxw);margin:0 auto}
.compare-title{
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight:700;line-height:1.08;letter-spacing:-.025em;
  max-width:22ch;margin-bottom:48px;
}
.compare-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}

.compare-table{
  border:1px solid var(--rule);
  border-radius:10px;overflow:hidden;
  background:var(--paper);
}
.compare-row{
  display:grid;grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  border-bottom:1px solid var(--rule);
}
.compare-row:last-child{border-bottom:none}
.compare-row > *{padding:18px 20px;display:flex;align-items:center;font-size:14.5px}
.cell-label{font-weight:500;color:var(--ink)}
.cell{justify-content:center}
.cell.blink{background:color-mix(in srgb, var(--accent) 7%, var(--paper));font-weight:700;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em}
.cell.other{color:var(--ink-mute);font-family:var(--f-mono);font-size:13px;letter-spacing:.04em}
.compare-head > *{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--paper-deep);padding:14px 20px}
.compare-head .cell.blink{background:var(--ink);color:var(--paper)}

.yes{color:var(--accent);font-size:18px}
.no{color:var(--ink-mute);font-size:18px}
.partial{color:var(--ink-soft);font-size:18px}

.compare-legend{
  margin-top:18px;
  display:flex;gap:24px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-mute);
}
.compare-legend span{display:inline-flex;align-items:center;gap:6px}

@media (max-width: 760px){
  .compare-row{grid-template-columns: 2fr repeat(4, 1fr)}
  .compare-row > *{padding:14px 10px;font-size:12.5px}
  .compare-head > *{font-size:10px;padding:10px 8px}
}

/* ============== USES ============== */
.uses{padding: clamp(70px, 9vw, 130px) var(--gutter);background:var(--paper-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.uses-inner{max-width:var(--maxw);margin:0 auto}
.uses-title{
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight:700;line-height:1.08;letter-spacing:-.025em;
  margin-bottom:48px;
}
.uses-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}

.uses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.uses-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.uses-grid{grid-template-columns:1fr}}

.use{
  padding:26px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:8px;
  display:flex;flex-direction:column;gap:14px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.use:hover{transform:translateY(-3px);border-color:var(--accent)}
.use-tag{
  align-self:flex-start;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;
  background:var(--accent-soft);color:var(--accent-deep);
  border-radius:4px;
  font-weight:600;
}
.use p{font-size:15px;line-height:1.5;color:var(--ink-soft)}

/* ============== PRICING ============== */
.pricing{padding: clamp(70px, 9vw, 130px) var(--gutter)}
.pricing-inner{max-width:var(--maxw);margin:0 auto}
.pricing-title{
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight:700;line-height:1.08;letter-spacing:-.025em;
  margin-bottom:18px;
}
.pricing-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}
.pricing-sub{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:65ch;margin-bottom:48px}

.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:36px}
@media (max-width:820px){.pricing-cards{grid-template-columns:1fr}}

.price-card{
  padding:28px;
  background:var(--paper-deep);
  border:1px solid var(--rule);
  border-radius:10px;
  position:relative;
}
.price-card-feature{
  background:var(--ink);color:var(--paper);
  border-color:var(--ink);
  box-shadow: 6px 6px 0 var(--accent);
}
.price-badge{
  position:absolute;top:-12px;left:24px;
  background:var(--accent);color:var(--ink);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:5px 10px;border-radius:4px;
}
.price-card h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.p-price{font-family:var(--f-serif);font-size:38px;line-height:1;margin-bottom:8px;letter-spacing:-.02em}
.p-price em{font-family:var(--f-sans);font-style:normal;font-size:14px;color:var(--ink-mute);font-weight:500;margin-left:4px}
.price-card-feature .p-price em{color:color-mix(in srgb,var(--paper) 60%, transparent)}

.p-annual{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--ink-mute);
  margin-bottom:20px;
  padding:6px 10px;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border:1px dashed color-mix(in srgb, var(--accent) 30%, var(--rule));
  border-radius:4px;
  display:inline-block;
}
.p-annual s{opacity:.5;margin-right:2px}
.p-annual strong{color:var(--accent-deep);font-weight:700}
.price-card-feature .p-annual{
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  border-color:color-mix(in srgb, var(--accent) 50%, transparent);
  color:color-mix(in srgb, var(--paper) 80%, transparent);
}
.price-card-feature .p-annual strong{color:var(--accent)}
.price-card ul{display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.price-card ul li::before{content:'— ';color:var(--accent)}
.price-card-feature ul li::before{color:var(--accent)}

.pricing-link{margin-top:8px}

/* ============== FAQ ============== */
.faq{padding: clamp(70px, 9vw, 130px) var(--gutter);background:var(--paper-deep);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.faq-inner{max-width:820px;margin:0 auto}
.faq-title{
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight:700;line-height:1.08;letter-spacing:-.025em;
  margin-bottom:36px;
}

.faq-item{
  border-bottom:1px solid var(--rule);
  padding:24px 0;
}
.faq-item summary{
  font-size:18px;font-weight:600;letter-spacing:-.015em;
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:relative;padding-right:36px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'';position:absolute;right:0;top:50%;
  width:14px;height:14px;
  background:
    linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  transform:translateY(-50%);transition:transform .3s var(--ease);
  color:var(--ink);
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);color:var(--accent)}
.faq-item p{
  font-size:16px;line-height:1.6;color:var(--ink-soft);
  margin-top:14px;max-width:65ch;
}

/* ============== FINAL CTA ============== */
.final-cta{
  padding: clamp(80px, 11vw, 160px) var(--gutter);
  background:var(--ink);
  color:var(--paper);
  position:relative;overflow:hidden;
}
.final-cta::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%, color-mix(in srgb,var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(ellipse at 80% 70%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 60%);
  pointer-events:none;
}
.final-cta-inner{max-width:var(--maxw);margin:0 auto;position:relative;text-align:center}

.final-title{
  font-size: clamp(38px, 6vw, 80px);
  font-weight:700;line-height:1.05;letter-spacing:-.03em;
  margin-bottom:22px;
}
.final-title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}

.final-sub{
  font-size: clamp(17px, 1.6vw, 21px);
  color:color-mix(in srgb,var(--paper) 78%, transparent);
  margin-bottom:42px;max-width:48ch;margin-left:auto;margin-right:auto;
}

.final-cta .btn-primary{
  background:var(--paper);color:var(--ink);
  border-color:var(--paper);
  box-shadow: 6px 6px 0 var(--accent);
}
.final-cta .btn-primary:hover{box-shadow:3px 3px 0 var(--accent)}

.final-meta{
  margin-top:26px;
  font-size:13px;
  color:color-mix(in srgb,var(--paper) 50%, transparent);
  font-family:var(--f-mono);letter-spacing:.04em;
}

/* ============== FOOTER ============== */
.footer{padding: clamp(60px, 8vw, 100px) var(--gutter) 40px;background:var(--paper-deep);border-top:1px solid var(--rule)}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.2fr 2fr;gap:48px}
@media (max-width:820px){.footer-inner{grid-template-columns:1fr;gap:40px}}

.footer-tag{
  margin-top:14px;
  font-family:var(--f-serif);font-style:italic;font-size:18px;color:var(--ink-soft);
  max-width:30ch;line-height:1.4;
}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:540px){.footer-nav{grid-template-columns:repeat(2,1fr)}}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h4{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:4px;font-weight:600;
}
.footer-col a{
  font-size:14.5px;color:var(--ink);font-weight:500;
  position:relative;width:fit-content;
}
.footer-col a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)
}
.footer-col a:hover::after{transform:scaleX(1)}

.footer-bottom{
  grid-column:1/-1;
  margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:14px;
}
.footer-disc{font-size:13px;line-height:1.55;color:var(--ink-mute);max-width:80ch}
.footer-disc strong{color:var(--ink-soft);font-weight:600}
.footer-meta{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px;color:var(--ink-mute);font-family:var(--f-mono);letter-spacing:.02em}

/* ============== LEGAL PAGES ============== */
.legal{
  max-width:760px;margin:0 auto;
  padding: clamp(40px, 7vw, 80px) var(--gutter) 60px;
}
.legal h1{
  font-family:var(--f-sans);font-size:clamp(32px, 5vw, 52px);font-weight:700;letter-spacing:-.025em;
  line-height:1.05;margin-bottom:8px;
}
.legal h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent)}
.legal .legal-meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:40px}
.legal h2{
  font-family:var(--f-sans);font-size:22px;font-weight:700;letter-spacing:-.015em;
  margin-top:40px;margin-bottom:12px;
}
.legal h2::before{content:'§ ';color:var(--accent);font-family:var(--f-serif);font-style:italic;font-weight:400;}
.legal h3{font-size:17px;font-weight:600;margin-top:24px;margin-bottom:8px}
.legal p, .legal li{font-size:16px;line-height:1.65;color:var(--ink-soft);margin-bottom:14px}
.legal ul, .legal ol{margin-left:24px;margin-bottom:14px;list-style:disc}
.legal ul li, .legal ol li{margin-bottom:6px}
.legal a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal a:hover{color:var(--accent-deep)}
.legal-intro{
  padding:20px 22px;
  background:var(--paper-deep);
  border-left:3px solid var(--accent);
  border-radius:4px;
  margin-bottom:32px;
  font-family:var(--f-serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--ink);
}
.back-home{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:32px;
}
.back-home:hover{color:var(--accent)}
.back-home svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ============== UTILS ============== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}