/* ============================================
   SeaVIN — App-specific styles
   ============================================ */

/* ---- Top nav ---- */
/* ============================================
   Navbar — Amplemarket-style:
   • full-width al top (edge-to-edge, light cream)
   • morphing in floating pill al scroll (centered, rounded, shadow)
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.65); /* white glass — vedi attraverso */
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(11, 37, 64, 0.06);
  box-shadow: none;
  transition:
    background 0.32s ease,
    box-shadow 0.32s ease,
    border-radius 0.32s ease,
    margin 0.32s ease,
    max-width 0.32s ease,
    top 0.32s ease,
    backdrop-filter 0.32s ease;
}
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  transition: height 0.32s ease, padding 0.32s ease;
}

/* Stato "scrolled" — pillola fluttuante centrata */
.nav.is-scrolled {
  position: fixed;
  top: 14px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  background: rgba(255, 255, 255, 0.72); /* white glass pill */
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(11, 37, 64, 0.08);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 28px rgba(11, 37, 64, 0.10),
    0 2px 6px rgba(11, 37, 64, 0.05);
  animation: navPillIn 0.32s ease both;
}
.nav.is-scrolled .nav__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 22px;
  height: 56px;
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 0 14px 0 22px;
  margin: 0;
}
/* Pill: nascondi il nome SeaVIN, lascia solo il marchio */
.nav.is-scrolled .logo__word { display: none; }
.nav.is-scrolled .logo { gap: 0; flex-shrink: 0; }
/* Pill: link con più respiro */
.nav.is-scrolled .nav__links {
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav.is-scrolled .nav__link {
  padding: 7px 14px;
  font-size: 14px;
  white-space: nowrap;
}
.nav.is-scrolled .nav__cta { flex-shrink: 0; gap: 8px; }
/* Pill: "Accedi" come bottone outline, distinto dai link */
.nav.is-scrolled .nav__cta .nav__link {
  border: 1px solid rgba(11, 37, 64, 0.18);
  padding: 7px 16px;
  background: transparent;
  margin-right: 0 !important;
}
.nav.is-scrolled .nav__cta .nav__link:hover {
  border-color: var(--ink);
  background: rgba(11, 37, 64, 0.04);
}
.nav.is-scrolled .nav__cta .nav__link.is-active::after { display: none; }
@keyframes navPillIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Spacer per evitare jump quando passa a fixed */
.nav__spacer { height: 64px; display: none; }
.nav.is-scrolled ~ .nav__spacer { display: block; }

/* ---- Minimal navbar (checkout): solo logo, niente trasformazione ---- */
.nav.nav--minimal {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule-soft);
  box-shadow: none;
}
.nav.nav--minimal .nav__inner { height: 60px; }
.nav.nav--minimal.is-scrolled {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  box-shadow: 0 2px 8px rgba(11, 37, 64, 0.04);
  animation: none;
}
.nav.nav--minimal .logo,
.nav.nav--minimal .logo__mark { color: var(--ink); }
.nav.nav--minimal .logo__word em { color: var(--accent-deep); }
.nav__links {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-self: center;
  align-self: center;
}
.nav__link {
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__link:hover {
  color: var(--ink);
  background: rgba(11, 37, 64, 0.06);
}
.nav__link.is-active {
  color: var(--ink);
  background: rgba(11, 37, 64, 0.06);
}
.nav__link.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--accent);
  border-radius: 2px;
}
.nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  align-self: center;
}
.nav__lang {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  padding: 8px 14px;
  border: 1px solid rgba(11, 37, 64, 0.18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.nav__lang:hover { border-color: var(--ink); color: var(--ink); background: rgba(11, 37, 64, 0.04); }

/* ---- Navbar CTA — pill scura con testo bianco ---- */
.nav .btn {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 10px 18px;
}
.nav .btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #FFFFFF;
}

/* ---- Logo — scuro su white glass ---- */
.nav .logo,
.nav .logo__mark { color: var(--ink); }
.nav .logo__word em { color: var(--accent-deep); }

/* ---- Logo mark ---- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 400;
  align-self: center;
}
.logo__mark {
  width: 32px;
  height: 32px;
  display: inline-block;
  color: var(--ink);
}
/* Nella pill il logo torna piccolo (solo marchio) */
.nav.is-scrolled .logo { font-size: 22px; }
.nav.is-scrolled .logo__mark { width: 26px; height: 26px; }
.logo__word em {
  font-style: italic;
  color: var(--accent-deep);
  font-weight: 400;
}
[data-theme="dark"] .logo__word em,
[data-palette="navy"] .logo__word em {
  color: var(--accent);
}

/* ---- Footer ---- */
.footer {
  border-top: 1px solid var(--rule);
  margin-top: 0;
  padding-block: var(--s-8) var(--s-6);
  background: var(--bg-elev);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--s-7);
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer__col a {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding: 4px 0;
  transition: color 0.15s;
}
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ============================================
   HERO  (dashboard-as-hero)
   ============================================ */
.hero {
  padding-top: var(--s-9);
  padding-bottom: var(--s-8);
  position: relative;
  overflow: hidden;
}
.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: var(--s-7);
}
.hero__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__label::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--success), transparent 80%);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--success), transparent 80%); }
  50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--success), transparent 95%); }
}
.hero__h1 {
  font-size: var(--step-6);
  line-height: 0.94;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-5);
}
.hero__h1 em {
  font-style: italic;
  color: var(--accent-deep);
}
[data-theme="dark"] .hero__h1 em,
[data-palette="navy"] .hero__h1 em {
  color: var(--accent);
}
.hero__intro {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: var(--s-8);
  align-items: end;
  margin-bottom: var(--s-7);
}
.hero__lede {
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 30ch;
  font-family: var(--font-display);
  font-style: italic;
}
.hero__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-5);
}
.hero__kpi .num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 6px;
}
.hero__kpi .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---- Hero VIN input (document-style) ---- */
.vin-form {
  border: 1px solid var(--ink);
  background: var(--bg-card);
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  margin-bottom: var(--s-6);
  box-shadow: 6px 6px 0 var(--ink);
  transition: box-shadow 0.2s, transform 0.2s;
}
.vin-form:focus-within {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 var(--ink);
}
.vin-form__tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vin-form__tab .num {
  font-size: 22px;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
  text-transform: none;
  line-height: 1;
  margin-top: 2px;
}
.vin-form__input {
  padding: 18px 22px;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  color: var(--ink);
  width: 100%;
  background: transparent;
}
.vin-form__input::placeholder { color: var(--ink-faint); letter-spacing: 0.04em; }
.vin-form__submit {
  padding: 0 28px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
  border-left: 1px solid var(--ink);
}
.vin-form__submit:hover { background: var(--accent-deep); color: var(--bg); }
.vin-form__help {
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: var(--s-7);
}

/* ============================================
   Hero Dashboard panel
   ============================================ */
.dash {
  border: 1px solid var(--ink);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}
.dash__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-elev);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dash__bar .dots {
  display: flex;
  gap: 6px;
}
.dash__bar .dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule);
}
.dash__bar .live {
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 7px;
}
.dash__bar .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  animation: pulse 2s infinite;
}
.dash__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
  grid-template-rows: auto auto;
}
.dash__cell {
  padding: var(--s-5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.dash__cell:nth-child(3n) { border-right: 0; }
.dash__cell.span-2 { grid-column: span 2; }
.dash__cell.span-3 { grid-column: span 3; }
.dash__cell-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-4);
}
.dash__cell-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dash__cell-id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.dash__big {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.035em;
}

.dash__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-top: 6px;
}
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 99px;
}
.risk-badge[data-level="low"] { color: var(--success); }
.risk-badge[data-level="med"] { color: var(--accent-deep); }
.risk-badge[data-level="high"] { color: var(--stamp); }

/* ============================================
   Section patterns
   ============================================ */
