/* Features page — layout specific to this page only. Reusable pieces
   (section-heading, feature-grid, trust-list, cta-section) live in
   shared.css. Requires tokens.css + shared.css loaded first. */

.features-hero { position: relative; overflow: hidden; background: var(--background); padding: 80px 0 64px; text-align: center; }
.features-hero::before {
  content: '';
  position: absolute; top: -200px; right: -180px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--brand-line) 0%, transparent 70%);
  opacity: .4; pointer-events: none; z-index: 0;
}
.features-hero > div { position: relative; z-index: 1; }
.features-hero h1 {
  font-weight: 900; font-size: 44px; letter-spacing: -.03em; line-height: 1.12;
  margin: 0 auto 16px; max-width: 720px; color: var(--foreground);
}
.features-hero p { font-size: 17px; color: var(--muted-foreground); max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* ── Wave dividers -- reused technique from home.html's what-it-does
   section. Only sections tagged .has-wave get the overflow/positioning
   needed for the absolutely-positioned wave SVGs. ── */
.feat-section.has-wave { position: relative; overflow: hidden; }
.what-wave { position: absolute; left: 0; width: 100%; line-height: 0; pointer-events: none; }
.what-wave.top { top: 0; }
.what-wave.bottom { bottom: 0; }
.what-wave svg { display: block; width: 100%; height: 44px; }

.bg-buzz { background: var(--illustration-accent-soft); }

/* ── AI Listing flow — three plain bubbles, a squiggly hand-drawn line
   between each, nothing else. Cut the photo stack, platform logos, and
   "phone or desktop" callout entirely per feedback -- the section reads
   better simple than dressed up with elements that weren't landing
   right anyway. ── */
.ai-flow { display: flex; align-items: flex-start; max-width: 780px; margin: 0 auto; gap: 4px; }
.ai-flow-step {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  opacity: .4; transition: opacity .4s var(--ease-standard);
}
.ai-flow-step.in-view { opacity: 1; }
.ai-flow-icon {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface); color: var(--muted-foreground);
  box-shadow: var(--shadow-raised);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.ai-flow-icon svg { width: 27px; height: 27px; }
.ai-flow-step.in-view .ai-flow-icon { background: var(--brand); color: var(--brand-foreground); }
.ai-flow-step h3 { font-weight: 800; font-size: 15.5px; margin: 0; color: var(--foreground); }
.ai-flow-step p { font-size: 13px; line-height: 1.55; color: var(--muted-foreground); margin: 0; max-width: 190px; }

/* Squiggly hand-drawn connector -- draws itself in via
   stroke-dasharray/dashoffset (a generous fixed 200, well past this
   path's actual length, so it reveals as one continuous stroke) the
   first time its .pulse class is added by assets/features.js. Dark
   neutral color, not brand teal, so it reads as a sketch accent. */
.ai-flow-line { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset .6s var(--ease-standard); }
.ai-flow-arrowhead { opacity: 0; transition: opacity .25s var(--ease-standard) .45s; }
.ai-flow-arrow.pulse .ai-flow-line { stroke-dashoffset: 0; }
.ai-flow-arrow.pulse .ai-flow-arrowhead { opacity: 1; }
.ai-flow-arrow { flex-shrink: 0; width: 30px; margin-top: 17px; color: var(--foreground); }
.ai-flow-arrow svg { width: 100%; height: 16px; display: block; }

@media (max-width: 980px) {
  .ai-flow { flex-direction: column; align-items: stretch; gap: 0; }
  .ai-flow-step { flex-direction: row; text-align: left; align-items: flex-start; gap: 16px; padding: 20px 0; }
  .ai-flow-step p { max-width: none; }
  /* The connecting arrows only make sense between side-by-side steps; once
     the flow stacks vertically they read as noise, so hide them. */
  .ai-flow-arrow { display: none; }
}

@media (max-width: 640px) {
  /* Solid --background fill (warm grey #f5f4f2) on the hero so the top of
     the page reads as a deliberate panel on mobile -- matching the Sales-in/
     Profit-out section's bg-background treatment -- instead of the faint
     radial glow on a near-transparent ground, which read as broken/empty.
     Desktop keeps the original background + radial ::before glow. */
  .features-hero { background: var(--background); }
  .features-hero::before { display: none; }
}

/* ── Automations — grouped by capability, each tagged with the real
   platforms it runs on. Platform dots use the app's own per-platform
   brand tokens, not invented colors. ── */
.automation-list { max-width: 720px; margin: 0 auto; }
.automation-row { padding: 26px 0; border-bottom: 1px solid var(--border); }
.automation-row:first-child { padding-top: 0; }
.automation-row:last-child { border-bottom: none; padding-bottom: 0; }
.automation-row-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.automation-row h3 { font-weight: 800; font-size: 17px; margin: 0; color: var(--foreground); }
.automation-row p { font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); margin: 0; max-width: 620px; }
.platform-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.platform-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 9999px;
}
.platform-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.platform-tag.poshmark { background: var(--platform-poshmark-soft); color: var(--platform-poshmark); }
.platform-tag.ebay { background: var(--platform-ebay-soft); color: var(--platform-ebay); }
.platform-tag.depop { background: var(--platform-depop-soft); color: var(--platform-depop); }

