/* About (about.html): the public page and a signed-out visitor's front page,
   and the Privacy Policy and Terms of Service beside it (privacy.html, terms.html),
   in the Instrument look. Its head is the door's plate and gold dial
   (landing.css, DESIGN.md The door), the one place the brand shows; then
   numbered planes, each a rule across the top with its heading beside it.
   Tokens only; nothing moves. */
.about {
    max-width: 64rem;
    margin: 0 auto;
    counter-reset: about-section;
}

/* —— The head: the plate beside the name —— */
.about-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    padding-bottom: var(--space-12);
}
.about-head .signin-plate {
    margin: 0;
    min-height: 22rem;
}
.about-head .signin-dial { width: min(15rem, 62%); }
/* The LIVE dot at two o'clock, sized for the smaller dial. */
.about-head .signin-dial-live {
    left: calc(50% + (50% + 2rem) * 0.866);
    top: calc(50% - (50% + 2rem) * 0.5);
    width: 2rem;
    height: 2rem;
}

.about-ident {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.about-ident .page-eyebrow { margin: 0 0 var(--space-2); }
.about-name {
    margin: 0;
    font-size: 3rem;
    line-height: 3.5rem;
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    color: var(--text-1);
}
.about-pitch {
    margin: var(--space-4) 0 0;
    max-width: 26rem;
    font-size: var(--text-xl);
    line-height: 1.75rem;
    color: var(--text-2);
}
.about-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-6) 0 0;
    font-family: var(--font-mono);
    font-size: var(--type-label);
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-2);
}
.about-state .glyph { width: 0.5rem; height: 0.5rem; vertical-align: 0; }
.about-signin { margin-top: var(--space-8); }

/* A policy page's head (privacy.html, terms.html): its name and date, no plate. */
.about-head--doc {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--space-8);
}

/* —— The planes: its number and heading beside the words —— */
.about-section {
    counter-increment: about-section;
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--line);
}
.about-heading {
    margin: 0;
    font-size: var(--text-xl);
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--text-1);
}
.about-heading::before {
    content: counter(about-section, decimal-leading-zero);
    content: counter(about-section, decimal-leading-zero) / "";
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    font-feature-settings: "ss09" 1;
    color: var(--text-2);
}

.about-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 40rem;
    color: var(--text-1);
    font-size: var(--text-lg);
    line-height: 1.5rem;
}
.about-body p { margin: 0; }

/* Rows: one line each, hairlines as the joints between them. */
.about-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 3rem;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line);
}
.about-rows li:last-child { border-bottom: 1px solid var(--line); }
.about-rows .slot { font-size: var(--text-base); line-height: 1.25rem; }
.about-rows .ch-name { margin-right: auto; padding-left: var(--space-2); }
.about-metals { display: inline-flex; gap: var(--space-3); flex: none; }
.about-handle {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--text-1);
}

.about-list {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--space-1);
}
.about-list li::marker { color: var(--text-3); }

/* How buying works: three steps across, each under its own rule. */
.about-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
.about-step {
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-strong);
}
.about-step-n {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    line-height: 2rem;
    font-weight: 500;
    color: var(--text-2);
}
.about-step-title {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--text-lg);
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--text-1);
}
.about-step p {
    font-size: var(--text-base);
    line-height: 1.25rem;
    color: var(--text-2);
}

/* Label and value pairs: the label a Mono legend, rows joined by hairlines. */
.about-spec {
    margin: 0;
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
}
.about-spec dt,
.about-spec dd {
    margin: 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--line);
}
.about-spec dt {
    padding-right: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    line-height: 1.5rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-2);
}
.about-spec dt:last-of-type,
.about-spec dd:last-of-type { border-bottom: 1px solid var(--line); }

/* —— The foot: the public pages, one Mono legend each —— */
.about-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    padding: var(--space-6) 0 var(--space-8);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.about-foot a { color: var(--text-2); text-decoration: none; }
.about-foot a:hover,
.about-foot a[aria-current="page"] { color: var(--text-1); }

/* —— Under the desk's width: the heading over its words —— */
@media (max-width: 991.98px) {
    .about-section {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }
}

/* —— Phone: the plate on top, then one column —— */
@media (max-width: 767.98px) {
    .about-head {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
        padding-bottom: var(--space-8);
    }
    .about-head .signin-plate { min-height: 14rem; }
    .about-head .signin-dial { width: min(10rem, 56%); border-width: 2px; }
    .about-head .signin-dial-live {
        left: calc(50% + (50% + 1.5rem) * 0.866);
        top: calc(50% - (50% + 1.5rem) * 0.5);
        width: 1.5rem;
        height: 1.5rem;
    }
    .about-name { font-size: 2.25rem; line-height: 2.75rem; }
    .about-pitch { font-size: var(--text-lg); line-height: 1.5rem; }
    .about-signin { margin-top: var(--space-6); }
    .about-section { padding: var(--space-6) 0; }
    /* Each step one row: its numeral beside its title and words. */
    .about-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .about-step {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        column-gap: var(--space-2);
    }
    .about-step-n { grid-row: span 2; }
    .about-step-title { margin: var(--space-1) 0 var(--space-1); }
    .about-step p { grid-column: 2; }
    .about-spec { grid-template-columns: minmax(0, 1fr); }
    .about-spec dd { padding-top: 0; border-top: 0; }
    .about-spec dd:last-of-type { border-bottom: 1px solid var(--line); }
    .about-spec dt:last-of-type { border-bottom: 0; }
}