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

/* Tells the browser which scheme to draw its OWN widgets in — scrollbars, form controls,
   the caret. Without it they stay light whatever the theme, which shows on a dark page. The
   value follows the theme the same way the tokens do. */
:root { color-scheme: light }
:root[data-theme="dark"] { color-scheme: dark }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark }
}

:root {
    --bg: #fff;
    --bg2: #f7f7f7;
    --bg3: #efefef;
    --inv: #000;
    --inv2: #111;
    --text: #000;
    --text2: #262626;
    --text3: #5e5e5e;
    --text4: #8a8a8a;
    --border: #c4c4c4;
    --border2: #9a9a9a;
    --ok: #22c55e;
    --warn: #f59e0b;
    --err: #ef4444;
    --font: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --ease: .18s ease;
    --nav-bg: rgba(255,255,255,.92);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0a0a0a;
        --bg2: #111;
        --bg3: #1a1a1a;
        --inv: #fff;
        --inv2: #e5e5e5;
        --text: #fff;
        --text2: #d4d4d4;
        --text3: #a3a3a3;
        --text4: #666;
        --border: #2a2a2a;
        --border2: #3a3a3a;
        --nav-bg: rgba(10,10,10,.92);
    }
    :root:not([data-theme="light"]) .ios .tile.active { border-color: #fff }
    :root:not([data-theme="light"]) .ios .tile .st.down .d { background: #333 }
    /* Keep inv-bg elements dark instead of flipping to white */
    :root:not([data-theme="light"]) .fb.dark,
    :root:not([data-theme="light"]) .pricing-plan.featured,
    :root:not([data-theme="light"]) .np-strip,
    :root:not([data-theme="light"]) .marquee-bar,
    :root:not([data-theme="light"]) .rt-config,
    :root:not([data-theme="light"]) .pwa-visual,
    :root:not([data-theme="light"]) .terminal,
    :root:not([data-theme="light"]) footer { background: #1a1a1a }
    :root:not([data-theme="light"]) .fb.dark:hover { background: #222 }
    :root:not([data-theme="light"]) .fb-tier.pro { border-color: #fff; color: #fff }
    :root:not([data-theme="light"]) .pricing-plan.featured { color: #fff }
    :root:not([data-theme="light"]) .pricing-plan.featured .pp-cta { background: #fff; color: #000; border-color: #fff }
    :root:not([data-theme="light"]) .pricing-plan.featured .pp-cta:hover { background: transparent; color: #fff }
    :root:not([data-theme="light"]) .rt-list .tag { color: var(--text3) }
}

:root[data-theme="dark"] {
    --bg: #0a0a0a;
    --bg2: #111;
    --bg3: #1a1a1a;
    --inv: #fff;
    --inv2: #e5e5e5;
    --text: #fff;
    --text2: #d4d4d4;
    --text3: #a3a3a3;
    --text4: #666;
    --border: #2a2a2a;
    --border2: #3a3a3a;
    --nav-bg: rgba(10,10,10,.92);
}

[data-theme="dark"] .ios .tile.active { border-color: #fff }
[data-theme="dark"] .ios .tile .st.down .d { background: #333 }
[data-theme="dark"] .fb.dark,
[data-theme="dark"] .pricing-plan.featured,
[data-theme="dark"] .np-strip,
[data-theme="dark"] .marquee-bar,
[data-theme="dark"] .rt-config,
[data-theme="dark"] .pwa-visual,
[data-theme="dark"] .terminal,
[data-theme="dark"] footer { background: #1a1a1a }
[data-theme="dark"] .fb.dark:hover { background: #222 }
[data-theme="dark"] .fb-tier.pro { border-color: #fff; color: #fff }
[data-theme="dark"] .pricing-plan.featured { color: #fff }
[data-theme="dark"] .pricing-plan.featured .pp-cta { background: #fff; color: #000; border-color: #fff }
[data-theme="dark"] .pricing-plan.featured .pp-cta:hover { background: transparent; color: #fff }
[data-theme="dark"] .rt-list .tag { color: var(--text3) }

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

a {
    color: inherit;
    text-decoration: none
}

.w {
    max-width: 1280px;
    margin: 0 auto;
    /* max() rather than an addition: the inset is zero everywhere but a notched phone held
       sideways, where the rounded corner would otherwise clip the first characters of every
       line. */
    padding: 0 max(48px, env(safe-area-inset-left)) 0 max(48px, env(safe-area-inset-right))
}

@media(max-width:720px) {
    .w {
        padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right))
    }
}

.mono {
    font-family: var(--mono)
}

.dim {
    color: var(--text3)
}

/* ANNOUNCE BAR */
.announce-bar {
    background: var(--inv);
    color: var(--bg);
    text-align: center;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1;
    padding: 10px 24px;
}

.announce-bar a {
    color: inherit;
    text-decoration: none;
    /* Not inline-flex. This is a sentence, and a flex container turns every inline
       element inside it into a flex item — so the <sup> of `Audiogravi<sup>ty</sup>`
       picked up `gap` as 8px of blank on each side and split the brand in two. The
       badge and the arrow get their spacing from margins instead. */
    display: inline-block;
    transition: opacity var(--ease);
}

/* The brand appears here as soon as a tagline names the product. Same treatment as
   .nav-logo sup / .hero-h1 sup, scaled for the 13px of this bar. */
.announce-bar sup {
    font-size: .5em;
    font-weight: 900;
    vertical-align: super;
}

.announce-bar a:hover {
    opacity: .8;
}

.announce-badge {
    display: inline-block;
    background: var(--warn);
    color: #000;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 3px 7px;
    border-radius: 3px;
    line-height: 1;
    margin-right: 6px;
    vertical-align: middle;
}

.announce-arrow {
    font-size: 15px;
    opacity: .7;
    margin-left: 6px;
    vertical-align: middle;
}

.announce-date {
    opacity: .55;
    font-weight: 400;
}

@media(max-width:720px) {
    .announce-bar {
        font-size: 12px;
        /* Room on the right for the "Coming soon" ribbon. It is fixed to the top-right
           corner and sits above everything, so on a narrow screen — where this text wraps
           onto three lines instead of one — it landed squarely on the words. */
        padding: 8px 92px 8px 16px;
        text-align: left;
    }
}

/* NAV */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    /* The inset is zero in a browser tab and only grows once the page runs from a home
       screen, where a sticky bar would otherwise sit beneath the clock. */
    height: calc(60px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center
}

.nav-inner > * { min-width: 0 }

.nav-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* A flex item refuses to shrink below its content unless told otherwise, and this bar
       held 436px of it — logo, links, theme toggle, GitHub button — on a 390px phone. The
       page widened to fit, which reads as a site you have to drag sideways. */
    min-width: 0
}

@media(max-width:720px) {
    .nav-inner {
        padding: 0 24px
    }
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.04em
}

.nav-logo-icon {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    margin-right: 10px
}

.nav-logo sup {
    font-size: .42em;
    font-weight: 900;
    vertical-align: super;
    margin-left: 1px
}

.nav-links {
    display: flex;
    gap: 24px;
    align-items: center
}

.nav-links a {
    font-size: 13px;
    font-weight: 500;
    color: var(--text3);
    transition: color var(--ease)
}

.nav-links a:hover {
    color: var(--text)
}

.nav-gh {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--inv);
    color: var(--bg);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid var(--inv);
    transition: all var(--ease)
}

.nav-gh:hover {
    background: var(--bg);
    color: var(--inv)
}

.nav-gh svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--text3);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease);
    flex-shrink: 0
}

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

.theme-toggle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* Between the two breakpoints the bar has more in it than it has room for. `.nav-links` is a
   flex item, so it gets squeezed below its own content width — and because its links do not
   wrap, they spill straight out of it and sit on top of the theme toggle and the GitHub button.
   Nothing reports an overflow: the page is not wider, the elements simply overlap.

   The room is taken back from the two places that can spare it — the GitHub button, whose link
   also lives in the footer, and the spacing between links. */
@media(max-width:1100px) {
    .nav-gh {
        display: none
    }

    .nav-links {
        gap: 16px
    }
}

/* Below this the links used to be hidden outright, which left a phone with no navigation at
   all: eight sections and no way to reach any of them but scrolling the whole page. They now
   take a row of their own under the lockup and scroll sideways, the same answer the licence
   server's header uses — a bar that has run out of room should still be reachable.

   The threshold is where the single row stops being clean, not where a phone stops: measured,
   two of the labels break onto a second line inside the bar below 850px, which is what a
   landscape phone gets. Picking 680 covered portrait and left landscape looking broken.

   `min-width: 0` is what actually lets the row scroll: a flex item refuses to shrink below its
   content without it, and would push the theme toggle off the bar instead. */
@media(max-width:850px) {
    .nav-inner {
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 0 16px
    }

    nav {
        height: auto;
        padding-bottom: 6px
    }

    .nav-links {
        order: 3;
        flex-basis: 100%;
        min-width: 0;
        gap: 18px;
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap
    }

    .nav-links::-webkit-scrollbar {
        display: none
    }

    /* The bar is sticky and now two rows tall, so a section scrolled to the very top would sit
       underneath it. */
    .section[id],
    .hero {
        scroll-margin-top: 104px
    }
}

/* HERO */
.hero {
    /* dvh, not vh: on iOS 100vh counts the strip the address bar sits over, so the hero is
       taller than the screen and its lower edge is never where it looks. vh stays first as
       the fallback for anything that does not know the dynamic unit. */
    min-height: calc(100vh - 60px);
    min-height: calc(100dvh - 60px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid var(--border)
}

@media(max-width:900px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto
    }
}

.hero-left {
    padding: 80px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--border)
}

@media(max-width:900px) {
    .hero-left {
        padding: 60px 24px 40px;
        border-right: 0;
        border-bottom: 1px solid var(--border)
    }
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--text3);
    margin-bottom: 28px
}

.hero-kicker .live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ok)
}

.hero-kicker .live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 6px var(--ok);
    animation: blink 3s infinite;
    display: inline-block
}

@keyframes blink {
    0%, 100% { opacity: 1 }
    50% { opacity: .35 }
}

.hero-h1 {
    font-size: clamp(54px, 7vw, 104px);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: .9;
    margin-bottom: 28px
}

/* "Audiogravity" is a single unbreakable word, so the title's own min-content width is the
   floor of the whole page. At 54px that floor is 299px — wider than the 272px a 320px
   screen leaves once the column padding is taken, which widens the page rather than
   wrapping. Shrink the title on those screens; every other size already fits. */
@media(max-width:360px) {
    .hero-h1 {
        font-size: 46px
    }
}

.hero-h1 sup {
    font-size: .38em;
    font-weight: 900;
    vertical-align: super
}

.hero-tag {
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin-bottom: 20px;
    max-width: 22ch
}

.hero-tag em {
    font-style: italic;
    color: var(--text3);
    font-weight: 400
}

.hero-lede {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text2);
    max-width: 44ch;
    margin-bottom: 36px
}

.hero-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 48px
}

/* Mobile : les boutons stackent verticalement, et les ``::after`` labels
   (Coming soon / Private beta) sont positionnés à top: -22px au-dessus de
   leur bouton. Sans gap suffisant, le label colle visuellement au bouton
   précédent. 32px laisse la place au label (~22px) + un peu d'air. */
@media (max-width: 720px) {
    .hero-cta {
        gap: 32px;
    }
}

.cta-primary {
    background: var(--inv);
    color: var(--bg);
    padding: 14px 28px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid var(--inv);
    transition: all var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.cta-primary:hover {
    background: var(--bg);
    color: var(--inv)
}

.cta-ghost {
    padding: 14px 28px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid var(--border);
    color: var(--text2);
    transition: all var(--ease)
}

.cta-ghost:hover {
    border-color: var(--inv);
    color: var(--inv)
}

/* Grid rather than a wrapping flex row, and the divider on the LEFT of each item.
   With border-right on a wrapping row, whichever item happens to end a row keeps a divider
   with nothing after it — visible at every phone width and again at ~1100px, where the hero
   splits into two columns and this bar narrows. Anchoring the divider to the left lets a
   :nth-child rule suppress it for the first item of each row, which holds however many
   rows the items land on. */
.hero-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 0;
    border-top: 1px solid var(--border);
    padding-top: 28px
}

.hero-proof-item {
    min-width: 0;
    padding-left: 24px;
    border-left: 1px solid var(--border)
}

.hero-proof-item:nth-child(2n+1) {
    padding-left: 0;
    border-left: 0
}

/* Only the single-column hero is wide enough for all four on one row; the two-column
   layout above 900px leaves this bar too narrow, so it stays on two columns there. */
@media(min-width:660px) and (max-width:900px) {
    .hero-proof {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .hero-proof-item:nth-child(2n+1) {
        padding-left: 24px;
        border-left: 1px solid var(--border)
    }

    .hero-proof-item:first-child {
        padding-left: 0;
        border-left: 0
    }
}

.hero-proof-item .n {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1
}

.hero-proof-item .l {
    font-size: 11px;
    color: var(--text3);
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: 4px
}

.hero-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: var(--bg2);
    position: relative;
    overflow: hidden
}

@media(max-width:900px) {
    .hero-right {
        padding: 40px 24px
    }
}

.hero-right::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: .5;
    pointer-events: none
}

