/* ============================================================
   THEME TOKENS

   :root carries the LIGHT theme — it is the site default.
   html[data-theme="dark"] below re-states the same tokens with
   the original dark values, so dark is opt-in via the header
   toggle (see .theme-toggle and the theme module in script.js).

   Everything theme-dependent in this file goes through one of
   these tokens. If you add a rule with a hardcoded colour, it
   will look wrong in one of the two themes — add a token instead.
   ============================================================ */

:root {
    /* --- theme-independent --- */
    --primary-color: #dc2626;
    --secondary-color: #f5f5f1;
    --border-radius: 12px;

    /* --- surfaces --- */
    --bg: #eeeeec;                              /* page */
    --bg-sunken: #e4e4e1;                       /* recessed band (pricing) */
    --bg-raised: #f7f7f5;                       /* raised band (how it works) */
    --surface: #ffffff;                         /* cards, panels, table */
    --surface-alt: #f3f3f1;                     /* table header, hover rows */
    --surface-tint: rgba(35, 39, 46, 0.06);     /* hover wash over a surface */
    --menu-bg: #ffffff;                         /* profile dropdown */
    --step-bg: #ffffff;                         /* how-it-works step card */
    --step-bg-hover: #f8f8f6;

    /* --- text, brightest to faintest --- */
    --text-color: #23272e;                      /* primary */
    --text-strong: #23272e;                     /* headings on a surface */
    --text-subtle: #3d4550;                     /* list subheadings */
    --text-secondary: #5c6672;                  /* body copy, meta */
    --text-faint: #98a0aa;                      /* dashes, disabled, units */

    /* --- hairlines, lightest to heaviest --- */
    --line: rgba(35, 39, 46, 0.10);             /* borders on surfaces */
    --line-strong: rgba(35, 39, 46, 0.18);      /* button outlines */
    --line-heavy: rgba(35, 39, 46, 0.22);       /* structural rules */
    --line-hover: rgba(35, 39, 46, 0.35);       /* hover emphasis */
    --divider-line: rgba(35, 39, 46, 0.20);     /* footer divider midpoint */

    /* --- elevation --- */
    --shadow: rgba(35, 39, 46, 0.10);
    --shadow-strong: rgba(35, 39, 46, 0.16);

    /* --- frosted chrome: header, hero stats, hero CTAs --- */
    --glass: rgba(250, 250, 248, 0.85);
    --glass-solid: rgba(250, 250, 248, 0.96);
    --inverse-solid: rgba(35, 39, 46, 0.90);    /* panel that inverts on hover */

    /* --- controls --- */
    --button-border-color: rgba(35, 39, 46, 0.30);
    --button-hover-color: rgba(35, 39, 46, 0.85);
    --button-background-color: #ffffff;         /* glyph on a filled control */
    --button-background-dark: rgba(250, 250, 248, 0.90);
    --btn-quiet-fg: var(--text-secondary);      /* outline button label */
    --icon-outline: rgba(35, 39, 46, 0.45);
    --icon-quiet: rgba(35, 39, 46, 0.55);

    /* --- hero --- */
    --scrim-rgb: 244 244 242;                   /* scrim over the video */
    --hero-panel: #f4f4f2;                      /* solid panel behind the headline */
    --outline-stroke: rgba(35, 39, 46, 0.55);   /* "AEC" outline type */
    --construction-line: rgba(35, 39, 46, 0.10);

    /* --- imagery --- */
    --image-well: rgba(35, 39, 46, 0.04);
    --image-well-ring: var(--line);             /* white screenshots need an edge */
    --shot-ring: rgba(35, 39, 46, 0.14);        /* feature screenshots are dark app captures */
    --shot-bg: #16181d;                         /* holds the shape before the shot loads */
    --feature-pool: rgba(220, 38, 38, 0.05);    /* light behind the floating screenshot */
    --glyph-paper: rgba(255, 255, 255, 0.72);   /* the sheet inside the collaborate glyph */
    --overlay-btn-bg: rgba(255, 255, 255, 0.85);
    --overlay-btn-bg-hover: #ffffff;
    --overlay-btn-fg: #23272e;
    --overlay-btn-line: rgba(35, 39, 46, 0.18);
    --overlay-btn-line-hover: rgba(35, 39, 46, 0.35);
    --dot: rgba(35, 39, 46, 0.25);
    --dot-hover: rgba(35, 39, 46, 0.45);
    --dot-ring: rgba(255, 255, 255, 0.60);

    /* --- misc --- */
    --success: #15803d;
    --logo-filter: brightness(0);               /* ACL mark ships as solid white */
    --logo-ink: #23272e;                        /* wordmark linework; the reds stay red */
    --skeleton-wash: linear-gradient(90deg, rgba(35,39,46,0.06) 25%, rgba(35,39,46,0.12) 50%, rgba(35,39,46,0.06) 75%);

    /* --- full-section washes --- */
    --features-wash: linear-gradient(
        to bottom,
        rgba(20, 48, 100, 0.04) 0%,
        rgba(20, 55, 100, 0.07) 30%,
        rgba(41, 20, 100, 0.06) 70%,
        rgba(100, 50, 67, 0.05) 100%
    );
    --footer-wash: linear-gradient(
        to bottom,
        rgba(35, 39, 46, 0.02) 0%,
        rgba(35, 39, 46, 0.07) 100%
    );
    --feature-field:
        radial-gradient(760px 620px at 8% 118%, rgba(35, 39, 46, 0.10), transparent 72%),
        radial-gradient(900px 460px at 88% -10%, rgba(255, 255, 255, 0.85), transparent 70%),
        linear-gradient(100deg, #f4f4f2 0%, #fbfbfa 46%, #eceae7 100%);

    /* --- drafting patterns (a custom property can hold a whole url()) --- */
    --pattern-grid: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%2323272e' stroke-width='0.3' opacity='0.10'/%3E%3C/svg%3E");
    --pattern-dots: url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='1.3' fill='%2323272e' opacity='0.10'/%3E%3C/svg%3E");
    --pattern-hatch: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-4 4l8-8M0 16L16 0M12 20l8-8' stroke='%2323272e' stroke-width='0.5' opacity='0.10'/%3E%3C/svg%3E");
    --pattern-dots-fine: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='0.8' fill='%2323272e' opacity='0.22'/%3E%3C/svg%3E");

    /* --- deprecated aliases, kept so the prototype-*.html files still resolve --- */
    --dark-bg: var(--bg);
    --card-bg: var(--menu-bg);
}

html[data-theme="dark"] {
    --bg: #141414;
    --bg-sunken: #111418;
    --bg-raised: #181c22;
    --surface: #181c22;
    --surface-alt: #1e2228;
    --surface-tint: rgba(255, 255, 255, 0.10);
    --menu-bg: #1f1f1f;
    --step-bg: #1e2228;
    --step-bg-hover: #252a32;

    --text-color: #ffffff;
    --text-strong: #e8eaed;
    --text-subtle: #c7ccd1;
    --text-secondary: #8b929a;
    --text-faint: #555d66;

    --line: rgba(255, 255, 255, 0.06);
    --line-strong: rgba(255, 255, 255, 0.12);
    --line-heavy: rgba(255, 255, 255, 0.18);
    --line-hover: rgba(255, 255, 255, 0.30);
    --divider-line: rgba(255, 255, 255, 0.15);

    --shadow: rgba(0, 0, 0, 0.35);
    --shadow-strong: rgba(0, 0, 0, 0.50);

    --glass: rgba(17, 20, 24, 0.85);
    --glass-solid: rgba(17, 20, 24, 0.95);
    --inverse-solid: rgba(13, 17, 23, 0.95);

    --button-border-color: rgba(255, 255, 255, 0.2);
    --button-hover-color: rgba(255, 255, 255, 0.6);
    --button-background-color: #141414;
    --button-background-dark: rgba(17, 20, 24, 0.85);
    --btn-quiet-fg: rgba(255, 255, 255, 0.2);
    --icon-outline: rgba(255, 255, 255, 0.2);
    --icon-quiet: rgba(255, 255, 255, 0.5);

    --scrim-rgb: 13 17 23;
    --hero-panel: #0d1117;
    --outline-stroke: rgba(255, 255, 255, 0.55);
    --construction-line: rgba(255, 255, 255, 0.04);

    --image-well: rgba(0, 0, 0, 0.3);
    --image-well-ring: transparent;
    /* On a near-black page the drop shadow has nothing to work against, so the
       hairline is what separates a dark screenshot from the field behind it. */
    --shot-ring: rgba(255, 255, 255, 0.12);
    --shot-bg: #16181d;
    --feature-pool: rgba(220, 38, 38, 0.07);
    /* Paper still has to sit lighter than the ground it lies on, so this
       stays a white wash in both themes — it just gets far weaker here. */
    --glyph-paper: rgba(255, 255, 255, 0.08);
    --overlay-btn-bg: rgba(0, 0, 0, 0.55);
    --overlay-btn-bg-hover: rgba(0, 0, 0, 0.8);
    --overlay-btn-fg: #ffffff;
    --overlay-btn-line: rgba(255, 255, 255, 0.15);
    --overlay-btn-line-hover: rgba(255, 255, 255, 0.30);
    --dot: #3a3a3a;
    --dot-hover: #555555;
    --dot-ring: rgba(0, 0, 0, 0.4);

    --success: #4ade80;
    --logo-filter: none;
    --logo-ink: #d3d3d3;
    --skeleton-wash: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);

    /* One translucent layer, laid out exactly like the light wash above — same
       structure, same alpha scale (.04 / .07 / .06 / .05), same reliance on
       being painted twice. --features-wash goes on #features AND on every
       .feature-row, so a row carries two coats and the header band above the
       rows carries one. Both themes now behave that way.

       The stop COLOURS are where the work is. This has to land on the look
       signed off as "Cool" in prototype-feature-wash.html — the prototype's
       neutral #141414 -> #181c22 -> #141414 with a third-strength
       blue -> violet -> mauve tint over it. That version got its lift from an
       opaque base layer, which is precisely what stopped it layering. Here the
       lift has to come out of the tint instead, so each stop folds the neutral
       move into its own colour and is solved for the DOUBLED result:

           result = bg + (C - bg) * (1 - (1 - a)^2)

       which is why the colours read lighter and greyer than the old tint did.
       Two coats over #141414 land within a point of the approved value at
       every stop. Painted once — drop it from #features, say — dark goes to
       roughly half strength and the band all but disappears. The 45% stop is
       there to keep the peak where the prototype put it. */
    --features-wash: linear-gradient(
        to bottom,
        rgba(20, 33, 46, 0.04) 0%,
        rgba(42, 72, 116, 0.07) 30%,
        rgba(51, 84, 146, 0.07) 45%,
        rgba(46, 54, 115, 0.06) 70%,
        rgba(41, 30, 30, 0.05) 100%
    );
    --footer-wash: linear-gradient(
        to bottom,
        rgba(20, 20, 40, 0.05) 0%,
        rgba(20, 20, 40, 0.15) 100%
    );
    --feature-field:
        radial-gradient(760px 620px at 8% 118%, rgba(64, 71, 82, 0.62), transparent 72%),
        radial-gradient(900px 460px at 88% -10%, rgba(236, 238, 242, 0.09), transparent 70%),
        linear-gradient(100deg, #181b20 0%, #1c2027 46%, #15171b 100%);

    --pattern-grid: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23ffffff' stroke-width='0.3' opacity='0.05'/%3E%3C/svg%3E");
    --pattern-dots: url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='1.3' fill='%23ffffff' opacity='0.09'/%3E%3C/svg%3E");
    --pattern-hatch: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-4 4l8-8M0 16L16 0M12 20l8-8' stroke='%23ffffff' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
    --pattern-dots-fine: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='0.8' fill='%23ffffff' opacity='0.08'/%3E%3C/svg%3E");
}

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

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    width: 1200px;
    max-width: calc(100vw - 40px);
    margin: 0 auto;
    align-items: center;
    background-color: var(--glass);
    backdrop-filter: blur(16px);
    padding: 10px 0;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 1000;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    animation: headerSlideIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.2s;
}

header.header-hidden {
    animation: none;
    transform: translateX(-50%) translateY(-100%);
}

