/* ==========================================================================
   ZAPPP — Core Design System
   Handcrafted CSS. No frameworks.
   ========================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---- Tokens ---- */
:root{
  /* color */
  --ink-900:#0B1410;
  --ink-700:#22322B;
  --ink-600:#4C5C55;
  --ink-400:#8A968F;

  --green-800:#0E6E38;
  --green-700:#128A46;
  --green-600:#179952;
  --green-500:#1FAA59;
  --green-400:#3ED87F;
  --green-300:#7CEBA8;

  --mint-100:#EAFBF1;
  --mint-050:#F3FCF6;
  --mist:#F7FAF8;
  --paper:#FFFFFF;
  --line:#E3EAE6;
  --line-strong:#CFDAD4;

  --shadow-color: 160 30% 10%;

  /* type */
  --font-display:'Bricolage Grotesque', 'Inter', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* scale */
  --fs-h1: clamp(2.6rem, 5vw + 1rem, 5.2rem);
  --fs-h2: clamp(2.1rem, 3vw + 1rem, 3.4rem);
  --fs-h3: clamp(1.5rem, 1.4vw + 1rem, 2rem);
  --fs-lead: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* layout */
  --container: 1280px;
  --container-narrow: 860px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);

  /* motion */
  --ease-out: cubic-bezier(.16,.8,.24,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .35s;
  --dur-mid: .6s;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
html,body{ height:100%; }
body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; }

/* visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection{ background: var(--green-300); color: var(--ink-900); }

/* ---- Layout primitives ---- */
.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--gutter);
}
.container-narrow{ max-width: var(--container-narrow); }

.section{ padding-block: var(--section-pad); position:relative; }
.section--mist{ background: var(--mist); }
.section--mint{ background: linear-gradient(180deg, var(--mint-050), var(--mint-100)); }
.section--ink{ background: var(--ink-900); color: var(--paper); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--mint-100);
  border: 1px solid var(--line-strong);
  padding: .4rem .8rem;
  border-radius: 999px;
}
.eyebrow::before{
  content:'';
  width:6px; height:6px; border-radius:50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(31,170,89,.18);
}
.section--ink .eyebrow{ background: rgba(62,216,127,.1); color: var(--green-300); border-color: rgba(62,216,127,.25); }