.section {
  padding-top: var(--s-9);
  padding-bottom: var(--s-9);
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-7);
  margin-bottom: var(--s-8);
  align-items: end;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--ink);
}
.section-head__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.section-head h2 {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.section-head h2 em {
  font-style: italic;
  color: var(--accent-deep);
}

/* ---- SectionHead variante centrata ---- */
.section-head--center {
  display: block;
  text-align: center;
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--s-5);
  margin: 0 auto var(--s-8);
  max-width: 880px;
}
.section-head--center .section-head__num { display: inline-block; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center h2 {
  margin-top: var(--s-5);
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-wrap: balance;
}
[data-theme="dark"] .section-head h2 em,
[data-palette="navy"] .section-head h2 em {
  color: var(--accent);
}

/* ============================================
   How it works — step timeline
   ============================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.step {
  padding: var(--s-6) var(--s-5) var(--s-6) var(--s-5);
  border-right: 1px solid var(--rule);
  position: relative;
}
.step:last-child { border-right: 0; }
.step__num {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-deep);
  margin-bottom: var(--s-5);
  font-style: italic;
}
[data-theme="dark"] .step__num,
[data-palette="navy"] .step__num { color: var(--accent); }
.step__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
}
.step__desc {
  font-size: var(--step--1);
  color: var(--ink-mute);
  line-height: 1.55;
}
.step__time {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-transform: uppercase;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

/* ============================================
   Report preview grid (homepage)
   ============================================ */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.preview-cell {
  background: var(--bg-card);
  padding: var(--s-5);
  min-height: 180px;
}
.preview-cell--wide { grid-column: span 6; }
.preview-cell--med { grid-column: span 4; }
.preview-cell--sm { grid-column: span 3; }
.preview-cell--md { grid-column: span 5; }
.preview-cell h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin-bottom: var(--s-3);
}
.preview-cell__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
  display: block;
}

/* ============================================
   Spec list (used in reports & feature blocks)
   ============================================ */
.spec {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.spec:last-child { border-bottom: 0; }
.spec__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.spec__v {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink);
  letter-spacing: -0.005em;
  text-align: right;
}

/* ============================================
   Trust / partners
   ============================================ */
.trust {
  padding-block: var(--s-7);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.trust__inner {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--s-7);
  align-items: center;
}
.trust__logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5);
  align-items: center;
}
.trust__logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  color: var(--ink-mute);
  letter-spacing: -0.02em;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

/* ============================================
   Testimonials / callouts
   ============================================ */
.pull {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-style: italic;
  max-width: 22ch;
}

/* ============================================
   Tweaks panel
   ============================================ */
.tweaks-toggle-hint { display: none; }
.tweaks-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 320px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
}
.tweaks-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.tweaks-panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tweaks-panel__close {
  font-size: 18px;
  line-height: 1;
  color: var(--ink-mute);
}
.tweak-row {
  margin-bottom: 16px;
}
.tweak-row__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
  display: block;
}
.tweak-opts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tweak-opt {
  padding: 6px 10px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s;
  flex: 1 1 auto;
  text-align: center;
}
.tweak-opt:hover { border-color: var(--ink); color: var(--ink); }
.tweak-opt.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ============================================
   Page chrome helpers
   ============================================ */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page__main { flex: 1; }

/* ============================================
   Modal
   ============================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--ink), transparent 40%);
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--ink);
  width: 100%;
  max-width: 780px;
  max-height: 88vh;
  overflow: auto;
  box-shadow: 12px 12px 0 var(--ink);
}
.modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-elev);
}
.modal__body { padding: 28px; }
.modal__close { font-size: 22px; color: var(--ink-mute); line-height: 1; }

/* ============================================
   Responsive (basic)
   ============================================ */
@media (max-width: 960px) {
  .hero__intro { grid-template-columns: 1fr; }
  .hero__kpis { grid-template-columns: 1fr 1fr; }
  .dash__grid { grid-template-columns: 1fr 1fr; }
  .dash__cell { border-right: 1px solid var(--rule); }
  .dash__cell:nth-child(2n) { border-right: 0; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2n) { border-right: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .section-head { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 640px) {
  .nav__links { display: none; }
  .vin-form { grid-template-columns: 1fr; }
  .vin-form__tab { flex-direction: row; justify-content: space-between; padding: 10px 16px; }
  .vin-form__submit { padding: 14px; border-left: 0; border-top: 1px solid var(--ink); justify-content: center; }
  .hero__kpis { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .dash__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================
   Marine accents — subtle sea tones layered on top
   ============================================ */

/* Big editorial numbers in report & dashboard: sea-deep */
.dash__big { color: var(--sea-deep); }

/* Hero KPI numbers get the sea tone */
.hero__kpi .num { color: var(--sea-deep); }

/* Section head number badge */
.section-head .num,
.section-head [class*="num"] { color: var(--sea-deep); }

/* Hairline wash under hero / footer bands */
.hero,
.footer {
  background:
    linear-gradient(180deg, var(--sea-wash) 0%, transparent 180px),
    var(--bg);
}
[data-theme="dark"] .hero,
[data-theme="dark"] .footer,
[data-palette="navy"] .hero,
[data-palette="navy"] .footer {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--sea-deep), transparent 88%) 0%, transparent 180px),
    var(--bg);
}

/* Sample-report sticky TOC: sea-wash strip */
.section[id^="sec-"] { position: relative; }

/* Spec key gets a soft sea tint when paired with values */
.spec__k { color: color-mix(in oklab, var(--ink-mute), var(--sea) 25%); }

/* Risk badge low/med get a hint of sea rather than plain success/brass */
.risk-badge[data-level="low"] { color: var(--sea-deep); }

/* Stamps: keep red ones, but add a sea-variant via data attr */
.stamp[data-tone="sea"] {
  color: var(--sea-deep);
  border-color: var(--sea-deep);
}

/* Active nav underline picks up sea */
.nav__link.is-active::after,
.nav__link[aria-current="page"]::after {
  background: var(--sea-deep);
}

/* Link hover across the site — subtle sea */
a:hover { color: var(--sea-deep); }

/* Dotted rules in comp tables — sea soft */
[class*="dotted"],
div[style*="dotted"] { border-color: color-mix(in oklab, var(--rule), var(--sea) 15%) !important; }

/* Progress bars (checkout / dashboard) use sea */
.progress__fill,
div[style*="background: var(--accent-deep)"][style*="width"] {
  background: var(--sea-deep) !important;
}

/* Checkout stepper active step — keep ink bg but add sea hairline top */
.stepper__item.is-active,
.stepper__item[data-active="true"] {
  box-shadow: inset 0 2px 0 var(--sea-deep);
}

/* Subtle wave divider pattern between big sections */
.wave-rule {
  height: 18px;
  background:
    radial-gradient(circle at 10px 14px, var(--sea-soft) 2px, transparent 2.5px) repeat-x,
    transparent;
  background-size: 28px 18px;
  opacity: 0.5;
}

/* Info-leaning inline tokens */
.mono[data-tone="sea"] { color: var(--sea-deep); }

/* ============================================
   Secondary — Mediterranean Azure
   A calm, authoritative second voice alongside the brass primary.
   ============================================ */

/* --- Links and interactive text --- */
a { color: var(--secondary); text-decoration-color: color-mix(in oklab, var(--secondary), transparent 60%); }
a:hover { color: var(--secondary-deep); text-decoration-color: var(--secondary-deep); }

/* --- Selection + focus --- */
::selection { background: var(--secondary-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
input:focus, textarea:focus, select:focus {
  border-color: var(--secondary);
  outline: 3px solid var(--secondary-wash);
  outline-offset: 0;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--secondary-deep); }

/* --- Eyebrow kickers: secondary left marker + wash --- */
.eyebrow {
  padding: 6px 12px 6px 14px;
  border-left: 3px solid var(--secondary);
  background: var(--secondary-wash);
  color: var(--secondary-deep);
}
[data-theme="dark"] .eyebrow,
[data-palette="navy"] .eyebrow { color: var(--secondary); background: var(--secondary-wash); }

/* --- Section numerals (§ 01) ride in secondary --- */
.section-head .mono,
.section-head .num {
  color: var(--secondary-deep);
}
[data-theme="dark"] .section-head .mono,
[data-theme="dark"] .section-head .num,
[data-palette="navy"] .section-head .mono,
[data-palette="navy"] .section-head .num { color: var(--secondary); }

/* --- Italic "em" emphasis in headlines alternates: brass for primary, azure for secondary beats --- */
h2 em, h3 em { color: var(--secondary-deep); }
[data-theme="dark"] h2 em,
[data-theme="dark"] h3 em,
[data-palette="navy"] h2 em,
[data-palette="navy"] h3 em { color: var(--secondary); }

/* --- Risk "low" → azure, matches the calm tone --- */
.risk-badge[data-level="low"] {
  color: var(--secondary-deep);
  border-color: color-mix(in oklab, var(--secondary), transparent 50%);
  background: var(--secondary-wash);
}

/* --- Secondary button variant --- */
.btn.btn--secondary {
  background: var(--secondary-deep);
  color: #fff;
  border-color: var(--secondary-deep);
}
.btn.btn--secondary:hover {
  background: var(--secondary);
  border-color: var(--secondary);
}
.btn.btn--ghost:hover {
  border-color: var(--secondary-deep);
  color: var(--secondary-deep);
  background: var(--secondary-wash);
}

/* --- Nav: active link in secondary, underline too --- */
.nav__link:hover { color: var(--secondary-deep); }
.nav__link.is-active,
.nav__link[aria-current="page"] {
  color: var(--secondary-deep);
}
.nav__link.is-active::after,
.nav__link[aria-current="page"]::after {
  background: var(--secondary-deep);
}

/* --- Progress bars: secondary --- */
.progress__fill {
  background: var(--secondary-deep);
}

/* --- Hero: subtle secondary wash band --- */
.hero {
  background:
    linear-gradient(180deg, var(--secondary-wash) 0%, transparent 280px),
    var(--bg);
}

/* --- Trust strip: a thin secondary top hairline to tie the band in --- */
.trust {
  border-top: 1px solid color-mix(in oklab, var(--rule), var(--secondary) 40%);
  background: linear-gradient(180deg, var(--secondary-tint) 0%, transparent 100%);
}

/* --- Footer: secondary wash + hairline --- */
.footer {
  background:
    linear-gradient(180deg, var(--secondary-wash) 0%, transparent 140px),
    var(--bg);
  border-top: 1px solid color-mix(in oklab, var(--rule), var(--secondary) 40%);
}

/* --- Section hairlines carry a subtle secondary tint --- */
.section {
  border-bottom-color: color-mix(in oklab, var(--rule), var(--secondary) 25%);
}

/* --- Placeholder boxes: secondary gradient --- */
.placeholder {
  background: linear-gradient(135deg, var(--secondary-wash) 0%, var(--bg-elev) 100%);
  color: var(--secondary-deep);
  border: 1px dashed color-mix(in oklab, var(--rule), var(--secondary) 40%);
}

/* --- Stamp: secondary tone variant --- */
.stamp[data-tone="secondary"],
.stamp[data-tone="azure"] {
  color: var(--secondary-deep);
  border-color: var(--secondary);
  background: var(--secondary-wash);
}

/* --- Dashboard big numerals stay ink, but their label pairs read secondary --- */
.dash__big + .mono,
.hero__kpi .lbl {
  color: color-mix(in oklab, var(--ink-mute), var(--secondary-deep) 40%);
}

/* --- Accent for tabular monospace labels in reports --- */
.tabular[data-tone="secondary"] { color: var(--secondary-deep); }

/* --- Subtle animated secondary pulse, reserved for "LIVE" or operational indicators --- */
@keyframes secondary-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--secondary), transparent 60%); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklab, var(--secondary), transparent 95%); }
}
.live-indicator::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--secondary);
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--secondary), transparent 80%);
  animation: secondary-pulse 2.4s ease-in-out infinite;
}

