/* ============================================================
   ABEANT — Product landing pages
   Archetype scopes via [data-archetype]; brand theme via
   css/brands.css on <html data-app="<slug>">.
   ============================================================ */

body {
    overflow-x: hidden;
}

/* Product pages keep the house mark present without using the portal's tall chrome. */
:root {
    --chrome-top: 3.5rem;
    --chrome-inset: var(--space-4);
    --brand-logo-height: 2.4rem;
    --product-nav-height: 3.25rem;
}

.text-link {
    text-decoration: underline;
}

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

.skip-link {
    position: fixed;
    z-index: 200;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.65rem 1rem;
    background: var(--signal);
    color: var(--signal-ink);
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.landing-fallback { max-width: 70rem; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.landing-fallback__hero { padding: var(--space-6) 0; }
.landing-fallback__hero h1 { max-width: 13ch; margin: var(--space-3) 0; font-family: var(--font-display); font-size: var(--text-display); font-weight: 300; line-height: 1.05; }
.landing-fallback__hero p,
.landing-fallback section p { max-width: 68ch; color: var(--ink-2); }
.landing-fallback section { padding: var(--space-4) 0; border-top: var(--hairline) solid var(--line); }
.landing-fallback section h2 { font-family: var(--font-display); font-size: var(--text-title); font-weight: 300; }
.landing-fallback section h3 { margin: var(--space-3) 0 0; }

/* Studio strip — constant ABEANT chrome above the product page */
.landing-topbar,
.studio-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: var(--chrome-top);
    box-sizing: border-box;
    padding: 0.25rem var(--chrome-inset);
    border-bottom: var(--hairline) solid var(--line);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.studio-strip,
.site-footer { --signal: #C24E00; --signal-ink: #FFFFFF; }
:root[data-theme="dark"] .studio-strip,
:root[data-theme="dark"] .site-footer { --signal: #FF6600; --signal-ink: #1C1A19; }

/* The shared PNG is 2401 × 1062, with visible artwork at
   (334, 347)–(2034, 699). Compensate for its built-in clear space only
   on sub-pages: 88 × 18px of artwork in a 44px-tall home link.
   The portal retains its original asset sizing and generous clear space. */
.landing-topbar .topbar__brand {
    position: relative;
    flex: 0 0 5.5rem;
    width: 5.5rem;
    height: 2.75rem;
    overflow: hidden;
}
.landing-topbar .topbar__brand img {
    position: absolute;
    width: 141.235294%; /* 2401 / 1700 */
    max-width: none;
    height: auto;
    left: -19.647059%; /* -334 / 1700 */
    top: 50%;
    transform: translateY(-49.246704%); /* artwork centre: 523 / 1062 */
}
.landing-topbar .topbar__brand:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

.studio-strip__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.studio-strip__context {
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.landing-topbar .label,
.studio-strip .label {
    text-align: right;
}

.studio-strip #theme-toggle {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
}

.studio-strip #theme-toggle .icon { width: 1rem; height: 1rem; }

/* ============================================================
   Hero
   ============================================================ */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
    text-align: center;
    padding: calc(var(--chrome-top) + var(--space-5)) var(--space-3) var(--space-7);
}

.hero .shader-bg,
.hero__fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero__fallback {
    background:
        radial-gradient(ellipse 90% 60% at 50% 110%,
            color-mix(in srgb, var(--signal) 28%, transparent) 0%,
            transparent 65%),
        var(--bg);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="1.1" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.5"/></svg>');
    background-size: 220px 220px;
    opacity: 0.07;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(to bottom, transparent 55%, var(--bg) 100%),
        radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 3;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.hero__mark {
    width: clamp(7rem, 12vw, 10rem);
    height: clamp(7rem, 12vw, 10rem);
    display: block;
    margin-bottom: var(--space-2);
}

.hero__kicker {
    margin: 0;
}

.hero__name {
    font-size: var(--text-hero);
    margin: 0;
}

.hero__name--logotype { display: flex; justify-content: center; }
.hero__logotype { display: block; width: min(80vw, 34rem); }
.hero__logotype svg { display: block; width: 100%; height: auto; max-height: 6rem; color: var(--ink); fill: currentColor; }

.hero__title-art {
    width: min(92vw, 42rem);
    margin-bottom: var(--space-2);
}
.hero__title-art img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 12rem;
    object-fit: contain;
}

.hero__shot {
    width: min(92vw, 48rem);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-m);
    overflow: hidden;
    border: var(--hairline) solid var(--line);
    box-shadow: 0 24px 60px color-mix(in srgb, #000 35%, transparent);
}
.hero__shot img {
    display: block;
    width: 100%;
    height: auto;
}

.hero__tagline {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-lead);
    color: var(--ink-2);
    margin: 0;
    max-width: 40ch;
}

.hero__platforms {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

.hero__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-2);
}

.hero__hint {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: var(--ink-3);
    animation: hint-drift 2.4s var(--ease-out) infinite;
}

@keyframes hint-drift {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateX(-50%) translateY(8px);
        opacity: 1;
    }
}

