/* Referral partner pages for Dereck Johnson. Tokens, type, and components follow the dusk design of the new ALS site
   (ALS-Website-2026-10/concepts/dusk), so these pages can move to /partners on that site without a redesign. */

html { scroll-behavior: smooth; background: #0B0F17; }
body { margin: 0; }

/* ============ Tokens and base ============ */
.als-page {
    --night: #0B0F17;
    --night-2: #111726;
    --road: #0D1119;
    --glow: #F3A65E;
    --lamp: #FFD38A;
    --mint: #6FE3C6;
    --mint-hover: #92ECD5;
    --mint-ink: #0B6B58;
    --bone: #EFEAE1;
    --bone-2: #D4D1DB;
    --muted: #A7A9B4;
    --paper: #F4EFE6;
    --paper-2: #EBE4D6;
    --ink: #15171C;
    --ink-2: #4A4E58;
    --line-dark: rgba(239, 234, 225, 0.14);
    --line-paper: rgba(21, 23, 28, 0.14);
    --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --gutter: 16px;
    --maxw: 1312px;
    --hdr: 60px;
    position: relative;
    background: var(--night);
    color: var(--bone);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
@media (min-width: 760px) { .als-page { --gutter: 40px; --hdr: 68px; } }
@media (min-width: 900px) { .als-page { font-size: 18px; } }
@media (min-width: 1360px) { .als-page { --gutter: 64px; } }

.als-page *, .als-page *::before, .als-page *::after { box-sizing: border-box; }
.als-page img { display: block; max-width: 100%; height: auto; }
.als-page svg { display: block; }
.als-page h1, .als-page h2, .als-page h3, .als-page p, .als-page figure, .als-page blockquote, .als-page ol, .als-page ul, .als-page dl, .als-page dd { margin: 0; padding: 0; }
.als-page ol, .als-page ul { list-style: none; }
.als-page a { color: inherit; }
.als-page :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; }
.als-page .paper :focus-visible { outline-color: var(--mint-ink); }
.als-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.als-page .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; border-radius: 10px; background: var(--mint); color: var(--night); font-weight: 600; text-decoration: none; }
.als-page .skip:focus { top: 12px; }
.als-page .wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.als-page .nowrap { white-space: nowrap; }
.als-page h2, .als-page h3 { text-wrap: balance; }
.als-page p, .als-page li, .als-page dd { text-wrap: pretty; }

/* Buttons */
.als-page .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 13px 24px; border-radius: 999px;
    font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: -0.005em;
    text-decoration: none; border: 1px solid transparent; white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.als-page .btn-mint { background: var(--mint); color: var(--night); box-shadow: 0 10px 30px -12px rgba(111, 227, 198, 0.55); }
.als-page .btn-mint:hover { background: var(--mint-hover); }
.als-page .btn-line { border-color: rgba(239, 234, 225, 0.32); color: var(--bone); background: transparent; }
.als-page .btn-line:hover { border-color: var(--bone); }
.als-page .paper .btn-line { border-color: rgba(21, 23, 28, 0.32); color: var(--ink); }
.als-page .paper .btn-line:hover { border-color: var(--ink); }
.als-page .paper .btn-mint { box-shadow: 0 0 0 1px rgba(11, 107, 88, 0.35), 0 12px 30px -14px rgba(11, 107, 88, 0.6); }
.als-page .btn-sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.als-page .btn .arr { display: inline-block; transition: transform .2s ease; }
.als-page .btn:hover .arr { transform: translateX(3px); }
.als-page .link-u { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; font-size: 16px; text-decoration: none; border-bottom: 1px solid currentColor; line-height: 1.2; }
.als-page .link-u:hover { opacity: 0.85; }
.als-page .paper .link-u { color: var(--mint-ink); }

