/* Site-level helpers shared across all three directions */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Reset for buttons inside our designs */
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Reveal-on-scroll: respected JS sets data-rv to 'in' */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.rv[data-rv="in"] { opacity: 1; transform: none; }
.rv-1 { transition-delay: 60ms; }
.rv-2 { transition-delay: 120ms; }
.rv-3 { transition-delay: 180ms; }
.rv-4 { transition-delay: 240ms; }
.rv-5 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* Subtle scroll-driven hero parallax helper */
.hero-floats > * {
  will-change: transform;
}

/* Site link micro-interaction */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--teal-700);
}
.link-arrow svg, .link-arrow i { transition: transform 200ms var(--ease-out); }
.link-arrow:hover svg, .link-arrow:hover i { transform: translateX(4px); }

/* Phone glow used in B */
.glow-teal::after {
  content: ""; position: absolute; inset: -40px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(36,95,84,0.16), transparent 70%);
  z-index: 0; pointer-events: none;
}

/* "Tap-pulse" used in B feature */
@keyframes tap-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(36,95,84,0.55); }
  70%  { box-shadow: 0 0 0 28px rgba(36,95,84,0); }
  100% { box-shadow: 0 0 0 0 rgba(36,95,84,0); }
}
.tap-pulse { animation: tap-pulse 2.4s var(--ease-out) infinite; }

/* Marquee logo strip */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }

/* Newsreader display */
.display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--fg-heading);
}
.display-italic { font-style: italic; font-weight: 400; }

/* Tabular numerals */
.tnum { font-variant-numeric: tabular-nums; }

/* Section eyebrow rule */
.eyebrow-rule {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--fg-muted);
}
.eyebrow-rule::before {
  content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.5;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 52px; padding: 0 22px;
  border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 16px; cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out),
              transform 160ms var(--ease-out), border-color 160ms var(--ease-out);
  font-family: inherit;
}
.btn-primary {
  background: var(--teal-600); color: #fff;
}
.btn-primary:hover { background: var(--teal-700); }
.btn-primary:active { background: var(--teal-800); }
.btn-ghost {
  background: transparent; color: var(--fg-heading);
  border-color: var(--border-default);
}
.btn-ghost:hover { background: var(--bg-hover); }
.btn-light {
  background: #fff; color: var(--teal-700); border-color: var(--border-subtle);
}
.btn-light:hover { background: var(--stone-50); }
.btn-on-dark {
  background: #fff; color: var(--teal-800);
}
.btn-on-dark:hover { background: var(--stone-50); }

/* Card hover lift */
.card-lift {
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--stone-300);
}

/* "Hours of admin saved" counter (B) */
.kpi-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 64px;
  letter-spacing: -0.02em;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Pretty text wrap on display headlines */
.display, h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Inline-block phone framing */
.phone-shell {
  width: 320px; aspect-ratio: 320/660; border-radius: 44px;
  background: #1A1914; padding: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 30px 60px -10px rgba(26,25,20,0.30),
    0 12px 24px -8px rgba(26,25,20,0.20);
  position: relative;
}
.phone-screen {
  width: 100%; height: 100%;
  background: var(--stone-50);
  border-radius: 36px; overflow: hidden;
  position: relative;
}
.phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 26px; background: #1A1914; border-radius: 999px;
  z-index: 5;
}

/* Animated scan ring used in C/B  */
@keyframes scan-ring {
  0%   { transform: scale(0.6); opacity: 0.5; }
  60%  { opacity: 0.18; }
  100% { transform: scale(1.4); opacity: 0; }
}
.scan-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--teal-500);
  animation: scan-ring 2.6s var(--ease-out) infinite;
}
.scan-ring:nth-child(2) { animation-delay: 0.9s; }
.scan-ring:nth-child(3) { animation-delay: 1.8s; }

/* ---- Direction-A specific ---- */
.dir-a {
  background: var(--stone-50);
  color: var(--fg-default);
  font-family: var(--font-sans);
}
.dir-a .chapter {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--apricot-500);
  font-size: 18px;
  font-weight: 400;
}

/* ---- Direction-B specific ---- */
.dir-b {
  background: #fff;
  color: var(--fg-default);
  font-family: var(--font-sans);
}

/* ---- Direction-C specific ---- */
.dir-c {
  background: var(--stone-50);
  color: var(--fg-default);
  font-family: var(--font-sans);
}
.dir-c .hero-wash {
  background:
    radial-gradient(60% 80% at 70% 30%, rgba(226,158,99,0.32), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, rgba(36,95,84,0.10), transparent 60%),
    var(--stone-50);
}

/* Simple data ticker for direction A */
@keyframes type-cursor { 50% { opacity: 0; } }
.cursor { display: inline-block; width: 2px; height: 0.9em; background: currentColor;
  vertical-align: -0.05em; margin-left: 2px; animation: type-cursor 1s steps(1) infinite; }

/* Subtle wash on direction-A hero */
.hero-a-bg {
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(226,158,99,0.18), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(36,95,84,0.08), transparent 70%),
    var(--stone-50);
}

/* Floating dot indicator */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float-y { animation: float-y 3.6s ease-in-out infinite; }

/* Live "now" ping */
@keyframes live-ping {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success-500); }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--success-500); animation: live-ping 1.8s var(--ease-out) infinite;
}

/* Gentle hover on feature card icon */
.feat-card:hover .feat-icon { transform: rotate(-6deg) scale(1.04); }
.feat-icon { transition: transform 280ms var(--ease-out); }

/* Direction-C illustrative blob */
.blob {
  background: radial-gradient(120% 100% at 30% 30%, var(--apricot-100), var(--apricot-200));
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}

/* Make text selection match brand */
::selection { background: rgba(36,95,84,0.22); color: var(--fg-heading); }

/* Reset on artboard root so the design fills the artboard cleanly */
.artboard-root {
  width: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

/* ── Accessibility ── */

/* Skip-to-content link, visible on focus */
.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  background: var(--teal-600); color: #fff;
  padding: 12px 20px; border-radius: 8px;
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  z-index: 1000;
  transition: top 160ms var(--ease-out);
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid var(--apricot-300);
  outline-offset: 2px;
}

/* Keyboard focus rings */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--apricot-300);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Server-rendered fallback shown only when JS is disabled */
.noscript-fallback {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 32px;
  font-family: var(--font-sans);
  color: var(--fg-default);
}
.noscript-fallback h1 {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--fg-heading);
  margin: 0 0 16px;
}
.noscript-fallback p { font-size: 17px; line-height: 1.55; color: var(--fg-muted); }
.noscript-fallback ul { padding-left: 20px; line-height: 1.7; }
.noscript-fallback nav a {
  display: inline-block;
  margin: 6px 14px 6px 0;
  color: var(--teal-700);
  font-weight: 600;
  text-decoration: underline;
}
.noscript-fallback .ns-banner {
  background: var(--apricot-50);
  border: 1px solid var(--apricot-200);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--apricot-600);
  margin-bottom: 32px;
}