.ios {
    position: relative;
    z-index: 1;
    width: 300px;
    height: 620px;
    background: #000;
    border-radius: 44px;
    padding: 8px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35), 0 0 0 1px #d8d8d8
}

.ios .island {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 28px;
    background: #000;
    border-radius: 18px;
    z-index: 5
}

.ios .home-ind {
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 4px;
    background: #000;
    border-radius: 2px;
    z-index: 5
}

.ios .scr {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 36px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--font)
}

.ios .stbar {
    height: 42px;
    padding: 14px 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #000
}

.ios .stbar .icons {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #000
}

.ios .tbar {
    padding: 10px 18px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border)
}

.ios .tbar h2 {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em
}

.ios .tbar .live {
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ok);
    display: flex;
    align-items: center;
    gap: 5px
}

.ios .tbar .live::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 5px var(--ok);
    animation: blink 2s infinite
}

.ios .body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.ios .filt {
    display: flex;
    gap: 5px;
    padding: 10px 18px 6px
}

.ios .filt .pill {
    flex-shrink: 0;
    padding: 4px 9px;
    border: 1px solid var(--border);
    color: var(--text3);
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em
}

.ios .filt .pill.on {
    background: #000;
    color: #fff;
    border-color: #000
}

.ios .tiles {
    padding: 6px 18px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1
}