/* ============ Header ============ */
.als-page .hdr { position: sticky; top: 0; z-index: 60; background: rgba(11, 15, 23, 0.86); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(239, 234, 225, 0.08); }
.als-page .hdr-in { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.als-page .brand { display: flex; flex-direction: column; justify-content: center; text-decoration: none; line-height: 1; min-height: 44px; }
.als-page .brand-name { font-family: var(--serif); font-size: 25px; letter-spacing: -0.005em; }
.als-page .brand-co { display: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.als-page .hdr-nav { display: none; align-items: center; gap: 28px; }
.als-page .hdr-nav a { font-size: 15px; color: #CDCAD5; text-decoration: none; padding: 10px 0; }
.als-page .hdr-nav a:hover { color: var(--bone); }
.als-page .hdr-right { display: flex; align-items: center; gap: 22px; }
@media (min-width: 560px) { .als-page .brand-co { display: block; } }
@media (min-width: 1180px) { .als-page .hdr-nav { display: flex; } }

/* ============ Hero (night sky) ============ */
.als-page .hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 112px);
    background: linear-gradient(180deg, #0B0F17 0%, #111834 46%, #23264F 82%, #2E2C58 100%); }
.als-page .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 70% 100% at 70% 100%, rgba(243, 166, 94, 0.16), rgba(243, 166, 94, 0) 70%); }
.als-page .stars { position: absolute; inset: 0 0 35% 0; z-index: -1; pointer-events: none; background: url("stars.svg") center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
.als-page .moon { position: absolute; top: 34px; right: 9%; z-index: -1; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset -9px 5px 0 0 #F3E8D0; filter: drop-shadow(0 0 14px rgba(243, 232, 208, 0.35)); transform: rotate(-18deg); }
.als-page .hero-grid { display: grid; gap: 44px; align-items: center; }
.als-page .hero .kicker { color: var(--mint); }
.als-page .hero h1 { font-family: var(--serif); font-weight: 400; color: var(--bone); font-size: clamp(38px, 9.4vw, 66px); line-height: 1.03; letter-spacing: -0.016em; text-wrap: balance; }
.als-page .hero h1 em { color: #FFE2B4; }
.als-page .hero-sub { margin-top: 26px; font-size: 19px; line-height: 1.6; color: var(--bone-2); max-width: 34em; }
.als-page .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }
.als-page .hero-actions .link-u { color: var(--bone); border-bottom-color: rgba(239, 234, 225, 0.5); }
.als-page .hero-note { margin-top: 18px; font-size: 15px; color: var(--muted); }

/* The portrait sits in a square frame lit like a street at blue hour (the no-script street of the dusk About section) */
.als-page .portrait { position: relative; justify-self: center; width: min(100%, 440px); }
.als-page .portrait-frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background:
    radial-gradient(circle at 95% 62%, rgba(255, 188, 102, 0.42) 0 4%, rgba(255, 188, 102, 0) 6%),
    radial-gradient(circle at 88% 78%, rgba(255, 206, 140, 0.36) 0 3%, rgba(255, 206, 140, 0) 5%),
    radial-gradient(circle at 99% 86%, rgba(255, 162, 72, 0.34) 0 5%, rgba(255, 162, 72, 0) 7.5%),
    radial-gradient(circle at 92% 50%, rgba(255, 211, 138, 0.22) 0 3.5%, rgba(255, 211, 138, 0) 5.5%),
    radial-gradient(ellipse 34% 30% at 102% 72%, rgba(243, 166, 94, 0.22), rgba(243, 166, 94, 0) 72%),
    linear-gradient(90deg, #11152E 0 55%, rgba(17, 21, 46, 0) 82%),
    linear-gradient(180deg, #141A40 0%, #2A2A5C 42%, #34335F 56%, #1A1A38 100%);
    box-shadow: 0 0 0 1px rgba(239, 234, 225, 0.14), 0 34px 60px -34px rgba(0, 0, 0, 0.75); }
.als-page .portrait-frame img { position: absolute; left: -3%; bottom: -3.5%; width: 100%; max-width: none; height: auto; }
.als-page .portrait-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(8, 10, 20, 0) 60%, rgba(8, 10, 20, 0.38) 100%); }
.als-page .portrait figcaption { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.als-page .portrait figcaption span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.als-page .portrait figcaption span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lamp); }

/* ============ Sections ============ */
.als-page .paper { position: relative; z-index: 1; background: var(--paper); color: var(--ink); }
.als-page .paper-2 { background: var(--paper-2); }
.als-page .sec { padding: clamp(72px, 8vw, 112px) 0; scroll-margin-top: var(--hdr); }
.als-page .sec + .sec.paper:not(.paper-2) { border-top: 1px solid var(--line-paper); }
.als-page .kicker { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); margin-bottom: 22px; }
.als-page .kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.als-page .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 7.6vw, 64px); line-height: 1.04; letter-spacing: -0.016em; }
.als-page .sec-head { display: grid; gap: 20px; margin-bottom: clamp(36px, 5vw, 64px); }
.als-page .sec-intro { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.als-page .prose { max-width: 40em; }
.als-page .prose p { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.als-page .prose p + p { margin-top: 18px; }

/* projects (the dusk status list) */
.als-page .proj-list { display: grid; border-bottom: 1px solid var(--ink); }
.als-page .proj { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start;
    grid-template-areas: "n title" ". tag" ". result"; padding: 28px 0 30px; border-top: 1px solid var(--ink); }
.als-page .proj-n { grid-area: n; align-self: baseline; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--mint-ink); }
.als-page .proj-title { grid-area: title; align-self: baseline; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.01em; }
.als-page .proj-tag { grid-area: tag; justify-self: start; position: relative; margin-top: 14px; padding: 6px 14px 6px 29px; border-radius: 17px;
    font-size: 15px; font-weight: 500; line-height: 1.4; background: rgba(11, 107, 88, 0.09); color: var(--mint-ink); box-shadow: inset 0 0 0 1px rgba(11, 107, 88, 0.22); }
.als-page .proj-tag::before { content: ""; position: absolute; left: 14px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.als-page .proj-result { grid-area: result; margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--ink); max-width: 36em; }
.als-page .proj-note { margin-top: 28px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 40em; }
@media (max-width: 339px) {
    .als-page .proj { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "title" "tag" "result"; }
    .als-page .proj-n { margin-bottom: 8px; }
}

/* quotes */
.als-page .quote { display: grid; gap: 22px; align-content: start; max-width: 50em; }
.als-page .quote-mark { width: 38px; height: 30px; color: var(--mint-ink); }
.als-page .quote blockquote p { font-family: var(--serif); font-size: clamp(25px, 2.6vw, 34px); line-height: 1.28; letter-spacing: -0.006em; color: var(--ink); }
.als-page .quote figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 18px; border-top: 1px solid var(--line-paper); }
.als-page .quote figcaption strong { font-weight: 600; font-size: 17px; }
.als-page .quote figcaption span { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }

