/* =========================================
   parabreak — landing
   Dark CRT base · phosphor green accent
   ========================================= */

:root {
  /* base palette */
  --bg: #0A0B0F;
  --bg-2: #0F1116;
  --panel: #151821;
  --line: #1E2230;
  --line-2: #2A2F40;
  --ink: #E6E8EF;
  --ink-2: #B4B8C5;
  --mute: #6B7080;
  --mute-2: #4A4F60;

  /* accents */
  --green: #46E49E;
  --green-dim: #2A8F62;
  --red: #E44C4C;
  --amber: #F2B544;
  --violet: #8B5CF6;

  /* type */
  --f-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-mono-2: 'IBM Plex Mono', ui-monospace, monospace;
  --f-kr: 'Pretendard', ui-sans-serif, system-ui, sans-serif;

  /* spacing scale (4-base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* container */
  --max: 1240px;
  --pad: 24px;
}

/* light mode override */
.theme-light {
  --bg: #F4F4EE;
  --bg-2: #ECECE5;
  --panel: #FFFFFF;
  --line: #D8D8D0;
  --line-2: #C2C2BA;
  --ink: #0A0B0F;
  --ink-2: #2A2F40;
  --mute: #6B7080;
  --mute-2: #9095A2;
  --green: #1A8B5A;
  --green-dim: #46E49E;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--green); color: #0A0B0F; }
a { color: inherit; text-decoration: none; }

/* =========================================
   Scanline + CRT vignette — VERY subtle, only in dark
   ========================================= */
.theme-dark body::before,
.theme-dark .crt-overlay {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.012) 0 1px,
    transparent 1px 3px
  );
}
.theme-dark body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.5) 100%);
}

/* =========================================
   Layout primitives
   ========================================= */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}
.kicker .acc { color: var(--green); }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 28px;
}
.section-label .num { color: var(--green); }
.section-label .line { display: inline-block; width: 24px; height: 1px; background: var(--green); }

h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
h2 { font-size: 56px; letter-spacing: -0.035em; }
h3 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.2; }
h4 { font-size: 18px; letter-spacing: -0.01em; line-height: 1.3; }
p  { margin: 0; color: var(--ink-2); }

/* =========================================
   Buttons
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 120ms ease;
  text-decoration: none;
}
.btn:hover { border-color: var(--green); color: var(--green); }
.btn .arrow { font-family: var(--f-mono); transition: transform 120ms ease; }
.btn:hover .arrow { transform: translateX(2px); }
.btn.primary {
  background: var(--green);
  color: #0A0B0F;
  border-color: var(--green);
}
.btn.primary:hover { background: transparent; color: var(--green); }
.btn.ghost {
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  color: var(--ink-2);
}
.btn.ghost:hover { color: var(--green); border-color: transparent; }

/* =========================================
   Top nav
   ========================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 11, 15, 0.78);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.theme-light .nav { background: rgba(244, 244, 238, 0.85); }
.nav-inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 32px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo .word {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
}
.nav-logo .word .br {
  color: var(--green);
  display: inline-block;
  transform: translateY(-2px) rotate(-3deg);
  margin-left: 1px;
  position: relative;
}
.nav-logo .word .br::before {
  content: "";
  position: absolute;
  left: -2px; right: -1px;
  top: 50%;
  height: 1px;
  background: var(--green);
}
.nav-links {
  display: flex;
  gap: 28px;
  margin-left: 14px;
}
.nav-links a {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 120ms ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-right .ver {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-right .ver .acc { color: var(--green); }

.theme-toggle {
  width: 36px; height: 22px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  position: relative;
  cursor: pointer;
  padding: 0;
}
.theme-toggle .knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green);
  transition: transform 160ms ease;
}
.theme-light .theme-toggle .knob { transform: translateX(14px); }

/* =========================================
   Hero
   ========================================= */
.hero {
  padding: 80px 0 96px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 28px;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
}
.hero-eyebrow .dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.hero-eyebrow .acc { color: var(--green); }

