/* ============================================================
   hellodilly.com — shared Series-B craft layer
   Tokens + elevators for every marketing page that uses the
   shared nav/footer. Homepage-specific composition stays in
   home-craft.css; this file is the sitewide craft language.
   Brand blue #1677FF / deep #1059BF. No purple. Anxiety copy stays.
   ============================================================ */

:root {
  --sc-bg: #eef3f9;
  --sc-bg-2: #f5f8fc;
  --sc-ink: #0e1428;
  --sc-muted: rgba(14, 20, 40, 0.58);
  --sc-soft: rgba(14, 20, 40, 0.40);
  --sc-navy: #1677FF;
  --sc-navy-deep: #1059BF;
  --sc-line: rgba(22, 119, 255, 0.12);
  --sc-white: #ffffff;
  --sc-display: "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  --sc-body: "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  --sc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sc-nav: 68px;
  --sc-shadow-soft: 0 12px 40px rgba(16, 40, 90, 0.08);
  --sc-shadow-lift: 0 24px 64px rgba(16, 40, 90, 0.14);
  --sc-cta-shadow: 0 8px 20px rgba(22, 119, 255, 0.28);
  --sc-cta-shadow-hover: 0 12px 26px rgba(22, 119, 255, 0.36);
}

/* Align homepage craft vars when both sheets load */
:root {
  --hc-bg: var(--sc-bg);
  --hc-bg-2: var(--sc-bg-2);
  --hc-ink: var(--sc-ink);
  --hc-muted: var(--sc-muted);
  --hc-soft: var(--sc-soft);
  --hc-navy: var(--sc-navy);
  --hc-navy-deep: var(--sc-navy-deep);
  --hc-line: var(--sc-line);
  --hc-white: var(--sc-white);
  --hc-display: var(--sc-display);
  --hc-body: var(--sc-body);
  --hc-ease: var(--sc-ease);
  --hc-nav: var(--sc-nav);
  --hc-shadow-soft: var(--sc-shadow-soft);
  --hc-shadow-lift: var(--sc-shadow-lift);
}

/* ── Shared CTA depth (hooks common class names without rewrite) ── */
.dnav-cta,
.hc-cta,
.dp-cta,
.sa-cta,
.for-cta,
.alt-cta,
.ab-cta,
a.btn-primary,
.btn-primary,
.rv2-cta,
.cta-primary {
  border-bottom-color: var(--sc-navy-deep) !important;
}

/* Pricing page — Grammarly/Linear restraint: solid cards, one accent, no glass */
body[data-nav-page="pricing"] {
  font-family: var(--sc-body) !important;
  background: #f7f8fa !important;
}

body[data-nav-page="pricing"] .dp-page {
  padding-top: clamp(2.5rem, 6vh, 3.5rem);
  padding-bottom: clamp(3.5rem, 8vh, 5rem);
}

body[data-nav-page="pricing"] .dp-eyebrow {
  letter-spacing: 0.14em;
  font-weight: 800;
  color: var(--sc-navy);
  opacity: 0.85;
}

body[data-nav-page="pricing"] .dp-hero-title {
  font-family: var(--sc-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--sc-ink);
}

body[data-nav-page="pricing"] .dp-hero-title em {
  font-style: normal;
  color: var(--sc-navy);
}

body[data-nav-page="pricing"] .dp-hero-sub {
  color: var(--sc-muted);
  letter-spacing: -0.012em;
}

body[data-nav-page="pricing"] .dp-plan {
  border-radius: 20px !important;
  border: 1px solid rgba(14, 20, 40, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  background: #fff !important;
}

body[data-nav-page="pricing"] .dp-plan--premium {
  border-color: rgba(22, 119, 255, 0.38) !important;
  box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.12) !important;
}

body[data-nav-page="pricing"] .dp-cta:not(.dp-cta--ghost),
body[data-nav-page="pricing"] a.dp-cta:not(.dp-cta--ghost) {
  background: var(--sc-navy) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  transition: transform 0.14s ease, background 0.14s ease !important;
}

body[data-nav-page="pricing"] .dp-cta:not(.dp-cta--ghost):hover,
body[data-nav-page="pricing"] a.dp-cta:not(.dp-cta--ghost):hover {
  filter: none;
  transform: none;
  background: var(--sc-navy-deep) !important;
  box-shadow: none !important;
}

