/* =====================================================================
   STUDIOLY — Landing page (go.designa.work)
   Design language: docs/FLEXIO-SPEC.md — Clash Grotesk 500 everywhere,
   cream page, beige bands, ink dark bands, orange primary, teal/butter/royal
   accent shapes, stadium (99px) buttons, 6px rectangle chips, orange octagon
   checks, 24/20/12px image radii, giant-wordmark footer.
   Self-contained: no build step, no framework. Edit freely.
   ===================================================================== */

/* ---- Tokens (measured, spec §1) ---- */
:root {
  --cream: #FAF6F2;
  --beige: #E8E2DD;
  --beige-dark: #DDD5CE;
  --ink: #0F0C09;
  --ink-70: rgba(15, 12, 9, 0.70);
  --ink-60: rgba(15, 12, 9, 0.60);
  --ink-50: rgba(15, 12, 9, 0.50);
  --ink-10: rgba(15, 12, 9, 0.10);
  --accent: #FA5B16;
  --accent-hover: #E04E0E;
  --accent-soft: #FCE6DA;
  --teal: #8FC4B0;
  --teal-ink: #10453A;
  --butter: #F5DFA4;
  --royal: #3A5BE0;
  --royal-soft: #E4E9FF;
  --white: #FFFFFF;

  --wrap: 1152px;      /* max-w-6xl */
  --wrap-wide: 1400px;
  --pill: 99px;

  --font: "Clash Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-weight: 500;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---- Layout helpers ---- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: var(--wrap-wide); }
.section { padding: 56px 0; }
.section--band { background: var(--beige); }
.section--dark { background: var(--ink); color: var(--white); }
@media (min-width: 768px) { .section { padding: 96px 0; } .wrap { padding: 0 24px; } }

/* ---- Typography ---- */
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; }
.h1 { font-size: clamp(38px, 8.5vw, 68px); line-height: 1.0; }
.h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; }
.h3 { font-size: clamp(26px, 4vw, 40px); line-height: 1.1; }
.lead { font-size: 16px; line-height: 26px; color: var(--ink-70); font-weight: 500; }
.section--dark .lead { color: rgba(255,255,255,0.7); }
.muted { color: var(--ink-60); }
.center { text-align: center; }
.eyebrow-space { margin-top: 20px; }

/* ---- Chip (section eyebrow) — 6px rectangle, NOT stadium (spec §4) ---- */
.chip {
  display: inline-block; border-radius: 6px; padding: 6px 12px;
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--accent); color: var(--white);
}
.chip--on-dark { background: var(--cream); color: var(--accent); }
.chip--soft { background: var(--accent-soft); color: var(--accent); }

/* ---- Buttons — stadium pills, radius 99px (spec §3) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--pill); padding: 14px 28px; font-size: 15px; font-weight: 500;
  transition: background-color .15s ease, color .15s ease, transform .09s cubic-bezier(.2,0,0,1);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--beige); color: var(--ink); }
.btn--secondary:hover { background: var(--beige-dark); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--cream); }
.btn--ghost-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.btn--ghost-dark:hover { background: rgba(255,255,255,0.08); }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 34px; font-size: 16px; }

/* ---- Orange octagon check (spec §7.3) ---- */
.octa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; background: var(--accent); color: #fff;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.octa svg { width: 11px; height: 11px; }
.octa--sm { width: 18px; height: 18px; }
.octa--sm svg { width: 9px; height: 9px; }

/* ---- Check rows ---- */
.checks { display: grid; gap: 12px; }
.check { display: flex; align-items: flex-start; gap: 12px; }
.check p { font-size: 15px; line-height: 1.5; }
.check b { font-weight: 600; }
.check .desc { color: var(--ink-60); }
.section--dark .check p { color: rgba(255,255,255,0.85); }
.section--dark .check .desc { color: rgba(255,255,255,0.55); }

/* =====================================================================
   TOP ANNOUNCEMENT BAR + countdown
   ===================================================================== */
.topbar {
  background: var(--ink); color: var(--cream);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px 16px; text-align: center; flex-wrap: wrap;
}
.topbar strong { color: var(--butter); font-weight: 600; }
.topbar .cd { display: inline-flex; align-items: center; gap: 6px; }
.cd-unit {
  background: rgba(255,255,255,0.10); border-radius: 6px; padding: 3px 7px;
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; color: #fff;
}
.cd-sep { opacity: 0.4; }
.cd-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; margin-left: 2px; }

/* =====================================================================
   HEADER — floating pill nav (spec §6)
   ===================================================================== */
