/*
 * Landing page — "the marked-up page".
 * Layout language: a magazine grid with a working margin. Yellow only ever
 * means "being read", red only ever means "reviewed". Everything else is
 * paper and ink.
 */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    padding-block: clamp(2.25rem, 1.2rem + 4.5vw, 5.5rem) clamp(4rem, 2.5rem + 6vw, 8rem);
    overflow-x: clip;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.75rem, 2rem + 4vw, 4.5rem) var(--gutter);
    align-items: start;
}

.hero__kicker {
    display: flex;
    align-items: center;
    gap: .9em;
    margin: 0 0 clamp(1.1rem, .8rem + 1.2vw, 2rem);
}

.hero__kicker::before { content: ''; flex: none; width: 2.4em; border-top: 2px solid var(--pencil); }

.hero__title {
    font-size: clamp(2.5rem, 1.3rem + 5.7vw, 5.85rem);
    font-weight: 540;
    line-height: .98;
    letter-spacing: -.036em;
    margin: 0 0 .5em;
}

.hero__line { display: block; }

.hero__hl {
    padding: 0 .09em;
    margin: 0 -.09em;
    background: var(--marker-stroke) no-repeat 0 74% / 100% 48%;
}

.hero__scribble {
    position: relative;
    display: inline-block;
    font-style: italic;
    font-weight: 400;
    white-space: nowrap;
}

.hero__underline { left: -2%; bottom: -.17em; width: 104%; height: .3em; stroke-width: 3; }

.hero__sub {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 35em;
    margin-bottom: 1.6em;
}

.hero__actions { display: grid; justify-items: start; gap: .35rem; }
.hero__cta { font-size: var(--step-1); padding: .8em 1.5em; min-height: 58px; }
.hero__reassure { margin: .9rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }

.hero__demo { position: relative; min-width: 0; }

.hero__aside {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    max-width: 17em;
    margin: 0 0 .4rem auto;
    padding-right: 1.5rem;
    font-size: var(--step-0);
    transform: rotate(-2deg);
    transform-origin: 100% 100%;
    text-align: right;
}

.hero__aside-arrow { flex: none; margin-bottom: -.9rem; stroke-width: 2.2; }

@media (min-width: 64em) {
    .hero__grid { grid-template-columns: minmax(0, 23fr) minmax(0, 20fr); }
    .hero__demo { margin-top: .5rem; }
}

/* One orchestrated arrival; after it, the page holds still. Pure CSS, so it
   does not wait for any script. */
@media (prefers-reduced-motion: no-preference) {
    .hero__line { animation: hero-rise .85s cubic-bezier(.2, .75, .25, 1) both; }
    .hero__line:nth-child(2) { animation-delay: .09s; }
    .hero__line:nth-child(3) { animation-delay: .18s; }
    .hero__kicker, .hero__sub, .hero__actions { animation: hero-fade .8s .35s ease both; }
    .hero__hl { animation: hero-swipe .6s .8s cubic-bezier(.3, .7, .3, 1) both; }
    .hero__underline path { stroke-dasharray: 1 1; animation: hero-draw .7s 1.25s ease-out both; }
    .hero__underline path:nth-child(2) { animation-duration: .5s; animation-delay: 1.85s; }
    .demo-stack { animation: hero-sheet 1s .3s cubic-bezier(.2, .75, .25, 1) both; }
    .hero__aside { animation: hero-fade .6s 2s ease both; }
    .hero__aside-arrow path { stroke-dasharray: 1 1; animation: hero-draw .6s 2.3s ease-out both; }
    .hero__aside-arrow path:nth-child(2) { animation-duration: .3s; animation-delay: 2.85s; }
}

@keyframes hero-rise { from { opacity: 0; transform: translateY(.28em); } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-sheet { from { opacity: 0; transform: translateY(28px) rotate(1.2deg); } }
@keyframes hero-swipe { from { background-size: 0% 48%; } }
@keyframes hero-draw { from { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }

/* ── The live demo ───────────────────────────────────────────────────────── */
.demo-stack { position: relative; isolation: isolate; }

/* The sheet underneath: a page is never alone on a desk. */
.demo-stack::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--sheet);
    border: var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sheet);
    transform: rotate(-1.7deg) translate(-5px, 9px);
}

