/* Zeddie marketing site — calm, premium, human.
   Brand: navy #011C36 (from wordmark), teal accent, cool pale neutrals, warm off-white.
   Final brand kit values swap in here when production assets arrive. */

:root {
  --navy: #011c36;
  --navy-soft: #17324e;
  --ink: #1c2b3a;
  --muted: #5a6b7d;
  --teal: #0f766e;
  --teal-deep: #0c5f59;
  --teal-wash: #e7f2f0;
  --paper: #fbfaf7;          /* warm off-white ground */
  --paper-cool: #f4f6f8;     /* cool pale neutral band */
  --card: #ffffff;
  --line: #e5e5df;
  --line-cool: #dfe5ea;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(1, 28, 54, 0.05), 0 12px 40px -18px rgba(1, 28, 54, 0.25);
  --shadow-frame: 0 2px 4px rgba(1, 28, 54, 0.05), 0 28px 70px -26px rgba(1, 28, 54, 0.32);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: var(--teal-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 780px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow 0.35s ease;
  background: rgba(251, 250, 247, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 28px;
  min-height: 76px;
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(1, 28, 54, 0.22); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 44px; width: auto; }

/* animated rich logo (assets/logo.js swaps the <img> for this) */
.brand-logo { display: inline-flex; }
.brand-logo svg { height: 44px; width: auto; display: block; overflow: visible; }
@media (max-width: 640px) { .brand img, .brand-logo svg { height: 38px; } }
.brand-logo .word path, .brand-logo .dot, .brand-logo .smile { transform-box: fill-box; }
.brand-logo .word path { transform-origin: 50% 100%; }
.brand-logo .dot { transform-origin: 50% 50%; }
.brand-logo .smile { transform-origin: 4.5% 18.5%; }
@keyframes zlg-press {
  0% { transform: none; }
  14% { transform: translateY(5px) scaleY(0.96); }
  55% { transform: translateY(-2px); }
  100% { transform: none; }
}
.brand-logo .press { animation: zlg-press 0.32s cubic-bezier(0.3, 0.6, 0.4, 1); }
@keyframes zlg-press-soft {
  0% { transform: none; }
  20% { transform: translateY(3px) scaleY(0.98); }
  100% { transform: none; }
}
.brand-logo .press-soft { animation: zlg-press-soft 0.4s ease-out; }
@keyframes zlg-hop {
  0% { transform: none; }
  30% { transform: translateY(-14px) scaleY(1.05); }
  55% { transform: translateY(0); }
  70% { transform: translateY(0) scaleY(0.92) scaleX(1.06); }
  100% { transform: none; }
}
.brand-logo .hop { animation: zlg-hop 0.55s cubic-bezier(0.34, 1.3, 0.5, 1); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.site-nav a {
  color: var(--navy); font-size: 15.5px; font-weight: 500;
}
.site-nav a:hover { color: var(--teal-deep); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--teal-deep); }
.site-nav a.btn--teal, .site-nav a.btn--teal:hover { color: #fff; }
.site-nav .btn { padding: 10px 18px; font-size: 14.5px; }

.btn {
  display: inline-block; font-weight: 600; font-size: 15.5px; line-height: 1.25;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-align: center; font-family: var(--sans);
  transition: background 0.2s ease, border-color 0.2s ease,
    transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary:hover { box-shadow: 0 2px 3px rgba(1, 28, 54, 0.18), 0 16px 32px -14px rgba(1, 28, 54, 0.5); }
.btn--teal:hover { box-shadow: 0 2px 3px rgba(12, 95, 89, 0.22), 0 16px 32px -14px rgba(12, 95, 89, 0.6); }
.btn:active { transform: translateY(0) scale(0.985); box-shadow: none; transition-duration: 0.06s; }
.btn--primary { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(1, 28, 54, 0.18), 0 12px 26px -14px rgba(1, 28, 54, 0.45); }
.btn--primary:hover { background: var(--navy-soft); }
.btn--teal { background: var(--teal); color: #fff; box-shadow: 0 1px 2px rgba(12, 95, 89, 0.22), 0 12px 26px -14px rgba(12, 95, 89, 0.55); }
.btn--teal:hover { background: var(--teal-deep); }
.btn--ghost { border-color: rgba(1, 28, 54, 0.28); color: var(--navy); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); background: rgba(1, 28, 54, 0.04); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--paper-cool); }
.btn--lg { padding: 16px 30px; font-size: 16.5px; }

.header-cta { display: none; order: 2; white-space: nowrap; }
/* mid widths: swap the wide nav pill for a compact Apply chip so the bar never crowds */
@media (max-width: 1200px) {
  .site-header .wrap { gap: 20px; }
  .site-nav { gap: 18px; order: 1; }
  .site-nav a { font-size: 14.5px; }
  .site-nav > .btn { display: none; }
  .header-cta { display: inline-block; padding: 9px 15px; font-size: 14px; }
}
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line-cool);
  border-radius: 8px; padding: 12px 16px; font-size: 15px; color: var(--navy); cursor: pointer;
  order: 3;
}
@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .header-cta { margin-left: auto; }
  .nav-toggle { margin-left: 12px; }
  .site-nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 20px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; font-size: 17px; width: 100%; }
  .site-nav.open > .btn { display: block; margin-top: 10px; width: 100%; }
}

