/* =============================================================================
   Landing Page — Zoe (per docs/zoe_design_spec.md)
   Indigo-violet AI/tech accent on warm stone surfaces.
   ============================================================================= */

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* ── Navigation ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: var(--space-6) var(--space-8);
  background: hsla(40, 30%, 98%, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: all var(--duration-normal) var(--ease-default);
}

.navScrolled {
  padding: var(--space-4) var(--space-8);
  border-bottom-color: var(--color-border-subtle);
  background: hsla(40, 30%, 98%, 0.95);
}

.navInner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navLogo {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text-primary);
  letter-spacing: -0.04em;
  text-transform: none;
}

.navLogoAccent {
  color: var(--color-brand-900);
  margin-left: 2px;
}

.navLinks {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.navLink {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-tight);
  transition: color var(--duration-fast) var(--ease-default);
  font-weight: 500;
}

.navLink:hover {
  color: var(--color-accent-500);
}

/* Sign in — the returning visitor's way back in. Outlined, not filled:
   the page has one primary action and this is not it. The pairing of an
   outlined control beside a filled one is the hero's own idiom
   (.btnSecondary next to .btnPrimary), so nothing new is invented here.
   The border also gives the 32px target a visible edge rather than an
   invisible hit area. Focus comes from the global :focus-visible rule in
   core/css/reset.css. */
.navSignIn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  /* Less the 1px border on each edge, so this sits at exactly the height
     of the filled .navCta beside it rather than 2px taller. */
  padding: calc(var(--space-2) - 1px) var(--space-5);
  border: 1px solid var(--color-brand-500);
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brand-900);
  letter-spacing: var(--tracking-tight);
  /* Named properties rather than `all`: `all` includes outline-color, which
     made the focus ring fade in over 300ms instead of appearing at once. */
  transition:
    border-color var(--duration-normal) var(--ease-default),
    color var(--duration-normal) var(--ease-default);
}

.navSignIn:hover {
  border-color: var(--color-accent-500);
  color: var(--color-accent-600);
}

.navCta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-6);
  background: var(--color-accent-500);
  color: #FFFFFF;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 6px;
  transition: all var(--duration-normal) var(--ease-default);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

.navCta:hover {
  background: var(--color-accent-600);
  transform: translateY(-1px);
}

/* ── Hero ── */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--header-height) + var(--space-24)) var(--space-6) var(--space-24);
  min-height: 90vh;
  position: relative;
  overflow: hidden;
}

.heroContent {
  max-width: 840px;
  position: relative;
  z-index: 2;
}

.heroBadge {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-200);
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent-600);
  margin-bottom: var(--space-10);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.heroTitle {
  font-family: var(--font-display);
  font-size: clamp(var(--text-5xl), 7vw, var(--text-6xl));
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.05em;
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}

.heroTitleAccent {
  color: var(--color-accent-500);
  display: block;
  margin-top: -0.1em;
}

.heroSubtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-12);
  max-width: 620px;
  margin-inline: auto;
  font-weight: 400;
}

.heroActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.btnPrimary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-10);
  background: var(--color-brand-900);
  color: var(--color-bg-primary);
  font-size: var(--text-md);
  font-weight: 600;
  border-radius: 6px;
  transition: all var(--duration-normal) var(--ease-default);
  border: none;
  cursor: pointer;
  letter-spacing: var(--tracking-tight);
}

.btnPrimary:hover {
  background: var(--color-accent-500);
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.btnSecondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-10);
  background: transparent;
  color: var(--color-brand-900);
  font-size: var(--text-md);
  font-weight: 600;
  border-radius: 6px;
  border: 1.5px solid var(--color-brand-300);
  transition: all var(--duration-normal) var(--ease-default);
  cursor: pointer;
  letter-spacing: var(--tracking-tight);
}

.btnSecondary:hover {
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
}

/* ── Horizontal Rule between sections ── */
.divider {
  max-width: var(--max-content-width);
  margin: 0 auto;
  border: none;
  border-top: 1px solid var(--color-border-subtle);
}