/* --- Quote marks / pull-quotes use secondary for the glyph --- */
blockquote::before,
.pullquote::before {
  color: var(--secondary);
}

/* ============================================================================
   ============================================================================
   AMPLEMARKET-INSPIRED HOMEPAGE LAYOUT  ( prefix: am- )
   Modern SaaS landing pattern: hero + logo wall + product blocks + audience
   tabs + pricing + testimonials + FAQ + final CTA.
   ============================================================================
   ============================================================================ */

:root {
  /* ─── SeaVIN "Azure Marine" palette (modern homepage tokens) ─── */
  --am-bg:        #FFFFFF;       /* bianco puro — pagina principale */
  --am-bg-alt:    #F1F6FB;       /* mist — sezioni alternate per ritmo visivo */
  --am-bg-card:   #FFFFFF;
  --am-bg-dark:   #0B2540;       /* navy ink — per sezioni dark */
  --am-ink:       #0B2540;
  --am-ink-soft:  #1A2D42;
  --am-ink-mute:  #3A5068;
  --am-ink-faint: #4A6275;
  --am-rule:      #C5D2E0;       /* bordi visibili senza essere pesanti */
  --am-rule-soft: #DEE6EF;
  --am-primary:      #0EA5E9;    /* terra — Azure */
  --am-primary-deep: #0284C7;    /* terra-d */
  --am-primary-soft: #7FB3DC;    /* clay */
  --am-accent:       #0EA5E9;    /* tutti gli accent → Azure */
  --am-accent-soft:  #C8DCED;    /* sand — Powder */
  --am-secondary:      #7FB3DC;  /* clay — informational tenue */
  --am-secondary-soft: #E2ECF5;  /* mist */
  --am-success: #4A7C5C;
  --am-warn:    #b35a14;
  --am-err:     #9e2a1e;
  --am-radius: 16px;
  --am-radius-sm: 10px;
  --am-radius-lg: 28px;
  --am-shadow-sm: 0 1px 2px rgba(11, 37, 64, 0.06), 0 2px 6px rgba(11, 37, 64, 0.08);
  --am-shadow-md: 0 4px 14px rgba(11, 37, 64, 0.10), 0 2px 6px rgba(11, 37, 64, 0.07);
  --am-shadow-lg: 0 30px 60px rgba(11, 37, 64, 0.16), 0 10px 24px rgba(11, 37, 64, 0.10);
  --am-font-sans:    "DM Sans", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
  --am-font-display: "DM Sans", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
  --am-font-accent:  "Instrument Serif", "GT Sectra", "Times New Roman", serif;
}

[data-theme="dark"] {
  --am-bg:        #061629;
  --am-bg-alt:    #0B2540;
  --am-bg-card:   #0E2C4D;
  --am-ink:       #FFFFFF;
  --am-ink-soft:  #C8DCED;
  --am-ink-mute:  #7FB3DC;
  --am-ink-faint: #5A7589;
  --am-rule:      #1F4063;
  --am-rule-soft: #14304F;
  --am-primary:      #38BDF8;
  --am-primary-deep: #7FB3DC;
  --am-primary-soft: #1F4063;
  --am-accent: #38BDF8;
  --am-secondary: #7FB3DC;
}

/* The new sections override the global page background to feel like a single SaaS canvas. */
body { background: var(--am-bg); }

/* ---------- Shared eyebrow ---------- */
.am-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--am-primary);
  background: transparent;
  padding: 6px 0 6px 0;
  border: 0;
  border-left: 3px solid var(--am-primary);
  padding-left: 12px;
  margin-bottom: 18px;
}
.am-eyebrow--secondary { color: var(--am-secondary); border-left-color: var(--am-secondary); }
.am-eyebrow--primary   { color: var(--am-primary);   border-left-color: var(--am-primary); }

/* ---------- Shared headlines ---------- */
.am-h2 {
  font-family: var(--am-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--am-ink);
  text-wrap: balance;
}
.am-h2 em {
  font-style: italic;
  color: var(--am-primary);
  font-weight: 400;
}

.am-h3 {
  font-family: var(--am-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.0rem + 1.4vw, 2.0rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--am-ink);
  margin: 0 0 14px;
}
.am-h3 em { font-style: italic; color: var(--am-primary); }

/* ---------- Shared buttons ---------- */
.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--am-font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
  text-decoration: none;
  white-space: nowrap;
}
.am-btn--primary {
  background: var(--am-primary);
  color: #fff;
  border-color: var(--am-primary);
}
.am-btn--primary:hover { background: var(--am-primary-deep); border-color: var(--am-primary-deep); color: #fff; }
.am-btn--ghost {
  background: transparent;
  color: var(--am-ink);
  border-color: var(--am-rule);
}
.am-btn--ghost:hover { background: var(--am-bg-alt); border-color: var(--am-ink); color: var(--am-ink); }
.am-btn--block { width: 100%; }

/* ---------- Shared list ---------- */
.am-list {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.am-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--am-ink-soft);
}
.am-list__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 99px;
  background: color-mix(in oklab, var(--am-primary), white 80%);
  color: var(--am-primary);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
.am-list--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.am-list--card { gap: 8px; margin: 16px 0 24px; }
.am-list--card li { font-size: 14px; color: var(--am-ink-soft); }

/* ---------- Stamp ---------- */
.am-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--am-primary);
  color: var(--am-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 99px;
  background: color-mix(in oklab, var(--am-primary), white 88%);
  font-weight: 500;
}

/* ============================================
   HERO
   ============================================ */
.am-hero {
  padding-top: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(40px, 5vw, 56px);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 50% -50%, color-mix(in oklab, var(--am-primary), white 84%), transparent 60%),
    var(--am-bg);
}
.am-hero::before {
  content: "";
  position: absolute;
  inset: auto -10% 0 -10%;
  height: 280px;
  background:
    radial-gradient(60% 100% at 50% 100%, color-mix(in oklab, var(--am-accent), white 90%), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.am-hero > .shell { position: relative; z-index: 1; }

.am-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  background: var(--am-bg-card);
  border: 1px solid var(--am-rule);
  border-radius: 999px;
  font-family: var(--am-font-sans);
  font-size: 13px;
  color: var(--am-ink-soft);
  letter-spacing: -0.005em;
  margin-bottom: 28px;
  box-shadow: var(--am-shadow-sm);
}
.am-hero__pill-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--am-success);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--am-success), transparent 80%);
  animation: pulse 2.4s infinite;
}

