/* ============================================================
   home.css — homepage-specific overrides + try-it panel
   Extends the base design system in /static/css/.
   ============================================================ */

.dx .hero-left { display: flex; flex-direction: column; gap: 20px; }
.dx .hero-left h1 { margin: 0; }
.dx .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.dx .hero-meta {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-top: 12px;
}
.dx .hero-meta .sep { color: var(--fg-faint); }

/* ─── TRY-IT block ───────────────────────────────────────── */
.dx .try-it-section { padding: 0 0 80px; }
.dx .try-it {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
}
.dx .try-it-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.dx .try-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: stretch;
}
.dx .try-row .input { height: 48px; font-size: 14.5px; }
.dx .try-row .btn { height: 48px; }
@media (max-width: 720px) {
  .dx .try-row { grid-template-columns: 1fr; }
  .dx .try-it-head { flex-direction: column; align-items: flex-start; }
}
.dx .try-meta {
  margin-top: 14px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  color: var(--fg-dim);
  font-family: var(--font-mono); font-size: 12px;
}

/* ─── Results preview (drives app.js scrape stream) ─────── */
.dx .results-preview { margin-top: 24px; }
.dx .results-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dx .results-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
}
.dx .results-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dx .results-progress { display: flex; align-items: center; gap: 12px; }
.dx .pbar {
  width: 160px; height: 4px;
  background: var(--bg-elev-2);
  border-radius: 100px;
  overflow: hidden;
}
.dx .pbar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--orange-soft));
  transition: width 240ms var(--ease);
}
.dx .results-table-wrap { max-height: 360px; overflow: auto; }
.dx .results-table { width: 100%; border-collapse: collapse; }
.dx .results-table th {
  text-align: left;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-dim);
  padding: 12px 16px; background: var(--bg-inset);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
}
.dx .results-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--fg);
}
.dx .results-table tr:last-child td { border-bottom: none; }
.dx .results-table tr:hover td { background: var(--bg-elev-2); }
.dx .results-actions {
  padding: 14px 22px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* badge for streamed rows */
.dx .chip-gray { background: var(--bg-inset); color: var(--fg-muted); border: none; }
.dx .badge-rating { color: var(--orange); font-family: var(--font-mono); font-size: 12px; }

/* ─── SOCIAL PROOF MARQUEE ───────────────────────────────── */
.dx .social-proof { padding: 32px 0; }
.dx .proof-eyebrow { text-align: center; margin-bottom: 18px; }
.dx .marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dx .marquee-track {
  display: inline-flex; gap: 48px;
  padding: 22px 0;
  animation: home-marquee 40s linear infinite;
  white-space: nowrap;
}
.dx .marquee-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13.5px; color: var(--fg-dim);
  transition: color 200ms var(--ease);
}
/* Brand logo — SVG silhouette painted with currentColor via mask-image.
   The `--icon` custom property is set inline per-item to point at the
   Simple Icons CDN URL. Result: theme-aware monochrome icons that
   match the surrounding text color (mute gray by default, fully
   visible on hover). */
.dx .marquee-item .m-logo {
  display: inline-block;
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
          mask-image: var(--icon);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: 0.85;
  flex-shrink: 0;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.dx .marquee-item:hover .m-logo {
  opacity: 1;
  transform: scale(1.08);
}
.dx .marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes home-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .dx .marquee-track { animation: none; }
}

/* ─── SECTION HEAD ───────────────────────────────────────── */
.dx .section-head { margin-bottom: 48px; max-width: 56ch; }
.dx .section-head .eyebrow { margin-bottom: 16px; }
.dx .section-head h2 { margin-bottom: 12px; }

/* ─── WORKFLOW STEP ART ─────────────────────────────────── */