/* ============================================================
   Archetype scopes
   ============================================================ */

[data-archetype="game"] .hero--title-art .hero__fallback {
    background:
        radial-gradient(ellipse 80% 55% at 50% 40%,
            color-mix(in srgb, var(--signal) 35%, transparent) 0%,
            transparent 70%),
        #050808;
}

[data-archetype="game"] .hero--title-art::after {
    background:
        linear-gradient(to bottom, transparent 40%, var(--bg) 100%),
        radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, 0.7) 100%);
}

[data-archetype="tool"] .hero--screenshot .hero__content {
    max-width: 960px;
}

[data-archetype="tool"] .section--steps .steps {
    border-left: var(--hairline) solid color-mix(in srgb, var(--signal) 40%, var(--line));
    padding-left: var(--space-4);
}

[data-archetype="service"] .section--pricing .pricing {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

[data-page-theme="dense"] .section {
    padding-block: var(--space-5);
}

/* ============================================================
   Sections
   ============================================================ */

.section {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

.section__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    border-bottom: var(--hairline) solid var(--line);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-5);
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
}

.feature {
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-m);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
    transition: border-color var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.feature:hover {
    border-color: color-mix(in srgb, var(--signal) 60%, var(--line));
    transform: translateY(-4px);
}

.feature__index {
    display: block;
    margin-bottom: var(--space-3);
}

.feature h3 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-title);
    line-height: 1.1;
    margin: 0 0 var(--space-2);
    color: var(--ink);
}

.feature p {
    margin: 0;
    color: var(--ink-2);
    line-height: 1.7;
}

.about__lead,
.story {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.35;
    color: var(--ink);
    max-width: 30ch;
    margin: 0;
}

.story p {
    margin: 0 0 var(--space-3);
}
.story p:last-child {
    margin-bottom: 0;
}

/* Steps */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

.step h3 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-title);
    margin: var(--space-2) 0;
}

.step p {
    margin: 0;
    color: var(--ink-2);
    max-width: 52ch;
}

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

.gallery__item {
    margin: 0;
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--bg-raised);
}

.gallery__item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.gallery__item figcaption {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    color: var(--ink-3);
}

/* Specs */
.specs {
    margin: 0;
}

.specs__row {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--hairline) solid var(--line);
}

.specs__row dt {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
}

.specs__row dd {
    margin: 0;
    color: var(--ink-2);
}

/* Install */
.install__note {
    color: var(--ink-2);
    margin: 0 0 var(--space-3);
}

.install__code {
    margin: 0;
    padding: var(--space-4);
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-m);
    background: var(--bg-recessed);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink);
}

/* Pricing */
.pricing {
    display: grid;
    gap: var(--space-3);
}

.pricing__plan {
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-m);
    padding: var(--space-4);
    background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
}

.pricing__plan h3 {
    font-family: var(--font-display);
    font-weight: 300;
    margin: 0 0 var(--space-2);
}