.hero h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 88px;
  letter-spacing: -0.045em;
  line-height: 0.96;
  color: var(--ink);
}
.hero h1 .br {
  color: var(--green);
  display: inline-block;
  transform: translateY(-0.06em) rotate(-3deg);
  position: relative;
}
.hero h1 .br::before {
  content: "";
  position: absolute;
  left: -0.05em; right: -0.02em;
  top: 50%;
  height: 0.04em;
  background: var(--green);
}
.hero-sub {
  margin-top: 28px;
  max-width: 540px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  font-family: var(--f-mono);
}
.hero-sub b { color: var(--ink); font-weight: 500; }
.hero-actions {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.hero-meta {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 36px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  max-width: 540px;
}
.hero-meta .item .k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}
.hero-meta .item .v {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.hero-meta .item .v .acc { color: var(--green); }

/* sub stickers (cut wordmark repurposed) */
.hero-stickers {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sticker-pill {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sticker-pill .dot { width: 5px; height: 5px; background: var(--green); border-radius: 50%; }
.sticker-pill .dot.amber { background: var(--amber); }
.sticker-pill .dot.violet { background: var(--violet); box-shadow: 0 0 6px rgba(167, 139, 255, 0.5); }
.sticker-pill.dialogic {
  border-color: var(--violet);
  color: var(--ink-2);
}
.sticker-pill.dialogic b { color: var(--violet); font-weight: 600; }

/* hero animation pane */
.hero-anim {
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-2);
  min-height: 520px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.theme-light .hero-anim { background: #FFFFFF; }

.anim-header {
  height: 32px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.anim-header .lights {
  display: inline-flex; gap: 6px; margin-right: 6px;
}
.anim-header .lights span {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--line-2);
}
.anim-header .file { color: var(--ink-2); }
.anim-header .right { margin-left: auto; color: var(--mute-2); }

/* dialogue stage */
.dialog-stage {
  position: relative;
  padding: 28px 28px 16px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 18px;
  min-height: 0;
  overflow: hidden;
}
.dialog-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(70, 228, 158, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 228, 158, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.theme-light .dialog-stage::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* the character "portrait" — abstract, no IP */
.character {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.character .portrait {
  width: 72px; height: 96px;
  border: 1px solid var(--line-2);
  position: relative;
  flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(70, 228, 158, 0.08), transparent 60%),
    var(--panel);
}
.character .portrait::before {
  /* eyes — tiny, looking at you */
  content: "";
  position: absolute;
  top: 30px; left: 16px;
  width: 8px; height: 4px;
  background: var(--green);
  box-shadow: 22px 0 0 var(--green);
}
.character .portrait::after {
  content: "";
  position: absolute;
  top: 56px; left: 22px;
  width: 28px; height: 2px;
  background: var(--ink-2);
}
.character .portrait .scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}
.character .name {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.character .name .meta { color: var(--mute); margin-left: 8px; }
.character .body {
  font-family: var(--f-mono);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
  min-height: 96px;
}
.character .body .typed { white-space: pre-wrap; }
.character .body .strike {
  color: var(--mute);
  position: relative;
  display: inline;
}
.character .body .strike::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 52%;
  height: 1.5px; background: var(--red);
  animation: strike-in 240ms ease forwards;
  transform: scaleX(0);
  transform-origin: left;
}
@keyframes strike-in { to { transform: scaleX(1); } }
.character .body .new {
  color: var(--green);
  border-bottom: 1px dashed transparent;
  display: inline-block;
}
.character .body .caret {
  display: inline-block;
  width: 8px; height: 18px;
  background: var(--green);
  vertical-align: -3px;
  margin-left: 2px;
  animation: caret-blink 1.05s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* dialogue choices area */
.choices {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}
.choice {
  border: 1px solid var(--line);
  padding: 10px 14px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 17, 22, 0.6);
  transition: all 160ms ease;
}
.theme-light .choice { background: rgba(255,255,255,0.6); }
.choice .pre { color: var(--mute); width: 14px; }
.choice.selected { border-color: var(--green); color: var(--ink); }
.choice.selected .pre { color: var(--green); }
.choice.locked {
  border-style: dashed;
  border-color: var(--red);
  color: var(--mute);
  position: relative;
}
.choice.locked .lock-tag {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--red);
  text-transform: uppercase;
}

/* anim controls — footer row of hero-anim grid (no longer absolute) */
.anim-controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mute);
  text-transform: uppercase;
  z-index: 10;
  isolation: isolate;
}
.theme-light .anim-controls { background: var(--panel); }
.anim-controls button {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--mute);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  cursor: pointer;
}
.anim-controls button:hover { color: var(--green); border-color: var(--green); }
.anim-controls .step { color: var(--green); }

