/* The potion, named directly under the turn. Three short sentences that are
   the whole product, set between the pivot and the explanation. */
.hero-potion {
    margin: 0 0 1.05rem;
    max-width: var(--measure-tight);
    font-size: var(--step-1);
    line-height: 1.45;
    color: var(--day-ink);
}

.hero-potion strong {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.2;
    /* "Dev born. Player grown. Yours to / carry." on every shape, and
       balanced it broke "Dev born. Player / grown." instead. The first two
       beats are one breath and stay on one line; the break can only land
       after them. */
}

.hero-potion .beat {
    white-space: nowrap;
}

/* The ask rides with the promise. It was at the foot of three paragraphs,
   which put it below the fold at 1440x900 and at 390x844 — a hero that states
   the pitch and then makes you scroll to find out what to do with it. */
.hero-buttons-lead {
    margin: 0 0 clamp(1.1rem, 2vw, 1.5rem);
}

/* Three asks in one row wrap 2+1 on a tablet and a phone, with "Read the
   docs" alone on the second line. Where the row cannot hold three, the ask
   takes the first line and the two doors share the second. */
/* A real break, not a dead declaration. `flex-basis: 100%` with
   `max-width: max-content` renders identically to no rule at all — flex
   line-breaking uses the hypothetical main size, which max-width has already
   clamped back to the button's own width, so nothing ever wrapped and the
   2+1 rag this comment named went on shipping. A zero-height item with a
   full-width basis is the only thing that forces the line, and it leaves the
   button at its own width. */
/* At every width, not below a breakpoint: the ask's label decides whether
   three fit on one line, and at 1440 "Bring one character to life" left
   "Read the docs" alone on a line of its own. The ask takes the first line
   and the two doors share the second, whatever the label and the screen. */
.hero-buttons-lead .row-break {
    display: block;
    flex-basis: 100%;
    height: 0;
    margin: 0;
}


/* The smallest phone still in common use. Everything above already scales, so
   this only has to stop the deck and the ask spending lines they do not have. */
/* The smallest screens still in common use — a 320x568 phone, or any window
   shorter than 600px. Measured there, the promise line was fine and its gloss
   was seven lines and 228px, which is what pushed the ask off the fold. The
   three beats ARE the promise; the sentence explaining them is the first thing
   that can go when there is no room, and it is still one scroll away. */
@media (max-height: 600px), (max-width: 360px) {
    .hero-gloss { display: none; }

    .kicker { font-size: 0.8125rem; }

    .hero-potion {
        font-size: var(--step-1);
        margin-bottom: 0.7rem;
    }

    .hero-buttons-lead {
        gap: 0.5rem 1rem;
        margin-bottom: 0.9rem;
    }
}

/* The weight of the door, said once and quietly under the invitation: a
   signature in the display face, not a banner. It stays at every size — on
   the smallest screens it is the one fact the first view keeps. */
.hero-ground {
    max-width: 34rem;
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--day-ink-soft);
}