.section-head{
  max-width: 680px;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head.center{ margin-inline:auto; text-align:center; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.section--ink h1, .section--ink h2, .section--ink h3{ color: var(--paper); }

h1{ font-size: var(--fs-h1); font-weight:650; }
h2{ font-size: var(--fs-h2); margin-top:.9rem; }
h3{ font-size: var(--fs-h3); font-weight:600; }

p{ color: var(--ink-600); }
.lead{ font-size: var(--fs-lead); color: var(--ink-600); margin-top: 1.1rem; max-width: 46ch; }
.section-head.center .lead{ margin-inline:auto; }
.section--ink p{ color: rgba(255,255,255,.68); }

.text-gradient{
  background: linear-gradient(100deg, var(--green-700), var(--green-400) 60%, var(--green-600));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--font-body); font-weight:600; font-size: .95rem;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap !important;
}
.btn svg{ width:16px; height:16px; display:inline-block; flex-shrink:0; transition: transform var(--dur-fast) var(--ease-out); }

.btn--primary{
  color:#fff;
  background: linear-gradient(135deg, var(--green-600), var(--green-500) 45%, var(--green-400));
  background-size: 160% 160%;
  background-position: 0% 50%;
  box-shadow: 0 8px 24px -8px rgba(18,138,70,.55), 0 2px 6px rgba(18,138,70,.25);
}
.btn--primary:hover{ transform: translateY(-2px); background-position: 100% 50%; box-shadow: 0 14px 32px -10px rgba(18,138,70,.6); }
.btn--primary:hover svg{ transform: translateX(3px); }
.btn--primary.pulse{ animation: btnPulse 2.6s ease-in-out infinite; }

.btn--ghost{
  color: var(--ink-900);
  background: var(--paper);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover{ transform: translateY(-2px); border-color: var(--green-500); box-shadow: 0 10px 22px -12px rgba(11,20,16,.2); }
.section--ink .btn--ghost{ color:#fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }

.btn--sm{ padding:.65rem 1.2rem; font-size:.85rem; }
.btn-row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }

@keyframes btnPulse{
  0%,100%{ box-shadow: 0 8px 24px -8px rgba(18,138,70,.55), 0 0 0 0 rgba(62,216,127,.35); }
  50%{ box-shadow: 0 8px 28px -6px rgba(18,138,70,.65), 0 0 0 10px rgba(62,216,127,0); }
}

/* ---- Cards ---- */
.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
  position:relative;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px hsl(var(--shadow-color) / .22);
  border-color: var(--line-strong);
}

.card--glass{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 30px 60px -30px hsl(var(--shadow-color) / .35), inset 0 1px 0 rgba(255,255,255,.6);
}

.card-icon{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--mint-100), #fff);
  border: 1px solid var(--line);
  color: var(--green-700);
  margin-bottom: 1.25rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.card:hover .card-icon{ transform: rotate(-6deg) scale(1.06); }
.card-icon svg{ width:22px; height:22px; }

.card h3{ font-size: 1.15rem; margin-bottom:.5rem; margin-top:0; }
.card p{ font-size:.95rem; }

/* magnetic hover target wrapper */
.magnetic{ display:inline-flex; align-items:center; justify-content:center; will-change: transform; }

/* ---- Grids ---- */
.grid{ display:grid; gap: 1.5rem; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.contact-split{ grid-template-columns: 1.1fr .9fr; }

/* ---- Nav ---- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding-block: 1.1rem;
  transition: background var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), padding var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--line);
  padding-block: .7rem;
  box-shadow: 0 8px 30px -20px rgba(11,20,16,.25);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family: var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:-0.01em; }
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, var(--green-600), var(--green-400));
  display:grid; place-items:center; color:#fff;
  box-shadow: 0 6px 16px -6px rgba(18,138,70,.6);
}
.brand-mark svg{ width:18px; height:18px; }

.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  font-size:.92rem; font-weight:500; color: var(--ink-700);
  position:relative; padding-block:.3rem;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--green-500); transition: right var(--dur-fast) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ color: var(--green-700); }

.nav-cta{ display:flex; align-items:center; gap:.8rem; }
.nav-cta .btn {
  border-radius: 6px !important;
  font-weight: 700;
  font-size: 0.86rem;
  padding: 0.55rem 1.05rem;
}
.nav-cta .btn--ghost {
  background: #ffffff !important;
  border: 1px solid #111827 !important;
  color: #0f172a !important;
}
.nav-cta .btn--ghost:hover {
  background: #f8fafc !important;
  border-color: #000000 !important;
}
.nav-cta .btn--primary {
  background: #00d66c !important;
  background-image: linear-gradient(135deg, #00e676, #00c853) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 214, 108, 0.35);
}
.nav-cta .btn--primary:hover {
  background-image: linear-gradient(135deg, #00f27c, #00d66c) !important;
  box-shadow: 0 6px 18px rgba(0, 214, 108, 0.45);
}

.nav-toggle{ display:none; width:40px; height:40px; place-items:center; border-radius:10px; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content:''; display:block; width:20px; height:2px; background:var(--ink-900); border-radius:2px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; }

/* ---- Hero ---- */
.hero{
  padding-top: clamp(5.2rem, 8vw, 6.8rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  position:relative;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(60% 50% at 78% 12%, rgba(62,216,127,.22), transparent 60%),
    radial-gradient(45% 40% at 8% 30%, rgba(31,170,89,.14), transparent 60%),
    var(--paper);
}
.hero-grid-lines{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 55% at 60% 20%, black, transparent 75%);
}
.hero-inner{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.hero-copy{ max-width: 820px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.hero-copy .eyebrow{ margin-bottom: 0.8rem; }
.hero-copy h1{ font-size: clamp(2.2rem, 4.2vw, 3.3rem); line-height: 1.16; margin-bottom: 0.75rem; }
.hero-highlight{ color: var(--green-500); }
.hero-copy .lead{ max-width: 58ch; margin-inline:auto; font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.45; }
.hero-copy .btn-row{ margin-top: 1.25rem; justify-content:center; }
.hero-note{ margin-top:1.25rem; font-size:.85rem; color: var(--ink-400); display:flex; align-items:center; justify-content:center; gap:.5rem; }

.hero-visual{
  position: relative;
  width: 100%;
  height: auto; /* Removed fixed height so image can expand naturally */
  margin-top: 1.25rem;
}

/* ---- Hero: simple screenshot card (drop your own product screenshot in) ---- */
.hero-shot-card{
  position:relative; z-index:2;
  width: min(980px, 92%);
  margin-inline:auto;
  border-radius: var(--radius-xl);
  background: var(--paper);
  border:1px solid var(--line);
  box-shadow: 0 60px 120px -40px rgba(11,20,16,.35), 0 20px 40px -20px rgba(11,20,16,.15);
  overflow:hidden;
  animation: float-y 8s ease-in-out infinite;
}
.hero-shot-card img{ width:100%; height:auto; display:block; }

/* ---- MacBook Laptop Device Mockup ---- */
.macbook-device-wrapper {
  width: min(1040px, 94%);
  margin: 1.25rem auto 0 auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 30px 70px rgba(11, 20, 16, 0.22));
}

.macbook-frame {
  position: relative;
  background: #0d0e12;
  border-radius: 20px;
  padding: 12px;
  border: 2px solid #28292d;
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 25px 60px -15px rgba(11, 20, 16, 0.3);
  overflow: hidden;
}

.macbook-camera-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 16px;
  background: #0d0e12;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.camera-lens {
  width: 6px;
  height: 6px;
  background: #18191e;
  border-radius: 50%;
  border: 1px solid #2e3038;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.9);
}

.macbook-screen {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.macbook-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.macbook-base {
  position: relative;
  width: 108%;
  left: -4%;
  height: 18px;
  background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 45%, #94a3b8 100%);
  border-radius: 2px 2px 14px 14px;
  box-shadow: 
    0 16px 36px -8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.macbook-base-lip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 6px;
  background: #64748b;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

/* floating stat badges around the mockup */
.hero-float-badge{
  position:absolute; z-index:3;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -20px rgba(11,20,16,.3);
  padding: .85rem 1.1rem;
  display:flex; align-items:center; gap:.65rem;
  animation: float-y 6s ease-in-out infinite;
}
.hero-float-badge svg{ width:20px; height:20px; color:var(--green-600); flex:none; }
.hero-float-badge .label{ font-size:.68rem; color:var(--ink-400); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.hero-float-badge .value{ font-size:.92rem; font-weight:700; }

/* trusted-by */
.trusted{ padding-block: clamp(2.5rem,4vw,3.5rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trusted-label{ font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-400); text-align:center; margin-bottom:1.75rem; }
.logo-track{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.logo-row{ display:flex; gap: clamp(2.5rem,6vw,5rem); align-items:center; width:max-content; animation: marquee 28s linear infinite; }
.logo-row span{ font-family: var(--font-display); font-weight:600; font-size:1.25rem; color: var(--ink-400); opacity:.8; white-space:nowrap; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---- Feature list rows (features page) ---- */
.feature-row{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; padding-block: clamp(3.5rem,7vw,6rem); border-bottom:1px solid var(--line); }
.feature-row:last-child{ border-bottom:none; }
.feature-row.reverse{ direction: rtl; }
.feature-row.reverse > *{ direction: ltr; }
.feature-tag{ font-family: var(--font-mono); font-size:.78rem; color: var(--green-700); text-transform:uppercase; letter-spacing:.06em; }
.feature-row h3{ font-size: clamp(1.6rem,2vw,2.1rem); margin-top:.6rem; }
.feature-row p{ margin-top:1rem; max-width: 46ch; }
.feature-list{ margin-top:1.5rem; display:grid; gap:.7rem; }
.feature-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; color: var(--ink-700); }
.feature-list svg{ flex:none; width:18px; height:18px; color:var(--green-600); margin-top:2px; }
.feature-visual{ position:relative; }

/* ---- Pricing ---- */
.pricing-toggle{ display:flex; align-items:center; justify-content:center; gap:1rem; margin: 0 auto 3rem; }
.toggle-switch{ width:52px; height:30px; border-radius:999px; background: var(--line-strong); position:relative; transition: background var(--dur-fast); }
.toggle-switch::after{ content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition: transform var(--dur-fast) var(--ease-out); }
.toggle-switch.is-active{ background: var(--green-500); }
.toggle-switch.is-active::after{ transform: translateX(22px); }
.save-badge{ font-family:var(--font-mono); font-size:.72rem; background:var(--mint-100); color:var(--green-700); padding:.2rem .55rem; border-radius:999px; font-weight:600; }

/* ---- Pricing & Compare Plans ---- */
.pricing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(11, 20, 16, 0.04);
}
.billing-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-500);
  cursor: pointer;
  transition: color var(--dur-fast);
}
.billing-label.is-active {
  color: var(--ink-900);
  font-weight: 700;
}

.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.25rem;
  max-width: 1280px;
  margin: 0 auto;
}

.price-card {
  flex: 1 1 260px;
  max-width: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 2rem 1.6rem;
  position: relative;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(11, 20, 16, 0.12);
}

.price-card--featured {
  border: 2px solid var(--green-500);
  box-shadow: 0 24px 50px -20px rgba(18, 138, 70, 0.25);
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%);
}
.price-card--featured:hover {
  box-shadow: 0 30px 60px -20px rgba(18, 138, 70, 0.35);
}

.badge-popular {
  position: absolute;
  top: -13px;
  right: 1.5rem;
  background: var(--green-500);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px -4px rgba(18, 138, 70, 0.5);
  text-transform: uppercase;
}

.price-card .plan-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
}
.price-card .plan-price {
  margin-top: 0.8rem;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}
.price-card .plan-price .amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1;
}
.price-card .plan-price .period {
  font-size: 0.9rem;
  color: var(--ink-500);
  font-weight: 500;
}
.price-card .plan-desc {
  margin-top: 0.75rem;
  font-size: 0.86rem;
  color: var(--ink-600);
  line-height: 1.45;
  min-height: 2.8em;
}
.price-card .btn {
  margin-top: 1.25rem;
  width: 100%;
  padding: 0.75rem 1.2rem;
  font-size: 0.9rem;
}

