/* Alchemys — Landing & Info design system ("Paper")
 *
 * Extracted 2026-09-11 from the inline <style> block in web/index.html so the
 * root page and every /<app>/info/ page share ONE visual language. Before this
 * file existed the info pages referenced .display / .eyebrow / .border-soft and
 * var(--text-2) / var(--border) — none of which were defined in any sheet they
 * loaded — so muted text rendered at full contrast, borders did not draw, and
 * .btn-primary fell through to the MD3 indigo in shared.css instead of the
 * Apple blue.
 *
 * LOAD ORDER — this sheet must come AFTER tokens.css, shared.css, md3.css and
 * app-shell.css. It deliberately overrides the MD3 .btn/.btn-primary and
 * re-points the --md-* bridge tokens at the Paper ramp.
 *
 *   <link rel="stylesheet" href="../../css/tokens.css">
 *   <link rel="stylesheet" href="../../css/shared.css">
 *   <link rel="stylesheet" href="../../css/md3.css">
 *   <link rel="stylesheet" href="../../css/app-shell.css">
 *   <link rel="stylesheet" href="../../css/landing.css">   <- last
 *
 * Scheme convention here is LIGHT-first (:root = light, html.dark = dark),
 * matching the root page. Note this is the inverse of tokens.css, which is
 * dark-first — that is why this file must win the cascade.
 */

/* ==========================================================================
   1. Tokens — Paper light
   ========================================================================== */

:root {
    /* Paper light — warm neutral, no blue cast */
    --bg: #f5f5f7;
    --bg-soft: #ebebef;
    --surface: #ffffff;
    --surface-2: #f5f5f7;
    --surface-hover: #e8e8ed;
    --border: rgba(0, 0, 0, 0.10);
    --border-strong: rgba(0, 0, 0, 0.18);
    --text: #1d1d1f;
    --text-2: #55555c;
    --text-3: #6e6e73;
    --accent: #0071e3;           /* the one blue (Apple link blue) */
    --accent-2: var(--accent);   /* legacy alias — old code referenced it; keep defined */
    --accent-soft: rgba(0, 113, 227, 0.08);
    --accent-border: rgba(0, 113, 227, 0.28);
    --on-accent: #ffffff;
    color-scheme: light;

    /* Type scale */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-hero: clamp(2.75rem, 6.5vw, 5.5rem);
    --text-h2: clamp(1.875rem, 4vw, 3rem);
    --text-h3: clamp(1.375rem, 2.4vw, 1.75rem);
    --text-title: 1.25rem;
    --text-small: 0.875rem;
    --text-meta: 0.8125rem;
    --text-micro: 0.6875rem;

    /* Radii */
    --radius-s: 10px;
    --radius-m: 14px;
    --radius-l: 20px;
    --radius-xl: 28px;
    --radius-full: 980px;
    --md-shape-lg: 20px;
    --md-shape-full: 9999px;

    /* Shadows */
    --shadow-card: 0 2px 8px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
    --shadow-hover: 0 4px 12px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.10);
    --shadow-float: 0 12px 32px rgba(0,0,0,.08), 0 24px 64px rgba(0,0,0,.12);

    /* Motion — critically damped, THE curve */
    --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
    --d-press: 70ms;
    --d-quick: 140ms;
    --d-reveal: 315ms;
    --d-lift: 210ms;
}

html.dark {
    /* True black */
    --bg: #000000;
    --bg-soft: #161617;
    --surface: #1d1d1f;
    --surface-2: #2c2c2e;
    --surface-hover: #3a3a3c;
    --border: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.24);
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #86868b;
    --accent: #2997ff;           /* brighter blue for black; #0071e3 fails on black */
    --accent-2: var(--accent);
    --accent-soft: rgba(41, 151, 255, 0.14);
    --accent-border: rgba(41, 151, 255, 0.36);
    --on-accent: #ffffff;
    color-scheme: dark;
    /* On black, shadows vanish — separate cards with borders + surface steps */
    --shadow-card: 0 0 0 1px var(--border);
    --shadow-hover: 0 0 0 1px var(--border-strong), 0 8px 24px rgba(0,0,0,.5);
    --shadow-float: 0 12px 32px rgba(0,0,0,.6), 0 0 0 1px var(--border-strong);
}

