/* ============================================================
   hero.css — landing hero with headline, CTAs, and fake browser
   ============================================================ */

.hero          { padding: 0; margin-top: var(--space-24); text-align: center; }

.hero h1       { line-height: 1.05; letter-spacing: -.028em;
                 margin: 0 auto var(--space-6); max-width: 14ch; }
.hero h1 .pri  { color: var(--color-primary); }

.hero .subtitle { max-width: 54ch; margin: 0 auto var(--space-12); }

.hero .ctas    { display: inline-flex; gap: var(--space-3); flex-wrap: wrap;
                 justify-content: center; margin-bottom: var(--space-36); }

/* Apple-style pill CTAs on desktop; revert to default mobile sizing below 769. */
@media (min-width: 769px) {
  .hero .ctas .button {
    height: 48px; padding: 0 24px;
    border-radius: 980px;
    font-size: 17px; font-weight: var(--font-weight-medium);
  }
}

.hero .ctas .button--ghost,
.hero .ctas .button--ghost:hover { background: var(--color-accent);
                                   color: var(--color-foreground); }
.hero .ctas .button--solid:hover { background: var(--color-secondary); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero .ctas .button--ghost,
  :root:not([data-theme="light"]) .hero .ctas .button--ghost:hover { background: var(--color-muted); }
}
:root[data-theme="dark"] .hero .ctas .button--ghost,
:root[data-theme="dark"] .hero .ctas .button--ghost:hover { background: var(--color-muted); }

/* ----- Fake browser window --------------------------------------- */

.hero .stage   { padding: 0 var(--space-6); margin: 0 auto; max-width: 1200px; }

.hero .window  { background: var(--color-background);
                 border-radius: var(--radius-lg);
                 box-shadow: 0 0 0 1px var(--color-border), var(--shadow-elevated);
                 overflow: hidden; }

.hero .titlebar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4);
                  border-bottom: 1px solid var(--color-border); background: var(--color-accent);
                  position: relative; min-height: var(--space-6); }
.hero .titlebar .dots { display: inline-flex; gap: var(--space-2); }
.hero .titlebar .dot  { width: var(--space-3); height: var(--space-3); border-radius: 50%;
                        display: inline-block; }
.hero .titlebar .dot.r { background: #FF5F57; }
.hero .titlebar .dot.y { background: #FEBC2E; }
.hero .titlebar .dot.g { background: #28C840; }
.hero .titlebar .url  { position: absolute; left: 50%; top: 50%;
                        transform: translate(-50%, -50%);
                        font-family: var(--font-family-mono);
                        font-size: 13px; color: var(--color-muted-foreground);
                        padding: var(--space-2) var(--space-4);
                        background: var(--color-background);
                        border: 1px solid var(--color-border); border-radius: 999px;
                        line-height: 1; text-decoration: none; cursor: pointer;
                        z-index: 3; pointer-events: auto; }

.hero .content    { position: relative; }
.hero .window img.bg { width: 100%; height: auto; vertical-align: bottom; }
.hero .window img.screenshot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 80%; height: auto;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: clamp(6px, 1.2vw, 16px);
  box-shadow: var(--shadow-elevated);
}

/* Mobile-only phone preview. Hidden on desktop; the @media block
   below turns this on and gives the .window its card treatment. */
.hero .window .screenshot-mobile { display: none; }

/* ----- Responsive --------------------------------------------- */

@media (max-width: 768px) {
  .hero .ctas    { margin-bottom: var(--space-24); }
  .hero .titlebar,
  .hero .content { display: none; }

  /* Warm-gradient card matching .features-main / .practice-main. */
  .hero .window  { background: var(--gradient-warm);
                   border-radius: var(--radius-xl);
                   box-shadow: var(--shadow-elevated);
                   overflow: hidden;
                   /* Aspect ratio crops the bottom of the phone — tweak to
                      control how much shows. 4/5 ≈ bottom third cut. */
                   aspect-ratio: 4 / 5; }

  .hero .window .screenshot-mobile {
    display: flex; justify-content: center; align-items: flex-start;
    width: 100%; height: 100%;
    padding: var(--space-12) var(--space-16) 0;
    box-sizing: border-box;
  }
  .hero .window .screenshot-mobile img { width: 100%; height: auto; }
}

@media (max-width: 480px) {
  .hero .ctas    { margin-bottom: var(--space-16); }
}