.header { position: sticky; top: 12px; z-index: 50; padding: 0 16px; }
@media (min-width: 768px) { .header { top: 16px; padding: 0 24px; } }
.navbar {
  display: flex; align-items: center; height: 64px; width: 100%;
  background: var(--beige); border-radius: var(--pill);
  padding: 6px 6px 6px 24px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__word { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }

/* Logo mark — two stacked semicircles, orange over black (spec §6) */
.mark { display: flex; flex-direction: column; width: 32px; height: 32px; }
.mark span { display: block; width: 100%; height: 50%; }
.mark span:first-child { background: var(--accent); border-radius: 999px 999px 0 0; }
.mark span:last-child { background: var(--ink); border-radius: 0 0 999px 999px; }

.nav-links { display: none; align-items: center; gap: 32px; margin-left: 40px; }
.nav-links a { font-size: 15px; font-weight: 500; transition: color .12s; }
.nav-links a:hover { color: var(--ink-60); }
.nav-right { display: none; align-items: center; gap: 20px; margin-left: auto; }
.nav-right .login { font-size: 15px; font-weight: 500; }
.nav-right .login:hover { color: var(--ink-60); }
.nav-cta {
  display: inline-flex; align-items: center; height: 52px; padding: 0 28px;
  background: var(--accent); color: #fff; border-radius: var(--pill);
  font-size: 15px; font-weight: 500; transition: background-color .15s;
}
.nav-cta:hover { background: var(--accent-hover); }
.hamburger { margin-left: auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
@media (min-width: 1024px) {
  .nav-links, .nav-right { display: flex; }
  .hamburger { display: none; }
}
.mobile-menu { display: none; margin-top: 8px; background: var(--beige); border-radius: 24px; padding: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 12px 16px; font-size: 16px; font-weight: 500; border-radius: 16px; }
.mobile-menu a:hover { background: rgba(0,0,0,0.05); }
.mobile-menu .mm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* =====================================================================
   HERO (spec §7.1)
   ===================================================================== */
.hero { padding-top: 48px; }
@media (min-width: 768px) { .hero { padding-top: 72px; } }
.hero h1 { max-width: 900px; }
.hero .lead { margin-top: 24px; max-width: 560px; }
.hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-micro { margin-top: 16px; font-size: 14px; color: var(--ink-50); font-weight: 500; }

.hero-checks { margin-top: 28px; display: grid; grid-template-columns: 1fr; gap: 12px 28px; max-width: 640px; }
@media (min-width: 560px) { .hero-checks { grid-template-columns: 1fr 1fr; } }
.hero-checks .check p { font-size: 14.5px; color: var(--ink); }

/* "Replaces" competitor row */
.replaces { margin-top: 34px; }
.replaces__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-50); font-weight: 600; }
.replaces__row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.replaces__row span {
  font-size: 14px; font-weight: 500; color: var(--ink-60);
  background: var(--white); border: 1px solid var(--ink-10);
  padding: 7px 14px; border-radius: var(--pill); position: relative;
}
.replaces__row span::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 50%;
  height: 1.5px; background: var(--accent); opacity: 0.7; transform: rotate(-4deg);
}

/* Hero shape marquee band (spec §7.1) */
.marquee { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; margin-top: 48px; overflow: hidden; }
@media (min-width: 768px) { .marquee { margin-top: 64px; } }
.marquee-track { display: flex; width: max-content; align-items: flex-end; height: 200px; animation: marquee 45s linear infinite; }
@media (min-width: 768px) { .marquee-track { height: 340px; } }
.marquee-track > * { flex-shrink: 0; height: 100%; }
.m-arch { width: 160px; overflow: hidden; border-radius: 999px 999px 0 0; }
.m-circle { width: 160px; aspect-ratio: 1; height: auto; align-self: flex-end; overflow: hidden; border-radius: 999px; }
.m-rect { width: 64px; }
.m-rect--accent { background: var(--accent); }
.m-rect--butter { background: var(--butter); }
.m-teal { width: 160px; background: var(--teal); border-radius: 999px 999px 0 0; }
.marquee img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .m-arch, .m-circle, .m-teal { width: 320px; }
  .m-rect { width: 96px; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   STATS band
   ===================================================================== */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; text-align: center; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-size: clamp(36px, 6vw, 52px); font-weight: 500; line-height: 1; color: var(--accent); }
.section--dark .stat__num { color: var(--butter); }
.stat__label { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--ink-60); }
.section--dark .stat__label { color: rgba(255,255,255,0.6); }

/* =====================================================================
   PERSONAS
   ===================================================================== */
.persona-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .persona-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .persona-grid { grid-template-columns: repeat(4, 1fr); } }
.persona {
  background: var(--white); border-radius: 20px; padding: 26px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); height: 100%;
}
.section--dark .persona { background: rgba(255,255,255,0.06); box-shadow: none; }
.persona__ic { width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 18px; }
.persona h3 { font-size: 19px; }
.persona p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink-60); }
.section--dark .persona h3 { color: #fff; }
.section--dark .persona p { color: rgba(255,255,255,0.6); }

/* =====================================================================
   NUMBERED FEATURE DEEP-DIVE
   ===================================================================== */
.feat { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .feat { grid-template-columns: 1fr 1fr; gap: 64px; } .feat + .feat { margin-top: 96px; } }
.feat + .feat { margin-top: 56px; }
.feat--flip .feat__media { order: -1; }
@media (min-width: 900px) { .feat--flip .feat__media { order: 2; } }
.feat__num { font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; }
.feat h3 { margin-top: 10px; font-size: clamp(26px, 3.6vw, 40px); }
.feat__body { margin-top: 16px; }
.feat .checks { margin-top: 22px; }
.feat__media { position: relative; }
.feat__img { border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; }
.feat__img img { width: 100%; height: 100%; object-fit: cover; }
/* floating stat badge on media */
.feat__badge {
  position: absolute; background: var(--white); border-radius: 16px; padding: 14px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.14); display: flex; align-items: center; gap: 12px;
}
.feat__badge--tr { top: 18px; right: -8px; }
.feat__badge--bl { bottom: 18px; left: -8px; }
.feat__badge .big { font-size: 24px; font-weight: 600; color: var(--accent); line-height: 1; }
.feat__badge .cap { font-size: 12px; color: var(--ink-60); font-weight: 500; }
.pill-tag {
  position: absolute; border-radius: var(--pill); padding: 8px 16px; font-size: 12px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}