/* ── Buzz — chat-style bubbles for "ask it", a plain list for the
   coming-soon action side. Illustration-accent (warm) breaks from the
   teal used everywhere else on the page, on purpose — Buzz is a
   distinct voice, not another automation. ── */
.buzz-layout { max-width: 960px; margin: 0 auto; display: flex; gap: 56px; align-items: flex-start; }
.buzz-col { flex: 1; min-width: 0; }
.buzz-col-label {
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--illustration-accent); margin: 0 0 18px;
}
/* Single rotating exchange, driven entirely by assets/features.js --
   question types in, pauses, the bee avatar fades in with the answer,
   holds, clears, repeats with the next pair. Fixed min-height so the
   card doesn't jump as text lengths change between pairs. */
.buzz-demo {
  background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-overlay);
  padding: 30px 32px; max-width: 480px; min-height: 168px;
  display: flex; flex-direction: column; gap: 18px; justify-content: center;
}
.buzz-demo-question { font-size: 16.5px; font-weight: 700; color: var(--foreground); min-height: 1.4em; }
.buzz-demo-answer { display: flex; align-items: flex-start; gap: 10px; min-height: 1.6em; }
.buzz-avatar {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--illustration-accent); color: var(--surface);
  display: flex; align-items: center; justify-content: center; padding: 4px;
  opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
}
.buzz-avatar.visible { opacity: 1; }
.buzz-avatar svg { width: 100%; height: 100%; }
.buzz-demo-answer-text { font-size: 15px; line-height: 1.55; color: var(--muted-foreground); padding-top: 3px; }

/* Typewriter caret, shared by whichever line (question or answer) is
   actively typing. No JS / old browser = this class is simply never
   added, text is set directly with no animation. */
.is-typing::after {
  content: ''; display: inline-block; width: 2px; height: 1em;
  background: var(--brand-deep); margin-left: 2px; vertical-align: -2px;
  animation: buzz-caret .8s step-end infinite;
}
@keyframes buzz-caret { 50% { opacity: 0; } }
.buzz-act-list { display: flex; flex-direction: column; gap: 20px; }
.buzz-act-item { display: flex; gap: 14px; align-items: flex-start; }
.buzz-act-dot {
  flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--illustration-accent); margin-top: 6px;
}
.buzz-act-item h4 { font-weight: 800; font-size: 15.5px; margin: 0 0 4px; color: var(--foreground); }
.buzz-act-item p { font-size: 14px; line-height: 1.55; color: var(--muted-foreground); margin: 0; }
@media (max-width: 860px) {
  .buzz-layout { flex-direction: column; gap: 40px; }
}

/* ── Multiple accounts — deliberately minimal, a breather between the
   denser Buzz and Profit Tracking sections. ── */
.feat-minimal { max-width: 680px; margin: 0 auto; text-align: center; }
.feat-minimal p { font-size: 18px; line-height: 1.7; color: var(--foreground); margin: 0; }

/* ── Teams strip — coming soon, tucked below the six umbrellas as a
   quiet closing note rather than another full section. ── */
.teams-strip { background: var(--background); padding: 64px 0; text-align: center; }
.teams-strip-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 12px; border-radius: 9999px; margin-bottom: 14px;
}
.teams-strip h3 { font-weight: 800; font-size: 22px; margin: 0 0 8px; color: var(--foreground); }
.teams-strip p { font-size: 15px; color: var(--muted-foreground); margin: 0; }

.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }

@media (max-width: 640px) {
  .features-hero h1 { font-size: 32px; }
  .feature-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ── Contact form — posts to /api/contact (a Cloudflare Pages Function,
   see functions/api/contact.js), which relays through Resend. No email
   address is shown on the page itself, so there's nothing here for a
   scraper to harvest. ── */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 700; color: var(--foreground); }
.contact-form input, .contact-form textarea {
  font-family: var(--font-sans); font-size: 15px; padding: 12px 14px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--foreground); resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--brand); }
/* Honeypot -- present in the DOM (so basic bots that fill every field
   trip it) but invisible and unreachable to real visitors: no
   display:none/visibility:hidden, since some bots skip fields styled
   that way specifically to evade this trick. */
.contact-form-honeypot {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.contact-form-submit {
  align-self: flex-start; padding: 13px 28px; border-radius: 9999px; border: none; cursor: pointer;
  background: var(--brand); color: var(--brand-foreground); font-weight: 700; font-size: 15px;
  font-family: var(--font-sans); transition: opacity var(--duration-fast) var(--ease-standard);
}
.contact-form-submit:hover { opacity: .9; }
.contact-form-submit:disabled { opacity: .6; cursor: default; }
.contact-form-status { font-size: 14px; margin: 0; color: var(--muted-foreground); min-height: 1.4em; }
.contact-form-status.success { color: var(--success); font-weight: 600; }
.contact-form-status.error { color: var(--warn); font-weight: 600; }