/* <picture> wrappers are layout-neutral */
picture { display: contents; }
picture > source { display: none; }

/* Self-hosted fonts: Latin subset of the Google Fonts files, same weight ranges the pages requested
   (Syne 400-800; DM Sans opsz 9-40, wght 300-500, italic 300). */
@font-face { font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/syne-400-800.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/dm-sans-300-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/dm-sans-italic-300.woff2") format("woff2"); }

/* NightShift polish layer — loaded after each page's inline styles.
   Tones down template-style effects: scroll-reveal, gradient text, glow orbs,
   pill badges, eyebrow labels, frosted nav. Delete a rule here to restore it. */

/* Content is always visible — no scroll-reveal */
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Decorative glow orbs and pulsing dots */
.bg-orb, .bg-orb-1, .bg-orb-2, .bg-orb-3 { display: none !important; }
.badge-dot { display: none !important; animation: none !important; }

/* Pill badges above headlines become quiet text */
.hero-badge, .page-badge, .case-badge {
  background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
  color: var(--text3) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 14px !important; font-weight: 500 !important;
}

/* Small uppercase eyebrow labels over every heading */
.section-label, .sec-eyebrow, .eyebrow, .aside-kicker { display: none !important; }

/* Gradient / shimmering headline text becomes solid */
.hero-headline em, .page-headline em, .case-headline em, .pricing-hero h1 em, .text-gradient {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; color: var(--text2) !important; animation: none !important;
}

/* Calmer headline scale */
.hero-headline { font-size: clamp(34px, 5.4vw, 62px) !important; letter-spacing: -.025em !important; line-height: 1.08 !important; }
/* "Automatically" is about 11x the font size wide, so on phones the 34px floor
   split it mid-word ("Automaticall / y"). Scale down until it fits. */
@media (max-width: 480px) { .hero-headline { font-size: min(34px, calc((100vw - 40px) / 11)) !important; } }

/* Solid nav instead of frosted glass */
.nav, .nav-inner { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.nav-inner { background: var(--bg, #06080f) !important; }

/* Buttons: no glow, no lift */
.btn-primary, .btn-primary:hover, .btn-secondary:hover, .price-cta:hover { box-shadow: none !important; transform: none !important; }

/* Homepage: real product section */
.real-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: center; }
.real-shot { margin: 0; }
.real-shot img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--border2, rgba(var(--tint),.13)); }
.real-shot figcaption { font-size: 12px; color: var(--text3); margin-top: 10px; }
.real-side h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.real-side > p { color: var(--text2); font-size: 15px; margin: 0 0 20px; line-height: 1.6; }
.audio-item { padding: 12px 0; border-top: 1px solid var(--border, rgba(var(--tint),.08)); }
.audio-item:last-of-type { border-bottom: 1px solid var(--border, rgba(var(--tint),.08)); }
.audio-title { font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.audio-item audio { width: 100%; height: 36px; }
.real-stat { margin-top: 20px !important; font-size: 14px !important; color: var(--text2); }
.real-stat strong { color: var(--text); font-weight: 600; }
.real-stat a { color: var(--accent); text-decoration: none; white-space: nowrap; }
@media (max-width: 860px) { .real-grid { grid-template-columns: 1fr; gap: 28px; } }
.demo-section { padding-top: 24px !important; }
.audio-item audio { color-scheme: dark; }
.ptag-core, .ptag-pro { display: none !important; }

/* Phones under 480px can't fit Dashboard + the theme toggle + Book a demo +
   the menu button in the header (the menu button was pushed off-screen).
   Dashboard stays in the mobile menu. */
@media (max-width: 480px) {
  .nav-right > a[href="/dashboard/"] { display: none; }
}

/* Just above the 860px menu breakpoint the full desktop nav is ~40px too wide. */
@media (min-width: 861px) and (max-width: 920px) {
  .nav-links a { padding-left: 9px; padding-right: 9px; }
}

/* Single-column grids on phones: let columns shrink below their content's
   min-content width instead of pushing the page sideways. */
@media (max-width: 640px) { .cta-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .calc-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 1fr); } }


/* Long email address in the contact cards can wrap on narrow phones. */
.cta-card a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Contrast (preview): white on the #4f8cff accent is 3.2:1. Keep the blue
   backgrounds; labels go near-black (6.2:1). */
.nav-cta, .btn-primary, .btn-primary-sm, .cta-filled { color: #06080f; }
/* Inline text links need more than colour to stand out from body text. */
.real-stat a { text-decoration: underline; text-underline-offset: 3px; }
.btn-plan.btn-solid { color: #06080f; }
/* Footer credit was faded to opacity .5 (2:1 on near-black). */
.footer-credit { opacity: 1; }