/* ==========================================================================
   unhookedyou.com — the whole stylesheet.

   The tokens below are the app's own (design/UNHOOKED_WORLD.md v2 §3,
   AppPalette). Hex lives here and nowhere else on the site: a page writes
   var(--accent), never #E9A23B. Dark only — the app has no light theme and no
   user themes, so the site does not invent one.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Ground and layers — 5–8 brightness points per layer. */
    --bg: #0C0D17;
    --bg-deep: #141631;
    --surface: #171A2B;
    --surface-raised: #1F2337;
    --hairline: rgba(255, 255, 255, 0.10);
    --hairline-bright: rgba(255, 255, 255, 0.14);

    /* Ember gold. Primary actions, active states, links. */
    --accent: #E9A23B;
    --accent-dim: rgba(233, 162, 59, 0.18);
    --accent-glow: rgba(233, 162, 59, 0.26);

    --text-primary: #F4F6F8;
    --text-secondary: #98A2B3;
    --text-tertiary: #5B6472;

    /* The phase spectrum — the milestone ladder's own progression. */
    --phase-dawn: #6E6AF0;   /* the first days   — day 1, 3   */
    --phase-early: #5E8DF7;  /* the first weeks  — day 7, 14  */
    --phase-mid: #9A6EF0;    /* the months       — 30, 60, 90 */
    --phase-deep: #E9A23B;   /* the quarters     — 180        */
    --phase-gold: #C9861F;   /* year marks only — the one gold */

    --wrap: 1180px;
    --wrap-legal: 760px;
    --r-lg: 24px;
    --r-md: 16px;
    --r-sm: 14px;

    /* v3 FIRSTLIGHT — light enters from above. The ground stays the app's
       near-black; the top of every page carries the dawn coming through the
       surface. These are the only new colors the relight adds, all derived
       from the phase spectrum that was already law. */
    --light-dawn: rgba(110, 106, 240, 0.13);      /* indigo dawn halo      */
    --light-shallow: rgba(233, 162, 59, 0.07);   /* the shallows' warmth  */
    --light-high: rgba(244, 246, 248, 0.05);     /* white where it enters */
    --lit-edge: rgba(255, 255, 255, 0.055);      /* a card's lit top      */
    --water-line: rgba(244, 246, 248, 0.16);     /* the surface, drawn    */
}

@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/fonts/Fraunces-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/PlusJakartaSans-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
    /* Just under the surface at dawn: light lives in the top of the page and
       the water darkens to the app's own near-black by one screen down. */
    background:
        radial-gradient(1200px 520px at 50% -180px, var(--light-dawn), transparent 70%),
        radial-gradient(900px 400px at 78% -160px, var(--light-shallow), transparent 64%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 1400px);
    background-repeat: no-repeat;
    background-color: var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--surface-raised); color: var(--text-primary);
    padding: 12px 16px; border-radius: var(--r-sm);
}
.skip:focus { left: 12px; top: 12px; z-index: 10; }

/* ------------------------------------------------- v3: the materials      */

/* Depth glass: every raised thing is a pane of water the light falls
   through — a lit top edge, then the surface's own dark. One rule, every
   card on the site. */
.feature, .tool-card, .tool-panel, .card, .action {
    background:
        linear-gradient(180deg, var(--lit-edge), rgba(255, 255, 255, 0) 56px),
        var(--surface);
    border-top-color: var(--hairline-bright);
}


/* ---------------------------------------------------------------- chrome  */

.site-head { border-bottom: 1px solid var(--hairline); }

.head-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-top: 20px; padding-bottom: 20px;
}

.wordmark {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--text-primary);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: 21px; letter-spacing: 0.2px;
}
.wordmark:hover { text-decoration: none; color: var(--text-primary); }

/* The mark: one open link of a chain, in the app's green. */
.wordmark-mark {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2.5px solid var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
}

.head-nav { display: flex; gap: 20px; font-size: 15px; }
.head-nav a { color: var(--text-secondary); font-weight: 500; }
.head-nav a:hover { color: var(--accent); text-decoration: none; }

.site-foot {
    border-top: 1px solid var(--hairline);
    margin-top: 80px; padding: 36px 0 48px;
    color: var(--text-tertiary);
}
.foot-line { color: var(--text-secondary); font-size: 15px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 18px; font-size: 15px; }
.foot-fine { font-size: 13px; line-height: 1.6; }

/* ---------------------------------------------------------------- landing */

