/*
 * st-polish.css — design polish pass for /start (landing) and /home (2026-10-20).
 *
 * Restyle only: no layout, route, form or script changes. Loaded LAST so it wins
 * over the page's inline styles. Remove the <link> to revert.
 * Measured with .claude/skills/design-taste-frontend/scripts/inspect.mjs
 * (before: .taste-skill/before-*, after: .taste-skill/after-*).
 *
 * Decisions
 *  - Brand stays: dark violet ground + lavender accent. Gradients become flat
 *    colour (text, buttons, cards); one accent, used for actions and prices.
 *  - Surfaces are separated by a tone step, not by 1px outlines, glows or
 *    resting shadows.
 *  - Nothing meant to be read is under 13px; tracked uppercase micro labels
 *    become sentence case.
 *  - Headlines stay at two lines at every width.
 */

:root {
  --pl-ground: #0d0a16;
  --pl-raise: #171226;
  --pl-raise-2: #201933;
  --pl-ink: #f4f0ff;
  --pl-ink-2: #c9bedf;
  --pl-accent: #d2bbff;
  --pl-accent-ink: #2a0a5e;
}

/* ───────────────────────────── landing (/start) ───────────────────────────── */

/* Flat brand accent instead of gradient-filled text (hero line 2, featured price) */
body.st-landing .st-grad {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--pl-accent) !important;
}

/* Hero headline: two lines at every width */
body.st-landing .st-hero-copy h1 {
  font-size: clamp(1.7rem, 7vw, 4.4rem) !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

/* Feature entry cards beside the hero (.st-orbit): intentionally NOT restyled.
   Owner prefers the original look + flowing rim animation (2026-10-20). */

/* Prompt pill: a filled bar, not an outlined floating box */
body.st-landing .st-prompt {
  background: var(--pl-raise) !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.st-landing .st-prompt-copy { color: var(--pl-ink-2); }

/* Tools grid: tone-step tiles, one icon colour, readable copy */
body.st-landing .st-engine a {
  background: var(--pl-raise) !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color .2s ease, transform .2s ease;
}
body.st-landing .st-engine a:hover,
body.st-landing .st-engine a:focus-visible {
  background: var(--pl-raise-2) !important;
  transform: translateY(-2px);
}
body.st-landing .st-engine .material-symbols-outlined { color: var(--pl-accent) !important; }
body.st-landing .st-engine p { font-size: .95rem; color: var(--pl-ink-2); line-height: 1.5; }

/* Section kickers / eyebrows: the heading carries the information */
body.st-landing .st-cta-kicker { display: none !important; }

/* Pricing: tone surfaces, accent only on the recommended plan */
body.st-landing #pricing article,
body.st-landing .plan-card {
  border-color: transparent !important;
  box-shadow: none !important;
  background: var(--pl-raise) !important;
}
body.st-landing #pricing article.featured,
body.st-landing .plan-card.featured {
  background: var(--pl-raise-2) !important;
  outline: 2px solid var(--pl-accent);
  outline-offset: -2px;
}
body.st-landing #pricing .tag {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 700;
  background: var(--pl-accent) !important;
  color: var(--pl-accent-ink) !important;
  box-shadow: none !important;
}
body.st-landing .btn-primary { box-shadow: none !important; }

/* Closing call to action: no glow frame; heading stays two lines */
body.st-landing .st-cta-timeline {
  box-shadow: none !important;
  border-color: transparent !important;
}
body.st-landing #start h2 { font-size: clamp(1.6rem, 4.6vw, 3rem) !important; text-wrap: balance; }

/* Style marquee: sentence-case kicker, readable sub-labels */
body.st-landing .st-sf-marquee-kicker {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
}
body.st-landing .st-sf-marquee-sub { font-size: 13px !important; }
body.st-landing .st-sf-marquee-stage { box-shadow: none !important; }

/* Minimum readable size for small print on the page */
body.st-landing .text-xs { font-size: 13px !important; line-height: 1.45 !important; }

/* Cookie notice: a compact corner card instead of a panel covering content */
.st-consent {
  max-width: 360px !important;
  padding: .85rem 1rem !important;
  gap: .75rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important; /* it floats: keep */
}
.st-consent .st-cookie { width: 40px !important; height: 40px !important; }
.st-consent ul { display: none !important; }
.st-consent p { font-size: .9rem !important; margin: .2rem 0 .55rem !important; }

/* ────────────────────────────────── home ────────────────────────────────── */

/* Primary action: flat accent, no gradient or glow */
body.st-polish-home #startFlowBtn.btn-primary,
body.st-polish-home .btn-primary {
  background: var(--pl-accent) !important;
  background-image: none !important;
  color: var(--pl-accent-ink) !important;
  box-shadow: none !important;
}
body.st-polish-home #startFlowBtn.btn-primary:hover,
body.st-polish-home .btn-primary:hover {
  background: #e2d4ff !important;
  transform: translateY(-1px);
}

/* Headline: two lines on a phone */
body.st-polish-home .st-fold h1 {
  font-size: clamp(2.2rem, 9.2vw, 4rem) !important;
  text-wrap: balance;
}

/* Wordmark: solid accent instead of gradient text */
body.st-polish-home .bg-clip-text.text-transparent {
  background: none !important;
  color: var(--pl-accent) !important;
}

/* Mobile top bar: tone edge instead of a bright hairline */
body.st-polish-home > nav:first-of-type {
  border-bottom-color: rgba(255, 255, 255, .06) !important;
  box-shadow: none !important;
}

/* Plan chips: readable size, flat active state */
body.st-polish-home .st-trial span,
body.st-polish-home .st-trial .st-trial-chip { font-size: 12.5px !important; }
body.st-polish-home .st-trial span.is-on,
body.st-polish-home .st-trial .st-trial-chip.is-on {
  background: var(--pl-accent) !important;
  color: var(--pl-accent-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.st-landing .st-engine a:hover,
  body.st-polish-home .btn-primary:hover { transform: none; }
}

/* ── second pass (inspector after-run) ── */
body.st-landing .st-style-label,
body.st-landing .st-sf-marquee-empty { font-size: 13px !important; }
body.st-landing .text-\[10px\] {
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.st-landing .st-style-clip { box-shadow: none !important; }
body.st-landing #start h2 { font-size: clamp(1.35rem, 5.6vw, 3rem) !important; }
@media (max-width: 640px) {
  body.st-landing .st-hero-copy { padding-inline: 16px; }
}

/* home: flat active nav item and plan button */
body.st-polish-home aside a.border-primary {
  background: rgba(210, 187, 255, .12) !important;
  background-image: none !important;
}
body.st-polish-home .st-plan-btn {
  background: var(--pl-accent) !important;
  background-image: none !important;
  color: var(--pl-accent-ink) !important;
  box-shadow: none !important;
}

/* ── StyleForge marquee as a faded backdrop behind the 3 hero clips (owner request) ── */
body.st-landing .st-clips-stage { position: relative; isolation: isolate; }
body.st-landing .st-clips-stage > #st-style-clips { position: relative; z-index: 1; }
body.st-landing #st-sf-heygen-backdrop.is-backdrop {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 100vw;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  opacity: .22;
  filter: blur(1.5px) saturate(.75);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
body.st-landing #st-sf-heygen-backdrop.is-backdrop .st-sf-marquee-head,
body.st-landing #st-sf-heygen-backdrop.is-backdrop .st-sf-marquee-label,
body.st-landing #st-sf-heygen-backdrop.is-backdrop .st-sf-marquee-sub,
body.st-landing #st-sf-heygen-backdrop.is-backdrop .st-sf-marquee-kicker,
body.st-landing #st-sf-heygen-backdrop.is-backdrop .st-sf-marquee-edge { display: none !important; }
body.st-landing #st-sf-heygen-backdrop.is-backdrop .st-sf-marquee {
  -webkit-mask-image: none;
  mask-image: none;
}
@media (prefers-reduced-motion: reduce) {
  body.st-landing #st-sf-heygen-backdrop.is-backdrop { opacity: .14; }
}

/* ── Kinetic headlines (Vercel-style) — states exist only under html.st-motion-ready ── */
body.st-landing main section h2 {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
}
html.st-motion-ready .kw {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(.38em);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), filter .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 55ms);
  will-change: transform, opacity, filter;
}
html.st-motion-ready .is-in .kw {
  opacity: 1;
  filter: none;
  transform: none;
}