/* ── Features ── */
.features {
  padding: var(--space-24) var(--space-6);
  background: var(--color-bg-secondary);
}

.featuresInner {
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.sectionHeader {
  margin-bottom: var(--space-16);
  text-align: left;
}

.sectionHeaderCentered {
  text-align: center;
}

.sectionEyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent-500);
  margin-bottom: var(--space-4);
}

.sectionTitle {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: 400;
  color: var(--color-text-primary);
  letter-spacing: -0.04em;
  margin-bottom: var(--space-6);
  line-height: var(--leading-tight);
}

.sectionHeaderCentered .sectionTitle {
  margin-inline: auto;
  max-width: 850px;
}

.sectionSubtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 650px; /* Consistent default max-width */
  margin-bottom: 0;
  line-height: var(--leading-relaxed);
  text-wrap: balance;
}

.sectionHeaderCentered .sectionSubtitle {
  margin-inline: auto;
}

.featuresGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
  margin-top: var(--space-16);
}

.featureCard {
  padding: var(--space-10);
  background: var(--color-surface);
  border: 1px solid var(--color-brand-200);
  border-radius: 8px;
  transition: all var(--duration-normal) var(--ease-default);
}

.featureCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  border-color: var(--color-accent-400);
}

.featureIcon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.featureIcon svg {
  width: 28px;
  height: 28px;
}

.featureIconNavy {
  background: #EDE9FE;
  color: #7C3AED;
}

.featureIconGreen {
  background: #ECFDF5;
  color: #059669;
}

.featureIconGold {
  background: #FEF3C7;
  color: #D97706;
}

.featureIconSlate {
  background: #F1F5F9;
  color: #475569;
}

.featureCard h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.featureCard p {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Trust / Security ── */
.trust {
  padding: var(--space-24) var(--space-6);
  background: var(--color-bg-primary);
}

.trustInner {
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.trustGrid {
  display: grid;
  /* Columns size to the cards present and the row centers, so removing or
     adding a card never leaves an empty column beside the others. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  gap: var(--space-12);
  text-align: center;
}

.trustItem {
  text-align: center;
}

.trustIcon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-100);
  border: 1px solid var(--color-brand-200);
  margin: 0 auto var(--space-6);
  color: var(--color-brand-600);
}

.trustIcon svg {
  width: 22px;
  height: 22px;
}

.trustItem h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.trustItem p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Pricing ── */
.pricing {
  padding: var(--space-24) var(--space-6);
}

.pricingInner {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}

.pricingCard {
  margin-top: var(--space-12);
  padding: var(--space-12);
  background: var(--color-surface);
  border: 2px solid var(--color-brand-200);
  border-radius: 12px;
  text-align: left;
}

.pricingLabel {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent-500);
  margin-bottom: var(--space-4);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.pricingAmount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  text-align: center;
  letter-spacing: -0.01em;
}

.pricingPeriod {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-text-secondary);
}

.pricingNote {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-8);
  text-align: center;
  line-height: var(--leading-relaxed);
}

.pricingDivider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-6) 0;
}

.pricingFeatures {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.pricingFeature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.pricingCheck {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: #059669;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* ── CTA ── */
.cta {
  padding: var(--space-24) var(--space-6);
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  text-align: center;
}

.ctaInner {
  max-width: 600px;
  margin: 0 auto;
}

.ctaLinkBtn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-10);
  background: white;
  color: var(--color-brand-900);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  border-radius: 6px;
  text-decoration: none;
  transition: all var(--duration-normal) var(--ease-default);
}

.ctaLinkBtn:hover {
  background: var(--color-accent-100);
  transform: translateY(-2px);
}

.ctaTitle {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 400;
  color: white;
  margin-bottom: var(--space-6);
  letter-spacing: -0.04em;
}

.ctaSubtitle {
  font-size: var(--text-xl);
  color: var(--color-bg-tertiary);
  margin-bottom: var(--space-10);
  line-height: var(--leading-relaxed);
}

