/* Randori — "The Ink Record"
   Sumi ink on washi. Dark-first, because ink is the ground and the mat is
   dim; light mode is real paper, not an inverted screen.

   THE THESIS: the accent is the BELT, and it TRAVELS. As the page
   descends, the accent walks the athlete's actual journey — white, blue,
   purple, brown, and the black belt's red bar. The app's spine is a rank
   that advances; so is the page's.

   MOTION VOCABULARY: grappling is flow, then lock. Ink DRAWS (stroke
   dashoffset), paper SETTLES (soft rise), a submission LOCKS (snap with
   the smallest overshoot). Nothing bounces for fun. Every animation has
   a reduced-motion answer. */

/* The accent must interpolate, not snap, as the belt advances — so it is
   a registered custom property, not a plain variable. */
@property --accent {
    syntax: '<color>';
    inherits: true;
    initial-value: #EFE4CE;
}
@property --accent-soft {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(239, 228, 206, 0.12);
}

:root {
    /* Ink ground */
    --ink: #0B0A09;
    --ink-surface: #15130F;
    --ink-surface-2: #1D1A15;
    --paper: #F2EBDD;
    --muted: #A2988A;
    --rule: #2A251E;
    --shadow: rgba(0, 0, 0, .55);

    --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'New York', 'Iowan Old Style', Palatino, 'Palatino Linotype', Georgia, serif;
    --font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', 'Fira Code', Consolas, monospace;

    /* Flow, then lock */
    --ease-flow: cubic-bezier(.22, .61, .36, 1);
    --ease-lock: cubic-bezier(.2, 1.5, .3, 1);

    --accent: #EFE4CE;
    --accent-soft: rgba(239, 228, 206, .12);
    --accent-ink: #0B0A09;

    --bs-body-bg: var(--ink);
    --bs-body-color: var(--paper);
    --bs-link-color: var(--accent);

    /* Heart rate is Apple's system red, the same tint the app's live pulse
       wears (Kit941.Status.danger). It never travels with the accent: a
       heartbeat is not a belt. */
    --hr: #FF453A;

    /* The belt walk, lifted off the app's own cloth (design/belts/*.svg:
       blue #2344D9, purple #7531FF, brown #875D3E, black #1B1B1B) to the
       contrast a dark page needs. The black belt wears its red bar, which
       is true to the cloth and the only honest way to show black on
       black. */
    --belt-white: #EFE4CE;
    --belt-blue: #4A76E8;
    --belt-purple: #9A6BFF;
    --belt-brown: #C08B5C;
    --belt-black: #E0483C;

    transition: --accent 1.1s var(--ease-flow), --accent-soft 1.1s var(--ease-flow);
}

:root[data-theme="light"] {
    --ink: #F4EFE4;
    --ink-surface: #FCFAF4;
    --ink-surface-2: #EBE4D5;
    --paper: #191612;
    --muted: #6A6053;
    --rule: #DCD2BE;
    --shadow: rgba(60, 48, 30, .16);
    --accent-ink: #FCFAF4;

    --hr: #FF3B30;

    /* Washi steps: the app's cloth, darkened enough to carry text on paper. */
    --belt-white: #8A7340;
    --belt-blue: #2344D9;
    --belt-purple: #6231D8;
    --belt-brown: #875D3E;
    --belt-black: #C0332A;
}

/* The belt sections drive the accent. */
:root[data-belt="white"]  { --accent: var(--belt-white);  --accent-soft: color-mix(in srgb, var(--belt-white) 13%, transparent); }
:root[data-belt="blue"]   { --accent: var(--belt-blue);   --accent-soft: color-mix(in srgb, var(--belt-blue) 14%, transparent); }
:root[data-belt="purple"] { --accent: var(--belt-purple); --accent-soft: color-mix(in srgb, var(--belt-purple) 14%, transparent); }
:root[data-belt="brown"]  { --accent: var(--belt-brown);  --accent-soft: color-mix(in srgb, var(--belt-brown) 15%, transparent); }
:root[data-belt="black"]  { --accent: var(--belt-black);  --accent-soft: color-mix(in srgb, var(--belt-black) 14%, transparent); }

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-primary);
    background-color: var(--ink);
    color: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color .3s ease, color .3s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); opacity: .82; }
::selection { background: var(--accent); color: var(--accent-ink); }