.demo { position: relative; margin: 0; }

.demo__bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    padding: .15rem .4rem .15rem .55rem;
    border-bottom: var(--rule);
}

.demo__steps { display: flex; margin: 0; padding: 0; list-style: none; }

.demo__steps button,
.demo__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    min-height: 44px;
    padding: 0 .55rem;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--ink-faint);
    font: 500 .76rem/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.demo__steps b { font-weight: 600; }
.demo__steps button:hover, .demo__toggle:hover { color: var(--ink); }

.demo__steps button[aria-current] { color: var(--ink); font-weight: 600; }
.demo__steps button[aria-current] span,
.demo__steps button[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.demo__steps button[data-demo-step='read'][aria-current] { text-decoration-color: var(--marker-deep); }
.demo__steps button[data-demo-step='ask'][aria-current],
.demo__steps button[data-demo-step='grade'][aria-current] { text-decoration-color: var(--pencil); }

.demo__toggle { color: var(--ink); }
.demo__toggle svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.demo__icon-play { display: none; fill: currentColor; }
.demo__toggle[data-state='paused'] .demo__icon-play { display: inline; }
.demo__toggle[data-state='paused'] .demo__icon-pause { display: none; }

.demo__stage { padding: clamp(1.1rem, .7rem + 1.8vw, 2rem); }

.demo__kicker { margin: 0 0 .9rem; font-size: .74rem; }

.demo__passage,
.passage__text {
    max-width: none;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 15;
    font-weight: 400;
    font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem);
    line-height: 1.66;
    letter-spacing: 0;
}

.demo__passage { margin: 0; }

/* The pacer: per-word spans grouped into chunks; the live chunk gets a marker
   stroke that swipes in from the left, exactly the .mark look. */
.chunk {
    padding: 0 .12em;
    margin: 0 -.12em;
    background: var(--marker-stroke) no-repeat 0 62% / 0% 58%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.chunk.is-on { background-size: 100% 58%; transition: background-size .2s cubic-bezier(.3, .7, .3, 1); }

.demo__meter {
    display: none;
    align-items: center;
    gap: .9em;
    margin: 1.4rem 0 0;
    max-width: none;
    font-size: .72rem;
    white-space: nowrap;
}

.demo__meter b { color: var(--ink); font-weight: 600; }
.demo__progress { flex: 1; height: 2px; background: var(--paper-edge); }
.demo__progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ink); transition: width .25s linear; }

/* The question card: an index card laid on the page, red rule along the top. */
.demo__card {
    position: relative;
    margin-top: 1.5rem;
    padding: 1rem 1.15rem 1.15rem;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-top: 4px solid var(--pencil);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hard);
}

.demo__card-label, .demo__a-label { margin: 0 0 .4rem; font-size: .72rem; }
.demo__a-label { margin-top: 1rem; }

.demo__q,
.question__text {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 30;
    font-style: italic;
    font-weight: 440;
    font-size: var(--step-1);
    line-height: 1.22;
    letter-spacing: -.01em;
    margin: 0;
    max-width: none;
}

.demo__q { font-size: clamp(1.12rem, 1.05rem + .4vw, 1.35rem); }

.demo__a {
    margin: 0;
    max-width: none;
    padding-left: .8rem;
    border-left: 2px solid var(--ink);
    font-size: .98rem;
    line-height: 1.5;
}

.demo__verdict,
.verdict {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: .1rem .7rem;
    align-items: start;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--ink-faint);
}

.demo__tick, .verdict__mark { position: static; grid-row: 1 / span 2; width: 2.6rem; height: 2.2rem; stroke-width: 3.4; margin-top: -.15rem; }