/* MD3 bridge tokens — shared sheets (dropdown.css, modal.css, app-shell.css,
   the custom select) consume these var names; re-pointed at the Paper vars.
 *
 * SPECIFICITY, not just load order. shared.css declares its LIGHT Material You
 * set on `html:not(.dark):not(.dark-mode)` (0,2,1). A plain `:root` here (0,1,0)
 * loses to it no matter that this sheet loads later, so in light mode the bridge
 * silently did nothing and Material You's lavender surfaces (#EDE7F1 and
 * friends) leaked into every panel that reads these tokens — most visibly the
 * dashboard feed card and the custom-select dropdown. Dark mode was never
 * affected: shared.css declares that set on plain `:root`, which `html.dark`
 * already outranks. Matching the light selector here fixes both schemes. */
html:not(.dark):not(.dark-mode),
html.dark,
html.dark-mode {
    --md-surface-container-low: var(--surface);
    --md-surface-container: var(--surface-2);
    --md-surface-container-high: var(--surface-hover);
    --md-surface-container-highest: var(--surface-hover);
    --md-on-surface: var(--text);
    --md-on-surface-variant: var(--text-2);
    --md-primary: var(--accent);
    --md-on-primary: var(--on-accent);
    --md-primary-container: var(--accent-soft);
    --md-on-primary-container: var(--text);
    --md-outline: var(--border-strong);
    --md-outline-variant: var(--border);
    /* Motion: damped curves replace the old spring linear() tokens.
       These are a SECOND, independent token set — landing.css loads after
       shared.css on the root page and every /<app>/info/ page, so it wins there.
       Scaled ×0.7 alongside shared.css (2026-09-21) so the suite moves as one. */
    --md-easing-standard: var(--ease-apple);
    --md-easing-enter: var(--ease-apple);
    --md-duration-xs: 70ms;   /* 100 × 0.7 */
    --md-duration-s: 105ms;   /* 150 × 0.7 */
    --md-duration-ms: 140ms;  /* 200 × 0.7 */
    --md-duration-m: 210ms;   /* 300 × 0.7 */
    --md-duration-l: 315ms;   /* 450 × 0.7 */
    --md-stagger: 42ms;       /* 60 × 0.7 */
    --md-spring-snappy: 140ms var(--ease-apple); /* 200 × 0.7 */
    --md-spring-soft: 265ms var(--ease-apple);   /* 380 × 0.7, rounded to 5ms */
}

/* ==========================================================================
   2. Base
   ========================================================================== */

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--d-quick) var(--ease-apple),
                color var(--d-quick) var(--ease-apple);
}

::selection { background: rgba(0, 113, 227, 0.18); color: var(--text); }
html.dark ::selection { background: rgba(41, 151, 255, 0.32); color: var(--text); }

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

/* ==========================================================================
   3. Typography
   ========================================================================== */

/* Tracking is size-specific: large display text needs negative tracking,
   body copy sits at 0. Two stops — desktop and phone. */
.display { font-weight: 700; line-height: 1.05; letter-spacing: -0.022em; }
@media (max-width: 640px) {
    .display { letter-spacing: -0.016em; }
}

.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }

/* Section eyebrow — plain sans label (no mono) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.eyebrow .dot {
    width: 22px;
    height: 1px;
    background: var(--accent);
    margin-right: 10px;
}

/* ==========================================================================
   4. Surfaces
   ========================================================================== */

.surface { background: var(--surface); }
.border-soft { border: 1px solid var(--border); }
.border-soft-t { border-top: 1px solid var(--border); }
.border-soft-b { border-bottom: 1px solid var(--border); }

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--d-lift) var(--ease-apple),
                border-color var(--d-quick) var(--ease-apple),
                transform var(--d-lift) var(--ease-apple),
                background var(--d-quick) var(--ease-apple);
}
.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* Nav material — the ONLY glass in the system */
.nav-blur {
    background: rgba(245, 245, 247, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
}
html.dark .nav-blur { background: rgba(0, 0, 0, 0.65); }

/* Transparency is a preference, not an assumption */
@media (prefers-reduced-transparency: reduce) {
    .nav-blur {
        background: var(--bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
@media (prefers-contrast: more) {
    .nav-blur {
        background: var(--bg);
        backdrop-filter: none;
        border-bottom: 1px solid var(--border-strong);
    }
}

/* ==========================================================================
   5. Buttons — overrides the MD3 .btn in shared.css
   ========================================================================== */

a.btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--d-press) var(--ease-apple),
                box-shadow var(--d-lift) var(--ease-apple),
                background var(--d-quick) var(--ease-apple),
                color var(--d-quick) var(--ease-apple),
                border-color var(--d-quick) var(--ease-apple);
}
/* Feedback on press, not on release */
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    box-shadow: var(--shadow-card);
    filter: none;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    filter: none;
}
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    font-weight: 500;
}
.btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border-color: transparent;
}
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }

