/**
 * Keeping Tabs — landing page
 * Implemented from Figma "Tabs Manager 8-10", node 529:14492 (Desktop, 1728×3565).
 *
 * Standalone by design: this file duplicates the handful of values it needs from
 * src/styles/tokens.css rather than importing across the src/ boundary, so the
 * marketing site never becomes a build dependency of the extension.
 */

/* ── Fonts (copied from src/assets/fonts) ── */
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/DMMono-Regular-latin.woff2') format('woff2');
    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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/DMMono-Regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./assets/fonts/DMMono-Medium-latin.woff2') format('woff2');
    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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./assets/fonts/DMMono-Medium-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('./assets/fonts/DMSans-latin.woff2') format('woff2');
    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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('./assets/fonts/DMSans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ── */
:root {
    --page-bg: #ffffff;
    --section-bg: #2f2f2f;
    --section-border: #ff7759;
    --section-radius: 40px;

    --on-dark: #f5f5f5;
    --ink: #414244;
    --ink-strong: #000000;
    --coral: #fc734e;

    /* Panel (the product mock) */
    --panel-shell: #2f2f2f;
    --panel-shell-border: #767676;
    --panel-header-tab: #eae4d8;
    --panel-rows: #f5f1e7;
    --panel-rows-alt: #fffcf4;
    --panel-hairline: #414244;
    --panel-chip-bg: #fcf7ec;
    --panel-chip-text: #656056;
    --panel-avatar-border: #e5e5e5;
    --panel-avatar-more: #f5f5f5;
    --panel-avatar-blank: #aca8a8;
    /* Figma specifies #767676 for row metadata, which measures 3.99:1 on the
       #F5F1E7 row surface — under WCAG AA's 4.5:1 for text this size. Darkened
       one step to clear it (4.63:1) while reading identically at a glance. */
    --panel-meta: #6b6b6b;

    --button-bg: #fcf9f3;
    --button-border: #b3b3b3;

    --pill-bg: #000000;
    --pill-radius: 15.173px;

    --font-mono: 'DM Mono', 'SF Mono', 'Roboto Mono', monospace;
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;

    /* Fluid scale — the design is drawn at a 1728px frame, so 1px there is
       0.0579vw here. Every headline size below is that ratio, clamped. */
    --step-display: clamp(26px, 2.31vw, 40px);
    --step-lead: clamp(16px, 1.39vw, 24px);
    --step-body: clamp(14px, 0.93vw, 16px);

    /* How much lower each card in the stack pins than the one above it — the
       height of the stacked edge left on show, tall enough to carry the
       covered card's label at lead size (Figma end-state, node 549:2102). */
    --stack-step: clamp(44px, 4.6vw, 80px);
    /* Breathing room above the stack, so no card ever touches the viewport's
       top edge. */
    --stack-gap: clamp(16px, 2vw, 36px);
    /* Height kept free below the last card so the page ends with the footer
       bar sitting right under the front card, the stack still pinned. */
    --footer-reserve: 128px;
    /* The cards' side padding — shared with the strip labels so they align
       with the card content. */
    --card-pad-x: clamp(24px, 4.6vw, 80px);

    --gutter: clamp(16px, 2.4vw, 41px);
    /* The Figma frame is 1728 wide with the section cards inset 41px, so the
       shell is the card width plus both gutters. */
    --shell-max: 1729px;
}

/* ── Base ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-feature-settings: 'calt' 0, 'liga' 0;
    overflow-x: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Mechanical, not decorative — the Rams mandate forbids easing that simulates
   physical mass, so every state change here is linear and short. */
:where(a, button):focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 3px;
}

/* ── Site header ── */
.site-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    padding-top: clamp(20px, 3.76vw, 65px);
    padding-bottom: clamp(16px, 2.2vw, 38px);
}

.brand {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.39vw, 24px);
    text-decoration: none;
}

.brand__mark {
    display: flex;
    align-items: center;
    padding: clamp(7px, 0.69vw, 12px);
    background: var(--ink);
    border-radius: 8px;
}

.brand__mark img {
    width: clamp(20px, 1.91vw, 33px);
    height: clamp(20px, 1.91vw, 33px);
}