.ios .tile {
    border: 1px solid var(--border);
    padding: 10px 12px
}

.ios .tile.active {
    border-color: #000;
    border-width: 1.5px
}

.ios .tile.down {
    opacity: .55
}

.ios .tile .hd {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px
}

.ios .tile .hd .n {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em
}

.ios .tile .hd .u {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text3);
    margin-top: 2px
}

.ios .tile .st {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600
}

.ios .tile .st .d {
    width: 5px;
    height: 5px;
    border-radius: 50%
}

.ios .tile .st.up {
    color: var(--ok)
}

.ios .tile .st.up .d {
    background: var(--ok);
    box-shadow: 0 0 4px var(--ok);
    animation: blink 3s infinite
}

.ios .tile .st.down {
    color: var(--text4)
}

.ios .tile .st.down .d {
    background: #ddd
}

.ios .tile .mt {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-family: var(--mono);
    font-size: 8.5px;
    color: var(--text3)
}

.ios .tile .mt b {
    color: #000;
    font-weight: 700
}

.ios .tile .spk {
    width: 100%;
    height: 13px;
    margin-top: 3px
}

.ios .tile .ft {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px dashed #efefef;
    gap: 5px
}

.ios .tile .bdg {
    padding: 1px 5px;
    border: 1px solid;
    font-family: var(--mono);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: .04em
}

.ios .tile .bdg.ok {
    border-color: var(--ok);
    color: var(--ok)
}

.ios .tile .bdg.warn {
    border-color: var(--warn);
    color: var(--warn)
}

.ios .tile .bdg.dim {
    border-color: #ccc;
    color: #888
}

.ios .np {
    padding: 9px 18px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 9px;
    align-items: center;
    background: var(--bg2)
}

.ios .np .cv {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #c0593b 0%, #7a3220 50%, #1f0e08 100%);
    position: relative
}

.ios .np .cv::after {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(245, 230, 207, .5);
    border-radius: 50%
}

.ios .np .col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px
}

.ios .np .t {
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ios .np .a {
    font-size: 8.5px;
    color: var(--text3);
    font-family: var(--mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ios .np .fmt {
    font-family: var(--mono);
    font-size: 7.5px;
    font-weight: 700;
    border: 1px solid var(--ok);
    color: var(--ok);
    padding: 1px 4px
}

.ios .tab {
    display: flex;
    justify-content: space-around;
    padding: 6px 4px 16px;
    border-top: 1px solid var(--border)
}

.ios .tab .it {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--mono);
    font-size: 7.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text4);
    flex: 1;
    padding: 4px 0
}

.ios .tab .it.on {
    color: #000
}

.ios .tab .it svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ios .tab .it.on svg {
    stroke-width: 2.2
}

/* MARQUEE */
.marquee-bar {
    background: var(--inv);
    color: #9a9a9a;
    padding: 13px 0;
    border-bottom: 1px solid #2a2a2a;
    overflow: hidden
}

.marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: marquee 38s linear infinite
}

.marquee-track span {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .2em;
    padding: 0 28px
}

.marquee-track .sep {
    opacity: .25
}

@keyframes marquee {
    from { transform: translateX(0) }
    to { transform: translateX(-50%) }
}

/* PULL */
.pull {
    padding: 90px 48px;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 60px;
    align-items: start
}

@media(max-width:720px) {
    .pull {
        padding: 60px 24px;
        grid-template-columns: 1fr;
        gap: 20px
    }
}

.pull-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--text4);
    padding-top: 10px;
    border-top: 1px solid var(--border)
}

.pull-q {
    font-size: clamp(26px, 3.4vw, 46px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.18;
    color: var(--text)
}

.pull-q em {
    font-style: italic;
    color: var(--text3);
    font-weight: 400
}

/* SECTIONS */
.section {
    padding: 100px 48px;
    border-bottom: 1px solid var(--border)
}

@media(max-width:720px) {
    /* No horizontal padding here: every section wraps its content in .w, which already
       supplies it, and the two were stacking. On a 390px phone that spent 96px — a quarter
       of the screen — on margins alone, which is why the cards read so narrow. The gutter
       is .w's alone below this width, and it holds the safe-area insets. */
    .section {
        padding: 60px 0
    }
}

.section.alt {
    background: var(--bg2)
}

.section-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: var(--text4);
    margin-bottom: 16px
}