/* ==========================================================================
   6. Chips, tags, links
   ========================================================================== */

.icon-chip {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    flex: 0 0 auto;
}

.tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--text-micro);
    font-weight: 500;
    border: 1px solid var(--border);
    letter-spacing: 0.01em;
}
.tag-accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }

.nav-link {
    color: var(--text-2);
    transition: color var(--d-quick) var(--ease-apple),
                transform var(--d-press) var(--ease-apple);
}
.nav-link:hover { color: var(--text); }
.nav-link:active { transform: scale(0.98); }
footer .nav-link:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
footer .nav-link:active { transform: none; }

.link-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--accent); }
.link-more svg { transition: transform var(--d-quick) var(--ease-apple); }
.link-more:hover svg { transform: translateX(2px); }

/* ==========================================================================
   7. Motion — reveal on scroll
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--d-reveal) var(--ease-apple),
                transform var(--d-reveal) var(--ease-apple);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   8. Module tiles / marketing panels (root page + info "related apps")
   ========================================================================== */

.module {
    position: relative;
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    touch-action: manipulation;
    transition: transform var(--d-lift) var(--ease-apple),
                box-shadow var(--d-lift) var(--ease-apple),
                border-color var(--d-quick) var(--ease-apple);
}
.module:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.module:active { transform: scale(0.97); }
.module:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.launcher-tile { padding: 24px; }
.launcher-icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-m);
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 28px;
}
.launcher-title { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.launcher-flag { font-size: var(--text-micro); font-weight: 600; color: var(--accent); }
.launcher-desc { font-size: var(--text-small); color: var(--text-2); line-height: 1.5; }
.launcher-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 13px; font-weight: 500; color: var(--accent); }
.launcher-open svg { transition: transform var(--d-quick) var(--ease-apple); }
.module:hover .launcher-open svg, .module:hover .link-more svg { transform: translateX(2px); }

.panel-icon {
    display: flex; align-items: center; justify-content: center;
    min-height: 132px;
    border-radius: var(--radius-l);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
}
.panel-num { font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.08em; color: var(--text-3); }

/* Spec-table rows */
.spec-list > li + li { border-top: 1px solid var(--border); }
.spec-list > li { padding: 9px 0; }
.spec-list > li:first-child { border-top: 0; padding-top: 0; }

/* Hero stat blocks */
.stat-label { font-size: var(--text-meta); font-weight: 500; }
.stat-sub { font-size: var(--text-meta); }
.stat + .stat { border-top: 1px solid var(--border); }
@media (min-width: 768px) {
    .stat + .stat { border-top: 0; }
}

.foot-head { font-size: var(--text-meta); font-weight: 600; color: var(--text); }

/* Select chevron — two data-URI fills keyed per theme */
select.styled {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%23a1a1a6' d='M1 3l4 4 4-4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px !important;
}
html:not(.dark) select.styled {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%2355555c' d='M1 3l4 4 4-4z'/></svg>");
}

/* Shared custom select (css/dropdown.css) — compact pill in the navbar */
nav .custom-select-wrapper { width: auto; flex: 0 0 auto; }
nav .custom-select .custom-select-trigger {
    height: 40px;
    font-size: 12px;
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--border);
    box-shadow: none;
    border-radius: var(--radius-full);
}