.brand__name {
    font-size: clamp(20px, 1.85vw, 32px);
    color: var(--ink-strong);
    text-transform: capitalize;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--step-body);
    color: var(--ink);
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    transition: background var(--duration-fast, 100ms) linear;
}

.btn:hover {
    background: #f4efe4;
}

.btn__icon {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
}

/* ── Sections ── */
/* The cards are a sticky stack: every section pins near the top of the
   viewport and stays there, so each new card scrolls up over the one before
   it and the stack deepens as you read. Each card pins --stack-step lower
   than the last, which is what leaves the thin stacked edges on show.
   `timeline-scope` publishes each card's view timeline to the whole group so a
   card can be animated by the card that covers it — see "Motion" below. */
.sections {
    position: relative;
    z-index: 1;
    timeline-scope: --card-1, --card-2, --card-3, --card-4;
}

.section {
    position: sticky;
    top: var(--card-top, 0px);
    /* Every card fills the viewport below its pin, so a pinned card's bottom
       edge sits exactly at the bottom of the screen. svh, where supported,
       keeps mobile browser chrome from hiding the card's lower edge. */
    min-height: calc(100vh - var(--card-top, 0px));
    min-height: calc(100svh - var(--card-top, 0px));
    overflow: hidden;
    background: var(--section-bg);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius) var(--section-radius) 0 0;
    padding: clamp(32px, 5.6vw, 96px) var(--card-pad-x);
}

.section:nth-child(1) {
    --card-top: var(--stack-gap);
    view-timeline-name: --card-1;
}

.section:nth-child(2) {
    --card-top: calc(var(--stack-gap) + 1 * var(--stack-step));
    view-timeline-name: --card-2;
}

.section:nth-child(3) {
    --card-top: calc(var(--stack-gap) + 2 * var(--stack-step));
    view-timeline-name: --card-3;
}

.section:nth-child(4) {
    --card-top: calc(var(--stack-gap) + 3 * var(--stack-step));
    view-timeline-name: --card-4;
}

/* The card's label, carried on the strip that stays on show once the next
   card has climbed over it. Hidden until that cover-up begins — the fade is
   scroll-driven, under "Motion" below. */
.section__tag {
    position: absolute;
    top: calc(var(--stack-step) / 2);
    left: var(--card-pad-x);
    transform: translateY(-50%);
    margin: 0;
    font-size: var(--step-lead);
    color: var(--on-dark);
    opacity: 0;
}

.section:last-child {
    /* Full height like every card — a shorter card would rest at its flow
       position instead of its pin and break the uniform strips. The visible
       card surface is ::before, inset above the footer zone, so its rounded
       bottom corners sit on show above the footer bar (Figma 549:3534). */
    /* Page-colored, not transparent: this is what shows in the corner
       notches around the surface's bottom radius and in the band beneath it
       — cream like the Figma frame, not the dark cards stacked behind. */
    z-index: 0;
    background: var(--page-bg);
    border: 0;
    padding-top: clamp(24px, 3vh, 48px);
    padding-bottom: calc(var(--footer-reserve) + clamp(24px, 3vh, 48px));
}

.section:last-child::before {
    content: '';
    position: absolute;
    inset: 0 0 var(--footer-reserve);
    z-index: -1;
    background: var(--section-bg);
    border: 1px solid var(--section-border);
    border-radius: var(--section-radius);
}

.section__copy {
    max-width: 660px;
}

.section__eyebrow,
.section__lead {
    margin: 0;
    font-size: var(--step-lead);
    color: var(--on-dark);
}

.section__title {
    margin: 0;
    font-size: var(--step-display);
    font-weight: 400;
    line-height: 1.3;
    color: var(--on-dark);
}

.section__eyebrow + .section__title {
    margin-top: clamp(8px, 0.7vw, 12px);
}

.section__title + .section__lead {
    margin-top: clamp(10px, 1.4vw, 24px);
}

.section__lead + .btn {
    margin-top: clamp(20px, 2.2vw, 38px);
}

/* ── Section 1 — hero ── */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(32px, 4vw, 64px);
    padding-bottom: 0;
}