.ctaEmailForm {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto;
}

.ctaEmailInput {
  flex: 1;
  padding: var(--space-4) var(--space-6);
  background: hsla(0, 0%, 100%, 0.1);
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: 6px;
  color: white;
  font-size: var(--text-base);
  transition: all var(--duration-fast) var(--ease-default);
}

.ctaEmailInput::placeholder {
  color: hsla(0, 0%, 100%, 0.4);
}

.ctaEmailInput:focus {
  border-color: hsla(0, 0%, 100%, 0.7);
  background: hsla(0, 0%, 100%, 0.2);
}

.ctaBtnPrimary {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  background: white;
  color: var(--color-brand-900);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-normal) var(--ease-default);
  letter-spacing: var(--tracking-tight);
}

.ctaBtnPrimary:hover {
  background: var(--color-accent-100);
  transform: translateY(-2px);
}

.ctaBtnPrimary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.ctaEmailInput:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ctaSuccess {
  font-size: var(--text-base);
  color: hsla(0, 0%, 100%, 0.9);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

.ctaError {
  font-size: var(--text-sm);
  color: #fca5a5;
  margin-top: var(--space-2);
  text-align: center;
  width: 100%;
}

/* ── Footer ── */
.footer {
  padding: var(--space-12) var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-primary);
}

.footerInner {
  max-width: var(--max-content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footerCopyright {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.footerLinks {
  display: flex;
  gap: var(--space-10);
}

.footerLink {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  transition: color var(--duration-fast);
}

.footerLink:hover {
  color: var(--color-accent-500);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .featuresGrid {
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {
  /* The three section anchors drop out on a phone. They scroll to
     sections the visitor is already scrolling toward, and dropping them
     is what makes room for the two controls beside them.

     Until 2026-08-27 this block hid the whole of `.navLinks`. A phone
     visitor then had no way to sign up, on the traffic that is mostly
     phones, and no way back in if they already had an account (bead
     zoe-039). The bare `.navLink` on the legal and apply pages carries
     no `navLinkSection`, so their "Return home" stays. */
  .navLinkSection {
    display: none;
  }

  /* At the desktop gap and padding the logo and the two controls measure
     329px, and the nav's 32px gutters leave 311px of a 375px screen. The
     values below bring the row to 261px. They shrink both controls
     rather than drop one, because each is the only control of its kind
     on the page. Measured in Chromium at 375px, 2026-08-27. */
  .navLinks {
    gap: var(--space-3);
  }

  .navSignIn,
  .navCta {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .heroTitle {
    font-size: var(--text-5xl);
  }

  .featuresGrid {
    grid-template-columns: 1fr;
  }

  .trustGrid {
    grid-template-columns: 1fr;
  }

  .ctaEmailForm {
    flex-direction: column;
  }

  .footerInner {
    flex-direction: column;
    gap: var(--space-6);
    text-align: center;
  }
}

/* =============================================================================
   Firm-signup application form (sf*)
   Lives inside the dark .cta section as a light "application card" — a
   formal document being submitted into the dark folio.
   ============================================================================= */

.sfForm {
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-10) var(--space-12);
  max-width: 820px;
  margin: 0 auto;
  color: var(--color-text-primary);
  animation: sfFormFadeIn var(--duration-slower) var(--ease-default);
}

@keyframes sfFormFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sfSection {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-10) 0;
}

.sfSection:last-of-type {
  margin-bottom: var(--space-8);
}

.sfSectionLegend {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-brand-900);
  letter-spacing: -0.01em;
  padding: 0 0 var(--space-3) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  width: 100%;
}

.sfFieldRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.sfFieldRow:last-child {
  margin-bottom: 0;
}

.sfField {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

.sfSection > .sfField + .sfField,
.sfSection > .sfFieldRow + .sfField,
.sfSection > .sfField + .sfFieldRow {
  margin-top: var(--space-5);
}

.sfLabel {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.sfRequired {
  color: var(--color-accent-600);
  font-weight: 600;
}

.sfInput,
.sfTextarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-brand-900);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default),
              background-color var(--duration-fast) var(--ease-default);
  outline: none;
  line-height: 1.5;
}

.sfInput:hover:not(:focus):not(:disabled),
.sfTextarea:hover:not(:focus):not(:disabled) {
  border-color: var(--color-brand-400);
}

.sfInput:focus,
.sfTextarea:focus {
  border-color: var(--color-accent-600);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px hsla(262, 83%, 58%, 0.12);
}

.sfInput::placeholder,
.sfTextarea::placeholder {
  color: var(--color-brand-400);
}

.sfInput:disabled,
.sfTextarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-brand-100);
}

