:root {
    --ink: #14181A;
    --ink-soft: #3D474A;
    --board: #33604A;
    --board-lift: #427A5E;
    --buff: #E9E7DF;
    --paper: #F6F5F1;
    --line: #CFCCC1;
    --display: "Fraunces", Georgia, serif;
    --body: "Archivo", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* {
    box-sizing: border-box
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px
}

a {
    color: inherit
}

:focus-visible {
    outline: 2px solid var(--board);
    outline-offset: 3px
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 18px;
}

/* ---- hero stage: pinned on top, the page scrolls up underneath it ---- */
.hero-stage {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(20, 24, 26, .10);
}

/* ---- masthead ---- */
.mast {
    border-bottom: 1px solid var(--line)
}

.mast .wrap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-top: 26px;
    padding-bottom: 26px
}

.mark {
    font-family: var(--display);
    font-weight: 500;
    font-size: 25px;
    letter-spacing: -.015em
}

.mark span {
    color: var(--board)
}

.mast nav {
    font-family: var(--mono);
    font-size: 13px;
    display: flex;
    gap: 22px
}

.mast nav a {
    text-decoration: none;
    color: var(--ink-soft)
}

.mast nav a:hover {
    color: var(--board)
}

/* ---- hero ---- */
.hero {
    padding: 36px 28px 40px;
}

.hero h1 {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(46px, 8vw, 88px);
    line-height: .98;
    letter-spacing: -.03em;
    margin: 0;
    max-width: 14ch;
}

.hero h1 em {
    font-style: italic;
    color: var(--board)
}

.lede {
    font-size: clamp(18px, 2.2vw, 21px);
    max-width: 52ch;
    color: var(--ink-soft);
    margin: 0
}

/* ---- page: the layer that slides under the pinned hero ---- */
.page {
    position: relative;
    z-index: 1;
    background: var(--paper);
}

.lede-block {
    padding-top: 48px;
}

.sheet-block {
    padding-top: 40px;
    padding-bottom: 76px;
}

/* ---- scoresheet: the signature ---- */
.sheet {
    border: 1px solid var(--line);
    background: var(--buff)
}

.sheet-head {
    display: grid;
    grid-template-columns: 52px 1fr 1fr;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}

.sheet-head div {
    padding: 11px 16px
}

.sheet-head div+div {
    border-left: 1px solid var(--line)
}

.move {
    display: grid;
    grid-template-columns: 52px 1fr 1fr;
    border-top: 1px solid var(--line)
}

.move:first-of-type {
    border-top: 0
}

.move>* {
    padding: 15px 16px
}

.move>*+* {
    border-left: 1px solid var(--line)
}

.no {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-soft)
}

.by-human {
    font-weight: 500
}

.by-machine {
    color: var(--board);
    font-weight: 500
}

.move small {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 400;
    margin-top: 3px
}

/* ---- sections ---- */
section {
    padding: 76px 0;
    border-top: 1px solid var(--line)
}

h2 {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(30px, 4.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 22px;
    max-width: 20ch
}

h2 em {
    font-style: italic;
    color: var(--board)
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: start
}

p {
    margin: 0 0 18px;
    max-width: 60ch
}

p:last-child {
    margin-bottom: 0
}

.section-note {
    color: var(--ink-soft);
    font-size: 16px;
}

.section-note--spaced {
    margin-bottom: 30px;
}

/* ---- proof ---- */
.proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 14px
}

.card {
    background: var(--paper);
    padding: 28px 24px 30px
}

.card h3 {
    font-family: var(--body);
    font-weight: 500;
    font-size: 17px;
    margin: 0 0 10px
}

.card p {
    font-size: 15px;
    color: var(--ink-soft);
    margin: 0
}

.stat {
    font-family: var(--display);
    font-weight: 300;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--board);
    display: block;
    margin-bottom: 12px
}

.stat small {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: block;
    margin-top: 8px
}

/* ---- ladder ---- */
.rung {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 28px;
    padding: 26px 0;
    border-top: 1px solid var(--line)
}

.rung:first-of-type {
    border-top: 0;
    padding-top: 6px
}

.rung-label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--board);
    padding-top: 4px
}

.rung h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 23px;
    letter-spacing: -.01em;
    margin: 0 0 8px
}

.rung p {
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0
}

/* ---- signup ---- */
.signup {
    background: var(--ink);
    color: var(--buff);
    border-top: 0
}

.signup h2 {
    color: var(--buff)
}

.signup h2 em {
    color: var(--board-lift)
}

.signup p {
    color: #A9B2B0
}

.signup .eyebrow {
    color: var(--board-lift)
}

.track {
    color: var(--buff);
    font-weight: 500;
}

form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 26px;
    max-width: 520px
}

input[type=email] {
    flex: 1 1 260px;
    background: transparent;
    border: 1px solid #3C4749;
    color: var(--buff);
    font-family: var(--body);
    font-size: 16px;
    padding: 14px 16px;
}

input[type=email]::placeholder {
    color: #77817F
}

input[type=email]:focus {
    border-color: var(--board-lift);
    outline: none
}

button {
    background: var(--board-lift);
    color: #0E1512;
    border: 0;
    cursor: pointer;
    font-family: var(--body);
    font-weight: 500;
    font-size: 16px;
    padding: 14px 26px;
}

button:hover {
    background: #4F8F6E
}

button:disabled {
    opacity: .6;
    cursor: default
}

.fineprint {
    font-family: var(--mono);
    font-size: 12px;
    color: #77817F;
    margin-top: 16px
}

.form-status {
    font-family: var(--mono);
    font-size: 13px;
    margin-top: 14px;
    color: var(--board-lift);
}

.form-status.is-error {
    color: #C97B6D;
}

/* ---- footer ---- */
footer {
    position: relative;
    z-index: 1;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 38px 0 56px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink-soft)
}

footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

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

footer a:hover {
    text-decoration: underline
}

@media(max-width:820px) {
    .two {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .proof {
        grid-template-columns: 1fr
    }

    .mast nav {
        display: none
    }
}

@media(max-width:600px) {

    .sheet-head,
    .move {
        grid-template-columns: 38px 1fr
    }

    .sheet-head div:nth-child(3),
    .move>*:nth-child(3) {
        grid-column: 2;
        border-left: 0;
        border-top: 1px dashed var(--line);
        padding-top: 12px
    }

    .rung {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .hero {
        padding: 22px 28px 28px
    }

    .lede-block {
        padding-top: 36px
    }

    .sheet-block {
        padding-top: 32px;
        padding-bottom: 56px
    }

    section {
        padding: 56px 0
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        animation: none !important;
        transition: none !important
    }
}