.pill-tag--accent { background: var(--accent); color: #fff; }
.pill-tag--teal { background: var(--teal); color: var(--teal-ink); }
.pill-tag--royal { background: var(--royal); color: #fff; }

/* benefit strip */
.benefits { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefit { display: flex; align-items: center; gap: 14px; background: var(--beige); border-radius: 20px; padding: 20px 22px; }
.benefit .octa { width: 26px; height: 26px; }
.benefit p { font-size: 16px; font-weight: 600; }

/* =====================================================================
   FEATURE CARD GRID (photo cards, spec §7.4)
   ===================================================================== */
.cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.pcard { position: relative; display: block; border-radius: 20px; overflow: hidden; background: var(--ink); aspect-ratio: 3/4; max-height: 480px; }
.pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.95; transition: transform .5s ease; }
.pcard:hover img { transform: scale(1.05); }
.pcard__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.25) 45%, transparent); }
.pcard__plus { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.2); backdrop-filter: blur(6px); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.pcard__body { position: absolute; bottom: 0; left: 0; padding: 20px; color: #fff; }
.pcard__body h3 { font-size: 20px; }
.pcard__body p { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,0.78); }

/* =====================================================================
   COMPARISON TABLE
   ===================================================================== */
.cmp { overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--ink-10); background: var(--white); }
.cmp table { width: 100%; border-collapse: collapse; min-width: 680px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: center; font-size: 14.5px; }
.cmp thead th { font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--ink-10); }
.cmp thead th.cap { text-align: left; color: var(--ink-60); }
.cmp thead th.us { background: var(--ink); color: #fff; border-radius: 14px 14px 0 0; }
.cmp tbody td.cap { text-align: left; font-weight: 500; color: var(--ink); }
.cmp tbody td.us { background: rgba(250,91,22,0.06); font-weight: 600; }
.cmp tbody tr + tr td { border-top: 1px solid var(--ink-10); }
.cmp .yes { color: var(--accent); }
.cmp .no { color: var(--ink-50); }
.cmp .varies { color: var(--ink-50); font-size: 13px; }
.cmp .yes svg, .cmp .no svg { width: 20px; height: 20px; }
.cmp__note { margin-top: 16px; font-size: 12.5px; color: var(--ink-50); max-width: 820px; line-height: 1.6; }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.tcards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .tcards { grid-template-columns: repeat(3, 1fr); } }
.tcard { background: var(--white); border-radius: 20px; padding: 26px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.tcard .stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; }
.tcard p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.tcard__who { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.tcard__who img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; }
.tcard__who .n { font-size: 14px; font-weight: 600; }
.tcard__who .r { font-size: 13px; color: var(--ink-60); }
.tbig { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.tbig p { font-size: clamp(22px, 3vw, 30px); font-weight: 500; line-height: 1.4; }

/* =====================================================================
   PRICING (single flat launch offer)
   ===================================================================== */
.price-wrap { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
@media (min-width: 900px) { .price-wrap { grid-template-columns: 1.15fr 0.85fr; } }
.price-card { background: var(--ink); color: #fff; border-radius: 24px; padding: 34px; position: relative; overflow: hidden; }
.price-card__flag { position: absolute; top: 22px; right: 22px; }
.price-card h3 { font-size: 22px; }
.price-list { margin-top: 22px; display: grid; gap: 12px; }
.price-list .check p { color: rgba(255,255,255,0.9); font-size: 15px; }
.price-amt { margin-top: 26px; display: flex; align-items: flex-end; gap: 10px; }
.price-amt .amt { font-size: 56px; font-weight: 600; line-height: 0.9; }
.price-amt .gst { font-size: 15px; color: rgba(255,255,255,0.65); padding-bottom: 6px; }
.price-amt .was { font-size: 18px; color: rgba(255,255,255,0.45); text-decoration: line-through; padding-bottom: 8px; }
.price-sub { margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,0.6); }
.price-card .btn { margin-top: 24px; }
.price-secure { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,0.55); text-align: center; }

.price-aside { background: var(--beige); border-radius: 24px; padding: 30px; display: flex; flex-direction: column; }
.price-aside h4 { font-size: 20px; }
.price-aside p { margin-top: 10px; font-size: 15px; color: var(--ink-70); line-height: 1.55; }
.price-aside .btn { margin-top: auto; }
.price-aside .demo-link { margin-top: 18px; margin-bottom: 18px; }

/* =====================================================================
   FAQ accordion
   ===================================================================== */
.faq { max-width: 800px; margin: 0 auto; border-bottom: 1px solid var(--ink-10); }
.faq__item { border-top: 1px solid var(--ink-10); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 22px 4px; font-size: 18px; font-weight: 500; }
.faq__q .ic { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform .2s ease; }
.faq__item.open .faq__q .ic { transform: rotate(45deg); }
/* Height animated via grid-template-rows 0fr→1fr (GPU-friendly, no layout thrash) */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 4px 22px; font-size: 15px; line-height: 1.6; color: var(--ink-70); max-width: 680px; }