/* Brand mark in the nav is a <button> (opens the cross-app launcher) */
.nav-launcher {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: opacity var(--d-quick) var(--ease-apple);
}
.nav-launcher:hover { opacity: 0.8; }
.nav-launcher:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.nav-launcher-chev { transition: transform var(--d-quick) var(--ease-apple); }
.nav-launcher[aria-expanded="true"] .nav-launcher-chev { transform: rotate(180deg); }

/* ==========================================================================
   9. INFO PAGES — shared components
   Every /<app>/info/ page is built from this vocabulary. Do not invent
   per-page variants; extend here so all nine stay identical.
   ========================================================================== */

/* --- 9.1 Sticky translucent header ------------------------------------- */
.info-nav {
    position: sticky;
    top: 0;
    z-index: 50;
}
.info-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.info-brand {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.018em;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity var(--d-quick) var(--ease-apple);
}
.info-brand:hover { opacity: 0.7; }
.info-nav-actions { display: flex; align-items: center; gap: 8px; }
.info-nav-actions .btn { padding: 7px 16px; font-size: 13px; }

/* Icon-only nav control (theme toggle, language) */
.info-icon-btn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: color var(--d-quick) var(--ease-apple),
                background var(--d-quick) var(--ease-apple),
                transform var(--d-press) var(--ease-apple);
}
.info-icon-btn:hover { color: var(--text); background: var(--surface-2); }
.info-icon-btn:active { transform: scale(0.94); }

/* Scroll-edge effect: fade content under floating chrome instead of a hard
   1px divider. Only drawn where the header actually overlaps content. */
.info-nav::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 24px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--bg), transparent);
    opacity: 0;
    transition: opacity var(--d-quick) var(--ease-apple);
}
.info-nav.is-scrolled::after { opacity: 1; }

/* --- 9.2 Page shell ----------------------------------------------------- */
.info-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 32px);
}
.info-narrow { max-width: 720px; }

.info-section {
    padding-block: clamp(48px, 9vw, 96px);
    scroll-margin-top: 80px;
}
.info-section + .info-section { border-top: 1px solid var(--border); }

/* --- 9.3 Hero ----------------------------------------------------------- */
.info-hero { padding-block: clamp(56px, 11vw, 120px) clamp(40px, 7vw, 72px); }
.info-title {
    font-weight: 700;
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.024em;
    margin: 0;
}
@media (max-width: 640px) {
    .info-title { letter-spacing: -0.016em; }
}
.info-lede {
    margin-top: 20px;
    max-width: 42em;
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
    line-height: 1.55;
    color: var(--text-2);
}
.info-hero-actions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
/* "Free to try · No card" style reassurance under the CTA */
.info-hero-note {
    margin-top: 14px;
    font-size: var(--text-meta);
    color: var(--text-3);
}

/* --- 9.4 Section heading ------------------------------------------------ */
.info-h2 {
    font-weight: 700;
    font-size: clamp(1.625rem, 3.4vw, 2.375rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
}
.info-h3 {
    font-weight: 600;
    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
}
.info-section-lede {
    margin-top: 14px;
    max-width: 40em;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-2);
}

/* --- 9.5 Steps — the "how to use it" rail ------------------------------- */
/* The primary instructional component. Numbered, connected, scannable. */
.info-steps {
    margin-top: 40px;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0;
}
.info-step {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 18px;
    padding-block: 22px;
}
.info-step + .info-step { border-top: 1px solid var(--border); }
.info-step-num {
    grid-row: span 2;
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-border);
    font-size: var(--text-meta);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.info-step-body > * + * { margin-top: 8px; }
.info-step-title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    margin: 0;
}
.info-step-text {
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--text-2);
    margin: 0;
}

/* --- 9.6 Feature grid --------------------------------------------------- */
.info-grid {
    margin-top: 40px;
    display: grid;
    gap: clamp(12px, 2vw, 20px);
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.info-feature {
    padding: 24px;
    border-radius: var(--radius-l);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: transform var(--d-lift) var(--ease-apple),
                box-shadow var(--d-lift) var(--ease-apple),
                border-color var(--d-quick) var(--ease-apple);
}
.info-feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.info-feature > * + * { margin-top: 10px; }
.info-feature-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    margin: 0;
}
.info-feature-text {
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--text-2);
    margin: 0;
}

