/* ============================================================
   Strac Forms — Main Stylesheet
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  /* Primitives */
  --orange-400: #FB923C;
  --orange-500: #F76B15;
  --orange-600: #EA5A08;
  --slate-800:  #1E2A3A;
  --slate-900:  #141F2C;
  --gray-50:    #F6F4EF;
  --gray-100:   #EFECE6;
  --gray-200:   #E5E0D8;
  --gray-300:   #CCC6BC;
  --gray-500:   #6B6560;
  --gray-600:   #4B4540;
  --gray-900:   #111208;

  /* Semantic */
  --color-bg:           var(--gray-50);
  --color-surface:      #FFFFFF;
  --color-surface-alt:  var(--gray-100);
  --color-brand:        var(--slate-800);
  --color-accent:       var(--orange-500);
  --color-accent-hover: var(--orange-600);
  --color-accent-subtle:#FFF4EE;
  --color-text-1:       var(--gray-900);
  --color-text-2:       var(--gray-600);
  --color-text-3:       var(--gray-500);
  --color-border:       var(--gray-200);

  /* Typography */
  --font-display: 'Onest', sans-serif;
  --font-body:    'Onest', sans-serif;
  --font-serif:   'Instrument Serif', serif;

  /* Spacing (8pt grid) */
  --s1: 8px;  --s2: 16px;  --s3: 24px;
  --s4: 32px; --s5: 40px;  --s6: 48px;
  --s7: 56px; --s8: 64px;  --s10: 80px;
  --s12: 96px;

  /* Layout */
  --max: 1200px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text-1);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── UTILS ── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--s6); }
@media (max-width: 768px) { .container { padding: 0 var(--s3); } }

/* ── BUTTONS ── */
.btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: transform .15s var(--ease), background .15s, box-shadow .15s, border-color .15s;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.btn-primary {
  background: var(--color-brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.btn-primary:hover { background: var(--slate-900); box-shadow: 0 4px 12px rgba(0,0,0,.18); }

.btn-secondary {
  background: transparent;
  color: var(--color-text-1);
  border: 1.5px solid var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-text-1); background: rgba(0,0,0,.02); }

.btn-lg { font-size: 16px; padding: 14px 28px; border-radius: 10px; }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-hover); box-shadow: 0 4px 16px rgba(247,107,21,.3); }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(246,244,239,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--s6);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--color-text-1);
}
.nav-logo-mark { width: 44px; height: 44px; flex-shrink: 0; }
.nav-logo-mark img { width: 44px; height: 44px; display: block; }
.nav-logo-name { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }

.nav-links { display: flex; gap: var(--s5); list-style: none; }
.nav-links a {
  font-size: 14px; font-weight: 500;
  color: var(--color-text-2); text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover { color: var(--color-text-1); }

.nav-actions { display: flex; align-items: center; gap: var(--s2); }
.nav-signin {
  font-size: 14px; font-weight: 500; color: var(--color-text-2);
  text-decoration: none; transition: color .15s; padding: 8px;
}
.nav-signin:hover { color: var(--color-text-1); }

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  margin-left: 4px;
  transition: background .15s;
  flex-shrink: 0;
}
.nav-hamburger:hover { background: var(--gray-100); }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-1);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV DRAWER ── */
.nav-mobile {
  display: none;
}

/* ── HERO ── */
.hero {
  padding-top: 0;
  height: 300vh;
  overflow: visible;
  position: relative;
}
.hero-inner {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow: hidden;
  display: grid; grid-template-columns: 580px 1fr;
  gap: 0;
  align-items: center;
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 5.5vw, 76px);
  font-weight: 800; line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-text-1);
  margin-bottom: var(--s4);
}
.hero-headline em {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 400;
  color: var(--color-text-1);
}
.hero-headline .accent-word {
  position: relative; display: inline-block;
}
.hero-headline .accent-word::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 4px;
  background: var(--color-accent); border-radius: 2px;
  transform-origin: left; transform: scaleX(0);
  animation: underline-in .6s var(--ease) .5s forwards;
}
@keyframes underline-in { to { transform: scaleX(1); } }

.hero-left { padding: var(--s8) var(--s6) var(--s8) clamp(32px, 6vw, 96px); position: relative; overflow: visible; }

/* ── DOODLES ── */
.doodle { position: absolute; pointer-events: none; user-select: none; }
.doodle-cursor  { top: 18%; right: -8px; transform: rotate(-12deg); opacity: .85; }
.doodle-drop    { bottom: 24%; left: -16px; transform: rotate(6deg); opacity: .7; }
.doodle-cta-left {
  position: absolute; top: -8px; left: 32px;
  transform: rotate(-9deg); transform-origin: top center;
  opacity: .32; pointer-events: none;
}
.doodle-cta-right-a {
  position: absolute; top: 18px; right: 28px;
  transform: rotate(7deg); transform-origin: top right;
  opacity: .32; pointer-events: none;
}
.doodle-cta-right-b {
  position: absolute; bottom: 48px; right: 56px;
  transform: rotate(-5deg); opacity: .22; pointer-events: none;
}
@media (max-width: 1024px) {
  .doodle-cta-left, .doodle-cta-right-a, .doodle-cta-right-b { display: none; }
  .doodle-cursor, .doodle-drop { display: none; }
}

.hero-sub {
  font-size: 18px; font-weight: 400;
  color: var(--color-text-2); line-height: 1.7;
  max-width: 440px; margin-bottom: var(--s5);
}
.hero-ctas {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3); flex-wrap: wrap;
}
.hero-friction { font-size: 13px; color: var(--color-text-3); }