.btn--dark {
  background: var(--ink-900);
  color: #ffffff;
  border: 1px solid var(--ink-900);
}

.btn--dark:hover {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(11, 20, 16, 0.3);
}

.price-card .features-head {
  margin-top: 1.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-900);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.price-card .features-list {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.65rem;
  width: 100%;
}
.price-card .features-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--ink-700);
  line-height: 1.35;
}
.price-card .features-list li svg.check-icon {
  width: 16px;
  height: 16px;
  color: var(--green-500);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---- Compare Section & Table ---- */
.compare-section {
  margin-top: 5rem;
}
.compare-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 20px 40px -20px rgba(11, 20, 16, 0.08);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 0.88rem;
}
.compare-table th,
.compare-table td {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.compare-table th:last-child,
.compare-table td:last-child {
  border-right: none;
}
.compare-table thead th {
  background: #f8fafc;
  padding: 1.25rem 1.1rem;
  vertical-align: bottom;
}
.compare-table .feature-col {
  text-align: left;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-900);
  width: 28%;
  padding-left: 1.5rem;
}
.compare-table .plan-col {
  width: 18%;
}
.compare-table .th-plan-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-900);
}
.compare-table .th-plan-price {
  font-size: 0.82rem;
  color: var(--ink-500);
  font-weight: 500;
  margin-top: 0.25rem;
}