/* =====================================================================
   VALUE STACK
   ===================================================================== */
.stack { max-width: 760px; margin: 0 auto; background: var(--white); border-radius: 24px; padding: 30px; box-shadow: inset 0 0 0 1px var(--ink-10); }
.stack__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--ink-10); }
.stack__row:first-child { border-top: none; }
.stack__row .txt { display: flex; align-items: flex-start; gap: 12px; }
.stack__row .txt p { font-size: 15px; line-height: 1.45; }
.stack__row .bonus { display: inline-block; margin-left: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--royal-soft); color: var(--royal); padding: 2px 7px; border-radius: 4px; font-weight: 600; vertical-align: middle; }
.stack__row .val { font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--ink-60); }
.stack__total { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 18px; border-top: 2px solid var(--ink); }
.stack__total .l { font-size: 16px; font-weight: 600; }
.stack__total .v { font-size: 20px; font-weight: 600; text-decoration: line-through; color: var(--ink-50); }
.stack__today { margin-top: 22px; text-align: center; background: var(--cream); border-radius: 18px; padding: 24px; }
.stack__today .k { font-size: 14px; color: var(--ink-60); font-weight: 500; }
.stack__today .amt { font-size: 52px; font-weight: 600; line-height: 1; color: var(--accent); margin-top: 6px; }
.stack__today .gst { font-size: 16px; color: var(--ink-60); }
.stack__today .note { margin-top: 8px; font-size: 13.5px; color: var(--ink-60); }
.stack__today .btn { margin-top: 20px; }

/* =====================================================================
   GUARANTEE
   ===================================================================== */
.guarantee { max-width: 760px; margin: 0 auto; text-align: center; }
.guarantee__seal { width: 96px; height: 96px; margin: 0 auto 24px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(250,91,22,0.06); }
.guarantee__seal svg { width: 44px; height: 44px; }
.guarantee p { margin-top: 18px; }
.guarantee .em { color: var(--accent); font-weight: 600; }

/* =====================================================================
   FINAL CTA (dark) + shapes strip (spec §7.10)
   ===================================================================== */
.finalcta { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 88px 0 176px; text-align: center; }
@media (min-width: 768px) { .finalcta { padding: 112px 0 220px; } }
.finalcta h2 { max-width: 780px; margin: 22px auto 0; }
.finalcta .lead { max-width: 520px; margin: 20px auto 0; }
.finalcta .cta-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.shapes { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; gap: 12px; overflow: hidden; pointer-events: none; }
.shapes > * { flex-shrink: 0; }
.s-semic { width: 112px; height: 56px; background: var(--butter); border-radius: 999px 999px 0 0; }
.s-bar { width: 24px; background: var(--accent); border-radius: 999px 999px 0 0; }
.s-circle-img { width: 88px; height: 88px; transform: translateY(30%); border-radius: 999px; overflow: hidden; }
.s-circle-img img { width: 100%; height: 100%; object-fit: cover; }
.s-royal { width: 72px; height: 72px; transform: translateY(25%); background: var(--royal); border-radius: 999px; }
.s-teal { width: 72px; height: 72px; background: var(--teal); border-radius: 999px 0 0 0; }
@media (min-width: 768px) {
  .s-semic { width: 128px; height: 64px; }
  .s-circle-img { width: 112px; height: 112px; }
  .s-royal { width: 96px; height: 96px; }
  .s-teal { width: 80px; height: 80px; }
}
.s-hide-sm { display: none; }
@media (min-width: 768px) { .s-hide-sm { display: block; } }

/* =====================================================================
   FOOTER — cream sheet with rounded top overlapping dark band (spec §7.11)
   ===================================================================== */