.hero-visual { align-self: stretch; overflow: hidden; position: relative; }
.hero-lottie, #hero-lottie { position: absolute; inset: 0; width: 100%; height: 100%; }
#hero-lottie svg { width: 100% !important; height: 100% !important; }

/* ── SECTION CHROME ── */
.section { padding: var(--s12) 0; }
.section-overline {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-3);
  margin-bottom: var(--s2);
}
.section-overline::before {
  content: ''; display: block; width: 24px; height: 2px;
  background: var(--color-accent);
}
.section-headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -.025em; color: var(--color-text-1);
  margin-bottom: var(--s3);
}
.section-headline em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--color-text-3); }
.section-body { font-size: 17px; color: var(--color-text-2); line-height: 1.7; max-width: 520px; }

/* ── ACCORDION FEATURE SECTION ── */
.accordion-section { background: var(--slate-800); }
.accordion-inner {
  max-width: var(--max); margin: 0 auto; padding: var(--s12) var(--s6);
}
.accordion-header { margin-bottom: var(--s8); }
.accordion-body {
  display: grid; grid-template-columns: 440px 1fr; gap: var(--s10); align-items: start;
}
.accordion-overline {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4);
}
.accordion-overline::before { content: ''; width: 24px; height: 2px; background: var(--color-accent); }
.accordion-headline {
  font-family: var(--font-display); font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 800; line-height: 1.08; letter-spacing: -.025em;
  color: #fff; margin-bottom: var(--s8);
}
.accordion-headline em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: rgba(255,255,255,.75); }
.accordion-headline .kw { color: var(--orange-400); }
.acc-trigger-label em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.accordion-list { display: flex; flex-direction: column; }
.acc-item { border-top: 1px solid rgba(255,255,255,.1); }
.acc-item:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.acc-trigger {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) 0; text-align: left;
}
.acc-trigger-label {
  font-size: 16px; font-weight: 600; color: rgba(255,255,255,.45);
  transition: color .2s; font-family: var(--font-body);
}
.acc-trigger-icon {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 12px; color: rgba(255,255,255,.3); transition: background .2s, border-color .2s;
}
.acc-item.active .acc-trigger-label { color: #fff; }
.acc-item.active .acc-trigger-icon { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.acc-body { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.acc-item.active .acc-body { max-height: 200px; }
.acc-body-inner { padding-bottom: var(--s4); }
.acc-body-inner::before {
  content: ''; display: block; width: 40px; height: 2px;
  background: var(--color-accent); margin-bottom: var(--s2);
}
.acc-body-text { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.75; font-family: var(--font-body); }

.accordion-right { position: sticky; top: 100px; }
.acc-visual-wrapper { position: relative; }
.acc-card-back { display: none; }
.acc-card-front { position: relative; z-index: 1; min-height: 380px; }
.acc-panel { display: none; }
.acc-panel.active { display: block; }

/* Panel outer wrappers */
.p-outer {
  position: relative; min-height: 380px;
  padding: 28px 20px; display: flex; align-items: center;
  font-family: var(--font-body);
}
.p-outer--builder { background: transparent; }
.p-outer--embed   { background: transparent; }
.p-outer--data    { background: #EAFAEE; }
.p-outer--domain  { background: #E9F4F3; }
.p-outer--reports { background: #F0EEFF; }

/* Icon pills */
.p-icons {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 4;
}
.p-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #555; font-weight: 700;
}

/* Dual card container */
.p-dual {
  display: flex; align-items: flex-start; gap: 0;
  flex: 1; margin-left: 54px; position: relative;
}
.p-back {
  width: 158px; flex-shrink: 0; background: #fff;
  border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.08);
  z-index: 1; margin-top: 32px; overflow: hidden;
}
.p-front {
  flex: 1; background: #fff;
  border-radius: 14px; box-shadow: 0 8px 36px rgba(0,0,0,.15);
  z-index: 2; margin-left: -12px; overflow: hidden;
}
.p-fab {
  position: absolute; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 300; line-height: 1; z-index: 5;
  left: 142px; top: 50%; transform: translateY(-40%);
}
.p-fab--green  { background: #22C55E; color: #fff; box-shadow: 0 4px 12px rgba(34,197,94,.45); }
.p-fab--orange { background: var(--color-accent); color: #fff; box-shadow: 0 4px 14px rgba(247,107,21,.4); }
.p-fab--teal   { background: #0D9488; color: #fff; box-shadow: 0 4px 12px rgba(13,148,136,.4); }

/* Shared card parts */
.pc-head {
  padding: 11px 14px; font-size: 12.5px; font-weight: 700; color: #1E2A3A;
  border-bottom: 1px solid #F0EDE8;
  display: flex; align-items: center; justify-content: space-between;
}
.pc-btn {
  font-size: 10.5px; font-weight: 700; border: none; padding: 4px 11px;
  border-radius: 6px; cursor: pointer; font-family: var(--font-body);
}
.pc-btn--green  { background: #059669; color: #fff; }
.pc-btn--ghost  { background: none; color: var(--color-accent); border: 1.5px solid var(--color-accent); }
.p-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; font-size: 11.5px; color: #444;
  border-bottom: 1px solid #F5F4F1; cursor: default;
}
.p-list-item:last-child { border: none; }
.p-list-item:hover { background: #FAFAF8; }
.p-list-ic {
  width: 26px; height: 26px; border-radius: 6px;
  background: #F5F4F1; border: 1px solid #E8E4DC;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #777; flex-shrink: 0;
}
.p-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #F5F4F0; border-bottom: 1px solid #ECEAE5;
}
.p-chrome-dots { display: flex; gap: 4px; flex-shrink: 0; }
.p-chrome-dots span { width: 9px; height: 9px; border-radius: 50%; }
.p-chrome-dots span:nth-child(1) { background: #FF5F57; }
.p-chrome-dots span:nth-child(2) { background: #FFBD2E; }
.p-chrome-dots span:nth-child(3) { background: #28CA41; }
.p-chrome-url {
  flex: 1; background: #fff; border: 1px solid #E8E4DC;
  border-radius: 5px; padding: 3px 8px; font-size: 10.5px; color: #666;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-chrome-url--green { color: #059669; font-weight: 500; }

/* Builder panel */
.pfc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.pfc-lbl  { display: block; font-size: 10.5px; font-weight: 600; color: #333; margin-bottom: 3px; }
.pfc-req  { color: var(--color-accent); }
.pfc-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pfc-inp  { height: 30px; background: #F8F7F4; border: 1.5px solid #E8E4DC; border-radius: 6px; }
.pfc-inp--sel { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(247,107,21,.12); }
.pfc-inp--val { display: flex; align-items: center; padding: 0 10px; font-size: 11.5px; color: #888; }
.pfc-drag {
  height: 30px; background: rgba(247,107,21,.06); border: 1.5px dashed var(--color-accent);
  border-radius: 6px; display: flex; align-items: center; gap: 5px;
  padding: 0 8px; font-size: 11px; color: var(--color-accent); font-weight: 600;
}
.pfc-select {
  height: 30px; background: #F8F7F4; border: 1.5px solid #E8E4DC; border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; font-size: 11.5px; color: #888;
}
.pfc-cta { height: 34px; background: var(--color-accent); color: #fff; border: none; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font-body); width: 100%; }

/* Embed panel */
.peb-body { padding: 10px 12px; }
.peb-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.peb-logo { width: 46px; height: 9px; background: #1E2A3A; border-radius: 3px; }
.peb-navlinks { display: flex; gap: 5px; }
.peb-navlinks span { width: 24px; height: 6px; background: #E0DDD8; border-radius: 3px; }
.peb-frame { background: #F8F7F4; border: 1.5px solid #E8E4DC; border-radius: 8px; padding: 9px; display: flex; flex-direction: column; gap: 5px; }
.peb-frame-lbl { height: 5px; background: #AAA; border-radius: 2px; width: 35%; margin-bottom: 2px; }
.peb-frame-f { height: 22px; background: #fff; border: 1px solid #E8E4DC; border-radius: 4px; }
.peb-frame-btn { height: 22px; background: var(--color-accent); border-radius: 4px; }

/* Data Hub panel */
.pdt-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #F0EDE8; }
.pdt-title { font-size: 12.5px; font-weight: 700; color: #1E2A3A; }
.pdt-tbl { width: 100%; border-collapse: collapse; }
.pdt-tbl th { padding: 6px 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #AAA; background: #F8F7F4; border-bottom: 1px solid #F0EDE8; text-align: left; }
.pdt-tbl td { padding: 8px 10px; font-size: 11.5px; color: #444; border-bottom: 1px solid #F4F3EF; }
.pdt-tbl tr:last-child td { border: none; }
.pdt-tbl tr:hover td { background: #FAFAF8; }
.pdt-b { display: inline-block; padding: 1px 7px; border-radius: 100px; font-size: 9.5px; font-weight: 700; }
.pdt-b--new  { background: #FFF7ED; color: var(--color-accent); }
.pdt-b--read { background: #F0FDF4; color: #059669; }

/* Domain panel */
.pcd-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #F5F4F1; }
.pcd-row:last-child { border: none; }
.pcd-lbl { font-size: 11.5px; color: #555; }
.pcd-ok { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: #F0FDF4; color: #059669; }
.pcf-body { padding: 12px 14px 14px; }
.pcf-brand { font-size: 13px; font-weight: 800; color: #1E2A3A; letter-spacing: -.4px; margin-bottom: 10px; }
.pcf-ftitle { font-size: 14px; font-weight: 700; color: #1E2A3A; margin-bottom: 10px; }
.pcf-f { margin-bottom: 8px; }
.pcf-lbl { display: block; font-size: 10px; font-weight: 600; color: #555; margin-bottom: 3px; }
.pcf-inp { height: 28px; background: #F8F7F4; border: 1.5px solid #E8E4DC; border-radius: 6px; }
.pcf-btn { height: 30px; background: var(--color-accent); border-radius: 6px; width: 100%; margin-top: 4px; }

/* Reports panel */
.prs-stat { padding: 10px 12px; border-bottom: 1px solid #F5F4F1; }
.prs-stat:last-child { border: none; }
.prs-val { font-size: 20px; font-weight: 700; color: #1E2A3A; line-height: 1.1; font-family: var(--font-display); }
.prs-lbl { font-size: 10px; color: #AAA; margin-top: 1px; }
.prs-delta { font-size: 10px; font-weight: 700; color: #059669; }
.prc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.prc-title { font-size: 13.5px; font-weight: 700; color: #1E2A3A; }
.prc-badge { font-size: 11px; font-weight: 700; background: #059669; color: #fff; padding: 4px 11px; border-radius: 100px; }
.prc-chart { padding: 0 14px; }
.prc-bars { display: flex; gap: 7px; height: 90px; align-items: flex-end; }
.prc-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.prc-track { flex: 1; width: 100%; background: #EDE9FA; border-radius: 5px 5px 3px 3px; display: flex; align-items: flex-end; overflow: hidden; margin-bottom: 4px; }
.prc-bar { width: 100%; background: #7C6FF7; border-radius: 4px 4px 0 0; }
.prc-day { font-size: 9.5px; color: #AAA; }
.prc-val { font-size: 9.5px; font-weight: 700; color: #555; margin-top: 1px; }
.prc-bottom { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #F0EDE8; margin-top: 10px; }
.prc-bstat { padding: 9px 8px; text-align: center; }
.prc-bstat + .prc-bstat { border-left: 1px solid #F0EDE8; }
.prc-bstat-val { display: block; font-size: 14px; font-weight: 700; color: #1E2A3A; }
.prc-bstat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: #AAA; font-weight: 600; }

/* ── FEATURE ROWS ── */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s10); align-items: center;
  padding: var(--s12) var(--s6);
  max-width: var(--max); margin: 0 auto;
}
.feature-row.flip { direction: rtl; }
.feature-row.flip > * { direction: ltr; }
.fr-tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s4); }
.fr-tag {
  font-size: 12px; font-weight: 500; color: var(--color-text-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: 5px 12px; border-radius: 100px;
  transition: border-color .15s, color .15s;
}
.fr-tag:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Code embed visual */
.embed-visual {
  background: #0D1117; border-radius: 16px; padding: var(--s5);
  border: 1px solid #1E2530;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
}
.ev-label { font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #444; margin-bottom: 12px; font-family: var(--font-body); }
.ev-code { font-size: 13px; line-height: 2; margin-bottom: 16px; }
.ev-copy {
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: #555; background: #0A0A0A; border: 1px solid #1E1E1E;
  padding: 9px 16px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: color .2s, border-color .2s;
}
.ev-copy:hover { color: var(--color-accent); border-color: var(--color-accent); }
.ev-sites { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s3); }
.ev-site { font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #444; border: 1px solid #1E1E1E; padding: 5px 10px; border-radius: 4px; transition: border-color .2s, color .2s; }
.ev-site:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── TESTIMONIAL ── */
.testimonial-section {
  padding: var(--s12) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.testimonial-inner {
  max-width: 780px; margin: 0 auto; padding: 0 var(--s6);
  text-align: center;
}
.testi-stars { color: var(--color-accent); font-size: 15px; letter-spacing: 3px; margin-bottom: var(--s4); }
.testi-quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.8vw, 28px); color: var(--color-text-1);
  line-height: 1.55; margin-bottom: var(--s6);
}
.testi-cite { display: inline-flex; align-items: center; gap: var(--s2); }
.testi-av {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: #fff; flex-shrink: 0;
}
.testi-cite-text { text-align: left; font-size: 13px; color: var(--color-text-2); }
.testi-cite-text strong { display: block; color: var(--color-text-1); font-weight: 700; font-size: 14px; }

/* ── HOW IT WORKS ── */
.how-section {
  background: var(--gray-50);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden; padding: 0;
}
.how-ed-header { max-width: var(--max); margin: 0 auto; padding: 60px var(--s6) 0; }
.how-ed-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 800; color: var(--color-text-1);
  letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 8px;
}
.how-ed-tagline {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px); color: var(--color-text-2); line-height: 1.2;
}
.how-ed-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: 480px; margin-top: 24px; position: relative; overflow: hidden;
}
.how-ed-col { position: relative; }
.how-ed-label { position: absolute; left: 36px; z-index: 2; }
.how-ed-step {
  display: block; font-family: 'Caveat', cursive;
  font-size: clamp(18px, 1.9vw, 24px); font-weight: 600;
  color: #BBBBBB; line-height: 1.2; margin-bottom: 2px;
}
.how-ed-name {
  display: block; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2vw, 28px); font-weight: 400;
  color: var(--color-text-1); line-height: 1.1;
}
.how-figure { position: absolute; right: 20px; pointer-events: none; z-index: 10; }
.how-ed-col--build   .how-figure { bottom: 280px; }
.how-ed-col--publish .how-figure { bottom: 370px; }
.how-ed-col--collect .how-figure { bottom: 250px; }
.how-ed-block {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 52px 52px 0 0; padding: 40px 40px 56px;
  display: flex; flex-direction: column; gap: 14px;
}
.hew-title {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px);
  font-weight: 800; line-height: 1.1; letter-spacing: -.8px; margin: 0;
}
.hew-body { font-family: var(--font-body); font-size: clamp(13px, 1.2vw, 15px); line-height: 1.65; margin: 0; }

.how-ed-col--build               { z-index: 1; }
.how-ed-col--build .how-ed-label { top: 120px; }
.how-ed-col--build .how-ed-block { background: #1E2A3A; height: 280px; }
.how-ed-col--build .hew-title    { color: #fff; }
.how-ed-col--build .hew-body     { color: rgba(255,255,255,.5); }

.how-ed-col--publish               { z-index: 2; }
.how-ed-col--publish .how-ed-label { top: 30px; }
.how-ed-col--publish .how-ed-block { background: #F76B15; height: 370px; left: -28px; right: 0; }
.how-ed-col--publish .hew-title    { color: #fff; }
.how-ed-col--publish .hew-body     { color: rgba(255,255,255,.65); }

.how-ed-col--collect               { z-index: 3; }
.how-ed-col--collect .how-ed-label { top: 150px; }
.how-ed-col--collect .how-ed-block { background: #ECEAE4; height: 250px; left: -28px; right: 0; }
.how-ed-col--collect .hew-title    { color: #1E2A3A; }
.how-ed-col--collect .hew-body     { color: #7A7570; }

/* ── PRICING ── */
.pricing-section { padding: var(--s12) 0; }
.pricing-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--s6); }
.pricing-header { margin-bottom: var(--s5); }

.pricing-toggle { display: flex; align-items: center; justify-content: center; margin-bottom: var(--s8); }
.billing-pill-wrap { position: relative; display: inline-block; }
.billing-pill {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 100px; padding: 4px;
  border: 1.5px solid var(--gray-900); gap: 0;
}
.billing-tab {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--color-text-2); padding: 9px 24px; border-radius: 100px;
  cursor: pointer; border: none; background: none;
  transition: background .2s var(--ease), color .15s; white-space: nowrap;
}
.billing-tab.active { background: var(--gray-900); color: #fff; }
.billing-tab:not(.active):hover { color: var(--color-text-1); }

.billing-annotation {
  position: absolute; top: -44px; right: -90px;
  display: flex; flex-direction: column; align-items: flex-start; pointer-events: none;
}
.billing-annotation-text {
  font-family: 'Caveat', cursive; font-size: 18px; font-weight: 600;
  color: #1a5c38; line-height: 1; white-space: nowrap;
}
.billing-annotation svg { display: block; margin-top: 2px; }

.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s3); align-items: stretch;
}
.plan-card {
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: 20px; padding: var(--s5) var(--s4) var(--s4);
  position: relative; transition: transform .2s var(--ease), box-shadow .2s;
  display: flex; flex-direction: column;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.08); }
.plan-card.featured {
  background: var(--slate-800); border-color: var(--slate-800);
  padding: var(--s8) var(--s5) var(--s5); margin-top: -24px;
}
.plan-popular {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; padding: 4px 14px;
  border-radius: 100px; white-space: nowrap; font-family: var(--font-body);
}
.plan-tier { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin-bottom: var(--s1); font-family: var(--font-body); }
.plan-card:not(.featured) .plan-tier { color: var(--color-text-3); }
.plan-card.featured .plan-tier { color: rgba(255,255,255,.4); }
.plan-price { margin-bottom: var(--s2); }
.plan-price-val {
  font-family: var(--font-display); font-size: 48px; font-weight: 700;
  line-height: 1; letter-spacing: -.03em; display: block; margin-bottom: 2px;
}
.plan-card:not(.featured) .plan-price-val { color: var(--color-text-1); }
.plan-card.featured .plan-price-val { color: #fff; }
.plan-price-period { font-size: 13px; display: block; }
.plan-card:not(.featured) .plan-price-period { color: var(--color-text-3); }
.plan-card.featured .plan-price-period { color: rgba(255,255,255,.35); }
.plan-divider { border: none; border-top: 1px solid; margin: var(--s2) 0; }
.plan-card:not(.featured) .plan-divider { border-color: var(--color-border); }
.plan-card.featured .plan-divider { border-color: rgba(255,255,255,.1); }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s5); flex: 1; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.plan-card:not(.featured) .plan-features li { color: var(--color-text-2); }
.plan-card.featured .plan-features li { color: rgba(255,255,255,.65); }
.plan-features li::before {
  content: '✓'; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 900; flex-shrink: 0; margin-top: 1px;
}
.plan-card:not(.featured) .plan-features li::before { background: #F0FDF4; color: #059669; }
.plan-card.featured .plan-features li::before { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.plan-features li.plan-addon { font-style: italic; opacity: .7; }
.plan-features li.plan-addon::before { display: none; }
.plan-cta {
  width: 100%; padding: 13px; border-radius: 10px; font-family: var(--font-body);
  font-size: 14px; font-weight: 700; cursor: pointer; text-align: center;
  text-decoration: none; display: block; transition: transform .15s var(--ease), opacity .15s;
  border: none;
}
.plan-cta:hover { transform: translateY(-1px); opacity: .9; }
.plan-card:not(.featured) .plan-cta { background: var(--color-text-1); color: #fff; }
.plan-card.featured .plan-cta { background: var(--color-accent); color: #fff; }
.plan-price-note { font-size: 11px; color: var(--color-text-3); margin-top: 4px; visibility: hidden; font-family: var(--font-body); }
.plan-card.featured .plan-price-note { color: rgba(255,255,255,.3); }
body.yearly .plan-price-note { visibility: visible; }

/* ── FAQ ── */
.faq-section { padding: var(--s12) 0; background: var(--color-bg); }
.faq-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--s6);
  display: grid; grid-template-columns: 340px 1fr; gap: var(--s10); align-items: start;
}
.faq-header { position: sticky; top: 96px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--gray-100); border-radius: 14px; overflow: hidden; transition: background .15s; }
.faq-trigger {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: 22px var(--s4); text-align: left;
}
.faq-question { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--color-text-1); line-height: 1.4; }
.faq-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  font-size: 20px; font-weight: 300; color: var(--color-text-3);
  line-height: 1; transition: transform .25s var(--ease), color .15s;
  display: grid; place-items: center;
}
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--color-accent); }
.faq-item.open { background: var(--gray-200); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-item.open .faq-body { max-height: 300px; }
.faq-answer { font-size: 15px; color: var(--color-text-2); line-height: 1.75; padding: 0 var(--s4) 22px; }

/* ── CTA SECTION ── */
.cta-section {
  background: var(--slate-800); padding: 120px 40px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-bg-text {
  position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: clamp(32px, 16vw, 180px);
  font-weight: 900; color: rgba(255,255,255,.04); white-space: nowrap;
  white-space: nowrap; pointer-events: none; letter-spacing: -4px; user-select: none;
}
.cta-label {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 20px;
}
.cta-headline {
  font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 900; line-height: 1.03; letter-spacing: -2px;
  color: #fff; margin-bottom: 20px;
}
.cta-headline em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: rgba(255,255,255,.4); }
.cta-sub { font-size: 18px; color: rgba(255,255,255,.55); max-width: 480px; margin: 0 auto 44px; line-height: 1.65; font-family: var(--font-body); }
.cta-actions { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.btn-white {
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  background: #fff; color: var(--color-text-1); padding: 14px 32px; border-radius: 10px;
  text-decoration: none; display: inline-block; transition: transform .2s var(--ease), opacity .2s;
}
.btn-white:hover { transform: translateY(-2px); opacity: .95; }
.btn-ghost-light {
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  background: transparent; color: rgba(255,255,255,.6);
  border: 1.5px solid rgba(255,255,255,.2); padding: 14px 32px; border-radius: 10px;
  text-decoration: none; display: inline-block; transition: border-color .2s, color .2s;
}
.btn-ghost-light:hover { border-color: rgba(255,255,255,.5); color: #fff; }

/* ── FOOTER ── */
footer { border-top: 1px solid var(--color-border); padding: var(--s8) 0 var(--s4); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--s6); }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s8);
  padding-bottom: var(--s6); border-bottom: 1px solid var(--color-border); margin-bottom: var(--s4);
}
.footer-brand p { font-size: 13px; color: var(--color-text-3); line-height: 1.75; margin-top: var(--s2); max-width: 240px; }
.footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-3); margin-bottom: var(--s2); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 14px; color: var(--color-text-2); text-decoration: none; transition: color .15s; }
.footer-col ul a:hover { color: var(--color-text-1); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; }
.footer-copy, .footer-tagline { font-size: 12px; color: var(--color-text-3); }

/* ── USE CASES ── */
.uc-section {
  background: var(--gray-50);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--s12) 0;
}
.uc-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--s6); }
.uc-header { margin-bottom: var(--s8); }
.uc-tabs {
  display: flex; gap: 4px;
  background: var(--gray-200); border-radius: 12px;
  padding: 4px; margin-bottom: var(--s8); width: fit-content;
}
.tab-short { display: none; }
.uc-tab {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--color-text-3); background: none; border: none;
  padding: 10px 22px; border-radius: 9px; cursor: pointer;
  transition: background .18s, color .18s; white-space: nowrap;
}
.uc-tab.active {
  background: #fff; color: var(--color-text-1);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.uc-panels { position: relative; }
.uc-panel { display: none; grid-template-columns: 1fr 1.4fr; gap: var(--s10); align-items: center; }
.uc-panel.active { display: grid; }
.uc-panel-text { display: flex; flex-direction: column; gap: var(--s3); }
.uc-industry { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--color-accent); }
.uc-title {
  font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: var(--color-text-1);
}
.uc-desc { font-size: 16px; color: var(--color-text-2); line-height: 1.75; max-width: 400px; }
.uc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #fff;
  text-decoration: none; margin-top: var(--s2);
  background: var(--color-brand); border-radius: 8px;
  padding: 10px 20px; transition: background .15s, transform .15s; align-self: flex-start;
}
.uc-cta:hover { background: var(--slate-900); transform: translateY(-1px); }

/* Handwritten annotation */
.uc-annotation-wrap { position: relative; flex: 1.4; overflow: visible; }
.uc-annotation {
  position: absolute; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; z-index: 2;
}
.uc-annotation.top-right { top: -48px; right: 80px; align-items: flex-end; }
.uc-annotation-text {
  font-family: 'Caveat', cursive; font-size: 20px; font-weight: 600;
  color: #1a5c38; line-height: 1; white-space: nowrap;
}
.uc-annotation svg { display: block; }

/* Browser mockup */
.uc-panel-image {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 40px rgba(0,0,0,.08);
  background: #2c3347; aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
}
.browser-mock {
  width: 100%; height: 100%;
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.browser-mock-bar {
  background: #e3e8ef; flex-shrink: 0;
  height: 36px; display: flex; align-items: center;
  padding: 0 12px; gap: 6px;
  border-bottom: 1px solid #ced4da;
}
.browser-mock-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.browser-mock-dot.red    { background: #ff5f57; }
.browser-mock-dot.yellow { background: #ffbd2e; }
.browser-mock-dot.green  { background: #27c940; }
.browser-mock-body {
  flex: 1; background: #f5f7fa; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #d1d5db transparent;
}
.browser-mock-body::-webkit-scrollbar { width: 4px; }
.browser-mock-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* Form mock shared styles */
.hr-form-mock {
  width: 100%; padding: 28px 32px 32px; box-sizing: border-box;
  background: #fff; font-family: var(--font-body);
}
.hfm-title { font-size: 17px; font-weight: 700; color: #111827; margin: 0 0 4px; }
.hfm-sub { font-size: 12px; color: #6b7280; margin: 0 0 20px; }
.hfm-section {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #9ca3af;
  margin: 28px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.hfm-row { display: grid; gap: 12px; margin-bottom: 14px; }
.hfm-row.cols-2 { grid-template-columns: 1fr 1fr; }
.hfm-row.cols-1 { grid-template-columns: 1fr; }
.hfm-field { display: flex; flex-direction: column; gap: 4px; }
.hfm-label { font-size: 11px; font-weight: 600; color: #374151; }
.hfm-input {
  height: 32px; border: 1px solid #e5e7eb; border-radius: 6px;
  background: #f9fafb; padding: 0 10px;
  font-size: 12px; color: #9ca3af; display: flex; align-items: center;
}
.hfm-select {
  height: 32px; border: 1px solid #e5e7eb; border-radius: 6px;
  background: #f9fafb; padding: 0 10px;
  font-size: 12px; color: #9ca3af;
  display: flex; align-items: center; justify-content: space-between;
}
.hfm-select::after { content: '▾'; font-size: 10px; color: #9ca3af; }
.hfm-radio-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.hfm-radio { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #374151; }
.hfm-radio-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #d1d5db; background: #f9fafb; flex-shrink: 0;
}
.hfm-radio-dot.checked { border-color: #202936; background: #202936; box-shadow: inset 0 0 0 3px #fff; }
.hfm-upload {
  border: 1.5px dashed #d1d5db; border-radius: 8px;
  background: #fafafa; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
}
.hfm-upload-text { display: flex; flex-direction: column; gap: 1px; }
.hfm-upload-label { font-size: 11px; font-weight: 600; color: #374151; }
.hfm-upload-hint { font-size: 10px; color: #9ca3af; }
.hfm-submit {
  margin-top: 20px; width: 100%; height: 36px;
  background: #202936; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #fff; letter-spacing: .01em;
}

/* ── ANIMATIONS ── */

/* Keyframes */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes priceFlipIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav entrance + scroll state */
nav { animation: navSlideDown .5s var(--ease) both; transition: box-shadow .35s ease; }
nav.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,.09); }

/* Hero — staggered entrance on page load */
.hero-left .doodle { animation: fadeSlideUp .6s var(--ease) .1s both; }
.hero-headline     { animation: fadeSlideUp .85s var(--ease) .18s both; }
.hero-sub          { animation: fadeSlideUp .75s var(--ease) .34s both; }
.hero-ctas         { animation: fadeSlideUp .7s  var(--ease) .5s  both; }
.hero-friction     { animation: fadeSlideUp .6s  var(--ease) .62s both; }

/* Scroll reveal — applied via JS to elements as they enter viewport */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* UC panel — fade transition between tabs */
.uc-panel { transition: opacity .3s ease; }

/* Accordion panel — fade when switching */
.acc-panel { transition: opacity .35s ease; }

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  nav              { animation: none; }
  .hero-headline, .hero-sub, .hero-ctas, .hero-friction,
  .hero-left .doodle { animation: none; }
  .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
  .uc-panel, .acc-panel { transition: none; }
}

/* ── RESPONSIVE ── */

/* ── HERO: intermediate desktop widths (1025–1440px) ── */
/* Keep the sticky scroll-scrub layout intact; only constrain hero-visual
   to a landscape aspect-ratio so the lottie column doesn't go portrait. */
@media (min-width: 1025px) and (max-width: 1440px) {
  .hero-visual {
    aspect-ratio: 4 / 3;
    align-self: center;
  }
}

/* ── TABLET & MOBILE (≤1024px) ── */
@media (max-width: 1024px) {
  /* Nav */
  .nav-links { display: none; }
  .nav-signin { display: none; }
  .nav-hamburger { display: flex; }
  .nav-inner, .footer-inner { padding: 0 var(--s3); }

  /* Mobile nav drawer */
  .nav-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: var(--color-bg);
    z-index: 199;
    padding: var(--s5) var(--s4) var(--s6);
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: transform .28s var(--ease), opacity .22s;
  }
  .nav-mobile.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }
  .nav-mobile-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
  }
  .nav-mobile-links li a {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-1);
    text-decoration: none;
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--color-border);
    transition: color .15s;
  }
  .nav-mobile-links li a:hover { color: var(--color-accent); }
  .nav-mobile-actions {
    margin-top: auto;
    padding-top: var(--s4);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  .nav-mobile-signin {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-2);
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1.5px solid var(--color-border);
    transition: color .15s, border-color .15s;
  }
  .nav-mobile-signin:hover { color: var(--color-text-1); border-color: var(--color-text-1); }
  .nav-mobile-actions .btn { padding: 16px 24px; font-size: 16px; }

  /* Hero */
  .hero { height: auto; min-height: 100vh; overflow: hidden; }
  .hero-inner {
    position: relative; top: auto; height: auto;
    min-height: calc(100vh - 64px); padding-top: 64px;
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-visual { order: -1; height: 56vw; position: relative; }
  .hero-left {
    padding: var(--s6) var(--s4);
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
  }
  .hero-sub { max-width: 480px; }
  .hero-ctas { justify-content: center; }
  .hero-friction { text-align: center; }

  /* Accordion — hide right panel; images injected inside each item via JS */
  .accordion-body { grid-template-columns: 1fr; }
  .accordion-right { display: none; }
  .accordion-inner { padding: var(--s10) var(--s4); }

  /* Allow accordion body to expand for image + text */
  .acc-item.active .acc-body { max-height: 600px; }

  /* Mobile image injected inside accordion item */
  .acc-mobile-img {
    width: 100%;
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--gray-100);
    border: 1px solid var(--color-border);
    transition: opacity .3s ease;
  }
  .acc-mobile-img img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    display: block;
    transform: none !important;
  }

  /* Feature rows */
  .feature-row, .feature-row.flip { grid-template-columns: 1fr; direction: ltr; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; align-items: start; }
  .plan-card.featured { margin-top: 0; }  /* prevent overlap in stacked layout */
  .pricing-inner { padding-left: var(--s4); padding-right: var(--s4); }

  /* FAQ */
  .faq-inner { grid-template-columns: 1fr; gap: var(--s6); padding-left: var(--s4); padding-right: var(--s4); }
  .faq-header { position: static; }

  /* Use Cases */
  .uc-panel.active { grid-template-columns: 1fr; }
  .uc-panel-image { aspect-ratio: 16/9; }
  .uc-annotation-wrap { order: -1; }
  .uc-inner { padding-left: var(--s4); padding-right: var(--s4); }

  /* Testimonial */
  .testimonial-inner { padding-left: var(--s4); padding-right: var(--s4); }

  /* CTA */
  .cta-section { padding: 80px 24px; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s4); }

  /* How it works */
  .how-ed-grid { height: 520px; }
  /* Anchor labels just above their cards */
  .how-ed-col--build   .how-ed-label { top: auto; bottom: 288px; }
  .how-ed-col--publish .how-ed-label { top: auto; bottom: 378px; }
  .how-ed-col--collect .how-ed-label { top: auto; bottom: 258px; }
  /* Reduce corner radius for tablet */
  .how-ed-col--build   .how-ed-block { border-radius: 32px 32px 0 0; }
  .how-ed-col--publish .how-ed-block { border-radius: 32px 32px 0 0; left: -14px; }
  .how-ed-col--collect .how-ed-block { border-radius: 32px 32px 0 0; left: -14px; }
  /* Adjust figures for new height */
  .how-ed-col--build   .how-figure { bottom: 300px; }
  .how-ed-col--publish .how-figure { bottom: 400px; }
  .how-ed-col--collect .how-figure { bottom: 275px; }
}

/* ── SMALL TABLET & LARGE MOBILE (≤768px) ── */
@media (max-width: 768px) {
  /* Hide CTA button in nav bar — available in mobile drawer */
  .nav-cta-desktop { display: none; }

  /* Hero: tighter padding */
  .hero-visual { height: 62vw; }
  .hero-left { padding: var(--s5) var(--s3); text-align: center; display: flex; flex-direction: column; align-items: center; }

  /* How it works header */
  .how-ed-header { padding: 40px var(--s3) 0; }
}

/* ── MOBILE (≤760px) ── */
@media (max-width: 760px) {
  /* Use case mockup — taller + lighter border feel */
  .uc-panel-image { aspect-ratio: unset; height: 400px; overflow: hidden; padding: 6px; }
  .browser-mock { height: 100%; border-radius: 12px; }

  /* Mobile frame — address bar style */
  .browser-mock-bar {
    background: #f5f5f7; border-bottom: 1px solid #e0e0e8;
    height: 36px; padding: 0 12px; justify-content: center; gap: 0;
  }
  .browser-mock-dot { display: none; }
  .browser-mock-bar::after {
    content: '🔒 forms.stracforms.com';
    display: flex; align-items: center;
    font-size: 11px; font-weight: 500; color: #555;
    font-family: var(--font-body);
    background: #e8e8ed; border-radius: 6px;
    padding: 4px 12px; width: 100%; justify-content: center;
    letter-spacing: .1px;
  }
  .browser-mock { box-shadow: 0 2px 10px rgba(0,0,0,.12); }

  .how-ed-grid { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .how-ed-col  { height: 290px; }
  /* Anchor labels just above their card instead of floating at col top */
  .how-ed-col--build .how-ed-label,
  .how-ed-col--publish .how-ed-label,
  .how-ed-col--collect .how-ed-label { top: auto; bottom: 218px; left: var(--s3); }
  .how-ed-col--build .how-ed-block   { height: 210px; border-radius: 20px 20px 0 0; }
  .how-ed-col--publish .how-ed-block { height: 210px; left: 0; right: 0; border-radius: 20px 20px 0 0; }
  .how-ed-col--collect .how-ed-block { height: 210px; left: 0; right: 0; border-radius: 20px 20px 0 0; }
  .how-figure { display: none; }
}

/* ── SMALL MOBILE (≤640px) ── */
@media (max-width: 640px) {
  /* Hero CTAs stack */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-headline { font-size: clamp(38px, 9vw, 52px); }

  /* Footer single column */
  .footer-top { grid-template-columns: 1fr; }

  /* Use case tabs — single row with short labels */
  .uc-tabs { width: 100%; flex-wrap: nowrap; }
  .uc-tab { flex: 1; text-align: center; font-size: 13px; padding: 9px 8px; }
  .tab-full { display: none; }
  .tab-short { display: inline; }

  /* Accordion padding */
  .accordion-inner { padding: var(--s8) var(--s3); }

  /* Pricing */
  .pricing-inner { padding-left: var(--s3); padding-right: var(--s3); }
  .pricing-grid { max-width: 100%; }

  /* FAQ / UC / testimonial */
  .faq-inner { padding-left: var(--s3); padding-right: var(--s3); }
  .uc-inner { padding-left: var(--s3); padding-right: var(--s3); }
  .testimonial-inner { padding-left: var(--s3); padding-right: var(--s3); }

  /* Billing annotation: hide on small screens to prevent overflow */
  .billing-annotation { display: none; }

  /* UC annotations: reposition for small screens */
  .uc-annotation.top-right { right: 16px; top: -40px; }
  .uc-annotation-text { font-size: 17px; }

  /* CTA */
  .cta-section { padding: 64px var(--s3) 80px; }
  .cta-headline { letter-spacing: -1px; }
  .cta-bg-text { bottom: 8px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .btn-white, .btn-ghost-light { text-align: center; }

  /* Form mock — single column on mobile */
  .hfm-row.cols-2 { grid-template-columns: 1fr; }
}