.compare-table tr.category-row td {
  background: #f1f9f4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: var(--green-700);
  text-align: left;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.compare-table tr:hover td {
  background: #f8fafc;
}
.compare-table td.feature-name {
  text-align: left;
  font-weight: 500;
  color: var(--ink-800);
  padding-left: 1.5rem;
}
.compare-table td.is-featured,
.compare-table th.is-featured {
  background: rgba(16, 185, 129, 0.05);
}
.compare-table tr:hover td.is-featured {
  background: rgba(16, 185, 129, 0.08);
}
.compare-table .check-icon {
  width: 18px;
  height: 18px;
  color: var(--green-500);
  display: inline-block;
  vertical-align: middle;
}
.compare-table .dash-icon {
  color: var(--ink-300);
  font-weight: 600;
  font-size: 1.1rem;
}

/* ---- FAQ ---- */
.faq-list{ max-width: 760px; margin-inline:auto; display:grid; gap:.85rem; }
.faq-item{ background:var(--paper); border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1.25rem 1.5rem; font-weight:600; }
.faq-q .plus{ width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--mint-100); color:var(--green-700); transition: transform var(--dur-fast) var(--ease-out); }
.faq-item.is-open .faq-q .plus{ transform: rotate(135deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height var(--dur-mid) var(--ease-out); }
.faq-a p{ padding: 0 1.5rem 1.4rem; font-size:.94rem; }

/* ---- Testimonials ---- */
.testi-track{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; }
.testi-card{ display:flex; flex-direction:column; gap:1.25rem; }
.testi-stars{ display:flex; gap:.2rem; color: var(--green-500); }
.testi-stars svg{ width:16px; height:16px; }
.testi-quote{ font-size:1rem; color: var(--ink-700); }
.testi-person{ display:flex; align-items:center; gap:.75rem; margin-top:auto; }
.avatar{ width:40px; height:40px; border-radius:50%; background: linear-gradient(135deg,var(--green-400),var(--green-700)); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.85rem; }
.testi-person .role{ font-size:.8rem; color:var(--ink-400); }

/* ---- Integrations ---- */
.integration-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:1.1rem;
  width:100%;
  max-width:100%;
}
.integration-tile{ aspect-ratio: unset; padding: 1.25rem .75rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; border-radius: var(--radius-md); background:var(--paper); border:1px solid var(--line); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.integration-tile:hover{ transform: translateY(-4px) scale(1.03); box-shadow: 0 16px 30px -16px rgba(11,20,16,.25); border-color: var(--green-400); }
.integration-tile__mark{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.85rem; }
.integration-tile__name{ font-size:.76rem; color:var(--ink-600); text-align:center; font-weight:500; }

/* ---- Final CTA ---- */
.final-cta{
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--ink-900), #0F2318 60%, var(--green-800));
  padding: clamp(3rem,7vw,6rem);
  text-align:center;
  position:relative;
  overflow:hidden;
  color:#fff;
}
.final-cta::before{
  content:''; position:absolute; inset:-40%;
  background: radial-gradient(closest-side, rgba(62,216,127,.35), transparent 70%);
  animation: ctaGlow 8s ease-in-out infinite;
}
@keyframes ctaGlow{ 0%,100%{ transform: translate(-10%,-10%) scale(1); } 50%{ transform: translate(5%,8%) scale(1.15); } }
.final-cta > *{ position:relative; }
.final-cta h2{ color:#fff; }
.final-cta p{ color: rgba(255,255,255,.72); margin-inline:auto; }
.final-cta .btn-row{ justify-content:center; margin-top:2.2rem; }

/* ---- Footer ---- */
.site-footer{ background: var(--ink-900); color: rgba(255,255,255,.7); padding-top: clamp(4rem,7vw,6rem); }
.footer-top{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap:2rem; padding-bottom: 3.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand p{ color: rgba(255,255,255,.55); margin-top:1rem; max-width:32ch; font-size:.9rem; }
.footer-col h4{ font-family: var(--font-body); font-size:.85rem; color:#fff; margin-bottom:1.1rem; letter-spacing:.02em; }
.footer-col ul{ display:grid; gap:.7rem; }
.footer-col a{ font-size:.88rem; color: rgba(255,255,255,.6); transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--green-300); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-block:1.75rem; font-size:.82rem; color: rgba(255,255,255,.45); }
.social-icons{ display:flex; gap:.9rem; }
.social-icons a{ width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background: rgba(255,255,255,.06); transition: background var(--dur-fast), transform var(--dur-fast); }
.social-icons a:hover{ background: var(--green-600); transform: translateY(-3px); }
.social-icons svg{ width:16px; height:16px; }

/* ---- Footer payment badges ---- */
.payment-row{ display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; padding-top: 2rem; }
.payment-row__label{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: rgba(255,255,255,.4); margin-right:.3rem; }
.payment-badge{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.02em;
  padding:.4rem .75rem; border-radius:8px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75);
}

/* ---- Screenshot frame (drop real product screenshots into these) ---- */
.screenshot-frame{
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--paper);
  border:1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(11,20,16,.25);
}
.screenshot-frame__bar{
  display:flex; align-items:center; gap:6px;
  padding:.6rem .8rem;
  background: var(--mist);
  border-bottom:1px solid var(--line);
}
.screenshot-frame__bar span{ width:8px; height:8px; border-radius:50%; background: var(--line-strong); }
.screenshot-frame__bar span:nth-child(1){ background:#EF6355; }
.screenshot-frame__bar span:nth-child(2){ background:#F5BD4F; }
.screenshot-frame__bar span:nth-child(3){ background:#3ED87F; }
.screenshot-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.screenshot-frame--sm .screenshot-frame__bar span{ width:6px; height:6px; }

/* ---- Product tour cards (feature + screenshot grid) ---- */
.tour-card{ display:flex; flex-direction:column; }
.tour-card .screenshot-frame{ margin-bottom:1.25rem; aspect-ratio:16/10; }
.tour-card h3{ font-size:1.05rem; }
.tour-card p{ font-size:.9rem; }

/* ---- misc components ---- */
.badge-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.divider{ height:1px; background:var(--line); width:100%; }
.blog-card img, .blog-card .thumb{ border-radius: var(--radius-md); }
.thumb{ aspect-ratio:16/10; background: linear-gradient(140deg, var(--mint-100), #fff); border:1px solid var(--line); display:grid; place-items:center; color:var(--green-600); overflow:hidden; }

/* ---- Blog ---- */
.blog-featured{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; padding:2.5rem; }
.blog-featured__title{ font-size:clamp(1.6rem,2.4vw,2.2rem); margin-top:1rem; }
.blog-featured__thumb{ height:260px; }
.blog-read-link{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.5rem; font-weight:600; font-size:.92rem; color:var(--green-700); }
.blog-read-link svg{ width:16px; height:16px; transition: transform var(--dur-fast) var(--ease-out); }
.blog-featured:hover .blog-read-link svg{ transform: translateX(4px); }

.blog-categories{ margin:3rem 0 2.5rem; justify-content:center; }
.blog-categories .eyebrow.is-inactive{ background:var(--paper); color:var(--ink-600); border-color:var(--line); }
.blog-categories .eyebrow.is-inactive::before{ background:var(--ink-400); box-shadow:none; }

.blog-layout{ display:grid; grid-template-columns:2.2fr 1fr; gap:2.5rem; align-items:start; }
.blog-card p{ color:var(--ink-600); }

.blog-post-head, .blog-post-body {
  max-width: 860px;
  margin-inline: auto;
  width: 100%;
}
.blog-post-body{
  margin-top: 2.25rem;
  display: grid;
  gap: 1.4rem;
}
.blog-post-body p{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink-700);
  max-width:100%;
}

.blog-post-head{ text-align:center; }
.blog-post-back{ display:inline-flex; align-items:center; gap:.4rem; margin-bottom:1.75rem; }
.blog-post-head h1{ max-width:26ch; margin-inline:auto; }
.blog-post-meta{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin-top:1.75rem; text-align:left; }

/* reveal-on-scroll base state (JS adds .is-visible) */
[data-reveal]{ opacity:0; transform: translateY(28px); }
[data-reveal].is-visible{ opacity:1; transform:none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:.75rem 1.25rem; z-index:1000; border-radius:0 0 10px 0; }
.skip-link:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---- Video Showcase Section ---- */
.video-section {
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}
.video-card-banner {
  background: linear-gradient(150deg, #edfbf3 0%, #dbf6e6 50%, #cbf2dd 100%);
  border: 1px solid rgba(62, 216, 127, 0.35);
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -25px rgba(18, 138, 70, 0.18);
}
.video-card-head h2 {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
  color: var(--ink-900);
}
.video-card-head .lead {
  max-width: 600px;
  margin-inline: auto;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  color: var(--ink-700);
}

.video-player-frame {
  max-width: 940px;
  margin: 2.2rem auto 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 30px 70px -20px rgba(11, 20, 16, 0.28);
  border: 4px solid rgba(255, 255, 255, 0.85);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid);
}
.video-player-frame:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 40px 90px -20px rgba(18, 138, 70, 0.32);
}

.video-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0f172a;
}
.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.15), rgba(15, 23, 42, 0.45));
  transition: background var(--dur-fast);
}
.video-player-frame:hover .video-overlay {
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.35));
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--green-600);
  border: none;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-mid) var(--ease-out), background var(--dur-fast);
  z-index: 5;
  cursor: pointer;
}
.video-play-btn svg {
  width: 34px;
  height: 34px;
  margin-left: 4px;
}
.video-player-frame:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  background: #ffffff;
  color: var(--green-500);
}
.play-pulse {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  animation: playPulse 2.4s ease-in-out infinite;
}
@keyframes playPulse {
  0% { transform: scale(0.95); opacity: 0.9; }
  50% { transform: scale(1.25); opacity: 0.35; }
  100% { transform: scale(1.4); opacity: 0; }
}