.pricing__price {
    font-family: var(--font-mono);
    color: var(--signal);
    margin: 0 0 var(--space-2);
}

/* FAQ */
.faq__item {
    border-bottom: var(--hairline) solid var(--line);
    padding: var(--space-3) 0;
}

.faq__item summary {
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-title);
    list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item p {
    margin: var(--space-2) 0 0;
    color: var(--ink-2);
    max-width: 60ch;
}

/* Changelog */
.changelog {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.changelog__entry h3 {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    margin: 0 0 var(--space-1);
    color: var(--signal);
}

.changelog__entry p {
    margin: 0;
    color: var(--ink-2);
}

.changelog__repo {
    margin: 0 0 var(--space-4);
}

/* CTA */
.section--cta .cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) 0;
}

.cta h2 {
    font-weight: 300;
    margin: 0;
}

.cta__body {
    margin: 0;
    color: var(--ink-2);
    max-width: 40ch;
}

.cta__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* ============================================================
   Studio footer
   ============================================================ */

@media (max-width: 720px) {
    :root { --chrome-inset: var(--space-3); }
    .landing-topbar,
    .studio-strip {
        padding-inline: var(--space-3);
    }

    .landing-topbar .topbar__brand {
        flex-basis: 5rem;
        width: 5rem;
    }

    .landing-topbar .label,
    .studio-strip .label {
        max-width: 42vw;
    }

    .section {
        padding: var(--space-5) var(--space-3);
    }

    .features {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .specs__row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

@media (max-width: 389px) {
    .hero {
        padding: var(--space-5) var(--space-2);
    }
}

/* Fine print */
.fine-print__links {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

.fine-print__link,
.fine-print__meta {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-s);
}

.fine-print__link:hover {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--signal) 60%, var(--line));
}

.fine-print__meta {
    border-style: dashed;
    color: var(--ink-3);
}