header.header-scrolled {
    background-color: var(--glass-solid);
    box-shadow: 0 1px 0 rgba(220, 38, 38, 0.1), 0 4px 16px var(--shadow);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.logo a {
    display: block;
    line-height: 0;
}

.logo img,
.logo .logo-mark {
    height: 72px;
    width: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* The wordmark is ~4:1, not the near-square the old mark was — it needs its own
   height or it runs half the width of the header.

   56px is not arbitrary: the artwork's stems are snapped to whole viewBox units,
   and the viewBox is 227x56, so at 56px one unit is exactly one pixel and every
   stem rasterises the same way. Off that grid the stems drift out of phase and
   some read heavier than others — most visibly the two i's. Keep any override
   to a whole-number divisor (56, 28) for the same reason. */
.logo .logo-mark {
    height: 56px;
    display: block;
}

.logo .logo-mark .ink {
    fill: var(--logo-ink);
    transition: fill 0.3s ease;
}

nav {
    margin-left: auto;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.25s ease;
}

nav ul li a:hover {
    color: var(--text-color);
}

.auth-buttons .btn {
    margin-left: 10px;
}

.start-app-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

.btn-start-app {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0px 20px;
    padding-right: 0px;
    background-color: transparent;
    color: var(--btn-quiet-fg);
    border: 1px solid var(--button-border-color);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: lighter;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.btn-start-app:hover:not(:has(.profile-icon:hover)) {
    border-color: var(--primary-color);
    color: var(--button-hover-color);
    
}

.profile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--button-border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.profile-icon svg {
    width: 36px;
    height: 36px;
    color: var(--icon-outline);
    pointer-events: none;
}

.profile-icon:hover {
    color: var(--button-hover-color);
    background-color: var(--button-hover-color);
}

.profile-icon:hover svg {
    color: var(--button-background-color);
}

/* When logged in, add this class to profile-icon */
.profile-icon.logged-in {
    background-color: var(--text-color);
}

.profile-icon.logged-in svg {
    color: var(--button-background-dark);
}

.profile-menu {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px var(--shadow);
    min-width: 200px;
    z-index: 1000;
}

.profile-menu.show {
    display: block;
}

.profile-menu a {
    display: block;
    padding: 15px 20px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.profile-menu a:first-child {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.profile-menu a:last-child {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.profile-menu a:hover {
    background-color: var(--surface-tint);
}

.profile-menu a.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.profile-menu-user {
    padding: 15px 20px;
    border-bottom: 1px solid var(--line-strong);
    color: var(--primary-color);
    font-weight: 600;
}

.profile-menu-user .user-name {
    display: block;
    font-size: 0.95rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: all 0.25s ease;
}

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

.btn-primary:hover {
    background-color: #b91c1c;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.35);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-strong);
    border: 1.5px solid var(--line-strong);
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: rgba(220, 38, 38, 0.08);
}

main {
    padding: 0;
}

section {
    padding: 60px 0;
}

section#hero {
    padding: 0;
}

section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--primary-color);
}

#features {
    background: var(--features-wash);
    position: relative;
    /* The last feature row carries its own closing rule and runs flush to the
       next section — a trailing 60px of section padding would break that. */
    padding-bottom: 0;
}

#pricing {
    padding: 120px 0;
    background: var(--bg-sunken);
    position: relative;
}

/* Grid line background for pricing */
#pricing::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pattern-grid);
    background-size: 40px 40px;
    pointer-events: none;
}

#hero {
    text-align: left;
    /* svh: the viewport with the browser's bars showing, so on phones the whole hero,
       stats readout included, is on screen at first load (100vh counts the bars as hidden). */
    height: 100vh;
    height: 100svh;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
    position: relative;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}

/* Portrait screens see only a slice of the 16:9 reel, and its action sits right of centre
   (roughly x 1250-1650 of 1920; it was framed for the desktop hero's open column). Centre the
   slice on x = 1450 instead of the frame's middle: the reel is 177.78svh wide here and that
   point is 134.26svh in, clamped so the frame never pulls away from either edge. */
@media (orientation: portrait) {
    .hero-video {
        object-position: 85% 50%;
        object-position: clamp(calc(100vw - 177.78svh), calc(50vw - 134.26svh), 0px) 50%;
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Solid dark base behind text area — matches content height */
.hero-overlay-solid {
    display: none;
}

/* Dark gradient that fades out from the solid edge to the right */
.hero-overlay-dark {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgb(var(--scrim-rgb) / 0.97) 0%,
        rgb(var(--scrim-rgb) / 0.92) 30%,
        rgb(var(--scrim-rgb) / 0.80) 50%,
        rgb(var(--scrim-rgb) / 0.60) 70%,
        rgb(var(--scrim-rgb) / 0.15) 85%,
        transparent 100%
    );
}

/* Grid lines layer */
.hero-overlay-grid {
    position: absolute;
    inset: 0;
    background-image: var(--pattern-grid);
    background-size: 40px 40px;
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}

/* Diagonal hatch layer — moved to .hero-content::before */
.hero-overlay-hatch {
    display: none;
}

/* Construction dashed lines */
.hero-overlay-construction {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-overlay-construction::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    left: 62%;
    top: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(220, 38, 38, 0.12) 0px,
        rgba(220, 38, 38, 0.12) 8px,
        transparent 8px,
        transparent 16px
    );
}

.hero-overlay-construction::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: 38%;
    background: repeating-linear-gradient(
        to right,
        var(--construction-line) 0px,
        var(--construction-line) 12px,
        transparent 12px,
        transparent 20px
    );
}

#hero .container {
    position: absolute;
    top: 20vh;
    top: 20svh;
    z-index: 2;
    width: 100%;
    max-width: none;
    padding: 0;
    padding-left: max(20px, calc((100vw - 1200px) / 2 + 120px));
}

.hero-content {
    max-width: 680px;
    position: relative;
}

/* Armed by script.js only while expanded and at the top of the page: hands
   vertical touch gestures to the collapse handler instead of the scroller.
   Removed the moment the hero collapses, so scrolling is never trapped.
   Lives on the whole section — the text block alone is a much smaller target
   than the panel it appears to sit on, which makes the swipe feel unreliable. */
#hero.gesture-armed {
    touch-action: pan-x;
}

.hero-content::before {
    content: '';
    position: absolute;
    top: -40px;
    bottom: -40px;
    right: -60px;
    left: -9999px;
    background: var(--hero-panel) var(--pattern-hatch) repeat;
    background-size: auto, 16px 16px;
    z-index: -1;
    clip-path: inset(0 100% 0 0);
    animation: bgSlideIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

#hero h1,
#hero .hero-headline {
    font-family: 'Rajdhani', 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
    color: var(--text-strong);
    opacity: 0;
    transform: translateY(20px);
    animation: textAssemble 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.85s;
}

#hero .hero-headline .accent {
    color: var(--primary-color);
}

#hero .hero-headline .outline {
    -webkit-text-stroke: 1.5px var(--outline-stroke);
    color: transparent;
}

#hero .hero-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(16px);
    animation: textAssemble 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.7s;
}

#hero .hero-eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--primary-color);
}

#hero .hero-tagline {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 40px;
    font-weight: 400;
    max-width: 540px;
    opacity: 0;
    transform: translateY(16px);
    animation: textAssemble 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.0s;
}

.hero-cta {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(16px);
    animation: textAssemble 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.15s;
}

.hero-cta .btn {
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    border-radius: 8px;
}

.hero-cta .btn-secondary {
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line-strong);
    color: var(--text-strong);
}

.hero-cta .btn-secondary:hover {
    border-color: var(--line-hover);
    color: var(--text-color);
    background: var(--glass-solid);
}

.hero-cta .btn-primary {
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line-strong);
    color: var(--primary-color);
    box-shadow: none;
}

.hero-cta .btn-primary:hover {
    border-color: var(--primary-color);
    background: var(--glass-solid);
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.2);
}

#hero p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Hero toggle chevron button */
.hero-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 32px;
    background: var(--line);
    border: none;
    border-radius: 0 0 0 6px;
    color: var(--icon-quiet);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.25s ease, background 0.25s ease;
    z-index: 10;
    opacity: 0;
    animation: textAssemble 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.4s;
}

.hero-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-toggle:hover {
    color: #fff;
    background: var(--inverse-solid);
    border-color: var(--line-hover);
}

/* Minimized hero state — same width, reduced height */
.hero-content.minimized .hero-eyebrow,
.hero-content.minimized .hero-tagline {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease;
}

#hero .hero-content.minimized .hero-headline {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 5px;
    line-height: 1.1;
    transition: font-size 0.4s ease, margin 0.4s ease, line-height 0.4s ease;
}

.hero-content.minimized .hero-headline br {
    display: none;
}

.hero-content.minimized .hero-cta {
    margin-top: 0;
    gap: 10px;
}

.hero-content.minimized .hero-cta .btn {
    padding: 8px 20px;
    font-size: 0.85rem;
}

.hero-content.minimized {
    max-width: 680px;
}

.hero-content.minimized .hero-toggle svg {
    transform: rotate(180deg);
}

.hero-content.minimized .hero-toggle {
    right: 0;
    top: 0;
}

/* Shrink the solid background panel when minimized */
.hero-content::before {
    transition: top 0.4s ease, bottom 0.4s ease, right 0.4s ease;
}

.hero-content.minimized::before {
    top: -16px;
    bottom: -16px;
}

/* Fade down the dark overlay when minimized to reveal more video */
#hero.hero-minimized .hero-overlay-dark {
    opacity: 0.3;
    transition: opacity 0.5s ease;
}

.hero-overlay-dark {
    transition: opacity 0.5s ease;
}

/* Smooth transitions for expanded state */
.hero-content .hero-eyebrow,
.hero-content .hero-tagline {
    max-height: 200px;
    transition: opacity 0.4s ease 0.1s, max-height 0.5s ease, margin 0.4s ease;
}

.hero-content .hero-headline {
    transition: font-size 0.4s ease, margin 0.4s ease, line-height 0.4s ease;
}