.video-badge-pill {
  position: absolute;
  bottom: 1.2rem;
  right: 1.5rem;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  z-index: 5;
}
.video-badge-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-400);
}

/* Modal Popup */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.video-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 20, 16, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.video-modal-content {
  position: relative;
  width: min(960px, 92%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  z-index: 2;
}
.video-modal-close {
  position: absolute;
  top: -45px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
  line-height: 1;
}
.video-modal-body {
  width: 100%;
  height: 100%;
}
.video-modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   LEGAL / CONTENT PAGES (Privacy Policy, Terms, etc.)
   ============================================================ */
.legal-content {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 820px; /* optional, keeps lines readable */
}
.legal-content p {
  margin-bottom: 1rem;
  color: var(--ink-700);
}
.legal-content h2 {
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 650;
  color: var(--ink-900);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.legal-content h3 {
  font-size: clamp(1.1rem, 1.2vw, 1.3rem);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--ink-900);
}
.legal-content ul,
.legal-content ol {
  list-style: revert;
  padding-left: 1.5rem;
  margin: 0.75rem 0 1.25rem 0;
}
.legal-content li {
  margin-bottom: 0.35rem;
  color: var(--ink-700);
}
.legal-content a {
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line-strong);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.legal-content a:hover {
  color: var(--green-800);
  text-decoration-color: var(--green-400);
}