.section-title {
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: .95;
    margin-bottom: 24px
}

.section-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--text3)
}

.section-sub {
    font-size: 17px;
    color: var(--text3);
    line-height: 1.6;
    max-width: 62ch;
    margin-bottom: 56px
}

/* NOW PLAYING STRIP */
.np-strip {
    background: var(--inv);
    color: #fff;
    padding: 40px 48px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media(max-width:720px) {
    .np-strip {
        padding: 40px 24px;
        grid-template-columns: 1fr;
        gap: 28px
    }
}

.np-meta {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.np-meta .label {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: #555
}

.np-meta .track-name {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.1
}

.np-meta .track-artist {
    font-size: 16px;
    color: #666;
    margin-top: 4px
}

.np-meta .service-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid #2a2a2a;
    padding: 5px 10px;
    color: #555;
    margin-top: 8px;
}

.np-meta .service-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warn);
    box-shadow: 0 0 6px var(--warn)
}

.np-visual {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.np-bar {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 60px
}

.np-bar-col {
    flex: 1;
    background: #222;
    border-radius: 1px;
    animation: dance var(--dur) ease-in-out infinite alternate;
}

@keyframes dance {
    from { transform: scaleY(.2) }
    to { transform: scaleY(1) }
}

.np-bar-col:nth-child(1) { --dur: 0.6s }
.np-bar-col:nth-child(2) { --dur: 0.9s; animation-delay: .1s }
.np-bar-col:nth-child(3) { --dur: 0.7s; animation-delay: .2s }
.np-bar-col:nth-child(4) { --dur: 1.1s; animation-delay: .05s }
.np-bar-col:nth-child(5) { --dur: 0.8s; animation-delay: .15s }
.np-bar-col:nth-child(6) { --dur: 0.65s; animation-delay: .25s }
.np-bar-col:nth-child(7) { --dur: 1.0s; animation-delay: .08s }
.np-bar-col:nth-child(8) { --dur: 0.75s; animation-delay: .18s }
.np-bar-col:nth-child(9) { --dur: 0.85s; animation-delay: .3s }
.np-bar-col:nth-child(10) { --dur: 0.7s; animation-delay: .12s }
.np-bar-col:nth-child(11) { --dur: 0.95s; animation-delay: .22s }
.np-bar-col:nth-child(12) { --dur: 0.6s; animation-delay: .06s }

.np-bar-col.active {
    background: var(--warn)
}

.np-chain {
    display: flex;
    align-items: center;
    gap: 0;
    font-family: var(--mono);
    font-size: 10px;
    color: #444;
    text-transform: uppercase;
    letter-spacing: .1em;
    flex-wrap: wrap;
}

.np-chain .node {
    border: 1px solid #2a2a2a;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.np-chain .node.active {
    border-color: var(--warn);
    color: var(--warn)
}

.np-chain .node.bitperfect {
    border-color: var(--ok);
    color: var(--ok)
}

.np-chain .arr {
    padding: 0 4px;
    color: #333
}

/* FEATURES BENTO */
.feat-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border)
}

.fb {
    background: var(--bg);
    padding: 36px 32px;
    position: relative
}

.fb:hover {
    background: var(--bg2)
}

.fb.span2 {
    grid-column: span 2
}

.fb.span3 {
    grid-column: span 3
}

.fb.span4 {
    grid-column: span 4
}

.fb.span6 {
    grid-column: span 6
}

.fb.dark {
    background: var(--inv);
    color: #fff
}

.fb.dark:hover {
    background: var(--inv2)
}

.fb.dark .fb-icon {
    border-color: #3a3a3a;
    color: #9a9a9a
}

.fb.dark h3 {
    color: #fff
}

.fb.dark p {
    color: #c4c4c4
}

.fb.dark .fb-chip {
    border-color: #3a3a3a;
    color: #9a9a9a
}

@media(max-width:900px) {
    .fb.span2,
    .fb.span3,
    .fb.span4,
    .fb.span6 {
        grid-column: span 6
    }
}

.fb-tier {
    position: absolute;
    top: 18px;
    right: 20px;
    font-family: var(--mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .16em;
    padding: 3px 7px;
    border: 1px solid
}

.fb-tier.pro {
    border-color: #000;
    color: #000
}

.fb-tier.starter {
    border-color: var(--text4);
    color: var(--text3)
}

.fb.dark .fb-tier.pro {
    border-color: #fff;
    color: #fff
}

.fb-icon {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    margin-bottom: 20px
}

.fb-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.fb h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 10px;
    line-height: 1.25
}

.fb p {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.7
}

.fb.dark p {
    color: #c4c4c4
}

.fb-chip {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .16em;
    border: 1px solid var(--border);
    padding: 3px 7px;
    color: var(--text4)
}

/* PIPELINE */
.pipeline-frame {
    border: 1px solid var(--border);
    padding: 32px 24px 24px;
    background: var(--bg);
    overflow-x: auto
}

.pipeline-frame svg {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: 0 auto
}

.pn rect {
    fill: var(--bg);
    stroke: var(--border);
    stroke-width: 1
}

.pn rect.active-r {
    fill: rgb(245 158 11 / .06);
    stroke: var(--warn)
}

.pn rect.bp-r {
    fill: rgb(34 197 94 / .06);
    stroke: var(--ok)
}

.pn text {
    fill: var(--text);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700
}

.pn text.sub {
    font-size: 9px;
    fill: var(--text3);
    font-weight: 400
}

.pn text.active-t {
    fill: var(--warn)
}

.pn text.bp-t {
    fill: var(--ok)
}

.pl {
    stroke: var(--border2);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 4 3
}

.pl.active {
    stroke: var(--warn);
    stroke-width: 2;
    stroke-dasharray: none
}

.pl.bp {
    stroke: var(--ok);
    stroke-width: 2;
    stroke-dasharray: none
}

.pipeline-legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .12em
}

.pipeline-legend span {
    display: flex;
    align-items: center;
    gap: 7px
}

.pipeline-legend .sw {
    width: 18px;
    height: 2px;
    display: inline-block
}

.pipeline-legend .sw.dashed {
    background: none;
    border-bottom: 2px dashed var(--border2)
}

.pipeline-legend .sw.active {
    background: var(--warn)
}

.pipeline-legend .sw.bp {
    background: var(--ok)
}