.sfTextarea {
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-sans);
}

.sfInputError,
.sfInputError:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px hsla(0, 50%, 55%, 0.14);
}

.sfFieldError {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-error);
  line-height: 1.4;
}

/* ── CalBar prefill card ── */

.sfPrefillCard {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-200);
  border-left: 3px solid var(--color-accent-600);
  border-radius: var(--radius-md);
  animation: sfPrefillFadeIn var(--duration-normal) var(--ease-default);
}

@keyframes sfPrefillFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sfPrefillCardOk {
  background: var(--color-accent-50);
  border-color: var(--color-accent-200);
  border-left-color: var(--color-accent-600);
}

.sfPrefillCardWarn {
  background: hsl(38, 80%, 96%);
  border-color: hsl(38, 60%, 82%);
  border-left-color: var(--color-warning);
}

.sfPrefillLoading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.sfPrefillSpinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-accent-200);
  border-top-color: var(--color-accent-600);
  animation: sfPrefillSpin 700ms linear infinite;
  flex-shrink: 0;
}

@keyframes sfPrefillSpin {
  to { transform: rotate(360deg); }
}

.sfPrefillBadge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-3);
}

.sfPrefillCardWarn .sfPrefillBadge {
  color: var(--color-warning);
}

.sfPrefillName {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-brand-900);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}

.sfPrefillSubtitle {
  font-size: var(--text-md);
  color: var(--color-brand-700);
  line-height: 1.5;
  margin-bottom: var(--space-1);
}

.sfPrefillMeta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.sfPrefillMessage {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-brand-700);
  line-height: 1.6;
}

.sfPrefillCardWarn .sfPrefillMessage {
  color: hsl(30, 40%, 30%);
}

.sfPrefillActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.sfPrefillBtnPrimary {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: var(--color-brand-900);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-brand-900);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.sfPrefillBtnPrimary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
}

.sfPrefillBtnGhost {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: transparent;
  color: var(--color-brand-700);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-brand-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.sfPrefillBtnGhost:hover {
  background: #FFFFFF;
  border-color: var(--color-brand-500);
  color: var(--color-brand-900);
}

/* ── Submit row ── */

.sfSubmitRow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
}

.sfSubmit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-10);
  background: var(--color-brand-900);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-brand-900);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.sfSubmit:hover:not(:disabled) {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.sfSubmit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px hsla(262, 83%, 58%, 0.25);
}

.sfSubmit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.sfFormError {
  font-size: var(--text-sm);
  color: var(--color-error);
  line-height: 1.5;
}

.sfFormNotice {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Success state ── */

.sfSuccess {
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
  border-top: 3px solid var(--color-accent-600);
  animation: sfSuccessFadeIn var(--duration-slower) var(--ease-default);
}

@keyframes sfSuccessFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sfSuccessEyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-4);
}

.sfSuccessTitle {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  color: var(--color-brand-900);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}

.sfSuccessBody {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.sfSuccessBody:last-child {
  margin-bottom: 0;
}

/* ── Responsive ── */

@media (max-width: 768px) {
  .sfForm {
    padding: var(--space-6);
  }

  .sfFieldRow {
    grid-template-columns: 1fr;
  }

  .sfSuccess {
    padding: var(--space-8);
  }

  .sfSuccessTitle {
    font-size: var(--text-3xl);
  }

  .sfIntroText {
    font-size: var(--text-xl);
  }
}