:root {
    /* the content column: max width, and the least space left on each side */
    --col: 1200px;
    --gutter: 60px;
    /* the bottom of the floating menu bar, for content that must start below it */
    --nav-bottom: calc(18px + env(safe-area-inset-top, 0px) + 56px);
    --bg: #0b0f1c;
    --bg2: #121830;
    --ink: #ffffff;
    --mut: #c5c9dd;
    --acc: #c9cffa;
    --line: rgba(255, 255, 255, 0.16);
    --panel: rgba(255, 255, 255, 0.06);
    --btn: #ffffff;
    --btnink: #0b0f1c;
    --glow: rgba(110, 130, 255, 0.35);
    --hf: "Outfit", system-ui, sans-serif;
    --hw: 600;
    --ht: -0.03em;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 860px) {
    :root {
        --gutter: 20px;
        --nav-bottom: calc(18px + env(safe-area-inset-top, 0px) + 60px);
    }
}
body[data-world="sports"] {
    --bg: #0a0b14;
    --bg2: #101733;
    --mut: #c9cfe6;
    --acc: #8faeff;
    --glow: rgba(60, 100, 255, 0.38);
}
body[data-world="events"] {
    --bg: #0b0f1c;
    --bg2: #1a1740;
    --mut: #d2d3e4;
    --acc: #c9cffa;
    --glow: rgba(160, 110, 220, 0.36);
}
body[data-world="weddings"] {
    --bg: #0e0a16;
    --bg2: #221829;
    --mut: #ddd6e6;
    --acc: #e3c590;
    --glow: rgba(200, 160, 100, 0.28);
    --hf: "Cormorant Garamond", Georgia, serif;
    --hw: 500;
    --ht: -0.01em;
}
body[data-world="destinations"] {
    --bg: #1a120d;
    --bg2: #3a1e10;
    --mut: #dccbb6;
    --acc: #f0a35e;
    --glow: rgba(230, 130, 60, 0.34);
    --hf: "Cormorant Garamond", Georgia, serif;
    --hw: 500;
    --ht: -0.01em;
}
body[data-world="entertainment"] {
    --bg: #12081a;
    --bg2: #2a0e3a;
    --mut: #dccde8;
    --acc: #ff8fc7;
    --glow: rgba(255, 80, 170, 0.32);
}
* {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px));
}
body {
    min-height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transition: background 0.6s ease;
    overflow-x: hidden;
}
img {
    max-width: 100%;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 3px;
    border-radius: 6px;
}
.wrap {
    width: min(var(--col), 100% - 2 * var(--gutter));
    margin-inline: auto;
}
h1,
h2,
h3 {
    font-family: var(--hf);
    font-weight: var(--hw);
    letter-spacing: var(--ht);
    line-height: 1.02;
    text-wrap: balance;
}
h1 {
    font-size: clamp(2.7rem, 7.2vw, 6.2rem);
}
h2 {
    font-size: clamp(2rem, 4.4vw, 3.6rem);
}
h3 {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
p {
    max-width: 62ch;
}
.lead {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: var(--mut);
    max-width: 54ch;
}
.acc {
    color: var(--acc);
}
.small {
    font-size: 0.86rem;
    color: var(--mut);
}
.tag {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--acc);
}
section {
    padding: clamp(64px, 9vw, 128px) 0;
    position: relative;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 1rem;
    transition:
        transform 0.18s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}
.btn.pri {
    background: var(--btn);
    color: var(--btnink);
}
.btn.sec {
    border: 1.5px solid var(--line);
}
.btn:hover {
    transform: translateY(-2px);
}
.btn.sec:hover {
    border-color: var(--acc);
}
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
/* nav */
.nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    border-bottom: 1px solid var(--line);
    transition: background 0.6s ease;
}
.nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 68px;
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.brand img {
    height: 26px;
    width: auto;
}
.brand span {
    font-size: 1.25rem;
    color: var(--mut);
    font-weight: 300;
    letter-spacing: -0.01em;
}
.links {
    display: flex;
    gap: 26px;
    align-items: center;
    font-size: 0.96rem;
}
.links a:not(.btn) {
    color: var(--mut);
    transition: color 0.2s;
}
.links a:not(.btn):hover {
    color: var(--ink);
}
.burger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--line);
}
.burger i {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--ink);
    margin: 5px auto;
}
@media (max-width: 860px) {
    .links {
        position: fixed;
        inset: calc(68px + env(safe-area-inset-top, 0px)) 0 auto 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 16px 20px 24px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        display: none;
    }
    .links.open {
        display: flex;
    }
    .links a {
        padding: 12px 0;
        font-size: 1.1rem;
    }
    .burger {
        display: block;
    }
}
/* hero */
.hero {
    min-height: min(92vh, 900px);
    display: grid;
    align-items: center;
    padding: clamp(40px, 6vw, 80px) 0;
    overflow: hidden;
}
.hero h1,
.hero .lead,
.hero .row,
.hero .tag {
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
}
@media (max-width: 860px) {
    .hero {
        min-height: 0;
    }
}
/* marquee */
.marq {
    border-block: 1px solid var(--line);
    padding: 22px 0;
    overflow: hidden;
}
.marq .t {
    display: flex;
    gap: 64px;
    align-items: center;
    width: max-content;
    animation: slide 30s linear infinite;
}
.marq img {
    height: 34px;
    width: auto;
    opacity: 0.8;
}
@keyframes slide {
    to {
        transform: translateX(-50%);
    }
}
/* grids */
.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 5vw, 72px);
    align-items: center;
}
@media (max-width: 760px) {
    .two,
    .g3 {
        grid-template-columns: 1fr;
    }
}
.head {
    display: grid;
    gap: 14px;
    margin-bottom: clamp(28px, 4vw, 52px);
}
/* stepper */
/* worlds */
/* tabs */
/* chat, timeline, misc */
.wide {
    width: min(1500px, 100%);
    margin-inline: auto;
}
.wide img {
    width: 100%;
    height: auto; /* with its width and height in the HTML, the space is kept before it loads, so menu links land in the right place */
}
.cta {
    border: 1px solid var(--line);
    border-radius: 32px;
    padding: clamp(32px, 6vw, 80px);
    background: radial-gradient(70% 90% at 80% 0%, var(--glow), transparent 70%), var(--panel);
    display: grid;
    gap: 20px;
    justify-items: start;
}
footer {
    border-top: 1px solid var(--line);
    padding: 44px 0 56px;
    color: var(--mut);
    font-size: 0.95rem;
}
footer .fg {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 28px;
}
footer a:hover {
    color: var(--ink);
}
footer ul {
    list-style: none;
    display: grid;
    gap: 3px;
}
@media (max-width: 700px) {
    footer .fg {
        grid-template-columns: 1fr;
    }
}
main {
    display: none;
}
main.on {
    display: block;
    animation: enter 0.55s ease both;
}
@keyframes enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}
.rv {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}
.rv.in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    .rv {
        opacity: 1;
        transform: none;
    }
    html {
        scroll-behavior: auto;
    }
}