.hero { padding: 84px 0 24px; }

/* The hero is a scene: the copy stands in the light; the phone floats in the
   water beside it, rays coming down from the surface behind it. */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 48px;
    align-items: center;
}

.hero-water {
    position: relative;
    min-height: 680px;
    display: flex; align-items: center; justify-content: center;
}
/* The water's own glow gathers behind the phone. */
.hero-water::before {
    content: '';
    position: absolute; inset: 12% 4% 18% 4%;
    background: radial-gradient(48% 42% at 52% 46%, var(--accent-dim), transparent 72%);
    filter: blur(10px);
}

.h1-accent { font-style: normal; color: var(--accent); }
.hero-water svg.scene {
    position: absolute; inset: -40px -60px -60px -60px;
    width: calc(100% + 120px); height: calc(100% + 100px);
    pointer-events: none;
}

.hero-phone {
    position: relative;
    width: min(400px, 88%);
    padding: 9px;
    background: rgba(22, 26, 32, 0.72);
    border: 1px solid var(--hairline-bright);
    border-top-color: rgba(255, 255, 255, 0.22);
    border-radius: 38px;
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.55),
        0 0 70px var(--accent-glow);
    backdrop-filter: blur(6px);
}
.hero-phone img { display: block; width: 100%; height: auto; border-radius: 30px; }

.hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(36px, 6.4vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.5px;
    max-width: 17ch;
}

.hero-lede {
    margin-top: 20px;
    max-width: 60ch;
    font-size: clamp(17px, 2.2vw, 20px);
    color: var(--text-secondary);
}

.hero-privacy {
    margin-top: 24px;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 9px 18px 9px 14px;
    color: var(--text-primary);
    font-size: 15px; font-weight: 600;
}
.hero-privacy::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 14px var(--accent-glow);
}

/* The phase strip — the milestone ladder in the app's own spectrum. It is the
   ring's grammar flattened: the same five phases, in the same order, ending on
   the one gold that only year marks ever wear. */
.ladder { margin: 44px 0 8px; }

.ladder-row { display: flex; gap: 6px; align-items: flex-start; }

/* One step = one phase: its bar, and the mark it ends on. The widths come from
   the --w each step carries, so the bar keeps the ladder's real proportions. */
.ladder-step {
    flex: var(--w, 1) 1 0;
    font-size: 13px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ladder-step i {
    display: block; height: 12px; border-radius: 999px;
    margin-bottom: 10px;
    background: var(--seg);
    /* Lit from above, like everything in this water. */
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.28);
}
.ladder-step.s1 { --seg: var(--phase-dawn); }
.ladder-step.s2 { --seg: var(--phase-early); }
.ladder-step.s3 { --seg: var(--phase-mid); }
.ladder-step.s4 { --seg: var(--phase-deep); }
.ladder-step.s5 { --seg: var(--phase-gold); text-align: right; }

/* The one glow on this page, on the segment the accent belongs to. */
.ladder-step.s4 i { box-shadow: 0 0 24px var(--accent-glow); }
.ladder-step.s4 { color: var(--text-secondary); }

/* Store badges. Dead on purpose until the listings exist — a link that goes
   nowhere is worse than a badge that says so. */
.badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.badge {
    display: inline-flex; flex-direction: column; justify-content: center;
    min-width: 190px;
    padding: 11px 22px;
    border: 1px solid var(--hairline-bright);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-tertiary);
    cursor: not-allowed;
}
.badge-small { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; }
.badge-big { font-size: 17px; font-weight: 600; color: var(--text-secondary); }

/* The phone shots — real captures from the running app (W1), framed in CSS.
   Never a mockup: every pixel in these images came off the simulator. */
.shots-row {
    margin-top: 56px;
    display: grid; gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
}
.shot { text-align: center; }
.shot-frame {
    border: 1px solid var(--hairline-bright);
    border-radius: 30px;
    padding: 8px;
    background: var(--surface);
    overflow: hidden;
}
.shot-frame img {
    display: block; width: 100%; height: auto;
    border-radius: 22px;
}
.shot figcaption {
    margin-top: 12px;
    font-size: 14px; color: var(--text-tertiary);
}
/* The middle shot carries the page's one glow — the newest painting. */
.shot.is-lead .shot-frame { box-shadow: 0 0 44px var(--accent-glow); border-color: var(--accent); }

.features { margin-top: 64px; display: grid; gap: 16px; }