.demo__score, .verdict__score {
    margin: 0;
    font: 500 .84rem/1.6 var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.demo__score b, .verdict--pass .verdict__score b { color: var(--pass); font-weight: 700; }
.verdict--fail .verdict__score b { color: var(--pencil-deep); font-weight: 700; }

.demo__num, .verdict__num { position: relative; display: inline-block; color: var(--ink); font-weight: 700; }
.demo__num .pm, .verdict__num .pm { left: -.55em; top: -.4em; width: calc(100% + 1.1em); height: calc(100% + .75em); stroke-width: 4; }

.demo__note, .verdict__note {
    grid-column: 2;
    margin: .35rem 0 0;
    max-width: none;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 20;
    font-style: italic;
    font-weight: 430;
    font-size: 1.02rem;
    line-height: 1.42;
    color: var(--pencil-deep);
}

.demo__cap {
    padding: .7rem clamp(1.1rem, .7rem + 1.8vw, 2rem) .8rem;
    border-top: var(--rule);
    font: 400 .74rem/1.45 var(--font-mono);
    letter-spacing: .02em;
    color: var(--ink-faint);
}

/* Live mode. Chosen by CSS alone so the layout is right from first paint and
   nothing jumps when the script arrives: passage and card share one grid cell
   and the card is laid over the dimmed page. Without scripting, or with
   reduced motion, the rules below never apply and the whole exchange simply
   sits on the page, fully readable. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .demo__bar, .demo__meter { display: flex; }
    .demo__stage { display: grid; }
    .demo__page, .demo__card { grid-area: 1 / 1; min-width: 0; }
    .demo__page { transition: opacity .5s ease; }
    .demo__passage .mark { background: none; }

    .demo__card {
        align-self: end;
        margin: 0 -.35rem -.35rem .9rem;
        opacity: 0;
        transform: translateY(22px) rotate(.6deg);
        pointer-events: none;
        transition: opacity .4s ease, transform .6s cubic-bezier(.2, .8, .25, 1);
    }

    .demo[data-phase='ask'] .demo__page,
    .demo[data-phase='grade'] .demo__page { opacity: .2; }

    .demo[data-phase='ask'] .demo__card,
    .demo[data-phase='grade'] .demo__card { opacity: 1; transform: rotate(-.5deg); pointer-events: auto; }

    .demo .untyped { opacity: 0; }
    .demo .typed.is-typing { box-shadow: 2px 0 0 var(--ink); }

    .demo__verdict { opacity: 0; transition: opacity .3s ease; }
    .demo__score, .demo__note { opacity: 0; transition: opacity .5s ease; }
    .demo[data-phase='grade'] .demo__verdict { opacity: 1; }
    .demo[data-phase='grade'] .demo__score { opacity: 1; transition-delay: .75s; }
    .demo[data-phase='grade'] .demo__note { opacity: 1; transition-delay: 1.5s; }

    .demo .pm path { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
    .demo[data-phase='grade'] .pm path {
        stroke-dashoffset: 0;
        opacity: 1;
        transition: stroke-dashoffset .55s .3s cubic-bezier(.55, .1, .25, 1), opacity .01s .3s linear;
    }
    .demo[data-phase='grade'] .demo__ring path { transition-delay: 1s; }
}

@media (max-width: 30em) {
    .demo__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .demo__steps button { padding: 0 .4rem; letter-spacing: .04em; }
    .hero__aside { font-size: .98rem; }
}

/* ── § 01 The moment ─────────────────────────────────────────────────────── */
.moment { border-top: var(--rule); }

.moment__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem var(--gutter);
}

.moment__head { position: relative; }
.moment__head .folio { display: flex; align-items: center; gap: 1em; margin: 0 0 1.6rem; max-width: none; }
.moment__head .folio::after { content: ''; flex: 1; border-top: var(--rule); }
.moment__head .folio b { color: var(--ink); font-weight: 600; }
.moment__head h2 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.4rem); max-width: 13ch; margin: 0; }
.moment__head h2 em { display: block; margin-top: .12em; }

.moment__bang { display: none; right: 4%; bottom: -.4rem; width: 1.6rem; height: 4.2rem; stroke-width: 3.2; transform: rotate(8deg); }

.moment__body p { font-size: var(--step-1); line-height: 1.55; max-width: 33em; }

.dropcap::first-letter {
    float: left;
    margin: .07em .1em 0 0;
    padding: 0 .06em;
    font: 560 4.35em/.76 var(--font-display);
    font-variation-settings: 'opsz' 144;
    background: var(--marker-stroke) no-repeat 0 78% / 100% 46%;
}