:root {
    --hf: "Lora", Georgia, serif;
    --hw: 400;
    --ht: 0;
    --bg: #10101a;
    --blue: #6e82ff;
}
body[data-world="sports"],
body[data-world="events"],
body[data-world="entertainment"] {
    --hf: "Lora", Georgia, serif;
    --hw: 400;
    --ht: 0;
}
body[data-world="entertainment"] {
    --bg: #140c10;
    --bg2: #3a1620;
    --acc: #f2b8a6;
    --glow: rgba(220, 110, 90, 0.3);
}
body {
    background-color: var(--bg);
    background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.6px);
    background-size: 58px 58px;
}
h1 {
    font-size: clamp(2.3rem, 5.2vw, 4.1rem);
    line-height: 1.08;
}
h2 {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    line-height: 1.12;
}
h3 {
    font-family: "Outfit", sans-serif;
    font-weight: 600;
}
.lead {
    letter-spacing: 0.02em;
}
section.alt {
    background-color: rgba(20, 40, 60, 0.55);
    border-block: 1px solid rgba(255, 255, 255, 0.08);
}
section.alt2 {
    background-color: rgba(40, 44, 96, 0.42);
    border-block: 1px solid rgba(255, 255, 255, 0.08);
}
/* the floating pill of the live page */
.nav {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(18px + env(safe-area-inset-top, 0px));
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}
.nav .wrap {
    pointer-events: auto;
    width: min(760px, 100% - 28px);
    height: 58px;
    padding: 0 10px 0 22px;
    border-radius: 999px;
    border: 2.5px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(100deg, rgba(90, 90, 96, 0.78), rgba(170, 150, 150, 0.62) 52%, rgba(80, 84, 110, 0.78));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.brand img {
    height: 30px;
}
.brand span {
    font-size: 1.05rem;
    color: #fff;
}
.links {
    gap: 28px;
    font-weight: 500;
}
.links a:not(.btn) {
    color: #fff;
}
.nav .btn.pri {
    background: linear-gradient(180deg, #1b1b2e, #0b0b14);
    color: #fff;
    border: 0;
    min-height: 38px;
    padding: 0 22px;
    font-weight: 600;
}
html {
    scroll-padding-top: 100px;
}
main {
    padding-top: 0;
}
@media (max-width: 860px) {
    .links {
        inset: calc(86px + env(safe-area-inset-top, 0px)) 14px auto 14px;
        border-radius: 22px;
        border: 1px solid var(--line);
        background: #14141f;
    }
}
.btn.pri {
    background: linear-gradient(180deg, #3f4fc4, #262e78);
    color: #fff;
    border: 1px solid rgba(150, 165, 255, 0.55);
    font-weight: 500;
    letter-spacing: 0.03em;
}
.btn.sec {
    border: 1.5px solid var(--blue);
    color: #9aa9ff;
    letter-spacing: 0.03em;
}
body:not([data-world="home"]) .btn.pri {
    background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 55%, #1a1a2a), color-mix(in srgb, var(--acc) 26%, #0d0d16));
    border-color: color-mix(in srgb, var(--acc) 70%, transparent);
}
body:not([data-world="home"]) .btn.sec {
    border-color: var(--acc);
    color: var(--acc);
}
/* hero, as on the live page: a feathered oval of video, an object floating over the headline */
.hero2 {
    padding: clamp(110px, 13vw, 150px) 0 clamp(48px, 6vw, 80px);
    display: block;
    min-height: 0;
    text-align: left;
}
@keyframes bob {
    to {
        transform: translateY(-10px) rotate(-2deg);
    }
}
.lock {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 22px;
    align-items: end;
    width: min(820px, 100%);
    margin: 0 auto;
}
/* the solution heroes: the solution's own logo (as in the decks), then a thin line, then the headline */
.lock:has(.lockup) {
    width: min(1030px, 100%);
    column-gap: 0;
}
/* the logo and the headline are centered as a group: the column is as wide as the headline's longest line
   (a <br> in the h1 sets where the line breaks), and the text below wraps to that width instead of widening it */
@media (min-width: 701px) {
    .lock:has(.lockup) {
        width: fit-content;
        max-width: min(1030px, 100%);
        grid-template-columns: auto minmax(0, max-content);
    }
    .lock:has(.lockup) .rest {
        contain: inline-size;
    }
    /* a floor, so a short headline cannot squeeze the text below into a narrow strip */
    .lock:has(.lockup) h1 {
        min-width: 18rem;
    }
}
@media (max-width: 700px) {
    .lock:has(.lockup) h1 br {
        display: none; /* on phones the headline wraps on its own */
    }
}
.lockup {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-right: clamp(20px, 3vw, 36px);
    margin-right: clamp(20px, 3vw, 36px);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.lockup img {
    height: clamp(30px, 3.4vw, 44px);
    width: auto;
}
@media (max-width: 700px) {
    .lockup {
        align-self: start;
        padding: 0 0 16px;
        margin: 0 0 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    }
}
.lock .rest {
    grid-column: 2;
    display: grid;
    gap: 22px;
    margin-top: 6px;
}
@media (max-width: 700px) {
    .lock {
        grid-template-columns: 1fr;
    }
    .lock .rest {
        grid-column: 1;
    }
}
/* overview */
/* how it works: the accordion with serif numbers */
/* benefits: the turning ring of tiles and the row of cards */
main {
    overflow-x: clip;
}
/* the worlds, shaped like the keys */
/* platform cards */
footer {
    border: 0;
    padding: 0 0 60px;
}
footer .fcard {
    width: min(var(--col), 100% - 2 * var(--gutter));
    margin: 0 auto;
    /* mostly white, a little see-through, so it takes on a hint of the page's color */
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.86);
    color: #55555e;
    padding: clamp(20px, 2.5vw, 30px);
}
footer .fg {
    grid-template-columns: 1.6fr 0.7fr 0.7fr 0.7fr;
}
footer img {
    filter: invert(1);
    height: 30px;
}
footer h4 {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: #8a8a92;
    font-weight: 600;
    margin-bottom: 10px;
}
footer a {
    color: #55555e;
    font-size: 0.88rem;
}
footer a:hover {
    color: #000;
}
footer .sub {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
footer .ftag {
    margin-top: 10px;
    font-size: 0.88rem;
    max-width: 26ch;
}
footer .social {
    display: flex;
    gap: 14px;
}
footer .bot {
    font-size: 0.82rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(16, 16, 26, 0.1);
    margin-top: 18px;
    padding-top: 14px;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 760px) {
    footer .fg {
        grid-template-columns: 1fr 1fr;
    }
    /* the logo, tagline and subscribe row get the full width, so the email field has room */
    footer .fg > div:first-child {
        grid-column: 1 / -1;
    }
}
.hero .tag {
    letter-spacing: 0.03em;
}
/* pricing calculator (Events, Weddings) */
.pcalc {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .pcalc {
        grid-template-columns: 1fr;
    }
}
.pin,
.pout {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: clamp(20px, 3vw, 32px);
    display: grid;
    gap: 28px;
    align-content: start;
}
.pout {
    align-content: space-between;
    background: linear-gradient(180deg, var(--bg2), var(--panel));
}
.pkeys {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: grid;
    gap: 14px;
}
.pks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}
.pk {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 12px 12px 16px;
    border-radius: 18px;
    border: 2px solid var(--line);
    cursor: pointer;
    opacity: 0.8;
    transition:
        border-color 0.2s ease,
        opacity 0.2s ease;
}
.pk:hover,
.pk.on {
    opacity: 1;
}
.pk.on {
    border-color: var(--acc);
    background: rgba(255, 255, 255, 0.05);
}
.pk input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pk:has(input:focus-visible) {
    outline: 2px solid var(--acc);
    outline-offset: 3px;
}
.pk img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}
/* the round Stamp on Events reads smaller than the keys beside it */
.pk img[src*="stamp_round"] {
    transform: scale(0.78);
}
/* the Mini is smaller than the Lite badge beside it */
.pk img[src*="keychain"] {
    transform: scale(0.72);
}
.pk b {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0 4px;
}
.pk small {
    font-size: 0.85rem;
    color: var(--mut);
    padding: 0 4px;
}
.pdesc {
    max-width: none;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--mut);
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}
.pdesc b {
    color: var(--acc);
    font-weight: 500;
}
.pn {
    display: grid;
    gap: 14px;
}
.pstep {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pstep button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 1.3rem;
    cursor: pointer;
}
.pstep button:hover {
    border-color: var(--acc);
}
.pstep input {
    width: 4.4em;
    height: 48px;
    text-align: center;
    font: inherit;
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--line);
    -moz-appearance: textfield;
}
.pstep input::-webkit-outer-spin-button,
.pstep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.prange {
    --p: 13%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    margin: 12px 0;
    background: linear-gradient(90deg, var(--acc) var(--p), rgba(255, 255, 255, 0.16) var(--p));
    cursor: pointer;
}
.prange::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 6px solid var(--acc);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.prange::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 6px solid var(--acc);
}
.prange:focus-visible,
.pstep input:focus-visible,
.pkeep:has(input:focus-visible) {
    outline: 2px solid var(--acc);
    outline-offset: 6px;
}
.pscale {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--mut);
}
.pk-k {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mut);
}
.ptotal {
    font-size: clamp(3rem, 6vw, 4.6rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 10px 0 8px;
    font-variant-numeric: tabular-nums;
}
.pfor {
    color: var(--mut);
    font-size: 1rem;
}
.plines {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    font-size: 0.95rem;
}
.plines p[data-l] {
    max-width: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--mut);
}
.plines p[hidden] {
    display: none;
}
.plines i {
    font-style: normal;
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pout .btn {
    width: 100%;
    min-height: 56px;
}
/* what the Events and Weddings packs include: a short checklist, the benefit first, the detail after it */
.pinc {
    display: grid;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.pinc ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pinc li {
    position: relative;
    padding-left: 28px;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--ink);
}
.pinc li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 18px;
    height: 18px;
    background: var(--acc);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / contain no-repeat;
}
.pinc b {
    font-weight: 500;
}
.pinc span {
    color: var(--mut);
}
.pfoot {
    margin-top: 16px;
    max-width: none;
}

.lb-e {
    display: none;
}

.nav .wrap {
    height: 56px !important;
}
.nav .btn.pri {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-left: 8px !important;
}
.links a:not(.btn),
.dd summary {
    height: 40px !important;
}
.lt a {
    height: 34px !important;
    min-width: 36px !important;
}
@media (max-width: 860px) {
    .nav .wrap {
        height: 60px !important;
    }
    .nav .links .btn.pri {
        height: 50px !important;
        min-height: 50px !important;
        font-size: 16px !important;
        margin: 8px 0 0 !important;
        width: 100%;
    }
    .links a:not(.btn),
    .dd summary {
        height: 52px !important;
    }
}

/* the logo band: two identical groups, each ending with the same space, so the loop joins exactly */
.marq .t {
    display: flex !important;
    gap: 0 !important;
    width: max-content;
    animation: slide 44s linear infinite;
    will-change: transform;
}
.marq .g {
    display: flex;
    align-items: center;
    gap: 100px;
    padding-right: 100px;
    flex: none;
}
.marq .g img {
    height: 54px;
    width: auto;
    flex: none;
}
footer .sub {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 340px;
    gap: 8px;
}
footer .sub input {
    width: auto;
    flex: 1 1 auto;
}
footer .sub button {
    flex: none;
}
.marq .g img.sm {
    height: 30px;
}
@media (max-width: 760px) {
    .marq .g {
        gap: 64px;
        padding-right: 64px;
    }
    .marq .g img {
        height: 44px;
    }
    .marq .g img.sm {
        height: 24px;
    }
}

/* room to breathe: every section keeps the same generous space above and below */
section {
    padding: clamp(76px, 10vw, 136px) 0 !important;
}
section.hero,
section.heroF {
    padding-bottom: clamp(40px, 6vw, 80px) !important;
}
section.hs {
    padding-bottom: 0 !important;
}
/* the heroes with a scene image keep at least 40px between the menu bar and their content */
section.hero2.hs {
    padding-top: max(clamp(76px, 10vw, 136px), var(--nav-bottom) + 32px) !important; /* the content starts 8px lower, so 40px show */
}
.head {
    margin-bottom: clamp(30px, 4.5vw, 56px);
}

/* the language switch: always visible in the menu bar, on every screen */
.lt {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    flex: none;
}
.lt a {
    min-width: 40px;
    height: 38px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font:
        600 13px "Inter",
        system-ui,
        sans-serif;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.78);
    transition:
        background 0.2s,
        color 0.2s;
}
.lt a.on {
    background: #fff;
    color: #14141f;
}
.lt a:not(.on):hover {
    color: #fff;
}
.nav .wrap {
    padding-right: 8px;
}
@media (max-width: 860px) {
    .lt {
        margin-left: auto;
    }
    .nav .wrap {
        padding-right: 3px;
        gap: 8px;
    }
}