/* ── Card reveal (Everygen "part-in") ── */
html.st-motion-ready .st-rv {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--rv, 0) * 70ms);
}
html.st-motion-ready .st-rv.is-in { opacity: 1; transform: none; }
/* keep each card's own hover lift working after the reveal */
html.st-motion-ready .st-rv.is-in:hover { transition-delay: 0s; }

/* ── Tools as a bento (Everygen structure): lead card + tagged tiles ── */
body.st-landing .st-engine {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr !important;
  grid-auto-rows: minmax(150px, auto);
  gap: 1rem !important;
}
body.st-landing .st-engine > a { position: relative; min-height: 0 !important; }
body.st-landing .st-engine > a:first-child {
  grid-row: span 2;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem 1.5rem !important;
  background: #2b1a52 !important;
}
body.st-landing .st-engine > a:first-child .material-symbols-outlined { font-size: 2.6rem !important; margin-bottom: auto; }
body.st-landing .st-engine > a:first-child h3 { font-size: 1.5rem !important; margin-top: 1.2rem; }
body.st-landing .st-engine > a:first-child p { font-size: 1rem; color: #e4dbf6; }
body.st-landing .st-engine > a[data-tag]::after {
  content: attr(data-tag);
  position: absolute;
  top: .9rem;
  right: .9rem;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pl-accent);
  background: rgba(210, 187, 255, .14);
}
body.st-landing .st-engine > a:first-child[data-tag]::after {
  color: var(--pl-accent-ink);
  background: var(--pl-accent);
}
@media (max-width: 900px) {
  body.st-landing .st-engine { grid-template-columns: 1fr 1fr !important; }
  body.st-landing .st-engine > a:first-child { grid-column: span 2; grid-row: auto; min-height: 190px !important; }
}
@media (max-width: 560px) {
  body.st-landing .st-engine { grid-template-columns: 1fr !important; }
  body.st-landing .st-engine > a:first-child { grid-column: auto; }
}
/* 6 tools = lead (2 rows) + 2x2 tiles + last one as a full-width strip: no empty cells */
body.st-landing .st-engine > a:last-child:not(:first-child) {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: center;
}
body.st-landing .st-engine > a:last-child:not(:first-child) .material-symbols-outlined { grid-row: span 2; }
body.st-landing .st-engine > a:last-child:not(:first-child) h3 { margin: 0 0 .2rem !important; }
@media (max-width: 560px) {
  body.st-landing .st-engine > a:last-child:not(:first-child) { grid-template-columns: 1fr; }
  body.st-landing .st-engine > a:last-child:not(:first-child) .material-symbols-outlined { grid-row: auto; }
}