.feature {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 24px 26px;
}
.feature h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 21px; font-weight: 600; letter-spacing: -0.2px;
    display: flex; align-items: center; gap: 12px;
}
.feature h2::before {
    content: ''; width: 10px; height: 10px; border-radius: 3px; flex: none;
    background: var(--dot, var(--accent));
    box-shadow: 0 0 16px var(--dot, var(--accent));
    opacity: 0.9;
}
.feature p { margin-top: 8px; color: var(--text-secondary); max-width: 66ch; }

.truth {
    margin-top: 110px;
    padding: 56px 0 8px;
    border-top: 1px solid var(--hairline);
    max-width: 820px;
    margin-left: auto; margin-right: auto;
}
.truth h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px; font-weight: 600;
}
.truth ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.truth li { position: relative; padding-left: 26px; color: var(--text-secondary); }
.truth li::before {
    content: ''; position: absolute; left: 4px; top: 11px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
}
.truth p { margin-top: 16px; color: var(--text-tertiary); font-size: 15px; }

/* ------------------------------------------------- v4: the statement      */

.statement { padding: 130px 0 96px; text-align: center; }
.statement p {
    margin: 0 auto;
    max-width: 21ch;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(30px, 4.6vw, 52px);
    line-height: 1.16;
    letter-spacing: -0.4px;
}
.statement .quiet { color: var(--text-tertiary); }

/* --------------------------------------------------- W1: the story beats  */

.beats {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px 72px;
}

.beat { display: grid; grid-template-columns: 60px 1fr; gap: 6px 22px; }
.beat-n {
    grid-row: 1 / span 2;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 46px; font-weight: 600; line-height: 0.9;
    color: var(--beat-hue, var(--accent));
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 34px var(--beat-hue, var(--accent));
}
.beat h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 23px; font-weight: 600; letter-spacing: -0.2px;
}
.beat p { color: var(--text-secondary); max-width: 52ch; margin-top: 6px; }

/* ------------------------------------------------ W1: the Workbench cards */

.teaser {
    margin-top: 120px;
    padding: 64px 0 8px;
    border-top: 1px solid var(--hairline);
}
.teaser-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.teaser h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px; font-weight: 600;
}
.teaser-all { font-size: 15px; font-weight: 600; white-space: nowrap; }
.teaser-line { margin-top: 6px; color: var(--text-tertiary); font-size: 15px; }

.tool-cards { margin-top: 28px; display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }

.tool-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 24px 24px 22px;
    color: var(--text-primary);
    transition: transform 160ms ease, border-color 160ms ease;
}
.tool-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    text-decoration: none;
}
.tool-card .tc-title { display: block; font-weight: 600; color: var(--text-primary); }
.tool-card .tc-line { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.tool-card .tc-go { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 14px; font-weight: 600; }

/* --------------------------------------------------- W1: sister sites     */

.sisters { margin-top: 110px; padding-top: 36px; border-top: 1px solid var(--hairline); }
.sisters h2 { font-size: 15px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.4px; text-transform: uppercase; }
.sisters ul { list-style: none; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.sisters a { color: var(--text-secondary); font-size: 14px; }
.sisters a:hover { color: var(--accent); }
.sisters .s-what { color: var(--text-tertiary); }

/* --------------------------------------------------- W1: tool pages       */

.crumbs { padding-top: 28px; font-size: 14px; color: var(--text-tertiary); }
.crumbs a { color: var(--text-tertiary); }
.crumbs a:hover { color: var(--accent); }

.tool { padding: 10px 0 0; }
.tool .wrap { max-width: var(--wrap-legal); }

.tool h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: clamp(30px, 5vw, 42px);
    letter-spacing: -0.4px;
    margin-top: 14px;
}

.tool-intro { margin-top: 14px; color: var(--text-secondary); max-width: 66ch; }
.tool-intro p + p { margin-top: 10px; }

.tool-panel {
    margin-top: 28px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 26px 24px;
}

.tool-panel h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px; font-weight: 600; letter-spacing: -0.2px;
}
.tool-panel p { color: var(--text-secondary); max-width: 66ch; }
.tool-panel p + p, .tool-panel h2 + p { margin-top: 10px; }
.tool-panel ul { margin: 10px 0 0 22px; color: var(--text-secondary); }
.tool-panel li { margin-bottom: 6px; }