.hero__copy {
    padding-top: clamp(24px, 8vw, 140px);
}

.hero__features {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(32px, 4.6vw, 80px);
    margin-top: clamp(32px, 4vw, 68px);
    padding: 0;
    list-style: none;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: clamp(64px, 4.74vw, 82px);
    font-size: clamp(12px, 0.88vw, 15.1px);
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
}

.feature img {
    width: clamp(36px, 2.92vw, 50.4px);
    height: clamp(36px, 2.92vw, 50.4px);
}

/* The panel is drawn taller than the section so the card crops it, exactly as
   the frame does in Figma. It pins to the card's bottom edge so the crop
   holds however tall the viewport makes the card. */
.hero__panel {
    align-self: end;
    margin-bottom: clamp(-260px, -14vw, -100px);
}

/* ── Section 2 — the tag field ── */
.everywhere {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    padding-left: 0;
}

.pill-field {
    /* --pu is this block's unit: 1px in the Figma frame. */
    --pu: clamp(0.42px, 0.0579vw, 1px);
    display: flex;
    flex-direction: column;
    gap: calc(30 * var(--pu));
    margin-left: calc(-372 * var(--pu));
    font-size: calc(24.06 * var(--pu));
}

.pill-row {
    display: flex;
    gap: calc(20 * var(--pu));
}

.pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: calc(10.695 * var(--pu));
    padding: calc(10.695 * var(--pu)) calc(18.716 * var(--pu));
    background: var(--pill-bg);
    border-radius: calc(15.173 * var(--pu));
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
}

.pill img {
    width: calc(26.737 * var(--pu));
    height: calc(26.737 * var(--pu));
    flex: 0 0 auto;
}

/* ── Section 3 — the folder window ── */
/* The design breaks this lead across two lines; the width is what does it. */
.resume .section__lead {
    max-width: 18em;
}

