/* ATHERLINE — Live Signal design system. Entry point: @import lines only. */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");

/* A11y: visible keyboard focus everywhere (beats inline outline:none) */
*:focus-visible { outline: 2px solid #0c7057 !important; outline-offset: 2px !important; border-radius: 4px; }

/* ── Systems catalog treatment (added 2026-07-16) ────────────────
   Underglow on every card; the AI Receptionist card is the hero —
   teal/lime tinted with arrows pointing at it. */
.sys-card { box-shadow: 0 0 30px rgba(24,207,160,0.16), 0 14px 44px rgba(7,8,11,0.10) !important; }
.sys-hero {
  position: relative !important;
  border: 1px solid #18cfa0 !important;
  background: linear-gradient(180deg, rgba(24,207,160,0.12), rgba(212,242,94,0.12)), var(--card) !important;
  box-shadow: 0 0 54px rgba(212,242,94,0.38), 0 0 26px rgba(24,207,160,0.34), 0 14px 44px rgba(7,8,11,0.10) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sys-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 70px 8px rgba(212,242,94,0.5), 0 0 32px rgba(24,207,160,0.4), 0 18px 50px rgba(7,8,11,0.12) !important;
}
/* all sketch arrows read in night mode: token flips to bright teal in dark */
.float-arrow path { stroke: var(--teal-text); }
/* hero-card arrows draw themselves in sequence once scrolled into view
   (.draw added by support.js observer; pathLength=100 normalizes timing) */
.sys-hero .float-arrow path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.sys-hero.draw .float-arrow path { animation: arrow-draw 0.5s ease-out forwards; animation-delay: var(--d, 0s); }
.sys-hero.draw .float-arrow path:last-child { animation-delay: calc(var(--d, 0s) + 0.28s); }
.sys-hero .float-arrow:nth-of-type(1) { --d: 0.05s; }
.sys-hero .float-arrow:nth-of-type(2) { --d: 0.35s; }
.sys-hero .float-arrow:nth-of-type(3) { --d: 0.65s; }
.sys-hero .float-arrow:nth-of-type(4) { --d: 0.95s; }
.sys-hero .float-arrow:nth-of-type(5) { --d: 1.25s; }
.sys-hero .float-arrow:nth-of-type(6) { --d: 1.55s; }
.sys-hero .float-arrow:nth-of-type(7) { --d: 1.85s; }
.sys-hero .float-arrow:nth-of-type(8) { --d: 2.15s; }
@keyframes arrow-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sys-hero .float-arrow path { stroke-dashoffset: 0; animation: none !important; }
}
/* the "test it below for FREE" callout — lit up, clickable, pulsing */
.test-callout {
  background: #d4f25e; color: #07080b !important; font-weight: 600;
  padding: 0.08em 0.3em; border-radius: 5px; text-decoration: none !important;
  display: inline-block; transform: skew(-2deg);
  animation: callout-pulse 2.2s ease-in-out infinite;
}
.test-callout:hover { color: #07080b !important; transform: skew(-2deg) translateY(-1px); }
@keyframes callout-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(212,242,94,0.5); }
  50% { box-shadow: 0 0 38px 7px rgba(212,242,94,0.85); }
}
@media (prefers-reduced-motion: reduce) { .test-callout { animation: none; } }

