/* ===================================================================
   Folio — landing page
   Direction "Proof". Warm paper, cool ink, hairlines, one accent.
   Tokens come from variables.css; nothing here invents a colour.
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* One value for the vertical rhythm. Sections used to carry 7rem top and
   bottom each, which meant every seam between two of them was 14rem of
   empty page. */
:root { --section-y: 4rem; }
@media (min-width: 901px) { :root { --section-y: 5.5rem; } }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.landing {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--ink-2);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Paper is never perfectly smooth. You should not see this layer. */
body.landing::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="dark"] body.landing::before { opacity: 0.05; }

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--pen); text-decoration: none; }

.tabular {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Must stay identical to the block in css/components.css. D-80 Q1, and
   walk_skip_link in tests/a11y-keyboard.py. */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-color);
    color: var(--on-pen);
    border-radius: var(--radius-md);
    z-index: var(--z-tooltip);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--spacing-md);
}

:where(a, button):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-md);
}

/* ─── Buttons ──────────────────────────────────────────────────────
   One radius family throughout: --radius-md on everything interactive. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    white-space: nowrap;               /* a wrapped CTA is a broken CTA */
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--font-size-base);
    padding: 0.6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast),
                color var(--transition-fast);
}

.btn-lg { font-size: var(--font-size-md); padding: 0.8rem 1.5rem; }
.btn-sm { font-size: var(--font-size-sm); padding: 0.45rem 0.9rem; }

/* This read color: #FFFFFF with a comment claiming 6.8:1, and the number
   was true in the light theme only: in the dark one --pen lifts to #7E95FF
   and the same white is 2.75:1, on the three buttons this page exists to
   get pressed. --on-pen flips to #171614 there - 6.77:1 light, 6.57:1 dark,
   and it fixes hover too (3.87 to 4.67), which nothing measures. Nothing
   had ever read this line: landing.css is outside both
   contrastPairsUnder45 and colourLiteralsOutsideTokens by design. */
.btn-primary { background: var(--pen); color: var(--on-pen); }
.btn-primary:hover { background: var(--pen-deep); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--ink-faint); background: var(--surface); }
.btn-ghost:active { transform: translateY(1px); }

/* ─── Nav ──────────────────────────────────────────────────────────
   One line, 64px, hairline under it. */

/* The hairline spans the full width; only the contents are contained.
   A rule that stops short of the viewport edge reads as a mistake. */
.nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr min(var(--container), 100%) 1fr;
}

.nav > * { grid-column: 2; }

.nav-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    height: var(--header-height);
    padding: 0 var(--spacing-lg);
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.nav-mark { width: 24px; height: 24px; display: block; flex-shrink: 0; }

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
    margin-inline-start: auto;
    font-size: var(--font-size-base);
}

.nav-links a { color: var(--ink-soft); transition: color var(--transition-fast); }
.nav-links a:hover { color: var(--ink); }

/* ─── Hero ─────────────────────────────────────────────────────────
   Asymmetric: copy takes 1fr, the sheet takes a fixed-ish column and
   sits lower than the text baseline so the composition is not a
   symmetrical two-up. */

.hero {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-3xl);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--spacing-3xl);
    align-items: center;
}

.hero h1 {
    font-size: clamp(1.875rem, 3.9vw, 2.875rem);
    letter-spacing: var(--tracking-display);
}

.hero-sub {
    margin-top: var(--spacing-lg);
    max-width: 38ch;
    font-size: var(--font-size-lg);
    color: var(--ink-soft);
}