.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.skip-link {
    position: absolute; top: 8px; left: 8px; z-index: 2000;
    background: var(--accent); color: var(--accent-ink);
    padding: .5rem .75rem; border-radius: 8px; font-weight: 600;
}

/* ---------- Reveal: paper settles ---------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ease-flow), transform .8s var(--ease-flow);
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
}
[data-reveal].in-view { opacity: 1; transform: none; }

.scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: var(--accent);
    box-shadow: 0 0 14px var(--accent-soft);
    z-index: 3000; pointer-events: none;
    transition: background-color .6s var(--ease-flow);
}

/* ---------- Navbar ---------- */

.navbar {
    background: color-mix(in srgb, var(--ink) 84%, transparent);
    backdrop-filter: saturate(150%) blur(16px);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    border-bottom: 1px solid var(--rule);
}
.navbar-brand {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 700; letter-spacing: -0.015em; color: var(--paper) !important;
}
.brand-img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.navbar .nav-link { color: var(--muted); font-weight: 500; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--paper); }
.navbar-toggler { border-color: var(--rule); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(162,152,138,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.theme-toggle {
    background: transparent; border: 1px solid var(--rule);
    border-radius: 10px; color: var(--muted);
    width: 38px; height: 38px; display: inline-flex;
    align-items: center; justify-content: center;
}
.theme-toggle:hover { color: var(--paper); border-color: var(--muted); }
:root[data-theme="light"] .theme-icon-light { display: none; }
:root:not([data-theme="light"]) .theme-icon-dark { display: none; }

/* ---------- Buttons ---------- */

.btn-randori {
    background: var(--accent); border: none; color: var(--accent-ink);
    font-weight: 700; padding: .85rem 1.75rem; border-radius: 12px;
    transition: transform .12s var(--ease-flow), box-shadow .3s ease, background-color 1.1s var(--ease-flow);
    box-shadow: 0 8px 26px var(--accent-soft);
}
.btn-randori:hover {
    color: var(--accent-ink); transform: translateY(-2px);
    box-shadow: 0 14px 38px var(--accent-soft);
}
.btn-randori:active { transform: translateY(1px); }

.btn-ghost {
    background: transparent; border: 1px solid var(--rule);
    color: var(--paper); font-weight: 600;
    padding: .85rem 1.75rem; border-radius: 12px;
    transition: border-color .2s ease, background-color .2s ease, transform .12s var(--ease-flow);
}
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--paper); }
.btn-ghost:active { transform: translateY(1px); }

/* ---------- Hero ---------- */

.hero {
    padding: 8rem 0 5rem;
    position: relative; overflow: hidden;
    min-height: 92vh; display: flex; align-items: center;
}

/* Washi tooth: a barely-there fibre grain, masked toward the headline. */
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        repeating-linear-gradient(115deg, transparent 0 3px, color-mix(in srgb, var(--paper) 4%, transparent) 3px 4px),
        repeating-linear-gradient(22deg, transparent 0 5px, color-mix(in srgb, var(--paper) 3%, transparent) 5px 6px);
    opacity: .5;
    -webkit-mask-image: radial-gradient(80% 76% at 26% 26%, black, transparent 74%);
    mask-image: radial-gradient(80% 76% at 26% 26%, black, transparent 74%);
}

/* The 乱 that appears exactly once outside the icon. */
.hero-kanji {
    position: absolute; right: -1%; top: 50%;
    transform: translateY(-52%);
    font-family: var(--font-serif);
    font-size: clamp(230px, 34vw, 520px); line-height: .8;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 22%, transparent);
    opacity: .55; pointer-events: none; user-select: none;
    animation: kanji-breathe 30s ease-in-out infinite alternate;
    z-index: 0;
}
@keyframes kanji-breathe {
    from { transform: translateY(-54%) rotate(-.6deg); }
    to { transform: translateY(-49%) rotate(.4deg); }
}

.hero .container { position: relative; z-index: 1; }

.hero h1 {
    font-size: clamp(2.7rem, 6.2vw, 4.9rem);
    font-weight: 800; letter-spacing: -0.038em; line-height: 1.02;
}
.hero h1 .accent { color: var(--accent); transition: color 1.1s var(--ease-flow); }
/* The headline WRAPS on its own. Forced line spans produced orphans at
   the widths between breakpoints, so the whole line rises as one and the
   accent stays inline, colouring words rather than owning a row. */
