/* ===== The landing =====
   Set in the site's own idiom rather than in cards: a rule across the top of
   each thought, a monospaced marker in the margin, one statement against a
   hairline and the detail underneath. The hexagon is the figure a report is
   drawn as, and the only ornament. */

/* Above the living graph behind it, which is fixed. */
.lp {
    --lp-gutter: clamp(20px, 4vw, 40px);
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--lp-gutter) 40px;
}

/* ── The background texture ──
   A grid of dots that drifts on its own and lifts around the pointer, drawn
   by dotfield.js. Fixed rather than absolute: the picture is the same and a
   canvas as tall as this page would be a buffer nobody needs. The colours
   live here so the script can read them and follow the theme. */

:root            { --landing-dot-rgb: 0,0,0;       --landing-dot-alpha: 0.04;  --landing-dot-glow: 0.05; }
:root[data-theme="dark"] { --landing-dot-rgb: 255,255,255; --landing-dot-alpha: 0.085; --landing-dot-glow: 0.16; }

.lp-dots {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── The report, in a browser, rising into the hero ──
   Only the top of the window shows above the fold: a page cut off by the
   edge of the screen reads as one that continues, where a whole window
   floating in the middle reads as a picture of one. */

.lp-win {
    position: relative;
    z-index: 1;
    /* out of the 1100px column the rest of the page lives in: the report
       is the one thing here that is worth the width, and inside the column
       it came out small and cut through the middle of a card.
       It is held off the edge by the page's own gutter, so it never crowds
       the screen harder than the text does - and the gutter is a variable
       because it is 20px on a phone and 40 on a desktop. */
    width: min(1280px, 100vw - 2 * var(--lp-gutter));
    left: 50%;
    transform: translateX(-50%);
    /* the window still bites into the hero, but the hero's bottom padding
       is what keeps the buttons clear of it - pulling harder here is what
       put the window on top of them the first time */
    margin: -24px 0 0;
    /* an outline the whole way round and a radius on all four corners: the
       bottom was left open while the window ran off the screen, and once it
       stopped doing that the open edge just looked unfinished */
    border: 1px solid var(--dark-gray);
    border-radius: 20px;
    background: var(--bg-elevated);
    overflow: hidden;
    /* the first section used to start immediately under the cut */
    margin-bottom: clamp(96px, 15vh, 190px);
}

.lp-win__bar {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dark-gray);
}
.lp-win__dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.lp-win__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--dark-gray); }
.lp-win__url {
    flex: 1; min-width: 0;
    padding: 5px 14px;
    border-radius: 40px;
    background: var(--bg);
    font-size: 12px; color: var(--medium-gray);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* What the window shows: the report as drawn, one file per theme, cut so
   the whole cognitive profile is in view and the page still runs past the
   bottom edge. The ratio - not a fixed height - is what keeps the cut in
   the same place at every width. */
.lp-win__view {
    /* Of the file's own 2880 x 2100. The profile cards end around 1895, so
       cutting at 1960 put the cut right against their bottom edge; this
       leaves the report's own margin under them and still takes a slice off
       the end, which is what keeps it a window onto a longer page. */
    aspect-ratio: 2880 / 2050;
    overflow: hidden;
}
.lp-win__shot { display: block; width: 100%; height: auto; }

@media (max-width: 700px) {
    .lp-win { margin-top: -12px; border-radius: 14px; }
    .lp-win__view { aspect-ratio: 2880 / 2100; }   /* all of it: there is little of it at this size */
    .lp-win { margin-bottom: clamp(64px, 10vh, 110px); }
}

/* ── Hero ── */

.lp-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* No min-height: the hero and the window under it are one view, and a
       whole screen of air above the h1 pushed the thing being sold off the
       bottom of it. But the first cut at this was too tight the other way -
       the headline sat almost under the header and the buttons landed on
       the window. This is the middle: room to breathe, still one view. */
    padding: clamp(72px, 11vh, 120px) 0 clamp(104px, 15vh, 168px);
}

.lp h1 {
    font-size: clamp(38px, 6.4vw, 78px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--white);
    /* A sentence, not a slogan cut with <br>: let the lines share the words. */
    text-wrap: balance;
}