.hero-actions {
    margin-top: var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* The terms, attached to the button they are the terms of. --ink-soft and
   not --ink-faint: --ink-faint paints real text at 2.41:1, which is the
   defect the interface ratchet was built to stop coming back, and this is
   the last line on the page that should be hard to read. */
.hero-price {
    margin-top: var(--spacing-md);
    max-width: 42ch;
    font-size: var(--font-size-base);
    color: var(--ink-soft);
}

.hero-price strong { color: var(--ink); font-weight: 500; }

/* ─── The sheet ────────────────────────────────────────────────────
   A genuine A4 page from css/document.css, scaled to this column by
   js/landing.js. The height is set there too, because a transform
   reports the size it started at. */

.hero-sheet-wrap {
    position: relative;
    max-width: 25rem;
    margin-inline-start: auto;
}

/* The stamp. Not decoration: it is the ATS score the checker produces.
   It straddles the bottom edge rather than sitting inside the sheet, which
   is both truer (the score is the app's verdict, not part of the document)
   and stops it landing on top of the last section's text. */
.sheet-stamp {
    position: absolute;
    right: -1rem;
    bottom: -1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.7rem 1rem;
    background: var(--paper);
    border: 1.5px solid var(--pen);
    border-radius: var(--radius-md);
    transform: rotate(3deg);
    box-shadow: var(--shadow-lg);
}

.stamp-score {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    color: var(--pen);
    font-variant-numeric: tabular-nums;
}

/* Was opacity: 0.55 over --pen, which composites to 2.57:1 light and
   2.85:1 dark. --ink-soft is 4.88 and 5.48 against this stamp's backdrop
   and is what .stamp-label already uses. Opacity on text is how a colour
   stops being the colour anybody wrote down. */
.stamp-of { font-size: 0.9rem; color: var(--ink-soft); }

.stamp-label {
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ─── Checks ───────────────────────────────────────────────────────
   Big number, then a 2-up grid. Twelve rows as a plain list would be
   the lazy shape. */

.checks {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--section-y) var(--spacing-lg);
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--spacing-3xl);
    align-items: start;
}

/* Shared with .price-lede below, deliberately. The twelve checks and the
   one price are the two numbers on this page, and setting them the same
   way is what says the price is a fact about the product rather than
   small print underneath it. */
.checks-lede .count,
.price-lede .count {
    font-family: var(--font-mono);
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: 500;
    line-height: 0.9;
    color: var(--pen);
    font-variant-numeric: tabular-nums;
}

.checks-lede h2 {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-2xl);
    max-width: 16ch;
}

.checks-lede > p {
    margin-top: var(--spacing-md);
    max-width: 34ch;
    color: var(--ink-soft);
}

.checks-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--spacing-xl);
}

.checks-grid li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--font-size-base);
    line-height: var(--line-height-snug);
}

.checks-grid i { color: var(--pen); margin-top: 0.1em; flex-shrink: 0; }

/* ─── How ──────────────────────────────────────────────────────────
   Numbered because it is a real sequence. The rule down the left is
   the thread between steps. */

/* Left edge stays on the container like every other section. This block
   was centred at 44rem, so the eye had to jump 190px inward and back out
   again, which reads as a mistake rather than as variation. The variation
   here is the vertical numbered flow, not the margin. */
.how {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--section-y) var(--spacing-lg);
}

.how h2 { font-size: var(--font-size-3xl); }

.steps {
    list-style: none;
    margin-top: var(--spacing-2xl);
    max-width: var(--container-text);
}

.steps li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-2xl);
    position: relative;
}

/* The thread between steps. It was a hairline in --rule and disappeared;
   at this length it needs the weight of the accent to read as a
   connection rather than an artefact. */
.steps li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 2.75rem;
    bottom: 0.25rem;
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--pen) 45%, transparent),
        color-mix(in srgb, var(--pen) 12%, transparent)
    );
}

.step-n {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--pen);
    border-radius: var(--radius-full);
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--pen);
}

.steps h3 { font-size: var(--font-size-xl); margin-top: 0.35rem; }
.steps p { margin-top: var(--spacing-xs); color: var(--ink-soft); max-width: 52ch; }

/* ─── Formats ──────────────────────────────────────────────────────
   Four in a row, extension in mono, separated by rules rather than
   boxed into cards. */

.formats {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--section-y) var(--spacing-lg);
    border-top: 1px solid var(--rule);
}

.formats h2 { font-size: var(--font-size-2xl); }

.format-row {
    margin-top: var(--spacing-xl);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-lg);
}

.format { padding-top: var(--spacing-md); border-top: 2px solid var(--ink); }
.format:nth-child(n+2) { border-top-color: var(--rule); }

.format-ext {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    color: var(--ink);
}

.format p {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-base);
    color: var(--ink-soft);
}

/* ─── Price ────────────────────────────────────────────────────────
   Straight after the formats, because the formats are what is being
   sold. Same grid as .checks so the number is set like the twelve.

   This section exists because the page said "Free" in four places and
   named no price anywhere, months after the download started costing
   100 EGP. */

