/* trymidsole.com — the marketing site's design system.
   Tokens, the shell (header, mobile menu, footer), and the components every
   page shares. Pages add only layout of their own (home.css). Public closet
   pages keep their own stylesheet (closet.css) and a simpler shell. */

/* ── Brand type: Satoshi (Indian Type Foundry, credited in the footer) ── */

@font-face { font-family: 'Satoshi'; src: url(/assets/fonts/Satoshi-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url(/assets/fonts/Satoshi-Italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url(/assets/fonts/Satoshi-Medium.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url(/assets/fonts/Satoshi-Bold.woff2) format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url(/assets/fonts/Satoshi-Black.woff2) format('woff2'); font-weight: 800 900; font-style: normal; font-display: swap; }

/* ── Margin notes and numerals: Caveat and Oswald (SIL Open Font License), self-hosted so no
   visit touches Google's servers. Latin only, like the site. ── */

@font-face { font-family: 'Caveat'; src: url(/assets/fonts/Caveat-SemiBold.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald'; src: url(/assets/fonts/Oswald-Medium.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Tokens ── */

:root {
    /* Colour */
    --bg: #F2EEEA;
    --bg-soft: #F7F4F0;
    --surface: #FFFFFF;
    --ink: #151515;
    --ink-2: #4F4A45;          /* body on --bg: 8.1:1 */
    --ink-3: #6A645E;          /* labels, captions: 5.3:1 on --bg */
    --line: rgba(21, 21, 21, 0.10);
    --line-strong: rgba(21, 21, 21, 0.18);
    --navy: #12357E;           /* the site's blue: bands, headlines, actions */
    --navy-deep: #0C2862;
    --navy-tint: rgba(18, 53, 126, 0.09);
    --yellow: #FDCB04;         /* conversion and marks: ink on it is 12:1 */
    --yellow-hover: #F2BE00;
    --red: #CC2027;            /* the logo's dot: small accents on cream / white only (4.8:1 on --bg, 2.1:1 on navy) */
    --dark: #171512;
    --live: #2E9E5B;
    --care: #C8811A;
    --rest: #3A5BA0;
    --error: #B3261E;

    /* Type */
    --font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-num: 'Oswald', 'Arial Narrow', sans-serif;   /* big step numerals */
    --font-hand: 'Caveat', 'Bradley Hand', cursive;     /* margin notes */
    --fs-hero: clamp(56px, 6.6vw, 104px);
    --fs-statement: clamp(40px, 6.6vw, 92px);
    --fs-h2: clamp(40px, 5.2vw, 68px);
    --fs-h2-sm: clamp(32px, 3.6vw, 48px);
    --fs-h3: clamp(18px, 1.6vw, 22px);
    --fs-lede: clamp(17px, 1.35vw, 19px);
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-label: 12px;
    --measure: 44ch;
    --measure-wide: 60ch;

    /* Space: one scale for gaps, stacks and padding */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;
    --section-y: clamp(80px, 9vw, 136px);
    --section-y-tight: clamp(56px, 6vw, 96px);
    --grid-gap: clamp(40px, 6vw, 88px);

    /* Layout */
    --max: 1280px;
    --gutter: clamp(20px, 4vw, 40px);
    --header-h: 64px;

    /* Shape and depth */
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 24px;
    --shadow-sm: 0 1px 2px rgba(21, 21, 21, 0.05), 0 4px 12px rgba(21, 21, 21, 0.05);
    --shadow: 0 1px 2px rgba(21, 21, 21, 0.05), 0 12px 32px rgba(21, 21, 21, 0.08);
    --shadow-lift: 0 2px 4px rgba(21, 21, 21, 0.06), 0 24px 48px rgba(21, 21, 21, 0.14);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 0.18s;
    --t-base: 0.3s;
    --t-slow: 0.7s;
}

@media (min-width: 960px) {
    :root { --header-h: 72px; }
}

/* ── Base ── */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 6px;
}

.on-dark :focus-visible { outline-color: #fff; }

.skip-link {
    position: absolute;
    left: var(--s-4);
    top: -60px;
    z-index: 100;
    background: var(--navy);
    color: #fff;
    padding: 10px var(--s-4);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: top var(--t-fast) ease;
}
.skip-link:focus { top: var(--s-3); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; }

/* ── Type ── */

.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ink-3);
}

.eyebrow::before {
    content: "";
    flex: none;
    width: 20px;
    height: 2px;
    background: var(--red);
}
.on-dark .eyebrow::before { background: currentColor; opacity: 0.6; }

.display {
    font-size: var(--fs-hero);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.92;
}

.h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.98;
}

.h2--sm {
    font-size: var(--fs-h2-sm);
    letter-spacing: -0.035em;
    line-height: 1.04;
}

.lede {
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: var(--measure);
}

/* Stack rhythm: eyebrow → headline → lede → action */
.eyebrow + .display,
.eyebrow + .h2 { margin-top: var(--s-5); }
.display + .lede { margin-top: var(--s-6); }
.h2 + .lede { margin-top: var(--s-5); }
.lede + .btn,
.lede + .reveal > .btn { margin-top: var(--s-6); }

/* ── Buttons ── */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-fast) var(--ease);
}