/* 01 / PROMPT — looks like a real CLI input. The HTML ships with an
   initial prompt baked in so the panel always has visible content,
   even before home.js boots the typewriter cycle. Layout:

     [ > describe dentists in Brooklyn█        ]
     ^   ^         ^                    ^
     |   |         data-prompt-typer    blinking caret
     |   prompt-prefix (dim orange)
     prompt-chev (bright orange chevron, like a shell prompt)
*/
.dx .step-art-prompt {
  background: var(--bg-inset);
  border: 1.5px dashed rgba(255, 92, 26, 0.35);
  color: var(--orange);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  /* Override .step-art's fixed `height: 80px` (from layout.css) so the
     box can GROW vertically when the typed prompt wraps to a second
     (or third) line. min-height: 80px keeps the floor so short prompts
     don't make the card collapse. */
  height: auto;
  min-height: 80px;
  /* Block + inline flow — the chevron, prefix, typed text, and the
     blinking cursor flow inline like a real terminal and wrap to the
     next line when they run out of horizontal room. */
  display: block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.dx .step-art-prompt .prompt-chev {
  color: var(--orange);
  font-weight: 600;
  margin-right: 6px;
  text-shadow: 0 0 6px var(--orange-glow);
}
.dx .step-art-prompt .prompt-prefix {
  color: var(--orange);
  opacity: 0.55;
}
.dx .step-art-prompt .prompt-text {
  color: var(--orange);
  font-weight: 500;
  text-shadow: 0 0 4px rgba(255, 92, 26, 0.30);
  /* Break inside long words if a single token is wider than the box. */
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Blinking caret — sits inline after the last typed character. Because
   the parent is now `display: block` with inline content, this pseudo-
   element naturally follows the text on whichever line it ended up on. */
.dx .step-art-prompt::after {
  content: '';
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--orange);
  margin-left: 2px;
  vertical-align: -2px;
  animation: dx-blink 1s steps(2) infinite;
  box-shadow: 0 0 6px var(--orange-glow);
}
.dx .step-art-prompt::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 92, 26, 0.10) 50%, transparent 65%);
  animation: dx-card-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}

/* 02 / AGENT — SVG with 3 source nodes (MAPS / LINKEDIN / SMTP).
   Each pulses orange → green in sequence; the connecting line below
   reads as the agent's hop path. */
.dx .step-art-pulse {
  background: var(--bg-inset);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.dx .step-art-pulse svg,
.dx .step-art-wires svg {
  width: 100%; height: 100%;
  display: block;
  color: var(--fg-dim);     /* drives the SVG <text> labels via currentColor */
}
.dx .step-art-pulse svg text {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  fill: currentColor;
}
.dx .step-art-pulse svg circle {
  filter: drop-shadow(0 0 6px currentColor);
}

/* 03 / PIPELINE — SVG with one source dot fanning out to three
   destination dots via dashed rails. Green packets travel each rail
   on a 2.4s loop, staggered 0.8s apart, so the wires literally read
   as a continuous data stream shipping to multiple stacks. */
.dx .step-art-wires {
  background: var(--bg-inset);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.dx .step-art-wires svg circle[fill="#FF5C1A"] { filter: drop-shadow(0 0 8px rgba(255, 92, 26, 0.6)); }
.dx .step-art-wires svg circle[fill="#7C3AED"] { filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.6)); }
.dx .step-art-wires svg circle[fill="#00D67E"] { filter: drop-shadow(0 0 8px rgba(0, 214, 126, 0.85)); }

/* Reduced-motion fallback for SMIL — CSS `display:none` doesn't pause
   SMIL animations, so home.js calls svg.pauseAnimations() on load.
   This rule additionally hides the moving packets so the panel renders
   as a clean static diagram. */
@media (prefers-reduced-motion: reduce) {
  .dx .step-art-wires svg circle[fill="#00D67E"] { opacity: 0; }
  .dx .step-art-prompt::after,
  .dx .step-art-prompt::before { animation: none; }
}

/* ─── BENTO — subtle shimmer sweep on hover, gives the cards
   a hint of "interactivity" without being noisy. ───────── */
.dx .bento .b { position: relative; overflow: hidden; }
.dx .bento .b::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 40%;
  left: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 92, 26, 0.06) 50%, transparent 70%);
  pointer-events: none;
  transform: translateX(-200%) skewX(-12deg);
  transition: transform 800ms var(--ease-out);
  z-index: 0;
}
.dx .bento .b:hover::before {
  transform: translateX(220%) skewX(-12deg);
}
/* Keep card text on top of the shimmer */
.dx .bento .b > * { position: relative; z-index: 1; }