.skip {
    position: fixed;
    left: 12px;
    top: -60px;
    z-index: 99;
    background: #fff;
    color: #10101a;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: top 0.2s;
}
.skip:focus {
    top: 12px;
}
.totop {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(30, 30, 44, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1.2rem;
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s,
        transform 0.25s;
    transform: translateY(8px);
}
.totop.show {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.brand {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.marq {
    position: relative;
}
.marq.paused .t,
.marq:hover .t,
.marq:focus-within .t {
    animation-play-state: paused;
}
/* the menu: a list of the other solutions */
.dd {
    position: relative;
}
.dd summary {
    list-style: none;
    cursor: pointer;
    padding: 0 15px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
}
.dd summary::-webkit-details-marker {
    display: none;
}
.dd summary:hover {
    background: rgba(255, 255, 255, 0.16);
}
.dd summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(45deg) translateY(-2px);
}
.dd .menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 210px;
    padding: 8px;
    border-radius: 20px;
    background: rgba(28, 28, 40, 0.97);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
    display: grid;
    gap: 2px;
}
.dd .menu a {
    height: 44px !important;
    border-radius: 14px !important;
}
.lang {
    font-size: 13px !important;
    padding: 0 10px !important;
    opacity: 0.85;
}
@media (max-width: 860px) {
    .dd summary {
        height: 52px;
        padding: 0 18px;
        font-size: 17px;
    }
    .dd .menu {
        position: static;
        transform: none;
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 12px;
    }
}
/* the contact form */
.fm {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(6, 6, 12, 0.72);
    backdrop-filter: blur(8px);
    display: none;
    place-items: center;
    padding: 18px;
}
.fm.open {
    display: grid;
}
.fm form {
    width: min(480px, 100%);
    background: #171722;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 26px;
    padding: 28px;
    display: grid;
    gap: 14px;
    position: relative;
}
.fm h3 {
    font-size: 1.6rem;
}
.fm label {
    display: grid;
    gap: 6px;
    font-size: 0.95rem;
    color: #c9c9d6;
}
.fm input,
.fm select,
.fm textarea,
footer .sub input {
    font: inherit;
    color: #fff;
    background: #0f0f18;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    min-height: 48px;
    width: 100%;
}
.fm textarea {
    min-height: 90px;
    resize: vertical;
}
.fm .x {
    position: absolute;
    right: 14px;
    top: 12px;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    color: #fff;
}
.fm .ok {
    color: #8fe3a8;
    font-weight: 500;
}
footer .sub {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: nowrap;
}
footer .sub input {
    flex: 1;
    min-width: 0;
    background: #fff;
    color: #10101a;
    border: 1px solid rgba(16, 16, 26, 0.12);
    border-radius: 999px;
    min-height: 40px;
    padding: 8px 16px;
}
footer .sub button {
    padding: 8px 18px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-weight: 600;
    min-height: 40px;
}

/* the sports film, where it sits on the live page: a band across the top, shown as it is, with nothing laid over it */
section.hv {
    /* close below the menu bar, but never under it */
    padding-top: max(clamp(64px, 5vw, 84px), var(--nav-bottom) + 16px) !important;
    background: linear-gradient(180deg, #0d0d14 0%, #0d0d14 82%, var(--bg) 100%);
    isolation: isolate;
}
.vband {
    width: min(1240px, 100%);
    aspect-ratio: 16/9;
    margin: 0 auto clamp(18px, 2.4vw, 40px);
}
.vband video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: lighten;
}
@media (max-width: 760px) {
    section.hv {
        padding-top: max(76px, var(--nav-bottom) + 16px) !important;
    }
    .vband {
        margin-bottom: 16px;
    }
}

.cphone {
    display: grid;
    place-items: center;
}

body {
    background-image: none !important;
}
/* how it works on a phone: one step after another, each with its own film. Nothing to swipe or tap */

/* real depth: every keepsake is built from stacked layers, so it has an edge, a back, a moving highlight and a shadow on the ground */

.burger {
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.28);
    width: 50px !important;
    height: 50px !important;
    margin-right: 3px;
}
.burger i {
    transition:
        transform 0.28s ease,
        opacity 0.2s ease;
}
.burger.x i:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.burger.x i:nth-child(2) {
    opacity: 0;
}
.burger.x i:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}
@media (max-width: 860px) {
    .nav .wrap {
        position: relative;
    }
    .links {
        position: absolute !important;
        inset: calc(100% + 10px) 0 auto 0 !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 2px !important;
        padding: 10px !important;
        border-radius: 28px !important;
        border: 2px solid rgba(255, 255, 255, 0.7) !important;
        background: linear-gradient(160deg, rgba(60, 60, 72, 0.96), rgba(26, 26, 38, 0.97)) !important;
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        box-shadow: 0 26px 56px rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px) scale(0.97);
        transform-origin: top center;
        transition:
            opacity 0.2s ease,
            transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
            visibility 0s 0.3s;
    }
    .links.open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition:
            opacity 0.2s ease,
            transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .links a:not(.btn) {
        height: 52px !important;
        padding: 0 18px !important;
        font-size: 17px;
        border-radius: 18px !important;
        width: auto !important;
    }
    .links a:not(.btn):active {
        background: rgba(255, 255, 255, 0.14);
    }
    .nav .links .btn.pri {
        margin: 8px 0 0 !important;
        height: 54px;
        width: 100%;
    }
}

/* the home hero: the film fills the screen */
/* every hero answers the pointer: light follows it, and the objects turn in space */
.hero {
    --rx: 0deg;
    --ry: 0deg;
}
.spot {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(460px circle at var(--mx, 72%) var(--my, 28%), color-mix(in srgb, var(--acc) 6%, transparent), transparent 70%);
}
.hero .wrap,
.hero .wide {
    position: relative;
    z-index: 2;
}
.heroimg {
    perspective: 1700px;
}
.heroimg .tap {
    transform: rotateX(calc(var(--rx) + 5deg)) rotateY(var(--ry)) scale(1.03);
    transform-origin: 50% 60%;
    transition: transform 0.35s ease-out;
    filter: drop-shadow(0 60px 90px rgba(0, 0, 0, 0.6));
    will-change: transform;
}
/* how it works: a thin progress line, and on phones a row of cards to swipe */
.hs {
    padding-bottom: 0 !important;
}
.hs .lock {
    margin-top: 8px;
}
.heroimg {
    margin-top: clamp(22px, 3vw, 46px);
}
.heroimg .tap {
    width: 100%;
}

.marq {
    border: 0;
    padding: 26px 0;
}
.marq .t {
    gap: 100px;
}
.marq img {
    height: 54px;
    opacity: 0.95;
}
/* the menu, measured from the live page: a centred pill, 62 high, links evenly padded */
.nav .wrap {
    width: fit-content;
    max-width: calc(100% - 24px);
    height: 62px;
    padding: 3px 3px 3px 17px;
    gap: 10px;
    justify-content: space-between;
}
.brand {
    align-items: center;
}
.brand img {
    height: 32px;
}
.brand span {
    display: none;
}
.links {
    gap: 2px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    align-items: center;
}
.links a:not(.btn) {
    padding: 0 15px;
    height: 44px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
    transition: background 0.2s;
}
.links a:not(.btn):hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.nav .btn.pri {
    height: 56px;
    min-height: 56px;
    padding: 0 26px;
    margin-left: 12px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}