.btn svg { flex: none; transition: transform var(--t-base) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-deep); }

.btn--cta { background: var(--yellow); color: var(--ink); }
.btn--cta:hover { background: var(--yellow-hover); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--bg); }

.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

.btn[disabled] { cursor: progress; }

/* ── Header ── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
}

/* The frosted bar is a layer behind the header, never the header itself: a
   backdrop-filter on .site-header would make it the containing block for the
   fixed mobile menu, which then shrinks to the header's height. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(242, 238, 234, 0.9);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
    box-shadow: 0 1px 0 var(--line);
    opacity: 0;
    transition: opacity var(--t-base) ease;
}

.site-header.is-scrolled::before,
.site-header.is-open::before { opacity: 1; }

.site-header .wrap {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s-5);
}

@media (min-width: 960px) {
    .site-header .wrap { grid-template-columns: 1fr auto 1fr; }
}

.wordmark {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    padding: var(--s-2) 0;
    color: #1F2D5A;            /* the logotype's own navy */
    --logo-dot: #CC2027;
    text-decoration: none;
}

.wordmark-svg { display: block; height: 26px; width: auto; }
.wordmark-dot { fill: var(--logo-dot); }
.on-dark .wordmark, .wordmark--light { color: #fff; --logo-dot: var(--yellow); }

.site-nav { display: none; }

.site-nav ul {
    display: flex;
    gap: var(--s-1);
    list-style: none;
}

.site-nav a {
    position: relative;
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--t-fast) ease;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base) var(--ease);
}

.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after,
.site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a[aria-current] { color: var(--ink); }

.header-cta { display: none; justify-self: end; }

.menu-button {
    justify-self: end;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.menu-button span,
.menu-button span::before,
.menu-button span::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform var(--t-base) var(--ease), background var(--t-fast) ease;
}

.menu-button span { position: relative; }
.menu-button span::before,
.menu-button span::after { content: ""; position: absolute; left: 0; }
.menu-button span::before { top: -6px; }
.menu-button span::after { top: 6px; }

.is-open .menu-button span { background: transparent; }
.is-open .menu-button span::before { transform: translateY(6px) rotate(45deg); }
.is-open .menu-button span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--bg);
    padding: var(--s-4) var(--gutter) var(--s-7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-6);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-fast) ease, transform var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}

.is-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--t-fast) ease, transform var(--t-base) var(--ease), visibility 0s;
}

.mobile-menu ul { list-style: none; }
.mobile-menu li + li { border-top: 1px solid var(--line); }

.mobile-menu a:not(.btn) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.mobile-menu a:not(.btn)::after {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--ink-3);
    border-right: 2px solid var(--ink-3);
    transform: rotate(45deg);
}

.mobile-menu a[aria-current] { color: var(--navy); }

.mobile-menu .btn { width: 100%; min-height: 54px; font-size: 16px; }

body.menu-open { overflow: hidden; }

@media (min-width: 960px) {
    .site-nav { display: block; }
    .header-cta { display: inline-flex; }
    .menu-button, .mobile-menu { display: none; }
}

/* ── Waitlist form ── */

.waitlist {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.waitlist-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 60px;
    padding: 6px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm);
    transition: box-shadow var(--t-fast) ease;
}

.waitlist-row:hover { box-shadow: 0 0 0 1px rgba(21, 21, 21, 0.3), var(--shadow-sm); }
.waitlist-row:focus-within { box-shadow: 0 0 0 2px var(--navy), var(--shadow-sm); }
.waitlist.is-invalid .waitlist-row { box-shadow: 0 0 0 2px var(--error), var(--shadow-sm); }

.waitlist input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 0;
    background: transparent;
    padding: 0 var(--s-2) 0 18px;
    font-size: 16px;
    outline: none;
}

.waitlist input::placeholder { color: var(--ink-3); }
.waitlist input[readonly] { color: var(--ink-3); }

.waitlist .btn { flex: none; min-height: 48px; }

.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid rgba(21, 21, 21, 0.25);
    border-top-color: var(--ink);
    opacity: 0;
    animation: spin 0.7s linear infinite;
}

.waitlist.is-loading .btn-label { opacity: 0; }
.waitlist.is-loading .spinner { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }

.waitlist-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.waitlist-note,
.waitlist-message {
    font-size: 13px;
    line-height: 1.5;
    margin-top: var(--s-3);
    padding-left: 24px;
}

.waitlist-note { color: var(--ink-3); }

.waitlist-message {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    color: var(--error);
    font-weight: 500;
}

.waitlist-message svg { flex: none; margin-top: 2px; }
.waitlist-message + .waitlist-note { margin-top: var(--s-1); }

.waitlist-done {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 60px;
    padding: 14px 20px 14px 14px;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm);
    outline: none;
    animation: rise var(--t-slow) var(--ease);
}

.waitlist-done-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--live);
    color: #fff;
    display: grid;
    place-items: center;
}

.waitlist-done strong { display: block; font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; }
.waitlist-done p { font-size: 14px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }

.waitlist.is-done .waitlist-row,
.waitlist.is-done .waitlist-note,
.waitlist.is-done .waitlist-message { display: none; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* On dark sections the field stays white, so the form reads the same everywhere. */
.on-dark .waitlist-row { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.on-dark .waitlist-row:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 10px 30px rgba(0, 0, 0, 0.18); }
.on-dark .waitlist-row:focus-within { box-shadow: 0 0 0 3px var(--yellow); }
.on-dark .waitlist.is-invalid .waitlist-row { box-shadow: 0 0 0 3px #FF9A9E; }
.on-dark .waitlist-note { color: rgba(255, 255, 255, 0.74); }
.on-dark .waitlist-message { color: #FFC2C4; }
.on-dark .waitlist-done { color: var(--ink); }

/* On a phone the field and the button are two pieces, stacked: no box around
   them, the field carries its own outline and focus ring. */
@media (max-width: 479px) {
    .waitlist .waitlist-row,
    .waitlist .waitlist-row:hover,
    .waitlist .waitlist-row:focus-within,
    .on-dark .waitlist .waitlist-row,
    .on-dark .waitlist .waitlist-row:hover,
    .on-dark .waitlist .waitlist-row:focus-within,
    .waitlist.is-invalid .waitlist-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        min-height: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .waitlist input[type="email"] {
        flex: none;
        height: 54px;
        padding: 0 20px;
        border-radius: 999px;
        background: var(--surface);
        box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm);
        transition: box-shadow var(--t-fast) ease;
    }
    .waitlist input[type="email"]:focus { box-shadow: 0 0 0 2px var(--navy), var(--shadow-sm); }
    .waitlist.is-invalid input[type="email"] { box-shadow: 0 0 0 2px var(--error), var(--shadow-sm); }
    .on-dark .waitlist input[type="email"] { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
    .on-dark .waitlist input[type="email"]:focus { box-shadow: 0 0 0 3px var(--yellow); }
    .on-dark .waitlist.is-invalid input[type="email"] { box-shadow: 0 0 0 3px #FF9A9E; }
    .waitlist .btn { width: 100%; min-height: 54px; font-size: 16px; }
    .waitlist-note, .waitlist-message { padding-left: 20px; }
}

/* ── Photo and screenshot slots ──
   A slot is an <img> inside .slot. Until the file exists the slot shows what
   belongs there (data-slot); once it loads, the image fills the frame. */

.slot {
    position: relative;
    overflow: hidden;
    background: #E3DCD3;
}

.slot > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slot.is-empty::after {
    content: attr(data-slot);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: 80%;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px dashed rgba(21, 21, 21, 0.28);
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink-2);
    text-align: center;
}

.slot--dark { background: #1E1C1A; }
.slot--dark.is-empty::after { background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.3); }

/* ── Device ── */

.device {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1206 / 2622;
    padding: 3.2%;
    border-radius: 15% / 7%;
    background: #121212;
    box-shadow:
        inset 0 0 0 1.5px #3A3A3A,
        inset 0 0 0 4px #1C1C1C,
        var(--shadow-lift);
}

.device .slot {
    width: 100%;
    height: 100%;
    border-radius: 12.5% / 5.8%;
    background: var(--bg-soft);
}

.device .slot > img { object-fit: cover; object-position: top; }

.device::before {
    content: "";
    position: absolute;
    top: 2.9%;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 3.3%;
    border-radius: 999px;
    background: #000;
    z-index: 2;
}

/* ── Marks: numbered eyebrows, margin notes, scribbles ── */

/* "02 — Your closet": the number, a rule, the label. */
.eyebrow:has(.eyebrow-num)::before { display: none; }
.eyebrow-num { display: inline-flex; align-items: center; gap: var(--s-3); font-variant-numeric: tabular-nums; }
.eyebrow-num::after { content: ""; width: 28px; height: 2px; background: var(--red); }
.on-dark .eyebrow-num::after { background: currentColor; opacity: 0.55; }

.on-dark .eyebrow { color: rgba(255, 255, 255, 0.76); }

/* A handwritten note in the margin, with its arrow. Decorative: the same
   words are never the only place something is said. */
.hand {
    position: absolute;
    z-index: 3;
    font-family: var(--font-hand);
    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 600;
    line-height: 1.05;
    color: var(--red);
    transform: rotate(-4deg);
    pointer-events: none;
    white-space: nowrap;
}
.hand svg { position: absolute; color: currentColor; }
.hand--light { color: #fff; }

/* The highlighter: a yellow marker swipe behind a word, drawn left to right
   once it reveals. On navy the same stroke sits under the word instead, so
   white type never lands on yellow. */
.scribble { position: absolute; pointer-events: none; color: var(--yellow); overflow: visible; }
.underlined { position: relative; display: inline-block; isolation: isolate; }
.underlined .highlight { left: -4%; width: 108%; bottom: -0.04em; height: 0.66em; z-index: -1; mix-blend-mode: multiply; }
.on-dark .underlined .highlight { bottom: -0.14em; height: 0.3em; mix-blend-mode: normal; }
.scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.55, 0.1, 0.25, 1) 0.4s; }
.scribble .hl-2 { transition-delay: 0.62s; }
.is-in .scribble path, .scribble.is-in path { stroke-dashoffset: 0; }

/* Pen marks beside handwritten notes draw in the same way. */
.hand .pen path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--ease) 0.5s; }
.hand.is-in .pen path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .scribble path, .hand .pen path { stroke-dashoffset: 0; } }