.nnn-count {
    margin-top: 14px;
    font-size: 15px; font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.tool-row { margin-top: 16px; }
.tool-row:first-child { margin-top: 0; }
.tool-row label { display: block; font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.tool-row input[type="date"], .tool-row input[type="number"] {
    width: 100%; max-width: 320px;
    background: var(--bg);
    border: 1px solid var(--hairline-bright);
    border-radius: var(--r-sm);
    color: var(--text-primary);
    font: inherit; font-size: 16px;
    padding: 12px 14px;
    color-scheme: dark;
}
.tool-row input:focus { outline: none; border-color: var(--accent); }

.tool-btn {
    display: inline-block; border: 0; cursor: pointer;
    background: var(--accent); color: var(--bg);
    font: inherit; font-weight: 700; font-size: 16px;
    padding: 13px 26px; border-radius: var(--r-sm);
}
.tool-btn:hover { filter: brightness(1.06); }
.tool-btn-quiet {
    display: inline-block; border: 0; cursor: pointer;
    background: transparent; color: var(--text-secondary);
    font: inherit; font-size: 15px; font-weight: 600;
    padding: 13px 16px;
}
.tool-btn-quiet:hover { color: var(--accent); }

.tool-result { display: none; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.tool-result.is-live { display: block; }
.tool-result .big {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(34px, 6vw, 52px); font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.tool-result p { color: var(--text-secondary); margin-top: 8px; }

.tool-note { margin-top: 16px; font-size: 14px; color: var(--text-secondary); }

/* The counter's milestone ladder: reached rungs lit, the next one rimmed. */
.tool-result ol { list-style: none; margin: 14px 0 0; display: grid; gap: 8px; }
.tool-result ol li {
    padding: 10px 14px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.tool-result ol li.is-on {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--text-primary);
}
.tool-result ol li.is-next {
    border-color: var(--accent);
    color: var(--text-primary);
}

/* The test's question groups: the fieldset is semantics, not chrome. */
.tool-panel fieldset { border: 0; padding: 0; margin: 20px 0 0; }
.tool-panel legend {
    padding: 0; margin-bottom: 2px;
    font-weight: 600; font-size: 16px; color: var(--text-primary);
}

/* The test's answer rows. The native radio stays for the keyboard and the
   screen reader; the pill is what the eye gets. */
.scale-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.scale-opt { position: relative; }
.scale-opt input[type="radio"] {
    position: absolute; opacity: 0; inset: 0;
    width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.scale-opt {
    cursor: pointer;
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--text-secondary);
    font: inherit; font-size: 14px;
    padding: 8px 14px;
}
.scale-opt:hover { border-color: var(--accent); }
.scale-opt.is-on {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--text-primary);
}

/* The November grid. */
.nnn-grid {
    margin-top: 18px;
    display: grid; gap: 8px;
    grid-template-columns: repeat(6, 1fr);
}
.nnn-day {
    cursor: pointer;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
}
.nnn-day.is-held {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--text-primary);
}

/* FAQ + citations. */
.faq { margin-top: 44px; }
.faq h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 24px; font-weight: 600;
}
.faq h3 { margin-top: 22px; font-size: 17px; font-weight: 600; }
.faq p { margin-top: 6px; color: var(--text-secondary); max-width: 70ch; }

.cite { margin-top: 28px; font-size: 13.5px; color: var(--text-tertiary); line-height: 1.7; }
.cite a { color: var(--text-tertiary); text-decoration: underline; }
.cite a:hover { color: var(--accent); }

/* --------------------------------------------------- W1: the timeline     */

.tl { margin-top: 34px; position: relative; }
.tl::before {
    content: ''; position: absolute; left: 34px; top: 8px; bottom: 8px;
    width: 2px; background: var(--hairline);
}
.tl-item {
    position: relative;
    padding: 0 0 34px 92px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-mark {
    position: absolute; left: 0; top: 0;
    width: 68px; height: 68px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--surface);
    border: 2px solid var(--tl-hue, var(--accent));
    border-radius: 50%;
    z-index: 1;
}
.tl-mark .d { font-size: 10px; letter-spacing: 1px; color: var(--text-tertiary); }
.tl-mark .n {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px; font-weight: 700; line-height: 1;
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.tl-item h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px; font-weight: 600; letter-spacing: -0.2px;
    padding-top: 6px;
}
.tl-item p { margin-top: 8px; color: var(--text-secondary); max-width: 62ch; }

.chip {
    display: inline-block; vertical-align: 1px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
    padding: 2px 8px; margin: 0 4px 0 2px;
    border-radius: 999px;
    border: 1px solid var(--hairline-bright);
    color: var(--text-tertiary);
}
.chip.sourced { color: var(--accent); border-color: var(--accent); }
.chip.reported { color: var(--phase-early); border-color: var(--phase-early); }

.tl-item.is-past .tl-mark { background: var(--accent-dim); }
.tl-item.is-here .tl-mark { box-shadow: 0 0 28px var(--accent-glow); }
.tl-item.is-here h3::after {
    content: 'you are around here';
    display: inline-block; margin-left: 10px; vertical-align: 2px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--accent);
}
.tl-item.y1 .tl-mark { border-color: var(--phase-gold); }