@media (max-width: 860px) {
    .nav .wrap {
        width: calc(100% - 24px);
    }
    .links a:not(.btn) {
        height: 48px;
        width: 100%;
    }
    .nav .btn.pri {
        margin: 8px 0 0;
        width: 100%;
    }
}
/* keepsakes that turn slowly in space */
@keyframes turn {
    from {
        transform: rotateY(-30deg) rotateX(7deg) translateY(8px);
    }
    to {
        transform: rotateY(30deg) rotateX(-6deg) translateY(-12px);
    }
}
/* the solution cards: 280 by 450, the body slides down on hover and the keepsake appears */
/* the three components at their real size */
@media (min-width: 861px) {
    .nav .wrap {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        width: calc(100% - 48px) !important;
        max-width: none !important;
        padding: 0 !important;
        height: 56px !important;
        gap: 14px !important;
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        pointer-events: none;
    }
    .nav .pl,
    .nav .side {
        pointer-events: auto;
        display: flex;
        align-items: center;
        height: 56px;
        border-radius: 999px;
        border: 2.5px solid rgba(255, 255, 255, 0.9);
        background: linear-gradient(100deg, rgba(90, 90, 96, 0.78), rgba(170, 150, 150, 0.62) 52%, rgba(80, 84, 110, 0.78));
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
    .nav .pl {
        grid-column: 2;
        padding: 3px 6px 3px 17px;
        gap: 10px;
    }
    .nav .side {
        grid-column: 3;
        justify-self: end;
    }
    .nav .side {
        padding: 0;
        gap: 10px;
        border: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav .side .btn.pri {
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    }
    .nav .side .lt {
        height: 44px;
        background: rgba(16, 16, 26, 0.5);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    }
    .nav .links .btn.pri {
        display: none !important;
    }
    .nav .side .btn.pri {
        margin: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 22px !important;
    }
}
@media (max-width: 860px) {
    .nav .pl,
    .nav .side {
        display: contents;
    }
    .nav .side .cta-d {
        display: none !important;
    }
}
.lusec {
    background: var(--bg);
}
.lu {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 72px);
    align-items: center;
    margin-top: clamp(10px, 2vw, 24px);
}
.luvw {
    position: relative;
    aspect-ratio: 1280/1080;
    width: 100%;
}
.luv {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: lighten;
}
.lul {
    display: grid;
    gap: clamp(8px, 1.2vw, 14px);
}
.lui {
    appearance: none;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
    display: grid;
    gap: 4px;
    opacity: 0.42;
    transition: opacity 0.4s ease;
    font: inherit;
}
.lui.on,
.lui:hover {
    opacity: 1;
}
.lui i {
    display: block;
    width: 56px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
    margin-bottom: 4px;
}
.lui i s {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--acc, #fff);
    transform-origin: 0 50%;
    transform: scaleX(0);
}
.lui b {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 500;
    color: #fff;
}
/* a key held by a click: a small pause sign after its name */
.lui.held b::after {
    content: "";
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    margin-left: 0.45em;
    vertical-align: 0.02em;
    background: linear-gradient(90deg, var(--acc) 0 34%, transparent 34% 66%, var(--acc) 66%);
}
.lui span {
    font-size: 0.88rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 820px) {
    .lu {
        grid-template-columns: 1fr;
    }
    .luvw {
        width: min(520px, 100%);
        margin: 0 auto;
    }
    .lul {
        grid-template-columns: repeat(5, minmax(160px, 1fr));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 6px;
    }
    .lui {
        scroll-snap-align: start;
    }
}
/* the three components on phones: compact rows (picture on the left, words on the right) instead of three tall cards */
/* the concierge section (the phone with the sample chat) on every solution: less space around it and a smaller phone */
section[id$="-ai"] {
    padding: clamp(44px, 6vw, 84px) 0 !important;
}

/* the concierge phone: drawn in HTML, so it stays sharp at any size, and its chat plays when it comes into view.
   Every size is a multiple of --u, one 1226th of the phone's height. */
.chatph {
    --u: calc(min(500px, 64vh) / 1226);
    --ca: #8e7be8;
    --ci: #ffffff;
    --cf: "Outfit", system-ui, sans-serif;
    width: calc(566 * var(--u));
    height: calc(1226 * var(--u));
    margin: 0 auto;
    filter: drop-shadow(0 calc(40 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, 0.45));
    font-family: "Outfit", system-ui, sans-serif;
    letter-spacing: 0;
    -webkit-user-select: none;
    user-select: none;
}
@media (max-width: 860px) {
    .chatph {
        --u: calc(340px / 1226);
    }
}
.chatph .ph {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(94 * var(--u));
    padding: calc(16 * var(--u));
    background: linear-gradient(140deg, #b9b9c1 0%, #6e6e76 9%, #2b2b30 24%, #111114 44%, #1b1b1f 60%, #4a4a52 82%, #a9a9b2 100%);
    box-shadow:
        0 0 0 1px #050506,
        inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.28),
        inset 0 0 0 calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
}
.chatph .ph::before {
    content: "";
    position: absolute;
    inset: calc(7 * var(--u));
    border-radius: calc(87 * var(--u));
    background: #040405;
}
.chatph .bt {
    position: absolute;
    left: calc(-6 * var(--u));
    width: calc(6 * var(--u));
    border-radius: calc(3 * var(--u)) 0 0 calc(3 * var(--u));
    background: linear-gradient(90deg, #7a7a82, #2a2a2e);
}
.chatph .b1 {
    top: calc(210 * var(--u));
    height: calc(52 * var(--u));
}
.chatph .b2 {
    top: calc(300 * var(--u));
    height: calc(96 * var(--u));
}
.chatph .b3 {
    top: calc(414 * var(--u));
    height: calc(96 * var(--u));
}
.chatph .bt.r {
    left: auto;
    right: calc(-6 * var(--u));
    top: calc(340 * var(--u));
    height: calc(150 * var(--u));
    border-radius: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0;
    background: linear-gradient(270deg, #7a7a82, #2a2a2e);
}
.chatph .sc {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(78 * var(--u));
    overflow: hidden;
    z-index: 2;
    background:
        radial-gradient(120% 55% at 82% 0%, color-mix(in srgb, var(--ca) 40%, transparent), transparent 62%),
        radial-gradient(90% 40% at 0% 100%, color-mix(in srgb, var(--ca) 13%, transparent), transparent 70%), linear-gradient(180deg, #13141e, #07070b);
}
.chatph .isl {
    position: absolute;
    left: 50%;
    top: calc(22 * var(--u));
    width: calc(150 * var(--u));
    height: calc(43 * var(--u));
    margin-left: calc(-75 * var(--u));
    border-radius: calc(22 * var(--u));
    background: #000;
    z-index: 4;
}
.chatph .st {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(29 * var(--u));
    padding: 0 calc(42 * var(--u));
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-weight: 600;
    font-size: calc(21 * var(--u));
    line-height: 1;
    z-index: 3;
}
.chatph .st span:last-child {
    display: flex;
    gap: calc(8 * var(--u));
    align-items: center;
}
.chatph .st svg {
    width: calc(26 * var(--u));
    height: calc(17 * var(--u));
    fill: #fff;
}
.chatph .bat {
    position: relative;
    width: calc(33 * var(--u));
    height: calc(16 * var(--u));
    border-radius: calc(5 * var(--u));
    border: calc(1.8 * var(--u)) solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(90deg, #fff 74%, transparent 74%) calc(2 * var(--u)) calc(2 * var(--u)) / calc(100% - calc(4 * var(--u))) calc(100% - calc(4 * var(--u))) no-repeat;
}
.chatph .hd {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(86 * var(--u));
    padding: calc(18 * var(--u)) calc(26 * var(--u)) calc(20 * var(--u));
    display: flex;
    gap: calc(16 * var(--u));
    align-items: center;
    border-bottom: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
}
.chatph .av {
    width: calc(60 * var(--u));
    height: calc(60 * var(--u));
    flex: none;
    border-radius: 50%;
    background: var(--ca);
    display: grid;
    place-items: center;
    box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) color-mix(in srgb, var(--ca) 35%, transparent);
}
.chatph .av img {
    width: calc(34 * var(--u));
    height: auto;
    filter: var(--cav, none);
}
.chatph .hd b {
    display: block;
    color: #fff;
    font-family: var(--cf);
    font-weight: 600;
    font-size: calc(var(--cfs, 25) * var(--u));
    line-height: 1.1;
}
.chatph .hd small {
    color: rgba(255, 255, 255, 0.66);
    font-size: calc(17.5 * var(--u));
    display: flex;
    align-items: center;
    gap: calc(7 * var(--u));
}
.chatph .ms {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(200 * var(--u));
    bottom: calc(190 * var(--u));
    padding: calc(22 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(13 * var(--u));
    justify-content: flex-end;
    overflow: hidden;
}
.chatph .ms p {
    max-width: 84%;
    margin: 0;
    padding: calc(16 * var(--u)) calc(21 * var(--u));
    font-size: calc(21.5 * var(--u));
    line-height: 1.32;
}
.chatph .q {
    align-self: flex-end;
    background: var(--ca);
    color: var(--ci);
    border-radius: calc(27 * var(--u)) calc(27 * var(--u)) calc(8 * var(--u)) calc(27 * var(--u));
    font-weight: 500;
    box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.25);
}
.chatph .a {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: calc(27 * var(--u)) calc(27 * var(--u)) calc(27 * var(--u)) calc(8 * var(--u));
    font-weight: 300;
    border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.1);
}
.chatph .ms p.new {
    animation: chatin 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transform-origin: 100% 100%;
}
.chatph .ms p.a.new {
    transform-origin: 0 100%;
}
@keyframes chatin {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.92);
    }
}
.chatph .ms.out p {
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
    opacity: 0;
    transform: translateY(-12px);
}
.chatph .dots[hidden] {
    display: none;
}
.chatph .dots {
    display: inline-flex;
    gap: calc(7 * var(--u));
    padding: calc(6 * var(--u)) calc(2 * var(--u));
}
.chatph .dots i {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    animation: chatdot 1s ease-in-out infinite;
}
.chatph .dots i:nth-child(2) {
    animation-delay: 0.15s;
}
.chatph .dots i:nth-child(3) {
    animation-delay: 0.3s;
}
@keyframes chatdot {
    0%,
    60%,
    100% {
        opacity: 0.35;
        transform: none;
    }
    30% {
        opacity: 1;
        transform: translateY(calc(-4 * var(--u)));
    }
}
.chatph .ch {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(122 * var(--u));
    padding: 0 calc(22 * var(--u));
    display: flex;
    gap: calc(9 * var(--u));
}
.chatph .ch span {
    padding: calc(10 * var(--u)) calc(17 * var(--u));
    border-radius: 999px;
    border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.26);
    color: #fff;
    font-size: calc(17.5 * var(--u));
    background: rgba(255, 255, 255, 0.06);
    white-space: nowrap;
}
.chatph .in {
    position: absolute;
    left: calc(20 * var(--u));
    right: calc(20 * var(--u));
    bottom: calc(44 * var(--u));
    height: calc(64 * var(--u));
    border-radius: calc(32 * var(--u));
    background: rgba(255, 255, 255, 0.11);
    border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10 * var(--u));
    padding: 0 calc(9 * var(--u)) 0 calc(24 * var(--u));
    color: rgba(255, 255, 255, 0.55);
    font-size: calc(20.5 * var(--u));
}
.chatph .in span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chatph .in.typing span {
    color: #fff;
}
.chatph .in.typing span::after {
    content: "";
    display: inline-block;
    width: calc(2 * var(--u));
    height: 1.1em;
    margin-left: calc(2 * var(--u));
    vertical-align: -0.15em;
    background: var(--ca);
    animation: chatcaret 0.9s steps(1) infinite;
}
@keyframes chatcaret {
    50% {
        opacity: 0;
    }
}
.chatph .in i {
    width: calc(47 * var(--u));
    height: calc(47 * var(--u));
    flex: none;
    border-radius: 50%;
    background: var(--ca);
    display: grid;
    place-items: center;
    color: var(--ci);
    font-style: normal;
    font-size: calc(23 * var(--u));
    font-weight: 600;
    transition: transform 0.18s ease;
}
.chatph .in.send i {
    transform: scale(0.82);
}
.chatph .hb {
    position: absolute;
    left: 50%;
    bottom: calc(13 * var(--u));
    width: calc(172 * var(--u));
    height: calc(6 * var(--u));
    margin-left: calc(-86 * var(--u));
    border-radius: calc(3 * var(--u));
    background: rgba(255, 255, 255, 0.88);
}
.chatph .gl {
    position: absolute;
    inset: 0;
    border-radius: calc(78 * var(--u));
    background: linear-gradient(116deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.035) 20%, transparent 36%);
    z-index: 5;
    pointer-events: none;
}
/* the three components on phones, once the script is running: three tiles to tap (icon and name), and one line underneath
   that tells what the chosen one does. Without the script they stay compact rows. */
@keyframes p3in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}
/* the button that leads down the page (home "Learn more", solutions "See how it works"): a small arrow that dips */
@keyframes dnb {
    0%,
    60%,
    100% {
        transform: none;
    }
    30% {
        transform: translateY(3px);
    }
}
/* the journey ("What you can build" and its twins): phases and controls on top, the moment's words beside its picture,
   and the line of moments underneath. Without the script (no .live) every moment shows as a list. */
.jr {
    margin-top: clamp(16px, 3vw, 32px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 3vw, 36px);
}
.jr > *,
.jr-main > * {
    min-width: 0;
}
.jr-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.jr-phs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.jr-ph {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--mut);
    font-size: 0.95rem;
    cursor: pointer;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}
.jr-ph.on {
    border-color: var(--acc);
    color: #fff;
    background: color-mix(in srgb, var(--acc) 22%, transparent);
}
.jr-ctl {
    display: flex;
    align-items: center;
    gap: 10px;
}
.jr-n {
    font-size: 0.9rem;
    color: var(--mut);
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}
.jr-b {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    font-size: 1.15rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.jr-b:hover {
    border-color: var(--acc);
}
.jr-play {
    min-height: 46px;
}
.jr-main {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.jr-txt {
    display: grid;
}
.jr.live .jr-m {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-12px);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        visibility 0s 0.45s;
}
.jr.live .jr-m.on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity 0.45s ease 0.08s,
        transform 0.45s ease 0.08s;
}
.jr-m {
    display: grid;
    gap: 14px;
    align-content: center;
}
.jr-k {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acc);
}
.jr-m h3 {
    font-family: var(--hf);
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 400;
    line-height: 1.08;
}
.jr-m p {
    color: var(--mut);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.5;
}
.jr-who {
    justify-self: start;
    margin-top: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.85rem;
}
.jr-stage {
    display: grid;
    aspect-ratio: 4 / 3;
}
.jr-stage picture {
    display: contents;
}
.jr-v {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.97) translateY(10px);
    transition:
        opacity 0.6s ease,
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
}
.jr-v.on {
    opacity: 1;
    transform: none;
}
.jr-line {
    position: relative;
    padding-top: 6px;
}
.jr-rail {
    position: absolute;
    left: calc(50% / var(--n));
    right: calc(50% / var(--n));
    top: 13px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    touch-action: none;
}
.jr-rail::before {
    content: "";
    position: absolute;
    inset: -14px 0;
}
.jr-rail i {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #fff));
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.jr-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    pointer-events: none;
}
.jr-s {
    pointer-events: auto;
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 0 4px;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.jr-s i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: var(--bg);
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}
.jr-s span {
    font-size: 0.8rem;
    line-height: 1.25;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.3s ease;
}
.jr-s.done i {
    background: var(--acc);
    border-color: var(--acc);
}
.jr-s.on i {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 45%, transparent);
}
.jr-s.on span,
.jr-s:hover span {
    color: #fff;
}
.jr-s:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 4px;
    border-radius: 8px;
}
.jr-ov,
.jr-c {
    display: none;
}
.jr-stage {
    position: relative;
}
@media (max-width: 860px) {
    /* phones: the phases as one segmented bar, the picture large with arrows on it (or a swipe), dots for the moments, then the words */
    .jr-main {
        display: contents;
    }
    .jr-top {
        order: 1;
    }
    .jr-stage {
        order: 2;
        aspect-ratio: 4 / 5;
        border-radius: 24px;
        overflow: hidden;
        touch-action: pan-y;
    }
    .jr-line {
        order: 3;
    }
    .jr-txt {
        order: 4;
    }
    .jr-ctl {
        display: none;
    }
    .jr-phs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
        border-radius: 999px;
        border: 1px solid var(--line);
    }
    .jr-ph {
        min-height: 44px;
        padding: 0 6px;
        border: 0;
        font-size: 0.78rem;
        line-height: 1.15;
    }
    .jr-v {
        object-fit: cover;
        transform: scale(1.02);
        filter: none;
    }
    .jr-ov {
        display: grid;
        place-items: center;
        position: absolute;
        bottom: 14px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(10, 12, 24, 0.55);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: #fff;
        font-size: 1.15rem;
        z-index: 2;
    }
    .jr-ov[data-d="-1"] {
        right: 70px;
    }
    .jr-ov[data-d="1"] {
        right: 14px;
    }
    .jr-c {
        display: block;
        position: absolute;
        left: 14px;
        bottom: 24px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(10, 12, 24, 0.55);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        font-size: 0.8rem;
        font-variant-numeric: tabular-nums;
        z-index: 2;
    }
    .jr-line {
        padding: 0;
    }
    .jr-rail {
        display: none;
    }
    .jr-steps {
        display: flex;
        justify-content: center;
        gap: 0;
    }
    .jr-s {
        width: 30px;
        height: 30px;
        padding: 0;
        place-items: center;
    }
    .jr-s i {
        width: 10px;
        height: 10px;
        border-width: 1.5px;
    }
    .jr-s.on i {
        width: 26px;
        border-radius: 6px;
        box-shadow: none;
    }
    .jr-s span {
        display: none;
    }
    .jr-m h3 {
        font-size: 1.7rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .jr-v,
    .jr.live .jr-m {
        transition: none;
    }
}
/* the use cases: the journey's layout as a showcase, one tab per use case with a line that fills while it plays */
.jr-uc .jr-line {
    display: none;
}
.jr-uc .jr-ph {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    font-size: 1rem;
}
.jr-pn {
    font-size: 0.75rem;
    color: var(--acc);
    font-variant-numeric: tabular-nums;
}
.jr-pb {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--acc);
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
}
.jr-uc.run .jr-ph.on .jr-pb {
    opacity: 1;
    animation: ucbar 4.2s linear forwards;
}
@keyframes ucbar {
    to {
        transform: scaleX(1);
    }
}
@media (max-width: 860px) {
    .jr-uc .jr-line {
        display: block;
    }
    .jr-uc .jr-phs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        border: 0;
        padding: 0;
        gap: 8px;
    }
    .jr-uc .jr-ph {
        flex: none;
        border: 1px solid var(--line);
        min-height: 44px;
        padding: 0 16px;
        font-size: 0.85rem;
    }
}
/* the use cases on desktop: one panel per use, the object (a cutout) large on the left on a soft glow of the page's
   accent, its words and two points on the right. On phones the picture already carries the two points, so the list stays hidden there. */