/* Product navigation sits beneath the constant studio masthead. */
.product-nav {
    position: fixed;
    top: var(--chrome-top);
    left: 0;
    right: 0;
    z-index: 99;
    height: var(--product-nav-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0.5rem var(--chrome-inset);
    border-bottom: var(--hairline) solid var(--line);
    background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.product-nav__identity {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    white-space: nowrap;
}

.product-nav__mark { width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; }
.product-nav__lockup { display: inline-flex; align-items: center; min-width: 5rem; color: var(--ink); }
.product-nav__lockup > svg { display: block; width: auto; max-width: min(18rem,100%); height: auto; fill: currentColor; }
.product-nav__links { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.product-nav__links a,
.product-nav__status { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.08em; }
.product-nav__links a { color: var(--ink-2); white-space: nowrap; }
.product-nav__links a:hover { color: var(--signal); }
.product-nav__status { color: var(--signal); text-transform: uppercase; white-space: nowrap; }

.hero { padding-top: calc(var(--chrome-top) + var(--product-nav-height) + var(--space-5)); }
.section[id] { scroll-margin-top: calc(var(--chrome-top) + var(--product-nav-height) + 1rem); }
.section__title {
    max-width: 18ch;
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}
.section--story .story { max-width: 32ch; color: var(--ink-2); }
.hero__note,
.cta__note { margin: 0; color: var(--ink-3); font-size: var(--text-body-s); }

/* Reusable step-by-step demonstration. */
.demo__heading,
.compatibility__heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.demo__heading .section__title,
.compatibility__heading .section__title { margin: 0; }
.demo__heading p,
.compatibility__heading p { max-width: 42ch; margin: 0; color: var(--ink-2); font-size: var(--text-body); }
.demo { border: var(--hairline) solid var(--line); background: var(--bg-raised); }
.demo__controls { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: var(--hairline) solid var(--line); }
.demo__tab {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 3.75rem; padding: var(--space-2); border-right: var(--hairline) solid var(--line);
    color: var(--ink-2); font-family: var(--font-display); font-size: 1.2rem;
}
.demo__tab:last-child { border-right: 0; }
.demo__tab .label { color: var(--ink-3); }
.demo__tab[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--signal) 12%, var(--bg-raised)); box-shadow: inset 0 -3px var(--signal); }
.demo__tab:hover { color: var(--signal); }
.demo__panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr); min-height: 23rem; }
.demo__panel[hidden] { display: none; }
.demo__diagram {
    min-width: 0; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 3rem);
    padding: var(--space-5); border-right: var(--hairline) solid var(--line);
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--signal) 9%, transparent), transparent 65%), var(--bg-recessed);
}
.demo__handheld {
    position: relative; width: min(26%, 10rem); min-width: 6rem; aspect-ratio: 0.72;
    border: 2px solid var(--ink-2); border-radius: 28px;
    background: var(--bg-raised); box-shadow: 0 16px 30px color-mix(in srgb, #000 30%, transparent);
}
.demo__screen { display: grid; place-items: center; width: 78%; height: 53%; margin: 10% auto 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-recessed); }
.demo__screen-mark { display: block; width: 35%; aspect-ratio: 1.6; border-radius: 50%; background: var(--signal); box-shadow: 0 8px 0 -3px color-mix(in srgb, var(--signal) 65%, #000); }
.demo__dpad,
.demo__buttons { position: absolute; bottom: 10%; color: var(--signal); font: 700 2rem/1 system-ui; }
.demo__dpad { left: 15%; }
.demo__buttons { right: 15%; font-size: 0.95rem; line-height: 0.8; transform: rotate(-35deg); }
.demo__link { flex: 1; min-width: 3.5rem; max-width: 8rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-2); text-align: center; }
.demo__link span:first-child,
.demo__link span:last-child { display: block; height: 1px; width: 100%; background: var(--signal); }
.demo__link .label { color: var(--signal); font-size: var(--text-caption); }
.demo__mac { width: min(49%, 19rem); min-width: 9rem; aspect-ratio: 1.35; border: 2px solid var(--ink-2); border-radius: 10px; background: var(--bg-raised); box-shadow: 0 16px 30px color-mix(in srgb, #000 28%, transparent); }
.demo__mac-bar { display: flex; gap: 4px; align-items: center; height: 1.7rem; padding-left: 0.75rem; border-bottom: 1px solid var(--line); }
.demo__mac-bar i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: 0.55; }
.demo__mac-content { display: flex; flex-direction: column; gap: var(--space-2); padding: 1rem; }
.demo__mac-content .label { color: var(--signal); }
.demo__mac-content strong { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.1rem, 2vw, 2rem); }
.demo__mac-lines { display: block; width: 82%; height: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.demo__text { display: flex; flex-direction: column; justify-content: center; padding: var(--space-5); }
.demo__text h3 { margin: var(--space-2) 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3vw, 3rem); }
.demo__text p { max-width: 34ch; margin: 0; color: var(--ink-2); font-size: var(--text-body); }
.demo__disclosure { color: var(--ink-3); margin: var(--space-2) 0 0; }

/* Compatibility is a decision aid, immediately before the FAQ and final action. */
.compatibility__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.compatibility__item { padding: var(--space-4); border: var(--hairline) solid var(--line); background: var(--bg-raised); }
.compatibility__item h3 { margin: var(--space-3) 0 var(--space-2); font-family: var(--font-display); font-weight: 300; font-size: var(--text-title); }
.compatibility__item p { margin: 0; color: var(--ink-2); }
.compatibility__note { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--signal); background: var(--bg-recessed); color: var(--ink-2); }

/* The footer links the product back to the studio's published catalogue. */
.site-footer { color: var(--ink); background: var(--bg); }
.portfolio-footer { border-top: var(--hairline) solid var(--line); }
.portfolio-footer__inner {
    display: grid;
    grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1.6fr);
    gap: var(--space-7);
    max-width: 1200px;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}