/* cost and fee: one section, two parts. The table stays quiet: ink figures at body size, no money colors. */
.als-page .fee-grid { display: grid; gap: 56px; }
.als-page .fee-part h2 { margin-bottom: 20px; }
.als-page .fee-table { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 17px; line-height: 1.5; }
.als-page .fee-table caption { text-align: left; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 14px; }
.als-page .fee-table th, .als-page .fee-table td { text-align: left; vertical-align: top; padding: 16px 0; border-top: 1px solid var(--line-paper); }
.als-page .fee-table thead th { font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0 0 12px; border-top: 0; border-bottom: 1px solid var(--ink); }
.als-page .fee-table tbody tr:first-child td { border-top: 0; }
.als-page .fee-table td:first-child { padding-right: 28px; color: var(--ink); }
.als-page .fee-table td:last-child { width: 34%; color: var(--ink); font-weight: 500; }
.als-page .fee-table tbody { border-bottom: 1px solid var(--ink); }
.als-page .fee-foot { margin-top: 22px; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 42em; }
@media (max-width: 639px) {
    .als-page .fee-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .als-page .fee-table, .als-page .fee-table tbody, .als-page .fee-table tr, .als-page .fee-table td { display: block; width: 100%; }
    .als-page .fee-table tbody { border-top: 1px solid var(--ink); }
    .als-page .fee-table tr { padding: 16px 0; border-top: 1px solid var(--line-paper); }
    .als-page .fee-table tbody tr:first-child { border-top: 0; }
    .als-page .fee-table td { padding: 0; border-top: 0; }
    .als-page .fee-table td:first-child { padding-right: 0; }
    .als-page .fee-table td:last-child { width: 100%; margin-top: 8px; }
    .als-page .fee-table td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; margin-bottom: 4px; }
}
@media (min-width: 1000px) {
    .als-page .fee-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
}