.jr-pts {
    display: none;
}
@media (min-width: 861px) {
    .jr-uc .jr-main {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 0;
        align-items: stretch;
        border-radius: 28px;
        border: 1px solid var(--line);
        overflow: hidden;
    }
    .jr-uc .jr-stage {
        order: -1;
        aspect-ratio: auto;
        min-height: 480px;
        background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 24%, transparent), transparent);
    }
    .jr-uc .jr-v {
        position: absolute;
        left: 5%;
        top: 6%;
        width: 90%;
        height: 88%;
        filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.5));
    }
    .jr-uc .jr-txt {
        padding: clamp(28px, 4vw, 56px);
    }
    .jr-uc .jr-m h3 {
        font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    }
    .jr-pts {
        display: grid;
        margin: 6px 0 4px;
        padding: 0;
        list-style: none;
        border-top: 1px solid var(--line);
    }
    .jr-pts li {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
    }
    .jr-pts i {
        flex: none;
        width: 28px;
        height: 28px;
        background: var(--acc);
        -webkit-mask: var(--ic) center / contain no-repeat;
        mask: var(--ic) center / contain no-repeat;
    }
    .jr-pts span {
        display: grid;
        gap: 3px;
        font-size: 1.05rem;
    }
    .jr-pts b {
        font-weight: 500;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--mut);
    }
}
/* the points' line icons, drawn as masks so they take the page's accent color */
.ic-pin {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-6.5-5.8-6.5-11.2a6.5%206.5%200%200%201%2013%200C18.5%2015.2%2012%2021%2012%2021z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.8%22%20r%3D%222.3%22%2F%3E%3C%2Fsvg%3E");
}
.ic-seal {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229.5%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M9.2%2014.8%208.2%2021l3.8-1.9%203.8%201.9-1-6.2%22%2F%3E%3Cpath%20d%3D%22m9.6%209.6%201.7%201.7%203.2-3.3%22%2F%3E%3C%2Fsvg%3E");
}
.ic-stamp {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h14v10.5L13.5%2020H5z%22%2F%3E%3Cpath%20d%3D%22M13.5%2020v-5.5H19%22%2F%3E%3C%2Fsvg%3E");
}
.ic-tap {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%229%22%20height%3D%2218%22%20rx%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M8.5%205.6h2%22%2F%3E%3Cpath%20d%3D%22M17.2%209.6a3.4%203.4%200%200%201%200%204.8%22%2F%3E%3Cpath%20d%3D%22M19.6%207.4a6.6%206.6%200%200%201%200%209.2%22%2F%3E%3C%2Fsvg%3E");
}
.ic-key {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M10.4%206.2h3.2%22%2F%3E%3Cpath%20d%3D%22M10%2015.5h4%22%2F%3E%3C%2Fsvg%3E");
}
.ic-time {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.2%22%2F%3E%3Cpath%20d%3D%22M12%207.6V12l3%202%22%2F%3E%3C%2Fsvg%3E");
}
.ic-ticket {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%207.5h17v3a1.9%201.9%200%200%200%200%203.8v3h-17v-3a1.9%201.9%200%200%200%200-3.8z%22%2F%3E%3Cpath%20d%3D%22M15.5%207.5v10%22%20stroke-dasharray%3D%221.4%202%22%2F%3E%3Cpath%20d%3D%22M7%2011h5M7%2014h3.5%22%2F%3E%3C%2Fsvg%3E");
}
.ic-layers {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%204%208%204-8%204-8-4z%22%2F%3E%3Cpath%20d%3D%22m4%2012%208%204%208-4%22%2F%3E%3Cpath%20d%3D%22m4%2016%208%204%208-4%22%2F%3E%3C%2Fsvg%3E");
}
.ic-book {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205.2A1.8%201.8%200%200%201%205.8%204H11v16H5.8A1.8%201.8%200%200%200%204%2021.2z%22%2F%3E%3Cpath%20d%3D%22M20%205.2A1.8%201.8%200%200%200%2018.2%204H13v16h5.2a1.8%201.8%200%200%201%201.8%201.2z%22%2F%3E%3C%2Fsvg%3E");
}
.ic-note {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2017.5V6l10-2v11.5%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2217.5%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2215.5%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
}
.ic-calendar {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225.5%22%20width%3D%2216%22%20height%3D%2214.5%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2010h16%22%2F%3E%3Cpath%20d%3D%22M9%203.5v4M15%203.5v4%22%2F%3E%3C%2Fsvg%3E");
}
.ic-chart {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204v16h16%22%2F%3E%3Cpath%20d%3D%22M8.5%2016v-4M12.5%2016V8.5M16.5%2016v-6%22%2F%3E%3C%2Fsvg%3E");
}
.ic-shirt {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%204%204%206.8l1.8%204%202.2-1V20h8V9.8l2.2%201%201.8-4L15.5%204c-.6%201.4-1.9%202.2-3.5%202.2S9.1%205.4%208.5%204z%22%2F%3E%3C%2Fsvg%3E");
}
.ic-passport {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%223%22%20width%3D%2212%22%20height%3D%2218%22%20rx%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.8%22%2F%3E%3Cpath%20d%3D%22M9.5%2016h5%22%2F%3E%3C%2Fsvg%3E");
}
.ic-people {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.5%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3.5%2019.5c0-3%202.5-5.5%205.5-5.5s5.5%202.5%205.5%205.5%22%2F%3E%3Ccircle%20cx%3D%2216.8%22%20cy%3D%229.4%22%20r%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M15.6%2014.2c2.7.3%204.9%202.5%204.9%205.3%22%2F%3E%3C%2Fsvg%3E");
}
.ic-eye {
    --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.8%22%2F%3E%3C%2Fsvg%3E");
}
/* the why section's figures: a number and one short line each; the sources fold away under them */
/* how Ambar solves it: small cards, each with its icon and name first so it is found at a glance, one line, and a small
   picture; a tap opens the picture large */
/* the picture, large, over the page */
/* the tap, in the heroes of Events, Weddings, Destinations and Entertainment: the key alone, the phone rises and taps it,
   the App Clip card slides up inside the screen, the experience assembles on the phone, then its tiles burst out around it.
   Without the script, or with reduced motion, it is the finished picture. */