.footer { position: relative; z-index: 10; margin-top: -28px; border-radius: 28px 28px 0 0; background: var(--cream); padding: 56px 0 24px; }
.footer__top { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .footer__top { grid-template-columns: 2fr 1fr 1fr; gap: 32px; } }
.footer__email .k { font-size: 14px; color: var(--ink-50); font-weight: 500; }
.footer__email .big { display: inline-block; margin-top: 8px; font-size: clamp(22px, 3.5vw, 32px); font-weight: 500; transition: color .12s; }
.footer__email .big:hover { color: var(--accent); }
.footer__email .copy { margin-top: 22px; font-size: 14px; color: var(--ink-50); }
.footer__legal { margin-top: 8px; display: flex; gap: 20px; }
.footer__legal a { font-size: 14px; color: var(--ink-60); }
.footer__legal a:hover { color: var(--ink); }
.footer__col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-50); font-weight: 500; }
.footer__col ul { margin-top: 16px; display: grid; gap: 10px; }
.footer__col a { font-size: 15px; color: rgba(15,12,9,0.8); }
.footer__col a:hover { color: var(--accent); }
.footer__word { margin-top: 48px; display: flex; align-items: flex-end; gap: 12px; overflow: hidden; }
.footer__word .mark { width: 64px; height: 64px; margin-bottom: 2vw; }
.footer__word .w { white-space: nowrap; font-size: 16vw; font-weight: 500; line-height: 0.8; letter-spacing: -0.03em; }
@media (min-width: 768px) { .footer__word .mark { width: 130px; height: 130px; } .footer__word .w { font-size: 18vw; } }
.footer__made { margin-top: 24px; font-size: 13px; color: var(--ink-50); text-align: center; }