.lp-sub {
    font-size: clamp(17px, 1.9vw, 22px);
    line-height: 1.45;
    color: var(--white);
    text-wrap: balance;
    max-width: 44em;
    margin: 20px auto 0;
}

/* The three facts under the subtitle. Small frosted tags, and no outline:
   an outlined box of button height, in a row of three equal widths, is a
   button whatever the corner radius. Half the height, hugging their own
   text, and the only edge is where the frosting meets the page. */
.lp-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    /* a long way under the buttons: close up they joined the pair above
       them and read as one group of five controls */
    margin: clamp(56px, 9vh, 96px) 0 0;
    padding: 0;
    list-style: none;
}

.lp-chips li {
    padding: 7px 13px;
    border-radius: 9px;
    /* the dot field carries on behind them, which is what says they are
       not controls */
    background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    font-size: 13px;
    line-height: 1.3;
    color: var(--medium-gray);
    white-space: nowrap;
}

.lp .cta { margin-top: 52px; padding: 18px var(--cta-px); font-size: var(--fs-cta); }
.lp-note { margin-top: 22px; font-size: 13px; color: var(--medium-gray); }

/* ── One thought per block ── */

/* ── Sections: a centred heading over a bento grid ──
   The old layout hung each section off a left rail with its number in the
   margin. A bento grid has no rail to hang off, so the heading sits over
   the grid and centred, and the number goes above it. */

.lp-sec { margin-bottom: clamp(96px, 15vh, 190px); }

.lp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: clamp(44px, 7vh, 80px);
}


.lp-title {
    font-weight: 500;
    font-size: clamp(24px, 3.2vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.035em;
    color: var(--white);
    max-width: 22ch;
    text-wrap: balance;
}

.lp-head .lp-note { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--medium-gray); }

/* ── The grid ──
   Six columns, so a row can be halves, thirds or one whole. Below the
   breakpoint every tile takes the row: a bento that keeps its spans on a
   phone is just a table with rounded corners. */

.bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
}

.tile {
    grid-column: span 6;
    min-width: 0;
    padding: clamp(28px, 3.2vw, 46px);
    /* no outline: the fill already separates a tile from the page, and a
       line round every one of them turned the grid into a table */
    border-radius: 20px;
    background: var(--bg-elevated);
}

@media (min-width: 860px) {
    .tile--2 { grid-column: span 2; }
    .tile--3 { grid-column: span 3; }
    .tile--4 { grid-column: span 4; }
    .tile--6 { grid-column: span 6; }
}

.tile h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.025em; color: var(--white); }
.tile p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--medium-gray); }

/* the mark over a tile's title, in the report's own cyan: the size of
   the text it sits on, the colour of the product it describes */
.tile__ic { display: block; width: 26px; height: 26px; margin-bottom: 20px; color: var(--color-cognitive); }

.tile__head { margin-bottom: 18px; }
.tile__big { font-size: clamp(18px, 2vw, 24px); line-height: 1.3; letter-spacing: -0.025em; color: var(--white); font-weight: 500; }
.tile--mid { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.tile--mid p { margin: 0; }

/* ── The four steps, as a process ──
   The steps share one tile and one line, and the numbered labels carry the
   order. No connectors: four arrows across the row drew more attention
   than the steps they joined. */

.tile--flow { --flow-gap: clamp(22px, 3.4vw, 46px); }

.lp-flow { display: grid; gap: var(--flow-gap); list-style: none; margin: 0; padding: 0; }
.lp-flow__step { position: relative; min-width: 0; }

/* the icon alone, no plate behind it: a filled square under every step put
   four more boxes inside a box */
.lp-flow__mark { display: block; margin-bottom: 18px; color: var(--color-cognitive); }
.lp-flow__ic { display: block; width: 26px; height: 26px; }

.lp-flow__no {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
}

.lp-flow p { margin-top: 10px; }

/* Four abreast. The breakpoint is higher than the grid's own: at 860px a
   quarter column is too narrow for a title and three lines of text.

   subgrid, so the four parts line up across the row: one title wraps to two
   lines and the others do not, and without it that one column's sentence
   would start lower than the rest. */
@media (min-width: 1020px) {
    .lp-flow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(4, auto);
        column-gap: var(--flow-gap);
        row-gap: 0;
    }

    .lp-flow__step {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
    }
}