.tap {
    position: relative;
}
.tap img {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.tp-ts {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.tp-t,
.tp-key,
.tp-ph {
    position: absolute;
    height: auto;
}
.tp-key {
    z-index: 1;
    transform: rotate(9deg);
    filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.55));
}
.tp-ph {
    z-index: 3;
    container-type: inline-size;
    filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.55));
    transform: rotate(-4deg);
}
.tp-home,
.tp-sbg {
    width: 100%;
    height: auto;
}
.tp-exp {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.tp-pc {
    position: absolute;
    height: auto;
}
.tp-scr {
    position: absolute;
    left: 2.9%;
    right: 2.9%;
    top: 1.35%;
    bottom: 1.35%;
    z-index: 1;
    border-radius: 13.5% / 6.3%;
    overflow: hidden;
    pointer-events: none;
}
.tp-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
}
.tp-clip {
    position: absolute;
    left: 2.8%;
    right: 2.8%;
    bottom: 2.4%;
    border-radius: 9cqw;
    overflow: hidden;
    background: #1c1c1e;
    color: #fff;
    opacity: 0;
    font-family: -apple-system, "SF Pro Text", "Outfit", system-ui, sans-serif;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.4);
}
.tp-ci {
    position: relative;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
}
.tp-ci i {
    position: absolute;
    right: 4cqw;
    top: 4cqw;
    width: 7.5cqw;
    height: 7.5cqw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.9);
    color: #222;
    font-style: normal;
    font-size: 3.6cqw;
    font-weight: 700;
}
.tp-cb {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4cqw;
    padding: 4.5cqw 5cqw 5.5cqw;
}
.tp-ct {
    display: grid;
    gap: 0.6cqw;
    min-width: 0;
}
.tp-ct b {
    font-size: 6.2cqw;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-ct small {
    font-size: 3.9cqw;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-ct em {
    display: grid;
    margin-top: 2.2cqw;
    font-style: normal;
    font-size: 2.9cqw;
    color: rgba(255, 255, 255, 0.55);
}
.tp-ct strong {
    font-size: 3.3cqw;
    font-weight: 600;
    color: #fff;
}
.tp-cb span {
    flex: none;
    padding: 2.4cqw 6cqw;
    border-radius: 999px;
    background: #0a84ff;
    color: #fff;
    font-size: 4.2cqw;
    font-weight: 600;
}
.tp-w {
    position: absolute;
    left: calc(var(--cx) + 7.6%);
    top: calc(var(--cy) - 9.3%);
    z-index: 4;
    width: 3%;
    transform: translateY(-50%);
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
}
.tp-halo,
.tp-fl {
    position: absolute;
    left: var(--cx);
    top: var(--cy);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.tp-halo {
    width: 46%;
    aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--acc) 34%, transparent), transparent 60%);
    opacity: 0.55;
}
.tp-fl {
    width: 30%;
    aspect-ratio: 1;
    z-index: 1;
    opacity: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45), color-mix(in srgb, var(--acc) 30%, transparent) 32%, transparent 62%);
    mix-blend-mode: screen;
}
.tap.pre .tp-t,
.tap.pre .tp-ph,
.tap.pre .tp-w,
.tap.pre .tp-exp,
.tap.pre .tp-pc {
    opacity: 0;
}
.tap.go .tp-key {
    animation: tpfloat 4s ease-in-out infinite;
}
.tap.go .tp-ph {
    animation: tprise 1s cubic-bezier(0.2, 0.9, 0.25, 1) 0.7s both;
}
.tap.go .tp-w {
    animation: tpwave 1.8s ease-in-out 1.6s both;
}
.tap.go .tp-fl {
    animation: tpflash 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.75s both;
}
.tap.go .tp-clip {
    animation: tpclip 1.55s cubic-bezier(0.3, 0.8, 0.3, 1) 1.85s both;
}
.tap.go .tp-cb span {
    animation: tppress 0.3s ease 2.7s both;
}
.tap.go .tp-dim {
    animation: tpdim 1.55s ease 1.85s both;
}
.tap.go .tp-exp {
    animation: tpopen 0.35s ease 2.9s both;
}
.tap.go .tp-pc {
    animation: tppc 0.65s cubic-bezier(0.2, 0.9, 0.25, 1.05) both;
    animation-delay: calc(3.05s + var(--pd));
}
.tap.go .tp-t {
    animation: tpburst 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--t0, 3.6s) + var(--d, 0s));
}
@keyframes tpfloat {
    0%,
    100% {
        transform: translateY(0) rotate(9deg);
    }
    50% {
        transform: translateY(-1.6%) rotate(10deg);
    }
}
@keyframes tprise {
    from {
        transform: translateY(70%) rotate(-2deg);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    to {
        transform: rotate(-4deg);
        opacity: 1;
    }
}
@keyframes tpwave {
    0% {
        opacity: 0;
    }
    35% {
        opacity: 0.75;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}
@keyframes tpflash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
    30% {
        opacity: 0.32;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}
@keyframes tpclip {
    0% {
        opacity: 1;
        transform: translateY(110%);
    }
    25%,
    68% {
        opacity: 1;
        transform: none;
    }
    86%,
    100% {
        opacity: 0;
        transform: scale(1.04);
    }
}
@keyframes tpdim {
    0% {
        opacity: 0;
    }
    25%,
    100% {
        opacity: 1;
    }
}
@keyframes tppress {
    0%,
    100% {
        transform: none;
    }
    45% {
        transform: scale(0.9);
        filter: brightness(1.15);
    }
}
@keyframes tpopen {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes tppc {
    0% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.72);
        filter: blur(5px);
    }
    60% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}
@keyframes tpburst {
    from {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.12) rotate(var(--r));
        filter: blur(10px);
    }
    40% {
        opacity: 1;
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* the text next to the key in "What is Ambar ...", and the text of the AI concierge section */
.ai-tx {
    display: grid;
    gap: 16px;
}
.ai-hl {
    font-size: 1.25rem;
    font-weight: 500;
}

/* The calmer layout (October 2026): sections told apart by tone, a label and a large headline on every section, one
   screen per section on computers, the centred hero, the problem as one panel, How it works as a stage with steps,
   the starting price first and the calculator second. It overrides rules above, so it stays at the end of the file. */

/* 1. Rhythm: more air between sections, sections told apart by tone instead of lines */
section {
    padding-block: clamp(112px, 13vw, 208px);
}
section.alt,
section.alt2 {
    background-color: rgba(255, 255, 255, 0.028);
    border-block: 0;
}
section.alt2 {
    background-color: rgba(120, 120, 255, 0.035);
}

/* headings, as Apple does: a small label names the section, the headline says the benefit, large and tight,
   and one grey line under it */
section:not(.hero) .eyebrow {
    margin: 0;
    font: 500 clamp(1rem, 1.3vw, 1.2rem) / 1.2 var(--tf, "Outfit", sans-serif);
    color: var(--acc);
    letter-spacing: 0;
}
section:not(.hero) .head {
    text-align: center;
    justify-items: center;
    gap: 20px;
    margin-bottom: clamp(56px, 7vw, 112px);
}
section:not(.hero) h2 {
    font-size: clamp(2.5rem, 5.4vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
section:not(.hero) .head .lead {
    max-width: 680px;
    margin-inline: auto;
    font-size: clamp(1.08rem, 1.45vw, 1.3rem);
    line-height: 1.45;
    color: color-mix(in srgb, var(--mut) 72%, transparent);
    text-wrap: pretty;
}

/* the lineup: the film centred, the three names below it in a row; a click on a name shows that key */
.lu {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(24px, 3vw, 40px);
}
.luvw {
    width: min(600px, 100%);
}
.lul {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 200px);
    gap: clamp(12px, 3.5vw, 48px) !important;
    justify-content: center;
    overflow: visible !important;
    width: 100%;
}
.lui {
    justify-items: center;
    text-align: center;
}
.lui i {
    margin-inline: auto;
}
@media (max-width: 820px) {
    .lul {
        grid-auto-columns: minmax(0, 1fr);
    }
    .lui span {
        display: none;
    }
}

/* 2. The tap, more natural.
   The phone comes in on a curve from below right, slows, leans into the badge and touches it (a small press),
   then settles back. The badge gives a little at the touch. The card springs up. The tiles leave the phone
   and grow straight to their place, nearest first, with less blur. */
.tap.go .tp-ph {
    animation: tprise 1.35s cubic-bezier(0.25, 0.8, 0.3, 1) 0.45s both;
}
.tap.go .tp-key {
    animation:
        tpnudge 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) 1.45s both,
        tpfloat 4s ease-in-out 2.35s infinite;
}
.tap.go .tp-w {
    animation: tpwave 1.6s ease-out 1.55s both;
}
.tap.go .tp-fl {
    animation: tpflash 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 1.55s both;
}
.tap.go .tp-clip {
    animation: tpclip 1.6s linear 1.8s both;
}
.tap.go .tp-t {
    animation: tpburst 1.25s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--t0, 3.6s) + var(--d, 0s) * 1.3);
}
.tap.go .tp-pc {
    animation: tppc 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(3.05s + var(--pd));
}
@keyframes tprise {
    0% {
        transform: translate(14%, 70%) rotate(10deg);
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    68% {
        transform: translate(-1%, -1%) rotate(-5deg);
    }
    /* the touch: a little closer, then back */
    78% {
        transform: translate(-2.4%, -2%) rotate(-5.6deg) scale(0.985);
        animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
    }
    100% {
        transform: rotate(-4deg);
        opacity: 1;
    }
}
@keyframes tpnudge {
    0% {
        transform: translateY(0) rotate(9deg);
    }
    22% {
        transform: translate(-1.2%, 0.8%) rotate(7.4deg);
    }
    55% {
        transform: translate(0.4%, -0.4%) rotate(9.6deg);
    }
    100% {
        transform: translateY(0) rotate(9deg);
    }
}
@keyframes tpclip {
    0% {
        opacity: 1;
        transform: translateY(110%);
        animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
    }
    20% {
        transform: translateY(-2.5%);
        animation-timing-function: ease-in-out;
    }
    27%,
    68% {
        opacity: 1;
        transform: none;
    }
    86%,
    100% {
        opacity: 0;
        transform: scale(1.03);
    }
}
@keyframes tpburst {
    0% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.18) rotate(var(--r));
        filter: blur(4px);
    }
    35% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}
@keyframes tppc {
    0% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.75);
        filter: blur(3px);
    }
    55% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* 3. Panels: flat and tonal, no outlines, one corner radius */
.wst,
.wsol-it,
.vid,
.jr-main,
.pc2,
.pin,
.pout,
.pstudio,
.cta {
    border-color: transparent !important;
    border-radius: 28px !important;
}
.wst,
.wsol-it,
.pin,
.pout,
.pstudio {
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
}
.jr-main {
    background: rgba(255, 255, 255, 0.035);
}
/* the problem figures: bigger numbers, more room */

/* 4. "What is": one idea, the lanyard large under it */
.wide-lead {
    max-width: 760px !important;
}
.wide-lead b,
.head .lead b {
    color: #fff;
    font-weight: 500;
}
.stage {
    display: grid;
    place-items: center;
    margin-top: clamp(8px, 2vw, 24px);
}
.stage.big .stage-key img {
    width: min(620px, 92vw) !important;
}
.stage-key img {
    width: min(320px, 62vw);
    height: auto;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
    animation: bob 6s ease-in-out infinite alternate;
}

/* 4b. Behind the key, dimmed tiles of what it opens, with the same rounded edge as the experience's tiles:
   the key reads as the way into software, not as an object on its own */
.stage {
    position: relative;
    isolation: isolate;
}
.stage-key {
    position: relative;
    z-index: 1;
}
/* A grid of small dimmed squares across the screen, three rows, a few two squares wide, like the experience's own tiles;
   they fade out toward both edges. The column next to the key is blank and reaches in behind it; the labelled squares sit just beyond. Static. */
section[id$="-what"] {
    overflow-x: clip;
}
.stage-tiles {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: 100vw;
    display: grid;
    --sq: calc((var(--kh, 300px) - 24px) / 3);
    grid-template-columns: repeat(5, var(--sq)) clamp(70px, 7vw, 120px) repeat(5, var(--sq));
    grid-template-rows: repeat(3, var(--sq));
    gap: 12px;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(90deg, transparent 2%, #000 32%, #000 68%, transparent 98%);
    mask: linear-gradient(90deg, transparent 2%, #000 32%, #000 68%, transparent 98%);
}
.stage.big .stage-tiles {
    grid-template-columns: repeat(5, var(--sq)) clamp(220px, 24vw, 380px) repeat(5, var(--sq));
}
.stage-tiles span {
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    place-items: center;
    padding: 8px 12px;
    text-align: center;
}
.stage-tiles i {
    font-style: normal;
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.34);
}
.stage-tiles .st0 {
    grid-area: 1 / 3 / 2 / 4;
}
.stage-tiles .st1 {
    grid-area: 1 / 4 / 2 / 5;
}
.stage-tiles .st2 {
    grid-area: 2 / 3 / 3 / 5;
}
.stage-tiles .st3 {
    grid-area: 3 / 4 / 4 / 5;
}
.stage-tiles .st4 {
    grid-area: 3 / 8 / 4 / 9;
}
.stage-tiles .st5 {
    grid-area: 1 / 8 / 2 / 9;
}
.stage-tiles .st6 {
    grid-area: 1 / 9 / 2 / 10;
}
.stage-tiles .st7 {
    grid-area: 2 / 8 / 3 / 10;
}
.stage-tiles .st8 {
    grid-area: 1 / 1 / 2 / 3;
}
.stage-tiles .st9 {
    grid-area: 1 / 5 / 2 / 6;
}
.stage-tiles .st10 {
    grid-area: 2 / 1 / 3 / 2;
}
.stage-tiles .st11 {
    grid-area: 2 / 2 / 3 / 3;
}
.stage-tiles .st12 {
    grid-area: 3 / 1 / 4 / 2;
}
.stage-tiles .st13 {
    grid-area: 3 / 2 / 4 / 4;
}
.stage-tiles .st14 {
    grid-area: 2 / 5 / 3 / 6;
}
.stage-tiles .st15 {
    grid-area: 3 / 5 / 4 / 6;
}
.stage-tiles .st16 {
    grid-area: 1 / 7 / 2 / 8;
}
.stage-tiles .st17 {
    grid-area: 1 / 10 / 2 / 12;
}
.stage-tiles .st18 {
    grid-area: 2 / 7 / 3 / 8;
}
.stage-tiles .st19 {
    grid-area: 2 / 10 / 3 / 11;
}
.stage-tiles .st20 {
    grid-area: 2 / 11 / 3 / 12;
}
.stage-tiles .st21 {
    grid-area: 3 / 7 / 4 / 8;
}
.stage-tiles .st22 {
    grid-area: 3 / 9 / 4 / 11;
}
.stage-tiles .st23 {
    grid-area: 3 / 11 / 4 / 12;
}
/* on phones: the same varied grid as on computers, running off both sides of the screen and fading out, with smaller
   squares; the key sits in the middle, three rows tall */
@media (max-width: 700px) {
    .stage {
        --kh: calc(3 * min(60px, 15.5vw) + 14px);
        padding-block: 18px;
    }
    .stage-key img {
        width: auto !important;
        height: var(--kh) !important;
    }
    .stage.big .stage-key img {
        height: calc(var(--kh) * 1.2) !important;
    }
    .stage-tiles,
    .stage.big .stage-tiles {
        --sq: min(60px, 15.5vw);
        grid-template-columns: repeat(5, var(--sq)) min(56px, 14vw) repeat(5, var(--sq));
        grid-template-rows: repeat(3, var(--sq));
        gap: 7px;
        -webkit-mask: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%);
        mask: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%);
    }
    .stage-tiles span {
        border-radius: 12px;
        padding: 4px 5px;
    }
    .stage-tiles i {
        font-size: 9.5px;
        line-height: 1.15;
    }
}

