/* whatmodel.fun — grey, white and black, and the app's own typefaces.
   One stylesheet, no build step: files that can be dragged into Cloudflare
   Pages and still edited by hand in a year. */

:root {
    --ink: #0e0e11;
    --ink-soft: #5a5a63;
    --ink-faint: #9a9aa4;
    /* Three steps apart on purpose. The first pair were two hairs of grey
       from each other and the bands read as one long section. */
    --paper: #f5f5f7;
    --paper-deep: #e3e3e9;
    --white: #ffffff;
    --line: rgba(14, 14, 17, 0.09);
    --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    --body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --radius: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--body);
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Full-width bands, each its own shade, with the content held to one column
   inside them. The separation between sections is the background itself —
   nothing is drawn to divide them and nothing needs to be kept in step. */
.band { width: 100%; }
.band--white { background: var(--white); }
.band--pale  { background: var(--paper); }

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(22px, 4.5vw, 56px);
}

/* ---------- Nav ---------- */

/* Not inside the column the writing sits in: the mark is hard against the
   left edge of the page and the button against the right. */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px clamp(20px, 3vw, 40px);
}

.mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.03em;
    text-decoration: none;
}

/* The app's own icon, not a stand-in. The file is a flat square — iOS applies
   the rounded mask itself — so the rounding is done here, at roughly the
   proportion iOS uses, or it would sit on the page as a hard-edged tile. */
.mark__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: block;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 14px;
    color: var(--ink-soft);
}

.nav__links a { text-decoration: none; }
.nav__links a:hover { color: var(--ink); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    padding: 13px 24px;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { transform: translateY(-2px); background: #24242b; }

.btn--pale { background: var(--paper); color: var(--ink); }
.btn--pale:hover { transform: translateY(-2px); background: var(--paper-deep); }

.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--paper); }

/* ---------- Hero ---------- */

/* The band, not the grid, holds the wing: it has to be able to run off the
   left edge of the page, and the writing column stops well short of it. */
.band--hero { position: relative; overflow: hidden; }

/* The app's own mark, coming out of the far left the way it does behind the
   profile. Masked rather than placed — the delivered SVG is filled near-black
   and would be a silhouette on white. Faint enough to sit under type, big
   enough to be a shape rather than the grey blobs the first attempt was. */
.hero__wing {
    position: absolute;
    left: -10%;
    bottom: -6%;
    width: 54%;
    min-width: 420px;
    aspect-ratio: 1.74;
    background: var(--ink);
    opacity: 0.07;
    -webkit-mask: url("wing.svg") no-repeat left bottom / contain;
    mask: url("wing.svg") no-repeat left bottom / contain;
    pointer-events: none;
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    padding-top: 40px;
    padding-bottom: 76px;
}

h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    margin: 0;
}

h1 span { color: var(--ink-faint); }