.video-control {
    width: 42px;
    height: 42px;
    background-color: transparent;
    border: 1px solid var(--line-heavy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

.video-control:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.video-control svg {
    width: 18px;
    height: 18px;
    fill: var(--text-color);
}

.feature-subsection {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 80px;
}

.feature-subsection.reverse {
    flex-direction: row-reverse;
}

.feature-text {
    flex: 1;
}

.feature-text h3 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.feature-text p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.feature-text ul {
    list-style: none;
    margin-top: 20px;
    padding-left: 10px;
}

.feature-text ul li {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.feature-text ul li::before {
    content: "•";
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.feature-image {
    flex: 1;
}

.feature-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Pricing skeleton loaders */
.pricing-skeleton {
    min-height: 320px;
}

.skeleton-line {
    background: var(--skeleton-wash);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Pricing card button */
.pricing-cta {
    display: inline-block;
    padding: 12px 30px;
    background-color: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 20px;
    width: 100%;
}

.pricing-cta:hover {
    background-color: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.2);
}

.pricing-cta.pricing-cta-outline {
    background-color: transparent;
    border: 2px solid var(--line-strong);
    color: var(--text-strong);
}

.pricing-cta.pricing-cta-outline:hover {
    border-color: #dc2626;
    color: #dc2626;
    background-color: transparent;
}

.pricing-popular-badge {
    background-color: #dc2626;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: 0 0 8px 8px;
    display: inline-block;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing-feature-list {
    list-style: none;
    text-align: left;
    margin-bottom: 32px;
    padding: 0;
}

.pricing-feature-list li {
    padding: 3px 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-feature-list li::before {
    content: '\2713';
    color: #dc2626;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Roll-up line ("Everything in <tier>, plus:") — no checkmark, styled as a subheader */
.pricing-feature-list li.pricing-feature-rollup {
    color: var(--text-subtle);
    font-weight: 600;
}

.pricing-feature-list li.pricing-feature-rollup::before {
    display: none;
}

.pricing-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}

.pricing-error button {
    margin-top: 16px;
    padding: 8px 20px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* --- Billing interval toggle (Monthly / Annual) --- */
.pricing-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
    gap: 0;
}
.pricing-toggle-btn {
    padding: 10px 28px;
    font-size: 0.95rem;
    font-weight: 500;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pricing-toggle-btn:first-child {
    border-radius: 8px 0 0 8px;
}
.pricing-toggle-btn:last-child {
    border-radius: 0 8px 8px 0;
    border-left: none;
}
.pricing-toggle-btn.active {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.pricing-toggle-btn:not(.active):hover {
    background: var(--surface-tint);
    color: var(--text-strong);
}
.pricing-toggle-save {
    background: #16a34a;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
}

/* Annual billing note under price */
.pricing-annual-note {
    color: var(--text-secondary, #888);
    font-size: 0.8rem;
    margin-top: -4px;
    margin-bottom: 8px;
}

/* Team pricing link inside Pro Plus card */
.pricing-team-link-wrap {
    text-align: center;
    margin-bottom: 12px;
}
.pricing-team-link {
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}
.pricing-team-link:hover {
    color: #ef4444;
}

/* Team pricing: back link */
.team-back-link {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    width: 100%;
    text-align: left;
    transition: color 0.2s;
}
.team-back-link:hover {
    color: #ef4444;
}

/* Team pricing: header */
.team-header {
    text-align: center;
    width: 100%;
}
.team-header h2 {
    color: var(--text-color);
    font-size: 1.6rem;
    margin-bottom: 4px;
}
.team-header p {
    color: var(--text-secondary, #aaa);
    font-size: 0.95rem;
}

/* --- Individual pricing grid --- */
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* --- Team pricing layout --- */
.pricing-cards--team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

/* Seat panel: the slider spans the top, seats and price read out beneath it */
.team-config {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.team-slider-section {
    padding: 24px 28px 20px;
}
.team-slider-label {
    display: block;
    color: var(--text-secondary, #aaa);
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 14px;
}

/* Range input, restyled so the thumb size is known: the tier bands below are
   inset by half a thumb, so a band edge sits exactly where the thumb's centre
   lands on that tier's first seat. --p (0–1) is the thumb position, set from
   script, and drives the filled part of the track. */
.team-slider {
    --thumb: 20px;
    --p: 0;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--thumb);
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.team-slider:focus-visible {
    outline: none;
}
.team-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--primary-color) 0 calc(var(--thumb) / 2 + var(--p) * (100% - var(--thumb))),
        var(--line-heavy) 0);
}
.team-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--primary-color) 0 calc(var(--thumb) / 2 + var(--p) * (100% - var(--thumb))),
        var(--line-heavy) 0);
}
.team-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--thumb);
    height: var(--thumb);
    margin-top: calc((6px - var(--thumb)) / 2);
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--primary-color), 0 1px 4px var(--shadow-strong);
    transition: box-shadow 0.15s ease;
}
.team-slider::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--thumb);
    height: var(--thumb);
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--primary-color), 0 1px 4px var(--shadow-strong);
    transition: box-shadow 0.15s ease;
}
.team-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--primary-color), 0 0 0 5px rgba(220, 38, 38, 0.25);
}
.team-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--primary-color), 0 0 0 5px rgba(220, 38, 38, 0.25);
}

/* Tier bands under the track, drawn like a dimension string: a rule with
   ticks at each tier boundary, the range and discount set beneath it. */
.team-slider-bands {
    display: grid;
    padding: 0 10px;            /* half of .team-slider's --thumb */
    margin-top: 12px;
}
.team-band {
    position: relative;
    background: none;
    border: none;
    border-top: 1px solid var(--line-heavy);
    padding: 10px 4px 0;
    font: inherit;
    text-align: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, box-shadow 0.2s;
}
.team-band::before,
.team-band:last-child::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 1px;
    height: 9px;
    background: var(--line-hover);
}
.team-band:last-child::after {
    left: auto;
    right: 0;
}
.team-band:hover {
    color: var(--text-color);
}
.team-band--active {
    color: var(--text-color);
    border-top-color: var(--primary-color);
    box-shadow: inset 0 1px 0 var(--primary-color);
}
.team-band-range {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
}
.team-band-discount {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--success);
}
.team-band-discount--none {
    color: var(--text-faint);
}

/* Readout row: seat count beside the price */
.team-config-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
}
.team-seat-readout {
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.team-slider-value {
    color: var(--text-secondary, #aaa);
    font-size: 0.95rem;
}
.team-slider-num {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color);
}
.team-seat-rate {
    color: var(--text-secondary, #aaa);
    font-size: 0.85rem;
    margin-top: 4px;
}

.team-price-summary {
    text-align: center;
    padding: 24px;
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.team-price-label {
    color: var(--text-secondary, #aaa);
    font-size: 0.85rem;
    margin-bottom: 4px;
}
.team-price-amount {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-color);
}
.team-price-amount span {
    font-size: 1rem;
    color: var(--text-secondary, #aaa);
}
.team-price-annual {
    color: var(--text-secondary, #aaa);
    font-size: 0.85rem;
    margin-top: 4px;
}
.team-price-savings {
    color: var(--success);
    font-size: 0.9rem;
    margin-top: 8px;
    min-height: 1.4em;
}
.team-price-savings strong {
    font-weight: 600;
}

@media (max-width: 768px) {
    .team-config-row {
        grid-template-columns: 1fr;
    }
    .team-price-summary {
        border-left: none;
        border-top: 1px solid var(--line);
    }
}

/* Features */
.team-features {
    width: 100%;
    background: var(--surface);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--line);
}
.team-features h3 {
    color: var(--text-color);
    font-size: 1.1rem;
    margin-bottom: 16px;
}
.team-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.team-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #ccc);
    font-size: 0.9rem;
}
.team-feature-item svg {
    flex-shrink: 0;
}

/* Team CTA */
.team-cta {
    width: 100%;
    max-width: 500px;
    font-size: 1.1rem;
    padding: 16px 24px;
}

.team-contact {
    text-align: center;
    color: var(--text-secondary, #888);
    font-size: 0.8rem;
}
.team-contact a {
    color: #dc2626;
    text-decoration: none;
}
.team-contact a:hover {
    text-decoration: underline;
}

/* Responsive: team pricing on mobile */
@media (max-width: 768px) {
    .team-slider-section {
        padding: 20px 16px 16px;
    }
    .team-features-grid {
        grid-template-columns: 1fr;
    }
}

.card {
    background-color: var(--surface);
    padding: 40px 32px;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 1px 4px var(--shadow);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 8px 32px var(--shadow-strong);
    border-color: var(--line-strong);
}

/* Hatch accent in top-right corner of cards */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-3 3l6-6M0 12L12 0M9 15l6-6' stroke='%23dc2626' stroke-width='0.6' opacity='0.12'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    opacity: 0;
    transition: opacity 0.25s ease;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.card:hover::before {
    opacity: 0.6;
}

.card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.card p {
    color: var(--text-secondary);
}

/* Tier badge, with the plan name as a quiet subtitle beneath it. All three marks
   are wide lockups of differing widths but a common 29-unit viewBox height, so the
   box is height-driven and each mark takes whatever width its aspect ratio needs —
   that keeps them optically consistent without a per-tier size override. */
.pricing-tier-badge {
    height: 50px;
    margin: 0 auto 14px;
}

.pricing-tier-badge img {
    display: block;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

#pricing .card h3.pricing-tier-name {
    font-family: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

#pricing .card {
    text-align: center;
    /* Column layout so the CTA can be pinned to the bottom of every card,
       keeping the buttons on one line regardless of feature-list length. */
    display: flex;
    flex-direction: column;
}

/* The CTA (or the team link + CTA group, on Pro Plus) absorbs the leftover
   vertical space so every card's button lands on the same baseline. */
#pricing .card .pricing-cta,
#pricing .card .pricing-team-link-wrap {
    margin-top: auto;
}

#pricing .card .pricing-team-link-wrap ~ .pricing-cta {
    margin-top: 20px;
}

/* Keep the badge a pill instead of stretching to the flex column's width. */
#pricing .card .pricing-popular-badge {
    align-self: center;
}

#pricing .card.popular-card {
    border: 2px solid #dc2626;
}

#pricing .card.popular-card:hover {
    box-shadow: 0 8px 32px var(--shadow-strong), 0 0 40px rgba(220, 38, 38, 0.1);
}

#pricing .price {
    font-size: 3rem;
    font-weight: 700;
    margin: 20px 0;
    color: var(--text-strong);
}

#pricing .price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-faint);
}

#pricing ul {
    list-style: none;
    margin-bottom: 30px;
}

#pricing ul li {
    margin-bottom: 10px;
}

#pricing .card.pro {
    border: 2px solid var(--primary-color);
    transform: scale(1.05);
}

/* ============================================
   HAMBURGER MENU
   ============================================ */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile-only nav items — hidden on desktop */
nav ul li.mobile-only {
    display: none;
}

nav ul li.mobile-only a.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   BREAKPOINT: 1024px — Tablets / Small Laptops
   ============================================ */
@media (max-width: 1024px) {
    #hero h1 {
        font-size: 3.5rem;
    }

    #hero .hero-tagline {
        font-size: 1.15rem;
    }

    .hero-content {
        max-width: 600px;
    }

    #hero .container {
        padding: 0 40px;
    }

    .feature-subsection {
        gap: 30px;
    }

    .feature-text h3 {
        font-size: 1.8rem;
    }

    .feature-text p {
        font-size: 1rem;
    }

    section h2 {
        font-size: 2.2rem;
    }
}

/* ============================================
   BREAKPOINT: 768px — Tablets Portrait / Large Phones
   ============================================ */
@media (max-width: 768px) {
    /* -- Header -- */
    .hamburger {
        display: flex;
    }

    header .container {
        flex-wrap: wrap;
    }

    nav {
        display: none;
        width: 100%;
        order: 3;
        margin: 10px 0 0;
    }

    nav.nav-open {
        display: block;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    nav ul li {
        margin: 0;
    }

    nav ul li a {
        font-size: 1rem;
        padding: 8px 0;
        display: block;
    }

    nav ul li.mobile-only {
        display: list-item;
    }

    nav ul li.mobile-only:first-of-type {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--line-strong);
    }

    .auth-buttons {
        display: none;
    }

    .logo img {
        height: 56px;
    }

    /* 56px still fits here (227px wide against a 728px header), and dropping to
       an off-grid size would cost more than the space it saves. */

    /* -- Hero -- */
    #hero .container {
        padding: 0 30px;
    }

    .hero-content {
        max-width: 100%;
    }

    #hero h1 {
        font-size: 2.75rem;
        line-height: 1.15;
        margin-bottom: 20px;
    }

    #hero .hero-tagline {
        font-size: 1.05rem;
        margin-bottom: 30px;
    }

    .hero-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
        padding: 14px 28px;
        font-size: 1rem;
    }

    /* Minimized hero on mobile */
    .hero-content.minimized .hero-headline {
        font-size: 1.2rem;
    }

    .hero-content.minimized .hero-cta {
        flex-direction: row;
        gap: 10px;
    }

    .hero-content.minimized .hero-cta .btn {
        width: auto;
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    /* -- Sections -- */
    section {
        padding: 40px 0;
    }

    section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    /* -- Features: Stack vertically -- */
    .feature-subsection,
    .feature-subsection.reverse {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 50px;
    }

    .feature-text h3 {
        font-size: 1.6rem;
    }

    .feature-image img {
        max-width: 100%;
    }

    /* -- Video control -- */
    .video-control {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 20px;
    }

    .video-control svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   BREAKPOINT: 480px — Small Mobile Phones
   ============================================ */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .logo img {
        height: 44px;
    }

    /* 28px, not 26px — half of 56 keeps the stems on whole pixels. */
    .logo .logo-mark {
        height: 28px;
    }

    #hero .container {
        padding: 0 20px;
    }

    #hero h1 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    #hero .hero-tagline {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 24px;
    }

    .hero-cta .btn {
        padding: 12px 24px;
        font-size: 0.95rem;
    }

    section {
        padding: 30px 0;
    }

    section h2 {
        font-size: 1.6rem;
        margin-bottom: 24px;
    }

    .feature-text h3 {
        font-size: 1.35rem;
    }

    .feature-text p {
        font-size: 0.95rem;
    }

    .feature-text ul li {
        font-size: 0.9rem;
    }

    .feature-subsection,
    .feature-subsection.reverse {
        margin-bottom: 40px;
    }

    .btn-start-app {
        font-size: 0.7rem;
        gap: 14px;
        padding: 0 14px;
        padding-right: 0;
    }

    .profile-icon {
        width: 30px;
        height: 30px;
    }

    .profile-icon svg {
        width: 20px;
        height: 20px;
    }

    .video-control {
        width: 36px;
        height: 36px;
        bottom: 15px;
        right: 15px;
    }

    .video-control svg {
        width: 18px;
        height: 18px;
    }
}