/* how it works (the dusk step timeline) */
.als-page .how-list { display: grid; gap: 0; }
.als-page .how-step { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 0 30px 34px; border-left: 1px solid var(--ink); }
.als-page .how-step::before { content: ""; position: absolute; left: -6px; top: 32px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.als-page .how-step:first-child::before { background: var(--mint-ink); box-shadow: none; }
.als-page .paper-2 .how-step::before { background: var(--paper-2); }
.als-page .paper-2 .how-step:first-child::before { background: var(--mint-ink); }
.als-page .how-n { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); }
.als-page .how-step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.1; }
.als-page .how-step p { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 30em; }
@media (min-width: 900px) {
    .als-page .how-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
    .als-page .how-step { border-left: 0; border-top: 1px solid var(--ink); padding: 34px 0 0; }
    .als-page .how-step::before { left: 0; top: -6px; }
}

/* promises and plain lists */
.als-page .promise-list { display: grid; gap: 0; border-bottom: 1px solid var(--ink); }
.als-page .promise-list li { position: relative; padding: 20px 0 20px 34px; border-top: 1px solid var(--ink); font-size: 18px; line-height: 1.55; color: var(--ink); }
.als-page .promise-list li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 14px; height: 8px; border-left: 2px solid var(--mint-ink); border-bottom: 2px solid var(--mint-ink); transform: rotate(-45deg); }
@media (min-width: 900px) {
    .als-page .promise-list { grid-template-columns: 1fr 1fr; column-gap: 48px; border-bottom: 0; }
    .als-page .promise-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--ink); }
}
.als-page .dot-list { display: grid; gap: 14px; margin: 24px 0; max-width: 40em; }
.als-page .dot-list li { position: relative; padding-left: 24px; font-size: 18px; line-height: 1.6; color: var(--ink); }
.als-page .dot-list li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-ink); }
.als-page .fit-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .als-page .fit-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } }

/* terms in plain words */
.als-page .terms-list { display: grid; gap: 0; counter-reset: term; border-bottom: 1px solid var(--ink); max-width: 52em; }
.als-page .terms-list li { counter-increment: term; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; padding: 18px 0; border-top: 1px solid var(--line-paper); font-size: 17px; line-height: 1.65; color: var(--ink); }
.als-page .terms-list li:first-child { border-top: 1px solid var(--ink); }
.als-page .terms-list li::before { content: counter(term, decimal-leading-zero); font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--mint-ink); padding-top: 4px; }
.als-page .terms-more { margin-top: 32px; }

/* questions */
.als-page .faq { display: grid; border-bottom: 1px solid var(--ink); max-width: 52em; }
.als-page .faq details { border-top: 1px solid var(--ink); }
.als-page .faq summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 20px 44px 20px 0; min-height: 44px;
    font-family: var(--serif); font-size: clamp(23px, 2.2vw, 28px); line-height: 1.2; color: var(--ink); border-radius: 6px; }
.als-page .faq summary::-webkit-details-marker { display: none; }
.als-page .faq summary::after { content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
    border-right: 1.75px solid var(--mint-ink); border-bottom: 1.75px solid var(--mint-ink); transform: rotate(45deg); transition: transform .2s ease; }