/* RT / SYSTEMD section */
.rt-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    border: 1px solid var(--border);
    min-width: 0
}

@media(max-width:820px) {
    .rt-grid {
        grid-template-columns: 1fr
    }
}

.rt-col {
    padding: 36px 32px;
    border-right: 1px solid var(--border);
    min-width: 0
}

.rt-col:last-child {
    border-right: 0
}

@media(max-width:820px) {
    .rt-col {
        border-right: 0;
        border-bottom: 1px solid var(--border)
    }
}

.rt-col h3 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 14px
}

.rt-col p {
    font-size: 14px;
    color: var(--text2);
    line-height: 1.7;
    margin-bottom: 24px
}

.rt-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0
}

.rt-list li {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    font-size: 13px;
    color: var(--text2);
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    align-items: baseline
}

.rt-list em {
    font-style: normal;
    color: var(--text4);
    white-space: nowrap
}

/* The label column is 120px, which on a phone leaves under 100px for the sentence beside
   it — so the text could not wrap and pushed the whole page wider than the screen. Placed after the rule it overrides, or the cascade
   simply ignores it — which is exactly what happened first. Below this width the label sits above its line instead of beside it. */
@media(max-width:600px) {
    .rt-list li {
        grid-template-columns: 1fr;
        gap: 4px
    }

    .rt-col {
        padding: 28px 20px
    }
}

.rt-list li:last-child {
    border-bottom: 0
}

.rt-list .tag {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600
}

.rt-config {
    background: var(--inv);
    color: #d4d4d4;
    padding: 24px 24px 20px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.9;
    height: 100%;
    /* Allow long monolithic tokens (e.g. /etc/systemd/system/...) to wrap on
       narrow viewports instead of forcing the container to overflow and drag
       the neighbouring .rt-list along with it. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.rt-config .cmt {
    color: #7a7a7a
}

.rt-config .k {
    color: var(--warn)
}

.rt-config .v {
    color: #fff
}

.rt-config .ok {
    color: var(--ok)
}

/* STATS DETAIL */
.detail-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border)
}

@media(max-width:720px) {
    .detail-cols {
        grid-template-columns: 1fr
    }
}

.detail-col {
    padding: 40px 32px;
    border-right: 1px solid var(--border)
}

.detail-col:last-child {
    border-right: 0
}

@media(max-width:720px) {
    .detail-col {
        border-right: 0;
        border-bottom: 1px solid var(--border)
    }
}

.detail-col .n {
    font-size: 56px;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    margin-bottom: 8px
}

.detail-col h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -.01em
}

.detail-col p {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.7
}

.detail-col .n-unit {
    font-size: 18px;
    color: var(--text3);
    font-weight: 400
}

/* MOBILE / PWA */
.pwa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border)
}

@media(max-width:820px) {
    .pwa-grid {
        grid-template-columns: 1fr
    }
}

.pwa-text {
    padding: 48px 40px
}

.pwa-text h3 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 18px;
    line-height: 1.15
}

.pwa-text p {
    font-size: 14px;
    color: var(--text2);
    line-height: 1.7;
    margin-bottom: 14px
}

.pwa-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 18px
}

.pwa-list .item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text2)
}

.pwa-list .item:last-child {
    border-bottom: 0
}

.pwa-list .tag {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .12em
}

.pwa-visual {
    background: var(--inv);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border);
    position: relative;
    overflow: hidden
}

@media(max-width:820px) {
    .pwa-visual {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding: 48px 24px
    }
}

.pwa-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 24px 24px
}

.pwa-phone {
    position: relative;
    width: 220px;
    background: #fff;
    border-radius: 30px;
    padding: 8px;
    box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .4)
}

.pwa-phone .island {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 20px;
    background: #000;
    border-radius: 12px;
    z-index: 5
}

.pwa-phone .scr {
    background: #fff;
    border-radius: 22px;
    aspect-ratio: 9/16;
    padding: 36px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.pwa-phone .row1 {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
    color: #000;
    margin-bottom: 4px
}

.pwa-phone .h {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -.03em
}

.pwa-phone .d {
    font-family: var(--mono);
    font-size: 7px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    gap: 4px
}

.pwa-phone .d::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 4px var(--ok);
    animation: blink 3s infinite
}

.pwa-phone .face {
    border: 1px solid var(--border);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 14px
}

.pwa-phone .face svg {
    width: 42px;
    height: 42px;
    stroke: #000;
    fill: none;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round
}

.pwa-phone .face .lbl {
    font-family: var(--mono);
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #000
}

.pwa-phone .face .sub {
    font-family: var(--mono);
    font-size: 6.5px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .14em
}

.pwa-phone .toast {
    background: #000;
    color: #fff;
    padding: 8px 10px;
    margin-top: auto;
    display: flex;
    gap: 8px;
    align-items: center
}

.pwa-phone .toast svg {
    width: 14px;
    height: 14px;
    stroke: #f59e0b;
    fill: none;
    stroke-width: 1.8;
    flex-shrink: 0
}

.pwa-phone .toast .t {
    font-size: 8px;
    font-weight: 700
}

.pwa-phone .toast .ts {
    font-family: var(--mono);
    font-size: 6.5px;
    color: #bcbcbc;
    margin-top: 1px
}

/* SETUP / TERMINAL */
.setup-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start
}

@media(max-width:820px) {
    .setup-inner {
        grid-template-columns: 1fr
    }
}

.setup-lede {
    font-size: 16px;
    color: var(--text2);
    line-height: 1.7;
    margin-bottom: 32px
}

.setup-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0
}

.setup-list li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: 14px;
    color: var(--text2);
    padding: 12px 0;
    border-bottom: 1px solid var(--border)
}

.setup-list li:last-child {
    border-bottom: 0
}

.setup-list .tag {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text3);
    min-width: 80px;
    text-transform: uppercase;
    letter-spacing: .12em
}

.terminal {
    background: var(--inv);
    padding: 28px 28px 24px;
    position: relative
}

.terminal::before {
    content: "INSTALL";
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .2em;
    color: #7a7a7a
}

.terminal code {
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.9;
    color: #bcbcbc;
    display: block;
    word-break: break-all
}

.terminal .cmt {
    color: #7a7a7a
}

.terminal .cmd {
    color: #e8e8e8;
    font-weight: 600
}

.terminal .url {
    color: var(--ok)
}

.terminal .flag {
    color: var(--warn)
}