/* Short portrait screens (a phone's visible viewport, browser bars showing). The hero is one
   screen tall (100svh), so pull the text up under the header and tighten it until the headline,
   both calls to action and the reel's readout strip fit. If a screen is too short even so,
   script.js holds the readout below the fold until the hero collapses. */
@media (orientation: portrait) and (max-width: 768px) and (max-height: 760px) {
    #hero .container {
        top: 84px;
    }

    #hero .hero-eyebrow {
        margin-bottom: 12px;
    }

    #hero h1 {
        font-size: 1.9rem;
        line-height: 1.12;
        margin-bottom: 12px;
    }

    #hero .hero-tagline {
        font-size: 0.92rem;
        line-height: 1.45;
        margin-bottom: 18px;
    }

    .hero-cta {
        flex-direction: row;
        gap: 10px;
    }

    .hero-cta .btn {
        flex: 1 1 0;
        padding: 11px 12px;
        font-size: 0.92rem;
    }
}

footer {
    background: var(--footer-wash);
    padding: 40px 0 20px;
    border-top: 1px solid var(--line);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 800px;
    margin: 0 auto;
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-logo img {
    height: 60px;
    width: auto;
    /* The ACL mark ships as solid white artwork, so it has to be flattened for
       the light theme; combined with the opacity below it lands on charcoal. */
    filter: var(--logo-filter);
    opacity: 0.7;
    pointer-events: none;
}

.footer-divider {
    width: 1px;
    height: 120px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--divider-line) 50%,
        transparent 100%
    );
}

.footer-right {
    display: flex;
    align-items: center;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-copyright {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

.footer-copyright p {
    margin: 0;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-divider {
        width: 120px;
        height: 1px;
        background: linear-gradient(
            to right,
            transparent 0%,
            var(--divider-line) 50%,
            transparent 100%
        );
    }
    
    .footer-links {
        align-items: center;
        gap: 15px;
    }
    
    .footer-logo img {
        height: 50px;
    }
}

/* ============================================
   HERO STATS STRIP (floating)
   ============================================ */
.hero-stats {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: calc(100% - 60px);
    max-width: 1140px;
    z-index: 10;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    padding: 14px 18px;
    box-shadow: 0 10px 40px var(--shadow-strong);
    opacity: 0;
    animation: heroStatsIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards 1.4s;
}

@keyframes heroStatsIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes headerSlideIn {
    from { transform: translateX(-50%) translateY(-100%); }
    to   { transform: translateX(-50%) translateY(0); }
}

@keyframes bgSlideIn {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes textAssemble {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-stat {
    flex: 1 1 0;
    padding: 6px 22px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hero-stat:last-of-type {
    border-right: none;
}

.hero-stat-num {
    font-family: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--text-color);
    letter-spacing: 0.01em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-stat-num span {
    color: var(--primary-color);
}

.hero-stat-label {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 0.625rem;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-stats .video-control {
    align-self: center;
    margin-left: 14px;
    margin-right: 4px;
}

/* Held below the fold while expanded hero text needs the room (script.js, very short screens). */
.hero-stats {
    transition: translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#hero.stats-deferred .hero-stats {
    translate: 0 calc(100% + 40px);
}

/* ---- Hero feature readout (script.js) ----
   Once the reel's caption cues load, the stats strip becomes a caption track for the video:
   a feature counter, the feature on screen with its one-liner, what's up next, and one segment
   per feature along the bottom edge, filling as the reel plays. */
.hero-stats.is-live .hero-stat {
    /* The static stats stay in the page for screen readers; the readout is aria-hidden. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hero-readout {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    position: relative;
}

.hero-readout-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 6px 22px;
    border-right: 1px solid var(--line);
}

.hero-readout-count { flex: 0 0 auto; }
.hero-readout-now { flex: 1.7 1 0; }
.hero-readout-next { flex: 1 1 0; border-right: none; }

/* Scrambling glyphs overrun the box for a frame or two; clip rather than flash an ellipsis. */
.hero-readout .hero-stat-num { text-overflow: clip; }

/* Counter: two rolling digit wheels over the total. */
.hero-readout-count .hero-stat-num em {
    font-style: normal;
    font-size: 0.6em;
    color: var(--text-faint);
    margin-left: 2px;
}

.hero-roll {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
}

.hero-roll b {
    display: block;
    font-weight: inherit;
    line-height: 1;
    white-space: pre;
}

/* The one-liner types out behind a block caret. */
.hero-readout-caret {
    display: inline-block;
    width: 0.6em;
    height: 0.95em;
    margin-left: 2px;
    vertical-align: -0.12em;
    background: var(--primary-color);
    visibility: hidden;
}

.hero-readout-caret.is-on { visibility: visible; }

.hero-readout-next .hero-stat-num {
    font-size: 1.3rem;
    color: var(--text-faint);
    margin-bottom: 6px;
}

.hero-readout-next .hero-stat-num span { color: inherit; }

.hero-readout-track {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -9px;
    display: flex;
    gap: 4px;
    pointer-events: none;
}

.hero-readout-track i {
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: var(--line-strong);
    overflow: hidden;
}

.hero-readout-track i::after {
    content: '';
    display: block;
    height: 100%;
    background: var(--primary-color);
    transform: scaleX(var(--p, 0));
    transform-origin: left center;
}

.hero-readout-track i.is-past::after { background: var(--text-faint); }

@media (max-width: 1024px) {
    .hero-readout-cell { padding: 6px 16px; }
    .hero-readout-track { left: 16px; right: 16px; }
    .hero-readout-next .hero-stat-num { font-size: 1.15rem; }
}

@media (max-width: 768px) {
    .hero-readout-cell { padding: 4px 10px; }
    .hero-readout-now { border-right: none; }
    .hero-readout-next { display: none; }
    .hero-readout-track { left: 10px; right: 10px; bottom: -6px; }
}

/* The smallest phones: tighten the one-liner so the longest caption still fits. */
@media (max-width: 400px) {
    .hero-readout-now .hero-stat-label { letter-spacing: 0.05em; }
}

/* ============================================
   FEATURES SECTION (new card grid)
   ============================================ */
.features-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
    max-width: 1120px;
    margin: 0 auto 64px;
}

.features-headline {
    font-family: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.15;
    color: var(--text-color);
}

.features-headline .rule {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--primary-color);
    margin-bottom: 20px;
    border-radius: 2px;
}

.features-intro {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
    padding-bottom: 8px;
}

/* --- Full-height feature sections -------------------------------------------
   One screenshot per feature, sized by HEIGHT so it is never cropped, with the
   outer edge running off the page. The bleed is what lets the image own most of
   the section's height without shrinking the type beside it.

   These are dark app captures, so the two themes need opposite help: on the
   light page contrast alone separates the shot, while on the near-black page
   the shadow has nothing to work against and a hairline ring does the job.

   --media-h is per-row on purpose. It sets the image's height, which sets its
   width, which sets how much runs off the edge — so a section whose screenshot
   has content near the bleeding edge gets a smaller value. See .feature-row--tight.
   -------------------------------------------------------------------------- */

.feature-row {
    --media-h: min(76vh, 860px);
    --pool-x: 72%;

    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: center;
    /* No horizontal padding: the media column has to reach the viewport edge or
       the bleed reads as a wide margin instead of a bleed. */
    padding: clamp(64px, 8vh, 112px) 0;
    background: var(--features-wash);
    border-top: 1px solid var(--line-heavy);
    overflow: hidden;                 /* this is what trims the bleed */
}

.feature-row:last-child {
    border-bottom: 1px solid var(--line-heavy);
}

/* Mirrored rows put the copy on the right. Source order stays copy-then-media
   so tab order never zig-zags, which means the column widths have to swap too
   or the image would land in the narrow column. */
.feature-row--mirror {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    --pool-x: 28%;
}

.feature-row--mirror .feature-row-content { order: 2; }
.feature-row--mirror .feature-row-media   { order: 1; }

/* Shorter image, so less of it runs off the page. For rows whose screenshot
   carries UI right up against the bleeding edge. */
.feature-row--tight { --media-h: min(69vh, 780px); }

/* No drafting grid here. These rows used to carry --pattern-grid on a ::before,
   but with the wash doing the work the grid only added noise behind the
   screenshot. The token stays — #pricing and .hero-overlay-grid still use it —
   and ::before is now free if a row ever needs a layer of its own. */

/* A pool of light under the image so it reads as lit rather than pasted on. */
.feature-row::after {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--pool-x);
    width: 90vh;
    height: 90vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, var(--feature-pool), transparent 72%);
    pointer-events: none;
}

/* Snap the full-height rows, but only where a row actually fills the screen.
   Below that the rows stack and snapping would fight the scroll. */
@media (min-width: 1025px) and (min-height: 620px) {
    html { scroll-snap-type: y proximity; }
    .feature-row { scroll-snap-align: start; }
}

/* Copy panel */
.feature-row-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Rows with the copy on the left start it on the header's inner edge, so
       the text hangs off the same spine as the nav rather than floating out
       toward the viewport edge. The header is a centred 1200px bar carrying
       .container's 20px, which puts its content at:
           max(20px, (100vw - 1200px) / 2)  +  20px
       Mirrored rows override this below, so it only lands on 01 and 03. */
    padding-left: max(40px, calc((100vw - 1200px) / 2 + 20px));
    padding-right: clamp(28px, 3vw, 56px);
}

.feature-row--mirror .feature-row-content {
    padding-left: clamp(28px, 3vw, 56px);
    padding-right: clamp(32px, 7vw, 132px);
}

/* The floating media */
.feature-row-media {
    position: relative;
    z-index: 1;
    height: var(--media-h);
}

/* The floating mockup — see "Feature mockups" at the end of this sheet. */

/* ---- Feature glyph -----------------------------------------
   One diagrammatic glyph per row, replacing the five small icons
   in a red circle each row used to carry. Each glyph is a piece
   of real drafting notation — a setting-out point, a dimension
   chain, entourage in elevation, a drawing set — and each is
   drawn in exactly two line weights, the way a drawing is: an
   object line and a construction hairline. Red is not decoration
   here; it marks the one element carrying the meaning, and never
   more than one per glyph.

   No container. The corner registration ticks are the whole
   frame, so the glyph reads as linework sitting on the sheet
   rather than an icon in a chip. Alternative grounds (detail
   plate, blueprint plate, poché) were drawn and are kept in
   prototype-feature-glyphs.html if this ever needs to change.

   The SVGs are inlined per row rather than pulled from a
   <symbol> sprite: a <use> puts a shadow tree between this
   stylesheet and the linework, and these class rules would not
   cross it. Inline, they apply normally.
   ------------------------------------------------------------ */
.feature-glyph {
    --g-ink:    var(--text-color);
    --g-faint:  var(--line-hover);
    --g-accent: var(--primary-color);
    --g-paper:  var(--glyph-paper);

    position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 96px;
    height: 96px;
    margin-bottom: 34px;
}

.feature-glyph svg {
    width: 100%;
    height: 100%;
    display: block;
    /* The setting-out centrelines and the dimension ticks run past
       the 96-unit box on purpose — that overshoot is what makes
       them read as construction lines rather than as edges. */
    overflow: visible;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

/* Registration ticks, opposite corners only. */
.feature-glyph::before,
.feature-glyph::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border-color: var(--g-faint);
    border-style: solid;
    pointer-events: none;
}

.feature-glyph::before { top: -10px;    left: -10px;  border-width: 1px 0 0 1px; }
.feature-glyph::after  { bottom: -10px; right: -10px; border-width: 0 1px 1px 0; }

/* The two line weights, plus poché and the accent. Nothing in a
   glyph paints outside these six classes. */
.feature-glyph .ln      { fill: none; stroke: var(--g-ink); stroke-width: 1.7; }
.feature-glyph .hl      { fill: none; stroke: var(--g-faint); stroke-width: 0.85; }
.feature-glyph .cl      { fill: none; stroke: var(--g-faint); stroke-width: 0.85; stroke-dasharray: 13 3 2.5 3; }
.feature-glyph .ac      { fill: none; stroke: var(--g-accent); stroke-width: 1.7; }
.feature-glyph .ac-hl   { fill: none; stroke: var(--g-accent); stroke-width: 0.85; }
.feature-glyph .acf     { fill: var(--g-accent); stroke: none; }
.feature-glyph .inkf    { fill: var(--g-ink); stroke: none; }
.feature-glyph .po      { fill: var(--g-ink); fill-opacity: 0.07; stroke: none; }

/* An object line round a poché'd mass — the common case, so it
   gets its own class rather than two elements stacked. */
.feature-glyph .mass    { fill: var(--g-ink); fill-opacity: 0.07; stroke: var(--g-ink); stroke-width: 1.7; }
.feature-glyph .ac-mass { fill: var(--g-accent); fill-opacity: 0.07; stroke: var(--g-accent); stroke-width: 1.7; }

/* Paper, as distinct from poché. Poché is a tint of the ink, so it
   always sits darker than the ground; a sheet has to sit lighter or
   it reads as a slab rather than as something you could draw on. */
.feature-glyph .paper   { fill: var(--g-paper); stroke: var(--g-ink); stroke-width: 1.7; }

/* No text rule here on purpose. The dimension chain carried a
   reading in DM Mono and it was dropped: at 96px a number is a
   texture rather than a value, and the string reads as a string
   without one. Nothing in a glyph sets type — if that changes,
   the mono the section labels use is the one to reach for. */

.feature-title {
    font-family: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 2.6vw, 2.7rem);
    line-height: 1.08;
    color: var(--text-color);
    margin-bottom: 16px;
}

.feature-desc {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 24px;
    max-width: 480px;
}

.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feature-list li {
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding-left: 20px;
    position: relative;
    line-height: 2;
}

.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* Stacked. Below this the columns cannot sit side by side, so the rows stop
   being viewport-height and the image gets a fixed canvas instead. */
@media (max-width: 1024px) {
    .feature-row,
    .feature-row--mirror {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 64px 0 0;
        row-gap: 36px;
    }

    /* Undo the mirror: a left bleed would fight the text's left alignment. */
    .feature-row--mirror .feature-row-content,
    .feature-row--mirror .feature-row-media { order: 0; }

    .feature-row-content,
    .feature-row--mirror .feature-row-content {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Set on the consumer so it beats the inherited value, --tight included. */
    .feature-row-media { --media-h: min(46vh, 360px); }

    .feature-row-media .mock,
    .feature-row--mirror .feature-row-media .mock {
        left: 24px;
        right: auto;
    }

    /* Smaller, and sitting closer to the title, once the rows stack.
       The registration ticks stay at 9px — they read as ticks, not
       as a frame, so they should not scale with the drawing. */
    .feature-glyph {
        width: 80px;
        height: 80px;
        margin-bottom: 26px;
    }
}

/* ============================================
   SECTION LABEL (shared)
   ============================================ */
.section-label {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.section-label::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: var(--primary-color);
}

/* ============================================
   HOW IT WORKS
   ============================================ */
#how-it-works {
    padding: 120px 0;
    background: var(--bg-raised);
    position: relative;
    overflow: hidden;
}

/* Square dot-grid background */
#how-it-works::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pattern-dots);
    background-size: 32px 32px;
    pointer-events: none;
}

