/* Homepage (views/home.ejs) page styles, served statically at /assets/css/home.css?v=cssVersion. The page base it shares with the auth pages (body, text-wrap, card shadows) is in site.css. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.text-purple-accent { color: #5B47E5; }

.bg-purple-soft { background-color: #EDE8FE; }

/* Soft radial glow behind the hero */
.hero-glow {
  background: radial-gradient(circle, rgba(91,71,229,0.18) 0%, rgba(91,71,229,0) 70%);
}

/* VSL placeholder poster (views/home.ejs #vsl), goes away when the video embed replaces it */
.vsl-poster {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 60%),
    #EDE8FE;
}

.faq-item details > summary { list-style: none; cursor: pointer; }
.faq-item details > summary::-webkit-details-marker { display: none; }
.faq-item details[open] .faq-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .faq-chevron { transition: transform 0.2s ease; }
}

#results, #proof, #how-it-works, #pricing, #agencies, #faq, #features, .feature-panel { scroll-margin-top: 6rem; }
/* With JS on, a panel sits under the fixed nav plus the tab strip (two rows on phone, one row from md) */
[role="tabpanel"] { scroll-margin-top: 16rem; }
@media (min-width: 768px) {
  [role="tabpanel"] { scroll-margin-top: 13rem; }
}