/* annotations on the right of the anim pane */
.hero-callouts {
  position: absolute;
  right: -10px;
  top: 56px;
  width: 220px;
  z-index: 2;
  pointer-events: none;
}
.hero-callouts .item {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  background: var(--bg);
  border-left: 1px solid var(--green);
  padding: 4px 8px;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateX(8px);
  transition: all 320ms ease;
}
.hero-callouts .item.on { opacity: 1; transform: translateX(0); }
.hero-callouts .item .k { color: var(--green); }

/* glitch background hint behind hero h1 */
.hero-h1-wrap {
  position: relative;
}
.hero-h1-wrap::before {
  content: "// the engine notices.";
  position: absolute;
  top: -22px; left: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-2);
}

/* =========================================
   Section: Logos / under the engine
   ========================================= */
.under {
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.under-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: center;
}
.under .label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.under .marks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.under .mark {
  border-left: 1px solid var(--line);
  padding: 18px 24px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.under .mark:first-child { border-left: 1px solid var(--line); }
.under .mark .badge {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--mute);
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
}

/* =========================================
   Section: What is parabreak
   ========================================= */
.what {
  padding: 96px 0 96px;
  border-bottom: 1px solid var(--line);
}
.what-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
.what-head .lead p {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-2);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.what-head .lead p b {
  color: var(--ink);
  font-weight: 500;
}
.what-head .lead p .strike {
  color: var(--mute);
  position: relative;
}
.what-head .lead p .strike::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 52%;
  height: 1.5px; background: var(--red);
}
.what-head .lead p .acc { color: var(--green); }

.what-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.wcard {
  border: 1px solid var(--line);
  padding: 28px 24px 26px;
  background: var(--bg-2);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  min-height: 280px;
}
.theme-light .wcard { background: var(--panel); }
.wcard .num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}
.wcard .num .acc { color: var(--green); }
.wcard h4 { font-size: 22px; line-height: 1.2; }
.wcard p {
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.wcard .meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.wcard .meta .acc { color: var(--green); }

/* tiny visual strip per card */
.wcard .strip {
  height: 80px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(70, 228, 158, 0.04), transparent 60%),
    var(--bg);
  position: relative;
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-2);
  padding: 10px 12px;
  white-space: pre;
  line-height: 1.5;
}
.theme-light .wcard .strip { background: #FAFAF5; }
.wcard .strip .green { color: var(--green); }
.wcard .strip .mute { color: var(--mute); }
.wcard .strip .red  { color: var(--red); }
.wcard .strip .strike {
  color: var(--mute);
  position: relative;
}
.wcard .strip .strike::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 52%;
  height: 1.2px; background: var(--red);
}

/* =========================================
   Footer note (phase 1 placeholder)
   ========================================= */
.phase-marker {
  padding: 64px 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}
.phase-marker .acc { color: var(--green); }

/* responsive guards */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 64px; }
  .what-head { grid-template-columns: 1fr; gap: 24px; }
  .what-cards { grid-template-columns: 1fr; }
  .under-row { grid-template-columns: 1fr; gap: 16px; }
  .under .marks { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
}