.platforms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    margin-top: 28px;
    background: var(--border)
}

.platform {
    background: var(--bg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.platform .name {
    font-size: 13px;
    font-weight: 700
}

.platform .detail {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text3)
}

/* PRICING */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border: 1px solid var(--border);
    margin-top: 0
}

@media(max-width:820px) {
    .pricing-grid {
        grid-template-columns: 1fr
    }
}

.pricing-plan {
    padding: 42px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-right: 1px solid var(--border)
}

.pricing-plan:last-child {
    border-right: 0
}

@media(max-width:820px) {
    .pricing-plan {
        border-right: 0;
        border-bottom: 1px solid var(--border)
    }

    .pricing-plan:last-child {
        border-bottom: 0
    }
}

.pricing-plan.featured {
    background: var(--inv);
    color: #fff
}

.pricing-plan.featured .pp-border {
    border-color: #3a3a3a
}

.pricing-plan.featured .pp-row {
    border-color: #262626;
    color: #d4d4d4
}

.pricing-plan.featured .pp-row .ck {
    color: var(--ok)
}

.pricing-plan.featured .pp-period,
.pricing-plan.featured .pp-tier {
    color: #9a9a9a
}

.pricing-plan.featured .pp-desc {
    color: #bcbcbc
}

.pricing-plan.featured .pp-row b {
    color: #fff
}

.pp-tier {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--text4);
    margin-bottom: 18px
}

.pp-price {
    font-size: 50px;
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1;
    margin-bottom: 6px
}

.pp-price .currency {
    font-size: 24px;
    font-weight: 700;
    vertical-align: top;
    margin-right: 4px
}

.pp-period {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .16em;
    margin-bottom: 22px
}

.pp-desc {
    font-size: 13.5px;
    color: var(--text2);
    line-height: 1.65;
    margin-bottom: 0
}

.pp-border {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    padding-bottom: 24px;
    margin: 24px 0 0
}

.pp-rows {
    display: flex;
    flex-direction: column;
    gap: 0
}

.pp-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13px;
    color: var(--text2);
    padding: 8px 0;
    border-bottom: 1px solid var(--border)
}

.pp-row:last-child {
    border-bottom: 0
}

.pp-row .ck {
    color: var(--ok);
    font-weight: 700;
    font-size: 11px;
    min-width: 14px;
    flex-shrink: 0
}

.pp-row .na {
    color: var(--text4);
    min-width: 14px;
    flex-shrink: 0
}

.pp-cta {
    margin-top: auto;
    padding: 13px 24px;
    text-align: center;
    border: 1px solid var(--inv);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    transition: all var(--ease);
    cursor: pointer;
    display: block
}

.pp-cta:hover {
    background: var(--inv);
    color: var(--bg)
}

.pricing-plan.featured .pp-cta {
    border-color: #fff;
    color: #000;
    background: #fff
}

.pricing-plan.featured .pp-cta:hover {
    background: transparent;
    color: #fff
}

.pricing-note {
    margin-top: 36px;
    padding: 20px 24px;
    border: 1px solid var(--border);
    background: var(--bg);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start
}

@media(max-width:720px) {
    .pricing-note {
        grid-template-columns: 1fr
    }
}

.pricing-note .lbl {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--text4);
    white-space: nowrap
}

.pricing-note .txt {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.65
}

/* The signature closing the "Who I am" note. `white-space: nowrap` so the dash never ends a
   line with the name orphaned on the next one — a signature broken in two reads as a typo. */
.pricing-note .txt .sig {
    white-space: nowrap;
    color: var(--text)
}

/* HOW TO PURCHASE */
.howto {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    margin-top: 48px
}

@media(max-width:720px) {
    .howto {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:480px) {
    .howto {
        grid-template-columns: 1fr
    }
}

.howto-step {
    padding: 24px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px
}

.howto-step:last-child {
    border-right: 0
}

@media(max-width:720px) {
    .howto-step:nth-child(2) {
        border-right: 0
    }

    .howto-step:nth-child(1),
    .howto-step:nth-child(2) {
        border-bottom: 1px solid var(--border)
    }
}

.howto-step .n {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text4);
    letter-spacing: .2em
}

.howto-step .t {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3
}

.howto-step .d {
    font-size: 12px;
    color: var(--text3);
    line-height: 1.5
}

/* FOOTER */
footer {
    background: var(--inv);
    color: #fff;
    padding: 64px 48px 40px
}

@media(max-width:720px) {
    footer {
        padding: 48px 24px 32px
    }
}

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid #1a1a1a
}

@media(max-width:820px) {
    .footer-top {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:480px) {
    .footer-top {
        grid-template-columns: 1fr
    }
}

.footer-brand .logo {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.04em;
    margin-bottom: 14px
}

.footer-brand .logo sup {
    font-size: .42em;
    vertical-align: super
}

.footer-brand .tagline {
    font-size: 14px;
    color: #bcbcbc;
    line-height: 1.65;
    max-width: 30ch;
    margin-bottom: 20px
}

.footer-brand .version {
    font-family: var(--mono);
    font-size: 10px;
    color: #7a7a7a;
    text-transform: uppercase;
    letter-spacing: .16em
}

.footer-brand .version a {
    color: inherit;
    text-decoration: none;
    transition: color var(--ease)
}

.footer-brand .version a:hover {
    color: #bcbcbc
}

.footer-col h4 {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: #7a7a7a;
    margin-bottom: 18px
}

.footer-col a {
    display: block;
    font-size: 13px;
    color: #bcbcbc;
    margin-bottom: 11px;
    transition: color var(--ease)
}

.footer-col a:hover {
    color: #fff
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 28px;
    font-family: var(--mono);
    font-size: 9px;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: .14em
}

.footer-bottom a {
    color: #9a9a9a;
    transition: color var(--ease)
}

.footer-bottom a:hover {
    color: #fff
}

/* "Made with care" + the Made-in-EU badge, kept inline and baseline-aligned
   with the surrounding footer text. */
.footer-made {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.footer-made img {
    height: 24px;
    width: auto;
    border-radius: 3px;
    display: block
}

/* FAQ */
.faq { max-width: 720px; margin: 0 auto; }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-item input[type="checkbox"] { display: none; }

.faq-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    gap: 16px;
    user-select: none;
}

.faq-label svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    stroke: var(--text3);
    transition: transform var(--ease);
}