/* ------------------------------------------------------------ legal pages */

.legal { padding: 56px 0 0; }
.legal .wrap { max-width: var(--wrap-legal); }

.legal h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: clamp(30px, 5vw, 42px);
    letter-spacing: -0.4px;
}

.updated { margin-top: 8px; color: var(--text-tertiary); font-size: 14px; }

.card {
    margin-top: 28px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 32px 30px;
}

.lede {
    color: var(--text-secondary);
    padding-bottom: 26px;
    border-bottom: 1px solid var(--hairline);
}

.section { margin-top: 32px; }

.section h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px; font-weight: 600; letter-spacing: -0.2px;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
}
.section h3 {
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    margin-top: 20px; margin-bottom: 6px;
}
.section p { color: var(--text-secondary); margin-top: 10px; }
.section p:first-of-type { margin-top: 0; }
.section ul { margin: 12px 0 0 22px; color: var(--text-secondary); }
.section li { margin-bottom: 8px; }
.section strong { color: var(--text-primary); font-weight: 600; }

/* The event list — the four recovery events and the three app-mechanics ones,
   set as data because that is what they are. */
.events { margin-top: 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.event-row {
    display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline);
}
.event-row:last-child { border-bottom: 0; }
.event-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px; color: var(--accent);
}
.event-what { color: var(--text-secondary); font-size: 15px; }

.note {
    margin-top: 18px; padding: 16px 18px;
    background: var(--surface-raised);
    border-left: 2px solid var(--accent);
    border-radius: var(--r-sm);
    color: var(--text-secondary); font-size: 15px;
}

/* -------------------------------------------------------------- support   */

.support-actions { display: grid; gap: 14px; margin-top: 22px; }

.action {
    display: block;
    background: var(--surface-raised);
    border: 1px solid var(--hairline-bright);
    border-radius: var(--r-md);
    padding: 18px 20px;
    color: var(--text-primary);
}
.action:hover { border-color: var(--accent); text-decoration: none; }
.action .action-title { font-weight: 600; color: var(--accent); }
.action .action-body { color: var(--text-secondary); font-size: 15px; margin-top: 4px; }

.mail-cta {
    display: inline-block; margin-top: 20px;
    background: var(--accent); color: var(--bg);
    font-weight: 700; font-size: 16px;
    padding: 14px 26px; border-radius: var(--r-sm);
    box-shadow: 0 0 30px var(--accent-glow);
}
.mail-cta:hover { text-decoration: none; }

/* --------------------------------------------------- W2: articles         */

/* The reading column. Same measure as the legal pages, because the job is the
   same job: long prose somebody has to get through. */
.art { padding: 10px 0 0; }
.art .wrap { max-width: var(--wrap-legal); }

.art h1 {
    margin-top: 18px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: clamp(30px, 5vw, 40px);
    line-height: 1.15; letter-spacing: -0.02em;
}

.art-meta {
    margin-top: 12px;
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 14px; color: var(--text-tertiary);
}

.art-intro { margin-top: 16px; color: var(--text-secondary); }
.art-intro p + p { margin-top: 10px; }

/* The rendered markdown. Every rule here exists because CommonMark emits the
   tag; nothing is styled speculatively. */
.art-body { margin-top: 30px; }

.art-body h2 {
    margin-top: 40px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: 25px; line-height: 1.25;
    letter-spacing: -0.01em;
}
.art-body h3 { margin-top: 26px; font-size: 18px; font-weight: 600; }
.art-body p { margin-top: 14px; color: var(--text-secondary); }
.art-body ul, .art-body ol { margin: 14px 0 0 22px; color: var(--text-secondary); }
.art-body li { margin-bottom: 8px; }
.art-body li > ul, .art-body li > ol { margin-top: 8px; }
.art-body strong { color: var(--text-primary); font-weight: 600; }
.art-body a { text-decoration: underline; text-underline-offset: 3px; }

