/*
 * The landing page's stylesheet.
 *
 * A plain file served from public/, not an entry in the Vite build: the
 * landing deliberately loads no bundle, and a stranger's first paint should
 * not wait on a build made for people who have already signed in. The page
 * links it with its modification time as a version, so a change reaches
 * browsers on the next load instead of whenever their cache lets go.
 */

        @font-face {
            font-family: 'Source Serif 4';
            src: url('/fonts/SourceSerif4.woff2') format('woff2');
            font-weight: 200 900;
            font-style: normal;
            font-display: swap;
        }

        :root {
            --ink: #14181C;
            --ink-soft: #5A5F66;
            --ink-faint: #868C94;
            --line: #E4E7EB;
            --paper: #FFFFFF;
            --paper-tint: #F6F7F9;

            /* One colour per plan; the pricing section will use the same ones. */
            --plan-micro: #7A4FD6;
            --plan-micro-tint: #EFE8FB;
            --plan-starter: #1AA35B;
            --plan-starter-tint: #E3F6EC;
            --plan-pro: #2F6FED;
            --plan-pro-tint: #E6EEFD;
            --plan-business: #E8730C;
            --plan-business-tint: #FDEEDD;

            --gutter: 16px;
            --measure: 1120px;
        }

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

        html {
            -webkit-text-size-adjust: 100%;
            scroll-padding-top: 80px; /* the sticky bar must not cover the target */
            scroll-behavior: smooth;
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
        }

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
            font-size: 17px;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3 {
            margin: 0;
            line-height: 1.15;
            letter-spacing: -0.02em;
            font-weight: 600;
        }

        p {
            margin: 0;
        }

        a {
            color: inherit;
        }

        .wrap {
            max-width: var(--measure);
            margin: 0 auto;
            padding-left: var(--gutter);
            padding-right: var(--gutter);
        }

        /* ---------- the dark band: nav and hero ---------- */

        .band-dark {
            background: var(--dark);
            color: var(--on-dark);
            overflow: hidden; /* la schermata dell'eroe sborda di proposito */
        }

        /*
         * The bar carries the dark context itself now that it lives outside the
         * band: it floats over light sections for most of the page, and a bar that
         * borrowed its colours from whatever is behind it would change identity
         * halfway down.
         */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--dark);
            color: var(--on-dark);
        }

        /*
         * Wrapping, because the row has to survive its own contents.
         *
         * Below 720px the section links are gone and what is left is the logo plus
         * the actions, which at a phone's width came to more than the screen — and
         * nothing here could absorb it: no wrap, nowrap on the buttons, no
         * overflow guard on the body, so the whole page picked up a sideways
         * scrollbar. A longer word in a third language would have done it again.
         */
        .nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px 28px;
            padding: 16px 0;
        }

        .logo {
            display: block;
            height: 30px;
            width: auto;
        }

        .logo .glyph {
            stroke: currentColor;
        }

        .logo .word {
            fill: currentColor;
        }

        .logo .dot {
            fill: var(--green-bright);
        }

        /*
         * Three zones, not one queue. Browsing the page and acting on it are
         * different jobs, and running six links together at one size left the
         * reader to work out which was which.
         */
        .nav-links {
            display: none;
            gap: clamp(14px, 2vw, 26px);
            white-space: nowrap;
            margin-left: auto;
            font-size: 15px;
            color: var(--on-dark-soft);
        }

        .nav-links a {
            text-decoration: none;
        }

        .nav-links a:hover {
            color: var(--on-dark);
        }

        .nav-drop {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .nav-drop-trigger {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 0;
            border: 0;
            background: none;
            font: inherit;
            color: inherit;
            cursor: pointer;
        }

        .nav-drop-trigger:hover {
            color: var(--on-dark);
        }

        .nav-drop-trigger:focus-visible {
            outline: 2px solid var(--green-bright);
            outline-offset: 4px;
            border-radius: 4px;
        }

        /* Opens downward from the header, unlike the language menu in the footer. */
        .lang-menu.nav-drop-menu {
            right: auto;
            left: -12px;
            bottom: auto;
            top: calc(100% + 14px);
        }

        /* Tone on tone with the bar: the panel reads as an extension of it. */
        .lang-menu.nav-drop-menu {
            background: var(--dark);
            border-color: rgba(255, 255, 255, .14);
            min-width: 180px;
        }

        .nav-links .nav-drop-menu a {
            color: var(--on-dark);
        }

        .nav-links .nav-drop-menu a:hover {
            background: rgba(255, 255, 255, .08);
        }

        /* While the menu is open the page behind it is blurred and dimmed. */
        body:has(.nav-drop-trigger[aria-expanded="true"])::after {
            content: "";
            position: fixed;
            inset: 0;
            z-index: 40;
            pointer-events: none;
            background: rgba(10, 14, 18, .35);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-left: auto;
            font-size: 15px;
        }

        .nav-user {
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Anchored to the right edge, since the account sits at the end of the bar. */
        .nav-account .lang-menu.nav-drop-menu {
            left: auto;
            right: -12px;
        }

        .lang-menu button {
            display: flex;
            width: 100%;
            padding: 7px 10px;
            border: 0;
            border-radius: 7px;
            background: none;
            font: inherit;
            font-size: 14px;
            color: var(--ink);
            text-align: left;
            cursor: pointer;
        }

        .lang-menu button:hover {
            background: var(--paper-tint);
        }

        .nav-account .nav-drop-menu a,
        .nav-account .nav-drop-menu button {
            color: var(--on-dark);
        }

        .nav-account .nav-drop-menu a:hover,
        .nav-account .nav-drop-menu button:hover {
            background: rgba(255, 255, 255, .08);
        }

        .btn {
            display: inline-block;
            border-radius: 8px;
            padding: 11px 20px;
            font-size: 15px;
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            transition: background-color .15s ease, color .15s ease;
        }

        .btn-green {
            background: var(--green-bright);
            color: var(--dark);
        }

        .btn-green:hover {
            background: var(--green-bright-hover);
        }

        .btn-ink {
            background: var(--ink);
            color: var(--paper);
        }

        .btn-ink:hover {
            background: #262C32;
        }

        /* No background to sit in, so the side padding only costs width. */
        .btn-ghost {
            color: var(--on-dark-soft);
            text-decoration: none;
            padding-left: 0;
            padding-right: 0;
        }

        .btn-ghost:hover {
            color: var(--on-dark);
        }

        .btn-outline {
            border: 1px solid rgba(245, 245, 245, .25);
            color: var(--on-dark);
        }

        .btn-outline:hover {
            border-color: rgba(245, 245, 245, .5);
        }

        /*
         * The language control, shaped like the one in the app: glyph, the language
         * you are reading, alternatives folded away behind a chevron.
         *
         * Drawn here rather than handed to a <select>. A native select's open list
         * is painted by the operating system — a blue highlight bar in a system
         * font that no stylesheet reaches — so next to the app's own menu it looked
         * like a different product.
         *
         * The items are ordinary links to /locale/{code}. With scripting off the
         * menu simply stays open-able by nothing, but nothing is broken that was
         * working, and each link still does the whole job on its own.
         */
        .lang {
            position: relative;
        }

        .lang-trigger {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
            margin: -6px -8px;
            border: 0;
            border-radius: 8px;
            background: none;
            font: inherit;
            font-weight: 500;
            color: var(--on-dark-soft);
            cursor: pointer;
            transition: color .15s ease, background-color .15s ease;
        }

        .lang-trigger:hover {
            color: var(--on-dark);
            background: rgba(245, 245, 245, .07);
        }

        .lang-trigger:focus-visible {
            outline: 2px solid var(--green-bright);
            outline-offset: 2px;
        }

        .lang-glyph {
            width: 16px;
            height: 16px;
            flex: none;
        }

        .lang-chevron {
            width: 13px;
            height: 13px;
            flex: none;
            opacity: .6;
        }

        /*
         * The panel is light on a dark footer, like the app's menus, so it reads as
         * a surface laid over the page rather than a hole cut in it.
         */
        .lang-menu {
            position: absolute;
            right: 0;
            bottom: calc(100% + 8px);
            z-index: 20;
            min-width: 148px;
            padding: 5px;
            border-radius: 10px;
            background: var(--paper);
            border: 1px solid var(--line);
            box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .45);
        }

        .lang-menu[hidden] {
            display: none;
        }

        .lang-menu a {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 7px 10px;
            border-radius: 7px;
            font-size: 14px;
            color: var(--ink);
            text-decoration: none;
        }

        .lang-menu a:hover {
            background: var(--paper-tint);
        }

        .lang-menu a:focus-visible {
            outline: 2px solid var(--green);
            outline-offset: -2px;
        }

        /* A dot on the one you are reading, the way the app marks its choice. */
        .lang-dot {
            width: 5px;
            height: 5px;
            border-radius: 999px;
            background: transparent;
            flex: none;
        }

        .lang-menu a[aria-checked="true"] .lang-dot {
            background: var(--ink);
        }

        /*
         * A text link, not a button: it sits under a block of code, where a filled
         * button would read as the section's main action and pull weight away from
         * the one in the hero.
         */
        .textlink {
            color: var(--green);
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
        }

        .textlink:hover {
            text-decoration: underline;
        }

        .after-code {
            margin: 14px 0 0;
            font-size: 14px;
            color: var(--ink-soft);
        }

        .hero {
            padding: 48px 0 64px;
        }

        .hero-eyebrow {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: var(--green-bright);
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: 55px;
        }

        .hero-sub {
            margin-top: 22px;
            max-width: 52ch;
            font-size: clamp(17px, 2.2vw, 20px);
            color: var(--on-dark-soft);
        }

        .hero-cta {
            margin-top: 32px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        /* One line of the subtitle's height more before the hero's buttons. */
        .hero .hero-cta {
            margin-top: 64px;
        }

        .hero-note {
            margin-top: 18px;
            font-size: 14px;
            color: var(--on-dark-soft);
        }

        /*
         * The screenshot is framed, not floated: a pale hairline and a deep soft
         * shadow put it on a surface, which is what stops a rectangle of light UI
         * from reading as a hole cut in the dark band.
         */
        .hero-art {
            margin-top: 44px;
        }

        .hero-art img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 12px;
            border: 1px solid rgba(245, 245, 245, .12);
            box-shadow: 0 28px 70px -20px rgba(0, 0, 0, .75);
        }

        /* ---------- the positioning line ---------- */

        .stripe {
            border-bottom: 1px solid var(--line);
            background: var(--paper-tint);
            padding: 40px 0;
        }

        .stripe p {
            font-family: "Source Serif 4", Georgia, serif;
            font-size: clamp(21px, 3.4vw, 30px);
            line-height: 1.35;
            letter-spacing: -0.01em;
            max-width: 44ch;
            margin: 0 auto;
            text-align: center;
        }

        .stripe em {
            font-style: normal;
            color: var(--green);
        }

        /* ---------- generic section ---------- */

        section {
            padding: 76px 0;
        }

        section + section {
            border-top: 1px solid var(--line);
        }

        .section-label {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: var(--green);
            margin-bottom: 14px;
        }

        .section-title {
            font-size: clamp(28px, 4.4vw, 38px);
            max-width: 20ch;
        }

        #come-funziona .section-title,
        #prezzi .section-title {
            max-width: 100%;
        }

        #prezzi .section-lead {
            max-width: none;
        }

        .section-lead {
            margin-top: 16px;
            max-width: 58ch;
            color: var(--ink-soft);
        }

        .section-lead-wide {
            max-width: none;
        }

        .grid {
            display: grid;
            gap: 28px;
            margin-top: 44px;
        }

        .card h3 {
            font-size: 19px;
        }

        .card p {
            margin-top: 10px;
            color: var(--ink-soft);
            font-size: 16px;
        }

        .numbered {
            counter-reset: step;
        }

        .numbered .card::before {
            counter-increment: step;
            content: counter(step);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            margin-bottom: 16px;
            border-radius: 999px;
            background: var(--ink);
            color: var(--paper);
            font-size: 15px;
            font-weight: 600;
        }

        /* "How it works": tinted cards with a big numeral. */
        .steps .card {
            position: relative;
            padding: 30px 28px 32px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: var(--paper-tint);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .steps .card:hover {
            transform: translateY(-4px);
            border-color: var(--green);
            box-shadow: 0 16px 36px -18px rgba(20, 24, 28, .3);
        }

        .steps .card::before {
            width: 48px;
            height: 48px;
            margin-bottom: 22px;
            background: var(--green);
            color: var(--paper);
            font-size: 22px;
            box-shadow: 0 0 0 6px rgba(26, 163, 91, .14);
        }

        .steps .card h3 {
            font-size: 21px;
        }

        .card .card-note {
            margin-top: 12px;
            font-size: 13px;
            color: var(--ink-faint);
        }

        .pl-grid {
            margin-top: 40px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 14px;
        }

        .pl-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 24px 12px 18px;
            border: 1px solid var(--line);
            border-radius: 12px;
            text-align: center;
        }

        .pl-card {
            position: relative;
            overflow: hidden;
        }

        .pl-version {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 12px;
            color: #6B7480;
        }

        .ribbon {
            position: absolute;
            top: 14px;
            right: -34px;
            width: 112px;
            padding: 3px 0;
            transform: rotate(45deg);
            background: #E0A21A;
            color: #fff;
            text-align: center;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .pl-mono {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--c) 14%, transparent);
            color: var(--c);
            font-size: 22px;
            font-weight: 800;
        }

        @media (max-width: 760px) {
            .pl-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .boxed.cases .card {
            padding: 0;
            overflow: hidden;
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .cases .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 36px -18px rgba(20, 24, 28, .3);
        }

        .case-art {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px;
            background: var(--paper-tint);
            border-bottom: 1px solid var(--line);
        }

        .case-art svg {
            width: 100%;
            max-width: 220px;
            height: auto;
        }

        .case-text {
            padding: 20px 26px 26px;
        }

        @media (min-width: 640px) {
            .cases .card {
                display: grid;
                grid-template-columns: 220px 1fr;
            }

            .case-art {
                padding: 16px;
                border-bottom: 0;
                border-right: 1px solid var(--line);
            }

            .case-text {
                align-self: center;
                padding: 22px 26px;
            }
        }

        .cases-more {
            margin-top: 20px;
            color: var(--ink-soft);
            font-size: 16px;
        }

        .how-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .how-head .section-label {
            margin: 0;
        }

        .how-block-api {
            margin-top: 72px;
        }

        .tabs-bar {
            display: none;
            gap: 4px;
            padding: 4px;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: var(--paper-tint);
        }

        .tabs-on .tabs-bar {
            display: inline-flex;
        }

        .tabs-on .how-block-api {
            margin-top: 0;
        }

        .tab-btn {
            padding: 8px 20px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--ink-soft);
            font: inherit;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        .tab-btn[aria-selected="true"] {
            background: var(--ink);
            color: var(--paper);
        }

        /* Beside the label there is no room left on a phone: the toggle runs
           into the heading below, so it takes a row of its own above. */
        @media (max-width: 640px) {
            .how-head {
                flex-direction: column-reverse;
                align-items: flex-start;
                gap: 28px;
            }

            .how-head .tabs-bar {
                align-self: center;
            }
        }

        .how-block[hidden] {
            display: none;
        }

        .dv-ill {
            margin-bottom: 14px;
            padding: 12px;
            border-radius: 10px;
            background: #F6F7F8;
        }

        .dv-ill svg {
            display: block;
            width: 100%;
            height: auto;
        }

        .boxed .card {
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 26px;
        }

        .tier-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 6px;
            margin-top: 16px;
        }

        .tier-tags .tier-tag {
            margin-top: 0;
        }

        .tier-tag.tier-starter {
            background: var(--plan-starter-tint);
            border-color: var(--plan-starter);
            color: var(--plan-starter);
        }

        .tier-tag.tier-pro {
            background: var(--plan-pro-tint);
            border-color: var(--plan-pro);
            color: var(--plan-pro);
        }

        .tier-tag.tier-business {
            background: var(--plan-business-tint);
            border-color: var(--plan-business);
            color: var(--plan-business);
        }

        .tier-tag {
            display: inline-block;
            margin-top: 16px;
            padding: 3px 9px;
            border-radius: 999px;
            background: var(--paper-tint);
            border: 1px solid var(--line);
            font-size: 12px;
            font-weight: 600;
            color: var(--ink-soft);
        }

        /* ---------- the operator section, on dark ---------- */

        .on-dark-section {
            background: var(--dark);
            color: var(--on-dark);
            border-top: 0;
        }

        .on-dark-section .section-label {
            color: var(--green-bright);
        }

        .on-dark-section .section-lead {
            color: var(--on-dark-soft);
        }

        .on-dark-section .card h3 {
            color: var(--on-dark);
        }

        .on-dark-section .card p {
            color: var(--on-dark-soft);
        }

        .on-dark-section .numbered .card::before {
            background: var(--green-bright);
            color: var(--dark);
        }

        .op-steps {
            list-style: none;
            counter-reset: op;
            margin: 32px 0 0;
            padding: 0;
        }

        .op-steps li {
            counter-increment: op;
            position: relative;
            padding-left: 48px;
            margin-top: 22px;
        }

        .op-steps li::before {
            content: counter(op);
            position: absolute;
            left: 0;
            top: 0;
            width: 32px;
            height: 32px;
            border-radius: 999px;
            background: var(--green-bright);
            color: var(--dark);
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .op-steps h3 {
            font-size: 18px;
            color: var(--on-dark);
        }

        .op-steps p {
            margin-top: 4px;
            color: var(--on-dark-soft);
        }

        .phones {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 40px;
        }

        .phone {
            position: relative;
            width: 220px;
            border-radius: 28px;
            border: 8px solid #0A0C0E;
            background: #0A0C0E;
            overflow: hidden;
            box-shadow: 0 0 0 1.5px #3A4047, 0 24px 48px -24px rgba(0, 0, 0, .7);
        }

        .phone + .phone {
            margin-top: 56px;
        }

        .phone-notch {
            position: absolute;
            top: 6px;
            left: 50%;
            width: 8px;
            height: 8px;
            margin-left: -4px;
            border-radius: 999px;
            background: #0A0C0E;
            z-index: 1;
        }

        .phone svg {
            display: block;
            width: 100%;
            height: auto;
        }

        .op-card .op-ico {
            width: 44px;
            height: 44px;
            margin-bottom: 14px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--tone) 16%, transparent);
            color: var(--tone);
        }

        .op-green { --tone: #2BD07A; }
        .op-blue { --tone: #6C9BFF; }
        .op-orange { --tone: #FF9A3D; }

        .op-benefits {
            margin-top: 64px;
            padding-top: 56px;
            border-top: 1px solid rgba(255, 255, 255, .14);
        }

        /* ---------- code sample ---------- */

        .code {
            margin-top: 28px;
            border-radius: 12px;
            background: var(--dark-soft);
            color: var(--on-dark);
            padding: 22px;
            overflow-x: auto;
            /*
             * The line breaks are the shape of the command. Without this the whole
             * curl collapsed into one paragraph that wrapped wherever the box
             * ended, which is the one thing a code sample must never do.
             */
            white-space: pre;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 13.5px;
            line-height: 1.7;
        }

        .code .c {
            color: var(--on-dark-soft);
        }

        .code .k {
            color: var(--green-bright);
        }

        /* ---------- pricing ---------- */

        .plans-trial {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 18px;
            margin-top: 28px;
        }

        .plans-choose {
            margin-top: 20px;
            padding: 12px 16px;
            border: 1px solid #f59e0b;
            border-radius: 10px;
            background: #fffbeb;
            color: #78350f;
            font-weight: 500;
        }

        .plans-trial span {
            color: var(--ink-soft);
        }

        .plans {
            display: grid;
            gap: 22px;
            margin-top: 48px;
            align-items: start;
        }

        .plan {
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 28px;
            background: var(--paper);
            border-top: 4px solid var(--accent, var(--line));
        }

        .plan-micro { --accent: var(--plan-micro); --tint: var(--plan-micro-tint); }
        .plan-starter { --accent: var(--plan-starter); --tint: var(--plan-starter-tint); }
        .plan-pro { --accent: var(--plan-pro); --tint: var(--plan-pro-tint); }
        .plan-business { --accent: var(--plan-business); --tint: var(--plan-business-tint); }

        .plan-featured {
            box-shadow: 0 16px 36px -22px rgba(20, 24, 28, .35);
        }

        .plan-ico {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: var(--tint);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
        }

        .plan-name {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .plan-name h3 {
            font-size: 18px;
        }

        .plan-badge {
            padding: 3px 9px;
            border-radius: 999px;
            background: var(--ink);
            color: var(--paper);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .plan-price {
            margin-top: 18px;
            display: flex;
            align-items: baseline;
            gap: 7px;
        }

        .plan-price strong {
            font-size: 40px;
            font-weight: 600;
            letter-spacing: -0.03em;
        }

        .plan-price span {
            color: var(--ink-faint);
            font-size: 15px;
        }

        .plan-year {
            margin-top: 4px;
            font-size: 14px;
            color: var(--ink-faint);
        }

        .plan-quota {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--line);
            font-weight: 600;
        }

        .plan-quota span {
            display: block;
            font-weight: 400;
            font-size: 14px;
            color: var(--ink-faint);
            margin-top: 2px;
        }

        .plan ul {
            margin: 18px 0 0;
            padding: 0;
            list-style: none;
            font-size: 15px;
        }

        .plan li {
            position: relative;
            padding-left: 26px;
            margin-top: 11px;
            color: var(--ink-soft);
        }

        .plan li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 17px;
            height: 17px;
            border-radius: 999px;
            background: var(--accent, var(--green));
        }

        .plan li::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 7.5px;
            width: 7px;
            height: 4px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg);
        }

        .plan li.is-off {
            color: var(--ink-faint);
        }

        .plan li.is-off::before {
            background: transparent;
        }

        .plan li.is-off::after {
            left: 3px;
            top: 9px;
            width: 11px;
            height: 0;
            border: 0;
            border-top: 1.5px solid #C4C9D0;
            transform: none;
        }

        .plan-topups {
            margin-top: 22px;
            padding-top: 18px;
            border-top: 1px solid var(--line);
        }

        .plan-topups-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
        }

        .plan .plan-topups ul {
            margin-top: 8px;
        }

        .plan .plan-topups li {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding-left: 0;
            margin-top: 6px;
            font-size: 14px;
        }

        .plan .plan-topups li::before,
        .plan .plan-topups li::after {
            content: none;
        }

        .plan-topups li strong {
            color: var(--ink);
            font-weight: 600;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }

        .plan .btn {
            display: block;
            margin-top: 26px;
            text-align: center;
        }

        .plans-note {
            margin-top: 26px;
            font-size: 14px;
            color: var(--ink-faint);
            max-width: 60ch;
        }

        .plans-note-title {
            margin-top: 26px;
            font-size: 16px;
            color: var(--ink);
        }

        .plans-note-title + .plans-note {
            margin-top: 4px;
        }

        .plans-note-wide {
            max-width: none;
        }

        .plans-note-wide + .plans-note {
            margin-top: 8px;
        }

        .plans-note a {
            color: var(--ink-soft);
            text-decoration: underline;
        }

        /* ---------- contact ---------- */

        .plans-custom {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 20px 32px;
            margin-top: 32px;
            padding: 28px 32px;
            border: 1px solid var(--line);
            border-radius: 20px;
            background: var(--paper);
        }

        .plans-custom h3 {
            font-size: 20px;
            color: var(--ink);
        }

        .plans-custom p {
            margin-top: 6px;
            max-width: 56ch;
            font-size: 15px;
            color: var(--ink-soft);
        }

        /* The panel: always in the page, drawn only when it is the target
           (no script) or opened by the script. */
        .contact-panel {
            position: fixed;
            inset: 0;
            z-index: 60;
            visibility: hidden;
            transition: visibility 0s linear .25s;
        }

        .contact-panel:target,
        .contact-panel.is-open {
            visibility: visible;
            transition-delay: 0s;
        }

        .contact-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(14, 17, 19, .5);
            opacity: 0;
            transition: opacity .25s ease;
        }

        .contact-sheet {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: min(520px, 100%);
            overflow-y: auto;
            background: var(--paper);
            padding: 32px 28px 40px;
            box-shadow: -12px 0 40px rgba(14, 17, 19, .18);
            transform: translateX(100%);
            transition: transform .25s cubic-bezier(.2, .8, .2, 1);
        }

        .contact-panel:target .contact-backdrop,
        .contact-panel.is-open .contact-backdrop {
            opacity: 1;
        }

        .contact-panel:target .contact-sheet,
        .contact-panel.is-open .contact-sheet {
            transform: none;
        }

        @media (prefers-reduced-motion: reduce) {
            .contact-backdrop,
            .contact-sheet {
                transition: none;
            }
        }

        html.contact-open {
            overflow: hidden;
        }

        .contact-close {
            position: absolute;
            top: 18px;
            right: 18px;
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            color: var(--ink-soft);
        }

        .contact-close:hover {
            background: var(--paper-tint);
            color: var(--ink);
        }

        .contact-title {
            margin-top: 6px;
            font-size: 26px;
            line-height: 1.2;
            letter-spacing: -.02em;
        }

        .contact-lead {
            margin-top: 10px;
            color: var(--ink-soft);
            font-size: 15px;
        }

        .contact-form {
            margin-top: 26px;
        }

        .contact-grid {
            display: grid;
            gap: 18px;
        }

        .contact-field {
            margin-bottom: 18px;
            border: 0;
            padding: 0;
        }

        .contact-grid .contact-field {
            margin-bottom: 0;
        }

        .contact-form label,
        .contact-form legend {
            display: block;
            margin-bottom: 6px;
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
        }

        .contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form select,
        .contact-form textarea {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--paper);
            color: var(--ink);
            padding: 11px 12px;
            font: inherit;
            font-size: 15px;
        }

        .contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form select {
            height: 46px;
        }

        .contact-form textarea {
            resize: vertical;
        }

        .contact-form legend {
            padding: 0;
        }

        .contact-form .btn {
            margin-top: 18px;
            cursor: pointer;
            border: 0;
        }

        .contact-form [aria-invalid="true"] {
            border-color: #B3412E;
        }

        .contact-grid + .contact-field {
            margin-top: 18px;
        }

        .contact-billing {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 22px;
            margin-top: 18px;
        }

        .contact-billing legend {
            flex-basis: 100%;
        }

        .contact-billing label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            font-weight: 400;
        }

        .contact-field-error,
        .contact-error {
            margin-top: 6px;
            font-size: 14px;
            color: #B3412E;
        }

        .contact-error {
            margin: 0 0 18px;
        }

        .contact-sent {
            margin-top: 26px;
            padding: 16px 18px;
            border: 1px solid var(--green);
            border-radius: 10px;
            font-weight: 600;
            color: var(--ink);
        }

        .contact-trap {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        @media (max-width: 640px) {
            .contact-sheet {
                padding: 28px 20px 36px;
            }
        }

        /* ---------- closing ---------- */

        .closing {
            text-align: center;
        }

        .closing .section-title {
            margin: 0 auto;
        }

        .closing .hero-cta {
            justify-content: center;
        }

        /* ---------- footer ---------- */

        footer {
            background: var(--dark);
            color: var(--on-dark-soft);
            padding: 52px 0 40px;
            font-size: 14px;
        }

        footer .logo {
            height: 26px;
            color: var(--on-dark);
        }

        .footer-top {
            display: grid;
            gap: 30px;
        }

        .footer-tagline { margin-top: 14px; max-width: 34ch; }
.footer-col h4 {
            margin: 0 0 12px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: var(--on-dark);
        }

        .footer-col a {
            display: block;
            margin-top: 8px;
            text-decoration: none;
        }

        .footer-col a:hover {
            color: var(--on-dark);
        }

        .footer-base {
            margin-top: 42px;
            padding-top: 22px;
            border-top: 1px solid rgba(245, 245, 245, .12);
            display: flex;
            flex-wrap: wrap;
            gap: 14px 26px;
            justify-content: space-between;
            align-items: flex-start;
        }

        /*
         * The registered particulars are set smaller and dimmer than the line above
         * them: they have to be on the page, and nobody reads them on purpose.
         */
        .footer-legal {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-width: 72ch;
        }

        .footer-particulars {
            margin: 0;
            font-size: 12.5px;
            line-height: 1.6;
            color: var(--on-dark-soft);
            opacity: .78;
        }

        .footer-particulars a {
            color: inherit;
            text-decoration: none;
        }

        .footer-particulars a:hover {
            text-decoration: underline;
        }

        .footer-base a {
            text-decoration: none;
        }

        /* ---------- wider screens ---------- */

        @media (min-width: 720px) {
            :root {
                --gutter: 32px;
            }

            .grid-3 {
                grid-template-columns: repeat(3, 1fr);
            }

            .plans {
                grid-template-columns: repeat(2, 1fr);
            }

            .footer-top {
                grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
            }
        }

        /* The section links need room: below this the bar is logo and actions only. */
        @media (min-width: 900px) {
            /*
             * Three tracks: the logo, the section links, the actions. The middle
             * one takes whatever is left and centres its contents, so the links sit
             * between the two ends of the bar instead of crowding the sign-in
             * button they have nothing to do with.
             */
            .nav {
                display: grid;
                grid-template-columns: auto 1fr auto;
                gap: 28px;
            }

            .nav-links {
                display: flex;
                justify-self: center;
                margin-left: 0;
            }

            .nav-links ~ .nav-actions {
                margin-left: 0;
            }
        }

        /*
         * Four cards do not fit the reading column: at 1120px each is too narrow for
         * its own list. Only the cards leave the column, centred on it, up to 1360px.
         */
        @media (min-width: 1200px) {
            .plans {
                grid-template-columns: repeat(4, 1fr);
                gap: 18px;
                width: min(1360px, calc(100vw - 64px));
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }

            .plan {
                padding: 26px 24px;
            }
        }

        @media (min-width: 980px) {
            .hero {
                display: grid;
                grid-template-columns: 1.15fr .85fr;
                gap: 56px;
                align-items: center;
                padding: 72px 0 88px;
            }

            .hero-art {
                margin-top: 0;
            }

            .split {
                display: grid;
                grid-template-columns: .88fr 1.12fr;
                gap: 64px;
                align-items: start;
            }

            .split .grid {
                margin-top: 0;
            }

            /*
             * The left column holds its place while the cards beside it scroll.
             *
             * Three of these sections had a short column of prose next to a tall
             * stack of cards, and the prose simply stopped — leaving three or four
             * hundred pixels of nothing under it. Sticking it to the viewport fills
             * that space with the sentence the cards are answering.
             */
            .split > div:first-child {
                position: sticky;
                top: 108px;
            }


        }

        /* ---------- 404 ---------- */

        .nf-page {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background: var(--paper);
            color: var(--ink);
        }

        .nf {
            flex: 1;
            display: grid;
            place-items: center;
            padding: 40px 0 64px;
            text-align: center;
        }

        .nf-art {
            display: block;
            width: min(240px, 60vw);
            height: auto;
            margin: 0 auto 36px;
            color: var(--ink);
        }

        .nf-gap {
            stroke: var(--green);
        }

        .nf-gap-mark {
            fill: var(--green);
        }

        .nf-title {
            margin: 8px 0 14px;
            font-size: clamp(30px, 5vw, 46px);
            line-height: 1.1;
            font-weight: 700;
        }

        .nf-text {
            max-width: 460px;
            margin: 0 auto 28px;
            font-size: 18px;
            line-height: 1.5;
            color: var(--ink-soft);
        }

        .nf .hero-eyebrow {
            color: var(--green);
        }

        .nf .btn-outline {
            border-color: var(--line);
            color: var(--ink);
        }

        .nf .btn-outline:hover {
            border-color: var(--ink-faint);
        }

        .nf-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
        }

        .nf-footer {
            padding: 20px 0;
            font-size: 14px;
            background: var(--dark);
            color: var(--on-dark-soft);
        }

        .nf-footer .wrap {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 24px;
        }

        .nf-footer .lang {
            margin-left: auto;
        }

        .nf-footer a {
            color: inherit;
            text-decoration: none;
        }

        .nf-footer a:hover {
            color: var(--on-dark);
        }

        .nf-footer .lang-menu a {
            color: var(--ink);
        }

        .to-top {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 30;
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 50%;
            background: var(--dark);
            color: var(--on-dark);
            cursor: pointer;
            box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .5);
            transition: background-color .15s ease, color .15s ease;
        }

        .to-top[hidden] {
            display: none;
        }

        .to-top:hover {
            background: var(--green-bright);
            color: var(--dark);
        }

        .to-top:focus-visible {
            outline: 2px solid var(--green-bright);
            outline-offset: 3px;
        }

        .to-top svg {
            width: 20px;
            height: 20px;
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                transition: none !important;
            }
        }