/*
 * SEYLAC PUBLIC CONSISTENCY V1
 * Purpose: normalize the EXISTING public website only.
 * No content, feature, route, image, form, or business-logic changes.
 * Loaded last on public marketing/legal/SEO pages so historical styles
 * inherit one restrained brand, type, spacing, radius and motion system.
 */
:root {
  --spc-brand: #124e96;
  --spc-brand-hover: #0e427f;
  --spc-brand-soft: #eef4fa;
  --spc-ink: #071d35;
  --spc-body: #52657a;
  --spc-muted: #718196;
  --spc-line: #dfe7ef;
  --spc-surface: #ffffff;
  --spc-soft: #f6f8fb;

  --spc-font: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --spc-radius-control: 10px;
  --spc-radius-card: 18px;
  --spc-radius-feature: 24px;

  --spc-container: 1240px;
  --spc-pad: clamp(20px, 3.2vw, 48px);
  --spc-section: clamp(78px, 8vw, 118px);
  --spc-section-compact: clamp(48px, 5.2vw, 72px);

  --spc-display: clamp(3.2rem, 6.2vw, 5.5rem);
  --spc-h1: clamp(3rem, 5.6vw, 5rem);
  --spc-h2: clamp(2.45rem, 4.3vw, 3.9rem);
  --spc-h3: clamp(1.65rem, 2.45vw, 2.35rem);
  --spc-body-lg: clamp(1.05rem, 1.25vw, 1.22rem);

  --spc-shadow-card: 0 16px 44px rgba(7, 29, 53, .055);
  --spc-shadow-hover: 0 20px 50px rgba(7, 29, 53, .085);
  --spc-ease: cubic-bezier(.2, .7, .2, 1);
  --spc-fast: 180ms;
  --spc-normal: 320ms;
}

/* One typeface and one text language across the public site. */
html body,
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--spc-font) !important;
}