.am-hero__h1 {
  font-family: var(--am-font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(2.6rem, 1.6rem + 4.8vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--am-ink);
  margin: 0 0 24px;
  max-width: 16ch;
  text-wrap: balance;
}
.am-hero__h1-em {
  font-family: var(--am-font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--am-primary);
  position: relative;
  display: inline-block;
}
.am-hero__h1-em::after {
  content: "";
  position: absolute;
  left: -0.04em; right: -0.04em;
  bottom: -0.16em;
  height: 0.3em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 9 Q 25 1, 50 7 T 100 7 T 150 7 T 198 7' fill='none' stroke='%2338BDF8' stroke-width='2.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.9;
}

.am-hero__lede {
  font-size: clamp(16px, 0.9rem + 0.5vw, 19px);
  line-height: 1.55;
  color: var(--am-ink-soft);
  max-width: 60ch;
  margin: 0 0 32px;
}

/* Hero form */
.am-hero-form {
  display: flex;
  align-items: stretch;
  background: var(--am-bg-card);
  border: 1px solid var(--am-rule);
  border-radius: 999px;
  padding: 6px 6px 6px 6px;
  max-width: 720px;
  box-shadow: var(--am-shadow-md);
  transition: box-shadow 0.18s, transform 0.18s;
  overflow: hidden;
}
.am-hero-form:focus-within {
  box-shadow: var(--am-shadow-lg);
  border-color: var(--am-primary);
}
.am-hero-form__tag {
  display: inline-flex;
  align-items: center;
  padding: 0 16px 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--am-ink-mute);
  border-right: 1px solid var(--am-rule);
}
.am-hero-form__input {
  flex: 1;
  padding: 14px 18px;
  font-family: var(--am-font-sans);
  font-size: 15px;
  color: var(--am-ink);
  background: transparent;
  border: 0;
  outline: 0;
  letter-spacing: -0.005em;
  min-width: 0;
}
.am-hero-form__input::placeholder { color: var(--am-ink-faint); }
.am-hero-form__submit {
  flex: 0 0 auto;
  padding: 12px 22px;
  background: var(--am-primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--am-font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}
.am-hero-form__submit:hover { background: var(--am-primary-deep); }

.am-hero-form--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.am-hero-form--dark .am-hero-form__tag { color: rgba(255, 255, 255, 0.6); border-right-color: rgba(255, 255, 255, 0.16); }
.am-hero-form--dark .am-hero-form__input { color: #fff; }
.am-hero-form--dark .am-hero-form__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.am-hero-form--dark .am-hero-form__submit { background: var(--am-accent); color: var(--am-ink); }
.am-hero-form--dark .am-hero-form__submit:hover { background: var(--am-accent-soft); }

.am-hero__help {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 18px;
  font-family: var(--am-font-sans);
  font-size: 13px;
  color: var(--am-ink-mute);
  letter-spacing: -0.005em;
  align-items: center;
}
.am-hero__help span { display: inline-flex; align-items: center; gap: 4px; }
.am-hero__sample {
  margin-left: auto;
  color: var(--am-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────
   Hero split layout — text on left, dashboard
   on right; both columns equal, contenute nello
   stesso .shell del resto della pagina.
   ───────────────────────────────────────────── */
.am-hero__shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.am-hero__text { position: relative; z-index: 2; }

.am-hero__visual {
  position: relative;
  perspective: 1400px;
  max-width: 600px;
  margin-left: auto;          /* allinea a destra dentro la sua colonna */
  width: 100%;
}
/* Pannello di profondità skewato dietro alla dashboard */
.am-hero__visual::before {
  content: "";
  position: absolute;
  inset: -6px -20px 18px -6px;
  background: color-mix(in oklab, var(--am-ink), transparent 96%);
  border: 1px solid color-mix(in oklab, var(--am-ink), transparent 93%);
  transform: skewX(4deg);
  border-radius: calc(var(--am-radius-lg) + 12px);
  z-index: 0;
  pointer-events: none;
}
.am-hero__visual-deck {
  position: relative;
  z-index: 1;
  transform: skewX(4deg) translateY(-6px);
  border-radius: var(--am-radius-lg);
  overflow: hidden;
  max-height: 560px;
  background: var(--am-bg-card);
  border: 1px solid var(--am-rule);
  box-shadow:
    var(--am-shadow-lg),
    0 24px 60px -22px color-mix(in oklab, var(--am-ink), transparent 80%);
}
/* Sfumatura inferiore: suggerisce "altro contenuto sotto" senza tagliare bruscamente */
.am-hero__visual-deck::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--am-bg-card));
  pointer-events: none;
  z-index: 2;
}
.am-hero__visual-deck .dash {
  border: 0;
  border-radius: var(--am-radius-lg);
  overflow: hidden;
  background: var(--am-bg-card);
}

/* Stack verticale su mobile: niente skew, niente depth */
@media (max-width: 960px) {
  .am-hero__shell {
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 56px);
  }
  .am-hero__visual {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    margin-top: clamp(32px, 5vw, 56px);
  }
  .am-hero__visual::before { display: none; }
  .am-hero__visual-deck { transform: none; }
}

/* ============================================
   LOGO WALL
   ============================================ */
.am-logos {
  padding: 56px 0 32px;
  background: var(--am-bg);
  border-top: 1px solid var(--am-rule-soft);
}
.am-logos__lead {
  text-align: center;
  font-size: 13px;
  color: var(--am-ink-mute);
  letter-spacing: -0.005em;
  margin-bottom: 32px;
  font-family: var(--am-font-sans);
}
.am-logos__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 16px 32px;
  opacity: 0.85;
}
.am-logos__item {
  text-align: center;
  font-family: var(--am-font-display);
  font-style: italic;
  font-size: clamp(15px, 0.9rem + 0.4vw, 19px);
  color: var(--am-ink-mute);
  letter-spacing: -0.02em;
  padding: 12px 8px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.am-logos__item:hover {
  color: var(--am-ink);
  border-bottom-color: var(--am-rule);
}

/* ============================================
   STATS BAND
   ============================================ */
.am-stats {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--am-bg-dark);
  color: #FFFFFF;
}
.am-stats .am-eyebrow { color: var(--am-primary-soft); border-left-color: var(--am-primary); }
.am-stats .am-h2,
.am-stats .am-h2 em { color: #FFFFFF; }
.am-stats .am-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.am-stats .am-stat:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.am-stats .am-stat__n { color: #38BDF8; }
.am-stats .am-stat__l { color: #FFFFFF; }
.am-stats .am-stat__d { color: #C8DCED; }
.am-stats__head {
  max-width: 800px;
  margin: 0 0 48px;
}
.am-stats__head .am-h2 { margin-top: 8px; }
.am-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.am-stat {
  background: var(--am-bg-card);
  border: 1px solid var(--am-rule);
  border-radius: var(--am-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.am-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--am-shadow-md);
}
.am-stat__n {
  font-family: var(--am-font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--am-primary);
}
.am-stat__l {
  font-family: var(--am-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--am-ink);
  letter-spacing: -0.005em;
}
.am-stat__d {
  font-size: 13px;
  color: var(--am-ink-mute);
  line-height: 1.5;
  margin-top: 4px;
}

/* ============================================
   PRODUCT BLOCKS
   ============================================ */
.am-prod {
  padding: clamp(64px, 10vw, 120px) 0;
  background: var(--am-bg);
  position: relative;
}
.am-prod--alt { background: var(--am-bg-alt); }

.am-prod__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.am-prod__inner--reverse { direction: rtl; }
.am-prod__inner--reverse > * { direction: ltr; }

.am-prod__copy { max-width: 560px; }
.am-prod__copy .am-h2 { margin-top: 8px; margin-bottom: 18px; }
.am-prod__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--am-ink-soft);
  margin: 0 0 6px;
}
.am-prod__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ----- Product mock containers ----- */
.am-prod__visual {
  position: relative;
}
.am-mock {
  background: var(--am-bg-card);
  border: 1px solid var(--am-rule);
  border-radius: var(--am-radius-lg);
  overflow: hidden;
  box-shadow: var(--am-shadow-lg);
  transform: translateZ(0);
}
.am-mock__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--am-bg-alt);
  border-bottom: 1px solid var(--am-rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--am-ink-mute);
}
.am-mock__bar-dots { display: inline-flex; gap: 5px; }
.am-mock__bar-dots i {
  width: 8px; height: 8px; border-radius: 99px; background: var(--am-rule);
  display: inline-block;
}
.am-mock__bar-title { flex: 1; color: var(--am-ink-soft); }
.am-mock__bar-state {
  font-weight: 600;
  color: var(--am-success);
  letter-spacing: 0.12em;
  font-size: 10px;
}