.hero h1 {
    opacity: 0; transform: translateY(28px);
    animation: rise .9s var(--ease-flow) .05s forwards;
    text-wrap: balance;
}
@keyframes rise { to { opacity: 1; transform: none; } }

.hero .lead-copy {
    color: var(--muted); font-size: 1.16rem; max-width: 34rem;
    opacity: 0; animation: rise .9s var(--ease-flow) .34s forwards;
}
.hero-actions { opacity: 0; animation: rise .9s var(--ease-flow) .48s forwards; }
.hero-meta { opacity: 0; animation: rise .9s var(--ease-flow) .6s forwards; }

.platform-row {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    color: var(--muted); font-size: .82rem; font-weight: 600;
    align-items: flex-end;
    opacity: 0; animation: rise .9s var(--ease-flow) .74s forwards;
}
.platform-row svg { display: block; margin: 0 auto .35rem; }
.platform-row .platform { text-align: center; transition: color .2s ease, transform .25s var(--ease-lock); }
.platform-row .platform:hover { color: var(--paper); transform: translateY(-3px); }
.platform-row .platform:hover svg { color: var(--accent); }

/* ---------- Set piece: the live session card ---------- */

.session-card {
    background: var(--ink-surface);
    border: 1px solid var(--rule);
    border-radius: 22px;
    box-shadow: 0 30px 80px var(--shadow);
    padding: 1.5rem 1.6rem 1.3rem;
    max-width: 430px; width: 100%;
    position: relative; z-index: 1;
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
    transition: transform .6s var(--ease-flow), box-shadow .6s ease;
}
.session-card:hover {
    transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-5px);
    box-shadow: 0 38px 96px var(--shadow);
}

.session-card__head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: .85rem; border-bottom: 1px solid var(--rule);
}
.session-card__title { font-weight: 700; letter-spacing: -0.01em; }
.session-card__live {
    font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
    letter-spacing: .12em; color: var(--accent);
    display: inline-flex; align-items: center; gap: .4rem;
}
.session-card__live i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); animation: live-pulse 2.2s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.82); }
}

.session-clock {
    font-family: var(--font-mono); font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.1rem); letter-spacing: -0.03em;
    margin: .9rem 0 .2rem; line-height: 1;
}
.session-clock small { font-size: .42em; color: var(--muted); font-weight: 600; letter-spacing: .06em; }

/* The heart-rate trace: ink drawing itself across the card. */
.trace { display: block; width: 100%; height: 78px; margin: .5rem 0 .3rem; overflow: visible; }
/* pathLength="100" normalizes the geometry, so the draw finishes exactly
   when the animation does — no dead tail. The line is HR red, fixed: in
   the app a heartbeat is always red, so it does not follow the belt. */
.trace__line {
    fill: none; stroke: var(--hr); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 100; stroke-dashoffset: 100;
}
.in-view .trace__line { animation: draw 2.6s var(--ease-flow) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.trace__fill { fill: var(--hr); opacity: 0; }
.in-view .trace__fill { animation: bleed 1.4s var(--ease-flow) 2.1s forwards; }
@keyframes bleed { to { opacity: .13; } }

/* The line arrives and STOPS. No transform, no pulse: an SVG transform
   scales from the user-space origin, which read as the dot sliding left
   and back, and a heartbeat that wanders is worse than one that rests.
   Only the radius breathes, once, as it lands. */
.trace__dot { fill: var(--hr); opacity: 0; }
.in-view .trace__dot { animation: dot-land .55s var(--ease-flow) 2.55s forwards; }
@keyframes dot-land {
    0% { opacity: 0; r: 9; }
    60% { opacity: 1; r: 4; }
    100% { opacity: 1; r: 4.5; }
}

.session-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .8rem; margin-top: .9rem;
}
.stat {
    background: var(--ink-surface-2); border-radius: 12px;
    padding: .7rem .8rem;
    opacity: 0; transform: translateY(12px);
}
.in-view .stat { animation: rise .6s var(--ease-lock) forwards; animation-delay: var(--d, 0s); }
.stat__label {
    font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
    letter-spacing: .12em; color: var(--muted); text-transform: uppercase;
}
.stat__value {
    font-family: var(--font-mono); font-weight: 700; font-size: 1.32rem;
    letter-spacing: -0.02em; margin-top: .18rem;
}
.stat__value em { font-style: normal; font-size: .62em; color: var(--muted); margin-left: .12em; }
.stat--hr .stat__value { color: var(--hr); }
.stat--hr .stat__label { color: var(--hr); opacity: .8; }