/* Stay-ahead hub */
body[data-nav-page="stay-ahead"] {
  font-family: var(--sc-body) !important;
}

body[data-nav-page="stay-ahead"] .sa-title,
body[data-nav-page="stay-ahead"] .sa-hero-inner h1,
body[data-nav-page="stay-ahead"] .sa-hero h1 {
  font-family: var(--sc-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em;
  color: var(--sc-ink);
}

body[data-nav-page="stay-ahead"] .sa-title em {
  font-style: normal;
  color: var(--sc-navy);
}

body[data-nav-page="stay-ahead"] .sa-sub,
body[data-nav-page="stay-ahead"] .sa-hero-inner p,
body[data-nav-page="stay-ahead"] .sa-lede {
  color: var(--sc-muted);
  letter-spacing: -0.011em;
}

body[data-nav-page="stay-ahead"] .sa-cta:not(.sa-cta-ghost) {
  background: var(--sc-navy) !important;
  border-bottom: 3px solid var(--sc-navy-deep) !important;
  box-shadow: var(--sc-cta-shadow) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

body[data-nav-page="stay-ahead"] .sa-section,
body[data-nav-page="stay-ahead"] section.sa-block {
  padding-top: clamp(3rem, 7vh, 4.5rem);
  padding-bottom: clamp(3rem, 7vh, 4.5rem);
}

/* About */
body[data-nav-page="about"] {
  font-family: var(--sc-body) !important;
}

body[data-nav-page="about"] .ab-hero h1 {
  font-family: var(--sc-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em;
  color: var(--sc-ink);
}

body[data-nav-page="about"] .ab-hero p {
  color: var(--sc-muted);
}

/* Success */
body[data-nav-page="success"] {
  font-family: var(--sc-body) !important;
}

body[data-nav-page="success"] h1 {
  font-family: var(--sc-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
}

/* for/* audience pages — keep dark heroes, elevate chrome below */
body[data-nav-hero="dark"] .for-body,
body[data-nav-hero="dark"] .for-section,
body[data-nav-hero="dark"] .alt-body {
  font-family: var(--sc-body) !important;
}

body[data-nav-hero="dark"] .for-body h2,
body[data-nav-hero="dark"] .alt-body h2 {
  font-family: var(--sc-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  color: var(--sc-ink);
}

body[data-nav-hero="dark"] .for-cta,
body[data-nav-hero="dark"] .alt-cta,
body[data-nav-hero="dark"] a.for-cta {
  background: var(--sc-navy) !important;
  border-bottom: 3px solid var(--sc-navy-deep) !important;
  box-shadow: var(--sc-cta-shadow) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
}

/* Soft sky atmosphere upgrade for rv2-sky pages (pricing, stay-ahead, about) */
.rv2-sky {
  background: linear-gradient(180deg,
    #4f8fcf 0%,
    #6fa8dc 12%,
    #93bee4 28%,
    #c5daf0 52%,
    #e4eef8 78%,
    #eef4fa 100%) !important;
}

.rv2-sky::after {
  background: linear-gradient(180deg, rgba(238, 244, 250, 0) 0%, #eef3f9 78%) !important;
}

/* Process rail utility (opt-in) */
.sc-rail {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.15rem;
  margin: 1.25rem auto 0;
  padding: 0;
  max-width: 640px;
}

.sc-rail li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sc-ink);
}

.sc-rail li:not(:last-child)::after {
  content: "";
  width: 28px;
  height: 3px;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sc-navy), rgba(22, 119, 255, 0.25));
}

.sc-rail .sc-rail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sc-navy);
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.15);
  flex-shrink: 0;
}

/* Shared footer polish when present */
.hc-footer.rv2-footer,
footer.rv2-footer.hc-footer {
  background: #0c1222;
}

/* Press / legal light pages on main domain */
body[data-nav-page="press"] h1,
body[data-nav-page="investors"] h1 {
  font-family: var(--sc-display) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
}

/* Gentle section breathing for long editorial pages */
.alt-body,
.for-body,
.ab-section,
.sa-section {
  letter-spacing: -0.011em;
}

@media (max-width: 820px) {
  .sc-rail {
    flex-direction: column;
    align-items: flex-start;
    max-width: 280px;
  }
  .sc-rail li:not(:last-child)::after {
    display: none;
  }
}