/* ─── BENTO terminal cell ────────────────────────────────── */
.dx .bento-section { padding: 80px 0 96px; }
.dx .b-terminal { padding: 0; overflow: hidden; }
.dx .b-terminal .terminal { border-radius: 0; border: none; box-shadow: none; height: 100%; min-height: 360px; }
.dx .b-terminal .b-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 22px;
  background: linear-gradient(180deg, transparent, rgba(10,10,11,0.92));
  z-index: 1;
  /* The overlay sits on a dark gradient regardless of theme, so the
     text content needs to stay light in BOTH dark + light modes — if
     we inherit `var(--fg)` (which flips to near-black in light mode)
     we end up with invisible dark-on-dark text. */
  color: rgba(255, 255, 255, 0.78);
}
.dx .b-terminal .b-overlay .b-eyebrow { color: rgba(255, 255, 255, 0.55); }
.dx .b-terminal .b-overlay .b-title   { color: #FAFAF9; }
.dx .b-terminal .b-overlay .b-body    { color: rgba(255, 255, 255, 0.72); }

/* ─── AGENTIC AUTOPILOT ──────────────────────────────────── */
.dx .autopilot-section { padding: 32px 0 96px; }
.dx .autopilot-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .dx .autopilot-grid { grid-template-columns: 1fr; gap: 32px; }
}
.dx .autopilot-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.dx .autopilot-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-inset);
}
.dx .autopilot-pre {
  margin: 0;
  padding: 20px 24px;
  background: #0A0A0C !important;        /* solid dark — no gradient to vary contrast */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  overflow-x: auto;
  /* The code block is ALWAYS dark regardless of page theme. Use explicit
     hex colors on every token (no alpha-whites that can read dim, no
     `var(--*)` that might resolve to a theme-aware dark gray). The
     `!important` is defensive — if any other rule (cached overlay,
     overzealous selector) tries to recolor the text, we still win. */
  color: #E5E5E5 !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.dx .autopilot-pre code {
  color: #E5E5E5 !important;
  white-space: pre;
  font-family: inherit;
  tab-size: 2;
  -moz-tab-size: 2;
}

/* Token colors — solid hex from Tailwind's 300/400 range so each
   reads with WCAG-AA contrast against #0A0A0C. */