/* a tile that is only a picture, or only a table, keeps no padding of its
   own where the thing inside already has its own edge */
.tile--faq { padding-top: 6px; padding-bottom: 6px; }


.lp-para { margin-top: 26px; max-width: 56ch; font-size: 16px; line-height: 1.65; color: var(--medium-gray); }

/* no rule above it: the block's own air already ends the page */
/* Air on both sides, symmetrically: the section above ends with the page's
   own gap, so the same gap below (the margin) plus equal padding either
   side leaves the CTA standing on its own. */
.lp-end {
    padding: clamp(56px, 8vh, 110px) 0;
    margin-bottom: clamp(96px, 15vh, 190px);
    text-align: center;
}

.lp-end h2 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.035em; color: var(--white); }
.lp-end p { margin: 14px auto 0; max-width: 30em; font-size: 16px; line-height: 1.6; color: var(--medium-gray); }

/* ── Hero actions: the main button and a quiet one beside it ── */

.lp-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }
.lp-actions .cta { margin-top: 0; }

.cta.is-quiet {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--dark-gray);
    box-shadow: none;
    animation: none;
}

.cta.is-quiet::after { display: none; }
.cta.is-quiet:hover { background: var(--bg-elevated); color: var(--white); box-shadow: none; }

/* Emphasised lines inside a block: the site's white, medium weight. */
.lp-muted { color: var(--medium-gray); font-weight: 400; }

/* ── The funnel: five numbers, one under the other ── */

.lp-funnel {
    list-style: none;
    display: grid;
    gap: 10px;
}

.lp-funnel li { display: flex; align-items: baseline; gap: 18px; }

.lp-funnel-n {
    font-family: var(--font-mono);
    font-size: clamp(26px, 3.4vw, 44px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
    min-width: 3ch;
    text-align: right;
}

.lp-funnel-l { font-size: 17px; color: var(--medium-gray); }

/* ── The funnel, twice ──
   Written stacked first, because that is what a phone gets: each row is a
   column of stops joined by a short vertical line, under a caption saying
   which funnel it is. Wide enough, the rows lie down and share one grid
   (subgrid), so every stage sits in the same column whether or not that
   row has it - the counts can then be read straight down. */

.pipe { display: grid; gap: 30px; }
.pipe__row { display: grid; gap: 0; }

.pipe__cap {
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
}

.pipe__pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid var(--dark-gray);
    border-radius: 999px;
    /* outline only: a fill inside a tile that already has one made every
       stop look like a second card */
    background: none;
}

.pipe__ic { width: 19px; height: 19px; flex: 0 0 auto; color: var(--medium-gray); }
.pipe__l { font-size: 15px; line-height: 1.2; color: var(--medium-gray); }

.pipe__n {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

/* The stage this product adds, in the cyan the report itself uses for the
   cognitive side - not --btn, which is the muted brand teal and came out
   looking like a washed-out border rather than a mark. */
.pipe__pill.is-hot { border-color: var(--color-cognitive); }
.pipe__pill.is-hot .pipe__ic { color: var(--color-cognitive); }
.pipe__pill.is-hot .pipe__l { color: var(--white); font-weight: 500; }

/* what changed against the row above */
.pipe__d {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-cognitive);
    font-variant-numeric: tabular-nums;
}

/* Stacked: the count goes to the far edge of the pill, and the line that
   joined two stops now drops between them. 27px is the middle of the icon,
   so the line comes out of it. */
.pipe__n { margin-left: auto; }
.pipe__ln { width: 1px; height: 18px; margin-left: 27px; background: var(--dark-gray); }