.lede {
    font-size: 16px;
    line-height: 1.62;
    color: var(--ink-soft);
    margin: 22px 0 0;
    max-width: 44ch;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.stat__n {
    font-family: var(--display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.stat__l {
    font-size: 13px;
    color: var(--ink-faint);
    margin-top: 2px;
}

/* ---------- Screenshot slots ---------- */

/* Empty and labelled until the real screenshots arrive. A dashed slot that
   says what belongs in it beats a stand-in nobody remembers to replace. */
/* White, not grey: these sit on grey bands now, and a grey slot on a grey
   band is a dashed outline around nothing. */
.slot {
    position: relative;
    border-radius: 26px;
    background: var(--white);
    border: 2px dashed rgba(14, 14, 17, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ink-faint);
    overflow: hidden;
}

.slot img { width: 100%; height: 100%; object-fit: cover; }

/* The hero's is the same slot as every other one, at phone proportions. The
   pad that used to sit behind it read as a stray rectangle, and the watermark
   behind the headline read as grey blobs — both gone. */
.slot--phone {
    aspect-ratio: 9 / 16;
    border-radius: 30px;
    max-width: 300px;
    justify-self: end;
    width: 100%;
}

/* ---------- Split feature rows ---------- */

/* One row per band now, so the padding that used to separate them is the
   band's own breathing room. */
.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: 66px 0;
}

.row--flip .row__text { order: 2; }

.eyebrow {
    font-family: var(--display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 12px;
}

.row h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0 0 14px;
}

.row p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 46ch;
}

.row .slot { aspect-ratio: 4 / 3; }

/* ---------- Footer ---------- */

/* Room above it, and none below: the card is the bottom of the page rather
   than something floating near it.
 *
 * **Written as `footer.wrap`, and it has to be.** The footer carries `.wrap`
 * for its column, `.wrap` sets `padding` as a shorthand, and a class beats an
 * element — so a plain `footer { padding: … }` here was thrown away in silence
 * and the space never appeared. Anything that sets padding on a `.wrap`
 * element needs the class in its own selector too.
 */
footer.wrap { padding-top: clamp(90px, 9vw, 130px); padding-bottom: 0; }

/* One card rather than a row of stacked blocks. The brand sits on the left
   with its small print under it, the columns spread across the right — the
   space between them is what stops it reading as a crowded list. */
.footer__card {
    background: var(--paper);
    /* Square along the bottom, so it meets the end of the page rather than
       curving away from it. */
    border-radius: var(--radius) var(--radius) 0 0;
    padding: clamp(28px, 3.6vw, 48px);
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

.footer__brand { min-width: 220px; }

.footer__note {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-faint);
    margin: 16px 0 0;
}

.footer__cols {
    display: flex;
    gap: clamp(40px, 7vw, 104px);
    flex-wrap: wrap;
}

.footer__col h4 {
    font-family: var(--display);
    font-size: 15px;
    margin: 0 0 16px;
}

.footer__col a {
    display: block;
    font-size: 14px;
    color: var(--ink-soft);
    text-decoration: none;
    margin-bottom: 12px;
}

.footer__col a:hover { color: var(--ink); }

/* ---------- Scroll-in ---------- */

/* Small and one-directional: things arrive and stay. A page this short cannot
   afford an effect anyone has to wait through. */
.rise {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.22, 0.8, 0.3, 1),
                transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.rise.seen { opacity: 1; transform: none; }
.rise[data-delay="1"] { transition-delay: 0.08s; }
.rise[data-delay="2"] { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rise { opacity: 1; transform: none; transition: none; }
    .btn { transition: none; }
}

/* The nav's text link wraps to three lines on a narrow phone and looks broken.
   It is a duplicate of the hero's own button, so it simply goes. */
@media (max-width: 520px) {
    .nav__links a:not(.btn) { display: none; }
}

@media (max-width: 860px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 26px;
        padding-bottom: 48px;
        gap: 34px;
    }
    .slot--phone { justify-self: center; max-width: 260px; }
    .row { grid-template-columns: 1fr; gap: 22px; padding: 44px 0; }
    .row--flip .row__text { order: 0; }
    .stats { gap: 26px; }
}

/* ---------- Legal pages ---------- */

.legal { background: var(--white); }

.legal .wrap { max-width: 760px; margin: 0 auto; padding-top: 40px; padding-bottom: 80px; }

.legal h1 {
    font-size: clamp(30px, 5vw, 42px);
    margin: 24px 0 6px;
}

.legal .updated {
    font-size: 14px;
    color: var(--ink-faint);
    margin: 0 0 32px;
}

.legal h2 {
    font-family: var(--display);
    font-size: 19px;
    letter-spacing: -0.02em;
    margin: 32px 0 10px;
}

.legal p, .legal li {
    font-size: 16px;
    line-height: 1.68;
    color: var(--ink-soft);
}

.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal code { background: var(--paper); padding: 2px 6px; border-radius: 6px; font-size: 14px; }

.legal .back {
    font-family: var(--display);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    color: var(--ink-faint);
}

.legal .back:hover { color: var(--ink); }

.note {
    background: var(--paper);
    border-radius: 14px;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.6;
}