.moment__turn {
    margin-top: 1.6em;
    padding-top: 1.2em;
    border-top: var(--rule-ink);
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 36;
    font-style: italic;
    color: var(--ink);
}

.moment__aside { max-width: 22em; font-size: var(--step-0); }

@media (min-width: 64em) {
    .moment__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; }
    .moment__head { grid-column: 1; grid-row: 1; }
    .moment__body { grid-column: 2; grid-row: 1 / span 2; padding-top: 3.4rem; }
    .moment__aside { grid-column: 1; grid-row: 2; align-self: start; margin-top: 2.5rem; }
    .moment__bang { display: block; }
}

/* ── § 02 How it works ───────────────────────────────────────────────────── */
.moves { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(3.5rem, 2.5rem + 5vw, 7rem); }

.move {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem var(--gutter);
    align-items: center;
}

.move__text { position: relative; }

.move__num {
    margin: 0 0 .1em;
    max-width: none;
    font: 300 clamp(4.5rem, 3.5rem + 5vw, 8rem)/.8 var(--font-display);
    font-variation-settings: 'opsz' 144;
    font-style: italic;
    letter-spacing: -.04em;
}

.move--read .move__num { width: fit-content; padding: 0 .12em 0 .02em; background: var(--marker-stroke) no-repeat 0 80% / 100% 42%; }
.move--prove .move__num { color: var(--pencil-deep); }

.move h3 { font-size: var(--step-2); font-variation-settings: 'opsz' 96; letter-spacing: -.02em; margin-bottom: .45em; }
.move__text p { max-width: 31em; }
.move__fine { font-size: var(--step--1); color: var(--ink-soft); padding-left: .8em; border-left: 2px solid var(--ink); }

.move__fig { min-width: 0; }

@media (min-width: 56em) {
    .move { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .move__text { grid-column: 1 / span 5; }
    .move__fig { grid-column: 7 / span 6; }
    .move--read .move__text { grid-column: 8 / span 5; order: 2; }
    .move--read .move__fig { grid-column: 1 / span 6; order: 1; }
}

/* Vignettes: small drawn interfaces, set in real type. */
.vig { padding: 1.1rem 1.2rem 1.2rem; font-size: .95rem; }
.vig p { margin: 0; max-width: none; }
.vig .folio { font-size: .7rem; }

.vig--paste { max-width: 27rem; margin-inline: auto; transform: rotate(-1.1deg); }
.vig__tabs { display: flex; gap: 1.2rem; padding-bottom: .7rem; border-bottom: var(--rule); }
.vig__tabs .is-on { color: var(--ink); font-weight: 600; box-shadow: 0 calc(.7rem + 1px) 0 -0.5px var(--paper), 0 calc(.7rem + 2px) 0 0 var(--ink); }

.vig__field {
    margin: 1rem 0 !important;
    padding: .8rem .9rem;
    min-height: 7.2em;
    border: 1.5px dashed var(--ink-faint);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 14;
    line-height: 1.55;
    color: var(--ink-soft);
}

.vig__caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: var(--ink); }

.vig__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; }
.vig__circled { position: relative; display: inline-block; color: var(--pencil-deep); font-weight: 600; }
.vig__circled .pm { left: -.7em; top: -.55em; width: calc(100% + 1.4em); height: calc(100% + 1.1em); stroke-width: 3.2; }

.vig--guide { max-width: 27rem; margin-inline: auto; padding: 1.2rem 0 1.1rem; transform: rotate(.9deg); }

.vig__lines, .browser__lines {
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 14;
    font-size: 1.02rem;
    line-height: 1.5;
}

.ln { display: block; padding: .22em 1.2rem; white-space: nowrap; overflow: hidden; opacity: .26; }
.ln.is-focus { opacity: 1; background: #fff; box-shadow: 0 -1.5px 0 var(--ink), 0 1.5px 0 var(--ink); }

.vig__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 1.2rem 0 !important; padding-top: .8rem; border-top: var(--rule); }
.vig__pace { display: inline-flex; align-items: center; gap: .7em; color: var(--ink); font-weight: 600; }
.vig__pace i { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border: 1.5px solid var(--ink); border-radius: var(--radius); font-style: normal; }