/* Rows that scroll sideways on phone (the platform pills in #results, the parked #proof cards) show no bar */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Before/after compare (views/home.ejs #results). The range input sets --split; it rests at --rest, which must
   match the input's value attribute. Both panes share each platform's header, so the seam is invisible there;
   below it, .compare-inset pushes the after content clear of the divider at rest, so it reads in full while
   only the edge of the before content peeks out on the left. */
.compare { --rest: 15; --split: calc(var(--rest) * 1%); container-type: inline-size; height: 420px; }
@media (min-width: 560px) {
  .compare { height: 480px; }
}
/* Overflowing before content must not squeeze the shared header rows out of line with the after pane */
.compare-pane > * { flex-shrink: 0; }
.compare-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.compare-before::after { content: ""; position: absolute; inset: auto 0 0; height: 56px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.compare-nofade::after { content: none; }
.compare-inset { margin-left: calc(var(--rest) * 1cqw); }
.compare-handle { left: var(--split); box-shadow: 0 0 12px rgba(91, 71, 229, 0.45); }
.compare-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
/* The range input is transparent, so its focus ring shows on the handle */
.compare-range:focus-visible + .compare-handle .compare-knob { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #5B47E5; outline: 2px solid transparent; outline-offset: 2px; }

/* Platform type, from fonts already on the device: no request */
.mock-arial { font-family: Arial, Helvetica, sans-serif; }
.mock-system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.mock-reddit-word { font-family: Verdana, Arial, sans-serif; letter-spacing: -0.03em; }
.tile-45 { aspect-ratio: 4 / 5; }
/* Telegram's default chat wallpaper, as a soft gradient */
.tg-wall { background: linear-gradient(160deg, #dfe7c9 0%, #c9dcb6 45%, #b7d1c4 100%); }

/* Blurred photo stand-ins in the before panes: soft colour fields from layered gradients, no image and no filter */
.media-blur {
  --a: 28% 32%; --b: 74% 68%; --c: 62% 14%;
  background:
    radial-gradient(48% 42% at var(--a), rgba(244, 114, 182, 0.55), rgba(244, 114, 182, 0.18) 55%, rgba(244, 114, 182, 0) 100%),
    radial-gradient(56% 52% at var(--b), rgba(167, 139, 250, 0.55), rgba(167, 139, 250, 0.16) 60%, rgba(167, 139, 250, 0) 100%),
    radial-gradient(44% 40% at var(--c), rgba(251, 191, 36, 0.38), rgba(251, 191, 36, 0) 100%),
    radial-gradient(70% 60% at 50% 100%, rgba(225, 29, 72, 0.16), rgba(225, 29, 72, 0) 100%),
    #F6ECEF;
}
.media-blur.tone-1 { --a: 70% 26%; --b: 24% 72%; --c: 82% 84%; }
.media-blur.tone-2 { --a: 44% 62%; --b: 78% 22%; --c: 18% 20%; }
/* The creator's own results: violet, so they read apart from the leaks */
.media-own {
  background:
    radial-gradient(60% 50% at 30% 25%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 100%),
    linear-gradient(160deg, #EDE8FE 0%, #DDD5FC 100%);
}

/* Platform switcher: pill tabs between previous and next buttons */
.platform-pill, .platform-step { border-color: #E4E4E7; background: #fff; color: #52525b; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.platform-pill[aria-pressed="true"] { background: #EDE8FE; border-color: #5B47E5; color: #5B47E5; }
.platform-pill:focus-visible, .platform-step:focus-visible { outline: 2px solid #5B47E5; outline-offset: 2px; }
@media (hover: hover) {
  .platform-pill:not([aria-pressed="true"]):hover, .platform-step:hover { color: #5B47E5; border-color: rgba(91, 71, 229, 0.5); }
}

/* Pricing billing period (views/home.ejs #pricing): one segmented control of native radios, so the arrow keys move
   between them. Each radio is visually hidden and the .period-opt after it shows its state. Where :has() works, an ink
   thumb slides under the picked period; where it does not, the thumb stays hidden and the picked period fills itself. */
.period-switch { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.period-switch label { position: relative; z-index: 1; display: block; cursor: pointer; }
.period-thumb { display: none; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.period-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; border-radius: 9999px; line-height: 1.2; color: #52525b; transition: color .2s ease, background-color .2s ease; }
.period-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.period-save { font-size: 11px; font-weight: 600; margin-top: 2px; white-space: nowrap; color: #5B47E5; transition: color .2s ease; }
@media (min-width: 640px) {
  .period-opt { flex-direction: row; gap: 6px; min-height: 40px; }
  .period-save { font-size: 12px; margin-top: 0; }
}
.period-input:checked + .period-opt { background: #18181b; color: #fff; }
.period-input:checked + .period-opt .period-save { color: #BBADF9; }
.period-input:focus-visible + .period-opt { outline: 2px solid #5B47E5; outline-offset: 2px; }
@media (hover: hover) {
  .period-input:not(:checked) + .period-opt:hover { color: #18181b; }
}
@supports selector(:has(*)) {
  .period-thumb { display: block; }
  .period-input:checked + .period-opt { background: transparent; }
  .period-switch:has(.period-input[value="quarterly"]:checked) .period-thumb { transform: translateX(100%); }
  .period-switch:has(.period-input[value="annual"]:checked) .period-thumb { transform: translateX(200%); }
}
@media (prefers-reduced-motion: reduce) {
  .period-thumb, .period-opt, .period-save { transition: none; }
}

/* Feature explorer tabs (views/home.ejs #features) */
.feature-tab { transition: transform .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.feature-tab[aria-selected="true"] {
  border-color: #5B47E5;
  background: #EDE8FE;
  color: #5B47E5;
  box-shadow: 0 0 0 1px #5B47E5, 0 8px 20px -8px rgba(91, 71, 229, 0.45);
}
/* Outline, not a Tailwind ring: the selected box-shadow above would override a ring */
.feature-tab:focus-visible { outline: 2px solid #5B47E5; outline-offset: 2px; }
.feature-panel:focus-visible { outline: 2px solid #5B47E5; outline-offset: -4px; border-radius: 24px; }
/* :not() keeps hover from fading the selected tab's border */
@media (hover: hover) {
  .feature-tab:not([aria-selected="true"]):hover { border-color: rgba(91, 71, 229, 0.5); color: #5B47E5; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feature-tab:not([aria-selected="true"]):hover { transform: translateY(-2px); }
}
/* Opacity only: a transform here would be measured by scrollIntoView and land a deep link short of its scroll margin */
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  [role="tabpanel"]:not([hidden]) { animation: panel-in 0.35s ease; }
}

/* Free-scan entry field (views/partials/scan-field.ejs): the platform mark springs in when it switches */
@keyframes scan-mark-in {
  from { transform: scale(0.4) rotate(-40deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .scan-mark.is-swapping { animation: scan-mark-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
}