/* ----- Mock: report rows ----- */
.am-mock--report .am-mock__body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.am-mock__row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 14px;
  align-items: center;
}
.am-mock__chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--am-ink-mute);
}
.am-mock__bar-fill {
  height: 8px;
  background: color-mix(in oklab, var(--am-primary), white 70%);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}
.am-mock__bar-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--am-primary), color-mix(in oklab, var(--am-primary), white 40%));
  border-radius: inherit;
  animation: shimmer 3s linear infinite;
}
.am-mock__bar-fill--warn { background: color-mix(in oklab, var(--am-accent), white 60%); }
.am-mock__bar-fill--warn::before { background: linear-gradient(90deg, var(--am-warn), var(--am-accent)); }
.am-mock__bar-fill--err { background: color-mix(in oklab, var(--am-err), white 70%); }
.am-mock__bar-fill--err::before { background: linear-gradient(90deg, var(--am-err), color-mix(in oklab, var(--am-err), white 30%)); }
.am-mock__ok   { font-family: var(--font-mono); font-size: 11px; color: var(--am-success); font-weight: 600; }
.am-mock__warn { font-family: var(--font-mono); font-size: 11px; color: var(--am-warn);    font-weight: 600; }
.am-mock__err  { font-family: var(--font-mono); font-size: 11px; color: var(--am-err);     font-weight: 600; }

@keyframes shimmer {
  0% { opacity: 0.85; }
  50% { opacity: 1; }
  100% { opacity: 0.85; }
}

.am-mock__reco {
  margin-top: 10px;
  padding: 18px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--am-primary), white 88%), var(--am-bg-card));
  border: 1px solid color-mix(in oklab, var(--am-primary), white 60%);
  border-radius: var(--am-radius);
}
.am-mock__reco-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--am-primary);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.am-mock__reco-text {
  font-family: var(--am-font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.3;
  color: var(--am-ink);
  margin-bottom: 12px;
}
.am-mock__reco-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.am-mock__reco-rev {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--am-ink-mute);
  letter-spacing: 0.1em;
}

/* ----- Mock: map (surveyors) ----- */
.am-mock__map {
  background: var(--am-bg-alt);
  border-bottom: 1px solid var(--am-rule);
  height: 220px;
}
.am-mock__list {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
}
.am-mock__list-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--am-rule-soft);
}
.am-mock__list-item:last-child { border-bottom: 0; }
.am-mock__avatar {
  width: 36px; height: 36px; border-radius: 99px;
  background: color-mix(in oklab, var(--am-secondary), white 80%);
  color: var(--am-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--am-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.am-mock__list-name {
  font-family: var(--am-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--am-ink);
}
.am-mock__list-loc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--am-ink-mute);
  margin-top: 2px;
}
.am-mock__list-rating {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--am-ink);
  font-weight: 600;
}
.am-mock__list-rating span { color: var(--am-ink-mute); font-weight: 400; font-size: 11px; }

/* ----- Mock: vault ----- */
.am-mock__vault {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.am-mock__file {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--am-bg);
  border: 1px solid var(--am-rule);
  border-radius: var(--am-radius-sm);
  transition: border-color 0.16s, transform 0.16s;
}
.am-mock__file:hover { border-color: var(--am-primary); transform: translateY(-1px); }
.am-mock__file-icon {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--am-err), white 80%);
  color: var(--am-err);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.am-mock__file-name {
  font-family: var(--am-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--am-ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.am-mock__file-sub {
  display: flex;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--am-ink-mute);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.am-mock__file-tag {
  background: color-mix(in oklab, var(--am-primary), white 88%);
  color: var(--am-primary);
  padding: 2px 6px;
  border-radius: 99px;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.am-mock__file-lock {
  font-size: 14px;
  color: var(--am-ink-mute);
}

/* ============================================
   AUDIENCE TABS
   ============================================ */
.am-audience {
  padding: 0 0 clamp(64px, 10vw, 120px);
  margin-top: clamp(-40px, -3vw, -16px);
  background: var(--am-bg);
  position: relative;
  z-index: 2;
}
.am-audience__head { max-width: 800px; margin: 0 0 36px; }
.am-audience__head .am-h2 { margin-top: 8px; }

.am-audience__tabs {
  display: flex;
  width: fit-content;
  background: var(--am-bg-card);
  border: 1px solid var(--am-rule);
  border-radius: 999px;
  padding: 6px;
  margin: 0 auto 36px;
  flex-wrap: wrap;
  box-shadow: var(--am-shadow-sm);
}
.am-audience__tab {
  flex: 1 1 0;
  min-width: 160px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-family: var(--am-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--am-ink-soft);
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
  letter-spacing: -0.005em;
  text-align: center;
}
.am-audience__tab:hover { color: var(--am-ink); }
.am-audience__tab.is-active {
  background: var(--am-ink);
  color: var(--am-bg);
}

.am-audience__panel {
  border: 1px solid var(--am-rule);
  border-radius: var(--am-radius-lg);
  background: var(--am-bg-card);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--am-shadow-md);
}
.am-audience__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.am-audience__copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--am-ink-soft);
  margin: 0 0 8px;
}
.am-audience__copy .am-btn { margin-top: 8px; }

.am-audience__card {
  background: linear-gradient(135deg, color-mix(in oklab, var(--am-primary), white 90%), var(--am-bg-card));
  border: 1px solid color-mix(in oklab, var(--am-primary), white 60%);
  border-radius: var(--am-radius);
  padding: 32px 28px;
  text-align: left;
  position: relative;
}
.am-audience__card::after {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--am-success);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--am-success), transparent 80%);
}
.am-audience__card-num {
  font-family: var(--am-font-display);
  font-weight: 400;
  font-size: clamp(3rem, 1.8rem + 4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--am-primary);
}
.am-audience__card-label {
  font-family: var(--am-font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--am-ink);
  margin-top: 10px;
  letter-spacing: -0.005em;
}
.am-audience__card-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--am-ink-mute);
  margin-top: 6px;
}

/* ============================================
   PRICING
   ============================================ */
.am-pricing {
  padding: clamp(64px, 10vw, 120px) 0;
  background: var(--am-bg-alt);
}
.am-pricing__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.am-pricing__head .am-eyebrow { border-left: 0; padding-left: 0; }
.am-pricing__head .am-h2 { margin-top: 8px; }
.am-pricing__lede {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--am-ink-mute);
}

.am-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.am-price-card {
  background: var(--am-bg-card);
  border: 1px solid var(--am-rule);
  border-radius: var(--am-radius-lg);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.am-price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--am-shadow-md);
}
.am-price-card--featured {
  background: var(--am-ink);
  color: var(--am-bg);
  border-color: var(--am-ink);
  box-shadow: var(--am-shadow-lg);
  transform: translateY(-8px);
}
.am-price-card--featured:hover { transform: translateY(-10px); }
.am-price-card__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--am-accent);
  color: var(--am-ink);
  font-family: var(--am-font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 99px;
  text-transform: uppercase;
}
.am-price-card__head { margin-bottom: 16px; }
.am-price-card__name {
  display: block;
  font-family: var(--am-font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: inherit;
  margin-bottom: 4px;
}
.am-price-card__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--am-ink-mute);
}
.am-price-card--featured .am-price-card__sub { color: rgba(255, 255, 255, 0.6); }