/* --- 9.7 Callout -------------------------------------------------------- */
.info-callout {
    margin-top: 28px;
    padding: 18px 20px;
    border-radius: var(--radius-m);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-3);
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--text-2);
}
.info-callout strong { color: var(--text); font-weight: 600; }
.info-callout-tip { background: var(--accent-soft); border-color: var(--accent-border); border-left-color: var(--accent); }
.info-callout-warn { border-left-color: var(--signal-warning, #f0b429); }

/* --- 9.8 Spec / key-value rows ------------------------------------------ */
.info-specs {
    margin-top: 28px;
    list-style: none;
    padding: 0;
}
.info-spec-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    padding-block: 12px;
    font-size: var(--text-small);
}
.info-spec-row + .info-spec-row { border-top: 1px solid var(--border); }
.info-spec-key { color: var(--text-2); }
.info-spec-val { color: var(--text); font-weight: 500; text-align: right; }

/* --- 9.9 Table of contents (long pages: studio, score) ------------------ */
.info-layout {
    display: grid;
    gap: clamp(24px, 5vw, 56px);
    align-items: start;
}
@media (min-width: 1000px) {
    .info-layout { grid-template-columns: 208px minmax(0, 1fr); }
}
.info-toc {
    display: none;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (min-width: 1000px) { .info-toc { display: block; } }
.info-toc-head {
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 12px;
}
.info-toc a {
    display: block;
    padding: 6px 0 6px 12px;
    border-left: 2px solid var(--border);
    font-size: var(--text-small);
    line-height: 1.4;
    color: var(--text-2);
    text-decoration: none;
    transition: color var(--d-quick) var(--ease-apple),
                border-color var(--d-quick) var(--ease-apple);
}
.info-toc a:hover { color: var(--text); }
.info-toc a.is-active {
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 500;
}

/* --- 9.10 FAQ / disclosure ---------------------------------------------- */
.info-faq { margin-top: 32px; }
.info-faq details {
    border-bottom: 1px solid var(--border);
}
.info-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 18px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.008em;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: color var(--d-quick) var(--ease-apple);
}
.info-faq summary::-webkit-details-marker { display: none; }
.info-faq summary:hover { color: var(--accent); }
.info-faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--d-quick) var(--ease-apple);
    opacity: 0.5;
}
.info-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.info-faq-answer {
    padding-bottom: 20px;
    max-width: 46em;
    font-size: var(--text-small);
    line-height: 1.65;
    color: var(--text-2);
}

/* --- 9.11 Keyboard key -------------------------------------------------- */
.info-kbd {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.8125em;
    line-height: 1.5;
    color: var(--text);
    white-space: nowrap;
}

/* --- 9.12 Closing CTA --------------------------------------------------- */
.info-cta {
    margin-block: clamp(40px, 8vw, 80px);
    padding: clamp(32px, 6vw, 56px);
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    text-align: center;
}
.info-cta .info-h2 { margin-inline: auto; }
.info-cta .info-section-lede { margin-inline: auto; }
.info-cta-actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* --- 9.13 Footer -------------------------------------------------------- */
.info-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    padding-block: 40px;
}
.info-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: var(--text-small);
}
.info-footer-links a { color: var(--text-2); text-decoration: none; }
.info-footer-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.info-footer-meta {
    margin-top: 20px;
    font-size: var(--text-meta);
    color: var(--text-3);
}

/* --- 9.14 Long-form prose (rewritten tutorial bodies) ------------------- */
.info-prose { max-width: 46em; }
.info-prose > * + * { margin-top: 16px; }
.info-prose p { font-size: var(--text-small); line-height: 1.7; color: var(--text-2); margin: 0; }
.info-prose ul, .info-prose ol { margin: 0; padding-left: 1.25em; }
.info-prose li { font-size: var(--text-small); line-height: 1.7; color: var(--text-2); }
.info-prose li + li { margin-top: 6px; }
.info-prose strong { color: var(--text); font-weight: 600; }
.info-prose a { color: var(--accent); text-decoration: none; }
.info-prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.info-prose code {
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.875em;
    color: var(--text);
}

/* ==========================================================================
   10. Accessibility — reduced motion
   Reduced motion means a gentler equivalent, not no feedback: opacity and
   colour transitions survive, travel and overshoot do not.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}