#how-it-works .container {
    position: relative;
    z-index: 1;
}

.how-header {
    text-align: center;
    margin-bottom: 80px;
}

.how-header .section-label {
    margin-left: auto;
    margin-right: auto;
}

.how-headline {
    font-family: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.15;
    color: var(--text-color);
    margin-bottom: 12px;
}

.how-headline span {
    color: var(--primary-color);
}

.how-sub {
    font-size: 1.05rem;
    color: var(--text-secondary);
}

/* Panorama illustration: three scenes flow left to right, copy in three columns beneath */
#how-it-works {
    --hiw-paper: #ffffff;
    --hiw-ink: #23272e;
    --hiw-ui: #7d848d;
    --hiw-plan: #9aa1aa;
    --hiw-plan-strong: #5f6772;
    --hiw-bar: #e2e2df;
    --hiw-track: #dcdcd9;
}

html[data-theme="dark"] #how-it-works {
    --hiw-paper: #1e2228;
    --hiw-ink: #e6e8eb;
    --hiw-ui: #8b929a;
    --hiw-plan: #6b737d;
    --hiw-plan-strong: #aab0b8;
    --hiw-bar: #2c313a;
    --hiw-track: #333941;
}

.how-flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1360px;
    margin: 0 auto;
}

.how-figure {
    margin: 0;
    width: 100%;
}

.how-figure svg,
.how-step-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    margin: 0 auto;
    width: 100%;
}

.how-step {
    text-align: center;
    padding: 0 12px;
}

.how-step-figure {
    display: none;
    max-width: 360px;
    margin: 0 auto 12px;
}

.how-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #ffffff;
    font-family: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px var(--shadow);
}

.step-title {
    font-family: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-color);
    margin-bottom: 16px;
}