.vig__themes, .swatches { display: inline-flex; gap: .35rem; }
.vig__themes i, .swatches i {
    display: inline-grid;
    place-items: center;
    width: 2em;
    height: 2em;
    border: 1px solid var(--ink-faint);
    border-radius: var(--radius);
    font: 600 .8rem/1 var(--font-display);
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
}
.t-light { background: #FFFDF8; color: #17140F; }
.t-sepia { background: #F0E2C4; color: #46371F; }
.t-dark { background: #1B1813; color: #EDE6D6; }

.vig-stack { display: grid; gap: 1rem; max-width: 30rem; margin-inline: auto; }
.vig--sprint { transform: rotate(-.8deg); }
.vig__gap { margin-top: .7rem !important; font-family: var(--font-display); font-variation-settings: 'opsz' 18; font-size: 1.15rem; line-height: 1.7; }
.gap { position: relative; display: inline-block; min-width: 4.2em; padding: 0 .35em; border-bottom: 2px solid var(--ink); text-align: center; line-height: 1.25; }
.gap--done { font-family: var(--font-body); font-size: .95em; font-weight: 600; }
.gap--done .pm { right: -1.5em; top: -.75em; width: 1.7em; height: 1.45em; stroke-width: 4; }
.gap--open { height: 1.25em; vertical-align: -.2em; background: var(--marker-stroke) no-repeat 0 70% / 100% 60%; }

.vig--slip { justify-self: end; width: min(19rem, 92%); transform: rotate(1.4deg); border-top: 4px solid var(--pencil); }
.vig__score { margin-top: .5rem !important; font: 500 .84rem/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.vig__score b { color: var(--pass); }
.vig__slipnote { margin-top: .3rem !important; font-family: var(--font-display); font-style: italic; font-size: .98rem; line-height: 1.4; color: var(--pencil-deep); }

.vig--map { width: min(21rem, 96%); transform: rotate(-.6deg); }
.vig__chart { display: block; width: 100%; height: auto; margin-top: .6rem; }
.vig__boxes rect { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.vig__boxes .is-end { fill: var(--marker); }
.vig__links path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vig__labels text { font: 600 11.5px var(--font-body); fill: var(--ink); text-anchor: middle; }

@media (min-width: 40em) {
    .vig-stack { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; max-width: 36rem; }
    .vig--sprint { grid-column: 1 / span 10; grid-row: 1; }
    .vig--slip { grid-column: 6 / span 7; grid-row: 2; margin-top: -1.1rem; width: auto; z-index: 1; }
    .vig--map { grid-column: 1 / span 7; grid-row: 2 / span 2; margin-top: 1.6rem; width: auto; }
}

/* ── § 03 The reviewer ───────────────────────────────────────────────────── */
.reviewer__head .lede { margin-top: 1.6rem; max-width: 52ch; }

.reviewer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem var(--gutter);
    align-items: start;
}

.reviewer__source { display: grid; gap: 1.5rem; }

.passage { padding: clamp(1.2rem, .9rem + 1.4vw, 1.9rem); }
.passage .folio { margin: 0 0 .8rem; font-size: .74rem; }
.passage__text { margin: 0; font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); }

.question { padding-left: 1.1rem; border-left: 4px solid var(--pencil); }
.question .folio { margin: 0 0 .4rem; font-size: .74rem; }

.reviewer__source .marginalia { margin: 0; max-width: 30em; }

.answers { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }

.answer { padding: clamp(1.1rem, .9rem + 1.2vw, 1.7rem); }
.answer .folio { margin: 0 0 .8rem; font-size: .74rem; }

.answer__text {
    margin: 0;
    padding-left: .9rem;
    border-left: 2px solid var(--ink);
    font-size: 1.02rem;
    line-height: 1.55;
}

.verdict__score { font-size: .88rem; }
.verdict__note { font-size: 1.08rem; }

.reviewer__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 2rem;
    max-width: none;
    margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0;
    padding-top: 1.2rem;
    border-top: var(--rule);
}

@media (min-width: 60em) {
    .reviewer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .reviewer__source { position: sticky; top: 5.5rem; }
    .answer--offset { margin-left: -2.2rem; margin-right: 2.2rem; }
    .answers > :nth-child(1) { transform: rotate(.5deg); }
    .answers > :nth-child(3) { transform: rotate(-.4deg); }
}

/* ── § 04 Reading tools ──────────────────────────────────────────────────── */
.tools__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem var(--gutter); }
.tools__head { margin-bottom: 0; }
.tools__intro { margin-top: 1.4rem; color: var(--ink-soft); max-width: 28em; }

.spec { margin: 0; border-top: var(--rule-ink); }

.spec__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem 1.5rem;
    padding: 1.05rem 0;
    border-bottom: var(--rule);
}