.resume {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

.folder-window {
    position: relative;
    width: 100%;
    max-width: 556px;
    margin-left: auto;
    aspect-ratio: 556 / 454;
    background: url('./assets/folder-window.svg') no-repeat center / 100% 100%;
}

.folder-window__tab {
    position: absolute;
    left: 4.5%;
    top: 4.19%;
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: clamp(9px, 0.75vw, 13px);
    color: #ffffff;
    white-space: nowrap;
}

.folder-window__tab img {
    width: 1.15em;
    height: 1.15em;
}

.folder-window__search {
    position: absolute;
    left: 4.5%;
    top: 13.22%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 81.29%;
    height: 6.38%;
    padding-right: 1.5%;
    background: #343434;
    border: 1px solid var(--coral);
    border-radius: 16px;
}

.folder-window__search img {
    width: 60%;
    max-width: 23.5px;
    height: auto;
    aspect-ratio: 1;
}

.folder-window__grid {
    position: absolute;
    left: 7.55%;
    top: 33.7%;
    display: grid;
    width: 84.9%;
    height: 55.5%;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 8% 5.5%;
}

.folder-window__tile {
    background: var(--panel-hairline);
    border-radius: 8px;
}

/* ── Section 4 — install ── */
.install {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

.install__panel {
    justify-self: center;
}

/* ── Footer ── */
/* The footer overlaps the stack instead of extending the page below it: it is
   pulled up by exactly its own height (--footer-reserve), which the front card
   cedes, so the document ends where the stack ends and the pinned cards are
   never dragged off the top. It paints its own page background (with the glow
   inside) to cover the taller cards stacked behind that zone. */
.site-footer {
    position: relative;
    z-index: 1;
    height: var(--footer-reserve);
    margin-top: calc(-1 * var(--footer-reserve));
    padding: 16px 0 32px;
    overflow: hidden;
    background: var(--page-bg);
}

.site-footer__bar {
    /* Positioned so it paints above the glow behind it. */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 80px;
    padding: 27px 24px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 24px;
    font-family: var(--font-sans);
    font-weight: 500;
}

.site-footer__credit {
    margin: 0;
    font-size: clamp(14px, 0.98vw, 16.865px);
    letter-spacing: 0.3373px;
    color: var(--ink);
}

.site-footer__links {
    display: flex;
    gap: clamp(24px, 2.8vw, 48px);
    font-size: 14px;
    text-transform: capitalize;
}

.site-footer__links a {
    text-decoration: none;
}

.site-footer__links a:hover {
    text-decoration: underline;
}

/* The warm bloom behind the footer bar (Figma "Ellipse 300"). Decorative
   only. It lives inside the footer, whose overflow clip keeps the bloom's
   bright band and discards the rest. Shifted down 18% like the Figma frame
   (bottom -102px of 560) so the ellipse's under-curve is never on screen,
   and mask-faded at the top so the clip has no hard edge where the footer
   meets the page background beside the card. */
.page-glow {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 140vw;
    height: clamp(280px, 32vw, 560px);
    transform: translateX(-50%) translateY(18%);
    background: url('./assets/glow-ellipse.svg') no-repeat center / 100% 100%;
    /* The footer's clip cuts this element at (82% of its height − reserve):
       0.82 = 1 − the 0.18 translate. The fade sits right at that line. */
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent calc(82% - var(--footer-reserve)),
        #000 calc(82% - var(--footer-reserve) + 56px)
    );
    mask-image: linear-gradient(
        180deg,
        transparent calc(82% - var(--footer-reserve)),
        #000 calc(82% - var(--footer-reserve) + 56px)
    );
    pointer-events: none;
}

/* The glow is drawn wider than the viewport (the Figma ellipse is 2420 across a
   1728 frame), so the page itself is the clip. `clip` rather than `hidden`:
   `hidden` would make this element a scroll container, and the sticky card
   stack would have nothing to stick to. */
.page {
    position: relative;
    overflow-x: clip;
}

/* ════════════════════════════════════════════════════════
   The product panel — a static mock of the extension popup.
   Every dimension is in em so one --u swap rescales the whole
   component; --u is 1px of the Figma drawing.
   ════════════════════════════════════════════════════════ */
.panel {
    /* Width-proportional, but also capped by viewport height: the drawing is
       bottom-anchored in the hero card, and on short viewports a taller panel
       (plus its parallax drift) would climb into the card's label strip. */
    --u: clamp(7px, min(0.926vw, 1.55vh), 16px);
    --panel-row-px: 1.464em;
    --panel-icon: 2.465em;
    --panel-tab-width: 78%;

    position: relative;
    width: 40.5625em;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--u);
    background: var(--panel-shell);
    border: 0.103em solid var(--panel-shell-border);
    border-radius: 1.643em 1.643em 0 0;
}

.panel__header {
    position: relative;
    height: 7.291em;
}

/* The cream tab with the swept right edge — Figma "Layer 1". */
.panel__header::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--panel-tab-width);
    background: url('./assets/panel-header-shape.svg') no-repeat left top / 100% 100%;
}

.panel__identity {
    position: relative;
    padding: 1.643em 0 0 2.362em;
}

.panel__name {
    margin: 0;
    font-size: 1.848em;
    font-weight: 400;
    color: var(--ink-strong);
    text-transform: capitalize;
}

.panel__count {
    margin: 0.36em 0 0;
    font-size: 1.027em;
    color: var(--panel-meta);
    text-transform: uppercase;
}

.panel__tools {
    position: absolute;
    top: 2.285em;
    right: 2.721em;
    display: flex;
    gap: 1.643em;
}

.panel__tools img {
    width: var(--panel-icon);
    height: var(--panel-icon);
}

.panel__rows {
    background: var(--panel-rows);
}

.panel-row {
    display: flex;
    align-items: center;
    gap: 0.911em;
    padding: 1.5em var(--panel-row-px);
    border-top: 0.103em solid var(--panel-hairline);
}

.panel-row__caret {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    transform: rotate(-90deg);
}

.panel-row__body {
    min-width: 0;
    flex: 1 1 auto;
}

.panel-row__title {
    margin: 0;
    font-size: 1.75em;
    font-weight: 400;
    color: var(--ink-strong);
    text-transform: capitalize;
    white-space: nowrap;
}

