/* ---------------------------------------------------------------------------
 * Geometry — marketing design-system skin ("Colorful Warm Flat")
 * ---------------------------------------------------------------------------
 * A "skin" re-skins the SHARED marketing layout via scoped CSS-var overrides
 * + semantic `ms-*` hook classes, layered as CSS-only theme files. It is
 * selected through the active theme's `skin` knob
 * (stored verbatim in the `knobs` JSON; it NEVER enters ThemePalette::derive),
 * emitted server-side as `data-skin` on <html> by app.blade.php.
 *
 * Scope contract (hard guarantee):
 *   - Every rule is scoped under
 *       html[data-skin='geometry'][data-chrome='marketing']
 *     so it can ONLY ever match public marketing / auth / checkout / error
 *     surfaces (per App\Support\ChromeMode::forComponent). Dashboard, editor,
 *     and admin render data-chrome='app' and can never match — Appearance
 *     knobs keep governing those surfaces fully independently.
 *   - Imported UNLAYERED from app.css (after `@import 'tailwindcss'`), so these
 *     scoped rules outrank Tailwind's layered utilities WITHOUT `!important`.
 *
 * Hardcoded hexes are CORRECT inside a skin file: a skin is a self-contained
 * design system, not knob-derived theming. The no-hex rule applies to the
 * shared section markup, not here.
 *
 * white canvas,
 * warm near-black ink, rotated multi-color badge pills, 2px cream borders
 * instead of shadows, pill-shaped everything, yellow active states, yellow
 * CTA band, dark footer, Satoshi + Kalam.
 * ------------------------------------------------------------------------- */