/* ── Mobile layer (added 2026-07-16) ─────────────────────────────
   The page is a Claude Design export styled inline with no media
   queries; every rule here needs !important to beat inline styles.
   Attribute selectors match property NAMES only (never "prop:value")
   because React hydration may reserialize inline styles with spaces. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  /* nav: brand + Apply only */
  nav[data-screen-label="Nav"] { padding: 20px 20px !important; }
  nav[data-screen-label="Nav"] > div:last-child { gap: 14px !important; }
  nav[data-screen-label="Nav"] > div:last-child > a:not([href="#apply"]) { display: none !important; }

  /* hero: single column, card below, tamer type, no floating arrows */
  header[data-screen-label="Hero"] { grid-template-columns: 1fr !important; gap: 44px !important; padding: 44px 24px 80px !important; }
  header[data-screen-label="Hero"] h1 { font-size: clamp(38px, 11.5vw, 50px) !important; }
  header[data-screen-label="Hero"] > div:last-child { justify-self: stretch !important; max-width: 100% !important; transform: none !important; }
  .rise-2 { flex-wrap: wrap !important; row-gap: 18px !important; }
  .float-arrow { display: none !important; }

  /* any inline multi-column grid inside a labeled section collapses */
  section[data-screen-label] div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* sections that ARE grids (leak calculator, pricing) */
  section#leak, section#pricing { grid-template-columns: 1fr !important; gap: 44px !important; }
  /* grid children must be allowed to shrink below content width */
  section[data-screen-label] > div, header[data-screen-label] > div { min-width: 0 !important; }
  section#leak > div { max-width: 100% !important; }
  section#leak * { overflow-wrap: anywhere; }
  section#leak div:has(> input[type="email"]) { flex-wrap: wrap !important; }
  section#leak input[type="email"] { min-width: 200px !important; }

  /* four-steps: unstick and unrotate the follow-along card */
  section#how div[style*="sticky"] { position: static !important; transform: none !important; }

  /* headline scale */
  section[data-screen-label] h2 { font-size: clamp(30px, 9vw, 40px) !important; }

  /* expansion fan → linear stack */
  section[data-screen-label="Expansion services"] div[style*="520px"] { height: auto !important; display: flex !important; flex-direction: column; gap: 14px; }
  section[data-screen-label="Expansion services"] div[style*="520px"] > div { position: static !important; transform: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; }

  /* wizard + demo card breathing room */
  section#apply > div { padding: 52px 18px !important; }
  section#demo > div { padding: 48px 20px !important; }

  /* section side padding */
  section[data-screen-label], header[data-screen-label] { padding-left: 24px !important; padding-right: 24px !important; }
}

/* systems cards: float + brighter glow on hover, like every other card
   (hero keeps its own stronger hover) — 2026-07-17 */
.sys-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sys-card:not(.sys-hero):hover {
  transform: translateY(-3px);
  box-shadow: 0 0 38px rgba(24, 207, 160, 0.35), 0 0 16px rgba(212, 242, 94, 0.28), 0 16px 48px rgba(7, 8, 11, 0.12) !important;
}

/* ── Mobile systems deck (2026-07-18): cards stack like a wallet and
   swipe through. Classes applied by support.js only at ≤760px. */
.sysdeck { display: block !important; position: relative; touch-action: pan-y; }
.sysdeck .sys-card { position: absolute !important; left: 0; right: 0; top: 0;
  margin: 0 !important; transition: transform 0.32s ease, opacity 0.32s ease;
  will-change: transform; }
.sysdeck .sys-card.dk0 { transform: translateY(0) scale(1); z-index: 4; opacity: 1; }
.sysdeck .sys-card.dk1 { transform: translateY(16px) scale(0.955); z-index: 3; opacity: 1; }
.sysdeck .sys-card.dk2 { transform: translateY(30px) scale(0.91); z-index: 2; opacity: 0.85; }
.sysdeck .sys-card.dkh { transform: translateY(30px) scale(0.88); z-index: 1; opacity: 0; pointer-events: none; }
.sysdeck .sys-card.dk-drag { transition: none; }
.sysdeck .sys-card.dk-out-l { transform: translateX(-120%) rotate(-7deg); opacity: 0; }
.sysdeck .sys-card.dk-out-r { transform: translateX(120%) rotate(7deg); opacity: 0; }
.sysdeck-nav { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 18px; }
.sysdeck-nav .d { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); transition: background 0.2s ease; }
.sysdeck-nav .d.on { background: #d4f25e; box-shadow: 0 0 8px rgba(212, 242, 94, 0.8); }
.sysdeck-nav .c { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--lab); margin-left: 10px; }
.sysdeck-hint { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lab); margin-top: 8px; }