html body {
  color: var(--spc-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html body main :is(h1, h2, h3, h4) {
  font-family: var(--spc-font) !important;
  font-synthesis: none;
  text-wrap: balance;
}

html body main h1 {
  font-size: var(--spc-h1) !important;
  font-weight: 760 !important;
  line-height: .98 !important;
  letter-spacing: -.052em !important;
}

html body main h2 {
  font-size: var(--spc-h2) !important;
  font-weight: 740 !important;
  line-height: 1.03 !important;
  letter-spacing: -.044em !important;
}

html body main h3 {
  font-weight: 720 !important;
  line-height: 1.08 !important;
  letter-spacing: -.033em !important;
}

html body main p {
  font-weight: 430;
  line-height: 1.68;
}

/* Small labels should identify a section, not compete with its title. */
html body main :is(
  .shv-label,
  .s4-eyebrow,
  .sx-feature-label,
  .sv35-eyebrow,
  .features-kicker,
  .solutions-kicker,
  .mp-kicker,
  .iv-kicker,
  .bk-kicker,
  .sr-kicker,
  .legal-kicker,
  .kicker,
  .eyebrow
) {
  font-family: var(--spc-font) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase;
}

/* One container rhythm. Existing structures remain unchanged. */
html body :is(
  .shv-shell,
  .container,
  .features-container,
  .solutions-container,
  .mp-container,
  .iv-container,
  .bk-container,
  .sr-container,
  .legal-container,
  .wrap
) {
  width: min(var(--spc-container), calc(100% - (var(--spc-pad) * 2))) !important;
  margin-inline: auto !important;
}

/* Major public sections: consistent breathing room without adding/removing content. */
html body main :is(
  .shv-hero,
  .s4-features,
  .sv351-about,
  .features-hero,
  .features-section,
  .workflow-section,
  .foundation-section,
  .features-cta,
  .solutions-hero,
  .connected-section,
  .solutions-cta,
  .mp-hero,
  .mp-section,
  .iv-hero,
  .iv-split,
  .iv-einvoice,
  .iv-tracking,
  .iv-steps,
  .iv-detail,
  .iv-faq,
  .iv-cta,
  .bk-hero,
  .bk-split,
  .bk-flow-section,
  .bk-insights,
  .bk-tools,
  .bk-export,
  .bk-faq,
  .bk-cta,
  .sr-hero,
  .legal-hero,
  .legal-shell,
  .section
) {
  padding-top: var(--spc-section) !important;
  padding-bottom: var(--spc-section) !important;
}

/* Proof/trust strips stay intentionally tighter. */
html body main :is(.iv-proof, .bk-proof) {
  padding-top: var(--spc-section-compact) !important;
  padding-bottom: var(--spc-section-compact) !important;
}

/* Homepage keeps every existing feature but gives each story room to breathe. */
html body .s4-story-stack {
  gap: clamp(72px, 8vw, 118px) !important;
}

html body :is(.s4-story-value--trust, .sx-feature-mobile, .sx-tools) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Restrained surfaces: one radius family, one border, much quieter shadows. */
html body main :is(
  .features-card,
  .solution-card,
  .mp-card,
  .iv-card,
  .bk-card,
  .sr-card,
  .legal-card,
  .legal-intro,
  .sx-mobile-metric-card,
  .sx-tools__card,
  .features-panel,
  .solution-panel,
  .mp-panel,
  .iv-panel,
  .bk-panel,
  .ai-panel,
  [class*="feature-card"],
  [class*="solution-card"]
) {
  border-color: var(--spc-line) !important;
  border-radius: var(--spc-radius-card) !important;
  box-shadow: var(--spc-shadow-card) !important;
}

html body main :is(
  .shv-hero-image,
  .s4-value-photo,
  .sx-feature-mobile-visual,
  .sx-tools__photo,
  .features-visual,
  .solutions-visual,
  .mp-visual,
  .iv-visual,
  .bk-visual
) {
  border-radius: var(--spc-radius-feature) !important;
}

/* Do not let decorative gradients create a different brand on each page. */
html body main :is(
  .features-hero,
  .solutions-hero,
  .mp-hero,
  .iv-hero,
  .bk-hero,
  .sr-hero,
  .legal-hero
) {
  --blue: var(--spc-brand) !important;
  --b: var(--spc-brand) !important;
}

/* Buttons: same shape, type and interaction; existing labels/actions are untouched. */
html body :is(
  .btn,
  .shv-button,
  .features-btn,
  .solutions-btn,
  .mp-btn,
  .iv-btn,
  .bk-btn,
  .legal-btn,
  .nav-cta,
  .mobile-cta,
  button[type="submit"]
) {
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 20px !important;
  border-radius: var(--spc-radius-control) !important;
  font-family: var(--spc-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.012em !important;
  box-shadow: none !important;
  transition:
    background-color var(--spc-fast) var(--spc-ease),
    border-color var(--spc-fast) var(--spc-ease),
    color var(--spc-fast) var(--spc-ease),
    transform var(--spc-fast) var(--spc-ease),
    box-shadow var(--spc-fast) var(--spc-ease) !important;
}

html body :is(
  .btn-primary,
  .shv-button-dark,
  .features-btn-primary,
  .solutions-btn-primary,
  .mp-btn-primary,
  .iv-btn-primary,
  .bk-btn-primary,
  .legal-btn,
  .nav-cta,
  .mobile-cta
) {
  border-color: var(--spc-brand) !important;
  background: var(--spc-brand) !important;
  background-image: none !important;
  color: #fff !important;
}

html body :is(
  .btn-primary,
  .shv-button-dark,
  .features-btn-primary,
  .solutions-btn-primary,
  .mp-btn-primary,
  .iv-btn-primary,
  .bk-btn-primary,
  .legal-btn,
  .nav-cta,
  .mobile-cta
):hover {
  border-color: var(--spc-brand-hover) !important;
  background: var(--spc-brand-hover) !important;
  transform: translateY(-1px);
}

html body :is(
  .btn-secondary,
  .btn-outline,
  .shv-button-light,
  .shv-button-ghost,
  .features-btn-secondary,
  .solutions-btn-secondary,
  .mp-btn-secondary,
  .iv-btn-secondary,
  .bk-btn-secondary
) {
  border-color: var(--spc-line) !important;
  background: var(--spc-surface) !important;
  color: var(--spc-ink) !important;
}

/* Text links remain text links; only their brand color/motion is normalized. */
html body main :is(.s4-link, .mp-link, .iv-link, .bk-link, .features-link, .solutions-link) {
  color: var(--spc-brand) !important;
  font-weight: 680 !important;
  transition: color var(--spc-fast) var(--spc-ease), transform var(--spc-fast) var(--spc-ease);
}

/* Inputs/forms share the same radius and focus language. */
html body main :is(input, select, textarea) {
  border-color: var(--spc-line) !important;
  border-radius: var(--spc-radius-control) !important;
  font-family: var(--spc-font) !important;
  box-shadow: none !important;
}

html body :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(18, 78, 150, .22) !important;
  outline-offset: 3px !important;
}

/* Motion: quiet, consistent, and only where motion already exists. */
html body :is(.reveal, [data-reveal], .is-reveal) {
  transition-duration: .52s !important;
  transition-timing-function: var(--spc-ease) !important;
}

html body main :is(
  .features-card,
  .solution-card,
  .mp-card,
  .iv-card,
  .bk-card,
  .sx-tools__card,
  .sx-mobile-metric-card
) {
  transition:
    transform var(--spc-normal) var(--spc-ease),
    box-shadow var(--spc-normal) var(--spc-ease),
    border-color var(--spc-normal) var(--spc-ease) !important;
}

@media (hover:hover) {
  html body main :is(
    .features-card,
    .solution-card,
    .mp-card,
    .iv-card,
    .bk-card,
    .sx-tools__card,
    .sx-mobile-metric-card
  ):hover {
    transform: translateY(-3px);
    border-color: #cfdae5 !important;
    box-shadow: var(--spc-shadow-hover) !important;
  }
}

/* Navigation/footer retain their current structure; just use the same type rhythm. */
html body :is(.seylac-production-nav, .legal-nav-wrap) :is(a, button) {
  font-family: var(--spc-font) !important;
}

html body :is(.seylac-production-nav, .legal-nav-wrap) :is(.nav-links a, .legal-nav-links a, .nav-login, .legal-login) {
  font-size: 14px !important;
  font-weight: 680 !important;
  letter-spacing: -.01em !important;
}

html body :is(.seylac-shared-footer, .legal-footer, footer.site-footer) {
  font-family: var(--spc-font) !important;
}

/* Mobile: preserve current structures while keeping the same hierarchy/rhythm. */
@media (max-width: 760px) {
  :root {
    --spc-pad: 18px;
    --spc-section: clamp(58px, 15vw, 76px);
    --spc-section-compact: 42px;
    --spc-h1: clamp(2.65rem, 12.5vw, 4rem);
    --spc-h2: clamp(2.15rem, 10vw, 3.1rem);
  }

  html body main h1 {
    line-height: 1 !important;
    letter-spacing: -.047em !important;
  }

  html body main h2 {
    line-height: 1.04 !important;
  }

  html body .s4-story-stack {
    gap: 64px !important;
  }

  html body :is(.btn, .shv-button, .features-btn, .solutions-btn, .mp-btn, .iv-btn, .bk-btn, .legal-btn) {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* V1.1: the hero already has its own minimum height and internal spacing.
   The generic section padding above added 2 x 118px on desktop and
   duplicated mobile hero spacing. Keep its image and content unchanged. */
html body main .shv-home section.shv-hero#home {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}