.panel-row__meta {
    display: flex;
    align-items: center;
    gap: 0.82em;
    margin-top: 0.41em;
}

.panel-row__stat {
    font-size: 1.027em;
    color: var(--panel-meta);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Favicon stack */
.avatars {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.541em;
    height: 1.541em;
    margin-right: -0.462em;
    overflow: hidden;
    background: #ffffff;
    border: 0.077em solid var(--panel-avatar-border);
    border-radius: 50%;
    box-shadow: 0 0 0 0.077em #ffffff;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar--blank {
    background: var(--panel-avatar-blank);
}

.avatar--more {
    margin-right: 0;
    background: var(--panel-avatar-more);
    font-family: var(--font-sans);
    font-size: 0.693em;
    font-weight: 600;
    color: #525252;
    /* The counter chip carries its own type size, so its box has to be sized in
       its own em or it would shrink with the label. */
    width: 2.224em;
    height: 2.224em;
}

/* Status chips (CURRENT / SYNC) */
.chips {
    display: flex;
    gap: 0.4em;
    margin-top: 0.4em;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.25em 0.5em;
    background: var(--panel-chip-bg);
    border: 0.062em solid var(--coral);
    border-radius: 0.5em;
    font-size: 0.792em;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--panel-chip-text);
    text-transform: uppercase;
}

.chip img {
    width: 1em;
    height: 1em;
}