@media (min-width: 900px) {
    .pipe { gap: 14px; }

    .pipe__row {
        grid-column: 1 / -1;
        grid-template-columns:
            auto minmax(10px, 1fr) auto minmax(10px, 1fr) auto
            minmax(10px, 1fr) auto minmax(10px, 1fr) auto;
        align-items: center;
    }

    /* one grid for both rows, so the stages line up across them */
    .pipe {
        grid-template-columns:
            auto minmax(10px, 1fr) auto minmax(10px, 1fr) auto
            minmax(10px, 1fr) auto minmax(10px, 1fr) auto;
    }
    .pipe__row { grid-template-columns: subgrid; }

    .pipe__cap { display: none; }
    .pipe__pill { white-space: nowrap; }
    .pipe__n { margin-left: 0; }
    .pipe__ln { width: auto; height: 1px; margin-left: 0; }

    .pipe .c1 { grid-column: 1; }
    .pipe .c2 { grid-column: 2; }
    .pipe .c3 { grid-column: 3; }
    .pipe .c4 { grid-column: 4; }
    .pipe .c5 { grid-column: 5; }
    .pipe .c6 { grid-column: 6; }
    .pipe .c7 { grid-column: 7; }
    .pipe .c8 { grid-column: 8; }
    .pipe .c9 { grid-column: 9; }
    /* the row without a screening stage runs straight past where it would be */
    .pipe .c2-4 { grid-column: 2 / 5; }
}

/* Four stops on the rail. */
.lp-flow.is-four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) and (min-width: 761px) {
    .lp-flow.is-four { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
    .lp-flow.is-four .lp-step:nth-child(2) .lp-rail::before { right: 0; }
}

@media (max-width: 760px) {
    .lp-flow.is-four { grid-template-columns: 1fr; }
}

/* the funnel diagram can be wider than a phone */
.lp-scroll { overflow-x: auto; }

/* ── FAQ: one question per rule, the answer folds out ── */

/* the last rule would double the tile's own edge */
.lp-faq details:first-child { border-top: 0; }

.lp-faq details { border-top: 1px solid var(--dark-gray); }

.lp-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 40px 20px 0;
    position: relative;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--white);
}

.lp-faq summary::-webkit-details-marker { display: none; }

/* A chevron drawn from two borders, not a "+" set in the mono face: the
   plus and the minus are different heights in that font, so the mark moved
   as the answer opened. This one turns instead. */
.lp-faq summary::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 27px;
    width: 9px;
    height: 9px;
    border-right: 1.8px solid var(--gray);
    border-bottom: 1.8px solid var(--gray);
    transform: rotate(45deg);
    transition: transform 0.22s ease, border-color 0.2s ease;
}

.lp-faq summary:hover::after { border-color: var(--white); }

.lp-faq details[open] summary::after { transform: rotate(-135deg); }

.lp-faq p { margin: -6px 0 22px; max-width: 60ch; font-size: 15px; line-height: 1.65; color: var(--medium-gray); }

/* ── Footer ── */

/* ── Footer ──
   One low row, edge to edge with the page above it: the wordmark on the
   left, the links on the right. No fill and no rule - the page's dot field
   runs under it the same way it runs under everything else. */

.lp-footer { position: relative; z-index: 3; }

/* Not the page's centred column: the 20px the header uses, so the wordmark
   down here sits on the same vertical line as the one up there and the
   links end where the header's button ends. */
.lp-footer-in {
    padding: 28px 20px 32px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 28px;
}

.lp-foot-mark { display: block; width: 87px; height: 20px; color: var(--white); }
.lp-foot-mark .wordmark { width: 100%; height: 100%; }

/* pushed to the right edge, with the year after them */
.lp-foot-links { display: flex; flex-wrap: wrap; gap: 24px; margin-left: auto; }
.lp-foot-links a { font-size: 14px; color: var(--medium-gray); transition: color 0.2s ease; }
.lp-foot-links a:hover { color: var(--white); }

.lp-foot-fine {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--gray);
}

/* ── The written pages behind the footer links ── */

.legal {
    position: relative;
    z-index: 3;
    max-width: 660px;
    margin: 0 auto;
    padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 40px) clamp(64px, 10vh, 110px);
}

.legal h1 {
    font-weight: 500;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.035em;
    color: var(--white);
}

.legal__date {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
}

.legal h2 {
    margin-top: 48px;
    font-weight: 500;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.025em;
    color: var(--white);
}

.legal h3 {
    margin-top: 30px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
    color: var(--white);
}

.legal p { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--medium-gray); }
.legal ul { margin-top: 14px; padding-left: 20px; display: grid; gap: 8px; }
.legal li { font-size: 16px; line-height: 1.6; color: var(--medium-gray); }
.legal a { color: var(--color-cognitive); }

/* what is not written yet, said plainly rather than filled with a guess */
.legal__todo {
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--bg-elevated);
    font-size: 15px;
}