/* Big step numerals (Features, How it works). */
.num {
    font-family: var(--font-num);
    font-weight: 500;
    font-size: clamp(56px, 6vw, 88px);
    line-height: 0.9;
    letter-spacing: -0.01em;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

/* Bands */
.band-navy { background: var(--navy); color: #fff; }
.band-dark { background: var(--dark); color: #fff; }
.band-navy .lede, .band-dark .lede { color: rgba(255, 255, 255, 0.84); }

/* A phone mockup: one image (phone, screen and shadow). */
.mockup { display: block; max-width: 100%; height: auto; }

/* ── Small parts ── */

.tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--bg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}

.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot--live { background: var(--live); }
.dot--rest { background: var(--rest); }
.dot--care { background: var(--care); }

/* ── FAQ ── */

.faq { border-top: 1px solid var(--line-strong); }

.faq details { border-bottom: 1px solid var(--line-strong); }

.faq summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-5);
    padding: var(--s-5) 0;
    font-size: clamp(17px, 1.5vw, 19px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
    cursor: pointer;
    border-radius: 4px;
    transition: color var(--t-fast) ease;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--navy); }
.faq summary:focus-visible { outline-offset: 6px; }

.faq-icon {
    flex: none;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--line-strong);
    transition: background var(--t-fast) ease, box-shadow var(--t-fast) ease, transform var(--t-base) var(--ease);
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.75px;
    margin: -0.875px 0 0 -6px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--t-base) var(--ease);
}

.faq-icon::after { transform: rotate(90deg); }

.faq summary:hover .faq-icon { box-shadow: inset 0 0 0 1px var(--navy); }
.faq details[open] .faq-icon { background: var(--navy); color: #fff; box-shadow: none; }
.faq details[open] .faq-icon::after { transform: rotate(0deg); }

.faq-answer {
    overflow: hidden;
    color: var(--ink-2);
}

.faq-answer p {
    max-width: var(--measure-wide);
    padding: 0 var(--s-7) var(--s-5) 0;
    line-height: 1.65;
}

.faq-answer a { color: var(--navy); font-weight: 500; }

/* ── Footer ── */

.site-footer {
    background: var(--bg);
    padding: var(--s-8) 0 var(--s-6);
    border-top: 1px solid var(--line);
    font-size: var(--fs-small);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-5);
}

.footer-brand { grid-column: 1 / -1; }

@media (min-width: 760px) {
    .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); }
    .footer-brand { grid-column: auto; }
}

.footer-brand p {
    color: var(--ink-2);
    margin-top: var(--s-3);
    max-width: 30ch;
}

.footer-col h2 {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.footer-col ul { list-style: none; margin-top: var(--s-3); }

.footer-col a {
    display: inline-block;
    padding: 6px 0;
    color: var(--ink);
    text-decoration: none;
    transition: color var(--t-fast) ease;
}

.footer-col a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }

.footer-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 13px;
}

/* ── Reveal ── */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.06s; }
.reveal[data-delay="2"] { transition-delay: 0.12s; }
.reveal[data-delay="3"] { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .reveal { opacity: 1; transform: none; }
    .spinner { animation: none; border-color: rgba(21, 21, 21, 0.5); }
}