.effort-bar {
    height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--paper) 10%, transparent);
    margin-top: .5rem; overflow: hidden;
}
.effort-bar i {
    display: block; height: 100%; border-radius: 99px;
    background: var(--accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform 1.5s var(--ease-flow) 1s, background-color 1.1s var(--ease-flow);
}
.in-view .effort-bar i { transform: scaleX(var(--fill, .74)); }

.session-card__foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--rule);
    color: var(--muted); font-size: .82rem;
}
.health-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--accent); font-weight: 600; font-size: .8rem;
    opacity: 0;
}
.in-view .health-chip { animation: rise .6s var(--ease-lock) 3.1s forwards; }

/* ---------- Sections ---------- */

.section { padding: 6.5rem 0; position: relative; }
.section--alt { background: var(--ink-surface); border-block: 1px solid var(--rule); }
section[id] { scroll-margin-top: 84px; }

.section-kicker {
    font-family: var(--font-mono); font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .2em; color: var(--accent);
    display: flex; align-items: center; gap: .7rem;
    transition: color 1.1s var(--ease-flow);
}
.section-kicker::before {
    content: ""; width: 26px; height: 1px; background: var(--accent);
    transition: background-color 1.1s var(--ease-flow);
}
.section h2 {
    font-weight: 800; letter-spacing: -0.03em;
    font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.06;
}
.section h2 .accent { color: var(--accent); transition: color 1.1s var(--ease-flow); }
/* The plain statement of what the app is, one line per thing you get. */
.section h2.stack span { display: block; }
.section h2.stack { line-height: 1.14; }
.section .section-sub { color: var(--muted); max-width: 38rem; font-size: 1.06rem; }