.price {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--section-y) var(--spacing-lg);
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--spacing-3xl);
    align-items: start;
}

/* The currency is part of the price, not a footnote about it, so it keeps
   the colour and only steps down in size. */
.price-unit {
    font-size: 0.36em;
    letter-spacing: var(--tracking-label);
}

.price-lede h2 {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-2xl);
    max-width: 18ch;
}

.price-body p { max-width: 54ch; color: var(--ink-soft); }
.price-body p + p { margin-top: var(--spacing-md); }

/* ─── Privacy ──────────────────────────────────────────────────────
   Full-width, on the recessed surface, deliberately quiet. */

.privacy {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.privacy-inner {
    max-width: var(--container-text);
    margin: 0 auto;
    padding: var(--section-y) var(--spacing-lg);
}

.privacy i { font-size: 1.75rem; color: var(--pen); }
.privacy h2 { margin-top: var(--spacing-sm); font-size: var(--font-size-2xl); }
.privacy p { margin-top: var(--spacing-md); color: var(--ink-2); max-width: 58ch; }

/* ─── Close ────────────────────────────────────────────────────────
   The only centred block on the page. It earns it by being the end. */

.close {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--section-y) var(--spacing-lg);
}

.close h2 { font-size: var(--font-size-3xl); }
.close .btn { margin-top: var(--spacing-xl); }

.close-note {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--ink-soft);
}

.close-note strong { color: var(--ink-2); font-weight: 500; }

/* ─── Footer ───────────────────────────────────────────────────────*/

.foot {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--ink-soft);
}

.foot-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}

.foot-links { display: flex; gap: var(--spacing-lg); margin-inline-start: auto; }
.foot-links a { color: var(--ink-soft); }
.foot-links a:hover { color: var(--ink); }
.foot-legal { font-family: var(--font-mono); font-size: var(--font-size-xs); }

/* ─── Entry ────────────────────────────────────────────────────────
   One orchestrated moment on load, then the page holds still. Nothing
   here loops. The stagger reads top-down the way the eye already
   moves, so it reinforces hierarchy rather than decorating it. */

@media (prefers-reduced-motion: no-preference) {
    .hero-copy > *,
    .hero-sheet-wrap {
        animation: rise 600ms var(--ease-out) backwards;
    }
    .hero h1            { animation-delay: 60ms; }
    .hero-sub           { animation-delay: 140ms; }
    .hero-actions       { animation-delay: 220ms; }
    .hero-price         { animation-delay: 280ms; }
    .hero-sheet-wrap    { animation-delay: 300ms; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The sheet lifts slightly toward the reader on hover. Feedback that it is
   an object, not a picture of one. The rule itself lives in document.css,
   next to the transform it has to compose with. */

/* ─── Narrower ─────────────────────────────────────────────────────
   Every asymmetric grid above collapses explicitly. Nothing is left
   to "Tailwind will handle it". */

@media (max-width: 900px) {
    .nav { gap: var(--spacing-md); padding: 0 var(--spacing-md); }
    .nav-links { display: none; }

    .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-2xl);
        padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-3xl);
    }
    .hero-copy { padding-top: 0; }
    .hero h1 { max-width: 20ch; }

    .hero-sheet-wrap { max-width: 26rem; margin: 0 auto; width: 100%; }

    .checks,
    .price {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--spacing-xl);
        padding: var(--section-y) var(--spacing-md);
    }
    .checks-grid { grid-template-columns: minmax(0, 1fr); }

    .how, .formats, .privacy-inner, .close {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    .how, .formats { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }

    /* Three, not two: with five cards a two-column grid leaves a single
       orphan on its own row. Three splits them 3 + 2. */
    .format-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-lg); }

    .foot { flex-direction: column; align-items: flex-start; }
    .foot-links { margin-inline-start: 0; flex-wrap: wrap; }
}

@media (max-width: 540px) {
    .hero h1 { font-size: 2rem; max-width: none; }
    .hero-actions .btn { width: 100%; }
    .format-row { grid-template-columns: minmax(0, 1fr); }
    .sheet-stamp { right: 0; bottom: 0.75rem; padding: 0.5rem 0.75rem; }
    .stamp-score { font-size: 1.25rem; }
}