.dx .autopilot-pre .tok-method  { color: #FB923C !important; font-weight: 700; }  /* orange-400 */
.dx .autopilot-pre .tok-url     { color: #E5E5E5 !important; }                    /* neutral-200 */
.dx .autopilot-pre .tok-meta    { color: #9CA3AF !important; }                    /* gray-400 */
.dx .autopilot-pre .tok-var     { color: #FBBF24 !important; }                    /* amber-400 */
.dx .autopilot-pre .tok-key     { color: #60A5FA !important; }                    /* blue-400 */
.dx .autopilot-pre .tok-string  { color: #6EE7B7 !important; }                    /* emerald-300 */
.dx .autopilot-pre .tok-bool    { color: #A78BFA !important; font-style: italic; } /* violet-400 */
.dx .autopilot-pre .tok-num     { color: #FBBF24 !important; }                    /* amber-400 */

/* Frame the card better in light mode — was sitting on a near-white bg
   without enough definition. */
.dx[data-theme="light"] .autopilot-card,
.dx.light .autopilot-card {
  border-color: #E5E5E5;
  box-shadow: 0 20px 48px -24px rgba(0, 0, 0, 0.10),
              0 0 0 1px rgba(0, 0, 0, 0.03);
}
.dx[data-theme="light"] .autopilot-card-head,
.dx.light .autopilot-card-head {
  background: #F4F4F2;
  border-bottom-color: #E5E5E5;
}

/* ============================================================
   LIGHT-MODE VISIBILITY FIXES
   The step-art animations + hero/CTA radial gradients were
   tuned for dark backgrounds; in light mode their 10-18%
   orange tints wash into the near-white card backgrounds.
   Saturating them keeps the motion legible on white.
   ============================================================ */

/* Workflow step-art bottom panels — bump the contrast of the
   background panel itself first, so even before any animation
   the boxes look like deliberate "screens" inside the card. */
.dx[data-theme="light"] .step-art,
.dx.light .step-art {
  background: #F4F4F2;
  border-color: rgba(0, 0, 0, 0.08);
}

/* 01 / PROMPT — terminal-style dashed box. */
.dx[data-theme="light"] .step-art-prompt,
.dx.light .step-art-prompt {
  background: #FFF7F0;                       /* subtle warm tint */
  border: 1.5px dashed rgba(255, 92, 26, 0.55);
  color: #C2410C;                             /* deeper orange — readable on white */
}

/* 02 / AGENT — pulsing radial gradient. Dark-mode used --orange-tint
   at ~10% opacity which is invisible on light. Crank to ~30%. */
.dx[data-theme="light"] .step-art-pulse::after,
.dx.light .step-art-pulse::after {
  background:
    radial-gradient(40% 60% at 30% 50%, rgba(255, 92, 26, 0.30), transparent 70%),
    radial-gradient(50% 50% at 70% 50%, rgba(124, 58, 237, 0.18), transparent 70%);
}
.dx[data-theme="light"] .step-art-pulse,
.dx.light .step-art-pulse {
  background: #FFF7F0;
}

/* 03 / PIPELINE — two rails with orange + violet endpoint dots.
   Strengthen the rails AND the dot glow so the connector reads
   on a near-white card. */
.dx[data-theme="light"] .step-art-wires,
.dx.light .step-art-wires {
  background:
    linear-gradient(90deg, transparent 50%, rgba(255, 92, 26, 0.32) 50%) 0 50% / 14px 2px repeat-x,
    linear-gradient(90deg, transparent 50%, rgba(124, 58, 237, 0.32) 50%) 0 50% / 14px 2px repeat-x,
    #F4F4F2;
}
.dx[data-theme="light"] .step-art-wires::before,
.dx.light .step-art-wires::before {
  box-shadow: 0 0 16px rgba(255, 92, 26, 0.65);
}
.dx[data-theme="light"] .step-art-wires::after,
.dx.light .step-art-wires::after {
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.65);
}

/* Hero + CTA mesh — kept FAR softer in light mode than dark.
   The .hero element already gets a 6%/5% accent wash from
   dx-overlay.css; adding heavy orange/violet here on top stacks
   into a peachy/lavender blotch on the page. Drop the .mesh
   overlay to ~5%/3% so it's a hint of warmth, not a wash. */
.dx[data-theme="light"] .hero .mesh,
.dx.light .hero .mesh {
  opacity: 0.7;
  filter: blur(60px);
  background:
    radial-gradient(45% 45% at 14% 24%, rgba(255, 92, 26, 0.07) 0%, transparent 65%),
    radial-gradient(40% 40% at 88% 14%, rgba(124, 58, 237, 0.05) 0%, transparent 65%);
}

.dx[data-theme="light"] .cta .mesh,
.dx.light .cta .mesh {
  opacity: 0.55;
  filter: blur(56px);
  background:
    radial-gradient(45% 60% at 50% 50%, rgba(255, 92, 26, 0.08) 0%, transparent 70%),
    radial-gradient(35% 50% at 18% 35%, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
}

/* CTA base — softer than dark mode, no double-stack with the .mesh */
.dx[data-theme="light"] .cta,
.dx.light .cta {
  background:
    radial-gradient(50% 80% at 50% 80%, rgba(255, 92, 26, 0.04) 0%, transparent 70%),
    var(--bg-inset);
}

/* Bento card body text — make sure body copy on white never
   slips below WCAG AA. var(--fg-muted) is #46464C which gives
   ~8:1 on white, but explicit beats inherited. */
.dx[data-theme="light"] .bento .b .b-body,
.dx.light .bento .b .b-body { color: #46464C; }
.dx[data-theme="light"] .bento .b .b-eyebrow,
.dx.light .bento .b .b-eyebrow { color: #6C6C72; letter-spacing: 0.08em; }

/* Marquee logo color in light mode — slightly darker than the
   inline-text neighbor so the brand silhouette still pops. */
.dx[data-theme="light"] .marquee-item .m-logo,
.dx.light .marquee-item .m-logo {
  opacity: 0.75;
}
.dx[data-theme="light"] .marquee-item:hover .m-logo,
.dx.light .marquee-item:hover .m-logo {
  opacity: 1;
}

/* Eyebrow chip — add a subtle outline so it reads as a chip
   rather than floating text on white. */
.dx[data-theme="light"] .eyebrow,
.dx.light .eyebrow {
  background: #FFFFFF;
  border-color: #E5E5E5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Hero trust row — "No credit card · 142 countries · 92-97% deliverability"
   was using --fg-dim (#6C6C72) which reads okay but the dots between items
   were too pale. Strengthen for clarity on white. */
.dx[data-theme="light"] .hero-meta,
.dx.light .hero-meta {
  color: #46464C;
}
.dx[data-theme="light"] .hero-meta .sep,
.dx.light .hero-meta .sep {
  color: #C2C2C6;
}

/* Headline + lead — pure black for max contrast on the near-white
   background, with a touch more weight on the body lead. */
.dx[data-theme="light"] .hero h1,
.dx.light .hero h1 { color: #0A0A0B; }
.dx[data-theme="light"] .hero .lead,
.dx.light .hero .lead { color: #3F3F46; }

/* Section transitions — give the workflow / bento sections a sliver of
   contrast against the hero so the page reads as distinct blocks
   rather than one continuous wash. */
.dx[data-theme="light"] .workflow,
.dx.light .workflow,
.dx[data-theme="light"] .bento-section,
.dx.light .bento-section,
.dx[data-theme="light"] .autopilot-section,
.dx.light .autopilot-section,
.dx[data-theme="light"] .faq-section,
.dx.light .faq-section {
  background: var(--bg);
  position: relative;
}

/* ─── FAQ ─────────────────────────────────────────────────── */
.dx .faq-section { padding-bottom: 0; }
.dx .faq-container { max-width: 760px; }
.dx .faq-list { margin-top: 8px; }