/* ---------- type ---------- */
h1, h2, h3 { color: var(--navy); line-height: 1.15; letter-spacing: -0.01em; }
h1, h2 { font-family: var(--serif); font-weight: 500; }
h1 { font-size: clamp(2.15rem, 5.4vw, 3.9rem); overflow-wrap: break-word; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.15rem; font-weight: 650; }
.eyebrow {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal-deep); margin-bottom: 18px;
}
.lede { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--muted); max-width: 36em; }
.hero .lede + .lede, .section-head .lede + .lede { margin-top: 12px; font-size: 1.05rem; }
.section-head { max-width: 720px; }
.section-head ~ .product-frame { margin-top: 48px; }
.wrap--narrow h2 + p, .section-head h2 + p { margin-top: 18px; }
.section-head p { margin-top: 16px; }
.wrap--narrow p + p { margin-top: 16px; }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 7.5vw, 92px) 0; }
[id] { scroll-margin-top: 92px; }
.section--cool { background: linear-gradient(180deg, #f0f4f6 0%, #f5f7f8 140px, #f3f6f8 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--white { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--tight { padding-top: 40px; }
.section--navy { background: var(--navy); position: relative; overflow: hidden; }
.section--navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 460px at 50% -12%, rgba(20, 187, 166, 0.1), transparent 65%);
}
.section--navy .wrap { position: relative; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #b9c7d6; }
.section--navy .eyebrow { color: #7fd1c5; }

/* ---------- hero ---------- */
.hero { padding: clamp(72px, 10vw, 130px) 0 clamp(48px, 6vw, 80px); text-align: center; position: relative; }
.hero h1 { max-width: 17em; margin: 0 auto; }
.hero .lede { margin: 26px auto 0; }

/* homepage hero: split, with the live board in the first viewport */
.hero--split { text-align: left; padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px); overflow: hidden; }
.hero--split::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 460px at 82% 10%, rgba(15, 118, 110, 0.09), transparent 65%),
    radial-gradient(560px 420px at 8% 88%, rgba(1, 28, 54, 0.05), transparent 70%);
}
.hero--split::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(1, 28, 54, 0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(640px 480px at 78% 22%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(640px 480px at 78% 22%, #000 0%, transparent 72%);
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  gap: clamp(28px, 3.5vw, 52px); align-items: center;
}
/* 2026-09-05 client feedback: make the board larger. The demo column gets the wider share and,
   on screens wider than the 1120px wrap, overhangs the wrap toward the viewport edge (kept 40px
   clear of it; .hero--split overflow:hidden guarantees no horizontal scroll). */
.hero-demo { margin-right: calc(-1 * clamp(0px, (100vw - 1120px) / 2 - 16px, 180px)); }
.hero--split h1 { margin: 0; max-width: 12em; font-size: clamp(2.15rem, 4.8vw, 3.55rem); }
.hero--split .lede { margin: 22px 0 0; }
.hero--split .hero-ctas { justify-content: flex-start; margin-top: 26px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  background: linear-gradient(180deg, #ffffff, #fcfbf8); border: 1px solid #e6e4dc;
  border-radius: 999px; padding: 7px 14px;
  box-shadow: 0 1px 2px rgba(1, 28, 54, 0.05), 0 8px 18px -14px rgba(1, 28, 54, 0.25);
}
.hero-badge i {
  font-style: normal; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}
.hero-demo .zd-demo { box-shadow: 0 2px 4px rgba(1, 28, 54, 0.05), 0 28px 70px -24px rgba(12, 95, 89, 0.35); }
.hero-demo figcaption { font-size: 13.5px; padding: 12px 16px; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-demo { margin-right: 0; }
  .hero--split { text-align: center; }
  .hero--split h1, .hero--split .lede { margin-left: auto; margin-right: auto; }
  .hero--split .hero-ctas, .hero-badges { justify-content: center; }
}

/* fact ribbon — real product facts, quiet strip */
.fact-ribbon { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.fact-ribbon .wrap {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; padding-top: 18px; padding-bottom: 18px;
}
.fact-ribbon span {
  font-size: 13.5px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em;
  display: inline-flex; align-items: center;
}
.fact-ribbon span b { color: var(--navy); font-weight: 700; margin-right: 5px; }
.fact-ribbon span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #cfd7de; margin: 0 clamp(12px, 2.5vw, 26px); }
@media (max-width: 640px) {
  .hero-badge { font-size: 12.5px; padding: 5px 11px; }
  .hero-badges { gap: 7px; margin-top: 18px; }
  .hero-badges .hero-badge:nth-child(2) { display: none; }
  .hero--split .hero-ctas { margin-top: 22px; gap: 10px; }
  .fact-ribbon .wrap { flex-direction: column; align-items: center; gap: 8px; padding-top: 16px; padding-bottom: 18px; }
  .fact-ribbon span + span::before { display: none; }
}
.hero-cred { margin-top: 30px; font-weight: 600; color: var(--navy); font-size: 0.95rem; letter-spacing: 0.01em; }
.hero-trust { margin-top: 4px; color: var(--muted); font-style: italic; font-size: 0.9rem; }
.hero-ctas { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- explainer film ---------- */
.film {
  position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy);
  box-shadow: 0 2px 4px rgba(1, 28, 54, 0.06), 0 34px 80px -28px rgba(1, 28, 54, 0.45);
}
.film video { width: 100%; display: block; aspect-ratio: 16 / 9; background: var(--navy); }
.film::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(1, 28, 54, 0.18); pointer-events: none;
}
.film-cover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0; padding: 0; width: 100%;
  background:
    linear-gradient(rgba(1, 28, 54, 0.22), rgba(1, 28, 54, 0.55)),
    radial-gradient(130% 100% at 50% 0%, transparent 40%, rgba(1, 28, 54, 0.28) 100%);
  transition: opacity 0.35s ease;
}
.film-cover.gone { opacity: 0; pointer-events: none; }
.film-cover { transition: opacity 0.35s ease, background 0.4s ease; }
.film-cover:hover { background: linear-gradient(rgba(1, 28, 54, 0.16), rgba(1, 28, 54, 0.46)); }
.film-play .film-tri::after { transition: transform 0.25s ease; }
.film-cover:hover .film-tri::after { transform: translateX(2px); }
.film-cover.gone .film-play { transform: scale(0.92); }
.film-play {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, 0.96); color: var(--navy);
  font-family: var(--sans); font-size: 16px; font-weight: 700;
  border-radius: 999px; padding: 14px 26px 14px 16px; border: 0;
  box-shadow: 0 12px 40px rgba(1, 28, 54, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.film-cover:hover .film-play { transform: scale(1.04); box-shadow: 0 16px 50px rgba(1, 28, 54, 0.55); }
.film-play .film-tri {
  width: 44px; height: 44px; border-radius: 50%; background: var(--teal); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.film-play .film-tri::after {
  content: ""; margin-left: 3px;
  border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff;
}
.film-play small { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.film-note { margin-top: 14px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* ---------- product frame ---------- */
.product-frame { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.product-frame__bar {
  display: flex; align-items: center; gap: 6px; padding: 11px 16px;
  background: #f7f9fa; border: 1px solid var(--line-cool); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.product-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: #c5ced6; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7); }
.product-frame .zd-demo, .product-frame > img {
  border: 1px solid var(--line-cool); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-frame);
}
.product-frame figcaption, .shot-caption {
  padding: 22px 6px 0; font-size: 14px; color: var(--muted);
  background: transparent; border: 0;
}
.demo-note {
  margin-top: 16px; text-align: center; font-size: 14px; color: var(--muted);
}

/* ---------- problem split (story left, cards right) ---------- */
.problem-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.problem-cols .grid { margin-top: 0; }
@media (max-width: 960px) { .problem-cols { grid-template-columns: 1fr; } }

/* ---------- feature grids ---------- */
.grid { display: grid; gap: 22px; margin-top: 48px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid--4, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: #cfe0dc;
  box-shadow: 0 2px 4px rgba(1, 28, 54, 0.04), 0 16px 36px -20px rgba(1, 28, 54, 0.28);
}
.card h3 { margin-bottom: 10px; }
.card-icon {
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.25s ease;
  width: 42px; height: 42px; border-radius: 11px;
  background: linear-gradient(180deg, #ebf4f2, #e1efeb);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--teal-deep); display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.card:hover .card-icon { transform: translateY(-2px) scale(1.06); background: #dcebe7; }
.card-icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.card p { color: var(--muted); font-size: 15.5px; }
.section--cool .card { border-color: var(--line-cool); }

/* ---------- split (text + image) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: start; margin-top: 0; }
.section-head ~ .split { margin-top: 48px; }
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--flip .split__text { order: 2; }
@media (max-width: 900px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip .split__text { order: 0; }
}
.split__text h2 { margin-bottom: 16px; }
.split__text p { color: var(--muted); margin-bottom: 14px; }
.strong { color: var(--navy); font-weight: 600; }

.checks { list-style: none; margin: 18px 0 0; }
.checks li { padding-left: 30px; position: relative; margin-bottom: 11px; color: var(--ink); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--teal-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230c5f59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}

/* ---------- CTA band ---------- */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 400px at 50% 118%, rgba(15, 118, 110, 0.08), transparent 70%),
    radial-gradient(rgba(1, 28, 54, 0.07) 1px, transparent 1px);
  background-size: auto, 26px 26px;
  mask-image: radial-gradient(720px 520px at 50% 100%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(720px 520px at 50% 100%, #000 0%, transparent 75%);
}
.cta-band .wrap { position: relative; }
.cta-band h2 { max-width: 18em; margin: 0 auto; }
.cta-band p { margin: 18px auto 0; max-width: 38em; }
.cta-band .hero-ctas { margin-top: 34px; }

/* ---------- forms ---------- */
.form-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 4vw, 44px); margin-top: 40px;
}
.form-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 20px; }
.form-grid .field { grid-column: span 3; }
.form-grid .field--third { grid-column: span 2; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid .field, .form-grid .field--third { grid-column: 1 / -1; } }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field .req { color: #b4231f; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line-cool); border-radius: 9px; background: #fff;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--muted); margin-top: 22px; }
.form-consent input { margin-top: 3px; }
.form-consent input[type="checkbox"] { accent-color: var(--teal); width: 18px; height: 18px; flex-shrink: 0; }
.form-actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-hint { font-size: 13.5px; color: var(--muted); }
.form-note { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; }
.form-note b { color: var(--navy); }
.form-success {
  display: none; background: var(--teal-wash); border: 1px solid #cde5e0; border-radius: var(--radius);
  padding: 26px 30px; margin-top: 40px;
}
.form-success.show { display: block; margin-bottom: 28px; }
.form-success h3 { color: var(--teal-deep); margin-bottom: 8px; }
.form-success p { color: var(--ink); font-size: 15.5px; }
.form-success .copy-answers { margin-top: 14px; }
.form-error {
  display: none; background: #fdf5ec; border: 1px solid #efd7bc; border-radius: var(--radius);
  padding: 26px 30px; margin-top: 40px;
}
.form-error.show { display: block; margin-bottom: 28px; }
.form-error h3 { color: #8a4b00; margin-bottom: 8px; }
.form-error p { color: var(--ink); font-size: 15.5px; }
.form-error .copy-answers { margin-top: 14px; }
.btn[disabled] { opacity: 0.65; cursor: progress; box-shadow: none; pointer-events: none; }
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 44px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px;
  padding: 22px 4px; font-weight: 600; color: var(--navy); font-size: 1.05rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--teal-deep); flex-shrink: 0; transition: transform 0.25s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details[open] p { animation: faq-in 0.3s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

.faq-list details p { padding: 2px 4px 24px; color: var(--muted); max-width: 52em; font-size: 16px; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: #b9c7d6; padding: 60px 0 40px; }
.footer-brand-col { max-width: 300px; }
.footer-logo { height: 34px; width: auto; }
.footer-apply { margin-top: 20px; display: inline-block; padding: 10px 18px; font-size: 14px; }
.footer-legal { display: inline-flex; gap: 10px; align-items: center; }
.footer-legal i { font-style: normal; color: #46607a; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; justify-content: space-between; }
.footer-tag { font-size: 14.5px; margin-top: 12px; }
.footer-nav { display: flex; gap: 8px 26px; flex-wrap: wrap; }
.footer-nav a { color: #d5dee7; font-size: 14.5px; padding: 10px 0; display: inline-block; }
.footer-nav a:hover { color: #fff; }
.footer-meta a { padding: 8px 6px; display: inline-block; }
.footer-meta a:hover { color: #fff; }
.footer-meta a { color: #b9c7d6; }
.footer-meta { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 12px; padding-top: 22px; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }
.footer-meta a { color: #b9c7d6; }

/* ---------- scroll reveal (added by JS; skipped under reduced motion) ---------- */
.reveal { opacity: 0; transform: translateY(18px); }
@media print { .reveal { opacity: 1; transform: none; } }
.grid .card.reveal.in:nth-child(2) { transition-delay: 0.07s; }
.grid .card.reveal.in:nth-child(3) { transition-delay: 0.14s; }
.grid .card.reveal.in:nth-child(4) { transition-delay: 0.21s; }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------- lightbox for static product screenshots ---------- */
.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 4vh 3vw;
  background: rgba(1, 28, 54, 0.88); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.25s ease; cursor: zoom-out;
}
.lightbox.open { opacity: 1; }
.lightbox img {
  max-width: 94vw; max-height: 84vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); background: #fff;
}
.lightbox figcaption { color: #d5dee7; font-size: 14.5px; text-align: center; max-width: 60em; }
.lightbox .lightbox-close {
  position: absolute; top: 18px; right: 22px; background: rgba(255, 255, 255, 0.12);
  border: none; color: #fff; font-size: 15px; font-weight: 600; font-family: var(--sans);
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
}
.lightbox .lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------- misc ---------- */
.pill {
  display: inline-block; background: var(--teal-wash); color: var(--teal-deep);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 14px; margin-bottom: 18px;
}
.future-flag {
  display: inline-block; background: #fdf3e3; color: #8a5a13; border: 1px solid #f0dfc0;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 12px; margin-bottom: 16px;
}
.quote-line { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--navy); max-width: 30em; line-height: 1.4; }