/* Fading final row — the list is cut off rather than ended. */
.panel-row--fade {
    background: linear-gradient(180deg, var(--panel-rows-alt) 0%, #e8e4db 100%);
}

.panel-row--fade .panel-row__title {
    background: linear-gradient(180deg, #000000 52.174%, var(--panel-rows-alt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.panel__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.821em;
    height: 7.599em;
    background: #fcf9f3;
    border: 0.103em solid var(--panel-hairline);
    border-bottom: 0;
    border-radius: 2.465em 2.465em 0 0;
    color: var(--ink);
}

.panel__footer-plus {
    font-size: 2.67em;
    line-height: 1;
}

.panel__footer-label {
    font-size: 1.848em;
}

/* ── Compact variant (section 4) ── */
.panel--compact {
    /* Height-capped like the hero panel: the install card is the shortest in
       the stack (it cedes room to the footer), so the mock scales to fit it. */
    --u: clamp(6px, min(0.723vw, 0.9vh), 12.5px);
    --panel-row-px: 2.377em;
    --panel-icon: 1.977em;
    --panel-tab-width: 85%;

    width: 35.84em;
    border-width: 0.099em;
    border-radius: 1.6em;
}

.panel--compact .panel__header {
    height: 7.03em;
}

.panel--compact .panel__identity {
    padding: 1.585em 0 0 2.278em;
}

.panel--compact .panel__tools {
    top: 2.443em;
    right: 1.585em;
    gap: 0.96em;
}

.panel--compact .panel__rows {
    background: var(--panel-rows-alt);
}

.panel--compact .panel-row {
    padding: 1.447em var(--panel-row-px);
}

.panel__actions {
    display: flex;
    gap: 0.96em;
    padding: 1.28em;
    background: var(--panel-rows-alt);
    border-top: 0.099em solid var(--panel-hairline);
}

.panel__action {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 0.96em;
    padding: 1.12em 1.28em;
    background: var(--button-bg);
    border: 0.08em solid var(--button-border);
    border-radius: 0.64em;
    font-size: 1em;
    color: var(--ink);
    text-transform: capitalize;
}

.panel__action img {
    width: 1.92em;
    height: 1.92em;
}

/* ── Narrow viewports ── */
@media (max-width: 900px) {
    .hero,
    .everywhere,
    .resume,
    .install {
        grid-template-columns: minmax(0, 1fr);
        /* Copy on top, and the artwork owns whatever viewport height is left. */
        grid-template-rows: auto 1fr;
    }

    .hero {
        justify-items: center;
    }

    .pill-field,
    .folder-window,
    .install__panel {
        align-self: center;
    }

    .hero__copy {
        padding-top: 0;
    }

    .hero__panel {
        margin-bottom: -18vw;
    }

    .panel {
        --u: clamp(6px, 2.1vw, 12px);
    }

    .panel--compact {
        --u: clamp(6px, 1.9vw, 11px);
    }

    .everywhere .section__copy,
    .resume .section__copy,
    .install .section__copy {
        order: -1;
    }

    .pill-field {
        --pu: clamp(0.34px, 0.13vw, 0.62px);
        margin-left: calc(-372 * var(--pu));
    }

    .folder-window {
        margin: 0 auto;
    }

    .section {
        padding: clamp(28px, 7vw, 56px) clamp(20px, 5vw, 40px);
    }
}

/* ── Mobile (Figma "iPhone 16 - 1", node 591:5885) ── */
@media (max-width: 640px) {
    :root {
        --page-bg: #fffcf4;
        --section-radius: 20px;
        --step-display: 18px;
        --step-lead: 12px;
        --card-pad-x: 16px;
        --footer-reserve: 144px;
    }

    /* The header stacks and centers, and its CTA becomes the dark chip. */
    .site-header {
        flex-direction: column;
        gap: 24px;
        padding-top: 29px;
        padding-bottom: 26px;
    }

    .brand {
        gap: 16px;
    }

    .brand__mark {
        padding: 9px;
        border-radius: 6px;
    }

    .brand__mark img {
        width: 25px;
        height: 25px;
    }

    .brand__name {
        font-size: 30px;
    }

    .site-header .btn {
        padding: 12px 16px;
        background: var(--section-bg);
        border-color: var(--section-bg);
        color: #fffcf4;
    }

    .site-header .btn:hover {
        background: var(--ink);
        border-color: var(--ink);
    }

    .site-header .btn__icon {
        display: none;
    }

    /* Every card reads as one centered column. */
    .section {
        padding: 56px var(--card-pad-x) 48px;
    }

    .section__copy {
        margin-inline: auto;
        text-align: center;
    }

    /* Section 1 — hero. The panel spans the card and is cropped by it. */
    .hero {
        gap: 24px;
        padding-bottom: 0;
    }

    .hero__features {
        justify-content: center;
        gap: 39px;
        margin-top: 32px;
    }

    .feature {
        width: 44px;
        gap: 5px;
        font-size: 8px;
    }

    .feature img {
        width: 25px;
        height: 25px;
    }

    /* --u derived from the free width inside the card (viewport minus the
       shell and card gutters), so the drawing always exactly spans it. */
    .panel {
        --u: min(calc((100vw - 64px) / 40.5625), 12px);
    }

    .hero__panel {
        margin-bottom: clamp(-130px, -28vw, -80px);
    }

    /* Section 2 — the tags become a centered, overflowing cloud. */
    .everywhere {
        padding-left: 16px;
    }

    .pill-field {
        --pu: 0.55px;
        align-items: center;
        gap: 18px;
        margin-left: 0;
    }

    .pill {
        border-radius: 16px;
    }

    /* Section 3 — folder window, drawn at 283px in the frame. */
    .folder-window {
        max-width: 283px;
    }

    /* Section 4 — copy sits above the panel; the CTA shrinks a step. */
    .install .btn {
        padding: 10px 12px;
        font-size: 12px;
    }

    .install .btn__icon {
        width: 15px;
        height: 15px;
    }

    .panel--compact {
        /* vh-capped so the install card's content clears the footer zone
           reserved at its bottom. */
        --u: clamp(5px, min(1.96vw, 0.72vh), 11px);
    }

    /* Footer stacks: links first, credit last, all centered. */
    .site-footer {
        padding: 16px 0 24px;
    }

    .site-footer__bar {
        max-width: 345px;
        margin-inline: auto;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        min-height: 0;
        padding: 15px 18px;
        text-align: center;
    }

    .site-footer__credit {
        order: 1;
        margin: 0;
        font-size: 12px;
        letter-spacing: 0.24px;
    }

    .site-footer__links {
        flex-direction: column;
        gap: 8px;
        font-size: 13px;
    }
}

/* ════════════════════════════════════════════════════════
   Motion — scroll-driven only
   Every animation here is tied to a scroll position, not to a clock: nothing
   moves unless the reader moves it. Browsers without scroll-driven animation
   get the sticky stack on its own, which is the whole layout and reads fine
   without the depth cues.
   ════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
    /* A card dims as the next one climbs over it — the cue that it has been
       covered rather than simply scrolled past. Dimming only, no scaling:
       every card keeps the same width, so the stacked edges always align
       (scaling left mid-animation cards at differing widths). Driven by the
       *covering* card's timeline, because a pinned card's own timeline is
       frozen by its stickiness and would never advance. */
    @keyframes card-recede {
        to {
            filter: brightness(0.72);
        }
    }

    .section:nth-child(1) {
        animation: card-recede linear both;
        animation-timeline: --card-2;
        animation-range: entry 20% entry 100%;
    }

    .section:nth-child(2) {
        animation: card-recede linear both;
        animation-timeline: --card-3;
        animation-range: entry 20% entry 100%;
    }

    .section:nth-child(3) {
        animation: card-recede linear both;
        animation-timeline: --card-4;
        animation-range: entry 20% entry 100%;
    }

    /* The covered card's label fades in on its exposed strip as the next
       card climbs over it — same covering-card timelines as the dim. The
       last card is never covered, so its label never shows. */
    @keyframes tag-in {
        to {
            opacity: 1;
        }
    }

    .section:nth-child(1) .section__tag {
        animation: tag-in linear both;
        animation-timeline: --card-2;
        animation-range: entry 30% entry 85%;
    }

    .section:nth-child(2) .section__tag {
        animation: tag-in linear both;
        animation-timeline: --card-3;
        animation-range: entry 30% entry 85%;
    }

    .section:nth-child(3) .section__tag {
        animation: tag-in linear both;
        animation-timeline: --card-4;
        animation-range: entry 30% entry 85%;
    }

    /* Each card hands its own timeline down to its contents. It has to be
       handed down rather than resolved with `view()`, because every card is
       `overflow: hidden` — that makes the card its own scrollport, and a
       `view()` inside one measures the element against the card rather than
       against the page, which pins the progress at 100% and plays nothing. */
    .section:nth-child(1) {
        --card-tl: --card-1;
    }

    .section:nth-child(2) {
        --card-tl: --card-2;
    }

    .section:nth-child(3) {
        --card-tl: --card-3;
    }

    .section:nth-child(4) {
        --card-tl: --card-4;
    }

    /* Contents rise into place as their card enters, and keep drifting against
       the scroll while it is on screen — the parallax. The two run on separate
       properties (`translate` and `transform`) precisely so they compose
       instead of overwriting one another. */
    @keyframes content-rise {
        from {
            opacity: 0;
            translate: 0 40px;
        }
        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @keyframes parallax-drift {
        from {
            transform: translateY(var(--drift, 7%));
        }
        to {
            transform: translateY(calc(-1 * var(--drift, 7%)));
        }
    }

    .section__copy,
    .hero__features,
    .hero__panel,
    .pill-field,
    .folder-window,
    .install__panel {
        animation:
            content-rise linear both,
            parallax-drift linear both;
        animation-timeline: var(--card-tl), var(--card-tl);
        animation-range:
            entry 15% entry 90%,
            entry 0% entry 100%;
    }

    /* The copy is the thing being read, so it drifts least; the product shots
       drift most and sit visibly behind it. */
    .section__copy,
    .hero__features {
        --drift: 2%;
    }

    .hero__panel,
    .install__panel {
        --drift: 8%;
    }

    .pill-field,
    .folder-window {
        --drift: 6%;
    }

    /* In the single-column mobile stack the product shots sit directly above
       or below the copy, so a large drift would slide them into it. */
    @media (max-width: 640px) {
        .hero__panel,
        .install__panel {
            --drift: 2%;
        }
    }
}

/* Scroll-linked movement is exactly what this setting asks to be spared, so the
   stack flattens back to the plain overlapping cards the design started from. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 1ms !important;
        animation: none !important;
    }

    .section {
        position: relative;
        top: auto;
    }

    .section + .section {
        margin-top: clamp(-56px, -3.2vw, -20px);
    }
}