.spec dt {
    font: 600 var(--step--1)/1.5 var(--font-mono);
    letter-spacing: .07em;
    text-transform: uppercase;
    padding-top: .15em;
}

.spec dd { margin: 0; color: var(--ink-soft); max-width: 40em; }

.spec__tag {
    display: inline-block;
    margin-left: .4em;
    padding: .1em .45em;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    font-size: .82em;
    line-height: 1.2;
    letter-spacing: .1em;
    vertical-align: .08em;
}

.swatches { margin-left: .5rem; vertical-align: middle; }
.swatches i { width: 1.9em; height: 1.9em; font-size: .72rem; }

.rainbow { display: inline-grid; gap: 4px; width: 4.2rem; margin-left: .5rem; vertical-align: middle; }
.rainbow i { display: block; height: 3px; border-radius: 2px; }
.rainbow i:nth-child(1) { background: #1F4E8C; }
.rainbow i:nth-child(2) { background: #A42C1D; width: 86%; }
.rainbow i:nth-child(3) { background: #2C6A4C; width: 94%; }

.tools__aside { max-width: 24em; align-self: start; font-size: var(--step-0); }

@media (min-width: 40em) {
    .spec__row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

@media (min-width: 64em) {
    .tools__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: calc(var(--gutter) * 2); }
    .tools__head { grid-column: 1; grid-row: 1; }
    .spec { grid-column: 2; grid-row: 1 / span 2; }
    .tools__aside { grid-column: 1; grid-row: 2; margin-top: 1.5rem; }
}

/* ── § 05 We don't sell speed (the ink spread) ───────────────────────────── */
.manifesto { background: var(--ink); color: var(--on-ink); }
.manifesto ::selection { background: var(--marker); color: var(--ink); }
.manifesto :focus-visible { outline-color: var(--marker); }
.manifesto .folio { color: var(--on-ink-soft); }

.manifesto__head .folio { display: flex; align-items: center; gap: 1em; margin: 0 0 1.6rem; max-width: none; }
.manifesto__head .folio::after { content: ''; flex: 1; border-top: 1px solid rgba(246, 241, 231, .22); }
.manifesto__head .folio b { color: var(--on-ink); font-weight: 600; }
.manifesto__head h2 { font-size: clamp(3rem, 1.6rem + 7.4vw, 8rem); line-height: .92; letter-spacing: -.04em; margin: 0; }
.manifesto__head h2 em { color: var(--marker); }

.manifesto__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 3vw, 4rem) var(--gutter); }

.manifesto__body p { color: var(--on-ink); max-width: 36em; }
.manifesto__body .fn-ref a { color: var(--pencil-on-ink); }

.manifesto__honest { margin-top: 1.8em; font-family: var(--font-display); font-variation-settings: 'opsz' 36; font-size: var(--step-1); line-height: 1.5; }

.manifesto .mark {
    background: var(--marker);
    color: var(--ink);
    padding: .08em .3em;
    margin: 0;
}

.manifesto__struck ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; justify-items: start; }

.manifesto__struck li {
    position: relative;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 60;
    font-style: italic;
    font-weight: 380;
    font-size: var(--step-2);
    line-height: 1.2;
    color: var(--on-ink-soft);
}

.manifesto__struck s { text-decoration: none; }
.manifesto__struck .pm { left: -3%; top: 42%; width: 106%; height: .4em; stroke-width: 3.2; }