/* =====================================================================
   STICKY BOTTOM BAR
   ===================================================================== */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--ink); color: #fff;
  transform: translateY(120%); transition: transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
}
.sticky-bar.show { transform: translateY(0); }
.sticky-bar__in { max-width: var(--wrap-wide); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
.sticky-bar .info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.sticky-bar .cd-mini { font-size: 13px; font-weight: 600; color: var(--butter); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sticky-bar .price { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-bar .price b { color: #fff; font-weight: 600; }
.sticky-bar .btn { flex-shrink: 0; }
@media (max-width: 560px) { .sticky-bar .price .detail { display: none; } }

/* =====================================================================
   EXIT-INTENT POPUP
   ===================================================================== */
.overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(15,12,9,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.overlay.show { opacity: 1; visibility: visible; }
.popup {
  position: relative; width: 100%; max-width: 460px; background: var(--cream);
  border-radius: 28px; padding: 36px 30px; text-align: center;
  transform: scale(0.96); transition: transform .22s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.overlay.show .popup { transform: scale(1); }
.popup__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 999px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; }
.popup__close:hover { background: rgba(0,0,0,0.1); }
.popup .chip { margin-bottom: 18px; }
.popup h3 { font-size: 28px; line-height: 1.1; }
.popup p { margin-top: 12px; font-size: 15px; color: var(--ink-70); }
.popup form { margin-top: 22px; display: grid; gap: 10px; }
.popup input {
  width: 100%; padding: 14px 18px; border-radius: var(--pill); font-size: 15px; font-family: inherit;
  background: var(--white); border: 1px solid var(--ink-10); outline: none;
}
.popup input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.popup__fine { margin-top: 14px; font-size: 12.5px; color: var(--ink-50); }
.popup__decline { margin-top: 8px; font-size: 13px; color: var(--ink-50); text-decoration: underline; }

/* =====================================================================
   Scroll reveal
   ===================================================================== */
/* Hidden state only applies when JS is running (.has-js on <html>) — if the
   script never loads, all content stays fully visible instead of blank. */
.has-js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.stagger.in > * { animation: fadeUp .7s cubic-bezier(.16,1,.3,1) both; }
.stagger.in > *:nth-child(1) { animation-delay: 0ms; }
.stagger.in > *:nth-child(2) { animation-delay: 80ms; }
.stagger.in > *:nth-child(3) { animation-delay: 160ms; }
.stagger.in > *:nth-child(4) { animation-delay: 240ms; }
.stagger.in > *:nth-child(5) { animation-delay: 320ms; }
.stagger.in > *:nth-child(6) { animation-delay: 400ms; }
.stagger.in > *:nth-child(7) { animation-delay: 480ms; }
.stagger.in > *:nth-child(8) { animation-delay: 560ms; }
.stagger.in > *:nth-child(9) { animation-delay: 640ms; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
}

/* small utilities */
.mt-sm { margin-top: 14px; }
.mt-md { margin-top: 28px; }
.head { max-width: 640px; }
.head--center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.head .h2 { margin-top: 20px; }
.head .lead { margin-top: 16px; }
.divider-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.divider-cta .small { font-size: 13px; color: var(--ink-50); font-weight: 500; }
.section--dark .divider-cta .small { color: rgba(255,255,255,0.5); }

/* =====================================================================
   LANDING v2 — logo-only nav, centered sections, coded UI mockups
   (appended; later rules win over the base above)
   ===================================================================== */

/* Nav: logo left, two actions right, always visible */
.nav-right { display: flex !important; align-items: center; gap: 16px; margin-left: auto; }
@media (max-width: 560px) { .nav-right .login { display: none; } .navbar { padding-left: 16px; } .nav-cta { height: 46px; padding: 0 20px; } }

/* Hero centered */
.hero--center .wrap { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero--center h1 { margin-left: auto; margin-right: auto; }
.hero--center .lead { margin-left: auto; margin-right: auto; }
.hero--center .hero-checks { margin-left: auto; margin-right: auto; text-align: left; }
.hero--center .hero-cta { justify-content: center; }
.hero--center .replaces { margin-left: auto; margin-right: auto; }
.hero--center .replaces__label { text-align: center; }
.hero--center .replaces__row { justify-content: center; }

/* Replaces chips: original icon + struck-through label */
.replaces__row span { display: inline-flex; align-items: center; gap: 7px; }
.replaces__row span::after { content: none !important; }
.rep-ic { width: 15px; height: 15px; color: var(--ink-50); flex-shrink: 0; }
.rep-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.replaces__row s { text-decoration-thickness: 1.5px; text-decoration-color: var(--accent); }

/* Personas centered */
.persona-grid--center .persona { text-align: center; }
.persona-grid--center .persona__ic { margin-left: auto; margin-right: auto; }
.benefits--center { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ---- Coded UI mockup frame (replaces feature photos) ---- */
.ui { border-radius: 22px; overflow: hidden; background: var(--white); box-shadow: 0 30px 70px rgba(15,12,9,0.14), inset 0 0 0 1px var(--ink-10); }
.ui__bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; background: var(--beige); border-bottom: 1px solid var(--ink-10); }
.ui__dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(15,12,9,0.18); }
.ui__title { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-60); }
.ui__bar--brand { background: var(--ink); }
.ui__bar--brand .ui__title { color: rgba(255,255,255,0.75); margin-left: 0; }
.ui__logo { width: 20px; height: 20px; border-radius: 6px; background: var(--accent); position: relative; }
.ui__logo::after { content: ""; position: absolute; inset: 5px; border-radius: 999px 999px 0 0; background: #fff; opacity: .9; }
.ui__body { padding: 18px; min-height: 250px; }

/* Kanban */
.ui-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kcol__h { display: flex; justify-content: space-between; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-50); font-weight: 700; margin-bottom: 8px; }
.kcol__h em { font-style: normal; color: var(--accent); }
.kcard { background: var(--cream); border: 1px solid var(--ink-10); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; }
.kcard b { display: block; font-size: 12px; }
.kcard--won { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ktag { display: inline-block; margin-top: 6px; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.ktag--a { background: var(--accent-soft); color: var(--accent); }
.ktag--t { background: #E6F4EF; color: var(--teal-ink); }
.ktag--b { background: var(--royal-soft); color: var(--royal); }
.ktag--g { background: #E3F5EA; color: #1F9D55; }

/* Spec table */
.ui-table .trow { display: grid; grid-template-columns: 1fr 34px 92px; gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--ink-10); font-size: 12.5px; }
.ui-table .trow:first-child { border-top: none; }
.ui-table .trow span:first-child { display: flex; align-items: center; gap: 8px; }
.ui-table .trow span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.trow--h { color: var(--ink-50); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.trow--total { border-top: 2px solid var(--ink); font-weight: 700; }
.trow--total span:last-child { color: var(--accent); }
.sw { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }

/* Mood board */
.ui-board { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: repeat(2, 78px); gap: 8px; grid-template-areas: "a b d" "a c e"; background: var(--cream); border-radius: 12px; padding: 12px; }
.bd { border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 3px 8px rgba(15,12,9,0.10); }
.bd--sw span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.28); color: #fff; font-size: 9px; font-weight: 600; padding: 3px 6px; }
.bd--note { background: #FFE58A; color: var(--ink); font-size: 11px; font-weight: 500; padding: 8px; box-shadow: 0 3px 8px rgba(15,12,9,0.12); }

/* Quotation / invoice */
.ui-quote .qh { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ink-10); }
.qh__k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-50); margin-bottom: 2px; }
.qh b { font-size: 13px; }
.qbadge { font-size: 10px; font-weight: 600; color: var(--ink-60); background: var(--beige); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.qrow { display: grid; grid-template-columns: 1fr auto 40px; gap: 12px; padding: 8px 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.qrow--h { color: var(--ink-50); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.qtot { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; padding-top: 12px; border-top: 2px solid var(--ink); }
.qtot span { display: block; font-size: 10px; color: var(--ink-50); }
.qtot b { font-size: 14px; }
.qgrand { color: var(--accent); }

/* Procurement */
.poflow { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.poflow i { flex: 1; height: 2px; background: var(--ink-10); }
.postep { font-size: 10px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: var(--ink-10); color: var(--ink-60); }
.postep--done { background: var(--accent); color: #fff; }
.postep--now { background: var(--butter); color: var(--ink); }
.porow { display: grid; grid-template-columns: 1fr auto 92px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--ink-10); font-size: 12px; }
.porow b { text-align: right; font-variant-numeric: tabular-nums; }
.pstat { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pstat--ok { background: #E3F5EA; color: #1F9D55; }
.pstat--wait { background: #FBEFD6; color: #C78A12; }

/* Client portal */
.ui-portal .pv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv__img { aspect-ratio: 1; border-radius: 10px; }
.pv__row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12.5px; font-weight: 600; }
.pv__ts { font-size: 10.5px; font-weight: 500; color: var(--ink-50); }
.pv__cta { display: flex; gap: 8px; margin-top: 12px; }
.pbtn { font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 999px; background: var(--beige); color: var(--ink); }
.pbtn--primary { background: var(--accent); color: #fff; }

/* ---- Feature card grid → light coded-UI cards ---- */
.pcard { position: relative; display: block; border-radius: 20px; overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1px var(--ink-10); aspect-ratio: auto; max-height: none; }
.pcard__ui { height: 148px; padding: 16px; background: var(--cream); border-bottom: 1px solid var(--ink-10); display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pcard__body { position: static; padding: 18px 20px; color: var(--ink); }
.pcard__body h3 { font-size: 18px; }
.pcard__body p { margin-top: 6px; font-size: 13.5px; color: var(--ink-60); }
.mini-chip { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--ink-10); color: var(--ink-60); }
.mini-chip--a { background: var(--accent); color: #fff; }
.mini-bar { display: block; height: 8px; border-radius: 999px; background: rgba(15,12,9,0.12); }
.mini-row { display: flex; align-items: center; gap: 8px; }
.mini-row b { margin-left: auto; font-size: 11px; }
.mini-row .mini-bar { flex: 1; }
.mini-doc { display: flex; flex-direction: column; gap: 7px; }
.mini-total { align-self: flex-end; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--accent); }
.pcard__ui--board { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; height: 148px; align-content: center; }
.mtile { height: 46px; border-radius: 8px; box-shadow: 0 2px 6px rgba(15,12,9,0.08); }
.mtile--note { background: #FFE58A; color: var(--ink); font-size: 10px; font-weight: 600; padding: 6px; display: flex; align-items: flex-end; }
.mini-flow { display: flex; gap: 5px; }
.mini-cta { display: flex; gap: 6px; }
.mini-cta .pbtn { font-size: 10.5px; padding: 6px 12px; }
.pcard__ui--portal .mtile { height: 70px; }
.mini-inv { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pcard__ui--sync { flex-direction: row; align-items: center; justify-content: center; gap: 6px; }
.mini-node { font-size: 11px; font-weight: 700; padding: 7px 11px; border-radius: 8px; background: var(--accent); color: #fff; }
.mini-node--alt { background: var(--beige); color: var(--ink); }
.mini-link { width: 18px; height: 2px; background: var(--ink-20, rgba(15,12,9,0.2)); }

/* Testimonial monogram avatars (no stock photos) */
.avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }

/* Pricing: single big number */
.price-amt .amt { line-height: 1; }
.price-amt .gst { padding-bottom: 8px; }

/* Footer trimmed for the landing page */
.footer__top--lp { grid-template-columns: 1fr; text-align: center; }
.footer__top--lp .footer__email { max-width: 520px; margin: 0 auto; }
.footer__top--lp .footer__legal { justify-content: center; }
.footer__brand { display: inline-flex; align-items: center; gap: 10px; }
.footer__brand .mark { width: 30px; height: 30px; }

/* =====================================================================
   LANDING v3 — subtle hero grid (à la lp.sitely.in) + tighter spacing
   ===================================================================== */

/* Very subtle blueprint grid on the hero only, faded out toward the bottom.
   64px grid of hairline beige lines on cream + a few 4%-orange cells. */
.hero--center { position: relative; isolation: isolate; }
.hero--center::before {
  content: ""; position: absolute; inset: -80px 0 0 0; z-index: -1; pointer-events: none;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg stroke='%23E7DFD4' stroke-width='1' fill='none' opacity='0.55'%3E%3Cpath d='M0 64H256M0 128H256M0 192H256M64 0V256M128 0V256M192 0V256'/%3E%3C/g%3E%3Cg fill='%23FA5B16' opacity='0.025'%3E%3Crect x='64' width='64' height='64'/%3E%3Crect x='192' y='64' width='64' height='64'/%3E%3Crect y='128' width='64' height='64'/%3E%3Crect x='128' y='192' width='64' height='64'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 256px 256px;  /* roomy 64px grid, sparse cells */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
}

/* ---- Tighten overall rhythm ---- */
.section { padding: 46px 0; }
@media (min-width: 768px) { .section { padding: 76px 0; } }
.hero { padding-top: 36px; }
@media (min-width: 768px) { .hero { padding-top: 52px; } }

/* Paragraph vertical spacing — the main ask: pull it in */
.lead { line-height: 24px; }
.hero .lead { margin-top: 16px; }
.hero-checks { margin-top: 22px; gap: 10px 28px; }
.hero-cta { margin-top: 24px; }
.hero-micro { margin-top: 12px; }
.replaces { margin-top: 24px; }
.replaces__row { margin-top: 10px; }

.head .h2, .head--center .h2 { margin-top: 14px; }
.head .lead, .head--center .lead { margin-top: 12px; }

.checks { gap: 9px; }
.check p { line-height: 1.42; }
.feat h3 { margin-top: 8px; }
.feat__body { margin-top: 12px; }
.feat .checks { margin-top: 16px; }
.feat + .feat { margin-top: 44px; }
@media (min-width: 900px) { .feat + .feat { margin-top: 64px; } }

.persona { padding: 22px; }
.persona__ic { margin-bottom: 14px; }
.persona p { margin-top: 6px; line-height: 1.45; }
.benefits { margin-top: 36px; }
.divider-cta { margin-top: 28px; }

.price-list { margin-top: 16px; gap: 10px; }
.price-amt { margin-top: 18px; }
.price-sub { margin-top: 6px; }
.price-card .btn { margin-top: 18px; }
.price-aside p { margin-top: 8px; line-height: 1.5; }

.tbig { margin: 0 auto 28px; }
.tbig p { line-height: 1.35; }
.tcard p { margin-top: 12px; line-height: 1.5; }
.tcard__who { margin-top: 14px; }

.faq__q { padding: 16px 4px; }
.faq__a p { padding: 0 4px 18px; line-height: 1.5; }
.guarantee p { margin-top: 12px; }
.guarantee__seal { margin-bottom: 18px; }

.finalcta { padding: 64px 0 150px; }
@media (min-width: 768px) { .finalcta { padding: 88px 0 190px; } }
.finalcta h2 { margin-top: 16px; }
.finalcta .lead { margin-top: 14px; }
.finalcta .cta-row { margin-top: 24px; }
.mt-md { margin-top: 20px; }

/* =====================================================================
   LANDING v4 — polish pass. Later rules win over everything above.
   (1) announcement bar no longer clipped/cramped, (2) plain nav with no
   beige pill that scrolls away instead of pinning over dark sections,
   (3) hero grid fades in at top AND out at bottom, (4) orange headline
   emphasis, (5) air below the hero, (6) air under every section heading,
   (7) centred footer wordmark.
   ===================================================================== */

/* (1) Announcement bar — give it real vertical breathing room so the copy
   is never jammed against the top edge, and on narrow screens drop the
   countdown onto its own tidy centred row instead of clipping. */
.topbar { padding: 12px 18px; row-gap: 6px; line-height: 1.35; }
@media (max-width: 600px) {
  .topbar { padding: 14px 16px; font-size: 12.5px; }
  .topbar .cd { width: 100%; justify-content: center; margin-top: 2px; }
}

/* (2) Header/nav — remove the beige "curvy rectangle" entirely: logo +
   wordmark left, Live demo + Get access right, sitting on the page. It
   scrolls away with the hero (a transparent pinned bar would be invisible
   over the dark sections), and the sticky bottom bar keeps the CTA. */
.header { position: static; z-index: 40; padding: 8px 20px 0; }
@media (min-width: 768px) { .header { padding: 10px 24px 0; } }
.navbar { background: transparent; box-shadow: none; height: 60px; padding: 0; }
/* Live demo now shows at every width. */
.nav-right { gap: 16px; }
.nav-right .login { display: inline-flex !important; }
@media (max-width: 560px) {
  .nav-right { gap: 12px; }
  .nav-right .login { display: inline-flex !important; font-size: 14px; }
  .nav-cta { height: 46px; padding: 0 18px; font-size: 14px; }
}

/* (3) Hero blueprint grid — fade in from the top and out toward the bottom
   so it reads strongest through the middle, not hard against the nav. */
.hero--center::before {
  inset: 0 0 0 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 56%, transparent 92%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 56%, transparent 92%);
}

/* (4) Orange emphasis inside the hero headline. */
.hero .h1 .hl { color: var(--accent); }

/* (5) Breathing room below the hero — the "Replaces" row was flush against
   the dark stats band. */
.hero { padding-bottom: 34px; }
@media (min-width: 768px) { .hero { padding-bottom: 52px; } }

/* (6) Air under every section heading — the chip + H2 (+ lead) were sitting
   flush on the grid / cards / table / features / FAQ below them. */
.head, .head--center { margin-bottom: 30px; }
@media (min-width: 768px) { .head, .head--center { margin-bottom: 46px; } }

/* (7) Centre the giant footer wordmark. */
.footer__word { justify-content: center; }

/* Popup countdown timer (limited-time pricing) */
.popup-timer { display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 0 20px; font-variant-numeric:tabular-nums; }
.popup-timer .cd-unit { background:var(--ink); color:#fff; border-radius:9px; padding:8px 12px; min-width:52px; text-align:center; font-size:28px; font-weight:700; }
.popup-timer .cd-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-50); margin-left:1px; }
.popup-timer .cd-sep { font-size:24px; font-weight:700; opacity:0.35; }

/* Long hero headline: smaller on phones so it does not dominate the screen */
@media (max-width: 600px) {
  .hero--center .h1 { font-size: clamp(26px, 7.4vw, 33px); line-height: 1.14; }
}

/* =====================================================================
   Stacked CTA (button above + underlined demo link below, Sitely-style)
   + footer wordmark descender fix
   ===================================================================== */
.hero-cta--stack, .cta-row--stack { flex-direction: column; align-items: center; gap: 14px; }
.demo-under {
  font-size: 15px; font-weight: 500; color: var(--ink-70);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.demo-under:hover { color: var(--accent); }
.demo-under--dark { color: rgba(255,255,255,0.8); }
.demo-under--dark:hover { color: #fff; }
/* Footer wordmark: keep the g descender visible (was clipped by line-height 0.8 + overflow hidden) */
.footer__word { overflow: visible; }
.footer__word .w { line-height: 1.02; }