.band { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.band--flip .band__stage { order: -1; }
@media (max-width: 991px) {
    .band { grid-template-columns: 1fr; gap: 2.75rem; }
    .band--flip .band__stage { order: 0; }
}

.point-list { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.point-list li {
    color: var(--muted); font-size: .98rem;
    padding-left: 1.5rem; position: relative; margin-bottom: .7rem;
}
.point-list li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 8px; height: 2px; background: var(--accent);
    transition: background-color 1.1s var(--ease-flow);
}
.point-list strong { color: var(--paper); font-weight: 650; }

/* ---------- Set piece: Apple Health ring ---------- */

.ring-stage { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.ring { width: 190px; height: 190px; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: color-mix(in srgb, var(--paper) 9%, transparent); stroke-width: 13; }
.ring__value {
    fill: none; stroke: var(--accent); stroke-width: 13; stroke-linecap: round;
    stroke-dasharray: 100; stroke-dashoffset: 100;
    transition: stroke 1.1s var(--ease-flow);
}
.in-view .ring__value { animation: ring-close 2s var(--ease-flow) .35s forwards; }
@keyframes ring-close { to { stroke-dashoffset: 22; } }
.ring-wrap { position: relative; display: inline-flex; }
.ring-wrap figcaption {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
}
.ring-wrap .num { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.ring-wrap span { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }

/* ---------- Set piece: the card exchange ---------- */

.exchange { position: relative; min-height: 330px; display: grid; place-items: center; }
.mini-card {
    width: 208px; background: var(--ink-surface-2);
    border: 1px solid var(--rule); border-radius: 16px;
    padding: 1rem 1.05rem; box-shadow: 0 20px 50px var(--shadow);
    position: absolute; top: 12px;
}
.mini-card--a { left: 2%; transform: translateX(-28px) rotate(-7deg); opacity: 0; }
.mini-card--b { right: 2%; transform: translateX(28px) rotate(7deg); opacity: 0; }
.in-view .mini-card--a { animation: slide-meet-l 1.1s var(--ease-flow) .2s forwards; }
.in-view .mini-card--b { animation: slide-meet-r 1.1s var(--ease-flow) .2s forwards; }
@keyframes slide-meet-l { to { opacity: 1; transform: translateX(24px) rotate(-4deg); } }
@keyframes slide-meet-r { to { opacity: 1; transform: translateX(-24px) rotate(4deg); } }

.mini-card__belt { height: 6px; border-radius: 99px; margin-bottom: .7rem; }
.mini-card__name { font-weight: 700; font-size: .95rem; }
.mini-card__meta { color: var(--muted); font-size: .78rem; margin-top: .1rem; }
.mini-card__hours {
    font-family: var(--font-mono); font-size: .74rem; color: var(--accent);
    margin-top: .55rem; letter-spacing: .04em;
    transition: color 1.1s var(--ease-flow);
}
.mini-card__check {
    position: absolute; top: -9px; right: -9px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(2.2);
}
.in-view .mini-card__check { animation: lock-in .5s var(--ease-lock) 1.2s forwards; }
@keyframes lock-in { to { opacity: 1; transform: scale(1); } }

/* The consented post lands under the handshake. */
.feed-post {
    position: absolute; bottom: 0; left: 50%;
    width: min(320px, 92%); transform: translateX(-50%) translateY(18px);
    background: var(--ink-surface); border: 1px solid var(--rule);
    border-radius: 16px; padding: .9rem 1rem;
    box-shadow: 0 24px 60px var(--shadow); opacity: 0;
}
.in-view .feed-post { animation: settle .8s var(--ease-flow) 1.5s forwards; }
@keyframes settle { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.feed-post__author { font-weight: 650; font-size: .88rem; }
.feed-post__body { color: var(--muted); font-size: .84rem; margin-top: .25rem; }
.feed-post__oss {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .6rem; color: var(--accent); font-size: .8rem; font-weight: 650;
    opacity: 0; transform: scale(.6);
}
.in-view .feed-post__oss { animation: lock-in .45s var(--ease-lock) 2.3s forwards; }

/* ---------- Set piece: note → suggestion ---------- */

.composer {
    background: var(--ink-surface); border: 1px solid var(--rule);
    border-radius: 18px; padding: 1.2rem 1.3rem 1.1rem;
    box-shadow: 0 26px 66px var(--shadow); max-width: 430px; width: 100%;
}
.composer__label {
    font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
    letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
}
.composer__field {
    margin-top: .55rem; padding: .85rem .9rem; min-height: 84px;
    background: var(--ink-surface-2); border-radius: 12px;
    border: 1px solid var(--rule);
    font-size: .96rem; line-height: 1.5;
}
.composer__field .caret {
    display: inline-block; width: 2px; height: 1.05em;
    background: var(--accent); vertical-align: text-bottom;
    animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.suggest-label {
    font-family: var(--font-mono); font-size: .64rem; font-weight: 700;
    letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
    margin-top: 1rem; opacity: 0; transition: opacity .5s var(--ease-flow);
}
.suggest-label.on { opacity: 1; }

.lesson-chip {
    display: flex; align-items: center; gap: .75rem;
    margin-top: .5rem; padding: .7rem .85rem;
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    border-radius: 12px;
    opacity: 0; transform: translateY(14px) scale(.96);
    transition: opacity .55s var(--ease-lock), transform .55s var(--ease-lock),
                background-color 1.1s var(--ease-flow), border-color 1.1s var(--ease-flow);
}
.lesson-chip.on { opacity: 1; transform: none; }
.lesson-chip__play {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.lesson-chip__name { font-weight: 650; font-size: .92rem; }
.lesson-chip__meta { color: var(--muted); font-size: .76rem; }

.on-device {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: .85rem; font-size: .78rem; color: var(--muted);
}
.on-device svg { color: var(--accent); }

/* ---------- Set piece: the belt road ----------
   The app's own tied-belt drawings (design/belts/*.svg), one per rank the
   athlete earned, arriving in order. No overlap and no dimming: every belt
   here was actually tied, so every belt reads at full strength. The belt
   NOT yet earned is not drawn at all — it is a dashed slot with a date,
   which cannot be mistaken for cloth already in hand. */

.road { display: flex; flex-direction: column; gap: 1rem; max-width: 330px; }
.road-rung { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem; gap: .9rem; align-items: center; }

.road-belt {
    min-width: 0;
    opacity: 0; transform: translateX(-20px);
    transition: opacity .8s var(--ease-flow), transform .8s var(--ease-flow);
    transition-delay: var(--d, 0s);
}
.road-belt img { display: block; width: 100%; height: auto; }
.in-view .road-belt { opacity: 1; transform: none; }

.road-rung__meta {
    opacity: 0; transition: opacity .7s var(--ease-flow); transition-delay: var(--d, 0s);
}
.in-view .road-rung__meta { opacity: 1; }
.road-rung__name {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    display: block;
}
.road-rung__when { font-family: var(--font-mono); font-size: .82rem; color: var(--paper); white-space: nowrap; }
.road-rung--now .road-rung__name,
.road-rung--now .road-rung__when { color: var(--accent); transition: color 1.1s var(--ease-flow); }

/* What comes next: a dashed slot, not a ghost belt. */
.road-next {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    max-width: 330px; margin-top: 1.1rem;
    padding: .7rem .9rem; border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
    transition: border-color 1.1s var(--ease-flow);
}
.road-next__name {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
    transition: color 1.1s var(--ease-flow);
}
.road-next__when { font-family: var(--font-mono); font-size: .82rem; color: var(--accent); transition: color 1.1s var(--ease-flow); }

.estimate-note { font-size: .84rem; color: var(--muted); margin-top: 1rem; max-width: 330px; }

@media (max-width: 991px) {
    .road, .road-next, .estimate-note { margin-inline: auto; }
}

/* ---------- Screenshot rail ---------- */

.shots {
    display: flex; gap: 1.75rem; overflow-x: auto;
    padding: .5rem .25rem 2rem; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* `safe` centre: centred while the row fits, left-aligned once it
       overflows. Plain `center` would push the first phone off the
       scrollable origin, where it can never be reached. */
    justify-content: safe center;
}
/* The rail is scrollable, so it says so: the last phone fades out at the
   right edge rather than being cut off mid-frame. */
.shots-wrap { position: relative; }
.shots-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 2rem; width: 8rem;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--ink-surface));
}
[dir="rtl"] .shots-wrap::after { right: auto; left: 0; transform: scaleX(-1); }
.shots::-webkit-scrollbar { display: none; }
.shot { scroll-snap-align: center; flex: 0 0 auto; text-align: center; }
.phone-frame {
    width: 258px; height: 528px; border-radius: 44px;
    background: #080706; padding: 11px;
    box-shadow: 0 30px 76px var(--shadow), inset 0 0 0 1.5px color-mix(in srgb, var(--paper) 12%, transparent);
    position: relative;
    transition: transform .4s var(--ease-flow);
}
.shot:hover .phone-frame { transform: translateY(-6px); }
.phone-frame::after {
    content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    width: 74px; height: 22px; border-radius: 99px; background: #080706; z-index: 2;
}
.phone-screen {
    width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
    background: var(--ink-surface);
    display: flex; align-items: center; justify-content: center;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-screen .pending {
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
    color: var(--muted); text-transform: uppercase; padding: 1.5rem; text-align: center;
}
.shot figcaption { margin-top: .9rem; font-size: .86rem; color: var(--muted); font-weight: 600; }

/* ---------- Honesty strip ---------- */

.honesty {
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 14px 14px 0;
    padding: 1.3rem 1.5rem; font-size: 1.02rem;
    transition: border-color 1.1s var(--ease-flow), background-color 1.1s var(--ease-flow);
}
.honesty strong { font-weight: 700; }
.refusals { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.refusal {
    font-family: var(--font-mono); font-size: .76rem; font-weight: 600;
    padding: .42rem .8rem; border-radius: 99px;
    border: 1px solid var(--rule); color: var(--muted);
    transition: border-color .2s ease, color .2s ease;
}
.refusal:hover { border-color: var(--accent); color: var(--paper); }

/* ---------- Closing CTA ---------- */

.closer { text-align: center; padding: 7rem 0 8rem; position: relative; overflow: hidden; }
.closer h2 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
.closer .seal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; border-radius: 12px;
    background: var(--accent); color: var(--accent-ink);
    font-family: var(--font-serif); font-size: 2rem; font-weight: 700;
    margin-bottom: 1.6rem; transform: rotate(-4deg);
    box-shadow: 0 14px 38px var(--accent-soft);
    transition: background-color 1.1s var(--ease-flow);
}

/* ---------- Footer ---------- */

.footer {
    background: var(--ink-surface); border-top: 1px solid var(--rule);
    padding: 3.5rem 0 2rem; color: var(--muted); font-size: .94rem;
}
.footer h6 {
    color: var(--paper); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem;
}
.footer a { color: var(--muted); }
.footer a:hover { color: var(--accent); }
.footer hr { border-color: var(--rule); opacity: 1; }
.footer__copy { color: color-mix(in srgb, var(--paper) 78%, var(--ink-surface)); }

/* ---------- Prose pages ---------- */

.prose { max-width: 46rem; }
.prose h1 { font-weight: 800; letter-spacing: -0.025em; }
.prose h2 { font-weight: 700; font-size: 1.32rem; margin-top: 2.3rem; }
.prose p, .prose li { color: var(--muted); line-height: 1.75; }
.prose strong { color: var(--paper); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    .hero { padding: 5.5rem 0 3.5rem; min-height: 0; }
    .session-card { margin-top: 3rem; transform: none; }
    .hero-kanji { font-size: 260px; opacity: .3; right: -12%; }
    .section { padding: 4.5rem 0; }
    .exchange { min-height: 400px; }
    .mini-card { width: 178px; }
}
@media (max-width: 575px) {
    .session-stats { grid-template-columns: 1fr 1fr; }
    .stat--effort { grid-column: span 2; }
    .mini-card--a, .mini-card--b { position: static; transform: none; opacity: 1; margin-bottom: .9rem; width: 100%; }
    .in-view .mini-card--a, .in-view .mini-card--b { animation: none; opacity: 1; transform: none; }
    .exchange { display: block; min-height: 0; }
    .feed-post { position: static; width: 100%; transform: none; opacity: 1; }
    .in-view .feed-post { animation: none; transform: none; }
}

/* ---------- Reduced motion: everything resolves, nothing moves ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    :root { transition: none; }
    .hero h1, .hero .lead-copy, .hero-actions, .hero-meta, .platform-row,
    .stat, .health-chip, .mini-card--a, .mini-card--b, .mini-card__check,
    .feed-post, .feed-post__oss, .road-belt, .road-rung__meta {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
    .road-belt, .road-rung__meta { transition: none; }
    .trace__dot { opacity: 1; r: 4.5; animation: none; }
    .mini-card--a { transform: rotate(-4deg) !important; }
    .mini-card--b { transform: rotate(4deg) !important; }
    .feed-post { transform: translateX(-50%) !important; }
    .hero-kanji, .session-card__live i, .trace__dot { animation: none; }
    .trace__line { stroke-dashoffset: 0; animation: none; }
    .trace__dot { opacity: 1; animation: none; }
    .trace__fill { opacity: .13; animation: none; }
    .ring__value { stroke-dashoffset: 22; animation: none; }
    .effort-bar i { transform: scaleX(var(--fill, 1)); transition: none; }
    .session-card { transform: none; }
    .composer__field .caret { animation: none; }
    .lesson-chip, .suggest-label { transition: none; }
}

/* ---------- Language picker ---------- */

.lang-btn {
    background: transparent; border: 0; color: var(--muted);
    font-weight: 500; font-size: 1rem; padding: .5rem 0;
}
.lang-btn:hover, .lang-btn:focus { color: var(--paper); }
.lang-menu {
    background: var(--ink-surface); border: 1px solid var(--rule);
    border-radius: 12px; padding: .4rem; min-width: 12rem;
    box-shadow: 0 20px 50px var(--shadow);
}
.lang-menu .dropdown-item {
    color: var(--muted); border-radius: 8px; padding: .45rem .7rem; font-size: .92rem;
}
.lang-menu .dropdown-item:hover, .lang-menu .dropdown-item:focus {
    background: var(--accent-soft); color: var(--paper);
}
.lang-menu .dropdown-item.active {
    background: transparent; color: var(--accent); font-weight: 650;
}

/* Arabic reads right to left: the page mirrors, but the belt road, the
   heart-rate trace, and the session card are DATA — a chart does not
   flip just because the prose does. */
[dir="rtl"] .section-kicker::before { order: 2; }
[dir="rtl"] .point-list li { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .point-list li::before { left: auto; right: 0; }
[dir="rtl"] .honesty { border-left: 0; border-right: 3px solid var(--accent); border-radius: 14px 0 0 14px; }
[dir="rtl"] .estimate-note { text-align: right; }
[dir="rtl"] .trace, [dir="rtl"] .road, [dir="rtl"] .session-card, [dir="rtl"] .ring { direction: ltr; }