/* 5. The problem: three big figures in one quiet panel, the answers under it in plain text */
.panel {
    background: rgba(255, 255, 255, 0.045);
    border-radius: 28px;
    padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 72px);
}
.figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 48px;
    text-align: center;
}
.fig p {
    margin: 0;
}
.fig .n {
    font: 600 clamp(52px, 5.4vw, 76px) / 1 var(--tf, "Outfit", sans-serif);
    letter-spacing: -0.03em;
    color: #fff;
}
.fig .c {
    color: var(--mut);
    opacity: 0.8;
    font-size: 15px;
    line-height: 1.4;
    margin: 12px auto 0;
    max-width: 240px;
}
.answer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 48px;
    margin-top: clamp(64px, 7vw, 104px);
}
.answer h3 {
    font: 600 21px/1.2 var(--tf, "Outfit", sans-serif);
    margin: 0 0 10px;
}
.answer p {
    color: var(--mut);
    opacity: 0.85;
    margin: 0;
}
.srcs {
    margin: clamp(48px, 5vw, 72px) 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--mut);
    opacity: 0.6;
}
@media (max-width: 860px) {
    .figs,
    .answer {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* 6. How it works: one large stage, five steps under it; a bar fills over the step that is showing */
.hw-stage {
    container-type: size;
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 1040px;
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(60% 70% at 50% 60%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%), rgba(255, 255, 255, 0.04);
}
.hw-m {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(1.04) translateY(12px);
    transition:
        opacity 0.8s ease,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.hw-m.on {
    opacity: 1;
    transform: none;
}
.hw-m video,
.hw-m.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hw-m.obj:not(.two) img {
    position: absolute;
    inset: 11% 0;
    margin: auto;
    height: 78%;
    width: auto;
    max-width: 80%;
    object-fit: contain;
}
.hw-m.obj img {
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}
/* the object turns gently while its step is showing */
.hw-m.obj.on img {
    animation: hwturn 5.6s ease-in-out both;
}
/* Order: the three keys arrive together, as a delivery */
.hw-m.cover.on img {
    animation: hwzoom 5.6s ease-out both;
}
@keyframes hwturn {
    from {
        transform: translateY(16px) rotate(-6deg) scale(0.94);
    }
    to {
        transform: translateY(-6px) rotate(3deg) scale(1);
    }
}
@keyframes hwzoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.07);
    }
}
.hw-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 32px);
    max-width: 1040px;
    margin: clamp(32px, 4vw, 48px) auto 0;
}
.hw-steps button {
    appearance: none;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
    display: grid;
    align-content: start;
    gap: 6px;
    opacity: 0.45;
    transition: opacity 0.4s ease;
}
.hw-steps button.on,
.hw-steps button:hover {
    opacity: 1;
}
.hw-steps i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
    margin-bottom: 14px;
}
.hw-steps s {
    display: block;
    height: 100%;
    background: var(--acc);
    transform-origin: 0 50%;
    transform: scaleX(0);
}
.hw-steps .done s {
    transform: scaleX(1);
    opacity: 0.35;
}
@keyframes hwfill {
    to {
        transform: scaleX(1);
    }
}
.hw-steps em {
    font-style: normal;
    font-size: 13px;
    color: var(--mut);
}
.hw-steps b {
    font-size: 19px;
    font-weight: 500;
    color: #fff;
}
.hw-steps span {
    font-size: 14px;
    line-height: 1.4;
    color: var(--mut);
}
@media (max-width: 860px) {
    .hw-stage {
        aspect-ratio: 4 / 3;
    }
    .hw-steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
    }
    .hw-steps span,
    .hw-steps em {
        display: none;
    }
    .hw-steps b {
        font-size: 13px;
        text-align: center;
    }
}