/* ── Promo banner (2026-07-18): config-driven via promo.json, injected by
   support.js. Absolute deadline for everyone; self-hides at zero. */
.promobar { background: #d4f25e; color: #07080b; display: flex; align-items: center;
  justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 40px 10px 16px;
  font-family: 'Satoshi', system-ui, sans-serif; font-size: 14px; font-weight: 600;
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  box-shadow: 0 2px 14px rgba(7, 8, 11, 0.12); }
.promobar .cd { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; background: #07080b; color: #d4f25e; padding: 4px 10px;
  border-radius: 999px; white-space: nowrap; }
.promobar a { color: #07080b; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap; }
.promobar .px { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; font-size: 18px; line-height: 1; color: #07080b;
  cursor: pointer; padding: 6px; opacity: 0.65; }
.promobar .px:hover { opacity: 1; }
@media (max-width: 760px) { .promobar { font-size: 12.5px; text-align: center; } }

/* promo corner tag (2026-07-18): heypocket-style sticker, same promo.json */
/* phones: the banner carries the promo; the corner sticker collides with the
   hero CTA and the sticky call bar on small screens — desktop only */
@media (max-width: 760px) { .promotag { display: none; } }
.promotag { position: fixed; left: 18px; bottom: 18px; z-index: 59;
  background: #d4f25e; color: #07080b; font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 999px; border: 2px solid #07080b;
  text-decoration: none; transform: rotate(-2deg);
  box-shadow: 0 0 24px rgba(212, 242, 94, 0.55), 0 6px 20px rgba(7, 8, 11, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: tagbob 3.2s ease-in-out infinite; }
.promotag:hover { animation-play-state: paused; transform: rotate(-2deg) translateY(-3px) scale(1.04); color: #07080b;
  box-shadow: 0 0 40px 6px rgba(212, 242, 94, 0.7), 0 8px 24px rgba(7, 8, 11, 0.2); }
@keyframes tagbob { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .promotag { animation: none; } }
@media (max-width: 760px) { .promotag { font-size: 13px; padding: 10px 16px; left: 12px; bottom: 12px; } }

.promotag .tx { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px;
  border-radius: 50%; background: #07080b; color: #ece9e0; border: 0; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  padding: 0; }
.promotag .tx:hover { background: #2e2c26; }

/* ── Mobile conversion pass (2026-07-20): sticky call bar + input hygiene ──
   Research: sticky bottom CTA +31% conv; tel: links convert 10-15x forms for
   call-first service businesses; <16px inputs trigger iOS force-zoom. */
@media (max-width: 760px) {
  /* iOS zoom prevention: every text input ≥16px */
  input[type="email"], input[type="tel"], input:not([type]) { font-size: 16px !important; }

  .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
    display: flex; gap: 10px; padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(7, 8, 11, 0.92); backdrop-filter: blur(12px);
    transform: translateY(110%); transition: transform 0.28s ease; }
  .stickybar.on { transform: translateY(0); }
  .stickybar a { flex: 1; text-align: center; text-decoration: none; font-weight: 600;
    font-size: 16px; padding: 15px 10px; border-radius: 999px; min-height: 44px;
    font-family: 'Satoshi', system-ui, sans-serif; }
  .stickybar .call { background: #d4f25e; color: #07080b; }
  .stickybar .apply { background: transparent; color: #ece9e0; border: 1px solid rgba(236,233,224,0.35); }

  /* overlay budget: when the sticky bar is up, the corner pill yields */
  body.sb-on .promotag { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  /* promo pill: bigger dismiss target + safe-area clearance */
  .promotag { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .promotag .tx { width: 30px; height: 30px; top: -12px; right: -12px; font-size: 16px; }
}