.step-desc {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* ============================================
   PRICING COMPARISON TABLE
   ============================================ */
.pricing-table-wrap {
    margin-top: 32px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-table-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 18px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: all 0.25s ease;
    width: 100%;
    text-align: left;
    color: var(--text-strong);
    font-family: inherit;
}

.pricing-table-toggle:hover {
    background: var(--surface-alt);
    border-color: #dc2626;
    color: #dc2626;
}

.pricing-table-toggle span {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.toggle-arrow {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.toggle-arrow.open {
    transform: rotate(180deg);
}

.pricing-table {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    transition: max-height 0.5s ease, margin-top 0.3s ease, opacity 0.4s ease;
    opacity: 0;
}

.pricing-table.open {
    max-height: 3000px;
    margin-top: 12px;
    opacity: 1;
}

.pt-header {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
}

.pt-header-cell {
    padding: 16px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    /* Tier columns (Lite / Pro / Pro Plus) are centred; the Feature column below
       opts back out to the left. */
    text-align: center;
}

.pt-header-cell:first-child {
    text-align: left;
}

.pt-header-cell.featured-col {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

.pt-row {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    border-bottom: 1px solid var(--line);
    transition: background 0.15s ease;
}

.pt-row:last-child {
    border-bottom: none;
}

.pt-row:hover {
    background: var(--surface-alt);
}

/* Compound selector, not bare .pt-group-label: the .pt-cell block below it in
   this file has equal specificity and would otherwise win on source order —
   which is why the declarations here originally needed !important. */
.pt-cell.pt-group-label {
    grid-column: 1 / -1;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-strong) !important;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.pt-cell {
    padding: 14px 20px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
}

.pt-cell.feature-name {
    font-weight: 500;
    color: var(--text-strong);
    padding-left: 36px;
    justify-content: flex-start;
    text-align: left;
}

.pt-cell.featured-col {
    background: rgba(220, 38, 38, 0.08);
}

.pt-cell .check {
    color: #dc2626;
    font-size: 1.1rem;
    font-weight: 700;
}

.pt-cell .dash {
    color: var(--text-faint);
    font-size: 1rem;
    line-height: 1;
}

.pt-cell.pt-val {
    font-weight: 500;
    color: var(--text-strong);
}

/* ============================================
   FOOTNOTES (pricing cards + comparison table)
   ============================================ */
.footnote-refs,
sup.footnote-ref {
    font-size: 0.62em;
    line-height: 0;
    vertical-align: super;
    margin-left: 2px;
    color: var(--primary-color);
    font-weight: 600;
}

.footnote-refs .footnote-ref {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
}

.footnote-refs .footnote-ref:hover,
.footnote-refs .footnote-ref:focus-visible {
    text-decoration: underline;
}

.footnote-refs .footnote-sep {
    color: inherit;
    margin: 0 1px;
}

.pricing-footnotes {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    max-width: 900px;
}

.pricing-footnotes li {
    display: flex;
    gap: 8px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.pricing-footnotes li:last-child {
    margin-bottom: 0;
}

.pricing-footnotes li:target {
    color: var(--text-strong);
}

.pricing-footnotes .footnote-marker {
    flex-shrink: 0;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.66rem;
    line-height: 1.9;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   RESPONSIVE OVERRIDES for new sections
   ============================================ */
@media (max-width: 1024px) {
    .features-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero-stat {
        padding: 6px 16px;
    }

    .hero-stat-num {
        font-size: 1.45rem;
    }

    .hero-stat-label {
        font-size: 0.58rem;
    }
}

@media (max-width: 900px) {
    .how-figure {
        display: none;
    }

    .how-steps {
        grid-template-columns: 1fr;
        gap: 44px;
        max-width: 440px;
    }

    .how-step-figure {
        display: block;
    }
}

@media (max-width: 768px) {
    .hero-eyebrow {
        font-size: 0.68rem;
        margin-bottom: 16px;
        /* Wraps on phones; keep its lines clear of the collapse chevron in the corner. */
        padding-right: 48px;
    }

    .hero-stats {
        bottom: 16px;
        width: calc(100% - 32px);
        padding: 10px 12px;
        border-radius: 16px;
        gap: 0;
    }

    .hero-stat {
        padding: 4px 10px;
    }

    .hero-stat:nth-of-type(3),
    .hero-stat:nth-of-type(4) {
        display: none;
    }

    .hero-stat-num {
        font-size: 1.25rem;
    }

    .hero-stat-label {
        font-size: 0.55rem;
        letter-spacing: 0.08em;
    }

    .hero-stats .video-control {
        width: 36px;
        height: 36px;
        margin-left: 8px;
    }

    .hero-stats .video-control svg {
        width: 14px;
        height: 14px;
    }

    .feature-title {
        font-size: 1.35rem;
    }

    .pt-header,
    .pt-row {
        grid-template-columns: 1.8fr 1fr 1fr 1fr;
    }

    .pt-cell,
    .pt-header-cell {
        padding: 12px 10px;
        font-size: 0.75rem;
    }

    .pricing-table-toggle {
        padding: 14px 18px;
    }

}

@media (max-width: 480px) {
    .hero-stats {
        bottom: 12px;
        width: calc(100% - 24px);
        padding: 8px 10px;
    }

    .hero-stat:nth-of-type(2) {
        display: none;
    }

    .pt-header-cell {
        letter-spacing: 0.08em;
    }

    .pt-cell,
    .pt-header-cell {
        padding: 10px 8px;
        font-size: 0.7rem;
    }
}

/* ============================================
   THEME TOGGLE
   ============================================ */
/* Reads as one of the nav items rather than a button: no chrome of its own,
   and it takes the same resting and hover colours as the Features / Pricing
   links beside it. The 36px box is kept purely as a comfortable hit target;
   the radius only shapes the focus ring. */
.theme-toggle {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.25s ease;
}

.theme-toggle:hover {
    color: var(--text-color);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Show the mode you would switch TO: a moon while light, a sun while dark. */
.theme-toggle .icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

@media (max-width: 768px) {
    /* .auth-buttons is hidden at this width, so the toggle moves over to sit
       beside the hamburger. nav is already order: 3 and wraps to its own row. */
    .theme-toggle {
        order: 1;
        margin-left: auto;
        margin-right: 12px;
    }

    .hamburger {
        order: 2;
    }
}

/* ============================================
   THEME CROSSFADE
   ============================================ */

/* Where View Transitions are supported the whole page crossfades, including the
   drafting patterns, the tier badge art and the footer logo's filter. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fallback everywhere else: transition the colour properties for the length of
   the swap. script.js adds .theme-fading, then removes it once the fade ends.
   Patterns and filters snap rather than fade in this path. */
html.theme-fading,
html.theme-fading *,
html.theme-fading *::before,
html.theme-fading *::after {
    transition: background-color 300ms ease,
                color 300ms ease,
                border-color 300ms ease,
                box-shadow 300ms ease,
                fill 300ms ease,
                stroke 300ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    html.theme-fading,
    html.theme-fading *,
    html.theme-fading *::before,
    html.theme-fading *::after {
        transition: none !important;
    }
}


/* ==========================================================================
   Feature mockups — the app rendered as inert HTML over a raster sheet.

   Each feature row's media is a .mock: an app window built from the app's
   own tokens and icons (packages/core/src/theme/tokens.ts in the redline
   repo), with the drawing on the canvas as the only raster. The shared
   chrome — tab bar, rail, tool strip, status bar — lives once in
   <template id="mock-chrome"> and script.js clones it into every stage; the
   left panel, the Properties panel, the sheet cut and any dialog are inline
   per row.

   Geometry: a stage is authored at its capture's size in CSS px (the
   captures are 1:1) and scaled to the row's --media-h with one transform.
   Positions are measured from the captures; where the app's Tailwind
   classes disagreed with a capture, the capture won. The tool strip is
   centred and the Properties panel is right-anchored, which is how the app
   lays out at any window width, so one chrome fits every capture size.

   Inert: aria-hidden, spans and divs only, nothing focusable, user-select
   none. Hover is plain :hover — no `inert`, which would also drop hit-testing
   and with it the hover. Nothing translates on pointer move: a fractional
   translate on the scaled stage resamples every hairline and glyph.
   ========================================================================== */

.feature-row-media .mock {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    /* aspect-ratio is set inline per row to the capture's size */
    border-radius: 18px;
    overflow: hidden;
    background: var(--shot-bg);
    box-shadow:
        0 0 0 1px var(--shot-ring),
        0 30px 70px -22px var(--shadow-strong),
        0 10px 28px -12px var(--shadow);
    transition: box-shadow .5s ease;
}
.feature-row--mirror .feature-row-media .mock { left: auto; right: 0; }
.feature-row-media:hover .mock {
    box-shadow:
        0 0 0 1px var(--shot-ring),
        0 44px 90px -26px var(--shadow-strong),
        0 14px 34px -12px var(--shadow);
}

/* The stage scale, --s, is set by script.js from the .mock's height (the
   ratio to the stage's inline height). A CSS tan(atan2(100cqh, height))
   expression did this before, but Safari resolves it wrongly while passing
   @supports, so it is script-only now. 0 until the script runs, so an
   unscaled stage never flashes. */
.mock-stage {
    --s: 0;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(var(--s));
    transform-origin: 0 0;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;

    --m-bg: #17181b;
    --m-panel: #121216;
    --m-edge: #262c3b;
    --m-raised: #262c3b;
    --m-raised-2: #333a4d;
    --m-field: #1a1e2b;
    --m-field-border: #333a4d;
    --m-btn: #1a1d25;
    --m-btn-hover: #262c3b;
    --m-btn-border: #52525b;
    --m-text: #eef1f6;
    --m-text-2: #a8b0c0;
    --m-text-3: #6d7688;
    --m-zinc-200: #e4e4e7;
    --m-zinc-300: #d4d4d8;
    --m-zinc-400: #a1a1aa;
    --m-accent: #ff8a4c;
    --m-accent-light: #ffa877;
    --m-ink: #150a04;
    --m-status-border: #374151;
    --m-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);
    --m-mono: Consolas, "Cascadia Mono", ui-monospace, "SF Mono", Menlo, monospace;

    font-family: "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.333;
    color: var(--m-text);
    background: var(--m-bg);
    -webkit-font-smoothing: antialiased;
}
.mock-stage *, .mock-stage *::before, .mock-stage *::after { box-sizing: border-box; }
.mock-stage svg { display: block; }

/* Layers, bottom to top: sheet, drawing, edge chrome, floating chrome and
   panels, scrim, dialog. Explicit so the cloned chrome can be inserted
   anywhere in the stage. */
.m-sheet { position: absolute; left: 70px; right: 0; z-index: 0; }
/* Outranks the old `.feature-row-media img` rules by specificity and resets
   them; geometry is inline per row. */
.feature-row-media .mock-stage img.m-canvas {
    position: absolute; right: auto; max-width: none; display: block;
    border-radius: 0; background: none; box-shadow: none; transform: none; transition: none; will-change: auto;
    z-index: 1;
}
.m-tabbar, .m-rail, .m-status { z-index: 2; }
.m-handle { position: absolute; z-index: 2; width: 6px; height: 6px; background: #0ea5e9; }
.m-toolbar, .m-panel { z-index: 3; }
.m-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(6, 8, 13, .55); }
.m-modal-pos { position: absolute; z-index: 5; }

/* ---- Tab bar ------------------------------------------------------------ */

.m-tabbar {
    position: absolute; left: 0; top: 0; right: 0; height: 44px;
    background: var(--m-panel);
    display: flex; align-items: center;
    padding-left: 5px;
}
.m-tab {
    display: flex; align-items: center;
    height: 36px; min-width: 200px;
    font-size: 13px; font-weight: 500;
    color: var(--m-text-2);
    border-radius: 10px;
    transition: color .12s ease;
}
.m-tab:first-child { margin-left: 5px; }
.m-tab[data-active], .m-tab:hover { color: var(--m-accent); }
.m-tab svg { width: 8px; height: 36px; flex: none; opacity: .5; }
.m-tab .dot { margin-left: 4px; font-size: 14px; line-height: 1; color: #fb923c; transform: translateY(-2px); }
.m-tab .name {
    flex: 1; max-width: 164px; padding: 0 6px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transform: translateY(-2px);
}
.m-tab .close { width: 18px; text-align: center; font-size: 20px; line-height: 1; opacity: 0; transform: translateY(-3px); transition: opacity .12s; }
.m-tab:hover .close { opacity: .6; }
.m-tab-add {
    height: 36px; padding: 0 12px; display: flex; align-items: center;
    font-size: 24px; line-height: 1; color: var(--m-text-2); border-radius: 10px;
    transform: translateY(-1px);
}
.m-tab-add:hover { color: var(--m-accent); }

/* ---- Rail --------------------------------------------------------------- */

.m-rail {
    position: absolute; left: 0; top: 44px; width: 70px; bottom: 37px;
    background: linear-gradient(90deg, #151619 0%, #17171a 28%, #262628 57%, #3c3c3e 83%, #464748 100%);
}
.m-rail-btn {
    position: absolute; left: 20px;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--m-panel);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    display: flex; align-items: center; justify-content: center;
    color: var(--m-text);
    transition: color .12s ease;
    z-index: 1;
}
.m-rail-btn svg { width: 16px; height: 16px; }
.m-rail-btn:hover, .m-rail-btn[data-active] { color: var(--m-accent); }
/* Fillet bridging the active button into the panel — ContentPanelTabs.tsx. */
.m-rail-notch { position: absolute; left: 40px; width: 30px; height: 90px; color: var(--m-panel); }
.m-rail-mark { position: absolute; left: 17px; bottom: 26px; width: 46px; opacity: .55; }

/* ---- Floating panels ---------------------------------------------------- */

.m-panel {
    position: absolute; top: 51px; bottom: 50px;
    background: var(--m-panel);
    border: 1px solid var(--m-edge);
    border-radius: 12px;
    box-shadow: var(--m-shadow-2xl);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.m-left  { left: 70px;  width: 256px; }
.m-props { right: 13px; width: 320px; }

.m-phead {
    flex: none; height: 44px; padding: 0 8px 0 12px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--m-edge);
    font-size: 14px; font-weight: 500;
}
.m-phead .acts { display: flex; gap: 4px; }
.m-field {
    position: relative; height: 26px;
    background: var(--m-field);
    border: 1px solid var(--m-field-border);
    border-radius: 10px;
    color: var(--m-text-3);
    font-size: 12px;
    display: flex; align-items: center;
    padding-left: 28px;
    white-space: nowrap; overflow: hidden;
    transition: border-color .12s;
}
.m-field svg { position: absolute; left: 8px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); opacity: .4; }
.m-field:hover { border-color: #454e63; }
.m-field.focus { border-color: var(--m-accent); }
.m-ibtn { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--m-text-2); transition: background-color .12s, color .12s; }
.m-ibtn svg { width: 14px; height: 14px; }
.m-ibtn:hover { background: var(--m-raised); color: var(--m-text); }
.m-hr { border-top: 1px solid var(--m-edge); margin: 16px 0; }
.m-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--m-text-2); margin-bottom: 10px; }
.m-eyebrow.row { display: flex; align-items: center; justify-content: space-between; }

/* Generic buttons (rdl-btn variants) */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background-color .12s, border-color .12s, color .12s; }
.m-btn svg { width: 14px; height: 14px; }
.m-btn.primary { background: var(--m-accent); color: var(--m-ink); }
.m-btn.primary:hover { background: var(--m-accent-light); }
.m-btn.secondary { background: var(--m-raised); color: var(--m-text); }
.m-btn.secondary:hover { background: var(--m-raised-2); }
.m-btn.outline { border: 1px solid var(--m-raised-2); color: var(--m-text); }
.m-btn.outline:hover { background: var(--m-raised); }
.m-btn.dim { opacity: .4; }
.m-btn.big { height: 36px; font-size: 13px; padding: 0 14px; }
.m-btn.open { height: 26px; padding: 0 12px; border-radius: 6px; background: #c2622f; color: #fff; font-size: 13px; font-weight: 500; }
.m-btn.open:hover { background: var(--m-accent); }
.m-btn.sync { height: 26px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 500; }
.m-btn.sync svg { width: 13px; height: 13px; }

/* Object Library */
.m-lib-search { flex: none; padding: 12px; border-bottom: 1px solid var(--m-edge); }
.m-lib-cats {
    flex: none; padding: 8px 12px; border-bottom: 1px solid var(--m-edge);
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.m-chip {
    height: 26px; padding: 0 8px;
    border-radius: 4px; border: 1px solid var(--m-raised-2);
    background: var(--m-raised); color: var(--m-text);
    font-size: 12px; text-align: center; line-height: 24px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color .12s, color .12s;
}
.m-chip:hover { background: var(--m-raised-2); color: #fff; }
.m-chip[data-active], .m-chip[data-active]:hover { background: var(--m-accent); color: #000; border-color: var(--m-accent-light); }
.m-lib-grid {
    flex: 1; min-height: 0; overflow: hidden; position: relative;
    padding: 12px 18px 12px 12px;
    display: grid; grid-template-columns: 108px 108px; gap: 20px 8px; align-content: start;
}
.m-lib-scroll { position: absolute; right: 3px; top: 12px; width: 6px; height: 760px; }
.m-lib-scroll::after { content: ''; position: absolute; left: 0; top: 0; width: 6px; height: 118px; border-radius: 3px; background: #3a3f4d; }
.m-tile { display: flex; flex-direction: column; gap: 6px; align-self: start; }
.m-tile-art {
    height: 108px; padding: 8px;
    border-radius: 8px; border: 1px solid var(--m-raised-2);
    background: var(--m-raised);
    color: #cfd4dc;
    transition: border-color .12s, color .12s;
}
.m-tile--tall .m-tile-art { height: 220px; }
.m-tile--toilet .m-tile-art { height: 167px; }
.m-tile-art svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.m-tile-art svg .dash { stroke-dasharray: 3 3; }
.m-tile-art svg .thin { stroke-width: 1; }
.m-tile-art svg text { fill: currentColor; stroke: none; font-size: 12px; font-family: inherit; }
.m-tile-name { font-size: 12px; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--m-text); transition: color .12s; }
.m-tile:hover .m-tile-art { border-color: var(--m-accent); color: #fff; }
.m-tile:hover .m-tile-name { color: #fff; }
.m-lib-foot { flex: none; padding: 8px; background: var(--m-raised); border-top: 1px solid var(--m-edge); font-size: 12px; text-align: center; }

/* Thumbnails */
.m-thumbs { flex: 1; padding: 16px 8px; }
.m-thumb { display: flex; gap: 8px; align-items: flex-start; }
.m-thumb-page { width: 142px; height: 92px; flex: none; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--m-raised-2); transition: box-shadow .12s; }
.m-thumb:hover .m-thumb-page { box-shadow: 0 0 0 2px var(--m-accent); }
.feature-row-media .mock-stage .m-thumb-page img { display: block; width: 142px; height: 92px; max-width: none; border-radius: 0; box-shadow: none; transform: none; }
.m-thumb-meta { flex: 1; min-width: 0; text-align: center; padding-top: 16px; }
.m-thumb-meta .no { font-family: var(--m-mono); font-size: 12px; font-weight: 700; }
.m-thumb-meta .title { font-size: 11px; line-height: 1.3; color: var(--m-text-2); margin-top: 4px; }
.m-thumbs-foot { flex: none; padding: 0 8px 12px; display: flex; gap: 10px; }
.m-obtn { width: 48px; height: 36px; border: 1px solid var(--m-raised-2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--m-text); transition: background-color .12s; }
.m-obtn.wide { flex: 1; }
.m-obtn svg { width: 18px; height: 18px; }
.m-obtn:hover { background: var(--m-raised); }

/* Cloud Storage */
.m-cloud { flex: 1; min-height: 0; overflow: hidden; padding: 14px 16px; }
.m-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-account { border: 1px solid var(--m-raised-2); border-radius: 8px; padding: 14px 6px 12px; text-align: center; transition: border-color .12s; }
.m-account:hover { border-color: var(--m-accent); }
.m-account svg { width: 24px; height: 24px; margin: 0 auto 10px; color: #8b93a3; }
.m-account .nm { font-size: 12px; font-weight: 600; }
.m-account .st { font-size: 11px; color: var(--m-text-3); margin-top: 6px; }
.m-account .st .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6d7688; margin-right: 6px; vertical-align: 1px; }
.m-account.on { border-color: #22c55e; }
.m-account .st.on { color: #4ade80; }
.m-account .st.on .dot { background: #22c55e; }
.m-subtabs { display: flex; border-bottom: 1px solid var(--m-edge); margin-bottom: 10px; font-size: 13px; color: var(--m-text-2); }
.m-subtabs > span { padding: 6px 8px 8px; white-space: nowrap; transition: color .12s; }
.m-subtabs > span:hover { color: var(--m-text); }
.m-subtabs > .on, .m-subtabs > .on:hover { color: var(--m-accent); border-bottom: 2px solid var(--m-accent); margin-bottom: -1px; }
.m-subtabs .badge { display: inline-flex; margin-left: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--m-raised); color: var(--m-text-2); font-size: 11px; align-items: center; justify-content: center; }
.m-sortrow { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; font-size: 11px; color: var(--m-text-3); }
.m-sortrow > span:hover { color: var(--m-text-2); }
.m-sortrow b { color: var(--m-text); font-weight: 600; }
.m-sortrow .chip, .m-sortrow .chip:hover { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; background: rgba(255, 138, 76, .15); color: var(--m-accent); font-weight: 600; }
.m-sortrow .caret { width: 5px; height: 5px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-1px) rotate(45deg); }
.m-doc { border: 1px solid var(--m-edge); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: rgba(38, 44, 59, .25); transition: border-color .12s; }
.m-doc:hover { border-color: var(--m-raised-2); }
.m-doc.open, .m-doc.open:hover { border-color: var(--m-accent); background: rgba(255, 138, 76, .08); }
.m-doc .top { display: flex; align-items: center; gap: 8px; }
.m-doc .chev { width: 12px; color: var(--m-text-3); font-size: 12px; }
.m-doc .ic { width: 16px; height: 16px; flex: none; color: var(--m-text-3); }
.m-doc .nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-doc .meta { margin: 12px 0 0 36px; font-size: 12px; color: var(--m-text-2); line-height: 18px; }
.m-doc .chips { display: flex; align-items: center; gap: 10px; margin: 10px 0 0 36px; font-size: 12px; }
.m-doc .edit { padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(74, 222, 128, .5); background: rgba(34, 197, 94, .15); color: #4ade80; }
.m-doc .saved { color: #4ade80; }
.m-doc .gear { margin-left: auto; }
.m-doc .ago { margin: 4px 0 0 36px; font-size: 11px; color: var(--m-text-3); }

/* Projects */
.m-projects { flex: 1; min-height: 0; overflow: hidden; padding: 12px; }
.m-project { position: relative; display: flex; gap: 10px; border: 1px solid var(--m-edge); border-radius: 8px; padding: 14px 24px 14px 12px; margin-bottom: 10px; background: rgba(38, 44, 59, .25); transition: border-color .12s; }
.m-project:hover { border-color: var(--m-raised-2); }
.m-project.sel, .m-project.sel:hover { border-color: var(--m-accent); background: rgba(255, 138, 76, .08); }
.m-project .ic { width: 22px; height: 22px; flex: none; color: var(--m-text-2); margin-top: 2px; }
.m-project .star { fill: #f59e0b; stroke: none; }
.m-project .body { flex: 1; min-width: 0; }
.m-project .nm { font-size: 15px; font-weight: 700; }
.m-project .no { font-size: 13px; color: var(--m-text-2); margin-top: 2px; }
.m-project .meta { font-size: 12px; color: var(--m-text-2); line-height: 16px; margin-top: 8px; }
.m-project .btns { display: flex; gap: 6px; margin-top: 8px; }
.m-project .chev { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--m-text-2); font-size: 18px; }

/* ---- Tool strip --------------------------------------------------------- */

.m-toolbar {
    position: absolute; left: 50%; top: 47px; width: 736px; height: 46px;
    margin-left: -368px;
    border-radius: 12px;
    border: 1px solid var(--m-edge);
    background: rgba(9, 9, 11, .68);
    box-shadow: var(--m-shadow-2xl);
    display: flex; align-items: center; gap: 4px;
    padding: 0 10px;
}
.m-grip { width: 12px; height: 14px; margin-right: 6px; color: var(--m-text-3); }
/* Section divider — the line gives way to a collapse chevron on hover. */
.m-sep { position: relative; width: 5px; height: 24px; margin: 0 1px; display: flex; align-items: center; justify-content: center; }
.m-sep::before { content: ''; width: 1px; height: 24px; background: var(--m-raised); transition: opacity .15s; }
.m-sep::after { content: '◀'; position: absolute; font-size: 8px; line-height: 1; color: #71717a; opacity: 0; transition: opacity .15s; }
.m-sep:hover::before { opacity: 0; }
.m-sep:hover::after { opacity: 1; }
/* ToolButton: no hover fill. It grows 10% over 200ms; an inactive one also
   takes a 2px accent ring, the active one keeps its orange and just grows. */
.m-tool {
    width: 24px; height: 24px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--m-panel);
    color: var(--m-zinc-300);
    transition: transform .2s;
}
.m-tool svg { width: 16px; height: 16px; }
.m-tool:hover { transform: scale(1.1); box-shadow: 0 0 0 2px var(--m-accent); }
.m-tool[data-active] { background: var(--m-accent); color: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.m-tool[data-active]:hover { transform: scale(1.1); box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }

/* ---- Properties --------------------------------------------------------- */

.m-props-head { flex: none; height: 76px; position: relative; }
.m-props-title { position: absolute; left: 24px; top: 21px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.m-modes {
    position: absolute; left: 159px; top: 17px;
    display: flex; gap: 2px; padding: 2px; border-radius: 6px;
    background: rgba(38, 44, 59, .4);
}
.m-mode { width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--m-zinc-400); transition: background-color .12s, color .12s; }
.m-mode svg { width: 14px; height: 14px; }
.m-mode:hover { color: #fff; background: var(--m-raised); }
.m-mode[data-active], .m-mode[data-active]:hover { background: rgba(255, 138, 76, .2); color: var(--m-accent); }
.m-collapse {
    position: absolute; left: 272px; top: 11px; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(18, 18, 22, .95); border: 1px solid var(--m-edge);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    display: flex; align-items: center; justify-content: center; color: var(--m-text);
    transition: background-color .12s;
}
.m-collapse svg { width: 16px; height: 16px; }
.m-collapse:hover { background: var(--m-raised); }

.m-props-body { flex: 1; min-height: 0; padding: 0 20px; } /* no overflow clip: the first legend hangs 13px above the body; the panel clips */
.m-sec {
    position: relative; margin-bottom: 20px;
    border: 1px solid var(--m-raised-2); border-radius: 8px;
    background: var(--m-panel);
    padding: 16px 12px 12px;
}
.m-sec > .legend {
    position: absolute; left: 8px; top: -13px;
    padding: 4px 2px; border-radius: 4px; background: var(--m-panel);
    font-size: 12px; font-weight: 500; color: var(--m-text-3);
}
.m-hint { margin: 0 0 22px; padding: 10px 12px; border: 1px solid var(--m-edge); border-radius: 8px; font-size: 12px; line-height: 16px; color: var(--m-text-3); }
.m-kv { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.m-kv .row { display: flex; justify-content: space-between; gap: 12px; line-height: 16px; }
.m-kv .k { color: var(--m-text-3); white-space: nowrap; }
.m-kv .v { color: var(--m-text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-kv--lg { font-size: 13px; gap: 10px; }
.m-kv--lg .k { color: var(--m-text-2); }

/* Appearance */
.m-appear { display: grid; grid-template-columns: 64px 1fr 1fr 64px; gap: 12px; padding: 8px; }
.m-swatches { position: relative; width: 64px; height: 64px; }
.m-swatch-fill { position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; border-radius: 50%; background: #6b7280; border: 2px solid #fff; transform: translate(-5px, 12px); transition: border-color .12s; }
.m-swatch-stroke { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; border: 4px solid #000; transform: translate(-2px, -2px); transition: border-color .12s; }
.m-swatch-fill:hover, .m-swatch-stroke:hover { border-color: var(--m-accent); }
.m-line-btns { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-left: 8px; }
.m-pbtn {
    display: flex; align-items: center; justify-content: center;
    background: var(--m-btn); border: 1px solid var(--m-btn-border); border-radius: 4px;
    color: var(--m-zinc-300);
    transition: background-color .12s, color .12s, border-color .12s;
}
.m-pbtn:hover { background: var(--m-btn-hover); }
.m-pbtn--md { border-radius: 6px; padding: 8px 12px; width: 106px; height: 36px; }
.m-pbtn--md svg { width: 96px; height: 12px; }
.m-toggles { display: flex; flex-direction: column; gap: 24px; padding: 8px 0 0 26px; }
.m-switch { position: relative; width: 30px; height: 15px; border-radius: 999px; background: var(--m-raised); flex: none; transition: background-color .15s, filter .12s; }
.m-switch[data-on] { background: var(--m-accent); }
.m-switch .knob { position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--m-ink); transition: transform .15s; }
.m-switch[data-on] .knob { transform: translateX(15px); }
.m-switch:hover { filter: brightness(1.12); }

/* Dimensions */
.m-dims { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.m-dims .row { display: flex; justify-content: space-between; line-height: 18px; }
.m-dims .k { color: var(--m-zinc-400); }
.m-dims .v { color: var(--m-zinc-200); font-variant-numeric: tabular-nums; }

/* Wall assembly */
.m-wall { display: flex; flex-direction: column; gap: 8px; }
.m-wall .lbl { font-size: 12px; color: var(--m-text-2); margin-bottom: 4px; }
.m-select {
    height: 32px; padding: 0 28px 0 10px; position: relative;
    background: var(--m-field); border: 1px solid var(--m-field-border); border-radius: 10px;
    font-size: 13px; color: var(--m-text); display: flex; align-items: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: border-color .12s, background-color .12s;
}
.m-select::after { content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-right: 1.6px solid var(--m-text); border-bottom: 1.6px solid var(--m-text); transform: translateY(-70%) rotate(45deg); }
.m-select:hover { border-color: var(--m-accent); }
.m-select--sm { height: 26px; font-size: 12px; padding-left: 8px; border-radius: 8px; }
.m-select.big { height: 36px; font-size: 14px; padding-left: 14px; flex: none; }
.m-wall-meta { display: flex; align-items: center; gap: 2px; }
.m-wall-meta .total { flex: 1; min-width: 0; font-size: 10px; color: var(--m-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-band { display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--m-raised-2); }
.m-band .bl { width: 46px; flex: none; font-size: 12px; color: var(--m-text-2); }
.m-input {
    width: 60px; height: 26px; flex: none; padding: 0 8px;
    background: var(--m-field); border: 1px solid var(--m-field-border); border-radius: 6px;
    font-size: 13px; color: var(--m-text); display: flex; align-items: center;
    transition: border-color .12s;
}
.m-input:hover { border-color: var(--m-accent); }
.m-unit { width: 20px; flex: none; font-size: 10px; color: var(--m-text-3); }
.m-spacer { width: 24px; flex: none; }
.m-abtn { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid var(--m-raised); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--m-text); transition: background-color .12s, border-color .12s; }
.m-abtn:hover { background: var(--m-raised); border-color: #454e63; }
.m-band .m-select--sm { width: 76px; flex: none; }
.m-checks { display: flex; gap: 16px; padding-top: 4px; }
.m-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--m-text-2); }
.m-check .box { width: 14px; height: 14px; flex: none; border-radius: 4px; background: var(--m-accent); display: flex; align-items: center; justify-content: center; transition: filter .12s; }
.m-check .box svg { width: 10px; height: 10px; }
.m-check:hover .box { filter: brightness(1.1); }

/* Count categories, marker size */
.m-cats { font-size: 13px; }
.m-cats .head { display: flex; justify-content: space-between; padding: 2px 62px 8px 54px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--m-text-3); }
.m-cats .row { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 56px 0 28px; border-radius: 6px; border: 1px solid transparent; transition: background-color .12s; }
.m-cats .row:hover { background: rgba(38, 44, 59, .5); }
.m-cats .row.sel, .m-cats .row.sel:hover { background: #182642; border-color: #2f4a8a; }
.m-cats .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; margin-right: 12px; vertical-align: -1px; }
.m-cats .sel .n { color: #60a5fa; font-weight: 600; }
.m-cats .dia { display: inline-block; width: 11px; height: 11px; background: #3b82f6; transform: rotate(45deg); margin: 0 13px 0 1px; vertical-align: -1px; }
.m-legend-btns { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 0; }
.m-legend-btns .m-btn { height: 26px; border-radius: 6px; font-size: 12px; }
.m-cats .total { height: 30px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--m-raised-2); border-radius: 0; font-weight: 600; }
.m-cats .total .name { padding-left: 26px; }
.m-slider-lbl { font-size: 13px; font-weight: 600; margin: 2px 0 14px; }
.m-slider { position: relative; height: 16px; display: flex; align-items: center; padding-right: 56px; }
.m-slider .track { flex: 1; height: 2px; background: #6b7280; }
.m-slider .thumb { position: absolute; left: 6px; top: 1px; width: 3px; height: 14px; background: var(--m-accent); border-radius: 1px; }
.m-slider .val { position: absolute; right: 0; font-size: 13px; }

/* Transform / Draw order / Actions */
.m-grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px; align-items: start; }
.m-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; }
.m-pair { display: flex; flex-direction: column; }
.m-pair .top { aspect-ratio: 1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.m-pair .top svg { width: 20px; height: 20px; }
.m-pair .top svg.w7 { width: 28px; height: 28px; }
.m-pair .pick { aspect-ratio: 2 / 1; border-top-left-radius: 0; border-top-right-radius: 0; }
.m-pair .pick svg { width: 14px; height: 14px; }
.m-pair .pick[data-copy] { color: var(--m-accent); }
.m-sq { aspect-ratio: 1; }
.m-sq svg { width: 20px; height: 20px; }
.m-sq svg.w7 { width: 28px; height: 28px; }
.m-order { height: 40px; }
.m-order svg { width: 16px; height: 16px; }
.m-pbtn.del:hover { color: #dc2626; }

/* ---- Dialogs ------------------------------------------------------------ */

.m-modal {
    zoom: var(--modal-zoom, 1);
    background: var(--m-panel);
    border: 1px solid var(--m-edge);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
    display: flex; flex-direction: column; overflow: hidden;
}
.m-modal .hd { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px 12px; }
.m-modal .ttl { font-size: 16px; font-weight: 600; }
.m-modal .bd { flex: 1; min-height: 0; display: flex; }
.m-modal .tiny { font-size: 11px; color: var(--m-text-3); }
.m-modal .ft { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-top: 1px solid var(--m-edge); }
.m-modal .ft .m-btn { height: 30px; }

/* Share */
.m-share { width: 640px; height: 454px; }
.m-share .main { flex: 1; min-width: 0; padding: 4px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.m-share .invite { display: flex; gap: 8px; }
.m-share .invite .m-field { flex: 1; height: 32px; font-size: 14px; padding-left: 12px; }
.m-share .caret-i { width: 1px; height: 15px; background: #fff; margin-right: 2px; }
.m-share .invite .m-select { width: 118px; height: 32px; font-size: 13px; flex: none; }
.m-share .invite .m-btn { height: 32px; }
.m-share .m-eyebrow { font-size: 10px; letter-spacing: .1em; margin: 4px 0 2px; color: var(--m-text-3); }
.m-share .person { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.m-share .av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; }
.m-share .person .nm { flex: 1; font-weight: 600; }
.m-share .role { font-size: 11px; color: var(--m-text-3); }
.m-share .side { width: 240px; flex: none; border-left: 1px solid var(--m-edge); background: rgba(38, 44, 59, .2); padding: 12px 16px; display: flex; flex-direction: column; font-size: 12px; }
.m-share .side .m-eyebrow { margin: 4px 0 8px; }
.m-share .line { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.m-share .line .dot.on { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
.m-share .line.sw { justify-content: space-between; margin-bottom: 10px; font-size: 12px; white-space: nowrap; }
.m-share .line.sw .m-switch { width: 28px; height: 16px; }
.m-share .line.sw .m-switch .knob { width: 16px; height: 16px; }
.m-share .line.sw .m-switch[data-on] .knob { transform: translateX(12px); }
.m-share .side .m-hr { margin: 14px 0; }
.m-share .side .m-hr.gap { margin: 64px 0 16px; }
.m-share .url { display: flex; gap: 6px; align-items: center; }
.m-share .url .m-field { flex: 1; height: 28px; padding-left: 8px; font-size: 12px; color: var(--m-text); }
.m-share .url .m-btn { height: 28px; padding: 0 10px; flex: none; }
.m-share .side .tiny { margin-top: 8px; }
.m-share .tiny.row { display: flex; justify-content: space-between; }
.m-share .lnk { color: var(--m-text); font-weight: 600; }
.m-share .stop { color: #f87171; font-size: 13px; font-weight: 500; }
.m-share .stop:hover { color: #fca5a5; }

/* Drawing list */
.m-drawlist { width: 1504px; height: 1164px; }
.m-drawlist .hd { padding: 14px 20px 12px; border-bottom: 1px solid var(--m-edge); }
.m-drawlist .sub { display: block; font-size: 11px; color: var(--m-text-2); margin-top: 2px; }
.m-drawlist .nav { width: 208px; flex: none; background: #1c1f29; border-right: 1px solid var(--m-edge); padding: 14px 8px; display: flex; flex-direction: column; gap: 4px; }
.m-drawlist .item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--m-text); transition: background-color .12s; }
.m-drawlist .item svg { width: 16px; height: 16px; }
.m-drawlist .item:hover { background: var(--m-raised); }
.m-drawlist .item.on, .m-drawlist .item.on:hover { background: var(--m-accent); color: var(--m-ink); font-weight: 600; }
.m-drawlist .stats { margin-top: auto; font-size: 12px; padding: 0 8px; display: flex; flex-direction: column; gap: 4px; }
.m-drawlist .stats .r { display: flex; justify-content: space-between; }
.m-drawlist .stats .ac { color: var(--m-accent); }
.m-drawlist .stats .sync { margin-top: 8px; }
.m-drawlist .del { margin-top: 60px; height: 36px; }
.m-drawlist .main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 16px 0; }
.m-drawlist .tools { display: flex; gap: 12px; margin-bottom: 12px; }
.m-drawlist .m-field.big { flex: 1; height: 36px; font-size: 13px; padding-left: 12px; }
.m-drawlist .legend { display: flex; gap: 16px; align-items: center; font-size: 10px; color: var(--m-text-2); margin-bottom: 8px; }
.m-drawlist .legend .sq { display: inline-flex; width: 14px; height: 14px; border: 1px solid #cbd5e1; border-radius: 2px; font-size: 9px; align-items: center; justify-content: center; margin-right: 5px; color: var(--m-text); }
.m-drawlist .legend .ci { margin-right: 5px; font-weight: 400; }
.m-drawlist .legend .cur { color: var(--m-accent); }
.m-drawlist .legend .cur .sq { background: var(--m-accent); border-color: var(--m-accent); color: var(--m-ink); }
.m-drawlist .legend .hint { margin-left: auto; color: var(--m-text-3); }
.m-drawlist .table { flex: 1; min-height: 0; position: relative; overflow: hidden; border-radius: 6px 6px 0 0; }
.m-drawlist .th { display: flex; align-items: center; height: 70px; background: var(--m-raised); border-bottom: 2px solid #e5e7eb; font-size: 13px; font-weight: 700; padding-right: 24px; }
.m-drawlist .c-ic { width: 66px; flex: none; padding-left: 24px; color: var(--m-text-2); }
.m-drawlist .c-ic svg { width: 16px; height: 16px; }
.m-drawlist .c-no { width: 202px; flex: none; }
.m-drawlist .c-ti { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-drawlist .c-rev { width: 38px; flex: none; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 600; text-align: center; }
.m-drawlist .c-add { width: 44px; flex: none; text-align: center; font-size: 18px; font-weight: 400; }
.m-drawlist .up { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid var(--m-accent); margin-left: 6px; vertical-align: 1px; }
.m-drawlist .up.dim { border-bottom-color: var(--m-text-3); }
.m-drawlist .group { height: 36px; display: flex; align-items: center; padding-left: 14px; font-size: 13px; font-weight: 600; color: var(--m-accent); background: #1a1d26; border-bottom: 1px solid #2a2f3d; }
.m-drawlist .tr { display: flex; align-items: center; height: 35px; border-bottom: 1px solid #2a2f3d; font-size: 13px; padding-right: 24px; transition: background-color .12s; }
.m-drawlist .tr:hover { background: rgba(38, 44, 59, .5); }
.m-drawlist .tr .c-no { font-family: var(--m-mono); font-size: 12px; color: var(--m-accent); }
.m-drawlist .rv { width: 38px; flex: none; display: flex; justify-content: center; }
.m-drawlist .rv .b { width: 18px; height: 16px; border-radius: 3px; background: var(--m-accent); color: var(--m-ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.m-drawlist .rv .o { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--m-text-3); }
.m-drawlist .addrow { display: flex; align-items: center; gap: 10px; height: 44px; padding-left: 16px; }
.m-drawlist .addrow .plus { color: var(--m-text-2); font-size: 16px; width: 12px; }
.m-drawlist .m-field.mono { width: 220px; height: 28px; font-family: var(--m-mono); font-size: 12px; padding-left: 10px; color: var(--m-text-2); }
.m-drawlist .addrow.cut { height: 12px; overflow: hidden; opacity: .5; }
.m-drawlist .scroll { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; background: #1a1d26; }
.m-drawlist .scroll span { position: absolute; left: 1px; top: 2px; width: 6px; height: 300px; border-radius: 3px; background: #3a3f4d; }
.m-drawlist .foot { display: flex; justify-content: space-between; align-items: center; height: 56px; font-size: 13px; border-top: 1px solid var(--m-edge); }

/* ---- Status bar --------------------------------------------------------- */

.m-status {
    position: absolute; left: 0; right: 0; bottom: 0; height: 37px;
    background: var(--m-panel); border-top: 1px solid var(--m-status-border);
    display: flex; align-items: center; justify-content: center; gap: 32px;
    font-size: 12px; padding-left: 4px;
}
.m-coords { width: 312px; text-align: center; font-family: var(--m-mono); font-size: 12px; white-space: nowrap; }
.m-coords .k, .m-coords .v { color: var(--m-text); opacity: .5; }
.m-sgroup { display: flex; align-items: center; gap: 8px; }
.m-sgroup--zoom { gap: 16px; }
.m-sgroup--snap { gap: 4px; }
.m-status .lbl { color: var(--m-text); opacity: .7; font-size: 12px; }
.m-quiet { height: 24px; padding: 0 6px; border-radius: 4px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--m-text); white-space: nowrap; transition: background-color .12s; }
.m-quiet:hover { background: var(--m-raised); }
.m-quiet .caret { width: 6px; height: 6px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 6px; opacity: .8; }
.m-quiet--scale { width: 96px; justify-content: space-between; }
.m-quiet--zoom { width: 72px; justify-content: space-between; }
.m-sbtn { width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--m-text); transition: background-color .12s; }
.m-sbtn svg { width: 16px; height: 16px; }
.m-sbtn--zoom { width: 28px; height: 28px; }
.m-sbtn--zoom svg { width: 20px; height: 20px; }
.m-sbtn:hover { background: var(--m-raised); }
.m-sbtn[data-active], .m-sbtn[data-active]:hover { background: var(--m-accent); color: #000; }
.m-page { display: flex; align-items: center; gap: 4px; }
.m-page .arrow { padding: 2px 4px; border-radius: 4px; font-size: 12px; color: var(--m-text); transition: background-color .12s; }
.m-page .arrow:hover { background: var(--m-raised); }
.m-page .arrow.dim { opacity: .4; }
.m-page .num { width: 56px; text-align: right; padding: 2px 4px; border-radius: 4px; transition: background-color .12s; }
.m-page .num:hover { background: var(--m-raised); }
.m-page .of { opacity: .7; }