.art-body blockquote {
    margin-top: 18px; padding: 2px 0 2px 18px;
    border-left: 2px solid var(--accent);
    color: var(--text-secondary);
}

.art-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--hairline); }

.art-body table {
    margin-top: 18px; width: 100%;
    border-collapse: collapse; font-size: 15px;
}
.art-body th, .art-body td {
    padding: 10px 12px; text-align: left;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-secondary); vertical-align: top;
}
.art-body th { color: var(--text-primary); font-weight: 600; }

.art-body code {
    padding: 1px 6px; border-radius: 6px;
    background: var(--surface); font-size: 15px;
}

/* Citations, styled as citations. The tool pages already have this voice —
   small, quiet, underlined links — so the articles borrow it. */
.sources {
    margin-top: 44px; padding-top: 24px;
    border-top: 1px solid var(--hairline);
}
.sources h2 {
    font-size: 13px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--text-tertiary);
}
.sources p, .sources li {
    margin-top: 10px; font-size: 13.5px; line-height: 1.7;
    color: var(--text-tertiary);
}
.sources ul, .sources ol { margin: 6px 0 0 20px; }
.sources a { color: var(--text-tertiary); text-decoration: underline; overflow-wrap: anywhere; }
.sources a:hover { color: var(--accent); }

/* One list shape for "Read next", "Further reading" and a hub's own children,
   so the three read as one site. */
.reading { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.reading h2 {
    font-size: 13px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--text-tertiary);
}
.reading ul { list-style: none; margin-top: 16px; display: grid; gap: 14px; }
.reading li a { font-weight: 600; }
.reading .reading-line {
    display: block; margin-top: 3px;
    color: var(--text-secondary); font-size: 14.5px; line-height: 1.55;
}
.reading-note { margin-top: 16px; font-size: 14px; color: var(--text-tertiary); }

.art-tools { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.art-tools h2 {
    font-size: 13px; font-weight: 600; letter-spacing: 0.8px;
    text-transform: uppercase; color: var(--text-tertiary);
}
.art-tools .tool-cards { grid-template-columns: repeat(2, 1fr); }

.art-app {
    margin-top: 40px; padding-top: 22px;
    border-top: 1px solid var(--hairline);
    font-size: 15px; color: var(--text-tertiary);
}

/* The index: five sections, each a hub and its children. */
.idx-pillar { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.idx-pillar h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600; font-size: 23px; letter-spacing: -0.01em;
}
.idx-pillar h2 a { color: var(--text-primary); }
.idx-pillar h2 a:hover { color: var(--accent); text-decoration: none; }
.idx-line { margin-top: 6px; color: var(--text-secondary); font-size: 15px; }

.idx-list { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.idx-list li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.idx-mins { flex: 0 0 auto; font-size: 13px; color: var(--text-tertiary); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 640px) {
    body { font-size: 16px; }
    .wrap { padding: 0 18px; }
    .hero { padding-top: 48px; }
    .hero h1 { max-width: 100%; }
    .head-nav { gap: 14px; font-size: 14px; }
    .card { padding: 24px 20px; }
    .badge { min-width: 0; flex: 1 1 100%; }
    .ladder-marks { font-size: 11px; }
    .feature { padding: 20px; }
    .shots-row { grid-template-columns: 1fr; gap: 28px; }
    .shot-frame img { max-width: 320px; margin: 0 auto; }
    .hero-grid { grid-template-columns: 1fr; gap: 8px; }
    .hero-water { min-height: 500px; margin-top: 12px; }
    .beats { grid-template-columns: 1fr; gap: 36px; }
    .statement { padding: 72px 0 56px; }
    .tool-cards { grid-template-columns: 1fr; }
    .beat { grid-template-columns: 40px 1fr; padding: 20px; }
    .beat-n { font-size: 26px; }
    .nnn-grid { grid-template-columns: repeat(5, 1fr); }
    .tl::before { left: 24px; }
    .tl-item { padding-left: 68px; }
    .tl-mark { width: 48px; height: 48px; }
    .tl-mark .n { font-size: 16px; }
    .tl-mark .d { display: none; }
    .art-tools .tool-cards { grid-template-columns: 1fr; }
    .idx-list li { flex-wrap: wrap; gap: 2px 12px; }
}

@media (min-width: 641px) and (max-width: 900px) {
    .shots-row { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .tool-cards { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

.shots-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .shots-pair { grid-template-columns: 1fr; } }