/* phone */
@media (max-width: 640px) {
  :root { --pad: 20px; }
  .nav-inner { padding: 14px 20px; }
  .nav-right .ver { display: none; }
  .nav-right .btn { padding: 8px 12px; font-size: 12px; }
  .nav-right { gap: 8px; }

  /* hero */
  .hero { padding: 60px 0 60px; }
  .hero h1 { font-size: 44px; line-height: 1.0; }
  .hero-h1-wrap { padding-left: 0; border-left: none; }
  .hero-h1-wrap::before { display: none; }
  .hero-sub { font-size: 15px; margin-top: 20px; }
  .hero-actions { flex-wrap: wrap; gap: 8px; }
  .hero-actions .btn { font-size: 12px; padding: 10px 14px; }
  .hero-stickers { margin-top: 16px; }
  .sticker-pill { font-size: 9.5px; padding: 5px 9px; }
  .hero-meta { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; padding-top: 18px; }
  .hero-meta .item { padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
  .hero-meta .item:last-child { border-bottom: none; }
  .hero-eyebrow { font-size: 10px; }

  /* hero anim — keep readable */
  .hero-anim { min-height: 460px; aspect-ratio: auto; }
  .hero-anim .ha-line { font-size: 13px !important; line-height: 1.5; }
  .hero-anim .ha-narr { font-size: 11px !important; }
  .anim-controls { font-size: 9px; padding: 8px 10px; gap: 6px; }
  .anim-controls button { padding: 4px 7px; font-size: 9px; }
  .dialog-stage { padding: 22px 18px 14px; }

  /* under-engine */
  .under { padding: 28px 0; }
  .under .marks { grid-template-columns: 1fr; gap: 8px; }
  .under .mark { font-size: 11px; padding: 8px 10px; }
  .under .label { font-size: 10px; }

  /* what is */
  .what { padding: 60px 0; }
  .wcard { padding: 24px 20px; }
  .wcard h4 { font-size: 22px; }
  .what h2 { font-size: 36px; }

  /* what breaks */
  .breaks { padding: 60px 0; }
  .breaks h2 { font-size: 32px; }
  .bcard { padding: 24px 20px; min-height: 0; }
  .bcard .illus { height: 180px; }

  /* hooks */
  .hooks { padding: 60px 0; }
  .hooks h2 { font-size: 32px; }
  .hooks-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .hooks-tab { padding: 10px 8px; font-size: 10px; justify-content: center; }
  .hcard { padding: 18px 16px; }
  .hcard .name { font-size: 14px; word-break: break-all; }
  .hcard .json { font-size: 9.5px; padding: 7px 9px; }
  .hooks-foot { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 9.5px; }
  .hooks-foot span:last-child { display: none; }

  /* korean */
  .korean { padding: 60px 0; }
  .korean h2 { font-size: 38px; }
  .korean .lead { font-size: 15px; }
  .korean-side { padding: 22px 18px; }
  .korean-side h4 { font-size: 18px; }
  .korean .sig { padding: 10px 12px; font-size: 13px; gap: 10px; }

  /* pricing */
  .pricing { padding: 60px 0; }
  .pricing h2 { font-size: 32px; }
  .pcard { padding: 26px 22px 24px; min-height: 0; }
  .pcard .price { font-size: 38px; }
  .pcard .name { font-size: 24px; }
  .price-badge { font-size: 10px; padding: 5px 10px; }

  /* dialogic banner */
  .dialogic-row { padding: 24px 16px; }
  .dlg-title { font-size: 20px; }
  .dlg-sub { font-size: 12px; }
  .dlg-actions .btn { width: 100%; justify-content: center; }

  /* faq */
  .faq { padding: 60px 0; }
  .faq h2 { font-size: 32px; }
  .faq-q { font-size: 16px; padding: 18px 0; }
  .faq-q .num { width: 28px; margin-right: 14px; font-size: 10px; }
  .faq-a { grid-template-columns: 28px 1fr; gap: 14px; font-size: 13px; }

  /* community + footer */
  .community { padding: 60px 0; }
  .community h2 { font-size: 32px; }
  .ccard { padding: 22px 18px; min-height: 0; }
  .foot { padding: 50px 0 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bot { flex-direction: column; gap: 10px; align-items: flex-start; font-size: 10px; }
  .foot-bot .right { flex-direction: column; gap: 4px; }

  /* h2 across the page on mobile */
  h2 { letter-spacing: -0.025em; }
}