.manifesto__kept {
    margin: 1.6rem 0 0;
    max-width: none;
    font-family: var(--font-display);
    font-variation-settings: 'opsz' 60;
    font-weight: 560;
    font-size: var(--step-2);
    line-height: 1.32;
    letter-spacing: -.015em;
}

.manifesto__notes { margin-top: clamp(3rem, 2rem + 4vw, 6rem); color: var(--on-ink-soft); }
.manifesto__notes h3 { margin: 0 0 1rem; font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; color: var(--on-ink); }
.manifesto__caveat { margin: 1.2rem 0 0; font-size: var(--step--1); color: var(--on-ink-soft); font-style: italic; }

@media (min-width: 64em) {
    .manifesto__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .manifesto__head { grid-column: 1 / -1; }
    .manifesto__body { grid-column: 1 / span 7; }
    .manifesto__struck { grid-column: 9 / span 4; padding-top: .4rem; }
    .manifesto__notes .endnotes { columns: 2; column-gap: calc(var(--gutter) * 1.5); }
    .manifesto__notes .endnotes li { break-inside: avoid; }
}

/* ── § 06 Extension ──────────────────────────────────────────────────────── */
.extension__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem var(--gutter); align-items: center; }
.extension .sec-head { margin-bottom: 1.8rem; }
.extension .sec-head h2 { font-size: var(--step-3); max-width: 15ch; }

.stamp {
    display: inline-block;
    max-width: none;
    margin: 1.2rem 0 1.1rem;
    padding: .65em 1em .6em;
    border: 2.5px solid var(--pencil-deep);
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--pencil-deep);
    color: var(--pencil-deep);
    font: 600 var(--step--1)/1.25 var(--font-mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    transform: rotate(-2.2deg);
}

.extension__fine { font-size: var(--step--1); color: var(--ink-soft); }
.extension__live { margin-top: 1.4rem; }
.extension__live .extension__fine { margin-top: 1rem; }

.browser { max-width: 30rem; margin-inline: auto; overflow: hidden; transform: rotate(1.1deg); }
.browser__bar { display: flex; align-items: center; gap: .4rem; margin: 0; max-width: none; padding: .6rem .8rem; border-bottom: var(--rule); background: var(--paper); }
.browser__bar i { width: .6rem; height: .6rem; border: 1.5px solid var(--ink-faint); border-radius: 50%; }
.browser__bar span { flex: 1; margin-left: .5rem; padding: .25em .8em; border: var(--rule); border-radius: 99px; background: var(--sheet); font: 400 .72rem/1.4 var(--font-mono); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser__page { padding: 1.3rem 0 1.5rem; background: #F4EBCF; }
.browser__h { margin: 0 1.3rem .7rem; font: 560 1.35rem/1.15 var(--font-display); letter-spacing: -.015em; }
.browser__lines { margin: 0; max-width: none; }
.browser .ln { padding-inline: 1.3rem; }
.browser .ln.is-focus { background: #FFF8DF; }

@media (min-width: 60em) {
    .extension__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* ── § 07 Pricing ────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem var(--gutter); align-items: start; }

.plan { display: flex; flex-direction: column; padding: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); }
.plan--pro { border: var(--rule-ink); border-top-width: 7px; box-shadow: 8px 8px 0 rgba(23, 20, 15, .16); }

.plan__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.5rem; padding-bottom: 1.1rem; border-bottom: var(--rule); }
.plan__head h3 { margin: 0; font-size: var(--step-3); font-variation-settings: 'opsz' 144; letter-spacing: -.03em; }
.plan__price { margin: 0; max-width: none; color: var(--ink-soft); }
.plan__price b { font: 560 var(--step-2)/1 var(--font-display); color: var(--ink); letter-spacing: -.02em; }

.plan__list { margin: 1.3rem 0; padding: 0; list-style: none; display: grid; gap: .8rem; }

.plan__list li {
    padding-left: 2rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M4 22c5 3 10 9 13 14C23 22 33 10 45 3' fill='none' stroke='%23D23F2C' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 .22em / 1.25rem auto;
}

.plan__fine, .pricing__fine { font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }
.plan .plan__fine { margin: 0 0 1.4rem; }
.plan > .btn { margin-top: auto; }
.plan--pro .plan__fine { margin: 1.1rem 0 0; }
.pricing__fine { margin: 2rem 0 0; max-width: 60em; }

.billing { margin: .4rem 0 0; padding: 0; list-style: none; border-top: var(--rule-ink); }

.billing__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .2rem 1rem;
    padding: .95rem 0;
    border-bottom: var(--rule);
}