.am-price-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--am-rule);
}
.am-price-card--featured .am-price-card__price { border-bottom-color: rgba(255, 255, 255, 0.16); }
.am-price-card__amount {
  font-family: var(--am-font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.8rem + 1.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.am-price-card--featured .am-price-card__amount { color: var(--am-accent); }
.am-price-card__cur {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--am-ink-mute);
}
.am-price-card--featured .am-price-card__cur { color: rgba(255, 255, 255, 0.55); }

.am-price-card .am-list { flex: 1; margin-bottom: 18px; }
.am-price-card--featured .am-list li { color: rgba(255, 255, 255, 0.85); }
.am-price-card--featured .am-list__check {
  background: rgba(255, 255, 255, 0.12);
  color: var(--am-accent);
}
.am-price-card--featured .am-btn--primary { background: var(--am-accent); color: var(--am-ink); border-color: var(--am-accent); }
.am-price-card--featured .am-btn--primary:hover { background: var(--am-accent-soft); }
.am-price-card .am-btn--ghost { border-color: var(--am-rule); }

.am-pricing__addons {
  margin-top: 56px;
  padding: 32px;
  background: var(--am-bg-card);
  border: 1px solid var(--am-rule);
  border-radius: var(--am-radius-lg);
}
.am-pricing__addons .am-eyebrow {
  display: block;
  margin-bottom: 18px;
}
.am-addons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--am-rule);
}
.am-addon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--am-rule-soft);
  font-family: var(--am-font-sans);
  font-size: 14px;
  color: var(--am-ink);
}
.am-addon:nth-child(3n) { padding-right: 0; }
.am-addon:not(:nth-child(3n)) { padding-right: 18px; border-right: 1px solid var(--am-rule-soft); padding-left: 18px; }
.am-addon:nth-child(3n+1) { padding-left: 0; }
.am-addon__price {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--am-primary);
  letter-spacing: -0.005em;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.am-testimonials {
  padding: clamp(64px, 10vw, 120px) 0;
  background: var(--am-bg);
}
.am-testimonials__head { max-width: 720px; margin: 0 0 48px; }
.am-testimonials__head .am-h2 { margin-top: 8px; }
.am-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.am-quote {
  background: var(--am-bg-card);
  border: 1px solid var(--am-rule);
  border-radius: var(--am-radius);
  padding: 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.am-quote:hover { transform: translateY(-2px); box-shadow: var(--am-shadow-md); }
.am-quote__text {
  font-family: var(--am-font-display);
  font-size: 18px;
  line-height: 1.45;
  color: var(--am-ink);
  margin: 0;
  letter-spacing: -0.01em;
  flex: 1;
}
.am-quote__cite {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--am-font-sans);
}
.am-quote__avatar {
  width: 44px; height: 44px; border-radius: 99px;
  background: color-mix(in oklab, var(--am-primary), white 85%);
  color: var(--am-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--am-font-display);
  font-size: 16px;
  font-weight: 600;
}
.am-quote__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--am-ink);
  letter-spacing: -0.005em;
}
.am-quote__role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--am-ink-mute);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ============================================
   FAQ
   ============================================ */
.am-faq {
  padding: clamp(64px, 10vw, 120px) 0;
  background: var(--am-bg-alt);
}
.am-faq__head { max-width: 720px; margin: 0 0 36px; }
.am-faq__head .am-h2 { margin-top: 8px; }
.am-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--am-rule);
  max-width: 920px;
}
.am-faq__item {
  border-bottom: 1px solid var(--am-rule);
}
.am-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--am-font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--am-ink);
  letter-spacing: -0.005em;
  transition: color 0.16s;
}
.am-faq__item summary:hover { color: var(--am-primary); }
.am-faq__item summary::-webkit-details-marker { display: none; }
.am-faq__plus {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 99px;
  border: 1px solid var(--am-rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--am-font-sans);
  font-size: 18px;
  color: var(--am-ink-soft);
  transition: transform 0.2s ease, background 0.16s ease, color 0.16s;
}
.am-faq__item[open] .am-faq__plus {
  transform: rotate(45deg);
  background: var(--am-primary);
  border-color: var(--am-primary);
  color: #fff;
}
.am-faq__a {
  font-size: 15px;
  line-height: 1.6;
  color: var(--am-ink-soft);
  padding-bottom: 22px;
  max-width: 70ch;
}

/* ============================================
   FINAL CTA
   ============================================ */