.als-page .faq details[open] summary::after { transform: translateY(5px) rotate(-135deg); }
@media (hover: hover) { .als-page .faq summary:hover { color: var(--mint-ink); } }
.als-page .faq-a { padding: 0 0 24px; max-width: 40em; }
.als-page .faq-a p { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.als-page .faq-a p + p, .als-page .faq-a p + ul, .als-page .faq-a ul + p { margin-top: 14px; }
.als-page .faq-a .dot-list { margin: 14px 0; gap: 8px; }
.als-page .faq-a .dot-list li { font-size: 17px; color: var(--ink-2); }

/* about and contact (night) */
.als-page .about { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 128px) 0; background: linear-gradient(180deg, #0D1224 0%, #171E3C 48%, #2A2B58 100%); }
.als-page .about .kicker, .als-page .cta .kicker { color: var(--mint); }
.als-page .about-grid { display: grid; gap: 40px; align-items: start; }
.als-page .about-text { max-width: 38em; }
.als-page .about-text > p { margin-top: 20px; font-size: 18px; line-height: 1.7; color: var(--bone-2); }
.als-page .about-text > .h2 + p { margin-top: 30px; }
.als-page .contact-box { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.04); max-width: 440px; }
.als-page .contact-box img { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.als-page .contact-box p { min-width: 0; font-size: 16px; line-height: 1.55; color: var(--bone-2); }
.als-page .contact-box a { color: var(--bone); display: inline-block; padding: 10px 0; max-width: 100%; line-height: 1.4; text-decoration: underline; text-decoration-color: rgba(239, 234, 225, 0.4); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.als-page .contact-box a:hover { text-decoration-color: var(--mint); }
@media (max-width: 419px) { .als-page .contact-box img { width: 48px; height: 48px; } .als-page .contact-box { gap: 14px; padding: 16px; } }
.als-page .cta { background: var(--night); padding: clamp(80px, 9vw, 128px) 0; border-top: 1px solid rgba(239, 234, 225, 0.08); }
.als-page .cta .h2 { color: var(--bone); }
.als-page .cta p { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--bone-2); max-width: 30em; }
.als-page .cta .btn { margin-top: 32px; }
@media (min-width: 900px) {
    .als-page .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
    .als-page .portrait { justify-self: end; }
    .als-page .about-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 72px; align-items: end; }
}

/* the terms page */
.als-page .doc { padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 8vw, 112px); }
.als-page .doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.6vw, 54px); line-height: 1.08; letter-spacing: -0.014em; max-width: 20em; }
.als-page .doc-list { display: grid; gap: 0; margin-top: 40px; max-width: 48em; counter-reset: term; border-bottom: 1px solid var(--ink); }
.als-page .doc-list li { counter-increment: term; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; padding: 20px 0; border-top: 1px solid var(--line-paper); font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.als-page .doc-list li:first-child { border-top: 1px solid var(--ink); }
.als-page .doc-list li::before { content: counter(term, decimal-leading-zero); font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--mint-ink); padding-top: 5px; }
.als-page .doc-list strong { color: var(--ink); font-weight: 600; }
.als-page .doc-back { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 40px; }

/* footer */
.als-page .ftr { background: var(--road); color: var(--muted); font-size: 15px; padding: 6px 0 36px; }
.als-page .ftr-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 32px; padding-top: 22px; border-top: 1px solid rgba(239, 234, 225, 0.08); }
.als-page .ftr a { color: var(--bone-2); text-decoration: none; display: inline-block; padding: 10px 0; }
.als-page .ftr a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }
.als-page .ftr span { padding: 10px 0; display: inline-block; }
.als-page .ftr .ftr-links { display: flex; flex-wrap: wrap; gap: 0 28px; padding: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .als-page *, .als-page *::before, .als-page *::after { transition: none !important; animation: none !important; }
}
@media print {
    .als-page .hdr, .als-page .ftr, .als-page .stars, .als-page .moon { display: none; }
    .als-page .hero, .als-page .about, .als-page .cta { background: #fff; color: #000; }
}
.als-page .cta p a { color: var(--bone); display: inline-block; padding: 8px 0; text-decoration: underline; text-decoration-color: rgba(239, 234, 225, 0.4); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.als-page .cta p a:hover { text-decoration-color: var(--mint); }