.billing__name { font: 600 var(--step--1)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.billing__price { grid-column: 1; color: var(--ink-soft); }
.billing__price b { font: 560 var(--step-2)/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); margin-right: .1em; }
.billing__price small { display: block; font-size: var(--step--1); color: var(--ink-faint); }
.billing__row .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }

@media (max-width: 26em) {
    .billing__row { grid-template-columns: minmax(0, 1fr); }
    .billing__row .btn { grid-column: 1; grid-row: auto; margin-top: .6rem; }
}

@media (min-width: 56em) {
    .plans { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .plan--free-pad { margin-top: 2.5rem; }
}

/* ── § 08 FAQ ────────────────────────────────────────────────────────────── */
.questions__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem var(--gutter); }

@media (min-width: 64em) {
    .questions__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: calc(var(--gutter) * 2); align-items: start; }
    .questions__head { position: sticky; top: 6.5rem; }
}

/* ── Closing ─────────────────────────────────────────────────────────────── */
.closing { padding-block: clamp(4rem, 3rem + 5vw, 8rem); border-top: var(--rule); }
.closing__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--gutter); align-items: end; }
.closing h2 { margin: 0; max-width: 14ch; font-size: clamp(2.4rem, 1.6rem + 4vw, 5rem); letter-spacing: -.035em; }
.closing__actions p { margin: 1.2rem 0 0; font-size: var(--step--1); color: var(--ink-soft); max-width: 24em; }

@media (min-width: 56em) {
    .closing__in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

/* ── Sign-in dialog ──────────────────────────────────────────────────────── */
.signin {
    position: fixed;
    inset: 0;
    width: min(29rem, 100% - 2rem);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: var(--rule-ink);
    border-radius: var(--radius);
    background: var(--sheet);
    color: var(--ink);
    box-shadow: 10px 10px 0 rgba(23, 20, 15, .4);
}

.signin::backdrop { background: rgba(23, 20, 15, .6); }

.signin__in { position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.3rem); }
.signin .folio { margin: 0 0 .6rem; }
.signin h2 { font-size: var(--step-3); margin-bottom: .35em; }

.signin__reason {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-left: 4px solid var(--pencil);
    background: var(--paper);
    font-weight: 600;
}

.signin__why { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 1.4rem; }

.signin__or { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0; max-width: none; font: 500 var(--step--1)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.signin__or::before, .signin__or::after { content: ''; flex: 1; border-top: var(--rule); }

.signin__form { display: grid; gap: .55rem; }
.signin__form label { font: 600 var(--step--1)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

.signin__form input {
    width: 100%;
    min-height: 50px;
    padding: .6em .8em;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font: 400 max(1rem, 16px)/1.3 var(--font-body);
}

.signin__form input[aria-invalid='true'] { border-color: var(--pencil-deep); box-shadow: 0 0 0 2px var(--pencil-deep); }
.signin__form .btn { margin-top: .4rem; }

.signin__status { min-height: 1.5em; margin: 1rem 0 0; font-weight: 600; color: var(--pass); }
.signin__status.is-error { color: var(--pencil-deep); }
.signin__status:empty { margin: 0; min-height: 0; }

.signin__consent { margin: 1.2rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }

.signin__close { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.signin__close button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--ink);
    font: 400 1.9rem/1 var(--font-body);
    cursor: pointer;
}
.signin__close button:hover { background: var(--paper-deep); }

/* The five games, each with its own line: they are the point of the page. */
.move__games { margin: .6rem 0 .9rem; padding: 0; list-style: none; }
.move__games li {
    position: relative;
    margin: 0 0 .45rem;
    padding-left: 1.1rem;
    color: var(--ink-soft);
}
.move__games li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: .45rem;
    height: .45rem;
    background: var(--marker-deep);
}
.move__games b { color: var(--ink); font-weight: 600; }