.portfolio-footer__brand { display: inline-block; }
.portfolio-footer__brand img { display: block; width: 8rem; height: auto; }
.portfolio-footer__intro .label {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--ink-3);
}
.portfolio-footer__intro h2 {
    max-width: 10ch;
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 300;
    line-height: 1.05;
}
.portfolio-footer__home { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--signal); }
.portfolio-footer__home:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.portfolio-footer__home .icon { width: 1rem; height: 1rem; fill: currentColor; }
.portfolio-footer__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.portfolio-footer__group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.portfolio-footer__group h3 {
    width: 100%;
    margin: 0 0 var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: var(--hairline) solid var(--line);
    color: var(--ink);
    text-transform: uppercase;
}
.portfolio-footer__group h3 span { margin-right: 0.5rem; color: var(--signal); }
.portfolio-footer__group a { color: var(--ink-2); font-family: var(--font-display); font-size: 1.1rem; }
.portfolio-footer__group a:hover,
.portfolio-footer__group a[aria-current="page"] { color: var(--signal); }
.portfolio-footer__empty { color: var(--ink-3); font-family: var(--font-display); }
.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: var(--hairline) solid var(--line);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.site-footer__links a:hover { color: var(--signal); }

@media (max-width: 800px) {
    .product-nav { padding: 3px var(--space-3); gap: var(--space-2); }
    .product-nav__identity { flex: none; min-height: 44px; }
    .product-nav__links { flex: 1; min-width: 0; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
    .product-nav__links::-webkit-scrollbar { display: none; }
    .product-nav__links a { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
    .product-nav__status { display: none; }
    .demo__heading,
    .compatibility__heading { display: block; }
    .demo__heading p,
    .compatibility__heading p { margin-top: var(--space-3); }
    .demo__panel { grid-template-columns: 1fr; }
    .demo__diagram { min-height: 16rem; border-right: 0; border-bottom: var(--hairline) solid var(--line); }
    .demo__text { padding: var(--space-4); }
    .compatibility__grid { grid-template-columns: 1fr; gap: var(--space-2); }
    .portfolio-footer__inner { grid-template-columns: 1fr; gap: var(--space-5); }
    .portfolio-footer__groups { gap: var(--space-4); }
}

@media (max-width: 560px) {
    .studio-strip__context { display: none; }
    .demo__tab { flex-direction: column; gap: 0; min-height: 3.5rem; font-size: 1rem; }
    .demo__diagram { padding: var(--space-3); gap: var(--space-2); }
    .portfolio-footer__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
    .portfolio-footer__group a { font-size: 1rem; }
    .site-footer__bottom { align-items: flex-start; flex-direction: column; gap: var(--space-2); padding-inline: var(--space-3); }
    .site-footer__links { justify-content: flex-start; }
}

/* Registered lockups use one cap calibration across product headers. */
.product-nav__lockup[data-source-revision] > svg { height:auto !important; max-height:none !important; max-width:min(18rem,100%) !important; }

.product-nav__lockup > svg[data-lockup-variant="dark"] { display:none; }
:root[data-theme="dark"] .product-nav__lockup > svg[data-lockup-variant="light"] { display:none; }
:root[data-theme="dark"] .product-nav__lockup > svg[data-lockup-variant="dark"] { display:block; }

/* Extend product backgrounds behind the notch while protecting authored content.
   Transparent borders retain each page's existing gutters and background paint. */
html[data-shell-page="product"] #landing {
    /* Rotated decoration must not enlarge Safari's document viewport. */
    overflow-x: clip;
    border-left: env(safe-area-inset-left, 0px) solid transparent;
    border-right: env(safe-area-inset-right, 0px) solid transparent;
}
/* Match root/body painting synchronously during theme changes and rotation. */
html[data-shell-page="product"] body { transition-property: color; }
.portfolio-footer__inner, .site-footer__bottom {
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}
html[data-shell-page="product"] .shell-product:not([data-layout="inline"]) > .shell-links {
    padding-left: max(var(--shell-inset), env(safe-area-inset-left, 0px));
    padding-right: max(var(--shell-inset), env(safe-area-inset-right, 0px));
}