.faq-item input:checked ~ .faq-label svg { transform: rotate(45deg); }

.faq-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
}

.faq-item input:checked ~ .faq-body { grid-template-rows: 1fr; }

.faq-body-inner {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text3);
    padding-bottom: 0;
    transition: padding-bottom .22s ease;
}

.faq-item input:checked ~ .faq-body .faq-body-inner { padding-bottom: 20px; }

/* Hero carousel */
.hero-carousel {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1419 / 2796;
    margin: 0 auto;
}

.hero-screenshot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .7s ease;
    filter: drop-shadow(0 32px 64px rgba(0,0,0,.18));
}

.hero-screenshot.active { opacity: 1; }

.hero-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
}

.hero-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: background var(--ease);
}

.hero-dots .dot.active { background: var(--text); }

/* PWA screenshot */
.pwa-screenshot {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.16));
}

/* Hero carousel controls */
.hero-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.hero-ctrl {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.hero-ctrl:hover {
    background: var(--bg2);
    border-color: var(--text);
}

.hero-ctrl svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-ctrl .ic-pause rect,
.hero-ctrl .ic-play polygon { fill: currentColor; stroke: none; }
.hero-ctrl .ic-play { display: none; }
#heroPlay.paused .ic-pause { display: none; }
#heroPlay.paused .ic-play { display: inline; }

/* Coming soon ribbon */
.ribbon {
    position: fixed;
    top: 36px;
    right: -42px;
    z-index: 1000;
    background: var(--warn);
    color: #000;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding: 6px 52px;
    transform: rotate(45deg);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

@media(max-width:720px) {
    .ribbon {
        top: 26px;
        right: -46px;
        font-size: 9px;
        padding: 5px 48px;
    }
}

@keyframes ribbon-shake {
    0%   { transform: rotate(45deg) translateX(0); }
    15%  { transform: rotate(45deg) translateX(-8px); }
    30%  { transform: rotate(45deg) translateX(8px); }
    45%  { transform: rotate(45deg) translateX(-6px); }
    60%  { transform: rotate(45deg) translateX(6px); }
    75%  { transform: rotate(45deg) translateX(-3px); }
    90%  { transform: rotate(45deg) translateX(3px); }
    100% { transform: rotate(45deg) translateX(0); }
}

.ribbon.shake { animation: ribbon-shake .6s ease; }

.cta-soon {
    position: relative;
}

.cta-soon::after {
    content: 'Coming soon';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--warn);
    white-space: nowrap;
}

.cta-open {
    position: relative;
}

.cta-open::after {
    content: 'Private beta';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ok);
    white-space: nowrap;
}

/* HOW IT COMPARES */
.cmp-scroll {
    margin-top: 32px;
    overflow-x: auto;
    border: 1px solid var(--border);
    background: var(--bg);
}

.cmp {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.cmp th, .cmp td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    vertical-align: middle;
}