/* Self-hosted fonts (CSP font-src 'self'; files in public/fonts/). Browsers
 * only download a face when a rule actually resolves to it, so declaring
 * these is free on non-Geometry installs — without data-skin no scoped rule
 * matches, no element uses the family, no woff2 is fetched. */
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kalam';
    src: url('/fonts/kalam-700-latin.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
    font-family: 'Kalam';
    src: url('/fonts/kalam-700-latin-ext.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF;
}

/* ---- Token layer -----------------------------------------------------------
 * Two tiers: skin-local --ms-* tokens, then scoped overrides of the SEMANTIC
 * vars the Tailwind utilities consume. Because utilities reference `var(...)`
 * resolved at use-site, re-pointing the vars on <html> restyles every
 * marketing surface without touching markup. The knob-derived :root values
 * keep governing app chrome untouched. */
html[data-skin='geometry'][data-chrome='marketing'] {
    --ms-ink: #120a0b;
    --ms-ink-soft: #454140;
    --ms-cream: #f8f4f1;
    --ms-card-border: #f9f4f2;
    --ms-highlight: #ffd86f;
    --ms-green: #c9ff85;
    --ms-blue: #7ce1ff;
    --ms-purple: #9886fe;
    --ms-purple-soft: #ccbdf4;

    /* Canvas + text — pure white canvas, warm near-black ink. */
    --color-background: #ffffff;
    --color-foreground: #120a0b;
    --color-card: #ffffff;
    --color-card-foreground: #120a0b;
    --color-muted: #f8f4f1;
    --color-muted-foreground: #454140;
    --color-border: #f9f4f2;
    --color-ring: #120a0b;

    /* Accent = ink. Primary CTAs become dark pills (the Button gradient
     * from-accent to-accent-secondary collapses to solid ink). Yellow is a
     * HIGHLIGHT in this system, never an accent carrying white text. */
    --color-accent: #120a0b;
    --color-accent-secondary: #120a0b;
    --color-accent-foreground: #ffffff;

    /* Pill-shaped everything; zero shadows (cream borders carry depth).
     * Shadow utilities in app.css resolve var(--shadow-*) at runtime. */
    --button-radius: 100px;
    --shadow-sm: 0 0 #0000;
    --shadow-md: 0 0 #0000;
    --shadow-lg: 0 0 #0000;
    --shadow-xl: 0 0 #0000;

    /* Typography — Satoshi everywhere; weight floor 500 for body copy. */
    --font-sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-subheading: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-weight-body: 500;
    --font-weight-subheading: 600;
    --font-weight-heading: 700;
    --font-weight-display: 700;
    --text-body: 17px;
    --text-body-line: 1.65;
    --text-h1: 64px;
    --text-h1-line: 1.1;
    --text-h1-tracking: -0.04em;
    --text-h2: 40px;
    --text-h2-line: 1.25;
    --text-h2-tracking: -0.025em;
    --text-h3: 28px;
    --text-h3-line: 1.3;
    --text-h3-tracking: -0.015em;
}

/* ---- Hero ------------------------------------------------------------------
 * Reference hero treatments that differ from the generic rules below:
 *   - soft cream→white gradient backdrop (the rest of the page is pure white)
 *   - the eyebrow is a CALM white pill with a yellow status dot — not the
 *     rotated yellow badge the other sections use
 *   - the hero primary CTA is YELLOW with ink text (the spec lists "hero CTA"
 *     under yellow usage; the nav CTA stays a dark pill) — hover inverts to
 *     ink/white. Higher selector specificity beats the generic .ms-btn rules.
 */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero {
    /* Two layers, verbatim from the reference theme-geometry.css: a neutral
     * warm-cream base fading to white, plus a huge blurred yellow-green glow
     * blob (::before below) floating behind the content. */
    background: linear-gradient(180deg, #f8f4f1 -14%, #faf8f6 25.7%, #fff 100%);
    /* Slide the hero up beneath the sticky header (its skin treatment is a
     * transparent strip + floating white nav container) so the cream wash
     * starts at the very top of the viewport, like the reference. The
     * padding restores the content's original offset. */
    margin-top: -89px;
    padding-top: 89px;
    /* New stacking context so the glow's z-index:-1 sits above this section's
     * own background but below ALL its in-flow content. */
    isolation: isolate;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero::before {
    content: '';
    position: absolute;
    left: 7.25%;
    bottom: 10%;
    width: 82%;
    height: 75%;
    background: linear-gradient(146deg, #ffb33300 0%, #ece677a3 64%, #c9ff8500 81%);
    border-radius: 9999px;
    filter: blur(100px);
    opacity: 0.34;
    pointer-events: none;
    z-index: -1;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero .ms-badge {
    --ms-tilt: 0deg;
    background: #ffffff;
    border: 2px solid var(--ms-card-border);
    color: var(--ms-ink-soft);
    border-radius: 100px;
    padding: 4px 16px;
    animation: none;
    transform: none;
    gap: 8px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero .ms-badge::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: var(--ms-highlight);
    flex-shrink: 0;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero .ms-btn-primary {
    background-color: var(--ms-highlight);
    color: var(--ms-ink);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero .ms-btn-primary:hover {
    background-color: var(--ms-ink);
    color: #ffffff;
}
/* Hero secondary: borderless white pill (reference: "hero secondary is white
 * with no border"). The generic cream hover vanishes against the hero's
 * cream glow — stay white, distinguish via the lift alone. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero .ms-btn-secondary {
    border: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero .ms-btn-secondary:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
}

/* Hero annotations — cursor chips + Kalam handwritten notes, verbatim
 * positions/keyframes from the reference theme-geometry.css. The markup ships
 * `hidden` (inert for every other skin); this block reveals it. Icon/arrow
 * art lives in pseudo-element backgrounds (public/skins/geometry/*.png) so it
 * is only fetched when these rules actually display the elements. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-annotations {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    pointer-events: none;
}
/* Cursor chips are LANDING-PAGE-ONLY personality (the .ms-page-welcome hook
 * sits on Welcome's <main>) — heroes reused on custom pages keep the
 * media-bound notes/arrows but not the John/You cursors. Hidden here; the
 * welcome-scoped rule below re-enables. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-cursor {
    display: none;
    position: absolute;
    align-items: flex-start;
    gap: 2px;
    z-index: 5;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    padding: 3px 10px;
    white-space: nowrap;
    color: var(--ms-ink);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-page-welcome .ms-hero-cursor {
    display: inline-flex;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-cursor::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-cursor-a {
    top: -300px;
    left: 5%;
    background: var(--ms-green);
    border-radius: 8px 2px 8px 8px;
    animation: ms-cursor-float-a 10s ease-in-out infinite;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-cursor-a::after {
    right: -16px;
    top: -14px;
    background-image: url('/skins/geometry/cursor-you.png');
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-cursor-b {
    top: -360px;
    right: 5%;
    background: var(--ms-purple);
    color: #ffffff;
    border-radius: 2px 8px 8px 8px;
    animation: ms-cursor-float-b 10s ease-in-out infinite;
    animation-delay: -1.5s;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-cursor-b::after {
    left: -16px;
    top: -14px;
    background-image: url('/skins/geometry/cursor-charles.png');
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-note {
    position: absolute;
    z-index: 5;
    font-family: 'Kalam', cursive;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ms-ink);
    text-align: center;
    /* CMS-driven plain text (no manual <br>) — wrap into the reference's
     * two-line note shape. */
    max-width: 150px;
    white-space: normal;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-note::after {
    content: '';
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-note-left {
    top: -2px;
    left: -1%;
    transform: rotate(-4deg);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-note-left::after {
    width: 53px;
    height: 34px;
    right: -60px;
    bottom: -28px;
    background-image: url('/skins/geometry/arrow-down-right.png');
    animation: ms-nudge-right 2s ease-in-out infinite;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-note-right {
    top: 3px;
    right: -1%;
    transform: rotate(3deg);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-note-right::after {
    width: 52px;
    height: 21px;
    left: -58px;
    bottom: -18px;
    background-image: url('/skins/geometry/arrow-down-left.png');
    animation: ms-nudge-left 2s ease-in-out infinite;
}
@keyframes ms-cursor-float-a {
    0%,
    100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(3px, -4px);
    }
    50% {
        transform: translate(-2px, -7px);
    }
    75% {
        transform: translate(4px, -3px);
    }
}
@keyframes ms-cursor-float-b {
    0%,
    100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-3px, -5px);
    }
    50% {
        transform: translate(2px, -3px);
    }
    75% {
        transform: translate(-2px, -6px);
    }
}
@keyframes ms-nudge-right {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}
@keyframes ms-nudge-left {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-6px);
    }
}
@media (max-width: 768px) {
    html[data-skin='geometry'][data-chrome='marketing'] .ms-hero-annotations {
        display: none;
    }
}

/* ---- Headings --------------------------------------------------------------
 * Sections size their headings with text-4xl/5xl utilities, which outrank the
 * element-level --text-h* rules — so the skin pins the Geometry scale on the
 * section wrappers directly. clamp() covers the spec's 36px mobile → 64px
 * desktop ramp without media queries. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero h1 {
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 700;
}
/* Section headings use the reference's `h2-large` tier (56px desktop →
 * 40px tablet → 36px mobile, 1.2 line, -1.5px tracking). */
html[data-skin='geometry'][data-chrome='marketing'] [class*='ms-section-'] h2 {
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.2;
    letter-spacing: -1.5px;
    font-weight: 700;
}

/* ---- Section rhythm ----------------------------------------------------------
 * Spec: gap-section 64–72px — "tighter than typical SaaS". The shared layout
 * runs py-24 (96px) per section, doubling to ~190px between content blocks.
 * Compress the standard section inner containers; the hero (own padding) and
 * the CTA band (the yellow island wants its inner air) are excluded.
 *
 * Width: the reference content column is 1080px (nav 1024) — the shared
 * layout's max-w-6xl (1152px) reads too wide. The later .ms-nav rule wins
 * its own 1024px by source order. */
html[data-skin='geometry'][data-chrome='marketing'] [class*='max-w-6xl'] {
    max-width: 1080px;
}
html[data-skin='geometry'][data-chrome='marketing'] section[class*='ms-section-'] > div[class*='py-24']:not(.ms-cta-band),
html[data-skin='geometry'][data-chrome='marketing'] section[class*='ms-section-'] > div[class*='py-20']:not(.ms-cta-band) {
    padding-top: 64px;
    padding-bottom: 64px;
}
/* Hero keeps its own rhythm (the lg:py-20 class would match above) — the
 * badge needs clearance under the floating nav, the media bleeds into the
 * next section's whitespace. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero > div {
    padding-top: 56px;
    padding-bottom: 88px;
}

/* ---- Weight system -----------------------------------------------------------
 * Reference: "Geometry uses heavier heading weights" — ALL headings 700;
 * card/list/form copy never drops below 500 (the body var covers inherited
 * text; these pin the spots where utility classes would undercut it);
 * buttons 600. */
html[data-skin='geometry'][data-chrome='marketing'] :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-btn {
    font-weight: 600;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-plan-card p,
html[data-skin='geometry'][data-chrome='marketing'] .ms-plan-card li {
    font-weight: 500;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-faq-item .font-medium {
    font-weight: 700;
}

/* Headline <em> accent: flat ink headings are the spec, so the em treatment
 * becomes a hand-drawn yellow highlighter sweep instead of an accent color
 * (the accent var is ink here — color alone would vanish). */
html[data-skin='geometry'][data-chrome='marketing'] h1 em,
html[data-skin='geometry'][data-chrome='marketing'] h2 em {
    font-style: normal;
    color: inherit;
    /* Marker sweep sits across the lower third, slightly lifted off the
     * baseline so descenders clear it — reads as hand-highlighted, not a
     * solid block. */
    background: linear-gradient(transparent 58%, var(--ms-highlight) 58%, var(--ms-highlight) 88%, transparent 88%);
    border-radius: 2px;
    padding: 0 0.08em;
}

/* ---- Section headers -------------------------------------------------------
 * Geometry centers section intros (the reference scatters a centered eyebrow +
 * headline + subhead, not a left rail). `.ms-head` is the header wrapper (h2 +
 * subhead; on Hero it also wraps the eyebrow + h1). Some sections expose the
 * fallback shape — `.ms-head` applied directly to the h2 + `.ms-sub` on the
 * subhead — so center both shapes. Only the header block is targeted: card
 * grids and body content keep their own alignment untouched. The hero is
 * already centered upstream, so re-centering it is harmless. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-head {
    text-align: center;
    margin-inline: auto;
    max-width: 760px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-head > h1,
html[data-skin='geometry'][data-chrome='marketing'] .ms-head > h2,
html[data-skin='geometry'][data-chrome='marketing'] .ms-head > p,
html[data-skin='geometry'][data-chrome='marketing'] .ms-head > .ms-sub,
html[data-skin='geometry'][data-chrome='marketing'] .ms-sub {
    text-align: center;
}

/* ---- Header confetti -------------------------------------------------------
 * The reference scatters small colored shapes near each heading. Two
 * pseudo-elements on the centered header block sit just outside the text at
 * opposite corners — a blue dot top-left, a tilted green square bottom-right —
 * reusing the ms-geo-float keyframes (the global prefers-reduced-motion
 * kill-switch in app.css freezes them). Hidden on narrow viewports so they
 * never crowd a wrapped headline. The hero is excluded: its badge already
 * carries the decorative role there. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-head {
    position: relative;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-head::before,
html[data-skin='geometry'][data-chrome='marketing'] .ms-head::after {
    content: '';
    position: absolute;
    pointer-events: none;
    opacity: 0.8;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-head::before {
    top: -6px;
    left: 14%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ms-blue);
    animation: ms-geo-float 7s ease-in-out infinite;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-head::after {
    top: 14px;
    right: 9%;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--ms-green);
    transform: rotate(15deg);
    animation: ms-geo-float 9s ease-in-out infinite reverse;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero .ms-head::before,
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero .ms-head::after,
/* …and on the yellow CTA band, where colored dots just read as noise. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band .ms-head::before,
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band .ms-head::after,
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-cta .ms-head::before,
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-cta .ms-head::after {
    content: none;
}
@media (max-width: 768px) {
    html[data-skin='geometry'][data-chrome='marketing'] .ms-head::before,
    html[data-skin='geometry'][data-chrome='marketing'] .ms-head::after {
        display: none;
    }
}

/* ---- Buttons ---------------------------------------------------------------
 * Primary: solid ink pill, hover swaps to yellow + ink text with a lift.
 * Secondary: white pill with the 2px cream border. --button-radius already
 * pins the pill shape via the shared Button component. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-btn-primary {
    background-image: none;
    background-color: var(--ms-ink);
    color: #ffffff;
    box-shadow: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-btn-primary:hover {
    background-color: var(--ms-highlight);
    color: var(--ms-ink);
    transform: translateY(-2px);
    filter: none;
    box-shadow: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-btn-secondary {
    background-color: #ffffff;
    border: 2px solid var(--ms-card-border);
    color: var(--ms-ink);
    box-shadow: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-btn-secondary:hover {
    background-color: var(--ms-cream);
    transform: translateY(-2px);
    box-shadow: none;
}

/* ---- Section badges --------------------------------------------------------
 * Rotated colored pills, sentence-case 14px/500, constant tilt + a gentle
 * vertical float (rotation never animates — spec: no wobble). Color + tilt
 * cycle per section wrapper. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-badge {
    --ms-tilt: -6deg;
    background: var(--ms-highlight);
    border: none;
    border-radius: 16px;
    color: var(--ms-ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 16px;
    transform: rotate(var(--ms-tilt));
    animation: ms-badge-float 7s ease-in-out infinite;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-pricing .ms-badge {
    --ms-tilt: 4deg;
    background: var(--ms-green);
    animation-duration: 8s;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-testimonials .ms-badge {
    --ms-tilt: -6deg;
    background: var(--ms-blue);
    animation-duration: 6s;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-custom .ms-badge {
    --ms-tilt: 8deg;
    background: var(--ms-purple);
    color: #ffffff;
}
/* Eyebrow color cycle for the CMS-driven section badges (mapping:
 * no two adjacent sections share a color; "Get Started" on the yellow band
 * is WHITE). */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-features .ms-badge {
    --ms-tilt: 17deg;
    background: var(--ms-green);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-teaser .ms-badge {
    --ms-tilt: 8deg;
    background: var(--ms-highlight);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .ms-badge {
    --ms-tilt: -6deg;
    background: var(--ms-purple-soft);
    animation-duration: 8s;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-faq .ms-badge {
    --ms-tilt: 12deg;
    background: var(--ms-blue);
    animation-duration: 6s;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-cta .ms-badge {
    --ms-tilt: -6deg;
    background: #ffffff;
    color: var(--ms-ink);
}
/* With headers now centered, a badge sitting inside `.ms-head` self-centers:
 * inline-flex content honors the parent's text-align:center. Guard against a
 * markup variant that hands the badge a block/left display by pinning the
 * inline-flow + auto margins so it stays centered either way. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-head .ms-badge {
    display: inline-flex;
    margin-inline: auto;
}

/* ---- Cards -----------------------------------------------------------------
 * Two card styles, verbatim from the reference:
 *   - module-style cards (kits/teaser/testimonials/auth/hero media): white
 *     surface, 2px cream border, 20px radius, zero shadow
 *   - grid-section feature cards: CREAM surface, NO border, 24px radius
 *     ("section grid .neu { background:#F8F4F1; border:none }") */
html[data-skin='geometry'][data-chrome='marketing'] .ms-card {
    background-color: #ffffff;
    border: 2px solid var(--ms-card-border);
    border-radius: 20px;
    box-shadow: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-features .ms-card {
    background-color: var(--ms-cream);
    border: none;
    border-radius: 24px;
    /* Reference grid cards run p-7 (28px); the density knob inflates the
     * markup's p-8/lg:p-10 to ~48px — pin it. */
    padding: 28px 24px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-features .ms-card:hover {
    background-color: var(--ms-cream);
}
/* Reference card titles are bigger + bolder than our default text-xl. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-features .ms-card h3 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
/* Card body copy: the text-sm utility reads dense at 100% — reference grid
 * cards run 15px/1.55 minimum (weight 500 comes from the body var). Applies
 * to feature + testimonial card copy. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-features .ms-card [class*='text-sm'],
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-testimonials .ms-card [class*='text-sm'] {
    font-size: 15px;
    line-height: 1.55;
}
/* The features/teaser/kits grids frame cards with gap-px hairlines (`gap-px
 * bg-border/60`) — under Geometry the cards float free: real gaps, no
 * gridline backdrop. (Stats keeps its single-band look; LogoWall cells are
 * cards of their own.) */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-features [class*='gap-px'],
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-teaser [class*='gap-px'],
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-kits [class*='gap-px'],
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-logos [class*='gap-px'] {
    gap: 24px;
    background: transparent;
}
/* Kit/teaser cards keep the module-card look (white + cream border) — pin the
 * hover so `hover:bg-background` doesn't flash them canvas-white-on-white.
 * Reference module cards run 24px padding (density knob inflates to ~48px). */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-teaser .ms-card,
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-kits .ms-card {
    padding: 24px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-teaser .ms-card:hover,
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-kits .ms-card:hover {
    background-color: var(--ms-cream);
}
/* "Browse all templates" CTA: dark ink pill (Rakesh's call), yellow on hover
 * like every other ink pill. Beats the hero-style secondary treatment. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-teaser .ms-btn {
    background-color: var(--ms-ink);
    border: none;
    color: #ffffff;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-teaser .ms-btn:hover {
    background-color: var(--ms-highlight);
    color: var(--ms-ink);
    transform: translateY(-2px);
}
/* Logo wall: the reference "Trusted by" strip is logos on the canvas — no
 * card chrome, no mosaic. Flatten the label+cells grid into a centered strip:
 * label line on top, logos in one wrapping row beneath. (Wins over the
 * generic gap-24 grid rule above by source order.) */
/* Reference strip is a continuous right-to-left MARQUEE with edge fades.
 * The track holds two identical logo sets (the duplicate ships `hidden`,
 * revealed only here) so translateX(-50%) loops seamlessly. Hover pauses;
 * the global reduced-motion kill-switch freezes it. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-logos .grid {
    display: block;
    background: transparent;
    padding: 28px 0 36px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    margin-top: 24px;
    animation: ms-marquee 32s linear infinite;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-logo-track:hover {
    animation-play-state: paused;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-logo-dup {
    display: contents;
}
@keyframes ms-marquee {
    to {
        transform: translateX(-50%);
    }
}
/* Label line: Kalam handwriting centered above the marquee (reference:
 * `font-hand text-[24px] font-semibold` — "Trusted by the world's…"). */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-logos .grid > [class*='col-span'] {
    display: block;
    text-align: center;
    background: transparent;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Kalam', cursive;
    font-size: 24px;
    font-weight: 700;
    color: var(--ms-ink);
}
/* Logo cells: full-color marks (no grayscale wash) separated by vertical
 * hairline dividers, reference `#E3E2E2`. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-logos .ms-card {
    background-color: transparent;
    border: none;
    padding: 4px 22px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-logos .ms-card + .ms-card {
    border-left: 1px solid #e3e2e2;
    border-radius: 0;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-logos img {
    opacity: 1;
    filter: none;
    height: 30px;
}
/* Testimonial avatars ring in cream instead of the gray border token. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-avatar {
    --tw-ring-color: var(--ms-cream);
}
/* Hero media frames are intentionally dark demo surfaces (bg-foreground); the
 * generic .ms-card white fill would flatten them. Re-ink only the hero ones —
 * they keep the 2px cream border + 20px radius + zero shadow from the rule
 * above, but the surface stays dark behind the video / image / placeholder. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-hero .ms-card {
    background-color: var(--ms-ink);
}

/* ---- Card icon chips -------------------------------------------------------
 * `.ms-icon` is the icon container inside each feature card (the only child of
 * the card's icon slot in FeaturesSection.tsx) and the step-number element in
 * HowItWorksSection.tsx. Default skin leaves them accent-on-tint; Geometry
 * makes them solid colored chips with near-black ink glyphs.
 *
 * Because the chip is an only-child, an `.ms-icon:nth-child()` cycle can't
 * vary it — the cycle keys off the CARD position instead. Feature cards carry
 * `.ms-card` and are the repeated grid children (the absolutely-positioned
 * CrossMark spans are decorative siblings; counting them is harmless since the
 * cycle only needs to differ between neighbors, which 3n buckets guarantee).
 * No two adjacent cards share a color: yellow → green → light-purple. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-icon {
    color: var(--ms-ink);
    background: var(--ms-highlight);
    border-radius: 14px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-card:nth-child(3n + 1) .ms-icon {
    background: var(--ms-highlight);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-card:nth-child(3n + 2) .ms-icon {
    background: var(--ms-green);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-card:nth-child(3n + 3) .ms-icon {
    background: var(--ms-purple-soft);
}

/* HowItWorks step numbers (01 / 02 / 03) also carry `.ms-icon` but are bare
 * numerals, not chips — the section markup colors them accent. Strip the chip
 * fill + paint them ink. Placed AFTER the generic chip rules so it wins by
 * source order at equal specificity. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .ms-icon {
    background: none;
    color: var(--ms-ink);
}

/* ---- Pricing ---------------------------------------------------------------
 * Plan cards wear the signature thick cream shell; the period toggle's active
 * tab and the feature checkmarks go yellow-with-ink; "Most popular" is a dark
 * tilted pill. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-plan-card {
    background-color: #ffffff;
    border: 8px solid var(--ms-cream);
    border-radius: 28px;
    box-shadow: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-toggle {
    background-color: var(--ms-cream);
    border: none;
    border-radius: 100px;
    box-shadow: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-toggle-active {
    background-color: var(--ms-highlight);
    color: var(--ms-ink);
    border-radius: 100px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-check {
    background-color: var(--ms-highlight);
    border-radius: 100px;
    color: var(--ms-ink);
    height: 18px;
    width: 18px;
    padding: 3px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-popular-badge {
    background-color: var(--ms-ink);
    border: none;
    color: #ffffff;
    transform: rotate(3deg);
}

/* ---- Filter chips ----------------------------------------------------------
 * Reference feature-nav: a CENTERED cream pill bar (`background #F8F4F1;
 * border-radius 100px; padding 6px`) with the active tab in YELLOW. The
 * chips themselves go borderless inside it. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-kits .flex.flex-wrap:has(.ms-chip) {
    justify-content: center;
    width: fit-content;
    margin-inline: auto;
    background: var(--ms-cream);
    border-radius: 100px;
    padding: 6px;
    gap: 4px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-chip {
    border: none;
    background: transparent;
    color: var(--ms-ink-soft);
    border-radius: 100px;
    font-weight: 600;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-chip[class*='bg-foreground'] {
    background: var(--ms-highlight);
    color: var(--ms-ink);
}
/* Full-bleed negative margins (`-mx-6 lg:-mx-8`) belong to the default
 * skin's edge-to-edge mosaic grids — with Geometry's rounded floating cards
 * they slam cards into the viewport edges on mobile. Keep grids inside the
 * container at every width. */
html[data-skin='geometry'][data-chrome='marketing'] section[class*='ms-section-'] [class*='-mx-'] {
    margin-inline: 0;
}
/* Kit screenshot strips are wider than their card on small screens — clip
 * inside the rounded card and let them pan horizontally. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-teaser .ms-card,
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-kits .ms-card {
    overflow: hidden;
}
/* Kit list rows: the divide-y hairline stack becomes spaced floating cards. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-kits .divide-y {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-kits .divide-y > * {
    border-top: 0;
    border-bottom: 0;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-kits .divide-y > .ms-card {
    border: 2px solid var(--ms-card-border);
}

/* ---- How it works ------------------------------------------------------------
 * Reference (modules how-it-works): three CENTERED CREAM CARDS, each with a
 * colored number chip (icon-feature, cycling yellow/green/purple) + title +
 * body. Replaces the open-column layout with its connector hairlines. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .grid > div {
    background: var(--ms-cream);
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
}
/* Connector lines (horizontal desktop rule + vertical mobile spines). */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .bg-border,
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .grid > div > [aria-hidden] {
    display: none;
}
/* Number chip: 44px rounded square, bold ink numeral, color-cycled. The
 * source renders "01"-style numerals at text-5xl italic — the chip rules
 * normalize that. Overrides the generic .ms-icon + the how-specific reset
 * from the icon-cycling block by source order. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .ms-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--ms-highlight);
    color: var(--ms-ink);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    margin: 0 auto 4px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .grid > div:nth-child(2) .ms-icon {
    background: var(--ms-green);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .grid > div:nth-child(3) .ms-icon {
    background: var(--ms-purple-soft);
}
/* Step caption ("30 seconds") stays small but drops the accent color (ink-
 * soft reads better on cream); padding reset since the mobile spine is gone. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .grid > div {
    padding-left: 24px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-how .grid > div > p {
    color: var(--ms-ink-soft);
    /* Sentence-case micro-labels — uppercase+tracking is the default skin's
     * voice, not Geometry's. */
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 13px;
    font-weight: 500;
}

/* ---- Custom sections (about-style prose) ---------------------------------------
 * Reference: a white ARTICLE CARD — rounded, 2px cream border, badge pill
 * top-left, big left-aligned heading, left prose. (Rakesh's "Our Story"
 * reference shot.) Padding wins over the rhythm rule by source order. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-custom > div {
    max-width: min(880px, calc(100% - 32px));
    background: #ffffff;
    border: 2px solid var(--ms-card-border);
    border-radius: 24px;
    padding: 48px clamp(24px, 5vw, 64px);
    margin-block: 32px;
}
/* Article headings stay LEFT and step down from the display tier. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-custom h2 {
    font-size: clamp(30px, 3.4vw, 42px);
    text-align: left;
}

/* ---- Featured kit (templates page hero strip) ----------------------------------
 * Geometry treatment: the featured kit floats on a cream rounded island
 * (a feature-panel pattern) instead of bare canvas; the kicker
 * label drops the uppercase tracking. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-featured > div {
    background: var(--ms-cream);
    border-radius: 32px;
    padding: 48px;
    margin-top: 8px;
    margin-bottom: 8px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-featured h2 + p,
html[data-skin='geometry'][data-chrome='marketing'] .ms-featured [class*='uppercase'] {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 600;
    color: var(--ms-ink-soft);
}
/* Device tiles inside the strip stay white-on-cream. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-featured img {
    background: #ffffff;
}

/* ---- Stats -----------------------------------------------------------------
 * Reference: ONE rounded cream container — `.stats-bar { background #F8F4F1;
 * border 2px #f9f4f2; border-radius 24px }` — inside the content width, not a
 * full-bleed band. The grid wrapper becomes the bar; cells go transparent
 * (their white gap-px seams disappear with gap: 0). */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-stats .grid {
    background: var(--ms-cream);
    border: 2px solid var(--ms-card-border);
    border-radius: 24px;
    gap: 0;
    overflow: hidden;
    /* The stats container has no px padding (max-w only) — inset the rounded
     * bar so it never touches the viewport below the container width. */
    margin: 16px;
}
@media (min-width: 1112px) {
    html[data-skin='geometry'][data-chrome='marketing'] .ms-section-stats .grid {
        margin: 16px 0;
    }
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-stat {
    background-color: transparent;
}
/* Stat captions hold their own against the 48px numerals. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-stat p {
    font-size: 15px;
    font-weight: 500;
    color: var(--ms-ink-soft);
}
/* Spec: bold 700 UPRIGHT counters. The section markup styles the number italic
 * (the default skin keeps that), so flip it back to upright + bold here rather
 * than editing the shared section classes. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-stat .italic {
    font-style: normal;
    font-weight: 700;
}

/* ---- FAQ -------------------------------------------------------------------
 * Reference layout: CENTERED single column — heading block on top, items
 * stacked beneath at ~720px. (Source markup is a 2-col grid: head left,
 * items right; flattening is pure CSS.) Items: closed = cream rounded rows,
 * open = white + cream border; the chevron swaps for a dark circular +/×. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-faq .grid {
    grid-template-columns: 1fr;
    gap: 40px;
    justify-items: center;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-section-faq .divide-y {
    width: 100%;
    max-width: 760px;
    border: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-faq-item {
    background-color: var(--ms-cream);
    border: 2px solid transparent;
    border-radius: 20px;
    margin-bottom: 8px;
    padding: 0 24px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-faq-open {
    background-color: #ffffff;
    border-color: var(--ms-card-border);
}
/* Dark circular +/× toggle replaces the chevron. The glyph rides ::after on
 * the row button; the open state is on the item root. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-faq-item button svg {
    display: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-faq-item button::after {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 100px;
    background: var(--ms-ink);
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-faq-open button::after {
    content: '×';
}

/* ---- Navbar ----------------------------------------------------------------
 * Floating white rounded container instead of the full-bleed blurred bar.
 * The sticky outer header loses its border/blur via :has(). */
html[data-skin='geometry'][data-chrome='marketing'] header:has(> .ms-nav) {
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    padding: 16px 16px 0;
}
/* Reference navbar markup: `max-w-[1024px] w-[calc(100%-32px)]`, compact
 * `py-1.5` inner (CTA pill nearly flush right), white with the signature
 * 2px cream border. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-nav {
    background-color: #ffffff;
    border: 2px solid var(--ms-card-border);
    border-radius: 16px;
    max-width: 1024px;
    height: 56px;
    padding: 0 8px 0 20px;
}
/* Nav CTA: pin a compact 38px pill (density knob inflates Button md to
 * ~45px inside the 56px bar) and drop the hover lift — a translateY pushes
 * it out of the container. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-nav .ms-btn {
    height: 38px;
    padding: 0 20px;
    font-size: 14px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-nav .ms-btn:hover {
    transform: none;
}

/* Reference `.nav-link`: ink (never muted gray), weight 500, tight tracking.
 * Active page link steps up to 600. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-nav a {
    color: var(--ms-ink);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.2px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-nav a[aria-current='page'],
html[data-skin='geometry'][data-chrome='marketing'] .ms-nav a.font-medium {
    font-weight: 600;
}
/* Mobile menu, per the reference: white panel, each link a 2px-cream-border
 * 12px card (cream fill on hover/active), and the CTA a yellow pill with ink
 * text. The dropdown panel loses the blueprint border-t.
 * The dropdown wrapper sits IN-FLOW inside the sticky header — opening it
 * grows the header and pushes the page down. Overlay it instead: absolute,
 * anchored under the nav (the sticky header is the positioning context). */
html[data-skin='geometry'][data-chrome='marketing'] header:has(> .ms-nav) > div:has(.ms-mobile-menu) {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
}
/* Standalone floating popover card: full rounding + a small gap under the
 * nav pill (a flat-topped half-box looked broken against the rounded nav). */
html[data-skin='geometry'][data-chrome='marketing'] .ms-mobile-menu {
    background-color: #ffffff;
    border: 2px solid var(--ms-card-border);
    border-radius: 20px;
    margin: 8px 16px 0;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-mobile-link {
    border: 2px solid var(--ms-card-border);
    border-radius: 12px;
    font-weight: 600;
    color: var(--ms-ink);
    background-color: #ffffff;
    margin-bottom: 4px;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-mobile-link:hover,
html[data-skin='geometry'][data-chrome='marketing'] .ms-mobile-link[aria-current='page'] {
    background-color: var(--ms-cream);
    color: var(--ms-ink);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-mobile-menu .ms-btn-primary {
    background-color: var(--ms-highlight);
    color: var(--ms-ink);
}

/* ---- CTA band --------------------------------------------------------------
 * Yellow rounded island with floating geometric decorations. Re-scoping the
 * semantic vars on the subtree recolors every utility inside (headings, body
 * copy, rails) without touching markup. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band {
    --color-foreground: #120a0b;
    --color-muted-foreground: #3d3534;
    --color-border: transparent;
    background-color: var(--ms-highlight);
    border: none;
    border-radius: 40px;
    margin-left: 16px;
    margin-right: 16px;
    /* Breathing room between the rounded band and the dark footer. */
    margin-bottom: 72px;
    /* The markup's py-24 (density-inflated to ~115px) is too tall inside the
     * island — pin the reference's 64px. */
    padding-top: 64px;
    padding-bottom: 64px;
    overflow: hidden;
}
@media (min-width: 80rem) {
    html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band {
        margin-left: auto;
        margin-right: auto;
    }
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band::before,
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band::before {
    left: -40px;
    top: 20%;
    width: 160px;
    height: 160px;
    border: 3px solid rgb(255 255 255 / 0.3);
    animation: ms-geo-float 8s ease-in-out infinite;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band::after {
    right: -30px;
    bottom: 15%;
    width: 110px;
    height: 110px;
    background: rgb(255 255 255 / 0.22);
    animation: ms-geo-float 10s ease-in-out infinite reverse;
}
/* Buttons on the yellow band: the generic ink-pill hover swaps to YELLOW —
 * invisible against this background. Here the primary inverts to white +
 * ink instead; secondary is a solid white pill that lifts. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band .ms-btn-primary:hover {
    background-color: #ffffff;
    color: var(--ms-ink);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band .ms-btn-secondary {
    border-color: #ffffff;
    background-color: #ffffff;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-cta-band .ms-btn-secondary:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
}

/* ---- Footer ----------------------------------------------------------------
 * Full-width dark, edge-to-edge, links at 60% white. Var re-scoping recolors
 * the column headings / tagline / copyright utilities inside. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-footer {
    --color-foreground: #f8f4f1;
    --color-muted-foreground: rgb(248 244 241 / 0.7);
    --color-border: rgb(248 244 241 / 0.12);
    --color-card: transparent;
    background-color: var(--ms-ink);
    border-top: none;
    border-radius: 0;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-footer a {
    color: rgb(255 255 255 / 0.6);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-footer a:hover {
    color: #ffffff;
}
/* Social icon boxes (the h-9 squares): the generic white-link hover above
 * made the glyph white on the utility's white hover-bg → invisible. Give
 * them their own treatment: soft outline, yellow fill + ink glyph on hover. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-footer a[class*='h-9'] {
    border-color: rgb(248 244 241 / 0.18);
    background: transparent;
    color: rgb(255 255 255 / 0.7);
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-footer a[class*='h-9']:hover {
    background: var(--ms-highlight);
    border-color: transparent;
    color: var(--ms-ink);
}
/* Brand logo on the dark footer: prefer the admin's dark-variant upload;
 * when only a light logo exists, invert it to a white mark via
 * brightness(0) invert(1). */
html[data-skin='geometry'][data-chrome='marketing'] .ms-footer .ms-footer-logo:has(+ .ms-footer-logo-dark) {
    display: none;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-footer .ms-footer-logo-dark {
    display: block;
}
html[data-skin='geometry'][data-chrome='marketing'] .ms-footer .ms-footer-logo:not(:has(+ .ms-footer-logo-dark)) {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* ---- Form inputs -----------------------------------------------------------
 * Auth / checkout / contact surfaces render the shared ui/Input (rounded-lg +
 * 1px border + shadow-sm). Geometry wants 2px cream borders, 12px radius, zero
 * shadow, and a soft-yellow focus ring. Scoped at the element level so it covers
 * the shared component without editing it. */
html[data-skin='geometry'][data-chrome='marketing'] input:where([type='text'],[type='email'],[type='password'],[type='number'],[type='search'],[type='tel'],[type='url']),
html[data-skin='geometry'][data-chrome='marketing'] textarea,
html[data-skin='geometry'][data-chrome='marketing'] select {
    border: 2px solid var(--ms-card-border);
    border-radius: 12px;
    box-shadow: none;
}
html[data-skin='geometry'][data-chrome='marketing'] input:where([type='text'],[type='email'],[type='password'],[type='number'],[type='search'],[type='tel'],[type='url']):focus-visible,
html[data-skin='geometry'][data-chrome='marketing'] textarea:focus-visible,
html[data-skin='geometry'][data-chrome='marketing'] select:focus-visible {
    border-color: var(--ms-highlight);
    box-shadow: 0 0 0 4px rgb(255 216 111 / 0.15);
    outline: none;
}

/* ---- Motion ----------------------------------------------------------------
 * Floats keep their constant tilt (rotation inside every keyframe) — the
 * global prefers-reduced-motion kill-switch in app.css freezes these. */
@keyframes ms-badge-float {
    0%,
    100% {
        transform: translateY(0) rotate(var(--ms-tilt));
    }
    50% {
        transform: translateY(-6px) rotate(var(--ms-tilt));
    }
}
@keyframes ms-geo-float {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(6px, -10px) rotate(4deg);
    }
}

/* ---- Blueprint rails + crosses (Anthropic default-skin only) ---------------
 * The CrossMark "+" ornaments (.ms-cross) and the hairline rails (border-x on
 * section inner containers + border-y on grid/list bands) are a default-skin
 * (Anthropic-preset) detail. Geometry's identity is flat 2px cream card
 * borders + colored pills — the surveyor's-blueprint grid is off-aesthetic
 * here, so strip every cross + rail.
 *
 * `.ms-cta-band` and `header:has(> .ms-nav)` / `.ms-footer` already neutralize
 * their own borders above; these generic rules complement them. Every border-y
 * usage in the section markup is a top/bottom hairline rail on a grid/list
 * container (paired with divide-y or gap-px gridlines), never a real card
 * edge — cards use full `border` (border-width), so zeroing border-block-width
 * is collateral-free. */
html[data-skin='geometry'][data-chrome='marketing'] .ms-cross {
    display: none;
}
html[data-skin='geometry'][data-chrome='marketing'] [class*='border-x'] {
    border-inline-width: 0;
}
html[data-skin='geometry'][data-chrome='marketing'] [class*='border-y'] {
    border-block-width: 0;
}
/* Section roots separate with single-side `border-t border-border/60`
 * hairlines (FAQ/Features/Stats/LogoWall/HowItWorks/KitGrid/Footer) — same
 * blueprint detail, same removal. Scoped to the section elements so card
 * edges inside (full `border`) stay untouched. */
html[data-skin='geometry'][data-chrome='marketing'] section[class*='ms-section-'] {
    border-block-width: 0;
}