/* 8. The logo band: quieter, so the hero keeps the stage. Smaller, grey, softly faded at both ends. */
.marq {
    padding: clamp(36px, 4vw, 56px) 0 0 !important;
    -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marq .g {
    gap: 72px !important;
    padding-right: 72px !important;
}
.marq .g img {
    height: 36px !important;
    opacity: 0.5 !important;
    filter: grayscale(1) brightness(1.4);
    transition: opacity 0.3s ease;
}
.marq .g img.sm {
    height: 22px !important;
}
.marq:hover .g img {
    opacity: 0.8 !important;
}
@media (max-width: 760px) {
    .marq .g {
        gap: 48px !important;
        padding-right: 48px !important;
    }
    .marq .g img {
        height: 28px !important;
    }
    .marq .g img.sm {
        height: 17px !important;
    }
}

/* 9. The hero, as in the first mock: the solution's logo small on top, the headline large and centred, one line
   under it, then the tap, then the price and the buttons under the picture */
.hero2 .lock:has(.lockup) {
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    width: 100% !important;
    max-width: none !important;
}
.hero2 .lockup {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 clamp(16px, 2vw, 24px) !important;
    align-self: center;
}
.hero2 .lockup img {
    height: clamp(24px, 2.4vw, 32px);
}
.hero2 h1 {
    font-size: clamp(2.7rem, 7vw, 5.6rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.02em;
    min-width: 0 !important;
}
.hero2 .lock .rest {
    grid-column: 1 !important;
    contain: none !important;
    margin-top: clamp(14px, 1.6vw, 22px);
}
.hero2 .tag {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: var(--mut);
    opacity: 0.85;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.hero2 .heroimg {
    margin-top: clamp(36px, 5vw, 72px);
}
.hcta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 28px;
    padding-top: clamp(24px, 3vw, 40px);
}
.hprice {
    color: var(--mut);
    opacity: 0.85;
}
.hmore {
    color: var(--acc);
    text-decoration: none;
}
.hmore::after {
    content: " ›";
}
@media (max-width: 700px) {
    .hero2 .lockup {
        border: 0 !important;
    }
    .hcta {
        flex-direction: column;
        gap: 14px;
    }
}

/* 7. The calculator, cleaner: the two steps on the left, the total on the right (in view while you choose),
   what every pack includes underneath, the Design Studio in one quiet line */
.pcalc.pcx {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}
.pcx .pin,
.pcx .pout {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.pcx .pin {
    display: grid;
    gap: clamp(36px, 4vw, 56px);
}
.pcx .pkeys {
    display: grid;
    gap: 22px;
    border: 0;
    padding: 0;
    margin: 0;
}
.pc3-k {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    font-weight: 500;
    color: #fff;
}
.pc3-k i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-style: normal;
    font-size: 0.85rem;
    color: var(--acc);
}
.pcx .pks {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.pcx .pk {
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    padding: 18px 16px;
    opacity: 1;
    transition:
        box-shadow 0.25s ease,
        background 0.25s ease;
}
.pcx .pk:hover {
    background: rgba(255, 255, 255, 0.06);
}
.pcx .pk.on {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 2px var(--acc);
}
.pcx .pk img {
    height: 120px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pcx .pk.on img {
    transform: translateY(-4px) scale(1.04);
}
.pcx .pk img[src*="stamp_round"] {
    transform: scale(0.72);
}
.pcx .pk img[src*="keychain"] {
    transform: scale(0.7);
}
.pcx .pk b,
.pcx .pk small {
    padding: 0;
}
.pcx .pk small {
    opacity: 0.8;
}
.pcx .pdesc {
    background: none;
    padding: 0;
    font-size: 1rem;
}
.pcx .pdesc b {
    color: #fff;
}
.pcx .pkeep {
    border: 0 !important;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04) !important;
}
.pcx .pn {
    gap: 14px;
    max-width: 560px;
}
.pcx .pstep {
    gap: 14px;
}
.pcx .pstep button {
    border: 0;
    background: rgba(255, 255, 255, 0.07);
}
.pcx .pstep button:hover {
    background: rgba(255, 255, 255, 0.14);
}
.pcx .pstep input {
    width: 3.6em;
    height: auto;
    border: 0;
    font-size: clamp(2.6rem, 4vw, 3.4rem);
    letter-spacing: -0.02em;
}
.pcx .prange {
    height: 4px;
}
.pcx .prange::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    border: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.pcx .prange::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: 0;
    background: #fff;
}
.pcx .pout {
    position: sticky;
    top: 120px;
    display: grid;
    gap: 26px;
    padding: clamp(28px, 3vw, 40px) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
.pcx .pk-k {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
}
.pcx .ptotal {
    font-weight: 600;
    letter-spacing: -0.035em;
    font-size: clamp(3.2rem, 5vw, 4.4rem);
}
.pcx .plines {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}
.pcx .pout .btn {
    background: #fff !important;
    color: #0b0f1c !important;
    border: 0 !important;
}
/* included in every pack, under the calculator */
.bench .pinc {
    margin-top: clamp(48px, 5vw, 72px);
    padding-top: clamp(40px, 4vw, 56px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 26px;
}
.bench .pinc ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 40px;
}
.bench .pinc li {
    display: grid;
    gap: 3px;
    padding-left: 32px;
}
.bench .pinc li span {
    font-size: 0.9rem;
    opacity: 0.8;
}
/* the Design Studio, one quiet line */
.pfoot {
    text-align: center;
    max-width: 720px;
    margin-inline: auto !important;
    opacity: 0.6;
}
@media (max-width: 960px) {
    .pcalc.pcx {
        grid-template-columns: 1fr;
    }
    .pcx .pout {
        position: static;
    }
    .bench .pinc ul {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* fixes for the pages with four steps or four figures, and the lines under the calculator */
.srcs {
    max-width: 760px !important;
    margin-inline: auto !important;
}
.hw-steps {
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}
.hw-stage {
    background-color: #000;
}
.bench .pinc .pk-k {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
}

/* 10. One screen per section, on computers: every section is at least as tall as the screen, its content centred,
   and headings, pictures and spacing follow the screen's height so the whole section fits in view. Phones keep
   the natural flow, since stacked content cannot fit one phone screen. */
@media (min-width: 861px) {
    main section:not(.hero),
    section.pinc-sec {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* the top clears the floating menu bar */
        padding-top: clamp(84px, 11vh, 112px) !important;
        padding-bottom: clamp(28px, 5vh, 72px) !important;
        box-sizing: border-box;
    }
    section:not(.hero) .head {
        margin-bottom: clamp(20px, 4.5vh, 64px) !important;
        gap: clamp(8px, 1.6vh, 20px) !important;
    }
    section:not(.hero) h2 {
        font-size: clamp(2rem, min(5vw, 6.2vh), 4.4rem) !important;
    }
    section:not(.hero) .head .lead {
        font-size: clamp(1rem, min(1.4vw, 2.2vh), 1.3rem) !important;
    }
    /* hero: the headline and the tap share one screen */
    .hero2 {
        min-height: 100svh;
        box-sizing: border-box;
        padding-bottom: clamp(12px, 2.5vh, 40px) !important;
    }
    .hero2 h1 {
        font-size: clamp(2.2rem, min(6.4vw, 7.6vh), 5.6rem) !important;
    }
    .hero2 .heroimg {
        margin-top: clamp(16px, 3.5vh, 56px) !important;
    }
    .hero2 .heroimg .tap {
        width: min(100%, 40vh * 2600 / 1014) !important;
        margin-inline: auto;
    }
    .hero2 .vband video,
    .hero2 .vband {
        max-height: 38vh;
    }
    .hero2.hv .vband {
        margin-top: clamp(16px, 3.5vh, 48px);
    }
    .hcta {
        padding-top: clamp(12px, 2.5vh, 32px) !important;
    }
    .hero2 .lockup {
        margin-bottom: clamp(10px, 1.6vh, 20px) !important;
    }
    .hero2 .lock .rest {
        margin-top: clamp(8px, 1.4vh, 20px) !important;
    }
    /* what is */
    .stage {
        --kh: clamp(260px, 42vh, 400px);
    }
    .stage.big {
        --kh: clamp(260px, 44vh, 460px);
    }
    .stage-key img,
    .stage.big .stage-key img {
        width: auto !important;
        height: var(--kh) !important;
    }
    .wide-lead {
        font-size: clamp(1rem, min(1.35vw, 2.1vh), 1.2rem) !important;
    }
    /* the problem */
    .panel {
        padding: clamp(24px, 5vh, 64px) clamp(24px, 4vw, 64px) !important;
    }
    .fig .n {
        font-size: clamp(2.6rem, min(5vw, 7vh), 4.6rem) !important;
    }
    .answer {
        margin-top: clamp(28px, 6vh, 88px) !important;
    }
    .srcs {
        margin-top: clamp(20px, 4vh, 56px) !important;
    }
    /* how it works */
    .hw-stage {
        aspect-ratio: auto !important;
        height: clamp(200px, min(40vh, 100vh - 510px), 560px);
        max-width: min(1040px, max(200px, min(40vh, 100vh - 510px)) * 16 / 9);
    }
    .hw-steps {
        max-width: min(1040px, 100%);
        margin-top: clamp(16px, 3.5vh, 44px) !important;
    }
    /* use cases: less padding inside the panel on shorter screens */
    .jr-uc .jr-stage {
        aspect-ratio: auto !important;
        min-height: 0 !important;
        height: clamp(260px, 100vh - 340px, 505px);
    }
    .jr.jr-uc {
        gap: clamp(12px, 2.4vh, 36px) !important;
    }
    .jr-uc .jr-m {
        gap: clamp(6px, 1.2vh, 14px) !important;
    }
    .jr-uc .jr-m p {
        font-size: clamp(0.9rem, 1.9vh, 1rem);
    }
    .jr-uc .jr-txt {
        padding-block: clamp(16px, 4vh, 52px) !important;
    }
    .jr-uc .jr-top {
        margin-bottom: clamp(8px, 1.6vh, 20px);
    }
    .jr-uc .jr-pts li {
        padding-block: clamp(3px, 0.8vh, 12px) !important;
    }
    .jr-uc .jr-pts {
        margin-top: 0 !important;
    }
    .jr-uc .jr-m h3 {
        font-size: clamp(1.3rem, min(2vw, 3.4vh), 1.9rem) !important;
    }
    .jr-uc .jr-main img,
    .jr-uc .jr-v img {
        max-height: 38vh;
        width: auto;
    }
    /* the scene picture on Sports */
    /* components: slightly taller cards, so the text ends with room under it; the names stay level on the three cards */
    /* lineup */
    .luvw {
        width: min(600px, 44vh * 1280 / 1080) !important;
    }
    /* pricing: smaller key cards and number, so the two steps and the total fit beside each other */
    .pcx .pk {
        padding: 12px 14px !important;
    }
    .pcx .pk img {
        height: min(8vh, 90px) !important;
    }
    .pcx .pk small {
        font-size: 0.78rem;
    }
    .pcx .pdesc {
        font-size: 0.92rem !important;
    }
    .pcx .pkeep {
        padding-block: 10px !important;
    }
    .pcx .pkeep img {
        height: min(7vh, 64px) !important;
        width: auto !important;
    }
    .pcx .pn {
        gap: 6px !important;
    }
    .pcx .pin {
        gap: clamp(20px, 3.5vh, 44px) !important;
    }
    .pcx .pstep input {
        font-size: clamp(2rem, min(3.4vw, 5vh), 3rem) !important;
    }
    .pcx .ptotal {
        font-size: clamp(2.6rem, min(4.4vw, 6.4vh), 4.2rem) !important;
    }
    /* Weddings: the number and The Keepsake Set side by side, under the keys */
    .pcx .pin:has(.pkeep) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }
    .pcx .pin:has(.pkeep) .pkeys {
        grid-column: 1 / -1;
    }
    .bench .pinc {
        margin-top: 0 !important;
        border-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* 11. Pricing, the benchmark first: one experience, the starting price large, the 200 keys included highlighted,
   and what every pack includes beside it; the calculator follows on its own screen */
.bench {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
    padding: clamp(32px, 4vw, 56px);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.045);
}
.bench-top {
    display: grid;
    gap: 10px;
    justify-items: start;
}
.bench-top p {
    margin: 0;
}
.bench-k {
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    font-weight: 500;
    color: #fff;
}
.bench-p {
    font-size: clamp(3.4rem, 6vw, 5rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.bench-p small {
    font-size: 0.32em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--mut);
    margin-right: 6px;
    vertical-align: 0.9em;
}
.bench-inc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--acc) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent);
    color: #fff;
    font-weight: 500;
    font-size: 0.98rem;
}
.bench-inc::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acc);
}
.bench-x {
    color: var(--mut);
    opacity: 0.85;
    font-size: 0.92rem;
}
.bench-top .btn {
    margin-top: 14px;
    background: #fff !important;
    color: #0b0f1c !important;
    border: 0 !important;
    min-width: 200px;
}
.bench .pinc {
    margin: 0 !important;
    padding: 0 0 0 clamp(24px, 4vw, 56px) !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 18px;
}
.bench .pinc ul {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}
@media (max-width: 860px) {
    .bench {
        grid-template-columns: 1fr;
    }
    .bench .pinc {
        padding: 24px 0 0 !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
}

.pc3-studio {
    margin: clamp(28px, 4vh, 56px) auto 0;
    text-align: center;
    max-width: 760px;
    color: var(--mut);
    font-size: 1rem;
    line-height: 1.5;
}
.pc3-studio a {
    color: var(--acc);
    white-space: nowrap;
    text-decoration: none;
}
.pc3-studio a::after {
    content: " ›";
}
section[id$="-pricing"] .pfoot {
    margin-top: 10px !important;
    font-size: 12px;
}

/* on computers every section is one screen and already clears the menu bar inside it: a menu link lands it exactly */
@media (min-width: 861px) {
    html {
        scroll-padding-top: 0;
    }
}

/* the starting price card: "Start creating" and the button that opens the calculator, side by side */
.bench-top .btn.sec {
    margin-top: 0;
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    min-width: 200px;
}
.bench-top {
    grid-template-columns: auto;
}
/* the calculator, in a panel over the page */
.calc-dlg {
    width: min(1120px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: clamp(28px, 4vw, 56px);
    border: 0;
    border-radius: 28px;
    background: color-mix(in srgb, var(--bg) 88%, #fff 12%);
    color: var(--ink);
    overflow: auto;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.calc-dlg::backdrop {
    background: rgba(5, 6, 12, 0.66);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.calc-dlg .head {
    margin-bottom: clamp(24px, 3vw, 40px) !important;
}
.calc-dlg h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem) !important;
}
.calc-x {
    position: sticky;
    top: 0;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
}
.calc-x:hover {
    background: rgba(255, 255, 255, 0.18);
}
.calc-dlg .pcx .pout {
    position: static;
}
/* The Keepsake Set on its own full row, under the number */
.calc-dlg .pcx .pin:has(.pkeep) {
    grid-template-columns: 1fr !important;
}
.calc-dlg .pcx .pkeep {
    display: grid !important;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px !important;
}
.calc-dlg .pcx .pkeep img {
    height: 64px !important;
    width: auto !important;
}
@media (max-width: 700px) {
    .calc-dlg {
        width: calc(100% - 20px);
        padding: 22px 18px;
    }
    .calc-dlg .pcx .pkeep {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
    }
    .calc-dlg .pcx .pkeep img {
        display: none !important;
    }
    /* the tick, the name and the price on one row */
    .calc-dlg .pcx .pkeep span {
        grid-column: auto;
        order: 0;
    }
}
/* the pricing card follows the screen's height too, so the card, the Design Studio line and the small print fit */
@media (min-width: 861px) {
    .bench {
        padding: clamp(20px, 4vh, 56px) clamp(24px, 4vw, 56px);
    }
    .bench .pinc ul {
        gap: clamp(6px, 1.3vh, 14px) !important;
    }
    .bench-p {
        font-size: clamp(2.8rem, min(6vw, 8.5vh), 5rem);
    }
    .bench-top {
        gap: clamp(6px, 1.1vh, 10px);
    }
    section[id$="-pricing"] .pc3-studio {
        margin-top: clamp(14px, 3vh, 56px);
    }
}
@media (min-width: 861px) {
    .bench .pinc li span {
        font-size: 0.85rem;
    }
    .bench .pinc {
        gap: clamp(10px, 2vh, 18px) !important;
    }
    /* Sports: the film under the headline gives way first on short screens */
    .hero2.hv .vband,
    .hero2.hv .vband video {
        max-height: clamp(150px, 100vh - 530px, 38vh) !important;
    }
}

/* phones: the tap pictures (the heroes, and Sports' "What is") are shown larger, with their sides cropped, so the phone
   and the experience read at a useful size; the outer tiles are the ones cut off */
@media (max-width: 700px) {
    .hero2 .heroimg {
        overflow: hidden;
    }
    .hero2 .heroimg .tap {
        width: 170% !important;
        margin-left: -35%;
    }
}