.am-cta {
  padding: clamp(48px, 8vw, 96px) 0;
  background: var(--am-bg-dark);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
/* Aurora background gradient su CTA finale */
.am-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(14, 165, 233, 0.25), transparent 60%),
    radial-gradient(60% 50% at 10% 100%, rgba(127, 179, 220, 0.20), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.am-cta > .shell { position: relative; z-index: 1; }
.am-cta .am-cta__h2,
.am-cta .am-cta__h2 em { color: #FFFFFF; }
.am-cta__inner {
  background:
    radial-gradient(800px 400px at 80% 0%, color-mix(in oklab, var(--am-primary), white 10%), transparent 70%),
    var(--am-bg-dark);
  border-radius: var(--am-radius-lg);
  padding: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 64px);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.am-cta__inner::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 20% 100%, color-mix(in oklab, var(--am-accent), transparent 70%), transparent 40%);
  pointer-events: none;
}
.am-cta__h2 {
  font-family: var(--am-font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  color: #fff;
  position: relative;
}
.am-cta__h2 em {
  font-style: italic;
  color: var(--am-accent);
}
.am-cta .am-hero-form {
  margin: 0 auto;
  position: relative;
}
.am-cta__help {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 22px;
  font-family: var(--am-font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1080px) {
  .am-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .am-pricing__grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .am-price-card--featured { transform: none; }
  .am-price-card--featured:hover { transform: translateY(-2px); }
  .am-testimonials__grid { grid-template-columns: 1fr; max-width: 640px; }
  .am-addons { grid-template-columns: repeat(2, 1fr); }
  .am-addon:not(:nth-child(3n)) { padding-right: 18px; border-right: 0; padding-left: 18px; }
  .am-addon:nth-child(2n) { border-right: 0; padding-right: 0; }
  .am-addon:nth-child(2n+1) { padding-left: 0; border-right: 1px solid var(--am-rule-soft); padding-right: 18px; }
}
@media (max-width: 920px) {
  .am-prod__inner,
  .am-prod__inner--reverse { grid-template-columns: 1fr; gap: 40px; direction: ltr; }
  .am-prod__visual { order: 2; }
  .am-audience__inner { grid-template-columns: 1fr; gap: 28px; }
  .am-list--cols { grid-template-columns: 1fr; }
  .am-logos__row { grid-template-columns: repeat(3, 1fr); }
  .am-mock__vault { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .am-hero-form {
    flex-direction: column;
    border-radius: var(--am-radius);
    padding: 8px;
    gap: 8px;
  }
  .am-hero-form__tag { display: none; }
  .am-hero-form__input { padding: 12px 16px; }
  .am-hero-form__submit { width: 100%; padding: 14px; }
  .am-hero__help { flex-direction: column; align-items: flex-start; gap: 8px; }
  .am-hero__sample { margin-left: 0; }
  .am-stats__grid { grid-template-columns: 1fr; }
  .am-logos__row { grid-template-columns: repeat(2, 1fr); }
  .am-audience__tabs { width: 100%; justify-content: stretch; }
  .am-audience__tab { flex: 1; padding: 10px 12px; }
  .am-addons { grid-template-columns: 1fr; }
  .am-addon { padding: 14px 0 !important; border-right: 0 !important; padding-right: 0 !important; padding-left: 0 !important; }
}

/* ============================================
   Photo cropper — circular crop with "ghiera" zoom
   ============================================ */
.cropper-backdrop {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(11, 37, 64, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: cropperFade 0.18s ease both;
}
@keyframes cropperFade { from { opacity: 0; } to { opacity: 1; } }
.cropper {
  width: 100%; max-width: 460px;
  background: var(--bg-card);
  border: 1px solid var(--ink);
  padding: var(--s-7) var(--s-6) var(--s-6);
  display: flex; flex-direction: column;
  gap: 14px;
}
.cropper__head {
  display: flex; justify-content: space-between; align-items: center;
}
.cropper__h {
  margin: 4px 0 0;
  font-size: clamp(22px, 1.4rem + 0.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.cropper__sub {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.cropper__stage {
  position: relative;
  align-self: center;
  margin: 6px 0;
  background: #0B2540;
  cursor: grab;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  border-radius: 4px;
}
.cropper__stage:active { cursor: grabbing; }
.cropper__img {
  position: absolute;
  top: 50%; left: 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
  display: block;
}
/* Circular hole + dimmed corners + ring marker */
.cropper__mask {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(11, 37, 64, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
/* "Ghiera" zoom dial */
.cropper__dial {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 12px;
  align-items: center;
}
.cropper__dial-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
  transition: border-color 0.15s, background 0.15s;
}
.cropper__dial-btn:hover { border-color: var(--ink); background: var(--bg-elev); }
.cropper__dial-track {
  display: flex; align-items: center; gap: 12px;
}
.cropper__dial-input {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.cropper__dial-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--ink), 0 2px 6px rgba(11, 37, 64, 0.25);
  cursor: grab;
  transition: transform 0.12s;
}
.cropper__dial-input::-webkit-slider-thumb:active { transform: scale(1.06); cursor: grabbing; }
.cropper__dial-input::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--ink), 0 2px 6px rgba(11, 37, 64, 0.25);
  cursor: grab;
}
.cropper__dial-pct {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cropper__actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 480px) {
  .cropper { padding: 24px 18px; }
  .cropper__stage { width: 280px !important; height: 280px !important; }
}

/* Photo upload action bar (replace / re-crop) */
.srv-photo__bar {
  display: flex; gap: 6px;
  margin-top: 10px;
  justify-content: center;
}
.srv-photo__btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink-mute);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.srv-photo__btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-elev);
}

/* Dashboard editor — section head row + photo edit area */
.dash-perito__sec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dotted var(--rule);
}
.dash-perito__photo-edit {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items: center;
  padding: 18px;
  margin-bottom: 22px;
  background: var(--bg-elev);
  border: 1px dashed var(--rule);
}
.dash-perito__photo-thumb img {
  width: 120px; height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
  display: block;
}
@media (max-width: 480px) {
  .dash-perito__photo-edit { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ============================================
   Auth — Login & Signup page (left intro / right card)
   ============================================ */
.auth { padding: var(--s-6) 0 var(--s-7); min-height: calc(100vh - 60px); display: flex; align-items: flex-start; }
.auth__shell {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-7);
  align-items: start;
  width: 100%;
}
.auth__left {
  display: flex;
  flex-direction: column;
  padding-right: var(--s-6);
  padding-top: var(--s-5);
}
.auth__h {
  font-size: clamp(34px, 2rem + 2.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
.auth__lede {
  margin: 22px 0 0;
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.auth__right {
  display: flex;
  align-items: flex-start;
  justify-content: center;   /* card centered between left text end and right viewport edge */
}
.auth__card {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--ink);
  background: var(--bg-card);
  padding: var(--s-6);
}
/* Card heading (Accedi / Registrati) — replaces the tab toggle */
.auth__card-head {
  text-align: center;
  margin-bottom: 22px;
}
.auth__card-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 1.4rem + 0.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.auth__card-sub {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.auth__switch {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.auth__switch:hover { color: var(--ink); }

/* OAuth row */
.auth__oauth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.auth__oauth-google {
  display: flex;
  justify-content: center;
  min-height: 40px;
}
.auth__oauth-google-wrap {
  position: relative;
}
/* Real GSI button rendered offscreen so clicks can be forwarded to it */
.auth__oauth-gsi-hidden {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none; /* custom button handles clicks */
  overflow: hidden;
}
.auth__oauth-btn.auth__oauth-btn--google {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: #3c4043;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(60,64,67,.12);
  transition: background 0.15s, box-shadow 0.15s;
}
.auth__oauth-btn.auth__oauth-btn--google:hover {
  background: #f8f9fa;
  box-shadow: 0 2px 6px rgba(60,64,67,.18);
  border-color: #dadce0;
}
.auth__oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 14px 22px;
  background: var(--bg-card);
  border: 1px solid #D9DEE7;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.auth__oauth-btn:hover {
  border-color: var(--ink);
  background: var(--bg-elev);
  box-shadow: 0 2px 8px rgba(11, 37, 64, 0.08);
}
.auth__oauth-btn svg { flex-shrink: 0; }
.auth__oauth-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--bg-elev);
  border: 1px dashed var(--rule);
}
.auth__oauth-note code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--bg);
  padding: 1px 6px;
  border: 1px solid var(--rule);
}

/* OR divider */
.auth__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 18px;
  color: var(--ink-mute);
}
.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.auth__divider span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
}
.auth__form { display: flex; flex-direction: column; gap: 14px; }
.auth__role { display: flex; flex-direction: column; gap: 8px; }
.auth__roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.auth__role-opt {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.auth__role-opt:hover { border-color: var(--ink-mute); }
.auth__role-opt.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.auth__role-l {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
}
.auth__role-d {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.auth__submit { margin-top: 8px; }
.auth__legal {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 860px) {
  .auth__shell { grid-template-columns: 1fr; }
  .auth__left { padding-right: 0; text-align: center; align-items: center; }
  .auth__lede { margin-left: auto; margin-right: auto; }
  .auth__right { justify-content: center; }
}
@media (max-width: 540px) {
  .auth__card { padding: var(--s-6) var(--s-5); }
}

/* ---- Auth scene: cartoon boat illustration ---- */
.auth__scene {
  margin-top: var(--s-6);
  width: 100%;
  max-width: 460px;
  aspect-ratio: 420 / 260;
  border-radius: 18px;
  background: linear-gradient(180deg, #EAF4FB 0%, #D7EAF6 55%, #BFD9EC 100%);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(27, 42, 58, 0.08);
}
.auth__scene-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sun */
.auth__sun {
  fill: #F4C56A;
  transform-origin: 338px 58px;
  animation: auth-sun-pulse 6s ease-in-out infinite;
}
/* Clouds drift */
.auth__cloud ellipse { fill: #FFFFFF; opacity: 0.92; }
.auth__cloud { animation: auth-cloud-drift 18s linear infinite; transform-origin: center; }
.auth__cloud--2 { animation-duration: 26s; animation-delay: -8s; opacity: 0.7; }

/* Boat — bob + tilt */
.auth__boat {
  transform-origin: 210px 178px;
  animation: auth-boat-bob 4.2s ease-in-out infinite;
}
.auth__hull         { fill: #C04A3A; }
.auth__hull-stripe  { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; }
.auth__port         { fill: #FFE9B3; stroke: #1B2A3A; stroke-width: 1.5; }
.auth__sail         { fill: #FFFFFF; stroke: #1B2A3A; stroke-width: 2; stroke-linejoin: round; }
.auth__jib          { fill: #FFF1E0; stroke: #1B2A3A; stroke-width: 2; stroke-linejoin: round; }
.auth__flag         { fill: var(--accent-deep, #C04A3A); }

/* Waves */
.auth__wave--back  { fill: #9CC6E0; opacity: 0.85; animation: auth-wave 7s ease-in-out infinite; }
.auth__wave--front { fill: #6FAACB; animation: auth-wave 5s ease-in-out infinite reverse; }

@keyframes auth-boat-bob {
  0%, 100% { transform: translateY(22px) rotate(-2deg); }
  50%      { transform: translateY(16px) rotate(2deg); }
}
@keyframes auth-wave {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-22px); }
}
@keyframes auth-cloud-drift {
  0%   { transform: translateX(-8px); }
  50%  { transform: translateX(20px); }
  100% { transform: translateX(-8px); }
}
@keyframes auth-sun-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .auth__boat,
  .auth__wave--back,
  .auth__wave--front,
  .auth__cloud,
  .auth__sun { animation: none; }
}

@media (max-width: 860px) {
  .auth__scene { margin-left: auto; margin-right: auto; }
}

/* ============================================
   Dashboard — Perito profile panel
   ============================================ */
.dash-perito-empty {
  border: 1px dashed var(--rule);
  background: var(--bg-card);
  padding: var(--s-7);
  text-align: left;
  max-width: 720px;
}
.dash-perito {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.dash-perito__status {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-6);
  padding: var(--s-7);
  border: 1px solid var(--ink);
  background: var(--bg-card);
}
.dash-perito__status-photo img {
  width: 200px; height: 200px;
  object-fit: cover;
  border: 1px solid var(--rule);
  display: block;
  border-radius: 50%;
}
.dash-perito__status--accent { border-top: 4px solid var(--accent-deep); }
.dash-perito__status--ok     { border-top: 4px solid var(--success); }
.dash-perito__status--warn   { border-top: 4px solid var(--danger); }

.dash-perito__sec {
  border: 1px solid var(--rule);
  background: var(--bg-card);
  padding: var(--s-7);
}
.dash-perito__h {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin: 24px 0 12px;
}
.dash-perito__h:first-child { margin-top: 0; }
.dash-perito__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  border: 1px solid var(--rule);
  background: var(--bg);
}
.dash-perito__spec {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px dotted var(--rule);
}
.dash-perito__spec:nth-last-child(-n+2) { border-bottom: 0; }
.dash-perito__spec-k {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dash-perito__spec-v {
  font-size: 14px;
  color: var(--ink);
}
.dash-perito__save {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 860px) {
  .dash-perito__status { grid-template-columns: 1fr; }
  .dash-perito__status-photo img { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; border-radius: 50%; }
  .dash-perito__grid { grid-template-columns: 1fr; }
  .dash-perito__spec:nth-last-child(2) { border-bottom: 1px dotted var(--rule); }
}

/* ============================================
   Surveyors directory — "Join the network" CTA
   ============================================ */
.srv-join {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-7);
  align-items: stretch;
  border: 1px solid var(--ink);
  background: var(--bg-card);
}
.srv-join__left {
  padding: var(--s-7);
  border-right: 1px solid var(--rule);
}
.srv-join__h {
  font-size: clamp(28px, 1.6rem + 1.6vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 18px 0 0;
  text-wrap: balance;
}
.srv-join__p {
  margin: 18px 0 0;
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.srv-join__cta {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.srv-join__right {
  padding: var(--s-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  align-content: start;
}
.srv-join__bullet {
  background: var(--bg-card);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.srv-join__bnum {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-deep);
}
.srv-join__bt {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.srv-join__bd {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .srv-join { grid-template-columns: 1fr; }
  .srv-join__left { border-right: 0; border-bottom: 1px solid var(--rule); }
  .srv-join__right { grid-template-columns: 1fr; padding: 1px; }
  .srv-join__bullet { padding: 18px 20px; }
}

/* ============================================
   Surveyor signup form (public B2B)
   ============================================ */
.srv-form {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.srv-form__sec {
  border: 1px solid var(--rule);
  background: var(--bg-card);
  padding: var(--s-7);
}
.srv-form__sec[data-err="true"] { border-color: var(--danger); }
.srv-form__sechead {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px dotted var(--rule);
}
.srv-form__num {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-deep);
  padding-top: 8px;
}
.srv-form__h {
  font-family: var(--font-display);
  font-size: clamp(20px, 0.9rem + 0.7vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.srv-form__sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.srv-form__grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-6);
  align-items: start;
}
.srv-form__col { display: flex; flex-direction: column; gap: 18px; }

.srv-row { display: grid; gap: 16px; }
.srv-row--2 { grid-template-columns: 1fr 1fr; }
.srv-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.srv-field { display: flex; flex-direction: column; gap: 6px; }
.srv-field__lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.srv-field__wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--rule);
  background: var(--bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.srv-field__wrap:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11, 37, 64, 0.08);
}
.srv-field__wrap--err,
.srv-field__wrap--err:focus-within {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(158, 42, 30, 0.10);
}
.srv-field__prefix {
  padding: 0 0 0 14px;
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-size: 16px;
}
.srv-field__input {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
}
.srv-field__input::placeholder { color: var(--ink-faint); }
.srv-field__input--ta {
  border: 1px solid var(--rule);
  background: var(--bg);
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.srv-field__input--ta:focus-within,
.srv-field__input--ta:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11, 37, 64, 0.08);
}
.srv-field__input--err {
  border-color: var(--danger);
}
.srv-field__meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.srv-err {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--danger);
}

/* Photo upload */
.srv-photo { display: flex; flex-direction: column; gap: 8px; }
.srv-photo__label {
  position: relative;
  display: block;
  cursor: pointer;
}
.srv-photo__input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.srv-photo__empty,
.srv-photo__img {
  width: 220px; height: 220px;
  border: 2px dashed var(--rule);
  background: var(--bg-elev);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--ink-mute);
  border-radius: 50%;
  transition: border-color 0.15s, background 0.15s;
}
.srv-photo__img {
  border: 1px solid var(--rule);
  object-fit: cover;
  display: block;
}
.srv-photo__hint { text-align: center; }
.srv-photo__label:hover .srv-photo__empty {
  border-color: var(--ink);
  background: var(--bg-card);
  color: var(--ink);
}
.srv-photo__hint {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-top: 8px;
  max-width: 220px;
  line-height: 1.4;
}
.srv-photo[data-err="true"] .srv-photo__empty {
  border-color: var(--danger);
}

/* Note callout */
.srv-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px dashed var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  align-self: end;
}
.srv-note svg { flex-shrink: 0; color: var(--accent-deep); margin-top: 2px; }

/* Chip grid */
.srv-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.srv-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.srv-chip:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
}
.srv-chip.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.srv-chip__check {
  width: 18px; height: 18px;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: transparent;
}
.srv-chip.is-on .srv-chip__check {
  background: var(--bg);
  color: var(--ink);
}

/* Submit row */
.srv-form__submit {
  border-top: 2px solid var(--ink);
  padding-top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.srv-form__legal {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 56ch;
  align-self: flex-start;
  margin: 0;
}
.srv-form__eta {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}

/* Success state */
.srv-success { padding: var(--s-9) 0; }
.srv-success__card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--rule);
  background: var(--bg-card);
  padding: var(--s-8) var(--s-7);
}
.srv-success__stamp {
  width: 72px; height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: color-mix(in oklab, var(--success), white 78%);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
}
.srv-success__title {
  font-size: clamp(28px, 1.8rem + 1.5vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 14px 0 0;
}
.srv-success__sub {
  margin: 18px auto 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.srv-success__id {
  margin-top: 28px;
  padding: 18px;
  background: var(--bg-elev);
  border: 1px dashed var(--rule);
}

/* Responsive */
@media (max-width: 860px) {
  .srv-form__grid { grid-template-columns: 1fr; }
  .srv-form__sechead { grid-template-columns: 1fr; gap: 8px; }
  .srv-form__num { padding-top: 0; }
  .srv-row--2, .srv-row--3 { grid-template-columns: 1fr; }
  .srv-chips { grid-template-columns: repeat(2, 1fr); }
  .srv-photo__empty, .srv-photo__img { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1; border-radius: 50%; }
  .srv-photo__hint { max-width: none; }
  .srv-note { align-self: stretch; }
  .srv-form__submit { align-items: stretch; }
}
@media (max-width: 480px) {
  .srv-chips { grid-template-columns: 1fr; }
  .srv-form__sec { padding: var(--s-6) var(--s-5); }
}

/* ============================================
   Admin panel — Surveyor review
   ============================================ */
.adm__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--ink);
}
.adm__title {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 18px 0 0;
}
.adm__actions { display: flex; gap: 10px; flex-shrink: 0; }

.adm__kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 32px;
}
.adm__kpi-cell {
  background: var(--bg-card);
  padding: 22px;
  text-align: left;
  cursor: pointer;
  border: 0;
  border-top: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.adm__kpi-cell:hover { background: var(--bg-elev); }
.adm__kpi-cell.is-on { background: var(--bg-elev); }
.adm__kpi-cell--accent.is-on { border-top-color: var(--accent-deep); }
.adm__kpi-cell--ok.is-on { border-top-color: var(--success); }
.adm__kpi-cell--warn.is-on { border-top-color: var(--danger); }
.adm__kpi-cell--neutral.is-on { border-top-color: var(--ink); }
.adm__kpi-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(36px, 2rem + 2vw, 56px);
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.adm__kpi-lbl {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin-top: 10px;
  text-transform: uppercase;
}

/* Table */
.adm__table {
  border: 1px solid var(--rule);
  background: var(--bg-card);
}
.adm__row {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr 0.7fr 1fr 1fr 0.7fr;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}
.adm__row:last-child { border-bottom: 0; }
.adm__row--head {
  background: var(--bg-elev);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
  padding: 12px 20px;
  border-bottom: 1px solid var(--rule);
}
.adm__row--approved { background: color-mix(in oklab, var(--success), white 92%); }
.adm__row--rejected { opacity: 0.7; }
.adm__cand {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.adm__avatar {
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; letter-spacing: 0.06em;
  color: var(--ink-mute);
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 50%;
}
.adm__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm__avatar--lg { width: 180px; height: 180px; font-size: 36px; }
.adm__cand-name { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.01em; }
.adm__cand-id { font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.08em; margin-top: 2px; }

.adm__pill {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.adm__pill--pending { color: var(--accent-deep); }
.adm__pill--approved { color: var(--success); }
.adm__pill--rejected { color: var(--danger); }

.adm__row-actions { display: flex; justify-content: flex-end; }

.adm__empty {
  padding: 64px 20px;
  text-align: center;
  border-bottom: 0;
  display: block;
}

/* Detail modal */
.modal--wide { max-width: 980px; width: 92vw; }
.adm-detail {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-6);
}
.adm-detail__photo { display: flex; flex-direction: column; }
.adm-detail__photo img {
  width: 200px; height: 200px;
  object-fit: cover;
  border: 1px solid var(--rule);
  display: block;
  border-radius: 50%;
}
.adm-detail__main h2 { margin: 0; }
.adm-detail__h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin: 22px 0 10px;
}
.adm-detail__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-detail__chip {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.adm-detail__actions {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 2px solid var(--ink);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 860px) {
  .adm__head { flex-direction: column; align-items: stretch; }
  .adm__kpi { grid-template-columns: repeat(2, 1fr); }
  .adm__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }
  .adm__row--head { display: none; }
  .adm-detail { grid-template-columns: 1fr; }
  .adm-detail__photo img { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; border-radius: 50%; }
}