.cmp th {
    font-family: var(--mono);
    font-size: var(--font-size-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    background: var(--bg2);
    color: var(--text2);
    border-bottom-width: 2px;
}

.cmp td.cmp-cap, .cmp th.cmp-cap {
    text-align: left;
    color: var(--text2);
    font-weight: 500;
    background: var(--bg2);
    min-width: 220px;
}

.cmp tr:last-child td { border-bottom: 0; }
.cmp td:last-child, .cmp th:last-child { border-right: 0; }

.cmp .cmp-ag {
    background: var(--accent-primary, var(--warn));
    color: #000;
    font-weight: 600;
    border-right-color: var(--warn);
}

.cmp tr:hover td:not(.cmp-ag):not(.cmp-cap) { background: var(--bg2); }

.cmp .cmp-yes { color: var(--ok); font-weight: 700; }
.cmp .cmp-no { color: var(--text4); }
.cmp .cmp-part { color: var(--warn); font-size: var(--font-size-xs); }

.cmp .cmp-ag.cmp-yes,
.cmp .cmp-ag.cmp-no,
.cmp .cmp-ag.cmp-part { color: #000; }

/* Drawn check marks. These replace a ✓ character, which Inter does not carry — every one of
   those on this page was drawn by whatever font the visitor's system offered, so the
   comparison table, the page that has to persuade, rendered differently on macOS, iOS,
   Windows and Android. Sized here because an inline <svg> with no dimensions falls back to
   300x150.

   The shape itself is defined once, as #ic-check in the sprite at the top of the document.
   Stroke width is the one thing that differs between call sites, so it stays here rather
   than on the <symbol>: an inherited property set on the referencing <svg> crosses into the
   shadow tree, whereas a presentation attribute on the <symbol> would override every caller. */
.cmp-ic {
    stroke-width: 2.5
}

.ck-ic {
    stroke-width: 3
}

.cmp .cmp-ic {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: -.2em
}

.cmp-note .cmp-ic {
    width: 13px;
    height: 13px;
    display: inline-block;
    vertical-align: -.15em
}

.pp-row .ck .ck-ic {
    width: 13px;
    height: 13px;
    display: block
}

.cmp-note {
    margin-top: 12px;
    font-family: var(--mono);
    font-size: var(--font-size-xxs);
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

@media (max-width: 720px) {
    .cmp { font-size: var(--font-size-xs); }
    .cmp th, .cmp td { padding: 10px 12px; }

    /* Product columns capped so one of them fits entirely beside the sticky label. Left to
       themselves the long values — "Streamer (orchestrates audio engines)" and the like —
       set a 182px column, wider than the 152px the label leaves, so every value was read
       half at a time. They wrap instead. */
    .cmp th:not(.cmp-cap),
    .cmp td:not(.cmp-cap) {
        max-width: 140px;
        overflow-wrap: anywhere;
        /* A free swipe stops wherever the finger left off, which is usually mid-column and
           reads as a column cut in half. Snapping lands it on a boundary, so each swipe
           shows one product whole. The offset is the sticky label's width — without it the
           column would snap underneath the label instead of beside it. */
        scroll-snap-align: start;
        scroll-margin-left: 140px;
    }

    .cmp-scroll {
        scroll-snap-type: x proximity;
    }

    /* Sticky first column — keeps the capability label visible while the
       user horizontally swipes the comparison columns. Without this the
       table just looks like it's overflowing into nothing. */
    .cmp th.cmp-cap,
    .cmp td.cmp-cap {
        position: sticky;
        left: 0;
        z-index: 2;
        /* Fixed, not a minimum. A minimum alone let the longest labels push this column to
           200px of a 292px frame, leaving under 100px — narrower than one product column,
           so no value could ever be read whole beside the label it belongs to. Pinning the
           width lets a full column sit next to it. */
        width: 140px;
        min-width: 140px;
        max-width: 140px;
    }

    /* Visual scroll-hint: gradient fade on the right edge of the scroll
       container so users know the table continues past the viewport. iOS
       Safari hides scrollbars by default — without this cue the table just
       looks broken / clipped. ``pointer-events: none`` so the fade doesn't
       intercept swipes.

       It hangs off the WRAPPER, never off the scroller. An absolutely positioned child of a
       scroll container resolves against that container's padding box, which is the scrolled
       coordinate system: the fade starts correctly at the right edge, then travels left with
       the content and sits on top of the cells, blanking a character out of every line it
       crosses. The wrapper does not scroll, so the fade stays where it belongs.

       Drawn only while ``has-more`` is set, i.e. while content really does continue past the
       right edge. At the end of the scroll nothing is cut off, and the gradient would then be
       painting over the last column's own text instead of hinting at anything. */
    .cmp-scroll-wrap {
        position: relative;
    }

    .cmp-scroll-wrap.has-more::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px;
        background: linear-gradient(to right, transparent, var(--bg) 70%);
        pointer-events: none;
    }
}

/* LAYERS DIAGRAM */
.layers {
    margin: 40px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

.layer {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 18px 24px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    transition: all var(--ease);
}

.layer.ag {
    border-left-color: var(--warn);
    background: var(--bg);
}

.layer-tag {
    font-family: var(--mono);
    font-size: var(--font-size-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text3);
}

.layer.ag .layer-tag { color: var(--warn); }

.layer-name {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.layer-sub {
    font-size: var(--font-size-xs);
    color: var(--text3);
    margin-top: 4px;
}

.layer > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.layer-mark {
    font-family: var(--mono);
    font-size: var(--font-size-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--warn);
    white-space: nowrap;
}

.layer-mark.dim {
    color: var(--text4);
    font-weight: 500;
}

.layers-takeaway {
    max-width: 880px;
    margin: 24px auto 0;
    padding: 20px 24px;
    background: var(--bg);
    border-left: 4px solid var(--warn);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-left-color: var(--warn);
}

.layers-takeaway p {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--text2);
    margin: 0;
}

@media (max-width: 720px) {
    .layer {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 18px;
    }
    .layer-mark { white-space: normal; }
}

/* ─── LAYERS TEST A : vrai stack visuel ─── */
.stack {
    margin: 48px auto 24px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
}

.stack-block {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: relative;
}

.stack-block:last-child { border-bottom: 0; }

.stack-block.ag {
    background: var(--warn);
    color: #000;
    border-bottom-color: rgba(0,0,0,.15);
}

.stack-block.ghost {
    background: repeating-linear-gradient(
        45deg,
        transparent 0 8px,
        rgba(0,0,0,.025) 8px 16px
    );
    color: var(--text3);
}

.stack-num {
    font-family: var(--mono);
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    opacity: .35;
}

.stack-block.ag .stack-num { opacity: .6; color: #000; }

.stack-name {
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.2;
}

.stack-sub {
    font-size: var(--font-size-xs);
    margin-top: 4px;
    font-family: var(--mono);
    letter-spacing: .04em;
}

.stack-block.ghost .stack-sub { color: var(--text4); }

.stack-tag {
    font-family: var(--mono);
    font-size: var(--font-size-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    background: #000;
    color: var(--warn);
    padding: 6px 12px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .stack-block { grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 18px; }
    .stack-tag { grid-column: 1 / -1; justify-self: end; margin-top: 6px; }
    .stack-num { font-size: 26px; }
}

/* ─── LAYERS TEST D : data flow horizontal ─── */
.flow {
    margin: 48px 0 24px;
    display: grid;
    grid-template-columns: 1fr auto 1.4fr auto 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
}

.flow-col {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flow-col.ag {
    background: var(--warn);
    color: #000;
    border-color: var(--warn);
}

.flow-col-label {
    font-family: var(--mono);
    font-size: var(--font-size-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text3);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.flow-col.ag .flow-col-label {
    color: #000;
    border-bottom-color: rgba(0,0,0,.2);
    font-size: var(--font-size-sm);
    letter-spacing: .04em;
}

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

.flow-list li {
    font-family: var(--mono);
    font-size: var(--font-size-xs);
    letter-spacing: .04em;
}

.flow-list.ag li {
    font-family: var(--font);
    font-size: var(--font-size-sm);
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0,0,0,.18);
}

.flow-list.ag li:last-child { border-bottom: 0; }

.flow-sub {
    font-family: var(--mono);
    font-size: var(--font-size-xxs);
    color: rgba(0,0,0,.65);
}

.flow-arrow {
    align-self: center;
    font-size: 24px;
    color: var(--text3);
    padding: 0 10px;
    font-family: var(--mono);
    font-weight: 700;
}

@media (max-width: 900px) {
    .flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .flow-arrow { transform: rotate(90deg); padding: 0; }
}

/* ─── LAYERS TEST E : cross-section / rings ─── */
.rings-wrap {
    margin: 48px auto 16px;
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 0;
}

.ring {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 28px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--border);
    background: var(--bg);
}

.ring.ag {
    border-color: var(--warn);
    background: var(--warn);
    color: #000;
}

.ring.ag .ring { background: var(--bg); color: var(--text); }
.ring .ring { margin-top: 32px; height: calc(100% - 28px - 12px); }

.ring-label {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: var(--font-size-xxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    white-space: nowrap;
}

.ring.ag > .ring-label { color: #000; }

.ring-1 {
    flex: 1;
    background: var(--warn) !important;
    color: #000;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ring-core {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    letter-spacing: .04em;
    line-height: 1.2;
}

.rings-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.rings-key {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: var(--font-size-xxs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text3);
}

.rings-key::before {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--bg);
    border: 2px solid var(--border);
}

.rings-key.ag::before {
    background: var(--warn);
    border-color: var(--warn);
}

@media (max-width: 720px) {
    .rings-wrap { max-width: 340px; }
    .ring-label { font-size: 9px; }
    .ring-core { font-size: 14px; }
}