/*! Amplio | Digital Marketing & Growth Agency HTML Template | Netmakers */
@font-face {
    font-family: "Inter Display";
    src: url("../fonts/InterDisplay-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Inter Display";
    src: url("../fonts/InterDisplay-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Inter Display";
    src: url("../fonts/InterDisplay-LightItalic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Inter Display Fallback";
    src: local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");
    font-weight: 700;
    size-adjust:96.07%;ascent-override:100.97%;descent-override:24.98%;line-gap-override:0%}

@font-face {
    font-family: "Inter Display Fallback";
    src: local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");
    font-weight: 500;
    size-adjust:99.2%;ascent-override:97.78%;descent-override:24.19%;line-gap-override:0%}

@font-face {
    font-family: "Inter Display Fallback";
    src: local("Arial Italic"),local("Arial-ItalicMT"),local("Liberation Sans Italic"),local("LiberationSans-Italic");
    font-weight: 300;
    font-style: italic;
    size-adjust:95.13%;ascent-override:101.97%;descent-override:25.23%;line-gap-override:0%}

@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");
    font-weight: 400;
    size-adjust:106.45%;ascent-override:91.12%;descent-override:22.55%;line-gap-override:0%}

@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans");
    font-weight: 500;
    size-adjust:107.54%;ascent-override:90.2%;descent-override:22.32%;line-gap-override:0%}

@font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");
    font-weight: 600 700;
    size-adjust:101.16%;ascent-override:95.89%;descent-override:23.72%;line-gap-override:0%}

:root {
    --brand: #6d4aff;
    --brand-2: #6d4aff;
    --coral: #ff7a59;
    --brand-2-text: color-mix(in srgb,var(--brand-2) 80%,#000);
    --paper: #f5f2eb;
    --ink: #121212;
    --surface: #ffffff;
    --surface-2: #ece8de;
    --text: var(--ink);
    --muted: #5d5a54;
    --line: rgba(18,18,18,.12);
    --on-brand-2: #ffffff;
    --font-display: "Inter Display","Inter Display Fallback","Inter","Segoe UI",system-ui,sans-serif;
    --font-body: "Inter","Inter Fallback","Segoe UI",system-ui,-apple-system,sans-serif;
    --radius: 22px;
    --radius-sm: 14px;
    --shadow: 0 1px 2px rgba(18,18,18,.04),0 12px 32px -12px rgba(18,18,18,.18);
    --container-max: 1280px;
    --bs-body-font-family: var(--font-body);
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--text);
    --bs-border-color: var(--line);
    --bs-link-color-rgb: 18,18,18
}

[data-bs-theme="dark"] {
    --paper: #0e0e10;
    --surface: #17171a;
    --surface-2: #1f1f23;
    --text: #f3f1ec;
    --muted: #a3a09a;
    --line: rgba(243,241,236,.12);
    --shadow: 0 1px 2px rgba(0,0,0,.3),0 16px 40px -16px rgba(0,0,0,.7);
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--text);
    --bs-link-color-rgb: 243,241,236
}

html {
    scroll-behavior: smooth
}

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

body {
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

.container {
    max-width: var(--container-max)
}

[data-bs-theme="light"] {
    --bs-code-color: #b3246b;
    --bs-form-invalid-color: #b02a37;
    --bs-form-valid-color: #166534
}

.bg-ink code,.mo-demo-zone code {
    --bs-code-color: #f29ac6
}

h1,h2,h3,h4,h5,.display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.04
}

h1 {
    font-size: clamp(2.75rem,6.4vw,5.6rem)
}

h2 {
    font-size: clamp(2.1rem,4.4vw,3.6rem)
}

h3 {
    font-size: 1.45rem;
    letter-spacing: -.02em;
    line-height: 1.2
}

.lead {
    font-size: 1.2rem;
    color: var(--muted)
}

.text-muted-2 {
    color: var(--muted) !important
}

em.serif,.serif {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    letter-spacing: -.03em
}

a {
    color: inherit;
    text-decoration-color: color-mix(in srgb,currentColor 35%,transparent);
    text-underline-offset: 3px
}

a:hover {
    color: inherit
}

::selection {
    background: var(--brand);
    color: var(--ink)
}

:focus-visible {
    outline: 3px solid var(--brand-2);
    outline-offset: 3px
}

:focus-visible:where(:not(.btn)) {
    border-radius: 6px
}

section {
    position: relative
}

.section {
    padding-block:clamp(4.5rem,9vw,8rem)}

.section-head {
    max-width: 760px;
    margin-bottom: clamp(2.5rem,5vw,4rem)
}

.btn {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: .85rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    transition: transform .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease
}

.btn:hover {
    transform: translateY(-2px)
}

.btn .bi {
    transition: transform .2s ease
}

.btn:hover .bi-arrow-up-right {
    transform: translate(2px,-2px)
}

.btn-brand {
    background: var(--brand);
    color: var(--ink);
    border: 0
}

.btn-brand:hover,.btn-brand:focus-visible {
    background: var(--ink);
    color: var(--brand)
}

[data-bs-theme="dark"] .btn-brand:hover {
    background: #fff;
    color: var(--ink)
}

.btn-ink {
    background: var(--ink);
    color: #fff;
    border: 0
}

.btn-ink:hover {
    background: var(--brand-2);
    color: #fff
}

[data-bs-theme="dark"] .btn-ink {
    background: #fff;
    color: var(--ink)
}

[data-bs-theme="dark"] .btn-ink:hover {
    background: var(--brand)
}

.btn-line {
    border: 1.5px solid var(--text);
    color: var(--text);
    background: transparent
}

.btn-line:hover {
    background: var(--text);
    color: var(--paper)
}

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%
}

.btn:focus-visible {
    outline: 3px solid var(--brand-2);
    outline-offset: 3px;
    box-shadow: none
}

[data-bs-theme="dark"] .btn:focus-visible {
    outline-color: var(--brand)
}

.btn-ink:focus-visible {
    background: var(--brand-2);
    color: #fff
}

[data-bs-theme="dark"] .btn-ink:focus-visible {
    background: var(--brand);
    color: var(--ink)
}

.btn-line:focus-visible {
    background: var(--text);
    color: var(--paper);
    border-color: var(--text)
}

.theme-toggle:focus-visible,.shop-heart:focus-visible,.shop-qv:focus-visible,.shop-remove:focus-visible {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--line)
}

.shop-heart[aria-pressed="true"]:focus-visible {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--ink)
}

.accordion-button:focus-visible {
    outline: 3px solid var(--brand-2);
    outline-offset: -3px
}

[data-bs-theme="dark"] .accordion-button:focus-visible {
    outline-color: var(--brand)
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    border: 1px solid var(--line);
    background: var(--surface)
}

.pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-2);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 22%,transparent)
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.25rem
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: currentColor
}

.tag {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    background: var(--surface-2)
}

.mark-brand {
    background: linear-gradient(transparent 58%,var(--brand) 58%,var(--brand) 92%,transparent 92%);
    padding-inline:.08em}

[data-bs-theme="dark"] .mark-brand {
    background: none;
    color: var(--brand)
}

.card-soft {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius)
}

.bg-ink {
    background: var(--ink);
    color: #f3f1ec;
    --muted: #a3a09a;
    --line: rgba(255,255,255,.12);
    --surface: #1b1b1e;
    --surface-2: #26262a
}

[data-bs-theme="dark"] .bg-ink {
    background: #050506
}

.bg-surface-2 {
    background: var(--surface-2)
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-block:.9rem;transition: background-color .25s ease,box-shadow .25s ease,padding .25s ease
}

.site-header.is-scrolled {
    background: color-mix(in srgb,var(--paper) 86%,transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 1px 0 var(--line);
    padding-block:.55rem}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.04em;
    text-decoration: none
}

.brand-mark {
    width: 34px;
    height: 34px;
    flex: none
}

.brand-mark .bm-bg {
    fill: var(--ink)
}

.brand-mark .bm-wave {
    stroke: var(--brand)
}

[data-bs-theme="dark"] .brand-mark .bm-bg {
    fill: var(--brand)
}

[data-bs-theme="dark"] .brand-mark .bm-wave {
    stroke: var(--ink)
}

.main-nav {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .3rem;
    gap: .1rem
}

.main-nav .nav-link {
    color: var(--text);
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem 1rem !important;
    border-radius: 999px
}

.main-nav .nav-link:hover,.main-nav .nav-link.active {
    background: var(--surface-2)
}

.main-nav .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: .5rem;
    margin-top: .6rem !important;
    background: var(--surface);
    min-width: 15rem
}

.main-nav .dropdown-item {
    border-radius: 10px;
    padding: .55rem .8rem;
    color: var(--text);
    display: flex;
    gap: .7rem;
    align-items: center
}

.main-nav .dropdown-item:hover {
    background: var(--surface-2)
}

.main-nav .dropdown-item .bi {
    color: var(--brand-2)
}

.theme-toggle {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text)
}

.theme-toggle:hover {
    background: var(--surface-2);
    color: var(--text)
}

.theme-toggle .bi-sun {
    display: none
}

[data-bs-theme="dark"] .theme-toggle .bi-sun {
    display: inline
}

[data-bs-theme="dark"] .theme-toggle .bi-moon-stars {
    display: none
}

.navbar-toggler {
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--text)
}

.navbar-toggler:focus {
    box-shadow: none
}

.offcanvas {
    background: var(--paper);
    color: var(--text)
}

.offcanvas .nav-link {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -.03em;
    padding-block:.45rem;color: var(--text);
    border-bottom: 1px solid var(--line)
}

@media (max-width: 991.98px) {
    .main-nav {
        display:none !important
    }
}

.hero {
    padding-top: clamp(2rem,5vw,4rem);
    padding-bottom: clamp(3rem,6vw,5rem)
}

.hero h1 {
    margin-block:1.4rem 1.6rem}

.hero .lead {
    max-width: 34rem
}

.avatar-stack {
    display: flex
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: .85rem;
    border: 3px solid var(--paper);
    color: var(--ink);
    flex: none
}

.avatar-stack .avatar + .avatar {
    margin-inline-start:-12px}

.av-1 {
    background: var(--brand)
}

.av-2 {
    background: color-mix(in srgb,var(--brand-2) 38%,#fff)
}

.av-3 {
    background: color-mix(in srgb,var(--coral) 45%,#fff)
}

.av-4 {
    background: var(--ink);
    color: #fff
}

.rating .bi-star-fill {
    color: #f5a623;
    font-size: .85rem
}

.hero {
    overflow: hidden
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.hero-bg .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55
}

.hero-bg .b1 {
    width: 520px;
    height: 520px;
    background: var(--brand);
    right: -120px;
    top: -160px
}

.hero-bg .b2 {
    width: 420px;
    height: 420px;
    background: color-mix(in srgb,var(--brand-2) 38%,#fff);
    left: -180px;
    bottom: -200px;
    opacity: .5
}

[data-bs-theme="dark"] .hero-bg .blob {
    opacity: .22
}

.hero-bg .grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at 70% 40%,#000 10%,transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%,#000 10%,transparent 65%);
    opacity: .7
}

.ph {
    background: linear-gradient(135deg,#d9d2c3,#ebe6da);
    overflow: hidden
}

[data-bs-theme="dark"] .ph {
    background: linear-gradient(135deg,#222226,#2c2c31)
}

.ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

img.is-broken {
    opacity: 0
}

.hero-art {
    position: relative;
    aspect-ratio: 1 / 1.02;
    max-width: 600px;
    margin-inline:auto}

.ha-shape {
    position: absolute;
    inset: 6% 0 0 14%;
    background: var(--brand-2);
    border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
    animation: morph 14s ease-in-out infinite
}

@keyframes morph {
    50% {
        border-radius: 58% 42% 55% 45% / 42% 58% 42% 58%
    }
}

.ha-photo {
    position: absolute;
    inset: 0 8% 8% 6%;
    border-radius: 260px 260px 32px 32px;
    z-index: 1;
    box-shadow: var(--shadow)
}

.ha-photo-sm {
    position: absolute;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    left: -4%;
    bottom: 4%;
    z-index: 3;
    border: 6px solid var(--paper)
}

.ha-card {
    position: absolute;
    z-index: 3;
    right: -2%;
    top: 46%;
    background: var(--surface);
    border-radius: 18px;
    padding: .85rem 1.1rem;
    display: flex;
    gap: .8rem;
    align-items: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--line)
}

.ha-card .ha-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.2rem
}

.ha-card .v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    line-height: 1
}

.ha-card .k {
    font-size: .8rem;
    color: var(--muted)
}

.ha-chip {
    position: absolute;
    z-index: 3;
    left: 4%;
    top: 16%;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: .55rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: var(--shadow)
}

.ha-chip .bi {
    color: var(--coral)
}

[data-bs-theme="dark"] .ha-chip {
    background: #fff;
    color: var(--ink)
}

.ha-squiggle {
    position: absolute;
    z-index: 2;
    width: 150px;
    left: -16%;
    top: 40%;
    fill: none;
    stroke: var(--text);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.spark {
    position: absolute;
    fill: var(--brand);
    z-index: 3
}

.spark.s1 {
    width: 46px;
    right: 22%;
    bottom: 2%;
    animation: twinkle 3s ease-in-out infinite
}

.spark.s2 {
    width: 26px;
    left: 16%;
    top: 2%;
    fill: var(--coral);
    animation: twinkle 3s ease-in-out -1.5s infinite
}

@keyframes twinkle {
    50% {
        transform: scale(.7) rotate(45deg)
    }
}

.hv-sticker {
    position: absolute;
    z-index: 4;
    right: 0;
    top: -2%;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    animation: spin 18s linear infinite
}

.hv-sticker svg {
    width: 100%;
    height: 100%
}

.hv-sticker text {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    fill: var(--ink)
}

.hv-sticker .bi {
    position: absolute;
    font-size: 1.8rem;
    animation: spin 18s linear infinite reverse
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.float-a {
    animation: floaty 6s ease-in-out infinite
}

.float-b {
    animation: floaty 7s ease-in-out -2s infinite
}

@keyframes floaty {
    50% {
        transform: translateY(-10px)
    }
}

@media (max-width: 575.98px) {
    .hv-sticker {
        width:88px;
        height: 88px
    }

    .ha-squiggle {
        display: none
    }

    .ha-card {
        right: 0;
        padding: .6rem .8rem
    }

    .ha-card .v {
        font-size: 1.2rem
    }
}

.logos {
    border-block:1px solid var(--line);padding-block: 1.6rem;
    overflow: hidden
}

.logos-label {
    font-size: .85rem;
    color: var(--muted)
}

.marquee {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: marquee 32s linear infinite
}

.marquee:hover {
    animation-play-state: paused
}

.marquee-wrap {
    overflow: hidden;
    mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}

.client {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -.03em;
    color: var(--muted);
    white-space: nowrap
}

.client .bi {
    font-size: 1.4rem
}

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

.band-wrap {
    overflow: hidden;
    padding-block:1.5rem;margin-block:0 -1rem}

.band {
    background: var(--brand);
    color: var(--ink);
    padding-block:1.1rem;transform: rotate(-2deg);
    position: relative;
    margin-inline:-2%;z-index: 2;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--brand)
}

.band-track {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: max-content;
    animation: marquee 30s linear infinite
}

.band-track span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem,3vw,2.6rem);
    letter-spacing: -.03em;
    white-space: nowrap
}

.band-track .spark {
    position: static;
    width: 30px;
    fill: var(--ink);
    flex: none
}

.srv-list {
    border-top: 1px solid var(--line)
}

.srv-row {
    display: grid;
    grid-template-columns: 70px 1.1fr 1.3fr 220px 56px;
    gap: 2rem;
    align-items: center;
    padding-block:2rem;border-bottom: 1px solid var(--line);
    text-decoration: none;
    position: relative;
    transition: padding .35s ease
}

.srv-row::before {
    content: "";
    position: absolute;
    inset: 0 -1.5rem;
    border-radius: var(--radius);
    background: var(--surface);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: -1
}

.srv-row:hover::before {
    opacity: 1
}

.srv-num {
    font-weight: 600;
    color: var(--muted)
}

.srv-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.7rem,3vw,2.6rem);
    letter-spacing: -.035em;
    line-height: 1.05;
    transition: transform .35s ease
}

.srv-row:hover .srv-title {
    transform: translateX(8px)
}

.srv-desc {
    color: var(--muted);
    font-size: 1rem
}

.srv-img {
    height: 150px;
    border-radius: 18px;
    transform: rotate(-3deg) scale(.92);
    opacity: 1;
    transition: transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease
}

.srv-row:hover .srv-img,.srv-row:focus-visible .srv-img {
    opacity: 1;
    transform: rotate(3deg) scale(1)
}

.srv-go {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    transition: all .35s ease
}

.srv-row:hover .srv-go {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink);
    transform: rotate(45deg)
}

@media (max-width: 991.98px) {
    .srv-row {
        grid-template-columns:1fr 120px;
        gap: 1rem 1.5rem
    }

    .srv-num {
        grid-column: 1 / -1
    }

    .srv-title {
        grid-column: 1
    }

    .srv-img {
        grid-column: 2;
        grid-row: 2 / span 2;
        opacity: 1;
        transform: none;
        height: 110px
    }

    .srv-desc {
        grid-column: 1
    }

    .srv-go {
        display: none
    }

    .srv-row::before {
        inset: 0
    }

    .srv-row:hover .srv-img {
        transform: none
    }
}

.statement {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.7rem,3.4vw,2.9rem);
    line-height: 1.18;
    letter-spacing: -.03em
}

.statement .chip-inline {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    width: 1.6em;
    height: .95em;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-size: .8em;
    margin-inline:.1em}

.statement .chip-inline.v {
    background: var(--brand-2);
    color: #fff
}

.statement .faded {
    color: var(--muted)
}

.stat {
    border-top: 1px solid var(--line);
    padding-top: 1.4rem
}

.stat .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem,5vw,4.2rem);
    letter-spacing: -.05em;
    line-height: 1
}

.stat .n sup {
    font-size: .45em;
    top: -1.1em;
    color: var(--brand-2)
}

.bg-ink .stat .n sup {
    color: var(--brand)
}

.about {
    overflow: hidden
}

.grain {
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none
}

.about::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    right: -200px;
    top: -250px;
    background: radial-gradient(circle,color-mix(in srgb,var(--brand-2) 55%,transparent),transparent 65%);
    pointer-events: none
}

.text-brand {
    color: var(--brand)
}

.collage {
    position: relative;
    aspect-ratio: 1 / .92
}

.collage figure {
    position: absolute;
    border-radius: 24px
}

.collage .c1 {
    left: 0;
    top: 0;
    width: 56%;
    height: 78%;
    border-radius: 200px 200px 24px 24px
}

.collage .c2 {
    right: 0;
    top: 10%;
    width: 40%;
    height: 40%
}

.collage .c3 {
    right: 6%;
    bottom: 0;
    width: 46%;
    height: 44%;
    border-radius: 50%;
    border: 6px solid var(--ink)
}

[data-bs-theme="dark"] .collage .c3 {
    border-color: #050506
}

.c-badge {
    position: absolute;
    left: 8%;
    bottom: 2%;
    background: var(--brand);
    color: var(--ink);
    border-radius: 20px;
    padding: 1rem 1.2rem;
    display: flex;
    gap: .7rem;
    align-items: center;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
    z-index: 2
}

.c-badge .n {
    font-family: var(--font-display);
    font-size: 2.6rem;
    letter-spacing: -.05em;
    line-height: 1
}

.spark.s3 {
    width: 40px;
    left: 52%;
    top: 0
}

.case {
    display: block;
    text-decoration: none
}

.case-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    margin-bottom: 1.3rem;
    isolation: isolate
}

.case-lg .case-media {
    aspect-ratio: 4 / 3.35
}

.case-media img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.case:hover .case-media img {
    transform: scale(1.05)
}

.case-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%)
}

.case-metric {
    position: absolute;
    z-index: 2;
    top: 1rem;
    left: 1rem;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .9rem
}

.case-metric b {
    color: var(--brand)
}

.case-go {
    position: absolute;
    z-index: 2;
    right: 1rem;
    bottom: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    transform: scale(.6);
    opacity: 0;
    transition: all .35s ease
}

.case:hover .case-go {
    transform: scale(1);
    opacity: 1
}

.case:hover h3 {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px
}

.member-img {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    margin-bottom: 1rem
}

.member-img img {
    filter: grayscale(1);
    transition: filter .4s ease,transform .6s ease
}

.member:hover .member-img img {
    filter: none;
    transform: scale(1.04)
}

.member-img::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background: var(--brand);
    z-index: 0;
    transition: height .4s ease
}

.member-social {
    position: absolute;
    z-index: 2;
    left: 1rem;
    bottom: 1rem;
    display: flex;
    gap: .4rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all .3s ease
}

.member:hover .member-social,.member:focus-within .member-social {
    opacity: 1;
    transform: none
}

.member-social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    text-decoration: none
}

.member figcaption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -.02em
}

.member figcaption span {
    color: var(--muted);
    font-size: .92rem
}

@media (hover: none) {
    .member-img img {
        filter:none
    }

    .member-social {
        opacity: 1;
        transform: none
    }
}

.step {
    padding: 1.8rem;
    height: 100%
}

.step .no {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: var(--font-display);
    border: 1.5px solid var(--line);
    margin-bottom: 2.5rem
}

.step:hover .no {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.step .dur {
    font-size: .82rem;
    color: var(--muted)
}

.calc {
    border-radius: 32px;
    padding: clamp(1.6rem,4vw,3.2rem)
}

.calc .form-range {
    --track: color-mix(in srgb,var(--brand) calc(var(--p,30) * 1%),rgba(255,255,255,.18) 0);
    height: 1.6rem
}

.calc .form-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--brand) calc(var(--p,30) * 1%),rgba(255,255,255,.18) 0)
}

.calc .form-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.18)
}

.calc .form-range::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--brand)
}

.calc .form-range::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    margin-top: -9px;
    background: #fff;
    border: 6px solid var(--brand)
}

.calc .form-range::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: #fff;
    border: 6px solid var(--brand)
}

.calc .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand) 40%,transparent)
}

.calc-out {
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--ink);
    padding: 1.8rem;
    height: 100%
}

.calc-out .big {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem,5vw,4rem);
    letter-spacing: -.05em;
    line-height: 1
}

.calc-out hr {
    border-color: rgba(18,18,18,.25);
    opacity: 1
}

.calc .btn-check + .btn {
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    font-size: .9rem
}

.calc .btn-check:checked + .btn {
    background: #fff;
    color: var(--ink);
    border-color: #fff
}

.calc label.lbl {
    font-size: .9rem;
    color: var(--muted)
}

.calc .val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem
}

.quotes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(88%,440px);
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    scrollbar-width: none
}

.quotes::-webkit-scrollbar {
    display: none
}

.quote {
    scroll-snap-align: start;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem
}

.quote blockquote {
    font-size: 1.15rem;
    line-height: 1.55;
    margin: 0
}

.quote .result {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    font-weight: 600;
    font-size: .85rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: color-mix(in srgb,var(--brand-2) 12%,transparent);
    color: var(--brand-2-text);
    align-self: flex-start
}

[data-bs-theme="dark"] .quote .result {
    color: color-mix(in srgb,var(--brand-2) 55%,#fff);
    background: color-mix(in srgb,var(--brand-2) 20%,transparent)
}

.quote.is-brand {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand);
    --muted: rgba(18,18,18,.7)
}

.quote.is-brand .result {
    background: var(--ink);
    color: var(--brand)
}

.quote footer {
    margin-top: auto;
    display: flex;
    gap: .8rem;
    align-items: center
}

.rating-big {
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1
}

.billing-switch {
    display: inline-flex;
    padding: .3rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.billing-switch button {
    border: 0;
    background: none;
    padding: .55rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--text)
}

.billing-switch button[aria-pressed="true"] {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .billing-switch button[aria-pressed="true"] {
    background: var(--brand);
    color: var(--ink)
}

.billing-switch .save {
    font-size: .72rem;
    background: var(--brand);
    color: var(--ink);
    padding: .1rem .45rem;
    border-radius: 999px;
    margin-inline-start:.3rem}

.plan {
    padding: 2.2rem;
    height: 100%;
    display: flex;
    flex-direction: column
}

.plan .price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.6rem;
    letter-spacing: -.05em;
    line-height: 1
}

.plan .price small {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted)
}

.plan ul {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 2rem;
    display: grid;
    gap: .7rem
}

.plan li {
    display: flex;
    gap: .65rem;
    align-items: flex-start
}

.plan li .bi {
    color: var(--brand-2);
    font-size: 1.15rem;
    line-height: 1.4
}

.plan .btn {
    margin-top: auto;
    justify-content: center
}

.plan.featured {
    background: var(--brand-2);
    color: #fff;
    border-color: var(--brand-2);
    --muted: color-mix(in srgb,var(--brand-2) 8%,#fff)
}

.plan.featured li .bi {
    color: var(--brand)
}

.plan .badge-pop {
    background: var(--brand);
    color: var(--ink);
    font-size: .75rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 999px
}

[data-bs-theme="dark"] .plan li .bi {
    color: color-mix(in srgb,var(--brand-2) 55%,#fff)
}

[data-bs-theme="dark"] .plan.featured li .bi {
    color: var(--brand)
}

.faq .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--line);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--text);
    --bs-accordion-color: var(--text);
    --bs-accordion-btn-color: var(--text)
}

.faq .accordion-item {
    border-inline:0;border-top: 0
}

.faq .accordion-button {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: -.02em;
    padding: 1.5rem 0
}

.faq .accordion-button::after {
    background-image: none;
    content: "\F64D";
    font-family: "bootstrap-icons";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    background: var(--surface-2);
    transition: transform .3s ease,background-color .3s ease
}

.faq .accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
    background: var(--brand);
    color: var(--ink)
}

.faq .accordion-body {
    padding: 0 3.5rem 1.6rem 0;
    color: var(--muted)
}

.faq-aside {
    padding: 2rem;
    position: sticky;
    top: 110px
}

.post {
    text-decoration: none;
    display: block
}

.post-thumb {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    position: relative;
    margin-bottom: 1.2rem
}

.post-thumb img {
    transition: transform .6s ease
}

.post:hover .post-thumb img {
    transform: scale(1.06)
}

.post-cat {
    position: absolute;
    left: 1rem;
    top: 1rem;
    background: var(--paper)
}

.post .meta {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: .5rem
}

.post h3 {
    font-size: 1.35rem
}

.post:hover h3 {
    text-decoration: underline;
    text-underline-offset: 4px
}

.avatar {
    object-fit: cover
}

.avatar-lg {
    width: 64px;
    height: 64px
}

.cta {
    border-radius: 36px;
    background: var(--brand);
    color: var(--ink);
    padding: clamp(2.2rem,6vw,5rem);
    overflow: hidden;
    position: relative
}

.cta::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -160px;
    bottom: -240px;
    border-radius: 50%;
    border: 70px solid rgba(18,18,18,.07)
}

.cta-photo {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 38%;
    border-radius: 200px 0 0 200px
}

.spark.s4 {
    width: 54px;
    right: 36%;
    top: 12%;
    fill: var(--ink)
}

@media (max-width: 991.98px) {
    .cta-photo,.spark.s4 {
        display:none
    }
}

.cta h2 {
    font-size: clamp(2.4rem,6vw,5rem)
}

.cta-form {
    display: flex;
    gap: .4rem;
    background: #fff;
    border-radius: 999px;
    padding: .35rem;
    max-width: 520px;
    position: relative;
    z-index: 1
}

.cta-form input {
    border: 0;
    background: transparent;
    flex: 1;
    min-width: 0;
    padding-inline:1.1rem;color: var(--ink)
}

.cta-form input:focus {
    outline: none
}

.cta-form:focus-within {
    box-shadow: 0 0 0 3px var(--ink)
}

.cta .btn-ink {
    background: var(--ink);
    color: #fff
}

.cta .btn-ink:hover {
    background: var(--brand-2)
}

.site-footer {
    padding-top: clamp(4rem,8vw,6rem)
}

.site-footer .f-head {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.1rem
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .55rem
}

.site-footer ul a {
    text-decoration: none
}

.site-footer ul a:hover {
    text-decoration: underline
}

.footer-word {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.06em;
    font-size: clamp(5rem,21vw,19rem);
    line-height: .8;
    color: var(--ink);
    opacity: .07;
    user-select: none;
    margin-top: 3rem;
    white-space: nowrap
}

[data-bs-theme="dark"] .footer-word {
    color: #fff
}

.socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    transition: background-color .2s ease
}

.socials a:hover {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-block:1.4rem;font-size: .9rem;
    color: var(--muted)
}

.insta {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: .75rem
}

.insta a {
    position: relative;
    aspect-ratio: 1;
    border-radius: 18px;
    display: block
}

.insta a .bi {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: var(--ink);
    background: color-mix(in srgb,var(--brand) 85%,transparent);
    opacity: 0;
    transition: opacity .3s ease
}

.insta a:hover .bi,.insta a:focus-visible .bi {
    opacity: 1
}

@media (max-width: 767.98px) {
    .insta {
        grid-template-columns:repeat(3,1fr)
    }
}

.to-top {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 1040;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0;
    background: var(--ink);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    box-shadow: var(--shadow)
}

.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: none
}

[data-bs-theme="dark"] .to-top {
    background: var(--brand);
    color: var(--ink)
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--d,0s)
}

.reveal.in {
    opacity: 1;
    transform: none
}

.no-js .reveal {
    opacity: 1;
    transform: none
}

main>:first-child .reveal,main>.elementor>:first-child .reveal {
    opacity: 1;
    transform: none;
    animation: reveal-rise .8s cubic-bezier(.2,.7,.2,1) both;
    animation-delay: var(--d,0s)
}

@keyframes reveal-rise {
    from {
        opacity: .01;
        transform: translateY(28px)
    }
}

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

    .reveal {
        opacity: 1;
        transform: none
    }
}

.hero-cover {
    padding: 0 1rem 1rem
}

.hc-frame {
    position: relative;
    border-radius: 36px;
    overflow: hidden;
    min-height: min(820px,88vh);
    display: flex;
    align-items: flex-end;
    color: #fff;
    isolation: isolate
}

.hc-frame>.hc-bg {
    position: absolute;
    inset: 0;
    z-index: -2
}

.hc-frame>.hc-bg img {
    animation: kenburns 24s ease-in-out infinite alternate
}

@keyframes kenburns {
    to {
        transform: scale(1.08) translate(-1%,-1%)
    }
}

.hc-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,rgba(10,10,12,.82) 0%,rgba(10,10,12,.55) 45%,rgba(10,10,12,.05) 80%),linear-gradient(0deg,rgba(10,10,12,.7),transparent 45%)
}

.hc-inner {
    width: 100%;
    padding: clamp(1.5rem,5vw,4.5rem)
}

.hero-cover h1 {
    font-size: clamp(2.8rem,7vw,6.4rem);
    max-width: 13ch;
    margin-block:1.3rem 1.4rem}

.hero-cover h1 .text-brand {
    color: var(--brand)
}

.hero-cover .lead {
    color: rgba(255,255,255,.82);
    max-width: 32rem
}

.hero-cover .pill {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    color: #fff;
    backdrop-filter: blur(8px)
}

.hero-cover .pill .dot {
    background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand) 25%,transparent)
}

.hero-cover .btn-line {
    border-color: rgba(255,255,255,.7);
    color: #fff
}

.hero-cover .btn-line:hover {
    background: #fff;
    color: var(--ink)
}

.hc-play {
    position: absolute;
    right: clamp(1.5rem,5vw,4.5rem);
    top: clamp(1.5rem,5vw,4rem);
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
    text-decoration: none
}

.hc-play .ring {
    position: absolute;
    inset: 0;
    animation: spin 16s linear infinite
}

.hc-play .ring text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    fill: #fff
}

.hc-play .core {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    transition: transform .3s ease
}

.hc-play:hover .core {
    transform: scale(1.12)
}

.hc-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: rgba(255,255,255,.18);
    border-radius: 22px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px)
}

.hc-stats>div {
    background: rgba(20,20,24,.45);
    padding: 1.2rem 1.4rem
}

.hc-stats .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -.04em;
    line-height: 1
}

.hc-stats .n sup {
    color: var(--brand);
    font-size: .5em
}

.hc-stats small {
    color: rgba(255,255,255,.75)
}

.hc-review {
    display: flex;
    gap: .8rem;
    align-items: center;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: .4rem 1.1rem .4rem .4rem;
    max-width: max-content
}

@media (max-width: 767.98px) {
    .hero-cover {
        padding-inline:.5rem
    }

    .hc-frame {
        border-radius: 26px;
        min-height: 0
    }

    .hc-play {
        width: 96px;
        height: 96px;
        right: 1rem;
        top: 1rem
    }

    .hc-play .core {
        width: 48px;
        height: 48px;
        font-size: 1.2rem
    }

    .hc-inner {
        padding-top: 8rem
    }

    .hc-stats {
        grid-template-columns: 1fr 1fr 1fr
    }

    .hc-stats>div {
        padding: .9rem
    }

    .hc-stats .n {
        font-size: 1.5rem
    }
}

.hero-type {
    text-align: center;
    overflow: hidden;
    padding-top: clamp(2.5rem,6vw,5rem)
}

.hero-type h1 {
    font-size: clamp(2.6rem,8.6vw,8.4rem);
    line-height: .98;
    letter-spacing: -.05em;
    margin: 1.6rem auto 1.6rem;
    max-width: 15ch
}

.in-photo {
    display: inline-block;
    vertical-align: middle;
    width: 1.9em;
    height: .82em;
    border-radius: 999px;
    overflow: hidden;
    margin-inline:.06em;transform: translateY(-.06em);
    background: var(--surface-2)
}

.in-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.in-photo.round {
    width: .82em
}

.in-icon {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
    width: .82em;
    height: .82em;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    font-size: .5em;
    transform: translateY(-.1em)
}

.in-icon.v {
    background: var(--brand-2);
    color: #fff
}

.hero-type .lead {
    max-width: 36rem;
    margin-inline:auto}

.fan {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: clamp(260px,30vw,400px);
    margin-top: clamp(2.5rem,5vw,4rem)
}

.fan-card {
    position: relative;
    width: clamp(150px,19vw,270px);
    aspect-ratio: 3 / 4;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
    margin-inline:-1.6%;transform-origin: 50% 120%;
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
    border: 5px solid var(--surface)
}

.fan-card img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.fan-card:nth-child(1) {
    transform: rotate(-14deg) translateY(30px)
}

.fan-card:nth-child(2) {
    transform: rotate(-7deg) translateY(6px);
    z-index: 1
}

.fan-card:nth-child(3) {
    transform: translateY(-10px);
    z-index: 2
}

.fan-card:nth-child(4) {
    transform: rotate(7deg) translateY(6px);
    z-index: 1
}

.fan-card:nth-child(5) {
    transform: rotate(14deg) translateY(30px)
}

.fan-card:hover {
    transform: translateY(-30px) rotate(0) !important;
    z-index: 5
}

.fan-card .lbl {
    position: absolute;
    left: .7rem;
    bottom: .7rem;
    right: .7rem;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    border-radius: 12px;
    padding: .45rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    text-align: start
}

.fan-card .lbl b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: -.03em
}

.fan-card.solid {
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: #fff;
    text-align: center;
    padding: 1rem
}

.fan-card.solid .big {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem,4vw,3.6rem);
    letter-spacing: -.05em;
    line-height: 1
}

.hero-type .hero-bg .b1 {
    right: 50%;
    transform: translateX(50%);
    top: auto;
    bottom: -260px;
    width: 900px;
    height: 520px
}

@media (max-width: 767.98px) {
    .fan {
        height:230px
    }

    .fan-card {
        width: 130px;
        margin-inline:-9%;border-width: 3px
    }

    .fan-card:nth-child(1),.fan-card:nth-child(5) {
        display: none
    }

    .fan-card .lbl {
        font-size: .68rem
    }
}

.hero-bento {
    padding-block:1rem clamp(3rem,6vw,5rem)}

.bento {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,minmax(250px,auto));
    gap: 1rem
}

.bt {
    border-radius: 28px;
    overflow: hidden;
    position: relative
}

.bt>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.bt:hover>img {
    transform: scale(1.05)
}

.bt-head {
    grid-column: span 2;
    grid-row: span 2;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: clamp(1.6rem,3.5vw,3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem
}

.bt-head h1 {
    font-size: clamp(2.6rem,5.4vw,5.2rem);
    margin: 1.2rem 0 0
}

.bt-tall {
    grid-row: span 2
}

.bt-stat {
    background: var(--brand-2);
    color: #fff;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.bt-stat .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem,5vw,4.6rem);
    letter-spacing: -.05em;
    line-height: .9
}

.bt-stat svg {
    width: 100%;
    height: 70px
}

.bt-tag {
    position: absolute;
    left: 1rem;
    top: 1rem;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    border-radius: 999px;
    padding: .4rem .85rem;
    font-size: .82rem;
    font-weight: 600;
    z-index: 1
}

.bt-quote {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    background: rgba(18,18,18,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border-radius: 18px;
    padding: 1rem 1.1rem;
    font-size: .92rem;
    z-index: 1
}

.bt-quote .bi-star-fill {
    color: var(--brand);
    font-size: .75rem
}

.bt-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    z-index: 1;
    box-shadow: 0 0 0 12px color-mix(in srgb,var(--brand) 30%,transparent);
    transition: transform .3s ease;
    text-decoration: none
}

.bt-play:hover {
    transform: scale(1.1)
}

.bt-tall::after,.bt-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 50%,rgba(0,0,0,.35));
    pointer-events: none
}

@media (max-width: 991.98px) {
    .bento {
        grid-template-columns:1fr 1fr;
        grid-template-rows: none
    }

    .bt-head {
        grid-column: span 2;
        grid-row: auto
    }

    .bt-tall {
        grid-row: span 2;
        min-height: 420px
    }

    .bt-stat,.bt-video {
        min-height: 200px
    }
}

@media (max-width: 575.98px) {
    .bt-tall {
        min-height:360px
    }
}

[data-skin="lime"] {
    --brand: #6d4aff;
    --brand-2: #6d4aff
}

[data-skin="sunset"] {
    --brand: #ffc26b;
    --brand-2: #e2483d
}

[data-skin="mint"] {
    --brand: #7ef0c4;
    --brand-2: #1f5eff
}

[data-skin="sky"] {
    --brand: #9fd8ff;
    --brand-2: #e8366d
}

[data-skin="lemon"] {
    --brand: #f5e35a;
    --brand-2: #2c3e9f
}

[data-skin="blossom"] {
    --brand: #ffb3d9;
    --brand-2: #0d7a5f
}

.stroke-brand {
    stroke: var(--brand)
}

.stroke-brand-2 {
    stroke: var(--brand-2)
}

.stop-brand-2 {
    stop-color: var(--brand-2)
}

.fill-brand-2 {
    fill: var(--brand-2)
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2000
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: var(--paper);
    display: grid;
    place-items: center;
    transition: opacity .45s ease,visibility .45s ease
}

.preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.no-js .preloader {
    display: none
}

.pl-mark .brand-mark {
    width: 64px;
    height: 64px
}

.pl-mark .bm-wave {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: draw 1.1s ease-in-out infinite alternate
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

.dropdown-homes {
    min-width: 18rem !important
}

.dropdown-homes .dropdown-item {
    gap: .8rem
}

.dropdown-homes .dropdown-item strong {
    display: block;
    font-size: .95rem
}

.dropdown-homes .dropdown-item small {
    color: var(--muted)
}

.dropdown-homes .home-no {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: var(--font-display)
}

.dropdown-homes .dropdown-item.active,.dropdown-homes .dropdown-item:active {
    background: var(--surface-2);
    color: var(--text)
}

.dropdown-homes .dropdown-item.active .home-no {
    background: var(--brand);
    color: var(--ink)
}

.main-nav .mega-menu {
    width: min(860px,92vw);
    left: 50% !important;
    transform: translateX(calc(-50% + var(--mega-shift,0px)));
    padding: 1rem;
    display: none;
    grid-template-columns: 1.6fr 1fr;
    gap: 1rem
}

.main-nav .mega-menu.show {
    display: grid
}

.mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem
}

.mega-item {
    display: flex;
    gap: .8rem;
    padding: .8rem;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text)
}

.mega-item:hover,.mega-item:focus-visible {
    background: var(--surface-2)
}

.mega-item strong {
    display: block;
    font-size: .98rem
}

.mega-item small {
    color: var(--muted);
    font-size: .85rem
}

.mega-ico {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: var(--brand-2);
    transition: background-color .2s ease
}

.mega-item:hover .mega-ico {
    background: var(--brand);
    color: var(--ink)
}

.mega-promo {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 250px;
    text-decoration: none;
    color: #fff;
    isolation: isolate
}

.mega-promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .6s ease
}

.mega-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,transparent 20%,rgba(10,10,12,.85))
}

.mega-promo:hover img {
    transform: scale(1.05)
}

.mega-promo-body {
    padding: 1.1rem;
    display: grid;
    gap: .3rem
}

.mega-promo-body .tag {
    justify-self: start;
    background: var(--brand);
    color: var(--ink)
}

.mega-promo-body strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -.02em;
    line-height: 1.15
}

.mega-promo-body small {
    opacity: .8
}

.link-arrow {
    font-weight: 600;
    font-size: .9rem;
    color: var(--brand)
}

.res-card .link-arrow,.el-demo .link-arrow {
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .res-card .link-arrow,[data-bs-theme="dark"] .el-demo .link-arrow,.el-demo .bg-ink .link-arrow {
    color: var(--brand)
}

.mobile-nav details summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.mobile-nav details summary::-webkit-details-marker {
    display: none
}

.mobile-nav details summary::after {
    content: "\F64D";
    font-family: "bootstrap-icons";
    font-size: 1.1rem;
    transition: transform .2s ease
}

.mobile-nav details[open] summary::after {
    transform: rotate(45deg)
}

.mobile-nav .sub {
    display: grid;
    gap: .1rem;
    padding: .5rem 0 .8rem .9rem;
    border-bottom: 1px solid var(--line)
}

.mobile-nav .sub a {
    padding: .4rem 0;
    text-decoration: none;
    color: var(--muted)
}

.offcanvas .brand-mark {
    width: 30px;
    height: 30px
}

.search-modal .modal-content {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 1rem 1.2rem 1.2rem
}

.search-form {
    display: flex;
    align-items: center;
    gap: .8rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: .8rem
}

.search-form .bi-search {
    font-size: 1.4rem;
    color: var(--muted)
}

.search-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    font-family: var(--font-display);
    color: var(--text);
    padding: .4rem 0
}

.search-form input:focus {
    outline: none
}

.search-hints {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    padding-top: .9rem
}

.search-hints .tag {
    text-decoration: none
}

.search-hints .tag:hover {
    background: var(--brand);
    color: var(--ink)
}

.search-live {
    display: grid;
    gap: .15rem;
    padding-top: .7rem;
    max-height: min(60vh,520px);
    overflow-y: auto
}

.search-live[hidden],.is-searching .search-hints {
    display: none
}

.sl-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .6rem .7rem;
    border-radius: 14px;
    color: var(--text);
    text-decoration: none
}

.sl-item:hover,.sl-item:focus-visible {
    background: var(--paper);
    outline: none
}

.sl-thumb {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: var(--paper);
    color: var(--brand-2);
    font-size: 1.1rem
}

.sl-item:hover .sl-thumb:not(img),.sl-item:focus-visible .sl-thumb:not(img) {
    background: var(--surface)
}

.sl-body {
    flex: 1;
    min-width: 0;
    display: grid
}

.sl-body strong {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sl-body small {
    color: var(--muted);
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sl-type {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.sl-item mark {
    background: color-mix(in srgb,var(--brand) 55%,transparent);
    color: inherit;
    padding: 0 .1em;
    border-radius: 4px
}

.sl-price {
    flex: none;
    font-weight: 600
}

.sl-empty {
    margin: 0;
    padding: .8rem .7rem;
    color: var(--muted)
}

.sl-all {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .4rem .7rem 0;
    font-weight: 600;
    color: var(--text)
}

.load-more {
    display: flex;
    justify-content: center;
    margin-top: 3rem
}

.load-more.is-loading .btn {
    opacity: .6;
    pointer-events: none
}

.load-more.is-loading .bi-arrow-down {
    display: inline-block;
    animation: lm-bounce .8s ease-in-out infinite
}

@keyframes lm-bounce {
    50% {
        transform: translateY(4px)
    }
}

.is-more {
    display: none !important
}

.mobile-dock {
    display: none
}

@media (max-width: 991.98px) {
    .mobile-dock {
        position:fixed;
        left: .6rem;
        right: .6rem;
        bottom: calc(.6rem + env(safe-area-inset-bottom));
        z-index: 1036;
        display: flex;
        justify-content: space-around;
        gap: .2rem;
        padding: .35rem;
        border-radius: 22px;
        background: color-mix(in srgb,var(--surface) 92%,transparent);
        border: 1px solid var(--line);
        box-shadow: 0 16px 40px -14px rgba(0,0,0,.35);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        transition: transform .3s cubic-bezier(.2,.7,.2,1)
    }

    .mobile-dock.is-away {
        transform: translateY(calc(100% + 1.4rem))
    }

    .mobile-dock>a,.mobile-dock>button {
        position: relative;
        flex: 1;
        min-width: 0;
        display: grid;
        justify-items: center;
        gap: .1rem;
        padding: .4rem .2rem;
        border: 0;
        border-radius: 16px;
        background: none;
        color: var(--muted);
        font-size: .7rem;
        font-weight: 600;
        line-height: 1.1;
        text-decoration: none
    }

    .mobile-dock .bi {
        font-size: 1.2rem
    }

    .mobile-dock span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .mobile-dock [aria-current="page"] {
        color: var(--text);
        background: var(--paper)
    }

    .mobile-dock .is-cta {
        color: var(--ink);
        background: var(--brand)
    }

    .mobile-dock .dock-count {
        position: absolute;
        top: .15rem;
        left: calc(50% + .35rem);
        min-width: 1.1rem;
        height: 1.1rem;
        padding: 0 .25rem;
        border-radius: 999px;
        background: var(--ink);
        color: var(--brand);
        font-size: .62rem;
        line-height: 1.1rem;
        text-align: center
    }

    .mobile-dock .dock-count:empty,.mobile-dock .dock-count[data-n="0"] {
        display: none
    }

    body:has(.mobile-dock) {
        --dock-h: calc(4.4rem + env(safe-area-inset-bottom));
        padding-bottom: var(--dock-h)
    }

    body:has(.mobile-dock) :is(.to-top,.chat-float,.cookie-bar) {
        bottom: calc(.6rem + var(--dock-h))
    }
}

@media (max-width: 575.98px) {
    body:has(.mobile-dock) .skin-panel {
        bottom:calc(5rem + var(--dock-h))
    }
}

@media print {
    .mobile-dock {
        display: none !important
    }
}

.sticky-cart {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 1037;
    width: min(760px,calc(100% - 1.2rem));
    transform: translate(-50%,calc(100% + 2rem));
    transition: transform .35s cubic-bezier(.2,.7,.2,1)
}

.sticky-cart.is-on {
    transform: translate(-50%,0)
}

.sc-in {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .55rem .55rem .55rem .7rem;
    border-radius: 20px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px -16px rgba(0,0,0,.4)
}

.sc-img {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden
}

.sc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sc-name {
    flex: 1;
    min-width: 0;
    display: grid;
    line-height: 1.25
}

.sc-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sc-name small {
    color: var(--muted)
}

.sc-name small del {
    opacity: .7
}

.sticky-cart .btn {
    flex: none
}

body:has(.sticky-cart.is-on) :is(.to-top,.chat-float) {
    opacity: 0;
    visibility: hidden
}

@media (max-width: 991.98px) {
    body:has(.mobile-dock) .sticky-cart {
        bottom:calc(.6rem + var(--dock-h));
        transition: transform .35s cubic-bezier(.2,.7,.2,1),bottom .3s ease
    }

    body:has(.mobile-dock.is-away) .sticky-cart {
        bottom: calc(.6rem + env(safe-area-inset-bottom))
    }
}

@media (max-width: 575.98px) {
    .sc-img {
        display:none
    }

    .sc-in {
        padding-left: 1rem
    }

    .sticky-cart .btn {
        padding-inline:1rem}
}

@media print {
    .sticky-cart {
        display: none !important
    }
}

.video-modal .modal-content {
    background: #000;
    border: 0;
    border-radius: 20px;
    overflow: hidden
}

.video-modal .btn-close {
    position: absolute;
    right: .8rem;
    top: .8rem;
    z-index: 2;
    background-color: rgba(255,255,255,.15);
    border-radius: 50%;
    padding: .7rem;
    opacity: 1
}

.video-modal video {
    background: #000
}

.cookie-bar {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1050;
    max-width: 440px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 1.1rem 1.2rem;
    display: grid;
    gap: .9rem;
    font-size: .92rem
}

.cookie-bar[hidden] {
    display: none
}

.cookie-bar .bi-cookie {
    color: var(--brand-2);
    margin-right: .25rem
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center
}

.cookie-set {
    margin-right: auto;
    padding-inline:0;color: var(--text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px
}

.cookie-prefs {
    display: grid;
    gap: .5rem;
    max-height: min(50vh,340px);
    overflow-y: auto
}

.cookie-prefs[hidden] {
    display: none
}

.cookie-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .8rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer
}

.cookie-cat small {
    display: block;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.4
}

.cookie-cat .form-check-input {
    width: 2.4em;
    height: 1.3em;
    margin: 0;
    cursor: pointer
}

.cookie-cat .form-check-input:checked {
    background-color: var(--brand-2);
    border-color: var(--brand-2)
}

.cookie-cat .form-check-input:disabled {
    opacity: .6;
    cursor: default
}

.btn-sm {
    --bs-btn-padding-y: .45rem;
    --bs-btn-padding-x: .9rem;
    font-size: .85rem
}

.footer-about {
    max-width: 22rem
}

.footer-news {
    display: flex;
    gap: .4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .3rem .3rem .3rem 1.1rem
}

.footer-news input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text)
}

.footer-news input:focus {
    outline: none
}

.footer-news:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--brand-2) 35%,transparent)
}

.skin-panel {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1045;
    display: flex;
    align-items: flex-start
}

.skin-toggle {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 14px 0 0 14px;
    background: var(--ink);
    color: var(--brand);
    font-size: 1.2rem;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow)
}

[data-bs-theme="dark"] .skin-toggle {
    background: var(--brand);
    color: var(--ink)
}

.skin-body {
    width: 230px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 0 0 0 18px;
    padding: 1rem;
    box-shadow: var(--shadow)
}

.skin-body hr {
    border-color: var(--line);
    opacity: 1;
    margin: .9rem 0
}

.skins {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .5rem
}

.skin {
    aspect-ratio: 1;
    border-radius: 14px;
    border: 2px solid transparent;
    background: linear-gradient(135deg,var(--a) 50%,var(--b) 50%);
    cursor: pointer;
    transition: transform .2s ease
}

.skin:hover {
    transform: scale(1.06)
}

.skin[aria-pressed="true"] {
    border-color: var(--text);
    box-shadow: 0 0 0 3px var(--surface) inset
}

@media (max-width: 575.98px) {
    .skin-panel {
        top:auto;
        bottom: 5rem;
        transform: none
    }

    .cookie-bar {
        right: 1rem
    }

    body:has(.cookie-bar:not([hidden])) :is(.skin-panel,.to-top) {
        display: none
    }
}

.to-top {
    z-index: 1040
}

.main-nav {
    position: relative
}

.main-nav .dropdown-homes {
    top: 100%
}

@media (min-width: 992px) {
    .container {
        padding-inline:1.5rem
    }
}

.main-nav .mega-pages {
    grid-template-columns: repeat(5,1fr);
    width: min(1000px,94vw);
    padding: 1.4rem;
    gap: 1rem 1.2rem;
    max-height: calc(100vh - 100px);
    overflow-y: auto
}

@media (min-width: 1360px) {
    .main-nav .mega-pages {
        grid-template-columns:repeat(6,1fr);
        width: 1180px
    }
}

.mega-col h6 {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 .6rem .55rem
}

.mega-col a {
    display: block;
    padding: .42rem .55rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    font-size: .94rem
}

.mega-col a:hover,.mega-col a.active {
    background: var(--surface-2)
}

.mega-col a.active {
    font-weight: 600
}

.mega-foot {
    display: flex;
    gap: 1.2rem;
    border-top: 1px solid var(--line);
    margin-top: .6rem;
    padding: .8rem .8rem 0
}

.mega-foot a {
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    color: var(--text)
}

.mega-foot a:hover {
    color: var(--brand-2)
}

.mega-foot:empty {
    display: none
}

.page-hero {
    overflow: hidden;
    padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,5vw,4rem)}

.page-hero h1 {
    font-size: clamp(2.6rem,6vw,5.2rem);
    margin-block:1.2rem 1.2rem;max-width: 16ch
}

.page-hero.text-center h1,.page-hero.text-center .lead {
    margin-inline:auto}

.page-hero .lead {
    max-width: 38rem
}

.page-hero .hero-bg .b1 {
    width: 460px;
    height: 460px;
    top: -220px;
    right: -140px
}

.crumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .35rem .9rem;
    margin: 0;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: .85rem;
    width: max-content;
    max-width: 100%
}

.page-hero.text-center .crumbs {
    margin-inline:auto}

.crumbs li + li::before {
    content: "/";
    color: var(--muted);
    margin-inline-end:.4rem}

.crumbs a {
    text-decoration: none;
    color: var(--muted)
}

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

.crumbs [aria-current] {
    font-weight: 600
}

.page-photo {
    border-radius: clamp(24px,4vw,40px);
    aspect-ratio: 21 / 8;
    margin-top: clamp(2rem,4vw,3.5rem);
    position: relative
}

.page-photo.arch {
    border-radius: 400px 400px 32px 32px;
    aspect-ratio: 21 / 9
}

@media (max-width: 767.98px) {
    .page-photo,.page-photo.arch {
        aspect-ratio:4 / 3;
        border-radius: 26px
    }
}

.page-photo .ph-badge {
    position: absolute;
    left: 1.2rem;
    bottom: 1.2rem;
    z-index: 1
}

.icon-card {
    padding: 1.8rem;
    height: 100%;
    transition: transform .3s ease,box-shadow .3s ease
}

.icon-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.icon-card .ic {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--surface-2);
    color: var(--brand-2);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    margin-bottom: 1.4rem;
    transition: background-color .3s ease,color .3s ease
}

.icon-card:hover .ic {
    background: var(--brand);
    color: var(--ink)
}

.icon-card h3 {
    font-size: 1.3rem
}

.icon-card p:last-child {
    margin-bottom: 0
}

[data-bs-theme="dark"] .icon-card .ic {
    color: color-mix(in srgb,var(--brand-2) 55%,#fff)
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .75rem
}

.check-list li {
    display: flex;
    gap: .7rem;
    align-items: flex-start
}

.check-list li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1rem;
    margin-top: .1rem
}

.check-list.cols-2 {
    grid-template-columns: 1fr 1fr
}

@media (max-width: 575.98px) {
    .check-list.cols-2 {
        grid-template-columns:1fr
    }
}

.prose {
    font-size: 1.12rem;
    line-height: 1.75
}

.prose>* + * {
    margin-top: 1.3em
}

.prose p,.prose ul,.prose ol {
    margin-bottom: 0
}

.prose h2 {
    font-size: clamp(1.7rem,3vw,2.3rem);
    margin-top: 2.2em;
    letter-spacing: -.03em;
    scroll-margin-top: 110px
}

.prose h3 {
    margin-top: 1.8em;
    scroll-margin-top: 110px
}

.prose li + li {
    margin-top: .4em
}

.prose blockquote {
    margin-inline:0;padding: 1.6rem 1.8rem;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1.35;
    letter-spacing: -.02em
}

.prose blockquote cite {
    display: block;
    margin-top: .8rem;
    font-family: var(--font-body);
    font-size: .9rem;
    font-style: normal;
    font-weight: 600
}

.prose figure {
    margin-inline:0}

.prose figure .ph {
    border-radius: var(--radius);
    aspect-ratio: 16 / 9
}

.prose figcaption {
    font-size: .88rem;
    color: var(--muted);
    margin-top: .6rem
}

.prose code {
    background: var(--surface-2);
    color: var(--text);
    padding: .1em .4em;
    border-radius: 6px;
    font-size: .9em
}

.prose a {
    color: var(--text);
    text-decoration-color: var(--brand-2);
    text-decoration-thickness: 2px
}

.prose .callout {
    display: flex;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--brand-2);
    background: color-mix(in srgb,var(--brand-2) 7%,transparent);
    font-size: 1rem
}

.prose .callout .bi {
    font-size: 1.4rem;
    color: var(--brand-2)
}

.sticky-side {
    position: sticky;
    top: 100px
}

.side-card {
    padding: 1.8rem
}

.side-card.is-ink {
    background: var(--ink);
    color: #f3f1ec;
    border-color: var(--ink);
    --muted: #a3a09a;
    --line: rgba(255,255,255,.14)
}

[data-bs-theme="dark"] .side-card.is-ink {
    background: var(--brand);
    color: var(--ink);
    --muted: rgba(18,18,18,.7);
    --line: rgba(18,18,18,.16)
}

[data-bs-theme="dark"] .side-card.is-ink .btn-brand {
    background: var(--ink);
    color: #fff
}

.side-card.is-ink .btn-brand:hover {
    background: #fff;
    color: var(--ink)
}

.meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .1rem
}

.meta-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .95rem
}

.meta-list li span:first-child {
    color: var(--muted)
}

.meta-list li span:last-child {
    font-weight: 600;
    text-align: end
}

.form-soft .form-label {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .4rem
}

.form-soft .form-control,.form-soft .form-select {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .85rem 1rem;
    font-size: 1rem
}

.form-soft .form-control::placeholder {
    color: color-mix(in srgb,var(--muted) 75%,transparent)
}

.form-soft .form-control:focus,.form-soft .form-select:focus {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 18%,transparent)
}

.form-soft textarea.form-control {
    min-height: 150px
}

.form-soft .form-check-input {
    width: 1.2em;
    height: 1.2em;
    border-color: var(--line);
    background-color: var(--surface)
}

.form-soft .form-check-input:checked {
    background-color: var(--brand-2);
    border-color: var(--brand-2)
}

.form-soft .was-validated .form-control:invalid,.form-soft .form-control.is-invalid {
    border-color: #dc3545
}

.chip-check {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.chip-check .btn {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    font-size: .9rem;
    font-weight: 500
}

.chip-check .btn-check:checked + .btn {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

[data-bs-theme="dark"] .chip-check .btn-check:checked + .btn {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.form-status {
    margin: 0;
    font-weight: 500
}

.form-status.is-ok {
    color: #198754
}

.form-status.is-error {
    color: #dc3545
}

[data-bs-theme="dark"] .form-status.is-ok {
    color: #6fdc9c
}

[data-bs-theme="dark"] .form-status.is-error {
    color: #ff8a8a
}

.timeline {
    position: relative;
    display: grid;
    gap: 0
}

.tl-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 2rem;
    padding-block:1.8rem;border-top: 1px solid var(--line)
}

.tl-year {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.2rem;
    letter-spacing: -.04em;
    line-height: 1
}

.tl-item:hover .tl-year {
    color: var(--brand-2)
}

.bg-ink .tl-item:hover .tl-year {
    color: var(--brand)
}

.tl-item h3 {
    margin-bottom: .4rem
}

@media (max-width: 575.98px) {
    .tl-item {
        grid-template-columns:1fr;
        gap: .6rem
    }
}

.award {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1.5rem;
    align-items: center;
    padding-block:1.3rem;border-bottom: 1px solid var(--line)
}

.award:first-child {
    border-top: 1px solid var(--line)
}

.award strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.02em
}

.award span {
    color: var(--muted)
}

@media (max-width: 575.98px) {
    .award {
        grid-template-columns:1fr auto
    }

    .award .aw-cat {
        display: none
    }
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line)
}

.logo-grid>div {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 2.2rem 1rem;
    display: grid;
    place-items: center;
    transition: background-color .3s ease
}

.logo-grid>div:hover {
    background: var(--surface)
}

.logo-grid .client {
    font-size: 1.3rem
}

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

.big-number {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(5rem,14vw,12rem);
    letter-spacing: -.06em;
    line-height: .85
}

.photo-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 1rem
}

.photo-row .ph {
    border-radius: var(--radius);
    aspect-ratio: 4 / 5
}

.photo-row .ph:first-child {
    aspect-ratio: auto
}

.photo-row .ph:nth-child(2) {
    margin-top: 3rem
}

@media (max-width: 767.98px) {
    .photo-row {
        grid-template-columns:1fr 1fr
    }

    .photo-row .ph:first-child {
        grid-column: span 2;
        aspect-ratio: 16 / 10
    }

    .photo-row .ph:nth-child(2) {
        margin-top: 0
    }
}

.profile-photo {
    border-radius: 260px 260px var(--radius) var(--radius);
    aspect-ratio: 4 / 5;
    position: relative
}

.profile-photo .tag {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    background: var(--brand);
    color: var(--ink);
    font-weight: 600
}

.skill + .skill {
    margin-top: 1.2rem
}

.skill .d-flex {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .45rem
}

.skill .bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.skill .bar span {
    display: block;
    height: 100%;
    width: var(--w,50%);
    border-radius: inherit;
    background: var(--brand-2);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1)
}

.in .skill .bar span,.no-js .skill .bar span {
    transform: none
}

.job-list {
    border-top: 1px solid var(--line)
}

.job-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 56px;
    gap: 1.5rem;
    align-items: center;
    padding-block:1.6rem;border-bottom: 1px solid var(--line);
    text-decoration: none;
    position: relative
}

.job-row::before {
    content: "";
    position: absolute;
    inset: 0 -1.2rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: -1
}

.job-row:hover::before {
    opacity: 1
}

.job-row strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.02em
}

.job-row span {
    color: var(--muted);
    font-size: .95rem
}

.job-row .srv-go {
    width: 48px;
    height: 48px
}

.job-row:hover .srv-go {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink);
    transform: rotate(45deg)
}

.job-row[hidden] {
    display: none
}

@media (max-width: 767.98px) {
    .job-row {
        grid-template-columns:1fr auto;
        gap: .3rem 1rem
    }

    .job-row strong {
        grid-column: 1
    }

    .job-row .srv-go {
        grid-column: 2;
        grid-row: 1 / span 3
    }

    .job-row span {
        grid-column: 1
    }

    .job-row::before {
        inset: 0
    }
}

.quote-wall {
    columns: 3 300px;
    column-gap: 1.25rem
}

.quote-wall .quote {
    break-inside: avoid;
    margin-bottom: 1.25rem !important
}

.video-card {
    position: relative;
    border-radius: var(--radius);
    aspect-ratio: 16 / 10;
    display: block;
    color: #fff;
    text-decoration: none;
    isolation: isolate
}

.video-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65));
    z-index: 0
}

.video-card .bt-play {
    z-index: 2
}

.video-card .vc-cap {
    position: absolute;
    left: 1.4rem;
    bottom: 1.2rem;
    right: 1.4rem;
    z-index: 2
}

.video-card .vc-cap strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.02em
}

.score-card {
    padding: 1.6rem;
    text-align: center
}

.score-card .rating-big {
    font-size: 3rem
}

.svc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    overflow: hidden;
    transition: transform .35s ease,box-shadow .35s ease
}

.svc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.svc-card .svc-img {
    aspect-ratio: 16 / 10;
    position: relative
}

.svc-card .svc-img img {
    transition: transform .6s ease
}

.svc-card:hover .svc-img img {
    transform: scale(1.06)
}

.svc-card .svc-body {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1
}

.svc-card .svc-ico {
    position: relative;
    margin: -3.4rem 0 1rem;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    z-index: 1;
    box-shadow: 0 0 0 5px var(--surface)
}

.svc-card .svc-body {
    padding-top: 1.6rem
}

.tab-title {
    font-size: clamp(1.8rem,3.2vw,2.6rem);
    letter-spacing: -.035em;
    line-height: 1.08
}

.svc-card .link-arrow {
    margin-top: auto;
    color: var(--text)
}

.svc-card:hover .link-arrow {
    color: var(--brand-2)
}

.side-nav {
    display: grid;
    gap: .3rem;
    padding: .6rem
}

.side-nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 500
}

.side-nav a:hover {
    background: var(--surface-2)
}

.side-nav a.active {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .side-nav a.active {
    background: var(--brand);
    color: var(--ink)
}

.result-tiles {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem
}

.result-tiles>div {
    border-radius: var(--radius-sm);
    padding: 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line)
}

.result-tiles>div:nth-child(2) {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.result-tiles .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: -.04em;
    line-height: 1
}

.result-tiles small {
    display: block;
    margin-top: .4rem;
    opacity: .75
}

@media (max-width: 575.98px) {
    .result-tiles {
        grid-template-columns:1fr
    }
}

.tabs-soft {
    gap: .4rem;
    flex-wrap: wrap
}

.tabs-soft .nav-link {
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 600;
    padding: .6rem 1.2rem;
    background: var(--surface)
}

.tabs-soft .nav-link.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

[data-bs-theme="dark"] .tabs-soft .nav-link.active {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.platforms {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem
}

.platforms span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: 600
}

.platforms .bi {
    font-size: 1.1rem;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .platforms .bi {
    color: var(--brand)
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
    gap: 1rem
}

.industry {
    position: relative;
    border-radius: var(--radius-sm);
    aspect-ratio: 1 / 1.1;
    display: flex;
    align-items: flex-end;
    padding: 1.2rem;
    color: #fff;
    text-decoration: none;
    isolation: isolate
}

.industry img {
    position: absolute;
    inset: 0;
    z-index: -2;
    transition: transform .6s ease
}

.industry::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,transparent 35%,rgba(10,10,12,.8))
}

.industry:hover img {
    transform: scale(1.06)
}

.industry strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.02em;
    display: block
}

.industry small {
    opacity: .8
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.filter-bar button {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: .55rem 1.1rem;
    font-weight: 600;
    font-size: .92rem;
    transition: background-color .2s ease
}

.filter-bar button:hover {
    background: var(--surface-2)
}

.filter-bar button[aria-pressed="true"] {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

[data-bs-theme="dark"] .filter-bar button[aria-pressed="true"] {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.filter-bar .count {
    font-weight: 500;
    opacity: .7;
    margin-inline-start:.25rem}

[data-cat].is-hidden {
    display: none !important
}

.masonry {
    columns: 3 320px;
    column-gap: 1.5rem
}

.masonry>* {
    break-inside: avoid;
    margin-bottom: 2rem;
    display: block
}

.masonry .case-media.tall {
    aspect-ratio: 3 / 4
}

.masonry .case-media.square {
    aspect-ratio: 1
}

.case .case-sub {
    color: var(--muted);
    font-size: .95rem;
    margin: .3rem 0 0
}

.pager {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 3.5rem 0 0
}

.pager a,.pager span {
    min-width: 46px;
    height: 46px;
    padding-inline:.9rem;border-radius: 999px;
    display: grid;
    place-items: center;
    text-decoration: none;
    border: 1px solid var(--line);
    font-weight: 600
}

.pager a:hover {
    background: var(--surface-2)
}

.pager [aria-current] {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

[data-bs-theme="dark"] .pager [aria-current] {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.cs-facts {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.5rem;
    padding-block:1.6rem;border-block:1px solid var(--line)}

.cs-facts dt {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .3rem
}

.cs-facts dd {
    margin: 0;
    font-weight: 600
}

@media (max-width: 767.98px) {
    .cs-facts {
        grid-template-columns:1fr 1fr
    }
}

.cs-cover {
    border-radius: clamp(24px,4vw,40px);
    aspect-ratio: 21 / 9;
    position: relative
}

@media (max-width: 767.98px) {
    .cs-cover {
        aspect-ratio:4 / 3
    }
}

.cs-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem
}

.cs-gallery .ph {
    border-radius: var(--radius);
    min-height: 220px
}

.cs-gallery .ph:first-child {
    grid-row: span 2;
    min-height: 460px
}

@media (max-width: 767.98px) {
    .cs-gallery {
        grid-template-columns:1fr
    }

    .cs-gallery .ph:first-child {
        grid-row: auto;
        min-height: 300px
    }
}

.big-quote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.7rem,3.6vw,3rem);
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0
}

.big-quote .bi-quote {
    font-size: 3rem;
    line-height: 1;
    color: var(--brand-2);
    display: block;
    margin-bottom: 1rem
}

.bg-ink .big-quote .bi-quote {
    color: var(--brand)
}

.next-project {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: clamp(2rem,5vw,3.5rem);
    border-radius: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    text-decoration: none;
    overflow: hidden;
    position: relative
}

.next-project .np-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem,5vw,4rem);
    letter-spacing: -.04em;
    line-height: 1
}

.next-project .np-img {
    width: 220px;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    flex: none;
    transform: rotate(4deg);
    transition: transform .4s ease
}

.next-project:hover .np-img {
    transform: rotate(-2deg) scale(1.05)
}

@media (max-width: 767.98px) {
    .next-project .np-img {
        display:none
    }
}

.chart-card {
    padding: 1.6rem
}

.chart-card svg {
    width: 100%;
    height: auto;
    display: block
}

.chart-card .bar-v {
    fill: var(--surface-2)
}

.chart-card .bar-v.hi {
    fill: var(--brand-2)
}

.chart-card .lbl {
    font-size: 11px;
    fill: var(--muted)
}

.chart-card .area {
    fill: color-mix(in srgb,var(--brand-2) 18%,transparent)
}

.chart-card .line {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round
}

.chart-card .grid-l {
    stroke: var(--line);
    stroke-dasharray: 4 6
}

[data-bs-theme="dark"] .chart-card .bar-v.hi,[data-bs-theme="dark"] .chart-card .line {
    fill: var(--brand);
    stroke: var(--brand)
}

[data-bs-theme="dark"] .chart-card .line {
    fill: none
}

.compare-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface)
}

.compare {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse
}

.compare th,.compare td {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line);
    text-align: center
}

.compare th:first-child,.compare td:first-child {
    text-align: start
}

.compare thead th {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -.02em;
    position: sticky;
    top: 0;
    background: var(--surface)
}

.compare thead th small {
    display: block;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0
}

.compare .col-hi {
    background: color-mix(in srgb,var(--brand-2) 7%,transparent)
}

.compare thead .col-hi {
    background: var(--brand-2);
    color: #fff
}

.compare thead .col-hi small {
    color: rgba(255,255,255,.95)
}

.compare .grp td {
    background: var(--surface-2);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: start
}

.compare .bi-check-circle-fill {
    color: var(--brand-2);
    font-size: 1.2rem
}

[data-bs-theme="dark"] .compare .bi-check-circle-fill {
    color: var(--brand)
}

.compare .bi-dash {
    color: var(--muted)
}

.compare tbody tr:last-child td {
    border-bottom: 0
}

.addon {
    display: block;
    cursor: pointer;
    height: 100%;
    position: relative
}

.addon input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.addon .addon-body {
    display: flex;
    gap: 1rem;
    padding: 1.3rem;
    height: 100%;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--line);
    background: var(--surface);
    transition: border-color .2s ease,background-color .2s ease
}

.addon:hover .addon-body {
    border-color: color-mix(in srgb,var(--brand-2) 50%,var(--line))
}

.addon input:checked + .addon-body {
    border-color: var(--brand-2);
    background: color-mix(in srgb,var(--brand-2) 7%,var(--surface))
}

.addon input:focus-visible + .addon-body {
    outline: 3px solid var(--brand-2);
    outline-offset: 2px
}

.addon .tick {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    color: transparent;
    transition: all .2s ease
}

.addon input[type=radio] + .addon-body .tick {
    border-radius: 50%
}

.addon input:checked + .addon-body .tick {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: #fff
}

.addon strong {
    display: block;
    font-size: 1.05rem
}

.addon small {
    color: var(--muted)
}

.addon .price-tag {
    margin-inline-start:auto;font-weight: 700;
    font-family: var(--font-display);
    white-space: nowrap
}

.pkg-summary ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: .5rem;
    font-size: .95rem;
    min-height: 2rem
}

.pkg-summary li {
    display: flex;
    justify-content: space-between;
    gap: 1rem
}

.pkg-summary .total {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: -.05em;
    line-height: 1
}

.post-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.8rem;
    align-items: center;
    text-decoration: none;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line)
}

.post-row + .post-row {
    padding-top: 2rem
}

.post-row .post-thumb {
    margin: 0
}

.post-row h3 {
    font-size: 1.6rem
}

.post-row p {
    color: var(--muted);
    margin-bottom: 0
}

.post-row:hover h3 {
    text-decoration: underline;
    text-underline-offset: 4px
}

.post-row:hover .post-thumb img {
    transform: scale(1.06)
}

@media (max-width: 767.98px) {
    .post-row {
        grid-template-columns:1fr;
        gap: 1rem
    }
}

.post-featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
    align-items: center;
    text-decoration: none
}

.post-featured .post-thumb {
    aspect-ratio: 4 / 3;
    margin: 0
}

.post-featured h2 {
    font-size: clamp(2rem,3.6vw,3rem)
}

.post-featured:hover h2 {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px
}

.post-featured:hover .post-thumb img {
    transform: scale(1.04)
}

@media (max-width: 991.98px) {
    .post-featured {
        grid-template-columns:1fr;
        gap: 1.5rem
    }
}

.post-text {
    display: block;
    padding: 1.8rem;
    text-decoration: none
}

.post-text.is-brand {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.post-text.is-ink {
    background: var(--brand-2);
    color: #fff;
    border-color: var(--brand-2)
}

.post-text h3 {
    font-size: 1.5rem
}

.post-text:hover h3 {
    text-decoration: underline;
    text-underline-offset: 4px
}

.author-mini {
    display: flex;
    gap: .6rem;
    align-items: center;
    font-size: .9rem
}

.author-mini .avatar {
    width: 34px;
    height: 34px;
    border-width: 0
}

.widget {
    padding: 1.6rem
}

.widget + .widget {
    margin-top: 1.25rem
}

.widget h4 {
    font-size: 1.15rem;
    margin-bottom: 1rem
}

.widget-search {
    display: flex;
    gap: .4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .3rem .3rem .3rem 1.1rem
}

.widget-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text)
}

.widget-search input:focus {
    outline: none
}

.cat-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.cat-list a {
    display: flex;
    justify-content: space-between;
    padding: .55rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none
}

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

.cat-list a:hover {
    color: var(--brand-2)
}

.cat-list span {
    color: var(--muted);
    font-size: .9rem
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.tag-cloud a {
    text-decoration: none
}

.tag-cloud a:hover {
    background: var(--brand);
    color: var(--ink)
}

.mini-post {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: .9rem;
    align-items: center;
    text-decoration: none
}

.mini-post + .mini-post {
    margin-top: 1rem
}

.mini-post .ph {
    aspect-ratio: 1;
    border-radius: 14px
}

.mini-post strong {
    font-size: .95rem;
    line-height: 1.3;
    display: block
}

.mini-post small {
    color: var(--muted)
}

.mini-post:hover strong {
    text-decoration: underline
}

.widget-promo {
    position: relative;
    overflow: hidden;
    background: var(--brand-2);
    color: #fff;
    border-color: var(--brand-2)
}

.widget-promo .spark {
    width: 36px;
    right: 1.2rem;
    top: 1.2rem
}

.reading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 1035;
    pointer-events: none
}

.reading-bar span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--brand-2);
    transform-origin: left;
    transform: scaleX(var(--p,0))
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.4rem;
    color: var(--muted);
    font-size: .95rem
}

.article-meta .author-mini {
    color: var(--text);
    font-weight: 600
}

.toc {
    padding: 1.4rem
}

.toc ol {
    list-style: none;
    counter-reset: toc;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .1rem
}

.toc li {
    counter-increment: toc
}

.toc a {
    display: flex;
    gap: .7rem;
    padding: .45rem .5rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: .95rem
}

.toc a::before {
    content: counter(toc,decimal-leading-zero);
    color: var(--muted);
    font-weight: 600;
    font-size: .8rem;
    padding-top: .15rem
}

.toc a:hover {
    background: var(--surface-2)
}

.share {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center
}

.share a,.share button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    background: var(--surface);
    color: var(--text)
}

.share a:hover,.share button:hover {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.author-box {
    display: flex;
    gap: 1.4rem;
    padding: 1.8rem;
    align-items: flex-start
}

.author-box .avatar {
    width: 84px;
    height: 84px;
    border: 0
}

@media (max-width: 575.98px) {
    .author-box {
        flex-direction:column
    }
}

.comment {
    display: flex;
    gap: 1rem
}

.comment + .comment {
    margin-top: 1.8rem
}

.comment .avatar {
    border: 0;
    width: 48px;
    height: 48px
}

.comment .c-body {
    flex: 1
}

.comment .c-head {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    align-items: baseline;
    margin-bottom: .3rem
}

.comment .c-head small {
    color: var(--muted)
}

.comment .reply-link {
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .comment .reply-link {
    color: var(--brand)
}

.comment.is-reply {
    margin-inline-start:4rem}

@media (max-width: 575.98px) {
    .comment.is-reply {
        margin-inline-start:1.5rem
    }
}

.contact-tile {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.4rem;
    height: 100%;
    text-decoration: none
}

.contact-tile .ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex: none;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.25rem
}

.contact-tile strong {
    display: block;
    font-size: 1.05rem
}

.contact-tile span {
    color: var(--muted);
    font-size: .95rem
}

a.contact-tile:hover strong {
    text-decoration: underline
}

.map-frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-2);
    min-height: 380px;
    position: relative
}

.map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.map-frame iframe[data-src]:not([src]) {
    visibility: hidden
}

[data-bs-theme="dark"] .map-frame iframe {
    filter: invert(.9) hue-rotate(180deg) saturate(.6)
}

.form-card {
    padding: clamp(1.6rem,4vw,2.8rem)
}

.split-photo {
    border-radius: 36px;
    min-height: 100%;
    position: relative;
    aspect-ratio: auto
}

.split-photo .sp-card {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 1;
    background: color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 1.2rem 1.4rem;
    display: flex;
    gap: 1rem;
    align-items: center
}

@media (max-width: 991.98px) {
    .split-photo {
        min-height:380px
    }
}

.office {
    overflow: hidden;
    height: 100%
}

.office .ph {
    aspect-ratio: 16 / 10
}

.office .o-body {
    padding: 1.5rem
}

.office .o-time {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted)
}

.office .o-time .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e
}

@media (max-width: 767.98px) {
    .next-project {
        flex-wrap:wrap
    }
}

.video-card.h-100 {
    aspect-ratio: auto;
    min-height: 320px
}

.section-gap {
    height: clamp(3rem,6vw,5rem)
}

.ph img.avatar {
    width: 42px;
    height: 42px
}

.map-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .4rem;
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
    background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size: 40px 40px
}

.map-fallback .bi {
    font-size: 2.2rem;
    color: var(--brand-2)
}

@media (max-width: 991.98px) {
    .job-row::before {
        inset:0
    }
}

.contact-tile>span:last-child {
    min-width: 0;
    overflow-wrap: anywhere
}

.dropdown-homes ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.dropdown-homes h6 {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: .4rem 0 .4rem .8rem
}

.main-nav .dropdown-homes.has-two.show {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    min-width: 36rem !important
}

/* .hero-video {
    position: relative;
    min-height: min(860px,92vh);
    display: flex;
    align-items: flex-end;
    color: #fff;
    isolation: isolate;
    overflow: hidden;
    margin-top: -76px;
    padding-top: 140px;
    background: #0b0b0d
} */

.hero-video .hv-media {
    position: absolute;
    inset: 0;
    z-index: -2
}

.hero-video .hv-media video,.hero-video .hv-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.hero-video::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.25) 40%,rgba(8,8,10,.85) 100%)
}

.hero-video h1 {
    font-size: clamp(3rem,9vw,9rem);
    line-height: .92;
    letter-spacing: -.055em;
    margin: 1.2rem 0 1.6rem
}

.hero-video h1 .text-brand {
    color: var(--brand)
}

.hero-video .lead {
    color: rgba(255,255,255,.8);
    max-width: 34rem
}

.hero-video .pill {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    color: #fff;
    backdrop-filter: blur(8px)
}

.hero-video .pill .dot {
    background: var(--brand)
}

.hero-video .btn-line {
    border-color: rgba(255,255,255,.7);
    color: #fff
}

.hero-video .btn-line:hover {
    background: #fff;
    color: var(--ink)
}

.hv-bottom {
    border-top: 1px solid rgba(255,255,255,.18);
    margin-top: clamp(2.5rem,6vw,4.5rem);
    padding-block:1.4rem 2rem}

.hv-bottom .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1
}

.hv-bottom small {
    color: rgba(255,255,255,.7)
}

.hv-pause {
    position: absolute;
    right: 1.2rem;
    top: 96px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.25);
    color: #fff;
    display: grid;
    place-items: center;
    backdrop-filter: blur(6px)
}

.site-header.on-video:not(.is-scrolled) .brand,.site-header.on-video:not(.is-scrolled) .navbar-toggler {
    color: #fff
}

.site-header.on-video:not(.is-scrolled) .brand-mark .bm-bg {
    fill: var(--brand)
}

.site-header.on-video:not(.is-scrolled) .brand-mark .bm-wave {
    stroke: var(--ink)
}

.site-header.on-video:not(.is-scrolled) .navbar-toggler {
    border-color: rgba(255,255,255,.4)
}

.reel-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem
}

.reel {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    display: block
}

.reel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .6s ease
}

.reel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 55%,rgba(0,0,0,.8))
}

.reel:hover img {
    transform: scale(1.06)
}

.reel .r-top {
    position: absolute;
    left: .9rem;
    right: .9rem;
    top: .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    font-weight: 600
}

.reel .r-top .bi {
    font-size: 1.1rem
}

.reel .r-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    transition: background-color .3s ease,color .3s ease
}

.reel:hover .r-play {
    background: var(--brand);
    color: var(--ink)
}

.reel .r-cap {
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .9rem
}

.reel .r-cap b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -.04em;
    color: var(--brand);
    line-height: 1
}

.reel .r-cap small {
    opacity: .85
}

.reel-grid .reel:nth-child(even) {
    margin-top: 2.5rem
}

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

@media (max-width: 575.98px) {
    .reel-grid .reel:nth-child(even) {
        margin-top:1.5rem
    }

    .reel .r-cap b {
        font-size: 1.25rem
    }
}

.hero-neon {
    position: relative;
    overflow: hidden;
    padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem)}

.aurora {
    position: absolute;
    inset: -20% -10% auto;
    height: 120%;
    pointer-events: none;
    filter: blur(80px);
    opacity: .55
}

.aurora span {
    position: absolute;
    border-radius: 50%;
    animation: drift 16s ease-in-out infinite alternate
}

.aurora .a1 {
    width: 520px;
    height: 520px;
    left: 5%;
    top: 10%;
    background: var(--brand-2)
}

.aurora .a2 {
    width: 460px;
    height: 460px;
    right: 5%;
    top: 0;
    background: var(--brand);
    opacity: .7;
    animation-delay: -5s
}

.aurora .a3 {
    width: 380px;
    height: 380px;
    left: 40%;
    top: 35%;
    background: var(--coral);
    opacity: .5;
    animation-delay: -9s
}

@keyframes drift {
    to {
        transform: translate(60px,40px) scale(1.15)
    }
}

[data-bs-theme="light"] .aurora {
    opacity: .35
}

.neon-text {
    background: linear-gradient(100deg,var(--brand) 10%,color-mix(in srgb,var(--brand) 40%,var(--brand-2)) 50%,var(--coral) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

[data-bs-theme="light"] .neon-text {
    background: linear-gradient(100deg,var(--brand-2),var(--coral));
    -webkit-background-clip: text;
    background-clip: text
}

.hero-neon h1 {
    font-size: clamp(2.8rem,7.4vw,7rem);
    line-height: .96;
    letter-spacing: -.05em;
    margin: 1.3rem 0 1.5rem
}

.neon-orbit {
    position: relative;
    aspect-ratio: 1;
    max-width: 520px;
    margin-inline:auto}

.neon-orbit .no-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(from 0deg,var(--brand),var(--brand-2),var(--coral),var(--brand));
    animation: spin 10s linear infinite;
    -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
    mask: radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
    box-shadow: 0 0 60px color-mix(in srgb,var(--brand-2) 60%,transparent)
}

.neon-orbit .no-photo {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    overflow: hidden
}

.neon-orbit .no-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: color-mix(in srgb,var(--surface) 80%,transparent);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.5)
}

.neon-orbit .no-chip .bi {
    color: var(--brand)
}

[data-bs-theme="light"] .neon-orbit .no-chip .bi {
    color: var(--brand-2)
}

.neon-orbit .c1 {
    left: -6%;
    top: 18%
}

.neon-orbit .c2 {
    right: -8%;
    top: 42%
}

.neon-orbit .c3 {
    left: 6%;
    bottom: 6%
}

@media (max-width: 575.98px) {
    .neon-orbit .c1 {
        left:0
    }

    .neon-orbit .c2 {
        right: 0
    }
}

.neon-card {
    position: relative;
    padding: 2rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s ease
}

.neon-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,var(--brand),var(--brand-2),var(--coral));
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease
}

.neon-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -80px;
    border-radius: 50%;
    background: var(--brand-2);
    filter: blur(60px);
    opacity: 0;
    z-index: -1;
    transition: opacity .35s ease
}

.neon-card:hover {
    transform: translateY(-6px)
}

.neon-card:hover::before {
    opacity: 1
}

.neon-card:hover::after {
    opacity: .45
}

.neon-card .ic {
    font-size: 2rem;
    color: var(--brand);
    margin-bottom: 1.4rem;
    display: block
}

[data-bs-theme="light"] .neon-card .ic {
    color: var(--brand-2)
}

.neon-card .num {
    position: absolute;
    right: 1.5rem;
    top: 1.3rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--muted);
    opacity: .5
}

.glow-band {
    position: relative;
    border-radius: 36px;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    isolation: isolate
}

.glow-band img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2
}

.glow-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,rgba(8,8,10,.9),rgba(8,8,10,.35)),radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--brand-2) 60%,transparent),transparent 55%)
}

.glow-band .gb-body {
    padding: clamp(1.8rem,5vw,4rem);
    max-width: 720px
}

.hero-seo {
    overflow: hidden;
    padding-block:clamp(2rem,5vw,4rem) clamp(3rem,6vw,5rem)}

.audit-form {
    display: flex;
    gap: .4rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .4rem .4rem .4rem 1.2rem;
    box-shadow: var(--shadow);
    max-width: 540px
}

.audit-form .bi-globe2 {
    color: var(--muted)
}

.audit-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: .6rem .2rem;
    font-size: 1.02rem
}

.audit-form input:focus {
    outline: none
}

.audit-form:focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 22%,transparent),var(--shadow)
}

.seo-art {
    position: relative;
    max-width: 600px;
    margin-inline:auto;aspect-ratio: 1 / .95
}

.seo-art .sa-photo {
    position: absolute;
    inset: 0 12% 10% 10%;
    border-radius: 32px;
    overflow: hidden
}

.serp {
    position: absolute;
    z-index: 2;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem
}

.serp-result {
    left: -2%;
    bottom: 0;
    width: 70%
}

.serp-result .s-url {
    font-size: .75rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .4rem
}

.serp-result .s-url .fav {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand);
    display: grid;
    place-items: center;
    font-size: .7rem;
    color: var(--ink)
}

.serp-result .s-title {
    font-weight: 600;
    color: var(--brand-2);
    margin: .3rem 0 .2rem;
    font-size: 1rem;
    line-height: 1.3
}

[data-bs-theme="dark"] .serp-result .s-title {
    color: color-mix(in srgb,var(--brand-2) 50%,#fff)
}

.serp-result .s-desc {
    font-size: .8rem;
    color: var(--muted);
    margin: 0
}

.serp-result .s-pos {
    position: absolute;
    right: -14px;
    top: -14px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 0 0 5px var(--paper)
}

.serp-rank {
    right: 0;
    top: 8%;
    width: 46%
}

.serp-rank svg {
    width: 100%;
    height: 60px;
    display: block;
    margin-top: .4rem
}

.serp-rank .line {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 3;
    stroke-linecap: round
}

[data-bs-theme="dark"] .serp-rank .line {
    stroke: var(--brand)
}

.serp-rank .v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -.03em;
    line-height: 1
}

.serp-rank .up {
    color: #15803d;
    font-weight: 600;
    font-size: .8rem
}

@media (max-width: 575.98px) {
    .serp-result {
        width:86%
    }

    .serp-rank {
        width: 58%
    }

    .serp-result .s-desc {
        display: none
    }
}

.kw-table {
    width: 100%;
    border-collapse: collapse
}

.kw-table th {
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    padding: .6rem .4rem;
    border-bottom: 1px solid var(--line);
    text-align: start
}

.kw-table td {
    padding: .85rem .4rem;
    border-bottom: 1px solid var(--line)
}

.kw-table tr:last-child td {
    border-bottom: 0
}

.kw-table .pos {
    font-family: var(--font-display);
    font-weight: 700
}

.kw-table .chg {
    color: #15803d;
    font-weight: 600;
    font-size: .9rem
}

[data-bs-theme="dark"] .kw-table .chg,[data-bs-theme="dark"] .serp-rank .up {
    color: #6fdc9c
}

.hero-me {
    overflow: hidden;
    padding-block:clamp(2rem,5vw,4rem) clamp(3rem,6vw,5rem)}

.hero-me h1 {
    font-size: clamp(2.6rem,6.2vw,5.8rem);
    margin: 1.2rem 0 1.4rem
}

.hero-me .hi {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.4rem,2.4vw,2rem);
    letter-spacing: -.02em
}

.me-photo {
    position: relative;
    max-width: 480px;
    margin-inline:auto}

.me-photo .mp-img {
    aspect-ratio: 4 / 5;
    border-radius: 400px 400px 40px 40px;
    overflow: hidden;
    position: relative;
    z-index: 1
}

.me-photo .mp-bg {
    position: absolute;
    inset: 8% -6% -4% 10%;
    border-radius: 400px 400px 40px 40px;
    background: var(--brand);
    transform: rotate(5deg)
}

.me-photo .mp-badge {
    position: absolute;
    z-index: 2;
    left: -8%;
    bottom: 12%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: .8rem 1rem;
    box-shadow: var(--shadow);
    display: flex;
    gap: .7rem;
    align-items: center;
    font-size: .88rem
}

.me-photo .mp-badge .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.25)
}

.me-photo .hv-sticker {
    right: -6%;
    top: 6%;
    z-index: 2
}

@media (max-width: 575.98px) {
    .me-photo .mp-badge {
        left:0
    }

    .me-photo .hv-sticker {
        right: 0
    }
}

.signature {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 2.4rem;
    letter-spacing: -.03em;
    line-height: 1
}

.offer {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column
}

.offer .o-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -.04em;
    margin-top: auto;
    padding-top: 1.2rem
}

.offer .o-price small {
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0
}

.offer.is-brand {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand);
    --muted: rgba(18,18,18,.7)
}

.offer.is-brand .ic {
    background: var(--ink);
    color: var(--brand)
}

.exp-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding-block:1.3rem;border-bottom: 1px solid var(--line)
}

.exp-row:first-child {
    border-top: 1px solid var(--line)
}

.exp-row strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.02em
}

.exp-row span {
    color: var(--muted)
}

@media (max-width: 575.98px) {
    .exp-row {
        grid-template-columns:1fr auto
    }

    .exp-row .er-year {
        grid-column: 1 / -1
    }
}

.about>.container {
    z-index: 1
}

.bare-header {
    position: relative;
    background: transparent
}

.bare-main {
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column
}

.bare-main>* {
    flex: 1 0 auto
}

.bare-footer {
    padding: 1.4rem 0;
    font-size: .86rem;
    color: var(--muted);
    border-top: 1px solid var(--line)
}

.bare-footer a {
    color: inherit
}

.cart-btn {
    position: relative
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--brand-2);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center
}

.cart-count:empty,.cart-count[data-n="0"] {
    display: none
}

.tool-cta .btn-line {
    border-color: var(--ink);
    color: var(--ink)
}

.tool-cta .btn-line:hover {
    background: var(--ink);
    color: #fff
}

.fa-ring-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    flex: none
}

.fa-ring {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg)
}

.fa-ring circle,.fa-ring path {
    fill: none;
    stroke-width: 12
}

.fa-ring-bg {
    stroke: var(--surface-2)
}

.fa-ring-val {
    stroke: var(--brand-2);
    stroke-linecap: round;
    stroke-dasharray: var(--v,0) 100;
    transition: stroke-dasharray 1.2s cubic-bezier(.2,.7,.2,1)
}

[data-bs-theme="dark"] .fa-ring-val {
    stroke: var(--brand)
}

.fa-ring-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1
}

.fa-ring-text b {
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: -.04em
}

.fa-ring-text small {
    font-size: .7rem;
    color: var(--muted)
}

.fa-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    grid-template-areas: "text form" "photo form";
    gap: 2rem clamp(2rem,4vw,4rem);
    align-items: start
}

.fa-hero-text {
    grid-area: text
}

.fa-hero-text h1 {
    max-width: 14ch
}

.fa-hero-photo {
    grid-area: photo;
    position: relative;
    margin-bottom: 1rem
}

.fa-hero-form {
    grid-area: form
}

.fa-photo {
    aspect-ratio: 16 / 10;
    border-radius: 240px 240px 28px 28px;
    box-shadow: var(--shadow)
}

.fa-hero-photo .fa-photo-card {
    top: auto;
    right: -1rem;
    bottom: -1rem;
    max-width: 270px
}

.fa-photo-card .k {
    display: block;
    line-height: 1.3
}

.fa-avatars {
    position: absolute;
    left: -1rem;
    top: 18%;
    display: flex;
    gap: .7rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .4rem 1.1rem .4rem .4rem;
    box-shadow: var(--shadow);
    font-size: .88rem;
    line-height: 1.2
}

.fa-avatars .avatar {
    border-color: var(--surface)
}

.fa-form-card {
    position: relative;
    box-shadow: var(--shadow)
}

.fa-free-tag {
    position: absolute;
    right: 1.4rem;
    top: 1.4rem;
    background: var(--brand);
    color: var(--ink);
    font-weight: 600
}

.form-soft textarea.fa-textarea {
    min-height: 96px
}

@media (max-width: 991.98px) {
    .fa-hero-grid {
        grid-template-columns:1fr;
        grid-template-areas: "text" "form" "photo"
    }

    .fa-hero-photo {
        margin-top: 1rem
    }

    .fa-hero-photo .fa-photo-card {
        right: .5rem
    }

    .fa-avatars {
        left: .5rem
    }
}

@media (max-width: 575.98px) {
    .fa-photo {
        border-radius:140px 140px 22px 22px;
        aspect-ratio: 4 / 3.4
    }

    .fa-avatars {
        left: .5rem;
        top: auto;
        bottom: 4.5rem;
        display: none
    }

    .fa-hero-photo .fa-photo-card {
        right: .5rem;
        left: .5rem;
        max-width: none
    }

    .fa-free-tag {
        position: static;
        display: inline-block;
        margin-bottom: .8rem
    }
}

.fa-report {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 580px;
    margin-inline:auto}

.fa-report-photo {
    position: absolute;
    inset: 0 8% 12% 4%;
    border-radius: 32px
}

.fa-report .fa-report-chip {
    left: 0;
    top: 7%
}

.fa-score-card,.fa-bars-card {
    position: absolute;
    z-index: 2;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 1rem 1.2rem
}

.fa-score-card {
    left: -2%;
    bottom: 0;
    display: flex;
    gap: 1rem;
    align-items: center
}

.fa-bars-card {
    right: 0;
    top: 34%;
    width: min(56%,280px)
}

.fa-bar {
    display: grid;
    grid-template-columns: 4.6rem 1fr 1.6rem;
    gap: .6rem;
    align-items: center;
    font-size: .8rem
}

.fa-bar + .fa-bar {
    margin-top: .55rem
}

.fa-bar span {
    color: var(--muted)
}

.fa-bar b {
    text-align: end
}

.fa-bar i {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    position: relative;
    overflow: hidden
}

.fa-bar i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w,50%);
    border-radius: inherit;
    background: var(--brand-2)
}

.fa-bar i.is-mid::after {
    background: #f5a623
}

.fa-bar i.is-low::after {
    background: var(--coral)
}

[data-bs-theme="dark"] .fa-bar i:not(.is-mid):not(.is-low)::after {
    background: var(--brand)
}

.fa-check-card {
    padding: 1.4rem
}

.fa-check-card .ic {
    margin-bottom: 1rem
}

.fa-check-card h3 {
    font-size: 1.15rem
}

@media (max-width: 575.98px) {
    .fa-report {
        aspect-ratio:1 / 1.15
    }

    .fa-report-photo {
        inset: 0 0 18% 0
    }

    .fa-bars-card {
        width: 64%;
        top: 30%
    }

    .fa-score-card {
        left: 0;
        padding: .8rem 1rem
    }
}

.fa-finding {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.3rem,3vw,1.8rem);
    transition: transform .3s ease
}

.fa-finding + .fa-finding {
    margin-top: 1rem
}

.fa-finding:hover {
    transform: translateX(6px)
}

.fa-finding h3 {
    font-size: 1.3rem;
    margin: .9rem 0 .5rem
}

.fa-sev {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .04em
}

.fa-sev::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor
}

.fa-sev.is-high {
    background: var(--coral);
    color: var(--ink)
}

.fa-sev.is-mid {
    background: var(--brand);
    color: var(--ink)
}

.fa-sev.is-low {
    background: var(--brand-2);
    color: #fff
}

.fa-fix {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .7rem;
    align-items: center;
    padding: .75rem 1rem;
    border-radius: 14px;
    background: var(--surface-2);
    font-size: .92rem
}

.fa-fix .bi {
    color: var(--brand)
}

.fa-gain {
    margin-inline-start:auto;font-weight: 700;
    color: var(--brand);
    white-space: nowrap
}

.fa-findings-photo {
    border-radius: var(--radius);
    aspect-ratio: 4 / 3
}

@media (max-width: 991.98px) {
    .fa-findings-photo {
        display:none
    }
}

.fa-quote-photo {
    position: relative;
    max-width: 380px
}

.fa-quote-photo .ph {
    aspect-ratio: 4 / 5;
    border-radius: 260px 260px 28px 28px
}

.fa-quote-badge {
    position: absolute;
    left: -.8rem;
    bottom: 1.4rem;
    background: var(--brand);
    color: var(--ink);
    border-radius: 999px;
    padding: .55rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: var(--shadow)
}

@media (max-width: 575.98px) {
    .fa-quote-badge {
        left:.6rem
    }
}

.roi-hero-art {
    position: relative;
    max-width: 520px;
    margin-inline:auto;padding: 1.5rem 0 2rem 1.5rem
}

.roi-hero-photo {
    aspect-ratio: 5 / 4;
    border-radius: 28px 220px 28px 28px;
    box-shadow: var(--shadow)
}

.roi-hero-art .roi-hero-card {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0
}

.roi-hero-art .roi-hero-chip {
    left: auto;
    right: 1rem;
    top: 0
}

.roi-inputs {
    padding: clamp(1.4rem,3.5vw,2.2rem)
}

.roi-field + .roi-field {
    margin-top: 1.5rem
}

.roi-field-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .35rem
}

.roi-field-head label {
    font-weight: 600;
    font-size: .92rem
}

.roi-num {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .3rem .7rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem
}

.roi-num:focus-within {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--brand-2) 20%,transparent)
}

.roi-num span {
    color: var(--muted);
    font-weight: 500
}

.roi-num input {
    width: 5.6ch;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: end;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield
}

.roi-num input:focus {
    outline: none
}

.roi-num input::-webkit-outer-spin-button,.roi-num input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.roi-range {
    height: 1.6rem
}

.roi-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--brand-2) calc(var(--p,30) * 1%),var(--surface-2) 0)
}

.roi-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2)
}

.roi-range::-moz-range-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--brand-2)
}

.roi-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -8px;
    background: var(--surface);
    border: 6px solid var(--brand-2)
}

.roi-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--surface);
    border: 6px solid var(--brand-2)
}

.roi-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 30%,transparent)
}

[data-bs-theme="dark"] .roi-range::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,var(--brand) calc(var(--p,30) * 1%),var(--surface-2) 0)
}

[data-bs-theme="dark"] .roi-range::-moz-range-progress {
    background: var(--brand)
}

[data-bs-theme="dark"] .roi-range::-webkit-slider-thumb {
    border-color: var(--brand)
}

[data-bs-theme="dark"] .roi-range::-moz-range-thumb {
    border-color: var(--brand)
}

.roi-switch .form-check-input {
    width: 2.4em;
    height: 1.3em;
    cursor: pointer
}

.roi-switch .form-check-input:checked {
    background-color: var(--brand-2);
    border-color: var(--brand-2)
}

.roi-switch .form-check-label {
    padding-top: .15rem;
    padding-inline-start:.3rem}

.roi-out {
    border-radius: 28px;
    padding: clamp(1.4rem,3.5vw,2.4rem);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden
}

.roi-out::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -140px;
    top: -180px;
    border-radius: 50%;
    background: radial-gradient(circle,color-mix(in srgb,var(--brand-2) 55%,transparent),transparent 65%);
    pointer-events: none
}

.roi-out>* {
    position: relative
}

.roi-out-label {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.roi-big {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.8rem,6vw,4.6rem);
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--brand);
    margin-top: .4rem
}

.roi-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: color-mix(in srgb,#22c55e 18%,transparent);
    color: #6fdc9c;
    font-weight: 600;
    font-size: .86rem
}

.roi-badge.is-warn {
    background: color-mix(in srgb,var(--coral) 20%,transparent);
    color: var(--coral)
}

.roi-tiles {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    margin: 1.6rem 0;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden
}

.roi-tiles>div {
    background: var(--surface);
    padding: 1rem 1.1rem
}

.roi-tiles dt {
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted)
}

.roi-tiles dd {
    margin: .2rem 0 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    letter-spacing: -.03em;
    line-height: 1.1
}

.roi-tiles .is-hi dd {
    color: var(--brand)
}

.roi-tiles dd.is-neg {
    color: var(--coral)
}

.roi-chart {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1rem 1.1rem .6rem
}

.roi-chart svg {
    width: 100%;
    height: auto;
    display: block
}

.roi-legend {
    display: flex;
    gap: 1rem;
    color: var(--muted)
}

.roi-legend span {
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

.lg-bar {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--brand-2)
}

.lg-line {
    width: 16px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand)
}

.roi-bar {
    fill: color-mix(in srgb,var(--brand-2) 85%,#fff)
}

.roi-line {
    fill: none;
    stroke: var(--brand);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round
}

.roi-dot {
    fill: var(--brand);
    stroke: var(--surface);
    stroke-width: 3
}

.roi-grid {
    stroke: var(--line);
    stroke-dasharray: 3 5
}

.roi-zero {
    stroke: var(--muted);
    stroke-width: 1
}

.roi-lbl {
    font-size: 11px;
    fill: var(--muted);
    font-family: var(--font-body)
}

.roi-btn-ghost {
    border: 1.5px solid rgba(255,255,255,.4);
    color: #fff
}

.roi-btn-ghost:hover {
    background: #fff;
    color: var(--ink)
}

.roi-note {
    color: var(--muted)
}

@media (max-width: 575.98px) {
    .roi-tiles {
        grid-template-columns:1fr 1fr
    }

    .roi-tiles dd {
        font-size: 1.3rem
    }

    .roi-lbl {
        font-size: 19px
    }
}

.roi-math-art {
    position: relative;
    padding-bottom: 2rem
}

.roi-math-art .ph {
    aspect-ratio: 4 / 3;
    border-radius: 220px 28px 28px 28px
}

.roi-formula {
    position: absolute;
    right: 1rem;
    bottom: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: .9rem 1.2rem;
    box-shadow: var(--shadow)
}

.roi-formula b {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -.02em
}

.roi-steps {
    list-style: none;
    counter-reset: roi;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .8rem
}

.roi-steps li {
    counter-increment: roi;
    position: relative;
    padding: 1.3rem 1.4rem 1.3rem 4.6rem
}

.roi-steps li::before {
    content: counter(roi,decimal-leading-zero);
    position: absolute;
    left: 1.3rem;
    top: 1.25rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9rem
}

.roi-steps h3 {
    font-size: 1.15rem;
    margin-bottom: .3rem
}

.roi-steps p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: .6rem
}

.roi-steps code {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text);
    padding: .3rem .65rem;
    border-radius: 8px;
    font-size: .85rem
}

.sck-hero h1 {
    max-width: 12ch
}

.sck-form {
    max-width: 560px
}

.sck-form[aria-invalid="true"],.sck-form:has(input[aria-invalid="true"]) {
    border-color: var(--coral)
}

.sck-try {
    border: 1px dashed var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: .15rem .65rem;
    font-size: .82rem;
    font-weight: 500;
    margin: .15rem .1rem
}

.sck-try:hover {
    border-style: solid;
    border-color: var(--brand-2)
}

.sck-error {
    display: block;
    color: var(--coral);
    font-weight: 600
}

.sck-error:empty {
    display: none
}

.sck-demo-note {
    color: var(--muted)
}

.sck-demo-note .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .sck-demo-note .bi {
    color: var(--brand)
}

.sck-art .sck-art-score {
    left: -2%;
    bottom: 4%
}

.sck-art .sck-art-list {
    right: 0;
    top: 10%;
    display: grid;
    gap: .45rem;
    min-width: 200px
}

.sck-mini {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .88rem;
    font-weight: 600
}

.sck-mini .bi,.sck-ico {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .8rem;
    flex: none
}

.is-pass>.bi,.sck-item.is-pass .sck-ico {
    background: color-mix(in srgb,#22c55e 18%,transparent);
    color: #166534
}

.is-warn>.bi,.sck-item.is-warn .sck-ico {
    background: color-mix(in srgb,#f5a623 22%,transparent);
    color: #b45309
}

.is-fail>.bi,.sck-item.is-fail .sck-ico {
    background: color-mix(in srgb,var(--coral) 22%,transparent);
    color: #c2410c
}

[data-bs-theme="dark"] .is-pass>.bi,[data-bs-theme="dark"] .sck-item.is-pass .sck-ico {
    color: #6fdc9c
}

[data-bs-theme="dark"] .is-warn>.bi,[data-bs-theme="dark"] .sck-item.is-warn .sck-ico {
    color: #fbbf24
}

[data-bs-theme="dark"] .is-fail>.bi,[data-bs-theme="dark"] .sck-item.is-fail .sck-ico {
    color: var(--coral)
}

@media (max-width: 575.98px) {
    .sck-art .sck-art-list {
        min-width:0
    }
}

.sck-empty {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: clamp(1.4rem,3vw,2rem);
    border-style: dashed;
    background: transparent
}

.sck-empty-icons {
    display: flex;
    flex: none
}

.sck-empty-icons span {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand-2);
    font-size: 1.2rem
}

.sck-empty-icons span + span {
    margin-inline-start:-10px}

.sck-empty-icons span:nth-child(2) {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

[data-bs-theme="dark"] .sck-empty-icons span {
    color: var(--brand)
}

[data-bs-theme="dark"] .sck-empty-icons span:nth-child(2) {
    color: var(--ink)
}

@media (max-width: 575.98px) {
    .sck-empty {
        flex-direction:column;
        align-items: flex-start
    }
}

.sck-progress {
    padding: clamp(1.4rem,3vw,2.2rem)
}

.sck-pct {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem
}

.sck-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.sck-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--brand-2),var(--brand))
}

.sck-steps {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .8rem;
    font-size: .88rem;
    color: var(--muted)
}

.sck-steps li {
    display: flex;
    gap: .5rem;
    align-items: flex-start
}

.sck-steps li::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: .15rem;
    border-radius: 50%;
    border: 2px solid var(--line)
}

.sck-steps li.is-active {
    color: var(--text);
    font-weight: 600
}

.sck-steps li.is-active::before {
    border-color: var(--brand-2);
    border-top-color: transparent;
    animation: spin .8s linear infinite
}

.sck-steps li.is-done {
    color: var(--text)
}

.sck-steps li.is-done::before {
    background: var(--brand-2);
    border-color: var(--brand-2)
}

@media (max-width: 767.98px) {
    .sck-steps {
        grid-template-columns:1fr 1fr
    }
}

.sck-summary {
    padding: 1.8rem;
    text-align: center
}

.sck-ring {
    width: 160px;
    height: 160px;
    margin: 0 auto 1rem
}

.sck-ring .fa-ring-text b {
    font-size: 3rem
}

.sck-ring .fa-ring-text small {
    font-size: .85rem
}

.sck-grade {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: .3rem
}

.sck-counts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .5rem;
    font-size: .8rem
}

.sck-counts span {
    border-radius: 14px;
    padding: .6rem .3rem;
    background: var(--surface-2);
    color: var(--muted)
}

.sck-counts b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text);
    line-height: 1.1
}

.sck-counts .is-pass b {
    color: #166534
}

.sck-counts .is-warn b {
    color: #b45309
}

.sck-counts .is-fail b {
    color: #c2410c
}

[data-bs-theme="dark"] .sck-counts .is-pass b {
    color: #6fdc9c
}

[data-bs-theme="dark"] .sck-counts .is-warn b {
    color: #fbbf24
}

[data-bs-theme="dark"] .sck-counts .is-fail b {
    color: var(--coral)
}

.sck-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .7rem
}

.sck-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    animation: sckIn .45s ease both
}

.sck-item.is-pass {
    border-left-color: #22c55e
}

.sck-item.is-warn {
    border-left-color: #f5a623
}

.sck-item.is-fail {
    border-left-color: var(--coral)
}

.sck-item .sck-ico {
    width: 32px;
    height: 32px;
    font-size: 1rem
}

.sck-body {
    flex: 1;
    min-width: 0
}

.sck-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    margin-bottom: .2rem
}

.sck-status {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted)
}

.sck-item p {
    color: var(--muted);
    font-size: .95rem
}

.sck-item details {
    margin-top: .6rem
}

.sck-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    color: var(--brand-2);
    width: max-content
}

[data-bs-theme="dark"] .sck-item summary {
    color: var(--brand)
}

.sck-item details p {
    margin-top: .4rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text)
}

@keyframes sckIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }
}

.sck-list .sck-item:nth-child(2) {
    animation-delay: .04s
}

.sck-list .sck-item:nth-child(3) {
    animation-delay: .08s
}

.sck-list .sck-item:nth-child(4) {
    animation-delay: .12s
}

.sck-list .sck-item:nth-child(5) {
    animation-delay: .16s
}

.sck-list .sck-item:nth-child(n+6) {
    animation-delay: .2s
}

.sck-what {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem
}

.sck-what>div {
    padding: 1.5rem;
    transition: transform .3s ease
}

.sck-what>div:hover {
    transform: translateY(-4px)
}

.sck-what .bi {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.25rem;
    margin-bottom: 1rem
}

.sck-what h3 {
    font-size: 1.15rem;
    margin-bottom: .3rem
}

.sck-what p {
    color: var(--muted);
    font-size: .92rem;
    margin: 0
}

@media (max-width: 991.98px) {
    .sck-what {
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 420px) {
    .sck-what {
        grid-template-columns:1fr
    }
}

.sck-pill {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    color: #fff
}

.sck-pill .dot {
    background: var(--brand)
}

#sckResults {
    scroll-margin-top: 90px
}

.bk-step {
    margin-bottom: clamp(2rem,4vw,3rem);
    min-width: 0
}

.bk-step-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.02em;
    margin-bottom: 1.1rem;
    float: none;
    width: auto
}

.bk-no {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--brand);
    font-size: 1rem;
    flex: none
}

[data-bs-theme="dark"] .bk-no {
    background: var(--brand);
    color: var(--ink)
}

.bk-person {
    display: block;
    height: 100%;
    cursor: pointer;
    position: relative
}

.bk-person input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.bk-person-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: .7rem .7rem 1.1rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 2px solid var(--line);
    transition: border-color .2s ease,transform .25s ease,box-shadow .25s ease;
    position: relative
}

.bk-person:hover .bk-person-body {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.bk-person input:checked + .bk-person-body {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 16%,transparent)
}

[data-bs-theme="dark"] .bk-person input:checked + .bk-person-body {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)
}

.bk-person input:focus-visible + .bk-person-body {
    outline: 3px solid var(--brand-2);
    outline-offset: 3px
}

.bk-person-img {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    margin-bottom: .9rem
}

.bk-person-img img {
    transition: transform .5s ease
}

.bk-person:hover .bk-person-img img {
    transform: scale(1.04)
}

.bk-person strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: -.02em;
    padding-inline:.4rem}

.bk-person small {
    color: var(--muted);
    font-size: .85rem;
    padding-inline:.4rem}

.bk-person-meta {
    margin-top: .6rem;
    padding-inline:.4rem;font-size: .82rem;
    font-weight: 600
}

.bk-person-meta .bi {
    color: #f5a623
}

.bk-tick {
    position: absolute;
    right: 1.2rem;
    top: 1.2rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: transparent;
    display: grid;
    place-items: center;
    transition: all .2s ease;
    box-shadow: var(--shadow)
}

.bk-person input:checked + .bk-person-body .bk-tick {
    background: var(--brand);
    color: var(--ink)
}

@media (max-width: 575.98px) {
    .bk-person-body {
        display:grid;
        grid-template-columns: 76px 1fr;
        column-gap: .9rem;
        align-content: center;
        padding: .6rem 3.4rem .6rem .6rem
    }

    .bk-person-img {
        width: 76px;
        grid-row: 1 / span 3;
        margin: 0
    }

    .bk-person-body>strong,.bk-person-body>small,.bk-person-meta {
        padding: 0;
        margin: 0
    }

    .bk-tick {
        right: .8rem;
        top: 50%;
        transform: translateY(-50%)
    }
}

.bk-when {
    padding: clamp(1.2rem,3vw,1.8rem)
}

.bk-cal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem
}

.bk-cal-head strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.02em
}

.bk-cal-head .btn-icon {
    width: 40px;
    height: 40px;
    border-width: 1px;
    border-color: var(--line)
}

.bk-cal-head .btn-icon:disabled {
    opacity: .35
}

.bk-cal-week,.bk-cal-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: .3rem;
    text-align: center
}

.bk-cal-week span {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: .4rem
}

.bk-day {
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
    font-size: .95rem;
    display: grid;
    place-items: center;
    transition: background-color .15s ease,color .15s ease,transform .15s ease;
    position: relative
}

.bk-day:not(:disabled):hover {
    background: var(--brand);
    color: var(--ink);
    transform: translateY(-1px)
}

.bk-day:disabled {
    background: transparent;
    color: var(--muted);
    opacity: .45;
    cursor: not-allowed;
    font-weight: 400
}

.bk-day.is-full {
    opacity: .7;
    text-decoration: line-through;
    text-decoration-color: var(--coral)
}

.bk-day.is-today {
    border-color: var(--line);
    opacity: .8
}

.bk-day[aria-pressed="true"] {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .bk-day[aria-pressed="true"] {
    background: var(--brand);
    color: var(--ink)
}

.bk-cal-legend {
    display: flex;
    gap: 1.2rem;
    margin-top: 1rem
}

.bk-cal-legend span {
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

.bk-cal-legend i {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--surface-2)
}

.bk-cal-legend i.is-full {
    background: transparent;
    border: 1px solid var(--coral)
}

.bk-slots-wrap {
    height: 100%;
    padding-inline-start:clamp(0rem,2vw,1.5rem);border-inline-start:1px solid var(--line)}

@media (max-width: 767.98px) {
    .bk-slots-wrap {
        border:0;
        padding: 1.2rem 0 0;
        border-top: 1px solid var(--line)
    }
}

.bk-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem
}

.bk-slots .btn {
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    --bs-btn-padding-y: .6rem;
    font-size: .95rem;
    font-weight: 600;
    border-radius: 12px
}

.bk-slots .btn:hover {
    border-color: var(--brand-2)
}

.bk-slots .btn-check:checked + .btn {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: #fff
}

[data-bs-theme="dark"] .bk-slots .btn-check:checked + .btn {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

.bk-slots .btn-check:disabled + .btn {
    text-decoration: line-through;
    opacity: .4
}

.bk-slots .btn-check:focus-visible + .btn {
    outline: 3px solid var(--brand-2);
    outline-offset: 2px
}

.bk-slots p {
    grid-column: 1 / -1
}

.bk-summary {
    border-radius: var(--radius);
    padding: 1.6rem;
    background: var(--brand);
    color: var(--ink);
    position: relative;
    overflow: hidden
}

.bk-summary::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -90px;
    bottom: -110px;
    border-radius: 50%;
    border: 40px solid rgba(18,18,18,.07);
    pointer-events: none
}

.bk-summary small {
    opacity: .75
}

.bk-summary .avatar {
    border: 3px solid rgba(255,255,255,.7)
}

.bk-sum-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .1rem;
    position: relative;
    z-index: 1
}

.bk-sum-list li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .65rem 0;
    border-top: 1px solid rgba(18,18,18,.14);
    font-weight: 600;
    font-size: .95rem
}

.bk-sum-list .bi {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: .9rem;
    flex: none;
    margin-top: -.15rem
}

.bk-form-card {
    padding: clamp(1.3rem,3vw,1.8rem)
}

.form-soft textarea.bk-textarea {
    min-height: 96px
}

.bk-side-photo {
    position: relative;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3
}

.bk-live {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(18,18,18,.75);
    color: #fff;
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px)
}

.bk-live .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.3)
}

.bk-agenda {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
    position: relative
}

.bk-agenda li {
    display: grid;
    grid-template-columns: 82px 1fr;
    column-gap: .9rem;
    position: relative
}

.bk-agenda li span {
    grid-row: span 2;
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand-2-text);
    background: color-mix(in srgb,var(--brand-2) 10%,transparent);
    border-radius: 999px;
    padding: .2rem .4rem;
    height: max-content;
    text-align: center;
    white-space: nowrap
}

[data-bs-theme="dark"] .bk-agenda li span {
    color: var(--brand);
    background: color-mix(in srgb,var(--brand) 12%,transparent)
}

.bk-agenda small {
    color: var(--muted);
    font-size: .88rem
}

.bk-sum-note {
    position: relative;
    z-index: 1;
    margin: 1rem 0 0;
    font-size: .85rem;
    opacity: .8
}

.srch-hero h1.srch-title {
    font-size: clamp(2.4rem,5.4vw,4.6rem);
    max-width: 18ch;
    overflow-wrap: anywhere
}

.srch-form {
    max-width: none
}

.srch-form .bi-search {
    color: var(--muted)
}

.srch-toolbar {
    margin-bottom: 1.8rem
}

.filter-bar button.is-empty {
    opacity: .55
}

.srch-list {
    display: grid;
    gap: 1rem
}

.srch-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.4rem;
    align-items: center;
    padding: .8rem 1.4rem .8rem .8rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .3s ease,box-shadow .3s ease;
    position: relative
}

.srch-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.srch-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 16px
}

.srch-thumb img {
    transition: transform .6s ease
}

.srch-item:hover .srch-thumb img {
    transform: scale(1.06)
}

.srch-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .7rem;
    margin-bottom: .45rem
}

.srch-path {
    font-size: .8rem;
    color: var(--muted)
}

.srch-type-services {
    background: var(--brand);
    color: var(--ink)
}

.srch-type-cases {
    background: var(--brand-2);
    color: #fff
}

.srch-type-articles {
    background: color-mix(in srgb,var(--coral) 28%,var(--surface))
}

.srch-h {
    font-size: 1.35rem;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: .35rem
}

.srch-h a {
    text-decoration: none
}

.srch-h a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit
}

.srch-item:hover .srch-h a {
    text-decoration: underline;
    text-underline-offset: 4px
}

.srch-item p {
    color: var(--muted);
    font-size: .95rem;
    margin: 0
}

.srch-item mark,.srch-empty mark {
    padding: 0 .1em;
    border-radius: 4px;
    background: color-mix(in srgb,var(--brand) 70%,transparent);
    color: inherit
}

[data-bs-theme="dark"] .srch-item mark {
    background: color-mix(in srgb,var(--brand) 30%,transparent);
    color: var(--brand)
}

@media (max-width: 575.98px) {
    .srch-item {
        grid-template-columns:92px 1fr;
        gap: .9rem;
        padding: .7rem;
        align-items: start
    }

    .srch-thumb {
        aspect-ratio: 1;
        border-radius: 12px
    }

    .srch-h {
        font-size: 1.1rem
    }

    .srch-item p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .88rem
    }

    .srch-path {
        display: none
    }
}

.srch-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem
}

.srch-cat-empty {
    padding: 1.4rem;
    margin: 0;
    color: var(--muted)
}

.srch-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--text);
    font-weight: 600;
    text-decoration: underline
}

.srch-empty {
    text-align: center;
    padding: clamp(2rem,6vw,4rem) 1.5rem
}

.srch-empty-art {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 1.6rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 2.6rem
}

.srch-empty-art span {
    position: absolute;
    right: -8px;
    top: -6px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-2);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    box-shadow: 0 0 0 5px var(--surface)
}

.widget-h {
    font-size: 1.15rem;
    margin-bottom: 1rem
}

.srch-popular {
    list-style: none;
    padding: 0;
    margin: 0
}

.srch-popular a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    font-weight: 500
}

.srch-popular li:last-child a {
    border-bottom: 0
}

.srch-popular span {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted)
}

.srch-popular .bi {
    margin-inline-start:auto;opacity: .4;
    transition: opacity .2s ease,transform .2s ease
}

.srch-popular a:hover .bi {
    opacity: 1;
    transform: translate(2px,-2px)
}

.srch-popular a:hover {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .srch-popular a:hover {
    color: var(--brand)
}

.srch-promo {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 280px;
    margin-top: 1.25rem;
    border-radius: var(--radius);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    isolation: isolate
}

.srch-promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .6s ease
}

.srch-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,transparent 25%,rgba(10,10,12,.88))
}

.srch-promo:hover img {
    transform: scale(1.05)
}

.srch-promo-body {
    padding: 1.3rem;
    display: grid;
    gap: .4rem
}

.srch-promo-body .tag {
    justify-self: start;
    background: var(--brand);
    color: var(--ink)
}

.srch-promo-body strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.02em;
    line-height: 1.2
}

.srch-promo-body small {
    opacity: .85;
    font-weight: 600
}

.srch-promo + .widget {
    margin-top: 1.25rem
}

.cal-embed {
    position: relative;
    display: grid;
    min-height: var(--cal-h,700px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden
}

.cal-consent {
    align-self: center;
    justify-self: center;
    max-width: 30rem;
    padding: 2.5rem 1.5rem;
    text-align: center
}

.cal-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.5rem
}

.cal-consent p {
    color: var(--muted)
}

.cal-consent small {
    display: block;
    margin-top: .9rem;
    color: var(--muted);
    font-size: .8rem
}

.cal-frame {
    display: block;
    width: 100%;
    height: var(--cal-h,700px);
    border: 0
}

.cal-embed.is-loaded .cal-consent {
    display: none
}

.res-feature {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(1.5rem,3vw,2.5rem);
    align-items: center;
    padding: clamp(1.1rem,2.4vw,1.6rem);
    border-radius: clamp(26px,3.5vw,36px)
}

.res-feature-media {
    position: relative;
    border-radius: clamp(20px,2.6vw,28px);
    aspect-ratio: 4 / 3
}

.res-feature-media img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.res-feature:hover .res-feature-media img {
    transform: scale(1.03)
}

@media (max-width: 991.98px) {
    .res-feature {
        grid-template-columns:1fr
    }

    .res-feature-media {
        aspect-ratio: 16 / 10
    }
}

.res-live {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--coral);
    color: var(--ink)
}

.res-live .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
    animation: res-pulse 1.8s ease-in-out infinite
}

@keyframes res-pulse {
    50% {
        opacity: .25;
        transform: scale(.7)
    }
}

.res-replay {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .res-replay {
    background: #fff;
    color: var(--ink)
}

.res-feature-media .res-live,.res-feature-media .res-replay,.res-card-media .res-live,.res-card-media .res-replay {
    position: absolute;
    left: .9rem;
    top: .9rem;
    z-index: 2
}

.res-count {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    list-style: none;
    padding: 0;
    margin: 0
}

.res-count li {
    min-width: 74px;
    flex: 1 1 74px;
    text-align: center;
    padding: .7rem .4rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2)
}

.res-count b {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem,3vw,2.1rem);
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums
}

.res-count span {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.res-count.is-over li {
    background: var(--brand);
    color: var(--ink)
}

.res-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: transform .35s ease,box-shadow .35s ease
}

.res-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.res-card-media {
    position: relative;
    aspect-ratio: 16 / 10
}

.res-card-media img {
    transition: transform .6s ease
}

.res-card:hover .res-card-media img {
    transform: scale(1.06)
}

.res-card-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .7rem
}

.res-card-body h3 {
    font-size: 1.22rem
}

.res-card:hover h3 {
    text-decoration: underline;
    text-underline-offset: 4px
}

.res-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    font-size: .86rem;
    color: var(--muted)
}

.res-meta .bi {
    margin-inline-end:.25rem}

.res-card-foot {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    font-size: .9rem;
    font-weight: 600
}

.res-dur {
    position: absolute;
    right: .9rem;
    bottom: .9rem;
    z-index: 2;
    background: rgba(10,10,12,.72);
    color: #fff;
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    backdrop-filter: blur(6px)
}

.res-avatars {
    display: flex;
    align-items: center
}

.res-avatars img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--surface)
}

.res-avatars img + img {
    margin-inline-start:-10px}

.res-avatars .more {
    margin-inline-start:.55rem;font-size: .85rem;
    color: var(--muted)
}

.res-news {
    border-radius: clamp(26px,4vw,36px);
    padding: clamp(1.8rem,4.5vw,3.4rem);
    overflow: hidden;
    position: relative
}

.res-news::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -140px;
    top: -170px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--brand) 55%,transparent);
    filter: blur(10px);
    opacity: .25;
    pointer-events: none
}

.res-news .res-news-form {
    display: flex;
    gap: .4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .3rem .3rem .3rem 1.1rem;
    max-width: 460px
}

.res-news .res-news-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text)
}

.res-news .res-news-form input:focus {
    outline: none
}

.res-news .res-news-form:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--brand-2) 35%,transparent)
}

.res-reg {
    padding: 1.6rem
}

.res-reg .res-when {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line)
}

.res-reg .res-cal {
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: 16px;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1
}

.res-reg .res-cal b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.03em;
    display: block
}

.res-reg .res-cal span {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase
}

.res-zones {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    display: grid;
    gap: .35rem;
    font-size: .9rem
}

.res-zones li {
    display: flex;
    justify-content: space-between;
    gap: 1rem
}

.res-zones li span:first-child {
    color: var(--muted)
}

.res-seats {
    margin-bottom: 1.1rem
}

.res-seats .bar {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin-top: .45rem
}

.res-seats .bar i {
    display: block;
    height: 100%;
    width: var(--w,50%);
    border-radius: inherit;
    background: linear-gradient(90deg,var(--brand),var(--coral))
}

.res-seats small {
    color: var(--muted)
}

.res-poster {
    position: relative;
    border-radius: clamp(24px,4vw,40px);
    aspect-ratio: 16 / 9;
    display: block;
    color: #fff;
    text-decoration: none;
    isolation: isolate
}

.res-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,rgba(8,8,10,.35),transparent 45%,rgba(8,8,10,.6))
}

.res-poster .res-play {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 2;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 0;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 2rem;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.6);
    transition: transform .3s ease
}

.res-poster:hover .res-play {
    transform: scale(1.08)
}

.res-poster .res-poster-cap {
    position: absolute;
    z-index: 2;
    left: 1.2rem;
    right: 1.2rem;
    bottom: 1.1rem;
    font-size: .92rem
}

@media (max-width: 575.98px) {
    .res-poster {
        aspect-ratio:4 / 3
    }

    .res-poster .res-play {
        width: 64px;
        height: 64px;
        font-size: 1.5rem
    }
}

.res-agenda {
    list-style: none;
    padding: 0;
    margin: 0
}

.res-agenda li {
    display: grid;
    grid-template-columns: 92px 24px 1fr;
    gap: 0 1.1rem;
    padding-bottom: 1.8rem
}

.res-agenda li:last-child {
    padding-bottom: 0
}

.res-agenda .res-time {
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: -.02em;
    padding-top: .1rem;
    font-variant-numeric: tabular-nums
}

.res-agenda .res-rail {
    position: relative;
    display: grid;
    justify-items: center
}

.res-agenda .res-rail::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent);
    margin-top: .35rem
}

.res-agenda .res-rail::after {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: -1.8rem;
    width: 2px;
    background: var(--line)
}

.res-agenda li:last-child .res-rail::after {
    display: none
}

.res-agenda h3 {
    font-size: 1.1rem;
    margin-bottom: .25rem
}

.res-agenda p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem
}

@media (max-width: 575.98px) {
    .res-agenda li {
        grid-template-columns:70px 20px 1fr;
        gap: 0 .7rem
    }
}

.res-speaker {
    display: flex;
    gap: 1.2rem;
    padding: 1.5rem;
    height: 100%
}

.res-speaker .ph {
    width: 110px;
    flex: none;
    aspect-ratio: 3 / 4;
    border-radius: 18px
}

.res-speaker h3 {
    font-size: 1.15rem;
    margin-bottom: .1rem
}

.res-speaker .role {
    color: var(--brand-2);
    font-weight: 600;
    font-size: .9rem
}

[data-bs-theme="dark"] .res-speaker .role {
    color: var(--brand)
}

@media (max-width: 420px) {
    .res-speaker {
        flex-direction:column
    }

    .res-speaker .ph {
        width: 100%;
        aspect-ratio: 16 / 10
    }
}

.res-book-wrap {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem,4vw,3rem) 1rem
}

.res-book {
    position: relative;
    width: min(300px,72%);
    aspect-ratio: 3 / 4.1;
    border-radius: 6px 16px 16px 6px;
    background: var(--brand-2);
    color: #fff;
    box-shadow: 18px 24px 50px -18px rgba(18,18,18,.55);
    transform: rotate(-4deg);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 1.3rem 1.3rem 1.9rem
}

.res-book-wrap:hover .res-book {
    transform: rotate(-1deg) translateY(-6px)
}

.res-book::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    background: linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.14) 70%,rgba(0,0,0,.08))
}

.res-book::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -90px;
    bottom: -110px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .35
}

.res-book .bk-kicker {
    display: block;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .85;
    position: relative;
    z-index: 1
}

.res-book .bk-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.85rem;
    letter-spacing: -.035em;
    line-height: 1.04;
    margin-top: .6rem;
    position: relative;
    z-index: 1
}

.res-book .bk-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .8rem;
    font-weight: 600
}

.res-book .bk-foot .bi {
    font-size: 1.1rem
}

.res-book-pages {
    position: absolute;
    right: -10px;
    top: 14px;
    bottom: 14px;
    width: 12px;
    border-radius: 0 8px 8px 0;
    background: repeating-linear-gradient(180deg,#fff,#fff 3px,#ded8cb 3px,#ded8cb 5px)
}

.res-file {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .65rem;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--surface-2);
    color: var(--text)
}

.res-file .bi {
    font-size: .95rem
}

.res-file.is-pdf {
    background: color-mix(in srgb,var(--coral) 20%,var(--surface));
    color: color-mix(in srgb,var(--coral) 50%,var(--ink))
}

.res-file.is-sheet {
    background: color-mix(in srgb,#22c55e 18%,var(--surface));
    color: color-mix(in srgb,#15803d 80%,var(--text))
}

.res-file.is-figma {
    background: color-mix(in srgb,var(--brand-2) 16%,var(--surface));
    color: color-mix(in srgb,var(--brand-2) 75%,var(--text))
}

[data-bs-theme="dark"] .res-file.is-pdf {
    color: color-mix(in srgb,var(--coral) 70%,#fff)
}

[data-bs-theme="dark"] .res-file.is-sheet {
    color: #6fdc9c
}

[data-bs-theme="dark"] .res-file.is-figma {
    color: color-mix(in srgb,var(--brand-2) 45%,#fff)
}

.res-cover {
    position: relative;
    aspect-ratio: 4 / 3
}

.res-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.18),transparent 45%)
}

.res-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    background: var(--line);
    border-radius: var(--radius);
    overflow: hidden
}

.res-stats>div {
    background: var(--surface);
    padding: clamp(1.4rem,3vw,2.2rem)
}

.res-stats .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem,4.5vw,3.4rem);
    letter-spacing: -.05em;
    line-height: 1
}

.res-stats .n sup {
    font-size: .42em;
    top: -1.2em;
    color: var(--brand-2)
}

.res-stats p {
    margin: .6rem 0 0;
    color: var(--muted);
    font-size: .95rem
}

@media (max-width: 767.98px) {
    .res-stats {
        grid-template-columns:1fr 1fr
    }
}

.res-ind {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px;
    padding: 1.4rem;
    border-radius: var(--radius);
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    overflow: hidden
}

.res-ind img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.res-ind::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,rgba(10,10,12,.18) 10%,rgba(10,10,12,.55) 52%,rgba(10,10,12,.93))
}

.res-ind:hover img {
    transform: scale(1.07)
}

.res-ind .res-ind-metric {
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
    background: var(--brand);
    color: var(--ink);
    border-radius: 999px;
    padding: .4rem .85rem;
    font-weight: 700;
    font-size: .85rem
}

.res-ind h3 {
    font-size: 1.45rem;
    margin-bottom: .35rem
}

.res-ind p {
    margin: 0;
    font-size: .92rem;
    color: rgba(255,255,255,.82)
}

.res-ind .res-ind-go {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--brand)
}

.res-ind:hover h3 {
    text-decoration: underline;
    text-underline-offset: 4px
}

.res-search {
    display: flex;
    gap: .5rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem .5rem .45rem 1.2rem;
    max-width: 560px;
    box-shadow: var(--shadow)
}

.res-search .bi-search {
    color: var(--muted);
    font-size: 1.15rem
}

.res-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 1.05rem;
    padding: .55rem .2rem
}

.res-search input:focus {
    outline: none
}

.res-search:focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 22%,transparent),var(--shadow)
}

.res-search .res-clear {
    border: 0;
    background: var(--surface-2);
    color: var(--text);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.res-search .res-clear[hidden] {
    display: none
}

.res-faq-group[hidden],.res-faq-group .accordion-item[hidden] {
    display: none
}

.res-faq-group + .res-faq-group {
    margin-top: 2.6rem
}

.res-faq-group>h2 {
    font-size: clamp(1.6rem,2.8vw,2.1rem);
    margin-bottom: .4rem;
    scroll-margin-top: 110px
}

.res-faq-group>p {
    color: var(--muted)
}

.res-hit {
    background: var(--brand);
    color: var(--ink);
    border-radius: 4px;
    padding: 0 .12em
}

[data-bs-theme="dark"] .res-hit {
    background: var(--brand);
    color: var(--ink)
}

.res-empty {
    padding: 2.5rem 1.5rem;
    text-align: center
}

.res-empty .bi {
    font-size: 2.4rem;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .res-empty .bi {
    color: var(--brand)
}

.res-nav-count {
    font-size: .8rem;
    color: var(--muted)
}

.side-nav a.active .res-nav-count {
    color: inherit;
    opacity: .75
}

.res-help {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 0;
    border-radius: clamp(24px,4vw,34px);
    overflow: hidden
}

.res-help .res-help-photo {
    min-height: 300px;
    position: relative
}

.res-help .res-help-body {
    padding: clamp(1.6rem,4vw,3rem)
}

@media (max-width: 767.98px) {
    .res-help {
        grid-template-columns:1fr
    }

    .res-help .res-help-photo {
        min-height: 220px
    }
}

.res-check-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

@media (max-width: 575.98px) {
    .res-check-tiles {
        grid-template-columns:1fr
    }
}

.res-tile {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line)
}

.res-tile .bi {
    color: var(--brand-2);
    font-size: 1.3rem;
    line-height: 1.3
}

[data-bs-theme="dark"] .res-tile .bi {
    color: var(--brand)
}

.res-tile strong {
    display: block
}

.res-tile span {
    color: var(--muted);
    font-size: .92rem
}

.res-modal .modal-content {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 24px
}

.res-modal .modal-header,.res-modal .modal-footer {
    border-color: var(--line)
}

.res-quote-mini {
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.res-quote-mini .stars .bi {
    color: #f5a623;
    font-size: .9rem
}

.res-quote-mini footer {
    margin-top: auto;
    display: flex;
    gap: .75rem;
    align-items: center
}

.res-quote-mini footer img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover
}

@media (max-width: 575.98px) {
    .res-count {
        gap:.45rem
    }

    .res-count li {
        min-width: 60px;
        flex: 1 1 60px;
        padding: .6rem .3rem
    }
}

.shop-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: clamp(24px,4vw,40px);
    min-height: clamp(360px,36vw,480px);
    display: flex;
    align-items: flex-end;
    padding: clamp(1.5rem,4vw,3.5rem);
    color: #fff;
    background: var(--ink)
}

.shop-banner>img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.shop-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,rgba(10,10,12,.92) 8%,rgba(10,10,12,.72) 42%,rgba(10,10,12,.15) 85%)
}

.shop-banner-body {
    max-width: 34rem
}

.shop-banner-body h2 {
    color: #fff;
    margin: 1rem 0 .9rem;
    font-size: clamp(1.9rem,3.6vw,3rem)
}

.shop-banner-body p {
    color: rgba(255,255,255,.78);
    margin-bottom: 1.5rem
}

.shop-banner .pill {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
    color: #fff
}

.shop-banner .pill .dot {
    background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand) 25%,transparent)
}

.shop-code {
    font-size: .9rem;
    color: rgba(255,255,255,.8);
    padding-inline-start:.4rem}

.shop-code strong {
    color: var(--brand);
    letter-spacing: .04em
}

@media (max-width: 575.98px) {
    .shop-banner {
        min-height:420px
    }

    .shop-banner::after {
        background: linear-gradient(180deg,rgba(10,10,12,.35) 10%,rgba(10,10,12,.92) 60%)
    }
}

.shop-chips {
    row-gap: .5rem
}

.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: .7rem .7rem .7rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface)
}

.shop-toolbar .form-select {
    width: auto;
    min-width: 11rem;
    border-radius: 999px;
    padding: .55rem 2.4rem .55rem 1.1rem;
    background-color: var(--paper);
    color: var(--text);
    border: 1px solid var(--line);
    font-size: .92rem
}

.shop-toolbar .form-select:focus {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 18%,transparent)
}

.shop-view {
    display: inline-flex;
    gap: .2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .2rem
}

.shop-view a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    text-decoration: none;
    color: var(--muted)
}

.shop-view a:hover {
    background: var(--surface-2);
    color: var(--text)
}

.shop-view a.is-on {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .shop-view a.is-on {
    background: #fff;
    color: var(--ink)
}

@media (max-width: 575.98px) {
    .shop-toolbar {
        border-radius:var(--radius-sm);
        padding: .9rem 1rem
    }

    .shop-toolbar .form-select {
        min-width: 0;
        flex: 1
    }

    .shop-toolbar>.d-flex {
        width: 100%
    }
}

.shop-none {
    padding: 3rem 1rem
}

.shop-fc .offcanvas-body {
    padding: 0
}

.shop-filters {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem
}

.shop-fgroup + .shop-fgroup {
    margin-top: 1.3rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line)
}

.shop-fgroup h3 {
    font-size: 1.05rem;
    margin-bottom: .8rem
}

.shop-filters .form-check {
    padding-inline-start:1.9rem;margin-bottom: .35rem
}

.shop-filters .form-check-input {
    margin-inline-start:-1.9rem;margin-top: .28rem
}

.shop-filters .form-check-label {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    font-size: .95rem;
    cursor: pointer
}

.shop-filters .form-check-label span {
    color: var(--muted);
    font-size: .85rem
}

@media (min-width: 992px) {
    .shop-fc {
        position:sticky;
        top: 100px
    }
}

@media (max-width: 991.98px) {
    .shop-fc.offcanvas-lg {
        background:var(--paper)
    }

    .shop-fc .offcanvas-body {
        padding: 0 1rem 1.5rem
    }

    .shop-filters {
        border: 0;
        padding: 0;
        background: transparent
    }
}

@media (min-width: 992px) {
    .shop-fc .offcanvas-header {
        display:none
    }
}

.shop-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease,box-shadow .3s ease
}

.shop-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.shop-media {
    position: relative;
    aspect-ratio: 4 / 3
}

.shop-media img {
    transition: transform .6s ease
}

.shop-card:hover .shop-media img {
    transform: scale(1.05)
}

.shop-badge {
    position: absolute;
    top: .9rem;
    left: .9rem;
    z-index: 2;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--brand);
    color: var(--ink)
}

.shop-badge.is-best {
    background: var(--ink);
    color: #fff
}

.shop-badge.is-sale {
    background: var(--coral);
    color: var(--ink)
}

[data-bs-theme="dark"] .shop-badge.is-best {
    background: #fff;
    color: var(--ink)
}

.shop-actions {
    position: absolute;
    inset-inline: .8rem;
    bottom: .8rem;
    z-index: 2;
    display: flex;
    gap: .5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease,transform .25s ease
}

.shop-card:hover .shop-actions,.shop-card:focus-within .shop-actions {
    opacity: 1;
    transform: none
}

@media (hover: none),(max-width:991.98px) {
    .shop-actions {
        opacity:1;
        transform: none
    }
}

.shop-actions .btn-brand {
    flex: 1;
    justify-content: center;
    --bs-btn-padding-y: .6rem;
    --bs-btn-padding-x: .9rem;
    font-size: .88rem
}

.shop-heart,.shop-qv {
    flex: none;
    width: 42px;
    height: 42px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line)
}

.shop-heart:hover,.shop-qv:hover {
    background: var(--surface-2);
    color: var(--text)
}

.shop-heart .bi-heart-fill {
    display: none
}

.shop-heart[aria-pressed="true"] {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--ink)
}

.shop-heart[aria-pressed="true"] .bi-heart-fill {
    display: inline
}

.shop-heart[aria-pressed="true"] .bi-heart {
    display: none
}

.shop-heart-lg {
    width: 52px;
    height: 52px;
    font-size: 1.15rem
}

.shop-remove {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 2;
    width: 38px;
    height: 38px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line)
}

.shop-remove:hover {
    background: var(--ink);
    color: #fff
}

.shop-body {
    padding: 1.2rem 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1
}

.shop-body h3 {
    font-size: 1.14rem;
    margin: 0
}

.shop-body h3 a {
    text-decoration: none
}

.shop-body h3 a:hover {
    text-decoration: underline;
    text-underline-offset: 4px
}

.shop-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem
}

.shop-rate {
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.shop-rate .rating .bi {
    font-size: .78rem;
    color: #f5a623
}

.shop-price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    font-family: var(--font-display)
}

.shop-price strong {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.03em
}

.shop-price s {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-body)
}

.shop-price.is-big {
    margin: 1.5rem 0
}

.shop-price.is-big strong {
    font-size: clamp(2.1rem,4vw,2.8rem)
}

.shop-price.is-big s {
    font-size: 1.25rem
}

.shop-save {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink)
}

[data-prod].is-hidden {
    display: none !important
}

.shop-rows {
    display: grid;
    gap: 1.25rem
}

.shop-row {
    display: grid;
    grid-template-columns: 240px minmax(0,1fr) 230px;
    gap: 1.5rem;
    padding: 1.3rem;
    align-items: center;
    transition: box-shadow .3s ease
}

.shop-row:hover {
    box-shadow: var(--shadow)
}

.shop-row .shop-media {
    border-radius: var(--radius-sm);
    overflow: hidden
}

.shop-row-body {
    display: flex;
    flex-direction: column;
    gap: .6rem
}

.shop-row-body h3 {
    font-size: 1.4rem;
    margin: 0
}

.shop-row-body h3 a {
    text-decoration: none
}

.shop-row-body h3 a:hover {
    text-decoration: underline;
    text-underline-offset: 4px
}

.shop-feats {
    list-style: none;
    padding: 0;
    margin: .2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.2rem;
    font-size: .9rem;
    color: var(--muted)
}

.shop-feats li {
    display: flex;
    align-items: center;
    gap: .4rem
}

.shop-feats li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    color: var(--brand-2);
    font-size: .95rem
}

.shop-row-buy {
    border-inline-start:1px solid var(--line);padding-inline-start: 1.6rem
}

.shop-row-buy .shop-price {
    margin: 0 0 .2rem
}

.shop-row-buy .shop-heart,.shop-row-buy .shop-qv {
    width: 40px;
    height: 40px
}

@media (max-width: 1199.98px) {
    .shop-row {
        grid-template-columns:200px minmax(0,1fr) 200px;
        gap: 1.1rem
    }

    .shop-row-buy {
        padding-inline-start:1.1rem}
}

@media (max-width: 991.98px) {
    .shop-row {
        grid-template-columns:220px minmax(0,1fr)
    }

    .shop-row-buy {
        grid-column: 1 / -1;
        border-inline-start:0;border-top: 1px solid var(--line);
        padding: 1.1rem 0 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem 1rem
    }

    .shop-row-buy .shop-price {
        flex: none
    }

    .shop-row-buy small {
        flex: 1 1 10rem;
        margin: 0 !important
    }

    .shop-row-buy .btn-brand {
        width: auto !important
    }

    .shop-row-buy .d-flex {
        margin-top: 0 !important
    }
}

@media (max-width: 575.98px) {
    .shop-row {
        grid-template-columns:1fr
    }

    .shop-row .shop-media {
        aspect-ratio: 16 / 10
    }
}

.shop-trust {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem
}

.shop-trust>div {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem
}

.shop-trust .ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--brand-2);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    margin-bottom: 1rem
}

.shop-trust strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: -.02em;
    margin-bottom: .3rem
}

.shop-trust small {
    color: var(--muted)
}

.shop-trust.is-compact>div {
    padding: 1.2rem
}

.shop-trust.is-compact .ic {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    margin-bottom: .7rem
}

@media (max-width: 767.98px) {
    .shop-trust {
        grid-template-columns:1fr
    }
}

.shop-main {
    position: relative;
    border-radius: clamp(20px,3vw,32px);
    aspect-ratio: 4 / 3;
    overflow: hidden
}

.shop-thumbs {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .7rem;
    margin-top: .7rem
}

.shop-thumbs button {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-2);
    aspect-ratio: 1
}

.shop-thumbs button:hover {
    border-color: var(--line)
}

.shop-thumbs button[aria-current="true"] {
    border-color: var(--ink)
}

[data-bs-theme="dark"] .shop-thumbs button[aria-current="true"] {
    border-color: var(--brand)
}

.shop-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.shop-title {
    font-size: clamp(2.1rem,4.4vw,3.2rem);
    margin: .5rem 0 1rem
}

.shop-options {
    border-top: 1px solid var(--line);
    padding-top: 1.6rem
}

.shop-options fieldset {
    border: 0;
    padding: 0;
    margin: 0
}

.shop-options legend {
    float: none;
    width: auto
}

.shop-formats .btn {
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    line-height: 1.25;
    padding: .7rem 1.1rem
}

.shop-formats .btn span {
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 1.05rem
}

.shop-inside {
    padding: 1.5rem
}

.shop-side-photo {
    border-radius: var(--radius);
    aspect-ratio: 1 / 1
}

.shop-toc {
    list-style: none;
    counter-reset: toc;
    padding: 0;
    margin: 0
}

.shop-toc li {
    counter-increment: toc;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: .3rem 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line)
}

.shop-toc li::before {
    content: counter(toc,decimal-leading-zero);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--brand-2);
    font-size: 1.1rem
}

.shop-toc strong {
    grid-column: 2;
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: -.02em
}

.shop-toc span {
    grid-column: 2;
    color: var(--muted);
    font-size: .95rem
}

.shop-bars {
    display: grid;
    gap: .5rem;
    margin-top: 1rem
}

.shop-bar {
    display: grid;
    grid-template-columns: 56px 1fr 34px;
    gap: .7rem;
    align-items: center;
    font-size: .85rem;
    color: var(--muted)
}

.shop-bar .t {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.shop-bar .t span {
    display: block;
    height: 100%;
    width: var(--w,0%);
    background: #f5a623;
    border-radius: inherit
}

.shop-bar small {
    text-align: end
}

.shop-review {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--line)
}

.shop-review:first-child {
    padding-top: 0
}

.shop-review .avatar {
    border-width: 0
}

@media (max-width: 575.98px) {
    .shop-review .rating {
        width:100%;
        margin: .3rem 0 0 !important
    }
}

.shop-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    padding: .2rem
}

.shop-stepper button {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: 50%;
    display: grid;
    place-items: center
}

.shop-stepper button:hover {
    background: var(--surface-2)
}

.shop-stepper input {
    width: 44px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield
}

.shop-stepper input:focus {
    outline: none
}

.shop-stepper input::-webkit-outer-spin-button,.shop-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.shop-cart {
    padding: 1.5rem
}

.shop-cart-head {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.1rem
}

.shop-cart-foot {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line)
}

.shop-cart-row {
    display: grid;
    align-items: center;
    gap: .6rem 1.1rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--line);
    grid-template-columns: 88px minmax(0,1fr) auto auto 44px;
    grid-template-areas: "img name qty total del"
}

.shop-ci-img {
    grid-area: img;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden
}

.shop-ci-name {
    grid-area: name;
    min-width: 0
}

.shop-ci-name strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.08rem;
    letter-spacing: -.02em
}

.shop-ci-name small {
    color: var(--muted)
}

.shop-ci-qty {
    grid-area: qty
}

.shop-ci-total {
    grid-area: total;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -.02em;
    text-align: end;
    min-width: 5.5rem
}

.shop-ci-del {
    grid-area: del
}

.shop-ci-del button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    display: grid;
    place-items: center
}

.shop-ci-del button:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

@media (max-width: 767.98px) {
    .shop-cart-row {
        grid-template-columns:76px minmax(0,1fr) auto;
        grid-template-areas: "img name del" "img qty total"
    }

    .shop-ci-img {
        align-self: start
    }

    .shop-ci-total {
        font-size: 1.1rem;
        min-width: 0
    }

    .shop-ci-del {
        justify-self: end
    }
}

.shop-summary .meta-list li:first-child {
    border-top: 1px solid var(--line)
}

.shop-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    margin: 1.1rem 0 1.3rem
}

.shop-coupon .form-control {
    min-width: 0
}

.shop-mini-list {
    display: grid;
    gap: .9rem
}

.shop-mini {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr) auto;
    gap: .8rem;
    align-items: center
}

.shop-mini .ph {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden
}

.shop-mini strong {
    display: block;
    font-size: .95rem;
    line-height: 1.3
}

.shop-mini small {
    color: var(--muted);
    font-size: .82rem
}

.shop-mini span.p {
    font-weight: 600;
    white-space: nowrap
}

.shop-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0
}

.shop-step {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--muted)
}

.shop-step .n {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--line);
    font-size: .85rem
}

.shop-step.is-done {
    color: var(--text)
}

.shop-step.is-done .n {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.shop-step.is-current {
    color: var(--text)
}

.shop-step.is-current .n {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

[data-bs-theme="dark"] .shop-step.is-current .n {
    background: #fff;
    color: var(--ink);
    border-color: #fff
}

.shop-step + .shop-step::before {
    content: "";
    width: clamp(14px,4vw,48px);
    height: 1px;
    background: var(--line)
}

.shop-panel {
    padding: 1.6rem
}

.shop-pay-note {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 1.2rem
}

.shop-pay-note>.bi {
    font-size: 1.5rem;
    color: var(--brand-2);
    line-height: 1
}

.shop-pay-note .meta-list {
    margin-top: .4rem
}

.shop-success {
    text-align: center;
    padding: clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,4vw,3rem);
    max-width: 720px;
    margin-inline:auto}

.shop-success:focus-visible {
    outline: 3px solid var(--brand-2);
    outline-offset: 4px
}

.shop-success-ic {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    margin: 0 auto 1.5rem
}

.shop-success h2 {
    margin-bottom: 1rem
}

.shop-success .lead {
    max-width: 36rem;
    margin-inline:auto}

.ic-mini {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--brand-2);
    display: grid;
    place-items: center
}

.shop-empty {
    text-align: center;
    padding: clamp(2.5rem,6vw,4.5rem) 1.5rem
}

.shop-empty>.bi {
    font-size: 2.8rem;
    color: var(--muted)
}

.shop-empty h2 {
    font-size: 1.8rem
}

.shop-empty p {
    max-width: 32rem;
    margin-inline:auto}

.shop-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.8rem
}

.shop-share>div:first-child {
    max-width: 32rem
}

.shop-share-field {
    display: flex;
    gap: .5rem;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .3rem .3rem .3rem 1.1rem;
    min-width: min(100%,24rem)
}

.shop-share-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: .95rem
}

.shop-share-field input:focus {
    outline: none
}

.shop-share-field .btn {
    white-space: nowrap;
    --bs-btn-padding-y: .6rem
}

@media (max-width: 575.98px) {
    .shop-share-field {
        border-radius:var(--radius-sm);
        flex-wrap: wrap;
        padding: .8rem
    }

    .shop-share-field input {
        flex-basis: 100%
    }
}

.shop-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1085;
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: calc(100vw - 2rem);
    padding: .85rem 1.3rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.6);
    transform: translate(-50%,160%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1)
}

.shop-toast.is-on {
    transform: translate(-50%,0)
}

.shop-toast .bi {
    color: var(--brand)
}

[data-bs-theme="dark"] .shop-toast {
    background: #fff;
    color: var(--ink)
}

[data-bs-theme="dark"] .shop-toast .bi {
    color: var(--brand-2)
}

@media (prefers-reduced-motion:reduce) {
    .shop-toast {
        transition: none
    }
}

.cart-drawer {
    --bs-offcanvas-width: 420px;
    background: var(--surface);
    color: var(--text)
}

.cart-drawer .offcanvas-header {
    border-bottom: 1px solid var(--line);
    padding: 1.2rem 1.5rem
}

.cart-drawer .offcanvas-title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    margin: 0
}

.cart-drawer .offcanvas-body {
    padding: .4rem 1.5rem 1rem
}

.cd-items {
    display: grid
}

.cd-row {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr) auto;
    grid-template-areas: "img name del" "img qty total";
    gap: .45rem .9rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line)
}

.cd-img {
    grid-area: img;
    align-self: start;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden
}

.cd-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cd-name {
    grid-area: name;
    min-width: 0
}

.cd-name strong {
    display: block;
    font-size: .95rem;
    line-height: 1.3
}

.cd-name small {
    color: var(--muted);
    font-size: .82rem
}

.cd-qty {
    grid-area: qty;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    justify-self: start;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .1rem
}

.cd-qty button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: .85rem
}

.cd-qty button:hover {
    background: var(--surface-2)
}

.cd-qty span {
    min-width: 1.6rem;
    text-align: center;
    font-weight: 600;
    font-size: .9rem
}

.cd-total {
    grid-area: total;
    justify-self: end;
    font-weight: 700;
    white-space: nowrap
}

.cd-del {
    grid-area: del;
    justify-self: end;
    align-self: start;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    font-size: .8rem
}

.cd-del:hover {
    background: var(--surface-2);
    color: var(--text)
}

.cd-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted)
}

.cd-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 1.6rem
}

.cd-foot {
    padding: 1.2rem 1.5rem 1.5rem;
    border-top: 1px solid var(--line)
}

.cd-sub {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: -.02em;
    margin-bottom: .2rem
}

.free-ship {
    margin-bottom: 1rem;
    font-size: .88rem
}

.free-ship p {
    margin: 0 0 .45rem
}

.fs-track {
    height: 6px;
    border-radius: 999px;
    background: var(--paper);
    overflow: hidden
}

.fs-track span {
    display: block;
    height: 100%;
    width: var(--p,0%);
    border-radius: inherit;
    background: var(--brand-2);
    transition: width .5s cubic-bezier(.2,.7,.2,1)
}

.free-ship.is-done .fs-track span {
    background: var(--brand)
}

.free-ship.is-done .bi-truck {
    color: var(--brand-2)
}

.woocommerce-cart .free-ship {
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    margin-bottom: 1.5rem
}

.qv-modal .modal-content {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--surface);
    color: var(--text)
}

.qv-modal .btn-close {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 3;
    background-color: var(--surface);
    border-radius: 50%;
    padding: .7rem;
    opacity: 1
}

.qv-media {
    height: 100%;
    min-height: 280px
}

.qv-media img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.qv-body {
    padding: 2rem
}

.qv-body .shop-top {
    margin-bottom: .8rem;
    padding-inline-end:2.5rem}

.qv-body .shop-price {
    font-size: 1.4rem
}

.qv-body .link-arrow {
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .qv-body .link-arrow {
    color: var(--brand)
}

.qv-buy {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.2rem
}

@media (max-width: 767.98px) {
    .qv-media {
        min-height:0;
        aspect-ratio: 4 / 3
    }

    .qv-body {
        padding: 1.5rem
    }
}

.shop-panel .addon .addon-body {
    padding: 1rem;
    gap: .7rem
}

.shop-panel .addon small {
    font-size: .82rem;
    line-height: 1.35;
    display: block
}

.shop-panel .addon .tick {
    width: 22px;
    height: 22px
}

.acc-wrap {
    display: flex;
    align-items: center;
    padding-block:clamp(1.5rem,4vw,3.5rem);overflow: hidden
}

.acc-wrap>.container {
    position: relative;
    z-index: 1
}

.acc-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(1.5rem,4vw,4rem);
    align-items: center
}

@media (max-width: 991.98px) {
    .acc-grid {
        grid-template-columns:minmax(0,1fr)
    }
}

.acc-card {
    width: 100%;
    max-width: 31rem;
    margin-inline:auto;padding: clamp(1.5rem,4vw,2.6rem)
}

.acc-card h1 {
    font-size: clamp(2rem,4vw,2.8rem);
    margin-bottom: .5rem
}

.acc-card .acc-sub {
    color: var(--muted);
    margin-bottom: 1.8rem
}

.acc-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem
}

.acc-label-row a {
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .acc-label-row a {
    color: var(--brand)
}

.acc-label-row a:hover {
    text-decoration: underline
}

.acc-pw {
    position: relative
}

.acc-pw .form-control {
    padding-inline-end:3.1rem}

.acc-pw-btn {
    position: absolute;
    inset-inline-end: .35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    font-size: 1.1rem
}

.acc-pw-btn:hover {
    background: var(--surface-2);
    color: var(--text)
}

.acc-pw-btn .bi-eye-slash {
    display: none
}

.acc-pw-btn[aria-pressed="true"] .bi-eye-slash {
    display: block
}

.acc-pw-btn[aria-pressed="true"] .bi-eye {
    display: none
}

.acc-err {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    color: #dc3545;
    margin-top: .4rem
}

[data-bs-theme="dark"] .acc-err {
    color: #ff8a8a
}

.acc-err:empty {
    display: none
}

.form-soft .form-control.acc-bad {
    border-color: #dc3545;
    box-shadow: 0 0 0 4px rgba(220,53,69,.14)
}

.acc-meter {
    margin-top: .6rem
}

.acc-meter .acc-meter-track {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.acc-meter .acc-meter-track span {
    display: block;
    height: 100%;
    width: var(--p,0%);
    border-radius: inherit;
    background: var(--muted);
    transition: width .3s ease,background-color .3s ease
}

.acc-meter[data-level="1"] .acc-meter-track span {
    background: #dc3545
}

.acc-meter[data-level="2"] .acc-meter-track span {
    background: #f5a623
}

.acc-meter[data-level="3"] .acc-meter-track span {
    background: var(--brand-2)
}

.acc-meter[data-level="4"] .acc-meter-track span {
    background: #16a34a
}

.acc-meter small {
    display: block;
    margin-top: .4rem;
    color: var(--muted);
    font-size: .82rem
}

.acc-or {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-block:1.4rem}

.acc-or::before,.acc-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line)
}

.acc-sso {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem
}

.acc-sso .btn {
    justify-content: center;
    --bs-btn-padding-y: .7rem;
    font-size: .95rem
}

@media (max-width: 400px) {
    .acc-sso {
        grid-template-columns:1fr
    }
}

.acc-foot-link {
    text-align: center;
    font-size: .95rem;
    margin-top: 1.6rem;
    margin-bottom: 0
}

.acc-foot-link a {
    font-weight: 600
}

.acc-aside {
    position: relative;
    border-radius: 36px;
    overflow: hidden;
    min-height: 36rem;
    height: 100%;
    isolation: isolate;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.4rem,2.5vw,2.2rem)
}

.acc-aside>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2
}

.acc-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(170deg,rgba(10,10,12,.18) 10%,rgba(10,10,12,.78) 92%)
}

.acc-aside .acc-badge {
    position: absolute;
    top: clamp(1.4rem,2.5vw,2.2rem);
    left: clamp(1.4rem,2.5vw,2.2rem);
    background: var(--brand);
    color: var(--ink);
    border: 0
}

.acc-glass {
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    padding: 1.3rem 1.5rem
}

.acc-glass + .acc-glass {
    margin-top: .9rem
}

.acc-glass blockquote {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    line-height: 1.5
}

.acc-glass .acc-who {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .9rem
}

.acc-glass .acc-who img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

.acc-res {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .9rem;
    text-align: center
}

.acc-res .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem,2.4vw,2rem);
    letter-spacing: -.04em;
    line-height: 1;
    display: block
}

.acc-res small {
    opacity: .82;
    font-size: .78rem
}

.acc-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    display: grid;
    gap: .65rem
}

.acc-perks li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    font-size: .98rem
}

.acc-perks .bi {
    color: var(--brand);
    font-size: 1.15rem;
    line-height: 1.4;
    flex: none
}

@media (max-width: 991.98px) {
    .acc-aside {
        display:none
    }
}

.acc-solo {
    max-width: 34rem;
    margin-inline:auto}

.acc-step[hidden] {
    display: none
}

.acc-ring {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    background: var(--brand);
    color: var(--ink);
    margin-inline:auto;margin-bottom: 1.4rem
}

.acc-mail-art {
    position: relative;
    width: 100%;
    max-width: 24rem;
    margin-inline:auto;margin-bottom: 1.6rem
}

.acc-mail-art .acc-mail-ph {
    border-radius: 180px 180px 24px 24px;
    aspect-ratio: 4 / 3.2
}

.acc-mail-art .acc-mail-chip {
    position: absolute;
    right: -.4rem;
    bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .6rem .9rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    font-weight: 600
}

.acc-mail-art .acc-mail-chip .bi {
    color: var(--brand-2);
    font-size: 1.1rem
}

[data-bs-theme="dark"] .acc-mail-art .acc-mail-chip .bi {
    color: var(--brand)
}

.acc-steps-mini {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: grid;
    gap: .6rem;
    font-size: .92rem;
    color: var(--muted)
}

.acc-steps-mini li {
    display: flex;
    gap: .6rem;
    align-items: flex-start
}

.acc-steps-mini .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .acc-steps-mini .bi {
    color: var(--brand)
}

.acc-dash {
    padding-block:1.4rem clamp(2.5rem,5vw,4rem)}

.acc-dash-grid {
    display: grid;
    grid-template-columns: 258px minmax(0,1fr);
    gap: clamp(1.1rem,2vw,2rem);
    align-items: start
}

@media (max-width: 991.98px) {
    .acc-dash-grid {
        grid-template-columns:minmax(0,1fr)
    }
}

.acc-sidebar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius)
}

@media (min-width: 992px) {
    .acc-sidebar {
        position:sticky;
        top: 1.4rem
    }
}

@media (max-width: 991.98px) {
    .acc-sidebar {
        border-radius:0;
        border: 0;
        border-inline-end:1px solid var(--line);background: var(--paper)
    }
}

.acc-nav {
    display: grid;
    gap: .2rem
}

.acc-nav a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 500;
    font-size: .98rem;
    color: var(--text)
}

.acc-nav a .bi {
    font-size: 1.1rem;
    color: var(--muted)
}

.acc-nav a:hover {
    background: var(--surface-2)
}

.acc-nav a.active {
    background: var(--ink);
    color: #fff
}

.acc-nav a.active .bi {
    color: var(--brand)
}

[data-bs-theme="dark"] .acc-nav a.active {
    background: var(--brand);
    color: var(--ink)
}

[data-bs-theme="dark"] .acc-nav a.active .bi {
    color: var(--ink)
}

.acc-nav a .acc-n {
    margin-inline-start:auto;font-size: .75rem;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    padding-inline:6px;border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center
}

.acc-nav a.active .acc-n {
    background: var(--brand);
    color: var(--ink)
}

.acc-side-head {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.2rem .9rem .5rem
}

.acc-plan {
    margin-top: 1rem;
    padding: 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--brand-2);
    color: #fff
}

.acc-plan strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem
}

.acc-plan .acc-plan-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    overflow: hidden;
    margin: .7rem 0 .5rem
}

.acc-plan .acc-plan-bar span {
    display: block;
    height: 100%;
    width: var(--p,60%);
    background: var(--brand);
    border-radius: inherit
}

.acc-plan small {
    opacity: .95
}

.acc-hello {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: space-between;
    align-items: center
}

.acc-hello h1 {
    font-size: clamp(1.9rem,3.4vw,2.7rem);
    margin: 0 0 .35rem
}

.acc-client {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: -.02em
}

.acc-client .acc-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--brand-2);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    flex: none
}

.acc-am {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem 1.1rem .75rem .75rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.acc-am img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

.acc-am small {
    color: var(--muted);
    display: block;
    font-size: .78rem
}

.acc-am strong {
    font-size: .98rem
}

.acc-kpi {
    padding: 1.3rem;
    height: 100%
}

.acc-kpi .acc-kpi-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem
}

.acc-kpi .acc-kpi-top span {
    font-size: .85rem;
    color: var(--muted);
    font-weight: 500
}

.acc-kpi .acc-kpi-top .bi {
    font-size: 1.1rem;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .acc-kpi .acc-kpi-top .bi {
    color: var(--brand)
}

.acc-kpi .acc-v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem,3vw,2.3rem);
    letter-spacing: -.04em;
    line-height: 1
}

.acc-delta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .7rem;
    font-size: .84rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 999px
}

.acc-delta.up {
    color: #166534;
    background: rgba(22,163,74,.12)
}

.acc-delta.down {
    color: #b91c1c;
    background: rgba(220,38,38,.12)
}

[data-bs-theme="dark"] .acc-delta.up {
    color: #6fdc9c
}

[data-bs-theme="dark"] .acc-delta.down {
    color: #ff8a8a
}

.acc-kpi .acc-since {
    font-size: .8rem;
    color: var(--muted);
    margin-inline-start:.5rem}

.acc-seg {
    display: inline-flex;
    gap: .2rem;
    padding: .25rem;
    border-radius: 999px;
    background: var(--surface-2)
}

.acc-seg button {
    border: 0;
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: .85rem;
    padding: .35rem .85rem;
    border-radius: 999px
}

.acc-seg button[aria-pressed="true"] {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .acc-seg button[aria-pressed="true"] {
    background: var(--brand);
    color: var(--ink)
}

.acc-chart-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible
}

.acc-chart-svg .acc-dot {
    fill: var(--brand-2);
    stroke: var(--surface);
    stroke-width: 3
}

[data-bs-theme="dark"] .acc-chart-svg .acc-dot {
    fill: var(--brand)
}

.acc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    font-size: .85rem;
    color: var(--muted)
}

.acc-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    margin-inline-end:.4rem}

.acc-bars {
    display: grid;
    gap: 1.1rem
}

.acc-bar .acc-bar-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .92rem;
    font-weight: 600;
    margin-bottom: .4rem
}

.acc-bar .acc-bar-head span:last-child {
    color: var(--muted);
    font-weight: 500
}

.acc-bar .acc-bar-track {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.acc-bar .acc-bar-track span {
    display: block;
    height: 100%;
    width: var(--p,50%);
    border-radius: inherit;
    background: var(--brand-2)
}

.acc-bar:nth-child(2) .acc-bar-track span {
    background: var(--brand)
}

.acc-bar:nth-child(3) .acc-bar-track span {
    background: var(--coral)
}

.acc-bar:nth-child(4) .acc-bar-track span {
    background: color-mix(in srgb,var(--brand-2) 55%,var(--surface))
}

.acc-bar:nth-child(5) .acc-bar-track span {
    background: var(--ink)
}

[data-bs-theme="dark"] .acc-bar:nth-child(5) .acc-bar-track span {
    background: #efece6
}

.acc-table-wrap {
    overflow-x: auto;
    overflow-y: hidden
}

.acc-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: .95rem
}

.acc-table th,.acc-table td {
    padding: .9rem 1rem;
    text-align: start;
    border-bottom: 1px solid var(--line);
    vertical-align: middle
}

.acc-table thead th {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.acc-table tbody tr:last-child td {
    border-bottom: 0
}

.acc-table tbody tr:hover {
    background: var(--surface-2)
}

.acc-table .acc-name {
    font-weight: 600
}

.acc-table .acc-name small {
    display: block;
    color: var(--muted);
    font-weight: 400;
    font-size: .82rem
}

.acc-table td.num {
    text-align: end;
    font-variant-numeric: tabular-nums
}

.acc-table th.num {
    text-align: end
}

.acc-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    padding: .25rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-2)
}

.acc-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted)
}

.acc-state.is-live::before {
    background: #16a34a
}

.acc-state.is-live {
    color: #166534;
    background: rgba(22,163,74,.1);
    border-color: rgba(22,163,74,.25)
}

.acc-state.is-review::before {
    background: var(--brand-2)
}

.acc-state.is-paused::before {
    background: #f5a623
}

.acc-state.is-paused {
    color: #a16207;
    background: rgba(245,166,35,.12);
    border-color: rgba(245,166,35,.3)
}

[data-bs-theme="dark"] .acc-state.is-live {
    color: #6fdc9c
}

[data-bs-theme="dark"] .acc-state.is-paused {
    color: #f7c86b
}

.acc-creatives {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .8rem
}

@media (max-width: 575.98px) {
    .acc-creatives {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

.acc-creative {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    text-decoration: none;
    color: #fff;
    isolation: isolate
}

.acc-creative img {
    transition: transform .5s ease
}

.acc-creative:hover img {
    transform: scale(1.06)
}

.acc-creative::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 45%,rgba(10,10,12,.78))
}

.acc-creative figcaption {
    position: absolute;
    inset-inline: .6rem;
    bottom: .55rem;
    z-index: 1;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.25
}

.acc-creative figcaption small {
    display: block;
    font-weight: 500;
    opacity: .8
}

.acc-creative .acc-ctr {
    position: absolute;
    top: .55rem;
    left: .55rem;
    z-index: 1;
    background: var(--brand);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px
}

.acc-check {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid
}

.acc-check li {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line)
}

.acc-check li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.acc-check .form-check-input {
    margin-top: .15rem;
    flex: none
}

.acc-check label {
    font-weight: 600;
    font-size: .96rem;
    display: block;
    cursor: pointer
}

.acc-check small {
    color: var(--muted);
    font-size: .84rem
}

.acc-check input:checked ~ div label {
    text-decoration: line-through;
    color: var(--muted)
}

.acc-due {
    margin-inline-start:auto;font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap
}

.acc-due.is-soon {
    color: color-mix(in srgb,var(--coral) 70%,#000)
}

[data-bs-theme="dark"] .acc-due.is-soon {
    color: var(--coral)
}

.acc-inv {
    list-style: none;
    padding: 0;
    margin: 0
}

.acc-inv li {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line)
}

.acc-inv li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.acc-inv .acc-inv-id {
    font-weight: 600;
    font-size: .95rem
}

.acc-inv .acc-inv-id small {
    display: block;
    color: var(--muted);
    font-weight: 400;
    font-size: .82rem
}

.acc-inv .acc-inv-sum {
    margin-inline-start:auto;font-weight: 700;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums
}

.acc-msgs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.1rem
}

.acc-msgs li {
    display: flex;
    gap: .85rem
}

.acc-msgs img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

.acc-msgs .acc-m-head {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    align-items: baseline
}

.acc-msgs .acc-m-head strong {
    font-size: .95rem
}

.acc-msgs .acc-m-head small {
    color: var(--muted);
    font-size: .8rem
}

.acc-msgs p {
    margin: .15rem 0 0;
    font-size: .92rem;
    color: var(--muted)
}

.acc-unread {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--coral);
    display: inline-block
}

.acc-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem
}

.acc-card-head h2 {
    font-size: 1.25rem;
    margin: 0
}

.acc-panel {
    padding: 1.4rem;
    height: 100%
}

@media (min-width: 576px) {
    .acc-panel {
        padding:1.6rem
    }
}

.legal-updated {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted)
}

.legal-updated .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .legal-updated .bi {
    color: var(--brand)
}

.legal-toc {
    max-height: calc(100vh - 140px);
    overflow-y: auto
}

.legal-toc a.acc-on {
    background: var(--ink);
    color: #fff
}

.legal-toc a.acc-on::before {
    color: var(--brand)
}

[data-bs-theme="dark"] .legal-toc a.acc-on {
    background: var(--brand);
    color: var(--ink)
}

[data-bs-theme="dark"] .legal-toc a.acc-on::before {
    color: var(--ink)
}

.legal-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: center;
    justify-content: space-between;
    padding: clamp(1.4rem,3vw,2.2rem)
}

.legal-contact .bi-shield-check {
    font-size: 2.2rem;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .legal-contact .bi-shield-check {
    color: var(--brand)
}

.legal-jump {
    font-size: .88rem
}

.sys-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.3rem,1.5vw,1.2rem);
    margin-bottom: 1.4rem
}

.sys-digit {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(6rem,21vw,15rem);
    letter-spacing: -.06em;
    line-height: .8
}

.sys-hole {
    width: clamp(5rem,17vw,12rem);
    aspect-ratio: 1 / 1.3;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow)
}

.sys-hole::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 6px solid var(--paper)
}

.sys-404 .spark {
    position: static;
    width: clamp(28px,4vw,44px);
    align-self: flex-start;
    margin-top: 1rem
}

.sys-search {
    max-width: 30rem;
    margin-inline:auto}

.sys-link-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.1rem 1.2rem;
    height: 100%;
    text-decoration: none;
    transition: transform .25s ease,box-shadow .25s ease
}

.sys-link-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.sys-link-card .ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: none;
    background: var(--surface-2);
    color: var(--brand-2);
    display: grid;
    place-items: center;
    font-size: 1.15rem
}

.sys-link-card:hover .ic {
    background: var(--brand);
    color: var(--ink)
}

.sys-link-card strong {
    display: block;
    font-size: 1rem
}

.sys-link-card small {
    color: var(--muted)
}

.sys-cover {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 150px);
    overflow: hidden;
    color: #fff;
    padding-block:clamp(2.5rem,6vw,5rem);isolation: isolate
}

.sys-cover>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2
}

.sys-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(145deg,rgba(12,10,28,.9),rgba(12,10,28,.6) 45%,rgba(109,74,255,.55))
}

.sys-cover h1 {
    font-size: clamp(2.4rem,6vw,4.6rem)
}

.sys-cover .lead,.sys-cover .text-muted-2 {
    color: rgba(255,255,255,.78) !important
}

.sys-cover .eyebrow {
    color: var(--brand)
}

.sys-count {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .7rem;
    max-width: 34rem
}

.sys-count>div {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: .9rem .4rem;
    text-align: center
}

.sys-count .n {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.7rem,4.5vw,2.8rem);
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums
}

.sys-count small {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .78
}

.sys-notify {
    display: flex;
    gap: .5rem;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    padding: .35rem .35rem .35rem 1.2rem;
    max-width: 28rem
}

.sys-notify input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1rem
}

.sys-notify input::placeholder {
    color: rgba(255,255,255,.6)
}

.sys-notify input:focus {
    outline: none
}

@media (max-width: 420px) {
    .sys-notify {
        border-radius:20px;
        flex-direction: column;
        padding: .9rem
    }

    .sys-notify .btn {
        justify-content: center
    }
}

.sys-msg {
    font-size: .9rem;
    font-weight: 500;
    margin: .7rem 0 0;
    min-height: 1.2rem;
    color: var(--brand)
}

.sys-prog {
    max-width: 28rem
}

.sys-prog .sys-prog-head {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .45rem
}

.sys-prog .sys-prog-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    overflow: hidden
}

.sys-prog .sys-prog-track span {
    display: block;
    height: 100%;
    width: var(--p,50%);
    border-radius: inherit;
    background: var(--brand)
}

.sys-social {
    display: flex;
    gap: .5rem
}

.sys-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.28);
    color: #fff
}

.sys-social a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

.sys-calm {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 150px);
    padding-block:clamp(2rem,5vw,4rem);overflow: hidden
}

.sys-art {
    position: relative;
    max-width: 30rem;
    margin-inline:auto}

.sys-art .sys-art-ph {
    border-radius: 260px 260px 28px 28px;
    aspect-ratio: 4 / 4.4
}

.sys-art .sys-art-card {
    position: absolute;
    left: -1rem;
    bottom: 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: .8rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .7rem
}

.sys-art .sys-art-card .bi {
    font-size: 1.3rem;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .sys-art .sys-art-card .bi {
    color: var(--brand)
}

.sys-art .sys-art-card strong {
    display: block;
    font-size: .95rem;
    line-height: 1.2
}

.sys-art .sys-art-card small {
    color: var(--muted);
    font-size: .8rem
}

@media (max-width: 575.98px) {
    .sys-art .sys-art-card {
        left:0
    }
}

.sys-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0
}

.sys-steps li {
    display: flex;
    gap: 1rem;
    padding-block:.9rem;position: relative
}

.sys-steps li::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 2.2rem;
    bottom: -.4rem;
    width: 2px;
    background: var(--line)
}

.sys-steps li:last-child::before {
    display: none
}

.sys-steps .sys-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    font-size: .9rem;
    background: var(--surface-2);
    color: var(--muted);
    z-index: 1
}

.sys-steps li.is-done .sys-dot {
    background: var(--brand);
    color: var(--ink)
}

.sys-steps li.is-now .sys-dot {
    background: var(--brand-2);
    color: #fff
}

.sys-steps strong {
    display: block;
    font-size: 1rem
}

.sys-steps small {
    color: var(--muted)
}

.sys-eta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: 600;
    font-size: .92rem
}

.sys-eta .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5a623;
    box-shadow: 0 0 0 4px rgba(245,166,35,.22)
}

.sys-social.is-ink a {
    border-color: var(--line);
    color: var(--text)
}

.sys-social.is-ink a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

@media (max-width: 575.98px) {
    .acc-kpi .acc-since {
        display:block;
        margin-inline-start:0;margin-top: .35rem
    }

    .acc-hello .acc-am {
        width: 100%
    }
}

[data-bs-theme="dark"] .acc-chart-svg .area {
    fill: color-mix(in srgb,var(--brand) 16%,transparent)
}

.acc-legend .acc-swatch {
    background: var(--brand-2)
}

[data-bs-theme="dark"] .acc-legend .acc-swatch {
    background: var(--brand)
}

.el-layout {
    display: grid;
    grid-template-columns: 240px minmax(0,1fr);
    gap: clamp(1.5rem,4vw,3.5rem)
}

@media (max-width: 991.98px) {
    .el-layout {
        grid-template-columns:minmax(0,1fr);
        gap: 1.5rem
    }
}

.el-nav {
    position: sticky;
    top: 100px;
    align-self: start;
    display: grid;
    gap: .15rem;
    padding: .6rem;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin
}

.el-nav h2 {
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: .3rem 0 .5rem .6rem
}

.el-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .7rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    color: var(--text)
}

.el-nav a:hover {
    background: var(--surface-2)
}

.el-nav a.is-current {
    background: var(--ink);
    color: #fff
}

.el-nav a.is-current .bi {
    color: var(--brand)
}

[data-bs-theme="dark"] .el-nav a.is-current {
    background: var(--brand);
    color: var(--ink)
}

[data-bs-theme="dark"] .el-nav a.is-current .bi {
    color: var(--ink)
}

.el-nav a .bi {
    font-size: .95rem;
    color: var(--muted)
}

@media (max-width: 991.98px) {
    .el-nav {
        position:sticky;
        top: 60px;
        z-index: 1020;
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: .55rem;
        border-radius: 999px;
        background: color-mix(in srgb,var(--surface) 92%,transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        scrollbar-width: none
    }

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

    .el-nav h2 {
        display: none
    }

    .el-nav a {
        flex: none;
        border-radius: 999px;
        padding: .45rem .9rem;
        white-space: nowrap;
        border: 1px solid var(--line)
    }

    .el-nav a .bi {
        display: none
    }
}

.el-sec {
    scroll-margin-top: 120px
}

.el-sec + .el-sec {
    margin-top: clamp(3rem,6vw,5rem)
}

.el-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-bottom: 1.4rem
}

.el-sec-head h2 {
    font-size: clamp(1.7rem,3vw,2.3rem);
    margin: 0
}

.el-sec-head .el-count {
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted)
}

.el-sec>p.lead {
    margin-top: -.6rem;
    margin-bottom: 1.4rem;
    font-size: 1.05rem
}

.el-code {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .4rem .3rem .75rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    max-width: 100%
}

.el-code code {
    font-size: .82rem;
    color: var(--text);
    background: none;
    padding: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none
}

.el-code code::-webkit-scrollbar {
    display: none
}

.el-copy {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    display: grid;
    place-items: center;
    font-size: .82rem
}

.el-copy:hover {
    background: var(--brand);
    color: var(--ink)
}

.el-copy.is-done {
    background: var(--brand);
    color: var(--ink)
}

.el-demo {
    padding: clamp(1.1rem,3vw,2rem);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius)
}

.el-demo.is-plain {
    background: transparent;
    border: 0;
    padding: 0
}

.el-demo.is-paper {
    background: var(--paper)
}

.el-demo>* + .el-sub {
    margin-top: 2rem
}

.el-sub {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .8rem
}

.el-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem
}

.el-note {
    font-size: .9rem;
    color: var(--muted);
    margin: 1rem 0 0
}

.el-note .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .el-note .bi {
    color: var(--brand)
}

.el-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap: .9rem
}

.el-sw {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden
}

.el-sw .el-sw-chip {
    height: 92px;
    background: var(--c,var(--brand));
    border-bottom: 1px solid var(--line)
}

.el-sw .el-sw-body {
    padding: .7rem .8rem
}

.el-sw code {
    font-size: .82rem;
    background: none;
    padding: 0;
    font-weight: 600
}

.el-sw small {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    margin-top: .15rem
}

.el-sw .el-hex {
    font-variant-numeric: tabular-nums;
    text-transform: uppercase
}

.el-skins {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(96px,1fr));
    gap: .9rem
}

.el-skins figure {
    margin: 0;
    text-align: center
}

.el-skins .skin {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    cursor: default
}

.el-skins figcaption {
    font-size: .82rem;
    font-weight: 600;
    margin-top: .45rem
}

.el-alert {
    --c: var(--brand-2);
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    margin: 0;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb,var(--c) 38%,var(--line));
    background: color-mix(in srgb,var(--c) 10%,var(--surface));
    color: var(--text);
    font-size: .98rem
}

.el-alert + .el-alert {
    margin-top: .8rem
}

.el-alert>.bi {
    flex: none;
    font-size: 1.3rem;
    line-height: 1.25;
    color: var(--c)
}

.el-alert strong {
    display: block;
    font-weight: 600
}

.el-alert p {
    margin: .15rem 0 0;
    color: var(--muted);
    font-size: .94rem
}

.el-alert a {
    color: var(--c);
    font-weight: 600
}

.el-alert .btn-close {
    margin-inline-start:auto;flex: none;
    --bs-btn-close-focus-shadow: none
}

[data-bs-theme="dark"] .el-alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%)
}

.el-alert-info {
    --c: var(--brand-2)
}

.el-alert-success {
    --c: #15803d
}

.el-alert-warning {
    --c: #9a5b00
}

.el-alert-danger {
    --c: #c42a39
}

[data-bs-theme="dark"] .el-alert-info {
    --c: color-mix(in srgb,var(--brand-2) 45%,#fff)
}

[data-bs-theme="dark"] .el-alert-success {
    --c: #6fdc9c
}

[data-bs-theme="dark"] .el-alert-warning {
    --c: #f5c45e
}

[data-bs-theme="dark"] .el-alert-danger {
    --c: #ff8a8a
}

.progress.el-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.el-progress .progress-bar {
    background: var(--brand-2);
    border-radius: 999px
}

.el-progress.is-brand .progress-bar {
    background: var(--brand)
}

.el-progress.is-coral .progress-bar {
    background: var(--coral)
}

[data-bs-theme="dark"] .el-progress .progress-bar {
    background: color-mix(in srgb,var(--brand-2) 55%,#fff)
}

.el-meter {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .45rem
}

.el-meter span:last-child {
    color: var(--muted)
}

.toast.el-toast {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow)
}

.el-toast .toast-header {
    background: transparent;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-weight: 600
}

.el-toast .toast-header .bi {
    color: var(--brand-2);
    margin-inline-end:.5rem}

[data-bs-theme="dark"] .el-toast .toast-header .bi {
    color: var(--brand)
}

.el-toast .toast-body {
    color: var(--muted)
}

.el-toast .btn-close {
    --bs-btn-close-focus-shadow: none
}

[data-bs-theme="dark"] .el-toast .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%)
}

.el-toast-live {
    position: fixed;
    top: 92px;
    right: 1rem;
    z-index: 1080;
    display: grid;
    gap: .6rem;
    max-width: min(360px,calc(100vw - 2rem))
}

.el-tip .tooltip-inner {
    background: var(--ink);
    color: #fff;
    border-radius: 10px;
    padding: .45rem .7rem;
    font-size: .85rem
}

.el-tip .tooltip-arrow::before {
    border-top-color: var(--ink);
    border-bottom-color: var(--ink);
    border-left-color: var(--ink);
    border-right-color: var(--ink)
}

[data-bs-theme="dark"] .el-tip .tooltip-inner {
    background: var(--brand);
    color: var(--ink)
}

[data-bs-theme="dark"] .el-tip .tooltip-arrow::before {
    border-top-color: var(--brand);
    border-bottom-color: var(--brand);
    border-left-color: var(--brand);
    border-right-color: var(--brand)
}

.el-pop.popover {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    max-width: 300px
}

.el-pop .popover-header {
    background: var(--surface-2);
    color: var(--text);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    letter-spacing: -.02em
}

.el-pop .popover-body {
    color: var(--muted);
    font-size: .92rem
}

.el-pop .popover-arrow::after {
    border-top-color: var(--surface);
    border-bottom-color: var(--surface-2)
}

.form-soft .form-range {
    height: 1.6rem
}

.form-soft .form-range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line)
}

.form-soft .form-range::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2)
}

.form-soft .form-range::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -8px;
    background: var(--surface);
    border: 6px solid var(--brand-2)
}

.form-soft .form-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--surface);
    border: 6px solid var(--brand-2)
}

.form-soft .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 30%,transparent)
}

.form-soft .form-control[type="file"] {
    padding: .55rem 1rem
}

.form-soft .form-control[type="file"]::file-selector-button {
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .45rem .9rem;
    margin-inline-end:.9rem;font-weight: 600;
    font-size: .9rem
}

.form-soft .form-control[type="file"]:hover::file-selector-button {
    background: var(--brand-2);
    color: #fff
}

[data-bs-theme="dark"] .form-soft .form-control[type="file"]::file-selector-button {
    background: var(--brand);
    color: var(--ink)
}

.form-soft .form-control.is-valid,.form-soft .form-select.is-valid {
    border-color: #16a34a
}

.form-soft .valid-feedback {
    color: #166534
}

[data-bs-theme="dark"] .form-soft .valid-feedback {
    color: #6fdc9c
}

.form-soft .form-switch .form-check-input {
    width: 2.4em;
    height: 1.3em
}

.form-soft .form-text {
    color: var(--muted)
}

.el-band-demo {
    margin-block:0}

.el-band-demo .band-wrap {
    padding-block:1.8rem;margin-block:0}

.el-frame {
    border-radius: var(--radius);
    aspect-ratio: 4 / 3
}

.el-frame-round {
    border-radius: 999px;
    aspect-ratio: 1
}

.el-float {
    position: relative
}

.el-float .el-float-card {
    position: absolute;
    z-index: 2;
    left: -1rem;
    bottom: -1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: .8rem 1rem;
    box-shadow: var(--shadow);
    display: flex;
    gap: .7rem;
    align-items: center;
    font-size: .88rem
}

.el-float .el-float-card .bi {
    color: var(--brand-2);
    font-size: 1.2rem
}

@media (max-width: 575.98px) {
    .el-float .el-float-card {
        left:0;
        bottom: 0
    }
}

.main-nav .dropdown-homes.has-two.show {
    grid-template-columns: 3fr 1fr;
    min-width: 62rem !important
}

.dropdown-homes>div:first-child ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: .2rem
}

.dropdown-homes ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.site-header.is-ink {
    background: var(--ink);
    color: #fff
}

.site-header.is-ink .brand {
    color: #fff
}

.site-header.is-ink .brand-mark .bm-bg {
    fill: var(--brand)
}

.site-header.is-ink .brand-mark .bm-wave {
    stroke: var(--ink)
}

.site-header.is-ink .main-nav {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12)
}

.site-header.is-ink .main-nav .nav-link {
    color: rgba(255,255,255,.85)
}

.site-header.is-ink .main-nav .nav-link:hover,.site-header.is-ink .main-nav .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,.1)
}

.site-header.is-ink .theme-toggle,.site-header.is-ink .navbar-toggler {
    color: #fff;
    border-color: rgba(255,255,255,.25);
    background: transparent
}

.site-header.is-ink .theme-toggle:focus-visible {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.25)
}

.site-header.is-ink .btn-ink {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.site-header.is-ink.is-scrolled {
    background: color-mix(in srgb,var(--ink) 92%,transparent);
    box-shadow: 0 1px 0 rgba(255,255,255,.08)
}

@media (min-width: 992px) {
    .has-fullmenu .main-nav {
        display:none !important
    }
}

.fm-toggle {
    gap: .6rem
}

.fm-lines {
    display: inline-grid;
    gap: 4px;
    width: 18px
}

.fm-lines span {
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s ease
}

.fm-open .fm-lines span:first-child {
    transform: translateY(3px) rotate(45deg)
}

.fm-open .fm-lines span:last-child {
    transform: translateY(-3px) rotate(-45deg)
}

.fm-open .site-header {
    background: var(--paper)
}

.fm-open {
    overflow: hidden
}

.full-menu {
    position: fixed;
    inset: 0;
    z-index: 1029;
    background: var(--paper);
    padding: 110px 0 3rem;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .35s ease,transform .35s ease
}

.full-menu.is-open {
    opacity: 1;
    transform: none
}

.fm-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 3rem;
    align-items: start
}

.fm-links {
    list-style: none;
    margin: 0;
    padding: 0
}

.fm-links a {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.04em;
    font-size: clamp(2.6rem,5.2vw,4.8rem);
    line-height: 1.08;
    color: var(--text);
    text-decoration: none;
    padding: .1rem 0;
    transition: color .2s ease,transform .3s ease
}

.fm-links a:hover,.fm-links a:focus-visible {
    color: var(--brand-2);
    transform: translateX(10px)
}

.fm-no {
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--muted)
}

.fm-side h6 {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.6rem 0 .6rem
}

.fm-photo {
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    overflow: hidden
}

.fm-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.fm-homes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.fm-homes a {
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .85rem;
    text-decoration: none;
    color: var(--text)
}

.fm-homes a:hover {
    background: var(--surface-2)
}

@media (prefers-reduced-motion:reduce) {
    .full-menu,.fm-links a {
        transition: none
    }
}

.footer-cta {
    background: var(--ink);
    color: #fff;
    --muted: rgba(255,255,255,.62);
    --line: rgba(255,255,255,.12);
    --text: #fff
}

.footer-cta a:not(.btn) {
    color: inherit
}

.footer-cta .brand-mark .bm-bg {
    fill: var(--brand)
}

.footer-cta .brand-mark .bm-wave {
    stroke: var(--ink)
}

.footer-cta .footer-word {
    color: #fff
}

.footer-cta .footer-news input {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.18)
}

.footer-cta .socials a {
    border-color: rgba(255,255,255,.2)
}

.footer-cta .btn-line {
    color: #fff;
    border-color: rgba(255,255,255,.35)
}

.footer-cta .btn-line:hover,.footer-cta .btn-line:focus-visible {
    background: #fff;
    color: var(--ink);
    border-color: #fff
}

.fc-top {
    padding-bottom: clamp(3rem,6vw,5rem);
    margin-bottom: clamp(3rem,6vw,4.5rem);
    border-bottom: 1px solid var(--line)
}

.fc-title {
    font-size: clamp(2.4rem,5.4vw,4.6rem);
    line-height: 1.02;
    letter-spacing: -.04em;
    margin: .6rem 0 0;
    max-width: 16ch
}

.fc-title .serif {
    color: var(--brand)
}

.footer-simple {
    padding: 2.4rem 0 1.6rem;
    border-top: 1px solid var(--line)
}

.fs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem 2rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--line)
}

.fs-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.6rem
}

.fs-links a {
    text-decoration: none;
    font-weight: 500;
    color: var(--text)
}

.fs-links a:hover {
    text-decoration: underline
}

.footer-bottom-in {
    padding-top: 1.2rem;
    font-size: .88rem;
    color: var(--muted)
}

.footer-bottom-in a {
    color: inherit
}

.chat-float {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    height: 52px;
    min-width: 52px;
    padding: 0 15px;
    border-radius: 999px;
    background: #25d366;
    color: #0b2e17;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.35);
    transition: transform .2s ease
}

.chat-float i {
    font-size: 1.4rem;
    line-height: 1
}

.chat-float span {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .3s ease,opacity .2s ease,margin .3s ease
}

.chat-float:hover span,.chat-float:focus-visible span {
    max-width: 9rem;
    opacity: 1;
    margin-left: .5rem
}

.chat-float:hover {
    transform: translateY(-2px);
    color: #0b2e17
}

.chat-float:focus-visible {
    outline: 3px solid var(--brand-2);
    outline-offset: 3px
}

body:has(.cookie-bar:not([hidden])) .chat-float {
    display: none
}

.news-pop .modal-content {
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background: var(--surface);
    color: var(--text)
}

.news-pop .btn-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    background-color: var(--surface);
    border-radius: 50%;
    padding: .6rem;
    opacity: 1
}

.np-photo {
    min-height: 100%
}

.np-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.np-body {
    padding: clamp(1.8rem,4vw,3rem)
}

.news-pop .news-pop-form {
    background: var(--paper);
    padding: .35rem .35rem .35rem 1.2rem
}

.news-pop .news-pop-form input {
    padding: .55rem 0
}

.ty-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: 2rem;
    margin-bottom: 1.4rem;
    box-shadow: 0 0 0 10px color-mix(in srgb,var(--brand) 30%,transparent)
}

.ty-photo {
    position: relative
}

.ty-photo .ph {
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 9 / 7
}

.ty-photo .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ty-card {
    position: absolute;
    left: -1rem;
    bottom: 1.4rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--surface);
    color: var(--text);
    border-radius: 18px;
    padding: .8rem 1rem;
    box-shadow: var(--shadow);
    max-width: calc(100% - 1rem)
}

@media (max-width: 575.98px) {
    .ty-card {
        left:.6rem;
        bottom: .6rem
    }
}

.chat-float {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease,transform .3s ease,visibility .3s
}

.chat-float.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none
}

.chat-float.is-visible:hover {
    transform: translateY(-2px)
}

.mo-w {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    padding: .12em .08em .2em;
    margin: -.12em -.08em -.2em
}

.mo-wi {
    display: inline-block
}

html.mo-motion .mo-split-ready .mo-wi {
    transform: translate3d(0,115%,0);
    opacity: 0;
    transition: transform .9s cubic-bezier(.2,.75,.15,1),opacity .5s ease;
    transition-delay: calc(var(--i,0) * 45ms + var(--mo-delay,0s))
}

html.mo-motion .mo-split-ready .mo-wa,html.mo-motion .mo-split-ready .mo-p {
    opacity: 0;
    transition: opacity .7s ease;
    transition-delay: calc(var(--i,0) * 45ms + var(--mo-delay,0s) + .15s)
}

html.mo-motion .mo-split-ready.mo-in .mo-wi {
    transform: none;
    opacity: 1
}

html.mo-motion .mo-split-ready.mo-in .mo-wa,html.mo-motion .mo-split-ready.mo-in .mo-p {
    opacity: 1
}

html.mo-motion .mo-split-ready.mo-reset * {
    transition: none !important
}

html.mo-motion .reveal.mo-split-ready {
    opacity: 1;
    transform: none;
    transition: none
}

.mo-plx {
    transform: translate3d(0,var(--mo-y,0px),0) scale(calc(var(--mo-s,1) * var(--mo-z,1)));
    will-change: transform
}

.reel:hover .mo-plx,.case:hover .mo-plx {
    --mo-z: 1.05
}

.reel .mo-plx,.case-media .mo-plx {
    transition: transform .5s cubic-bezier(.2,.7,.2,1)
}

.mo-mag {
    transition: transform .35s cubic-bezier(.2,.7,.2,1),background-color .2s ease,color .2s ease,box-shadow .2s ease;
    will-change: transform
}

.mo-mag.mo-mag-out {
    transition-duration: .6s,.2s,.2s,.2s
}

.mo-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease
}

.mo-cursor.is-on {
    opacity: 1
}

.mo-c-dot,.mo-c-ring {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    pointer-events: none
}

.mo-c-dot {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: #fff;
    mix-blend-mode: difference
}

.mo-c-ring {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    display: grid;
    place-items: center
}

.mo-c-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #fff;
    mix-blend-mode: difference;
    transform: scale(var(--mo-rs,1));
    transition: transform .35s cubic-bezier(.2,.7,.2,1),background-color .25s ease,border-color .25s ease
}

.mo-c-label {
    position: relative;
    font: 600 .78rem/1 var(--font-body);
    letter-spacing: .02em;
    color: var(--ink);
    white-space: nowrap;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s ease,transform .3s cubic-bezier(.2,.7,.2,1)
}

.mo-cursor.is-link .mo-c-ring {
    --mo-rs: 1.6
}

.mo-cursor.is-link .mo-c-dot {
    opacity: 0
}

.mo-cursor.is-label .mo-c-ring {
    --mo-rs: 2.2
}

.mo-cursor.is-label .mo-c-ring::before {
    background: var(--brand);
    border-color: var(--brand);
    mix-blend-mode: normal
}

.mo-cursor.is-label .mo-c-label {
    opacity: 1;
    transform: scale(1)
}

.mo-cursor.is-label .mo-c-dot {
    opacity: 0
}

.mo-cursor.is-down .mo-c-ring {
    --mo-rs: .8
}

.mo-cursor.is-label.is-down .mo-c-ring {
    --mo-rs: 1.9
}

html.mo-cursor-page.mo-cursor-on,html.mo-cursor-page.mo-cursor-on *,html.mo-cursor-on [data-mo-cursor-zone],html.mo-cursor-on [data-mo-cursor-zone] * {
    cursor: none !important
}

html.mo-cursor-on :is(input,textarea,select,[contenteditable="true"],iframe,.mo-cursor-off,.mo-cursor-off *) {
    cursor: auto !important
}

html.mo-cursor-on :is(input,textarea,select,[contenteditable="true"],iframe,.mo-cursor-off,.mo-cursor-off *):disabled {
    cursor: not-allowed !important
}

.mo-hscroll {
    position: relative
}

.mo-hs-pin {
    position: relative;
    padding-block:clamp(4.5rem,9vw,8rem)}

.mo-hs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: clamp(1.75rem,3vw,2.5rem)
}

.mo-hs-head h2 {
    max-width: 760px;
    margin: 0
}

.mo-hs-hint {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted)
}

.mo-hs-hint .bi {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    border: 1.5px solid var(--line);
    color: var(--text)
}

.mo-hs-track {
    --mo-pad: max(1rem,calc((100% - var(--container-max)) / 2 + .75rem));
    display: flex;
    gap: clamp(1rem,2vw,1.75rem);
    padding-inline:var(--mo-pad);scroll-padding-inline: var(--mo-pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch
}

.mo-hs-track:focus-visible {
    outline-offset: -3px
}

.mo-hs-card {
    flex: 0 0 auto;
    width: clamp(260px,78vw,400px);
    scroll-snap-align: start;
    display: block;
    color: inherit;
    text-decoration: none
}

.mo-hs-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    isolation: isolate;
    margin-bottom: 1.1rem
}

.mo-hs-media img {
    transition: transform .8s cubic-bezier(.2,.7,.2,1)
}

.mo-hs-card:hover .mo-hs-media img {
    transform: scale(1.05)
}

.mo-hs-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55));
    z-index: 0
}

.mo-hs-num {
    position: absolute;
    z-index: 1;
    top: 1rem;
    left: 1rem;
    font: 600 .78rem/1 var(--font-body);
    letter-spacing: .12em;
    color: #fff;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: .45rem .75rem
}

.mo-hs-metric {
    position: absolute;
    z-index: 1;
    left: 1.1rem;
    bottom: 1rem;
    color: #fff;
    line-height: 1.1
}

.mo-hs-metric b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem,3.2vw,2.8rem);
    letter-spacing: -.04em;
    color: var(--brand)
}

.mo-hs-metric small {
    font-size: .85rem;
    opacity: .9
}

.mo-hs-card h3 {
    font-size: 1.3rem;
    margin: .55rem 0 0
}

.mo-hs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem
}

.mo-hs-end {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.5rem,3vw,2.25rem);
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--ink);
    aspect-ratio: 4 / 5
}

.mo-hs-end h3 {
    font-size: clamp(1.7rem,2.6vw,2.3rem);
    line-height: 1.08;
    margin: 0
}

.mo-hs-end .btn-ink {
    align-self: flex-start
}

[data-bs-theme="dark"] .mo-hs-end .btn-ink {
    background: var(--ink);
    color: #fff
}

.mo-hs-bar {
    display: none
}

.mo-hscroll.mo-hs-on .mo-hs-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block:5.5rem 2.5rem}

.mo-hscroll.mo-hs-on .mo-hs-track {
    width: max-content;
    min-width: 100%;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    will-change: transform
}

.mo-hscroll.mo-hs-on .mo-hs-card {
    width: clamp(300px,27vw,400px)
}

.mo-hscroll.mo-hs-on .mo-hs-media,.mo-hscroll.mo-hs-on .mo-hs-end {
    aspect-ratio: auto;
    height: clamp(220px,calc(100svh - 24rem),500px)
}

.mo-hscroll.mo-hs-on .mo-hs-bar {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: var(--line);
    margin-top: clamp(1.25rem,3vh,2rem);
    overflow: hidden
}

.mo-hscroll.mo-hs-on .mo-hs-bar span {
    display: block;
    height: 100%;
    background: var(--text);
    transform-origin: 0 50%;
    transform: scaleX(0)
}

.mo-fill-on .faded {
    color: inherit
}

.mo-fill-on .mo-f {
    opacity: var(--mo-o,.18)
}

.mo-drag-on {
    cursor: grab
}

.mo-drag-on.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none
}

.mo-drag-on.is-dragging a {
    pointer-events: none
}

.mo-demo-zone {
    position: relative;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    padding: clamp(1.5rem,4vw,2.5rem);
    overflow: hidden;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.mo-demo-zone .mo-demo-tile {
    border-radius: var(--radius-sm);
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14)
}

.mo-demo-zone .mo-demo-tile.ph {
    display: block;
    padding: 0;
    border: 0
}

.mo-demo-zone p {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(255,255,255,.75)
}

@media (max-width: 575.98px) {
    .mo-demo-zone {
        grid-template-columns:1fr 1fr
    }

    .mo-demo-zone .mo-demo-tile:last-of-type {
        grid-column: span 2;
        aspect-ratio: 16 / 7
    }
}

.mo-demo-frame {
    border-radius: var(--radius);
    aspect-ratio: 16 / 9
}

.el-demo .mo-hscroll .mo-hs-pin {
    padding-block:0}

.el-demo .mo-hs-track {
    --mo-pad: 0px
}

.el-demo .mo-hs-card {
    width: clamp(220px,60vw,280px)
}

@media (prefers-reduced-motion:reduce) {
    .mo-wi,.mo-wa,.mo-p,.mo-f {
        transform: none !important;
        opacity: 1 !important
    }

    .mo-plx {
        transform: none !important
    }

    .mo-cursor {
        display: none !important
    }
}

.mo-hscroll.bg-surface-2 .mo-hs-meta .tag {
    background: var(--surface)
}

.mo-hs-hint .mo-hs-scroll,.mo-hs-on .mo-hs-hint .mo-hs-swipe {
    display: none
}

.mo-hs-on .mo-hs-hint .mo-hs-scroll {
    display: inline
}

.wg-hero-slider {
    padding: 0 1rem 1rem
}

.wg-hs-frame {
    position: relative;
    border-radius: 36px;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
    background: #111114;
    touch-action: pan-y
}

.wg-hs-track {
    display: grid
}

.wg-hs-slide {
    grid-area: 1 / 1;
    position: relative;
    min-height: min(840px,92vh);
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: opacity 1s cubic-bezier(.4,0,.2,1),visibility 0s linear 1s
}

.wg-hs-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity 1s cubic-bezier(.4,0,.2,1),visibility 0s
}

.wg-hs-bg {
    position: absolute;
    inset: 0;
    z-index: -2
}

.wg-hs-bg img {
    transform: scale(1.14);
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1)
}

.wg-hs-slide.is-active .wg-hs-bg img {
    transform: scale(1.02);
    transition: transform 8s cubic-bezier(.2,.6,.3,1)
}

.wg-hs-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,rgba(10,10,12,.86) 0%,rgba(10,10,12,.58) 45%,rgba(10,10,12,.08) 82%),linear-gradient(0deg,rgba(10,10,12,.78),transparent 50%)
}

.wg-hs-inner {
    width: 100%;
    padding: clamp(1.5rem,5vw,4.5rem);
    padding-bottom: calc(clamp(1.5rem,4vw,3rem) + 5.5rem)
}

.wg-hs-title {
    font-size: clamp(2.7rem,6.6vw,6rem);
    max-width: 13ch;
    margin-block:1.3rem 1.4rem;color: #fff
}

.wg-hs-title .text-brand {
    color: var(--brand)
}

.wg-hs-slide .lead {
    color: rgba(255,255,255,.84);
    max-width: 33rem
}

.wg-hs-slide .pill {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px)
}

.wg-hs-slide .pill .dot {
    background: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand) 25%,transparent)
}

.wg-hs-slide .btn-line {
    border-color: rgba(255,255,255,.7);
    color: #fff
}

.wg-hs-slide .btn-line:hover,.wg-hs-slide .btn-line:focus-visible {
    background: #fff;
    color: var(--ink)
}

.wg-hs-anim {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .5s ease,transform .5s ease
}

.wg-hs-slide.is-active .wg-hs-anim {
    opacity: 1;
    transform: none;
    transition: opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(.25s + var(--d,0s))
}

.wg-hs-card {
    margin-left: auto;
    max-width: 400px;
    padding: 1.4rem;
    border-radius: 24px;
    background: rgba(20,20,24,.5);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px)
}

.wg-hs-card-top {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.1rem
}

.wg-hs-logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    flex: none
}

.wg-hs-card-top strong {
    display: block;
    line-height: 1.2
}

.wg-hs-card-top small {
    color: rgba(255,255,255,.7)
}

.wg-hs-card-top .tag {
    margin-left: auto;
    background: rgba(255,255,255,.14);
    color: #fff
}

.wg-hs-metric {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem
}

.wg-hs-metric .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem,4vw,3.4rem);
    letter-spacing: -.04em;
    line-height: .95
}

.wg-hs-metric .n sup {
    color: var(--brand);
    font-size: .5em
}

.wg-hs-metric p {
    margin: .45rem 0 0;
    color: rgba(255,255,255,.75);
    font-size: .92rem
}

.wg-hs-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 64px;
    flex: none
}

.wg-hs-bars span {
    width: 10px;
    height: var(--h);
    border-radius: 4px;
    background: rgba(255,255,255,.28);
    transform-origin: bottom
}

.wg-hs-bars span:last-child {
    background: var(--brand)
}

.wg-hs-slide.is-active .wg-hs-bars span {
    animation: wgBar .9s cubic-bezier(.2,.7,.2,1) both;
    animation-delay: calc(.6s + var(--i,0) * .07s)
}

@keyframes wgBar {
    from {
        transform: scaleY(.1)
    }
}

.wg-hs-quote {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: .92rem;
    color: rgba(255,255,255,.85)
}

.wg-hs-controls {
    position: absolute;
    z-index: 3;
    left: clamp(1.5rem,5vw,4.5rem);
    right: clamp(1.5rem,5vw,4.5rem);
    bottom: clamp(1.25rem,3.4vw,2.6rem);
    display: flex;
    align-items: center;
    gap: clamp(.75rem,2vw,1.5rem)
}

.wg-hs-steps {
    display: flex;
    gap: clamp(.6rem,1.6vw,1.25rem);
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none
}

.wg-hs-steps li {
    flex: 1;
    min-width: 0
}

.wg-hs-step {
    width: 100%;
    display: grid;
    gap: .55rem;
    padding: .35rem 0;
    border: 0;
    background: none;
    color: rgba(255,255,255,.62);
    text-align: left;
    font: 600 .85rem/1.2 var(--font-body);
    cursor: pointer;
    transition: color .25s ease
}

.wg-hs-step:hover,.wg-hs-step[aria-current="true"] {
    color: #fff
}

.wg-hs-step .lbl {
    display: flex;
    gap: .55rem;
    min-width: 0
}

.wg-hs-step .lbl span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    opacity: .85
}

.wg-hs-step .bar {
    position: relative;
    display: block;
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,.22);
    overflow: hidden
}

.wg-hs-step .bar i {
    position: absolute;
    inset: 0;
    background: var(--brand);
    transform: scaleX(var(--p,0));
    transform-origin: left
}

.wg-hs-step.is-done .bar i {
    --p: 1;
    background: rgba(255,255,255,.55)
}

.wg-hs-btns {
    display: flex;
    gap: .5rem;
    flex: none
}

.wg-hs-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease
}

.wg-hs-btn:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

.wg-hs-btn:active {
    transform: scale(.94)
}

.wg-hs-frame :focus-visible {
    outline-color: var(--brand)
}

@media (max-width: 991.98px) {
    .wg-hs-card {
        margin:2rem 0 0;
        max-width: 460px
    }
}

@media (max-width: 767.98px) {
    .wg-hero-slider {
        padding-inline:.5rem
    }

    .wg-hs-frame {
        border-radius: 26px
    }

    .wg-hs-slide {
        min-height: 0
    }

    .wg-hs-inner {
        padding-top: 6.5rem;
        padding-bottom: 7.4rem
    }

    .wg-hs-card {
        padding: 1.1rem
    }

    .wg-hs-bars {
        height: 48px
    }

    .wg-hs-quote,.wg-hs-card-top .tag {
        display: none
    }

    .wg-hs-controls {
        flex-wrap: wrap;
        row-gap: .8rem
    }

    .wg-hs-steps {
        flex-basis: 100%
    }

    .wg-hs-step .lbl span {
        display: none
    }

    .wg-hs-btns {
        margin-left: auto
    }

    .wg-hs-btn {
        width: 44px;
        height: 44px
    }
}

.wg-compare {
    --pos: 50%;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    isolation: isolate;
    container-type: inline-size;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    cursor: ew-resize;
    background: var(--surface-2);
    box-shadow: var(--shadow)
}

.wg-compare.is-square {
    aspect-ratio: 5 / 4
}

.wg-cmp-layer {
    position: absolute;
    inset: 0
}

.wg-cmp-layer>img,.wg-cmp-layer>.ph>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none
}

.wg-cmp-layer>.ph {
    position: absolute;
    inset: 0
}

.wg-cmp-before {
    z-index: 1;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0)
}

.wg-cmp-line {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 3px;
    margin-left: -1.5px;
    background: #fff;
    box-shadow: 0 0 18px rgba(0,0,0,.35);
    pointer-events: none
}

.wg-cmp-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    box-shadow: 0 0 0 6px rgba(255,255,255,.35),0 10px 26px rgba(0,0,0,.3);
    transition: transform .2s ease
}

.wg-compare.is-dragging .wg-cmp-knob {
    transform: translate(-50%,-50%) scale(1.1)
}

.wg-compare:has(.wg-cmp-range:focus-visible) .wg-cmp-knob {
    outline: 3px solid var(--brand-2);
    outline-offset: 5px
}

.wg-cmp-label {
    position: absolute;
    z-index: 4;
    top: 1rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    pointer-events: none
}

.wg-cmp-label.is-before {
    left: 1rem;
    background: rgba(18,18,18,.72);
    color: #fff
}

.wg-cmp-label.is-after {
    right: 1rem;
    background: var(--brand);
    color: var(--ink)
}

.wg-cmp-range {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none
}

.wg-cmp-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    font-size: .88rem;
    color: var(--muted)
}

.wg-ad {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: #fff;
    font-family: var(--font-body)
}

.wg-cmp-before.is-dull img {
    filter: saturate(.25) contrast(.82) brightness(1.08)
}

.wg-ad-old .wg-ad-strip {
    position: absolute;
    left: 4cqi;
    right: 52cqi;
    bottom: 4cqi;
    background: #f4f4f4;
    color: #333;
    padding: 2.2cqi 2.6cqi;
    font-family: Arial,Helvetica,sans-serif;
    border: 1px solid #ccc
}

.wg-ad-old .wg-ad-strip b {
    display: block;
    font-size: max(.7rem,2.6cqi);
    letter-spacing: .02em;
    text-transform: uppercase
}

.wg-ad-old .wg-ad-strip span {
    display: block;
    font-size: max(.62rem,1.7cqi);
    color: #666;
    margin-top: .4cqi
}

.wg-ad-old .wg-ad-strip u {
    display: inline-block;
    margin-top: 1cqi;
    font-size: max(.6rem,1.6cqi);
    color: #2a5db0
}

.wg-ad-new::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg,rgba(10,10,12,.78) 0%,rgba(10,10,12,.35) 40%,transparent 62%)
}

.wg-ad-new .wg-ad-copy {
    position: absolute;
    right: 4.5cqi;
    top: 50%;
    transform: translateY(-50%);
    width: 38cqi;
    text-align: left
}

.wg-ad-new .wg-ad-kicker {
    display: inline-block;
    background: var(--brand);
    color: var(--ink);
    border-radius: 999px;
    padding: .5cqi 1.6cqi;
    font-size: max(.58rem,1.45cqi);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.wg-ad-new .wg-ad-head {
    display: block;
    margin: 1.6cqi 0 1.2cqi;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: max(1rem,5.2cqi);
    line-height: .98;
    letter-spacing: -.04em
}

.wg-ad-new .wg-ad-head em {
    font-weight: 300
}

.wg-ad-new .wg-ad-sub {
    display: block;
    font-size: max(.62rem,1.7cqi);
    color: rgba(255,255,255,.85)
}

.wg-ad-new .wg-ad-cta {
    display: inline-flex;
    align-items: center;
    gap: .8cqi;
    margin-top: 2cqi;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 1cqi 2.4cqi;
    font-size: max(.62rem,1.6cqi);
    font-weight: 700
}

.wg-ad-new .wg-ad-stars {
    position: absolute;
    left: 4cqi;
    bottom: 4cqi;
    display: flex;
    align-items: center;
    gap: .8cqi;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    border-radius: 999px;
    padding: .9cqi 2cqi;
    font-size: max(.6rem,1.55cqi);
    font-weight: 600
}

.wg-ad-new .wg-ad-stars .bi {
    color: #f5a623
}

@container (max-width:520px) {
    .wg-ad-new .wg-ad-sub,.wg-ad-old .wg-ad-strip span {
        display: none
    }

    .wg-ad-new .wg-ad-copy {
        right: 3cqi;
        width: 36cqi
    }

    .wg-ad-old .wg-ad-strip {
        left: 3cqi;
        right: 60cqi
    }

    .wg-cmp-knob {
        width: 44px;
        height: 44px;
        font-size: 1.1rem
    }
}

@media (max-width: 575.98px) {
    .wg-compare {
        aspect-ratio:4 / 3.4
    }

    .wg-cmp-label {
        top: .7rem;
        font-size: .72rem
    }

    .wg-cmp-label.is-before {
        left: .7rem
    }

    .wg-cmp-label.is-after {
        right: .7rem
    }
}

.wg-cmp-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .75rem;
    margin-top: 1.5rem
}

.wg-cmp-stats>div {
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line)
}

.wg-cmp-stats .n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -.04em;
    line-height: 1
}

.wg-cmp-stats small {
    display: block;
    margin-top: .35rem;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.3
}

.wg-cmp-stats>div:first-child {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.wg-cmp-stats>div:first-child small {
    color: rgba(18,18,18,.72)
}

@media (max-width: 400px) {
    .wg-cmp-stats .n {
        font-size:1.45rem
    }

    .wg-cmp-stats>div {
        padding: .85rem
    }
}

.wg-gallery {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: clamp(150px,15vw,210px);
    gap: 1rem;
    grid-auto-flow: dense
}

.wg-gallery .is-big {
    grid-column: span 2;
    grid-row: span 2
}

.wg-gallery .is-tall {
    grid-row: span 2
}

.wg-gallery .is-wide {
    grid-column: span 2
}

@media (max-width: 991.98px) {
    .wg-gallery {
        grid-template-columns:repeat(2,1fr);
        grid-auto-rows: clamp(140px,30vw,230px);
        gap: .75rem
    }

    .wg-gallery .is-tall:not(.keep-tall) {
        grid-row: span 1
    }
}

.wg-gal-item {
    position: relative;
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    text-decoration: none
}

.wg-gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.wg-gal-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(10,10,12,.7),transparent 55%);
    opacity: 0;
    transition: opacity .35s ease
}

.wg-gal-item:hover img,.wg-gal-item:focus-visible img {
    transform: scale(1.06)
}

.wg-gal-item:hover::after,.wg-gal-item:focus-visible::after {
    opacity: 1
}

.wg-gal-cap {
    position: absolute;
    z-index: 1;
    left: 1rem;
    right: 4rem;
    bottom: .9rem;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease,transform .35s ease
}

.wg-gal-item:hover .wg-gal-cap,.wg-gal-item:focus-visible .wg-gal-cap {
    opacity: 1;
    transform: none
}

.wg-zoom-ic {
    position: absolute;
    z-index: 1;
    right: .8rem;
    bottom: .8rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1rem;
    transform: scale(.7);
    opacity: 0;
    transition: transform .3s ease,opacity .3s ease
}

.wg-gal-item:hover .wg-zoom-ic,.wg-gal-item:focus-visible .wg-zoom-ic {
    transform: none;
    opacity: 1
}

@media (hover: none) {
    .wg-zoom-ic {
        opacity:1;
        transform: none
    }
}

.wg-lb-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    color: var(--ink)
}

.wg-lb-link img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.wg-lb-link:hover img {
    transform: scale(1.04)
}

.wg-lb-link:hover .wg-zoom-ic,.wg-lb-link:focus-visible .wg-zoom-ic {
    transform: none;
    opacity: 1
}

.wg-lb-link:focus-visible {
    outline-offset: -4px
}

.wg-zoomable {
    position: relative
}

.wg-zoom-btn {
    position: absolute;
    z-index: 3;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transition: background-color .25s ease,transform .25s ease
}

.wg-zoom-btn:hover,.wg-zoom-btn:focus-visible {
    background: var(--brand);
    color: var(--ink);
    transform: scale(1.08)
}

html.wg-lb-open {
    overflow: hidden
}

.wg-lb {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(8,8,10,.97);
    color: #fff;
    overscroll-behavior: contain
}

.wg-lb[open] {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    animation: wgLbIn .3s ease both
}

.wg-lb::backdrop {
    background: rgba(0,0,0,.5)
}

@keyframes wgLbIn {
    from {
        opacity: 0
    }
}

.wg-lb-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem,3vw,1.75rem)
}

.wg-lb-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .95rem;
    color: rgba(255,255,255,.8)
}

.wg-lb-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0 clamp(.75rem,6vw,6.5rem);
    touch-action: pan-y
}

.wg-lb-fig {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-height: 100%;
    min-height: 0
}

.wg-lb-img {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 11rem);
    width: auto;
    height: auto;
    border-radius: 16px;
    object-fit: contain;
    background: #1b1b1e;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    animation: wgLbImg .45s cubic-bezier(.2,.7,.2,1) both
}

@keyframes wgLbImg {
    from {
        opacity: 0;
        transform: scale(.96)
    }
}

.wg-lb-cap {
    text-align: center;
    color: rgba(255,255,255,.85);
    font-size: .98rem;
    max-width: 60ch;
    padding-inline:1rem}

.wg-lb-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    transition: background-color .25s ease,color .25s ease,border-color .25s ease
}

.wg-lb-btn:hover {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.wg-lb :focus-visible {
    outline-color: var(--brand)
}

.wg-lb-prev,.wg-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

.wg-lb-prev {
    left: clamp(.75rem,2vw,1.75rem)
}

.wg-lb-next {
    right: clamp(.75rem,2vw,1.75rem)
}

.wg-lb-btn[hidden] {
    display: none
}

.wg-lb-foot {
    height: 1.25rem
}

@media (max-width: 767.98px) {
    .wg-lb-stage {
        padding:0 .75rem
    }

    .wg-lb-prev,.wg-lb-next {
        top: auto;
        bottom: -3.9rem;
        transform: none
    }

    .wg-lb-prev {
        left: calc(50% - 60px)
    }

    .wg-lb-next {
        right: calc(50% - 60px)
    }

    .wg-lb-foot {
        height: 5rem
    }

    .wg-lb-img {
        max-height: calc(100dvh - 15rem)
    }
}

.bg-ink .wg-cmp-stats>div:not(:first-child) {
    background: rgba(255,255,255,.05)
}

@media (prefers-reduced-motion:reduce) {
    .wg-hs-anim {
        opacity: 1;
        transform: none
    }

    .wg-hs-bg img {
        transform: none !important
    }
}

.h10-hero h1 {
    font-size: clamp(2.7rem,5.6vw,5.1rem)
}

.h10-proof {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 2.2rem
}

.h10-proof .avatar {
    object-fit: cover
}

.h10-proof-txt {
    font-size: .92rem;
    line-height: 1.35
}

.h10-stage {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1 / .94;
    max-width: 620px;
    margin-inline:auto}

.h10-disc {
    position: absolute;
    width: 66cqw;
    aspect-ratio: 1;
    left: 17cqw;
    top: 27cqw;
    border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
    background: var(--brand-2);
    opacity: .9;
    animation: morph 14s ease-in-out infinite
}

.h10-ring {
    position: absolute;
    width: 92cqw;
    aspect-ratio: 1;
    left: 4cqw;
    top: 2cqw;
    border-radius: 50%;
    border: 2px dashed color-mix(in srgb,var(--text) 22%,transparent);
    animation: spin 70s linear infinite
}

.h10-phone {
    position: absolute;
    aspect-ratio: 9 / 19;
    padding: 1.1cqw;
    border-radius: 6.2cqw;
    background: #101012;
    box-shadow: 0 40px 70px -28px rgba(0,0,0,.55),inset 0 0 0 .35cqw #2c2c31;
    transition: transform .5s cubic-bezier(.2,.7,.2,1)
}

.h10-phone::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 2.2cqw;
    width: 26%;
    height: 2.1%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #101012
}

.h10-phone.p1 {
    width: 33cqw;
    left: 1cqw;
    top: 17cqw;
    transform: rotate(-10deg);
    z-index: 2;
    --fs: 1.85cqw
}

.h10-phone.p2 {
    width: 40cqw;
    left: 30cqw;
    top: 1cqw;
    z-index: 3;
    --fs: 2.25cqw
}

.h10-phone.p3 {
    width: 33cqw;
    right: 1cqw;
    top: 13cqw;
    transform: rotate(9deg);
    z-index: 2;
    --fs: 1.85cqw
}

.h10-stage:hover .h10-phone.p1 {
    transform: rotate(-13deg) translateX(-1.5cqw)
}

.h10-stage:hover .h10-phone.p3 {
    transform: rotate(12deg) translateX(1.5cqw)
}

.h10-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 5.2cqw;
    overflow: hidden
}

.h10-screen>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.h10-ui {
    position: absolute;
    inset: 0;
    color: #fff;
    font-size: var(--fs);
    line-height: 1.25;
    background: linear-gradient(180deg,rgba(0,0,0,.45),transparent 22%,transparent 55%,rgba(0,0,0,.78))
}

.h10-ui .bi {
    line-height: 1
}

.h10-top {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600
}

.h10-top span {
    display: inline-flex;
    gap: .35em;
    align-items: center
}

.h10-live {
    position: absolute;
    left: 8%;
    top: 15%;
    display: inline-flex;
    gap: .35em;
    align-items: center;
    padding: .3em .7em;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-weight: 600;
    font-size: .9em
}

.h10-rail {
    position: absolute;
    right: 4.5%;
    bottom: 22%;
    display: flex;
    flex-direction: column;
    gap: .9em;
    align-items: center;
    font-size: .78em;
    font-weight: 600
}

.h10-rail span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25em
}

.h10-rail .bi {
    font-size: 2.1em;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35))
}

.h10-rail .is-hot {
    color: var(--coral)
}

.h10-av img {
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    display: block
}

.h10-cap {
    position: absolute;
    left: 7%;
    right: 24%;
    bottom: 7%;
    font-size: .92em
}

.h10-cap b {
    display: block;
    margin-bottom: .2em
}

.h10-music {
    display: block;
    margin-top: .45em;
    font-size: .88em;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h10-progress {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 3.2%;
    height: .32em;
    border-radius: 999px;
    background: rgba(255,255,255,.3);
    overflow: hidden
}

.h10-progress span {
    display: block;
    height: 100%;
    width: 38%;
    background: #fff;
    border-radius: inherit;
    animation: h10-play 9s linear infinite
}

@keyframes h10-play {
    from {
        width: 8%
    }

    to {
        width: 100%
    }
}

.h10-chip {
    position: absolute;
    z-index: 4;
    display: flex;
    gap: .65rem;
    align-items: center;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: .7rem .95rem;
    box-shadow: var(--shadow);
    font-size: .85rem;
    line-height: 1.2
}

.h10-chip b {
    font-family: var(--font-display)
}

.h10-chip small {
    display: block;
    color: var(--muted);
    font-size: .75rem
}

.h10-chip-ico {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.1rem
}

.h10-chip-eng {
    left: -3%;
    top: 5%
}

.h10-chip-eng b {
    font-size: 1.35rem;
    letter-spacing: -.03em;
    display: block
}

.h10-chip-react {
    right: -2%;
    bottom: 23%;
    border-radius: 999px;
    padding: .55rem 1rem .55rem .6rem;
    gap: .2rem
}

.h10-chip-react .bi {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .9rem;
    border: 2px solid var(--surface);
    margin-inline-end:-10px}

.h10-chip-react .r1 {
    background: var(--coral)
}

.h10-chip-react .r2 {
    background: var(--brand-2)
}

.h10-chip-react .r3 {
    background: #f5a623;
    margin-inline-end:.5rem}

.h10-chip-react b {
    font-size: 1.05rem
}

.h10-chip-follow {
    left: 4%;
    bottom: 1%;
    border-radius: 999px;
    padding: .4rem 1rem .4rem .4rem;
    background: var(--ink);
    color: #fff;
    border-color: transparent
}

.h10-chip-follow img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover
}

[data-bs-theme="dark"] .h10-chip-follow {
    background: #fff;
    color: var(--ink)
}

.h10-heart {
    position: absolute;
    z-index: 4;
    color: var(--coral);
    font-size: 1.7rem;
    animation: h10-rise 4.2s ease-in-out infinite
}

.h10-heart.h1 {
    right: 22%;
    top: 3%
}

.h10-heart.h2 {
    right: 2%;
    top: 4%;
    font-size: 1.15rem;
    color: var(--brand-2);
    animation-delay: -1.4s
}

.h10-heart.h3 {
    left: 27%;
    top: 0;
    font-size: 1.1rem;
    color: #f5a623;
    animation-delay: -2.8s
}

[data-bs-theme="dark"] .h10-heart.h2 {
    color: color-mix(in srgb,var(--brand-2) 55%,#fff)
}

@keyframes h10-rise {
    0% {
        transform: translateY(14px) scale(.7);
        opacity: 0
    }

    30% {
        opacity: 1
    }

    100% {
        transform: translateY(-34px) scale(1.1);
        opacity: 0
    }
}

@media (max-width: 575.98px) {
    .h10-proof {
        margin-top:1.6rem
    }

    .h10-chip {
        font-size: .72rem;
        padding: .45rem .65rem;
        border-radius: 14px;
        gap: .45rem
    }

    .h10-chip-ico {
        width: 30px;
        height: 30px;
        font-size: .9rem;
        border-radius: 9px
    }

    .h10-chip-eng {
        left: 0;
        top: 2%
    }

    .h10-chip-eng b {
        font-size: 1.05rem
    }

    .h10-chip-react {
        right: 0;
        bottom: 20%
    }

    .h10-chip-react .bi {
        width: 24px;
        height: 24px;
        font-size: .75rem
    }

    .h10-chip-react b {
        font-size: .9rem
    }

    .h10-chip-follow {
        left: 0;
        bottom: -2%
    }

    .h10-chip-follow img {
        width: 26px;
        height: 26px
    }

    .h10-heart {
        font-size: 1.2rem
    }

    .h10-phone.p1 {
        left: 4cqw
    }

    .h10-phone.p3 {
        right: 4cqw
    }
}

.h10-platforms {
    padding-block:clamp(3.5rem,7vw,6rem);overflow: hidden
}

.h10-plat {
    position: relative;
    height: 100%;
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s ease
}

.h10-plat::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: var(--pc);
    filter: blur(55px);
    opacity: .32;
    transition: opacity .35s ease
}

.h10-plat:hover {
    transform: translateY(-6px)
}

.h10-plat:hover::after {
    opacity: .55
}

.h10-plat-ico {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    background: var(--pc);
    color: var(--pc-on)
}

.h10-plat h3 {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--muted);
    margin: 1.4rem 0 .4rem
}

.h10-plat-n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.1rem,4vw,3.4rem);
    letter-spacing: -.05em;
    line-height: 1
}

.h10-plat small {
    display: block;
    color: var(--muted);
    margin-top: .35rem
}

.h10-plat-up {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    margin-top: 1.1rem;
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb,var(--pc) 20%,transparent);
    color: #fff
}

.h10-plat.is-tiktok {
    --pc: var(--brand);
    --pc-on: var(--ink)
}

.h10-plat.is-insta {
    --pc: var(--coral);
    --pc-on: var(--ink)
}

.h10-plat.is-yt {
    --pc: var(--brand-2);
    --pc-on: #fff
}

.h10-plat.is-pin {
    --pc: #f3f1ec;
    --pc-on: var(--ink)
}

@media (max-width: 575.98px) {
    .h10-plat {
        padding:1.1rem
    }

    .h10-plat-ico {
        width: 42px;
        height: 42px;
        font-size: 1.15rem
    }

    .h10-plat small {
        font-size: .78rem
    }

    .h10-plat-up {
        font-size: .7rem;
        padding: .25rem .55rem
    }
}

.h10-creator {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .35s ease,box-shadow .35s ease
}

.h10-creator:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.h10-cr-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    isolation: isolate
}

.h10-cr-photo img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.h10-creator:hover .h10-cr-photo img {
    transform: scale(1.06)
}

.h10-cr-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 50%,rgba(0,0,0,.72))
}

.h10-cr-plat {
    position: absolute;
    z-index: 2;
    right: .7rem;
    top: .7rem;
    display: flex;
    gap: .35rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    font-size: .85rem
}

.h10-cr-name {
    position: absolute;
    z-index: 2;
    left: 1rem;
    right: 1rem;
    bottom: .9rem;
    color: #fff
}

.h10-cr-name h3 {
    font-size: 1.15rem;
    margin: 0 0 .15rem
}

.h10-cr-name h3 .bi {
    color: var(--brand);
    font-size: .85em
}

.h10-cr-name span {
    font-size: .85rem;
    opacity: .85
}

.h10-cr-body {
    padding: 1rem 1.1rem 1.2rem
}

.h10-cr-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding-bottom: .9rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--line)
}

.h10-cr-stats b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.03em;
    line-height: 1.1
}

.h10-cr-stats small {
    color: var(--muted);
    font-size: .78rem
}

.h10-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem
}

@media (max-width: 575.98px) {
    .h10-cr-name {
        left:.7rem;
        right: .7rem;
        bottom: .65rem
    }

    .h10-cr-name h3 {
        font-size: .95rem
    }

    .h10-cr-name span {
        font-size: .75rem
    }

    .h10-cr-plat {
        font-size: .72rem;
        right: .5rem;
        top: .5rem;
        padding: .2rem .45rem
    }

    .h10-cr-body {
        padding: .75rem .8rem .9rem
    }

    .h10-cr-stats b {
        font-size: 1.1rem
    }

    .h10-cr-stats small {
        font-size: .7rem
    }

    .h10-tags .tag {
        font-size: .7rem;
        padding: .2rem .5rem
    }
}

.h10-wall {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    align-items: stretch
}

.h10-wall-col {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.h10-wall-col>:last-child {
    flex-grow: 1
}

.h10-post {
    position: relative;
    display: block;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
    background: linear-gradient(135deg,#d9d2c3,#ebe6da)
}

[data-bs-theme="dark"] .h10-post {
    background: linear-gradient(135deg,#222226,#2c2c31)
}

.h10-post.t-tall {
    aspect-ratio: 9 / 14
}

.h10-post.t-mid {
    aspect-ratio: 4 / 5
}

.h10-post.t-sq {
    aspect-ratio: 1
}

.h10-post>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.h10-post:not(.is-stat)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,rgba(0,0,0,.3),transparent 30%,transparent 55%,rgba(0,0,0,.75))
}

.h10-post:hover>img {
    transform: scale(1.06)
}

.h10-post-top {
    position: absolute;
    left: .75rem;
    top: .75rem;
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .76rem;
    font-weight: 600;
    max-width: calc(100% - 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h10-post figcaption {
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .85rem
}

.h10-views {
    display: flex;
    gap: .3rem;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -.03em;
    line-height: 1.1
}

.h10-post figcaption small {
    display: block;
    opacity: .85;
    font-size: .8rem;
    margin-top: .15rem
}

.h10-post.is-stat {
    background: var(--brand);
    color: var(--ink);
    padding: 1.4rem;
    aspect-ratio: 1 / 1.05;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .6rem
}

.h10-post.is-stat.is-v {
    background: var(--brand-2);
    color: #fff
}

.h10-stat-n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem,4.2vw,3.8rem);
    letter-spacing: -.05em;
    line-height: 1
}

.h10-post.is-stat>span:not(.h10-stat-n) {
    font-weight: 500;
    line-height: 1.35
}

.h10-post.is-stat .bi {
    font-size: 2rem;
    align-self: flex-end;
    line-height: 1
}

@media (max-width: 991.98px) {
    .h10-wall {
        grid-template-columns:repeat(2,1fr)
    }

    .h10-wall-col:nth-child(3)>.is-stat {
        order: 3;
        flex-grow: 1
    }

    .h10-wall-col:nth-child(3)>:last-child {
        flex-grow: 0
    }
}

@media (max-width: 575.98px) {
    .h10-wall,.h10-wall-col {
        gap:.7rem
    }

    .h10-post {
        border-radius: 16px
    }

    .h10-views {
        font-size: 1.05rem
    }

    .h10-post figcaption small {
        font-size: .72rem
    }

    .h10-post-top {
        font-size: .68rem;
        padding: .25rem .55rem;
        left: .5rem;
        top: .5rem
    }

    .h10-post figcaption {
        left: .65rem;
        right: .65rem;
        bottom: .6rem
    }

    .h10-post.is-stat {
        padding: 1rem
    }

    .h10-post.is-stat>span:not(.h10-stat-n) {
        font-size: .82rem
    }

    .h10-post.is-stat .bi {
        font-size: 1.4rem
    }
}

.h10-camp {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .35s ease,box-shadow .35s ease
}

.h10-camp:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.h10-camp-media {
    position: relative;
    aspect-ratio: 16 / 11
}

.h10-camp-media img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.h10-camp:hover .h10-camp-media img {
    transform: scale(1.05)
}

.h10-camp-brand {
    position: absolute;
    left: 1rem;
    top: 1rem;
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: .85rem
}

.h10-camp-plat {
    position: absolute;
    right: 1rem;
    top: 1rem;
    display: inline-flex;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .9rem
}

.h10-camp-body {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    flex: 1
}

.h10-camp-body h3 {
    margin-bottom: .6rem
}

.h10-camp-kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .5rem;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line)
}

.h10-camp-kpis b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.h10-camp-kpis small {
    color: var(--muted);
    font-size: .78rem
}

.h10-camp.is-featured {
    background: var(--brand-2);
    color: #fff;
    border-color: var(--brand-2);
    --muted: color-mix(in srgb,var(--brand-2) 8%,#fff);
    --line: rgba(255,255,255,.22)
}

.h10-camp.is-featured .h10-camp-kpis b {
    color: var(--brand)
}

.h10-how-art {
    position: relative;
    max-width: 460px;
    margin-inline:auto;padding-bottom: 2rem
}

.h10-how-photo {
    aspect-ratio: 4 / 5;
    border-radius: 300px 300px 28px 28px
}

.h10-cal {
    position: absolute;
    right: -6%;
    bottom: 0;
    width: min(270px,80%);
    background: #fff;
    color: var(--ink);
    border-radius: 20px;
    padding: 1rem 1.1rem;
    box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
    font-size: .88rem
}

.h10-cal-live {
    background: var(--brand);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px
}

.h10-cal-row {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .5rem 0;
    border-top: 1px solid rgba(18,18,18,.1)
}

.h10-cal-row span {
    width: 2.4rem;
    font-weight: 600;
    color: #5d5a54
}

.h10-cal-row .bi {
    color: var(--brand-2)
}

.h10-steps {
    list-style: none;
    padding: 0;
    margin: 0
}

.h10-steps li {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 1.2rem;
    align-items: start;
    padding-block:1.3rem;border-top: 1px solid var(--line)
}

.h10-steps li:last-child {
    border-bottom: 1px solid var(--line)
}

.h10-step-no {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    transition: background-color .3s ease,color .3s ease,border-color .3s ease
}

.h10-steps li:hover .h10-step-no {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.h10-steps h3 {
    font-size: 1.25rem;
    margin-bottom: .35rem
}

.h10-steps p {
    color: var(--muted);
    margin: 0;
    font-size: .98rem
}

.h10-step-t {
    font-size: .8rem;
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap;
    padding-top: .35rem
}

@media (max-width: 575.98px) {
    .h10-steps li {
        grid-template-columns:44px 1fr;
        gap: .4rem 1rem
    }

    .h10-step-no {
        width: 42px;
        height: 42px
    }

    .h10-step-t {
        grid-column: 2;
        grid-row: 1;
        padding-top: 0
    }

    .h10-steps li>div {
        grid-column: 2
    }

    .h10-cal {
        right: 0
    }
}

.h11-hero h1 {
    font-size: clamp(2.6rem,5vw,4.6rem)
}

.h11-trust {
    list-style: none;
    display: flex;
    margin: 2.2rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--line)
}

.h11-trust li {
    flex: 1;
    padding-inline-end:1rem}

.h11-trust li + li {
    padding-inline-start:1rem;border-inline-start:1px solid var(--line)}

.h11-trust b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.h11-trust span {
    color: var(--muted);
    font-size: .85rem
}

.h11-art {
    position: relative;
    container-type: inline-size;
    padding-top: 28%;
    padding-bottom: 2.6rem
}

.h11-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    aspect-ratio: 4 / 3.1;
    border-radius: 28px;
    box-shadow: var(--shadow)
}

.h11-dash {
    position: relative;
    z-index: 2;
    width: 86%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 40px 80px -30px rgba(18,18,18,.4);
    overflow: hidden;
    font-size: clamp(.6rem,1.62cqw,.84rem);
    line-height: 1.3
}

[data-bs-theme="dark"] .h11-dash {
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.9)
}

.h11-bar {
    display: flex;
    align-items: center;
    gap: .9em;
    padding: .75em 1.1em;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2)
}

.h11-dots {
    display: flex;
    gap: .4em
}

.h11-dots i {
    width: .8em;
    height: .8em;
    border-radius: 50%;
    background: var(--coral)
}

.h11-dots i:nth-child(2) {
    background: #f5c451
}

.h11-dots i:nth-child(3) {
    background: #4ade80
}

.h11-url {
    flex: 1;
    text-align: center;
    color: var(--muted);
    background: var(--surface);
    border-radius: 999px;
    padding: .3em .9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h11-live {
    display: inline-flex;
    gap: .4em;
    align-items: center;
    font-weight: 600
}

.h11-live span,.h11-sync span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,.5);
    animation: h11-ping 2s ease-out infinite
}

@keyframes h11-ping {
    to {
        box-shadow: 0 0 0 7px rgba(34,197,94,0)
    }
}

.h11-dash-body {
    padding: 1.2em;
    display: grid;
    gap: 1em
}

.h11-kpis {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .8em
}

.h11-kpis>div,.h11-chart,.h11-funnel,.h11-table {
    border: 1px solid var(--line);
    border-radius: 12px
}

.h11-kpis>div {
    padding: .75em .9em
}

.h11-kpis small {
    display: block;
    color: var(--muted)
}

.h11-kpis b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75em;
    letter-spacing: -.04em;
    line-height: 1.15
}

.h11-kpis em,.h11-up {
    font-style: normal;
    font-weight: 600;
    color: #15803d
}

[data-bs-theme="dark"] .h11-kpis em {
    color: #6fdc9c
}

.h11-chart {
    padding: .9em 1em .6em
}

.h11-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5em
}

.h11-seg {
    display: inline-flex;
    padding: .15em;
    border-radius: 999px;
    background: var(--surface-2)
}

.h11-seg span {
    padding: .15em .65em;
    border-radius: 999px;
    color: var(--muted)
}

.h11-seg .on {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.12)
}

.h11-chart-box {
    position: relative;
    margin-top: .7em
}

.h11-chart-box svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible
}

.h11-grid {
    fill: none;
    stroke: var(--line);
    stroke-dasharray: 4 5
}

.h11-line {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round
}

.h11-pt {
    fill: var(--surface);
    stroke: var(--brand-2);
    stroke-width: 3
}

[data-bs-theme="dark"] .h11-line,[data-bs-theme="dark"] .h11-pt {
    stroke: color-mix(in srgb,var(--brand-2) 55%,#fff)
}

.h11-tip {
    position: absolute;
    right: 7%;
    top: 0;
    padding: .25em .6em;
    border-radius: 6px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    font-size: .9em;
    white-space: nowrap
}

[data-bs-theme="dark"] .h11-tip {
    background: #fff;
    color: var(--ink)
}

.h11-months {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: .85em;
    margin-top: .35em
}

.h11-row {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1em
}

.h11-funnel,.h11-table {
    padding: .85em 1em
}

.h11-funnel>b,.h11-table>b {
    display: block;
    font-weight: 600;
    margin-bottom: .5em
}

.h11-f {
    display: grid;
    grid-template-columns: 4.8em 1fr 3.3em;
    gap: .5em;
    align-items: center;
    margin-top: .5em;
    font-size: .92em
}

.h11-f span {
    color: var(--muted)
}

.h11-f i {
    display: block;
    height: .95em;
    width: var(--w);
    border-radius: 4px;
    background: linear-gradient(90deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 50%,var(--coral)))
}

.h11-f em {
    font-style: normal;
    font-weight: 600;
    text-align: end
}

.h11-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92em
}

.h11-table th {
    color: var(--muted);
    font-weight: 500;
    text-align: start;
    padding: 0 0 .35em;
    border-bottom: 1px solid var(--line)
}

.h11-table td {
    padding: .4em 0;
    border-bottom: 1px solid var(--line);
    white-space: nowrap
}

.h11-table tr:last-child td {
    border-bottom: 0
}

.h11-table th:not(:first-child),.h11-table td:not(:first-child) {
    text-align: end
}

.h11-table td:last-child {
    font-weight: 600
}

.h11-table td .bi {
    color: var(--brand-2);
    margin-inline-end:.3em}

[data-bs-theme="dark"] .h11-table td .bi {
    color: color-mix(in srgb,var(--brand-2) 55%,#fff)
}

.h11-toast {
    position: absolute;
    z-index: 3;
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .65rem .95rem .65rem .65rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    font-size: .85rem;
    line-height: 1.25
}

.h11-toast b {
    display: block
}

.h11-toast small {
    color: var(--muted);
    font-size: .75rem
}

.h11-toast-ico {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: #fff;
    font-size: 1.1rem
}

.h11-toast-ico.is-v {
    background: var(--brand);
    color: var(--ink)
}

.h11-toast.t1 {
    left: 4%;
    top: 5%
}

.h11-toast.t2 {
    right: 0;
    bottom: 0
}

@media (max-width: 991.98px) {
    .h11-art {
        max-width:720px;
        margin-inline:auto}
}

@media (max-width: 575.98px) {
    .h11-trust b {
        font-size:1.35rem
    }

    .h11-trust span {
        font-size: .78rem
    }

    .h11-art {
        padding-top: 44%
    }

    .h11-photo {
        width: 80%;
        border-radius: 20px
    }

    .h11-dash {
        width: 100%;
        font-size: .62rem;
        border-radius: 16px
    }

    .h11-row {
        grid-template-columns: 1fr
    }

    .h11-table {
        display: none
    }

    .h11-toast {
        font-size: .72rem;
        padding: .45rem .7rem .45rem .45rem;
        border-radius: 12px;
        gap: .45rem
    }

    .h11-toast small {
        font-size: .66rem
    }

    .h11-toast-ico {
        width: 28px;
        height: 28px;
        font-size: .85rem;
        border-radius: 8px
    }

    .h11-toast.t1 {
        left: 0;
        top: 4%
    }

    .h11-toast.t2 {
        right: 0;
        bottom: .4rem
    }
}

.h11-stage {
    height: 100%;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    transition: transform .35s ease,box-shadow .35s ease
}

.h11-stage:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.h11-seg-shape {
    height: 96px;
    margin-bottom: 1.4rem;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: var(--sg);
    clip-path: polygon(0 calc(50% - var(--a) / 2),100% calc(50% - var(--b) / 2),100% calc(50% + var(--b) / 2),0 calc(50% + var(--a) / 2))
}

.h11-seg-shape span {
    background: rgba(255,255,255,.92);
    color: var(--ink);
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap
}

.h11-stage.s1 {
    --sg: linear-gradient(90deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 60%,var(--coral)))
}

.h11-stage.s2 {
    --sg: linear-gradient(90deg,color-mix(in srgb,var(--brand-2) 60%,var(--coral)),var(--coral))
}

.h11-stage.s3 {
    --sg: linear-gradient(90deg,var(--coral),color-mix(in srgb,var(--coral) 50%,var(--brand)))
}

.h11-stage.s4 {
    --sg: linear-gradient(90deg,color-mix(in srgb,var(--coral) 50%,var(--brand)),var(--brand))
}

.h11-st-no {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.h11-stage h3 {
    margin: .5rem 0 .6rem
}

.h11-stage p {
    font-size: .97rem;
    margin-bottom: 1.2rem
}

.h11-metrics {
    list-style: none;
    margin: auto 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .55rem
}

.h11-metrics li {
    display: flex;
    gap: .7rem;
    align-items: baseline
}

.h11-metrics b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.03em;
    min-width: 4.6rem
}

.h11-metrics span {
    color: var(--muted);
    font-size: .88rem
}

.h11-loop {
    margin-top: 1.5rem;
    display: flex;
    gap: 1.2rem;
    align-items: center;
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--ink)
}

.h11-loop-ico {
    width: 50px;
    height: 50px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--brand);
    font-size: 1.35rem
}

.h11-loop p {
    flex: 1
}

.h11-loop .btn-ink {
    background: var(--ink);
    color: #fff
}

.h11-loop .btn-ink:hover {
    background: var(--brand-2);
    color: #fff
}

@media (max-width: 767.98px) {
    .h11-loop {
        flex-wrap:wrap
    }

    .h11-loop p {
        flex-basis: calc(100% - 70px)
    }
}

.h11-stack-photo {
    position: relative
}

.h11-stack-photo figure {
    aspect-ratio: 16 / 9;
    border-radius: 22px
}

.h11-sync {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    gap: .55rem;
    align-items: center;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .82rem;
    font-weight: 600;
    box-shadow: var(--shadow)
}

.h11-hub {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .8rem
}

.h11-hub-core {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    text-align: center;
    padding: 1.4rem;
    border-radius: var(--radius);
    background: var(--brand-2);
    color: #fff
}

.h11-pulse {
    position: absolute;
    z-index: -1;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.4);
    animation: h11-pulse 3.2s ease-out infinite
}

@keyframes h11-pulse {
    from {
        transform: scale(.35);
        opacity: 1
    }

    to {
        transform: scale(1.7);
        opacity: 0
    }
}

.h11-core-ico {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.7rem;
    margin-bottom: .6rem;
    box-shadow: 0 0 0 8px rgba(255,255,255,.12)
}

.h11-hub-core b {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.03em
}

.h11-hub-core small {
    opacity: .8;
    max-width: 15rem
}

.h11-int {
    min-width: 0;
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .85rem .8rem;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform .3s ease,box-shadow .3s ease
}

.h11-int:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.h11-int>div {
    min-width: 0
}

.h11-int b {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.2
}

.h11-int small {
    display: block;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.2
}

.h11-int-ico {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.15rem
}

.h11-int-ico.c1 {
    background: var(--brand);
    color: var(--ink)
}

.h11-int-ico.c2 {
    background: var(--brand-2);
    color: #fff
}

.h11-int-ico.c3 {
    background: var(--coral);
    color: var(--ink)
}

.h11-int-ico.c4 {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .h11-int-ico.c4 {
    background: #fff;
    color: var(--ink)
}

@media (max-width: 1199.98px) {
    .h11-int {
        flex-direction:column;
        align-items: flex-start
    }
}

@media (max-width: 767.98px) {
    .h11-hub {
        grid-template-columns:repeat(3,1fr);
        gap: .6rem
    }

    .h11-hub-core {
        grid-column: 1 / -1;
        grid-row: auto;
        padding: 1.6rem 1rem
    }

    .h11-int {
        padding: .75rem;
        gap: .5rem
    }

    .h11-int b {
        font-size: .85rem
    }

    .h11-int-ico {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        border-radius: 10px
    }
}

.h11-case-art {
    position: relative;
    max-width: 580px;
    margin-inline:auto;padding-bottom: 5rem
}

.h11-case-photo {
    width: 88%;
    aspect-ratio: 1 / 1.02;
    border-radius: 32px
}

.h11-case-chip {
    position: absolute;
    right: 0;
    top: 8%;
    width: 11.5rem;
    padding: .9rem 1rem;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.h11-case-chip small {
    display: block;
    color: var(--muted);
    font-size: .78rem
}

.h11-case-chip b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.h11-mini {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 38px;
    margin-top: .5rem
}

.h11-mini i {
    flex: 1;
    height: var(--h);
    border-radius: 3px;
    background: var(--brand-2);
    opacity: .35
}

.h11-mini i:last-child {
    opacity: 1
}

.h11-case-quote {
    position: absolute;
    left: 6%;
    right: 16%;
    bottom: 0;
    padding: 1.2rem 1.3rem;
    border-radius: 20px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow)
}

.h11-case-quote blockquote {
    font-size: 1.02rem;
    line-height: 1.45
}

.h11-case-quote small {
    opacity: .75
}

.h11-case-quote .avatar {
    border-color: transparent;
    object-fit: cover
}

[data-bs-theme="dark"] .h11-case-quote {
    background: var(--brand);
    color: var(--ink)
}

.h11-case-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem
}

.h11-case-kpis>div {
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h11-case-kpis>div:first-child {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.h11-case-kpis b {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.h11-case-kpis span {
    color: var(--muted);
    font-size: .88rem
}

.h11-case-kpis>div:first-child span {
    color: rgba(18,18,18,.7)
}

.h11-qbars {
    display: flex;
    align-items: stretch;
    gap: .6rem;
    height: 170px;
    padding: 1rem 1rem .7rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h11-qbars>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: .3rem;
    font-size: .78rem
}

.h11-qbars i {
    display: block;
    width: 100%;
    max-width: 56px;
    height: calc(var(--h) * .7);
    border-radius: 8px 8px 3px 3px;
    background: color-mix(in srgb,var(--brand-2) 28%,transparent)
}

.h11-qbars .is-now i {
    background: var(--brand-2)
}

.h11-qbars span {
    order: -1;
    font-weight: 600
}

.h11-qbars small {
    color: var(--muted);
    white-space: nowrap
}

@media (max-width: 575.98px) {
    .h11-case-photo {
        width:100%
    }

    .h11-case-chip {
        width: 9.5rem;
        top: 4%;
        right: .6rem;
        padding: .7rem .8rem
    }

    .h11-case-chip b {
        font-size: 1.4rem
    }

    .h11-case-quote {
        left: .6rem;
        right: .6rem
    }

    .h11-case-quote blockquote {
        font-size: .92rem
    }

    .h11-case-kpis b {
        font-size: 1.6rem
    }

    .h11-qbars {
        gap: .35rem;
        padding-inline:.6rem}

    .h11-qbars>div {
        font-size: .68rem
    }
}

.h11-vs-wrap {
    max-width: 980px;
    margin-inline:auto}

.h11-vs {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

.h11-vs th,.h11-vs td {
    padding: 1.05rem 1.2rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    text-align: start
}

.h11-vs thead th {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    vertical-align: bottom
}

.h11-vs thead small {
    display: block;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    margin-top: .2rem
}

.h11-vs tbody th {
    font-weight: 600;
    width: 30%
}

.h11-vs td {
    color: var(--muted);
    width: 35%
}

.h11-vs td .bi {
    margin-inline-end:.55rem}

.h11-vs td:not(.is-us) .bi {
    color: var(--coral)
}

.h11-vs .is-us {
    background: var(--brand);
    color: var(--ink);
    border-bottom-color: rgba(18,18,18,.12)
}

.h11-vs td.is-us {
    font-weight: 600
}

.h11-vs .is-us small {
    color: rgba(18,18,18,.7)
}

.h11-vs thead .is-us {
    border-radius: 22px 22px 0 0;
    text-align: center;
    padding-top: 1.4rem
}

.h11-vs tbody tr:last-child>* {
    border-bottom: 0
}

.h11-vs tbody tr:last-child .is-us {
    border-radius: 0 0 22px 22px
}

.h11-vs .is-us .avatar {
    border-color: var(--brand);
    object-fit: cover;
    width: 36px;
    height: 36px
}

@media (max-width: 575.98px) {
    .h11-vs th,.h11-vs td {
        padding:.8rem .5rem;
        font-size: .82rem
    }

    .h11-vs thead th {
        font-size: .95rem
    }

    .h11-vs thead small {
        font-size: .7rem
    }

    .h11-vs td .bi {
        display: block;
        margin-bottom: .25rem
    }

    .h11-vs thead .is-us {
        border-radius: 16px 16px 0 0
    }

    .h11-vs tbody tr:last-child .is-us {
        border-radius: 0 0 16px 16px
    }

    .h11-vs .is-us .avatar {
        width: 28px;
        height: 28px
    }

    .h11-vs .avatar-stack .avatar + .avatar {
        margin-inline-start:-10px}
}

.h12-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h12-hero h1 {
    font-size: clamp(2.6rem,5.6vw,5rem)
}

.h12-kpis {
    list-style: none;
    padding: 0;
    margin: 2.4rem 0 0;
    display: grid;
    grid-template-columns: repeat(3,auto);
    gap: 1.6rem;
    justify-content: start
}

.h12-kpis li {
    border-left: 2px solid var(--brand);
    padding-left: .9rem
}

.h12-kpis b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem,2.6vw,2.2rem);
    letter-spacing: -.04em;
    line-height: 1
}

.h12-kpis span {
    display: block;
    font-size: .82rem;
    color: var(--muted);
    margin-top: .35rem;
    max-width: 9.5rem;
    line-height: 1.35
}

@media (max-width: 575.98px) {
    .h12-kpis {
        grid-template-columns:1fr 1fr 1fr;
        gap: .9rem
    }

    .h12-kpis li {
        padding-left: .6rem
    }

    .h12-kpis span {
        font-size: .74rem
    }
}

.h12-art {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 580px;
    margin-inline:auto;container-type: inline-size;
    font-size: clamp(9px,2.55cqw,15px)
}

.h12-shape {
    position: absolute;
    inset: 10% -2% 2% 30%;
    border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
    background: var(--brand-2);
    animation: morph 14s ease-in-out infinite
}

.h12-photo {
    position: absolute;
    inset: 0 5% 8% 21%;
    border-radius: 200px 200px 32px 32px;
    box-shadow: var(--shadow)
}

.h12-photo img {
    object-position: 50% 20%
}

.h12-tick,.h12-gad,.h12-mad {
    position: absolute;
    z-index: 2;
    border-radius: 1.2em;
    box-shadow: var(--shadow)
}

.h12-tick {
    left: 0;
    top: 5%;
    width: 39%;
    background: var(--ink);
    color: #fff;
    padding: 1em 1.1em
}

[data-bs-theme="dark"] .h12-tick {
    background: #050506;
    border: 1px solid rgba(255,255,255,.12)
}

.h12-tick-head {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: .78em;
    color: rgba(255,255,255,.7);
    font-weight: 500
}

.h12-live {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 0 color-mix(in srgb,var(--brand) 60%,transparent);
    animation: h12-pulse 1.8s ease-out infinite
}

@keyframes h12-pulse {
    70% {
        box-shadow: 0 0 0 .55em transparent
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

.h12-tick-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6em;
    margin-top: .7em
}

.h12-tick-row small {
    display: block;
    font-size: .72em;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .1em
}

.h12-tick-row b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7em;
    letter-spacing: -.04em;
    line-height: 1.1;
    transition: color .3s ease;
    font-variant-numeric: tabular-nums
}

.h12-tick-row div:first-child b {
    color: var(--brand)
}

.h12-tick-row b.is-flash {
    color: #fff !important
}

.h12-tick-bars {
    width: 100%;
    height: 2.6em;
    margin-top: .7em;
    display: block
}

.h12-tick-bars rect {
    fill: rgba(255,255,255,.18)
}

.h12-tick-bars rect.hi {
    fill: var(--brand)
}

.h12-tick-foot {
    display: flex;
    justify-content: space-between;
    font-size: .76em;
    color: rgba(255,255,255,.7);
    margin-top: .6em;
    padding-top: .6em;
    border-top: 1px solid rgba(255,255,255,.12);
    font-variant-numeric: tabular-nums
}

.h12-tick-foot span:last-child {
    color: #fff;
    font-weight: 600
}

.h12-gad {
    left: -2%;
    top: 47%;
    width: 60%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    padding: 1em 1.15em
}

.h12-gad-top {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: .78em;
    color: var(--muted);
    min-width: 0
}

.h12-spons {
    font-weight: 700;
    color: var(--text)
}

.h12-fav {
    width: 1.7em;
    height: 1.7em;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: .9em
}

.h12-gad-title {
    font-weight: 600;
    font-size: 1.08em;
    line-height: 1.3;
    color: var(--brand-2);
    margin: .45em 0 .25em
}

[data-bs-theme="dark"] .h12-gad-title {
    color: color-mix(in srgb,var(--brand-2) 50%,#fff)
}

.h12-gad-desc {
    font-size: .82em;
    color: var(--muted);
    margin: 0 0 .6em;
    line-height: 1.45
}

.h12-gad-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35em
}

.h12-gad-links span {
    font-size: .74em;
    padding: .25em .7em;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 500
}

.h12-mad {
    right: 0;
    bottom: 0;
    width: 41%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    overflow: hidden
}

.h12-mad-head {
    display: flex;
    align-items: center;
    gap: .55em;
    padding: .75em .85em .4em;
    font-size: .8em;
    line-height: 1.2
}

.h12-mad-head strong {
    display: block;
    font-size: 1em
}

.h12-mad-head small {
    color: var(--muted);
    font-size: .85em
}

.h12-mad-av {
    width: 2.4em;
    height: 2.4em;
    flex: none;
    border-radius: 50%;
    background: var(--brand-2);
    color: #fff;
    display: grid;
    place-items: center
}

.h12-mad-copy {
    font-size: .78em;
    margin: 0;
    padding: 0 .95em .55em;
    line-height: 1.4
}

.h12-mad-img {
    aspect-ratio: 4 / 3
}

.h12-mad-cta {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .6em .85em;
    background: var(--surface-2)
}

.h12-mad-cta small {
    display: block;
    font-size: .66em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em
}

.h12-mad-cta strong {
    display: block;
    font-size: .82em;
    line-height: 1.2
}

.h12-mad-btn {
    margin-left: auto;
    flex: none;
    font-size: .74em;
    font-weight: 600;
    padding: .45em .8em;
    border-radius: .5em;
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .h12-mad-btn {
    background: #fff;
    color: var(--ink)
}

.h12-mad-react {
    display: flex;
    justify-content: space-between;
    font-size: .7em;
    color: var(--muted);
    padding: .5em .95em .65em
}

.h12-mad-react .bi-hand-thumbs-up-fill {
    color: var(--brand-2)
}

.h12-mad-react .bi-heart-fill {
    color: var(--coral);
    margin-right: .3em
}

[data-bs-theme="dark"] .h12-mad-react .bi-hand-thumbs-up-fill {
    color: color-mix(in srgb,var(--brand-2) 55%,#fff)
}

@media (max-width: 575.98px) {
    .h12-art {
        aspect-ratio:1 / 1.12;
        font-size: 2.9cqw
    }

    .h12-photo {
        inset: 0 0 12% 18%
    }

    .h12-shape {
        inset: 6% -2% 8% 30%
    }

    .h12-tick {
        width: 46%
    }

    .h12-gad {
        width: 57%;
        left: 0;
        top: 41%
    }

    .h12-gad-desc,.h12-gad-links {
        display: none
    }

    .h12-mad {
        width: 46%
    }

    .h12-mad-copy,.h12-mad-react {
        display: none
    }
}

.h12-partners {
    border-block:1px solid var(--line);padding-block: 1.8rem
}

.h12-partners-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    line-height: 1.2
}

.h12-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .8rem
}

.h12-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem .9rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform .25s ease,box-shadow .25s ease
}

.h12-badge:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.h12-badge strong {
    display: block;
    font-size: .9rem;
    line-height: 1.2
}

.h12-badge small {
    display: block;
    font-size: .76rem;
    color: var(--muted);
    margin-top: .15rem
}

.h12-badge-ic,.h12-plat-ic {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: var(--surface-2);
    color: var(--text)
}

.h12-badge-ic.is-g,.h12-plat-ic.is-g {
    background: var(--brand);
    color: var(--ink)
}

.h12-badge-ic.is-m,.h12-plat-ic.is-m {
    background: var(--brand-2);
    color: #fff
}

.h12-badge-ic.is-t,.h12-plat-ic.is-t {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .h12-badge-ic.is-t,[data-bs-theme="dark"] .h12-plat-ic.is-t {
    background: #fff;
    color: var(--ink)
}

.h12-badge-ic.is-ms,.h12-plat-ic.is-ms {
    background: color-mix(in srgb,var(--coral) 85%,#fff);
    color: var(--ink)
}

.h12-plat-ic.is-y {
    background: color-mix(in srgb,var(--coral) 22%,var(--surface));
    color: var(--coral)
}

.h12-plat-ic.is-in {
    background: color-mix(in srgb,var(--brand-2) 16%,var(--surface));
    color: var(--brand-2)
}

[data-bs-theme="dark"] .h12-plat-ic.is-in {
    color: color-mix(in srgb,var(--brand-2) 55%,#fff)
}

.h12-ok {
    position: absolute;
    top: -.45rem;
    right: -.45rem;
    font-size: 1.05rem;
    color: var(--brand-2);
    background: var(--paper);
    border-radius: 50%;
    line-height: 1
}

[data-bs-theme="dark"] .h12-ok {
    color: var(--brand)
}

@media (max-width: 1199.98px) {
    .h12-badges {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (max-width: 575.98px) {
    .h12-badges {
        gap:.6rem
    }

    .h12-badge {
        flex-direction: column;
        align-items: flex-start;
        gap: .55rem;
        padding: .85rem
    }

    .h12-badge strong {
        font-size: .86rem
    }
}

.h12-plats {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 1.25rem
}

.h12-plat-photo {
    grid-row: span 2;
    position: relative;
    border-radius: var(--radius);
    min-height: 420px
}

.h12-plat-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 45%,rgba(10,10,12,.82))
}

.h12-plat-photo img {
    position: absolute;
    inset: 0
}

.h12-plat-photo figcaption {
    position: absolute;
    z-index: 1;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    color: #fff
}

.h12-plat-photo figcaption .tag {
    background: var(--brand);
    color: var(--ink);
    margin-bottom: .7rem
}

.h12-plat-photo figcaption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.03em;
    line-height: 1.15
}

.h12-plat {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease,box-shadow .3s ease
}

.h12-plat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.h12-plat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem
}

.h12-plat h3 {
    font-size: 1.3rem;
    margin-bottom: .4rem
}

.h12-plat p {
    font-size: .95rem
}

.h12-plat-stat {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .85rem;
    color: var(--muted)
}

.h12-plat-stat b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--text);
    letter-spacing: -.03em
}

.h12-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    margin-top: .5rem;
    overflow: hidden
}

.h12-bar span {
    display: block;
    height: 100%;
    width: var(--w,50%);
    border-radius: inherit;
    background: var(--brand-2);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .2s
}

.in .h12-bar span,.no-js .h12-bar span {
    transform: none
}

[data-bs-theme="dark"] .h12-bar span {
    background: var(--brand)
}

.h12-plat-cta {
    background: var(--brand);
    color: var(--ink);
    border-radius: var(--radius);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1.5rem;
    transition: transform .3s ease,box-shadow .3s ease
}

.h12-plat-cta:hover {
    color: var(--ink);
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.h12-plat-cta-ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    margin-bottom: .6rem
}

.h12-plat-cta strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.03em;
    line-height: 1.15
}

.h12-plat-cta span {
    font-size: .95rem
}

.h12-plat-cta .h12-plat-cta-go {
    margin-top: auto;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .65rem 1.1rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .h12-plat-cta .h12-plat-cta-go {
    background: var(--ink)
}

@media (max-width: 991.98px) {
    .h12-plats {
        grid-template-columns:1fr 1fr
    }

    .h12-plat-photo {
        grid-column: span 2;
        grid-row: auto;
        min-height: 320px
    }

    .h12-plat-cta {
        grid-column: span 2
    }
}

@media (max-width: 575.98px) {
    .h12-plats {
        gap:.75rem
    }

    .h12-plat {
        padding: 1.1rem
    }

    .h12-plat-top {
        margin-bottom: .8rem
    }

    .h12-plat-top .tag,.h12-plat p {
        display: none
    }

    .h12-plat h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem
    }

    .h12-plat-stat {
        flex-direction: column;
        align-items: flex-start;
        font-size: .78rem
    }

    .h12-plat-photo {
        min-height: 280px
    }

    .h12-plat-cta .h12-plat-cta-go {
        margin-top: .6rem
    }
}

.h12-calc {
    overflow: hidden
}

.h12-calc .hero-bg .b1 {
    opacity: .16;
    right: -200px;
    top: -200px
}

.h12-lbl {
    font-size: .9rem;
    color: var(--muted);
    font-weight: 500
}

.h12-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem,4vw,2.8rem);
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--brand);
    font-variant-numeric: tabular-nums
}

.h12-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    margin-top: 1rem;
    cursor: pointer
}

.h12-range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--brand) calc(var(--p,10) * 1%),rgba(255,255,255,.16) 0)
}

.h12-range::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.16)
}

.h12-range::-moz-range-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--brand)
}

.h12-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    margin-top: -10px;
    border-radius: 50%;
    background: #fff;
    border: 7px solid var(--brand);
    box-shadow: 0 4px 14px rgba(0,0,0,.35)
}

.h12-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 7px solid var(--brand)
}

.h12-range:focus {
    outline: none
}

.h12-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px color-mix(in srgb,var(--brand) 45%,transparent)
}

.h12-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 5px color-mix(in srgb,var(--brand) 45%,transparent)
}

.h12-scale {
    font-size: .75rem;
    color: var(--muted);
    margin-top: .3rem
}

.h12-goals {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.h12-goals .btn {
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    --bs-btn-padding-y: .55rem;
    --bs-btn-padding-x: 1rem;
    font-size: .92rem
}

.h12-goals .btn-check:checked + .btn {
    background: #fff;
    color: var(--ink);
    border-color: #fff
}

.h12-goals .btn-check:focus-visible + .btn {
    outline: 3px solid var(--brand);
    outline-offset: 2px
}

.h12-out {
    border-radius: 28px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    padding: clamp(1rem,2.5vw,1.6rem)
}

.h12-out-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem
}

.h12-o {
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    padding: 1.2rem 1.3rem;
    min-width: 0
}

.h12-o small {
    display: block;
    font-size: .82rem;
    color: var(--muted)
}

.h12-o b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.8rem,3.4vw,2.7rem);
    letter-spacing: -.045em;
    line-height: 1.1;
    margin-top: .4rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere
}

.h12-o>span {
    font-size: .8rem;
    color: var(--muted)
}

.h12-o.is-hi {
    background: var(--brand);
    color: var(--ink);
    --muted: rgba(18,18,18,.68)
}

.h12-out-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.06)
}

.h12-out-foot p {
    flex: 1;
    min-width: 12rem
}

.h12-out-foot .avatar {
    border-color: transparent
}

@media (max-width: 400px) {
    .h12-o {
        padding:1rem
    }
}

.h12-res {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease,box-shadow .3s ease
}

.h12-res:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.h12-res-img {
    position: relative;
    aspect-ratio: 16 / 9.5
}

.h12-res-img img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.h12-res:hover .h12-res-img img {
    transform: scale(1.05)
}

.h12-res-tag {
    position: absolute;
    left: 1rem;
    top: 1rem;
    background: var(--paper);
    color: var(--text);
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    display: inline-flex;
    gap: .4rem;
    align-items: center
}

.h12-res-body {
    padding: 1.4rem 1.5rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1
}

.h12-res-body h3 {
    font-size: 1.35rem;
    margin-bottom: 1rem
}

.h12-ba {
    margin: 0;
    display: grid;
    gap: .1rem
}

.h12-ba>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    padding-block:.6rem;border-top: 1px solid var(--line)
}

.h12-ba dt {
    font-weight: 500;
    font-size: .92rem;
    color: var(--muted)
}

.h12-ba dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap
}

.h12-ba s {
    color: var(--muted);
    font-size: .92rem;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 2px
}

.h12-ba dd .bi {
    font-size: .8rem;
    color: var(--muted)
}

.h12-ba b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.03em;
    line-height: 1
}

.h12-res-time {
    margin: auto 0 0;
    padding-top: .9rem;
    font-size: .82rem;
    color: var(--muted);
    display: flex;
    gap: .4rem;
    align-items: center
}

.h12-res.is-brand {
    background: var(--brand-2);
    color: #fff;
    border-color: var(--brand-2);
    --muted: color-mix(in srgb,var(--brand-2) 8%,#fff);
    --line: rgba(255,255,255,.2)
}

.h12-res.is-brand .h12-ba b {
    color: var(--brand)
}

.h12-totals {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1.6rem 1.8rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h12-totals>div {
    display: flex;
    flex-direction: column
}

.h12-totals>div + div {
    border-left: 1px solid var(--line);
    padding-left: 1.2rem
}

.h12-totals b {
    font-family: var(--font-display);
    font-size: clamp(1.8rem,3vw,2.5rem);
    letter-spacing: -.045em;
    line-height: 1
}

.h12-totals>div>span {
    font-size: .85rem;
    color: var(--muted);
    margin-top: .4rem
}

@media (max-width: 767.98px) {
    .h12-totals {
        grid-template-columns:1fr 1fr;
        row-gap: 1.4rem
    }

    .h12-totals>div:nth-child(3) {
        border-left: 0;
        padding-left: 0
    }
}

.h12-audit {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    border-radius: 36px;
    overflow: hidden;
    background: var(--brand-2);
    color: #fff
}

.h12-audit-photo {
    position: relative;
    min-height: 420px
}

.h12-audit-photo img {
    position: absolute;
    inset: 0
}

.h12-audit-chip {
    position: absolute;
    left: 1.4rem;
    bottom: 1.4rem;
    background: var(--brand);
    color: var(--ink);
    font-weight: 600;
    font-size: .92rem;
    padding: .6rem 1rem;
    border-radius: 999px;
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    box-shadow: var(--shadow)
}

.h12-audit-body {
    padding: clamp(2rem,5vw,4rem);
    --muted: color-mix(in srgb,var(--brand-2) 8%,#fff)
}

.h12-audit-body .eyebrow {
    color: var(--muted)
}

.h12-audit-body h2 {
    font-size: clamp(2rem,3.8vw,3.2rem);
    margin-bottom: 1rem
}

.h12-audit-body p {
    color: var(--muted)
}

.h12-checks {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 2rem;
    display: grid;
    gap: .65rem
}

.h12-checks li {
    display: flex;
    gap: .7rem;
    align-items: flex-start
}

.h12-checks .bi {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: .9rem;
    margin-top: .1rem
}

.h12-audit-note {
    color: var(--muted)
}

.h12-audit .btn-brand:hover {
    background: #fff;
    color: var(--ink)
}

@media (max-width: 991.98px) {
    .h12-audit {
        grid-template-columns:1fr
    }

    .h12-audit-photo {
        min-height: 300px
    }
}

.h13-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h13-hero h1 {
    font-size: clamp(2.6rem,5.6vw,5rem)
}

.h13-hero .hero-bg .b1 {
    background: color-mix(in srgb,var(--brand) 80%,#fff)
}

.h13-search {
    display: flex;
    align-items: center;
    gap: .3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .4rem;
    box-shadow: var(--shadow);
    max-width: 580px;
    margin-top: 1.8rem
}

.h13-search:focus-within {
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 22%,transparent),var(--shadow)
}

.h13-search-f {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 0;
    padding-left: .9rem
}

.h13-search-f .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .h13-search-f .bi {
    color: var(--brand)
}

.h13-search input,.h13-search select {
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    padding: .6rem 0;
    min-width: 0;
    width: 100%
}

.h13-search input::placeholder {
    color: var(--muted)
}

.h13-search input:focus,.h13-search select:focus {
    outline: none
}

.h13-search-cat {
    flex: 0 0 auto;
    width: 9.5rem;
    border-left: 1px solid var(--line);
    padding-left: .8rem
}

.h13-search select {
    cursor: pointer
}

.h13-search select option {
    color: #121212;
    background: #fff
}

.h13-search .btn {
    flex: none
}

@media (max-width: 575.98px),(min-width:992px) and (max-width:1199.98px) {
    .h13-search {
        flex-wrap:wrap;
        border-radius: 24px;
        padding: .5rem
    }

    .h13-search-f {
        flex: 1 1 55%
    }

    .h13-search-cat {
        flex: 1 1 35%;
        width: auto
    }

    .h13-search .btn {
        flex: 1 1 100%;
        justify-content: center
    }
}

.h13-trust {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1.6rem
}

.h13-trust .avatar {
    object-fit: cover
}

.h13-art {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 580px;
    margin-inline:auto;container-type: inline-size;
    font-size: clamp(9px,2.5cqw,15px)
}

.h13-map {
    position: absolute;
    inset: 0 10% 14% 0;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.h13-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block
}

.h13-map .m-land {
    fill: color-mix(in srgb,var(--surface-2) 70%,var(--surface))
}

.h13-map .m-block rect {
    fill: var(--surface-2)
}

.h13-map .m-park {
    fill: color-mix(in srgb,var(--brand) 40%,var(--surface))
}

.h13-map .m-tree {
    fill: color-mix(in srgb,var(--brand) 70%,var(--ink));
    opacity: .35
}

.h13-map .m-water {
    fill: none;
    stroke: color-mix(in srgb,var(--brand-2) 28%,var(--surface));
    stroke-width: 34
}

.h13-map .m-road path {
    fill: none;
    stroke: var(--surface);
    stroke-width: 16
}

.h13-map .m-road2 path {
    fill: none;
    stroke: var(--surface);
    stroke-width: 8
}

.h13-map .m-route {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2 11;
    animation: h13-dash 1.6s linear infinite
}

[data-bs-theme="dark"] .h13-map .m-land {
    fill: #141417
}

[data-bs-theme="dark"] .h13-map .m-block rect {
    fill: #1d1d22
}

[data-bs-theme="dark"] .h13-map .m-road path,[data-bs-theme="dark"] .h13-map .m-road2 path {
    stroke: #2b2b31
}

[data-bs-theme="dark"] .h13-map .m-park {
    fill: color-mix(in srgb,var(--brand) 18%,#141417)
}

[data-bs-theme="dark"] .h13-map .m-water {
    stroke: color-mix(in srgb,var(--brand-2) 30%,#141417)
}

[data-bs-theme="dark"] .h13-map .m-route {
    stroke: var(--brand)
}

@keyframes h13-dash {
    to {
        stroke-dashoffset: -26
    }
}

.h13-mapsearch {
    position: absolute;
    left: 4%;
    top: 4.5%;
    width: 62%;
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .65em 1em;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    font-size: .9em;
    font-weight: 500
}

.h13-mapsearch .bi {
    color: var(--muted)
}

.h13-pin {
    position: absolute;
    transform: translate(-50%,-100%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 2em;
    line-height: 1;
    color: var(--muted);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.2))
}

.h13-pin em {
    position: absolute;
    top: .3em;
    font-style: normal;
    font-size: .36em;
    font-weight: 700;
    color: var(--surface)
}

.h13-pin.is-top {
    color: var(--brand-2);
    font-size: 2.8em;
    animation: h13-bob 2.4s ease-in-out infinite
}

[data-bs-theme="dark"] .h13-pin.is-top {
    color: var(--brand)
}

.h13-pin b {
    position: absolute;
    bottom: 105%;
    white-space: nowrap;
    font-size: .3em;
    padding: .35em .75em;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-weight: 600
}

[data-bs-theme="dark"] .h13-pin b {
    background: #fff;
    color: var(--ink)
}

@keyframes h13-bob {
    50% {
        transform: translate(-50%,-112%)
    }
}

.h13-dot {
    position: absolute;
    width: .7em;
    height: .7em;
    border-radius: 50%;
    background: var(--muted);
    border: 2px solid var(--surface);
    transform: translate(-50%,-50%);
    opacity: .7
}

.h13-you {
    position: absolute;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    background: var(--brand-2);
    border: 3px solid #fff;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 0 0 color-mix(in srgb,var(--brand-2) 50%,transparent);
    animation: h13-ping 2s ease-out infinite
}

@keyframes h13-ping {
    70% {
        box-shadow: 0 0 0 1.2em transparent
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

.h13-owner {
    position: absolute;
    right: 0;
    bottom: 4%;
    width: 38%;
    height: 54%;
    border-radius: 200px 200px 28px 28px;
    border: 6px solid var(--paper);
    z-index: 2;
    box-shadow: var(--shadow)
}

.h13-calls {
    position: absolute;
    z-index: 3;
    right: 3%;
    top: 33%;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .55em .95em .55em .55em;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-size: .9em;
    box-shadow: var(--shadow);
    white-space: nowrap
}

.h13-calls .bi {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: var(--ink);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: .9em
}

.h13-pack {
    position: absolute;
    z-index: 3;
    left: -3%;
    bottom: 0;
    width: 62%;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 1.3em;
    box-shadow: var(--shadow);
    padding: .9em
}

.h13-pack-head {
    display: flex;
    align-items: center;
    gap: .45em;
    font-size: .8em;
    margin-bottom: .5em
}

.h13-pack-head strong {
    font-size: 1.15em;
    margin-right: auto
}

.h13-pack-head span {
    padding: .25em .7em;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted)
}

.h13-pack-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .25em
}

.h13-pack-list li {
    display: flex;
    align-items: center;
    gap: .65em;
    padding: .55em .6em;
    border-radius: .9em
}

.h13-pack-list li + li {
    border-top: 1px solid var(--line);
    border-radius: 0
}

.h13-pack-list li>div {
    min-width: 0;
    flex: 1;
    line-height: 1.3
}

.h13-pack-list strong {
    display: block;
    font-size: .9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h13-pack-list small {
    display: block;
    font-size: .72em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h13-stars {
    display: block;
    font-size: .74em;
    color: var(--muted);
    white-space: nowrap
}

.h13-stars b {
    color: var(--text)
}

.h13-stars .bi {
    color: #f5a623;
    font-size: .9em
}

.h13-rank {
    flex: none;
    width: 2.1em;
    height: 2.1em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .85em;
    background: var(--surface-2);
    color: var(--muted)
}

.h13-pack-list li.is-first {
    background: color-mix(in srgb,var(--brand) 26%,var(--surface))
}

[data-bs-theme="dark"] .h13-pack-list li.is-first {
    background: color-mix(in srgb,var(--brand) 12%,var(--surface))
}

.h13-pack-list li.is-first .h13-rank {
    background: var(--brand);
    color: var(--ink);
    width: 2.6em;
    height: 2.6em;
    font-size: .95em;
    box-shadow: 0 0 0 3px var(--surface)
}

.h13-call {
    flex: none;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: #fff;
    font-size: .85em
}

[data-bs-theme="dark"] .h13-call {
    background: #fff;
    color: var(--ink)
}

@media (max-width: 575.98px) {
    .h13-art {
        aspect-ratio:1 / 1.1;
        font-size: 2.85cqw
    }

    .h13-map {
        inset: 0 0 22% 0
    }

    .h13-pack {
        width: 68%;
        left: 0
    }

    .h13-owner {
        width: 36%;
        height: 46%;
        bottom: 3%
    }

    .h13-calls {
        right: 2%;
        top: 37%
    }

    .h13-pack-head span:last-child {
        display: none
    }
}

.h13-ind {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    aspect-ratio: 4 / 3.3;
    isolation: isolate
}

.h13-ind:hover {
    color: #fff
}

.h13-ind-img {
    position: absolute;
    inset: 0;
    z-index: -2
}

.h13-ind-img img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.h13-ind:hover .h13-ind-img img {
    transform: scale(1.06)
}

.h13-ind::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,rgba(8,8,10,.05) 30%,rgba(8,8,10,.78))
}

.h13-ind-ic {
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    transition: transform .35s ease
}

.h13-ind:hover .h13-ind-ic {
    transform: rotate(-8deg) scale(1.06)
}

.h13-ind-body {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    bottom: 1.1rem
}

.h13-ind-body strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.15rem,2.2vw,1.55rem);
    letter-spacing: -.03em;
    line-height: 1.1
}

.h13-ind-body small {
    display: inline-block;
    margin-top: .5rem;
    font-size: .82rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

@media (max-width: 575.98px) {
    .h13-ind {
        aspect-ratio:4 / 5
    }

    .h13-ind-ic {
        left: .8rem;
        top: .8rem;
        width: 38px;
        height: 38px;
        font-size: 1rem;
        border-radius: 12px
    }

    .h13-ind-body {
        left: .85rem;
        right: .85rem;
        bottom: .85rem
    }

    .h13-ind-body small {
        font-size: .72rem;
        padding: .2rem .5rem;
        border-radius: 8px
    }
}

.h13-gsum {
    padding: 1.6rem
}

.h13-g {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .h13-g {
    color: var(--brand)
}

.h13-dist {
    list-style: none;
    padding: 0;
    margin: 1.3rem 0 1.5rem;
    display: grid;
    gap: .45rem;
    font-size: .85rem;
    color: var(--muted)
}

.h13-dist li {
    display: grid;
    grid-template-columns: 1rem 1fr 2.2rem;
    align-items: center;
    gap: .6rem
}

.h13-dist li span:last-child {
    text-align: right
}

.h13-dist-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.h13-dist-bar span {
    display: block;
    height: 100%;
    width: var(--w);
    min-width: 3px;
    border-radius: inherit;
    background: #f5a623
}

.h13-revs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem
}

.h13-rev {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.h13-rev:nth-child(even) {
    transform: translateY(1.6rem)
}

.h13-rev figcaption {
    display: flex;
    align-items: center;
    gap: .75rem
}

.h13-rev figcaption .avatar {
    border-color: var(--surface)
}

.h13-rev figcaption strong {
    display: block;
    font-size: .98rem;
    line-height: 1.2
}

.h13-rev figcaption small {
    color: var(--muted);
    font-size: .8rem
}

.h13-rev-g {
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--muted)
}

.h13-rev-meta {
    display: flex;
    align-items: center;
    gap: .7rem
}

.h13-rev-meta small {
    color: var(--muted);
    font-size: .8rem
}

.h13-rev blockquote {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55
}

.h13-reply {
    font-size: .88rem;
    color: var(--muted);
    padding: .7rem .9rem;
    border-radius: 12px;
    background: var(--surface-2);
    border-left: 3px solid var(--brand)
}

.h13-reply strong {
    display: block;
    color: var(--text);
    font-size: .8rem;
    margin-bottom: .1rem
}

@media (max-width: 767.98px) {
    .h13-revs {
        grid-template-columns:1fr
    }

    .h13-rev:nth-child(even) {
        transform: none
    }
}

.h13-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.h13-chips li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: 500;
    font-size: .92rem;
    transition: background-color .2s ease,border-color .2s ease
}

.h13-chips li .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .h13-chips li .bi {
    color: var(--brand)
}

.h13-chips li:hover {
    border-color: var(--text)
}

.h13-chips li.is-more {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.h13-chips li.is-more .bi {
    color: var(--ink)
}

.h13-radius {
    position: relative;
    padding: 0 0 2.5rem 0
}

.h13-radius-img {
    border-radius: 220px 220px 28px 28px;
    aspect-ratio: 1 / .95
}

.h13-rings {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0;
    height: 0;
    display: grid;
    place-items: center
}

.h13-rings span {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.75);
    background: color-mix(in srgb,var(--brand) 14%,transparent);
    animation: h13-ring 3.6s ease-out infinite;
    width: 300px;
    height: 300px;
    opacity: 0
}

.h13-rings span:nth-child(2) {
    animation-delay: 1.2s
}

.h13-rings span:nth-child(3) {
    animation-delay: 2.4s
}

.h13-rings .bi {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    box-shadow: 0 0 0 6px rgba(255,255,255,.6)
}

@keyframes h13-ring {
    0% {
        transform: scale(.2);
        opacity: .9
    }

    100% {
        transform: scale(1);
        opacity: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .h13-rings span {
        opacity: .5
    }
}

.h13-radius-card {
    position: absolute;
    right: 6%;
    bottom: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1rem 1.3rem;
    box-shadow: var(--shadow)
}

.h13-radius-card small {
    display: block;
    font-size: .78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600
}

.h13-radius-card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.h13-radius-card span {
    font-size: .85rem;
    color: var(--muted)
}

@media (max-width: 575.98px) {
    .h13-rings span {
        width:200px;
        height: 200px
    }

    .h13-radius-card {
        right: 4%;
        padding: .8rem 1rem
    }

    .h13-radius-card strong {
        font-size: 1.6rem
    }
}

.h13-step-photo {
    position: relative;
    border-radius: var(--radius);
    height: 100%;
    min-height: 380px
}

.h13-step-photo img {
    position: absolute;
    inset: 0
}

.h13-step-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,transparent 50%,rgba(5,5,6,.85))
}

.h13-step-photo figcaption {
    position: absolute;
    z-index: 1;
    left: 1.4rem;
    right: 1.4rem;
    bottom: 1.4rem;
    display: grid;
    gap: .5rem;
    color: #fff;
    font-size: .92rem
}

.h13-rank-chip {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -.03em;
    background: var(--brand);
    color: var(--ink);
    padding: .3rem 1rem;
    border-radius: 999px
}

.h13-rank-chip .bi {
    font-size: 1.1rem
}

.h13-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .9rem
}

.h13-steps li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.2rem;
    align-items: start;
    padding: 1.4rem 1.5rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color .3s ease,transform .3s ease
}

.h13-steps li:hover {
    border-color: var(--brand);
    transform: translateX(6px)
}

.h13-step-no {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    border: 1.5px solid var(--line);
    transition: background-color .3s ease,color .3s ease
}

.h13-steps li:hover .h13-step-no {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.h13-steps h3 {
    font-size: 1.25rem;
    margin-bottom: .35rem
}

.h13-steps p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem
}

.h13-step-pos {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--brand)
}

@media (max-width: 575.98px) {
    .h13-steps li {
        grid-template-columns:auto 1fr;
        padding: 1.2rem;
        gap: .9rem
    }

    .h13-step-no {
        width: 44px;
        height: 44px
    }

    .h13-step-pos {
        grid-column: 2;
        justify-self: start;
        grid-row: 2
    }
}

.h13-cta .btn-line {
    border-color: var(--ink);
    color: var(--ink)
}

.h13-cta .btn-line:hover {
    background: var(--ink);
    color: #fff
}

.h13-phone {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem,4vw,2.8rem);
    letter-spacing: -.04em;
    line-height: 1
}

.h13-phone:hover {
    color: var(--ink)
}

.h13-phone small {
    display: block;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: 0;
    opacity: .7;
    margin-bottom: .35rem
}

.h13-phone-ic {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    animation: h13-ring-phone 2.4s ease-in-out infinite
}

.h13-phone:hover .h13-phone-ic {
    background: var(--brand-2);
    color: #fff
}

@keyframes h13-ring-phone {
    0%,70%,100% {
        transform: none
    }

    75% {
        transform: rotate(-12deg)
    }

    80% {
        transform: rotate(10deg)
    }

    85% {
        transform: rotate(-8deg)
    }

    90% {
        transform: rotate(6deg)
    }
}

@media (max-width: 575.98px) {
    .h13-phone-ic {
        width:52px;
        height: 52px;
        font-size: 1.25rem
    }
}

@media (max-width: 767.98px) {
    .h12-res-row {
        flex-wrap:nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: .5rem
    }

    .h12-res-row::-webkit-scrollbar {
        display: none
    }

    .h12-res-row>[class*="col-"] {
        flex: 0 0 84%;
        max-width: 84%;
        scroll-snap-align: start
    }

    .h12-res-img {
        aspect-ratio: 16 / 8
    }
}

.lp-header {
    position: sticky
}

.lp-phone {
    align-items: center;
    gap: .55rem;
    padding: .3rem .95rem .3rem .3rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease,border-color .2s ease
}

.lp-phone .bi {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: .9rem
}

.lp-phone:hover {
    background: var(--surface-2);
    border-color: var(--text)
}

@media (max-width: 399.98px) {
    .lp-header .brand {
        font-size:1.3rem
    }

    .lp-header .btn-sm {
        --bs-btn-padding-x: .85rem
    }
}

.lp-hero {
    padding-top: clamp(1.5rem,4vw,3.5rem);
    padding-bottom: clamp(3rem,6vw,5.5rem)
}

.lp-hero .pill .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-hero .pill .bi {
    color: var(--brand)
}

.lp-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    gap: .7rem
}

.lp-checks li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-weight: 500
}

.lp-checks .bi {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: .85rem;
    margin-top: .05rem
}

.lp-trust {
    display: flex;
    align-items: center;
    gap: 1rem
}

.lp-trust>div:last-child {
    min-width: 0;
    line-height: 1.35
}

.lp-trust small {
    color: var(--muted)
}

.lp-trust small b {
    color: var(--text)
}

.lp-tag-brand {
    background: var(--brand);
    color: var(--ink);
    font-weight: 600
}

.lp-fine {
    font-size: .8rem;
    color: var(--muted);
    display: flex;
    gap: .4rem;
    align-items: center
}

.lp-form-card {
    position: relative;
    z-index: 2;
    padding: clamp(1.5rem,3vw,2.2rem);
    border-radius: 28px;
    box-shadow: 0 30px 60px -30px rgba(18,18,18,.35),0 2px 6px rgba(18,18,18,.05);
    scroll-margin-top: 100px
}

[data-bs-theme="dark"] .lp-form-card {
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.9)
}

.lp-form-card .form-status:empty {
    display: none
}

.lp-form-card .form-status {
    margin-bottom: .5rem
}

#lp-form {
    scroll-margin-top: 90px
}

.lp-ppc-art {
    position: relative;
    padding-top: 3.5rem
}

.lp-ppc-photo {
    position: absolute;
    z-index: 0;
    inset-inline-end: 0;
    top: 0;
    width: 58%;
    height: 86%;
    border-radius: 260px 260px 28px 28px;
    box-shadow: var(--shadow)
}

.lp-ppc-art .lp-form-card {
    width: min(100%,470px)
}

.lp-ppc-chip {
    position: absolute;
    z-index: 3;
    inset-inline-end: -1rem;
    top: 46%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    border-radius: 16px;
    background: var(--ink);
    color: #fff;
    font-size: .9rem;
    box-shadow: var(--shadow)
}

.lp-ppc-chip .bi {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink)
}

.lp-ppc-chip b {
    color: var(--brand);
    font-size: 1.15rem
}

[data-bs-theme="dark"] .lp-ppc-chip {
    background: #fff;
    color: var(--ink)
}

[data-bs-theme="dark"] .lp-ppc-chip b {
    color: var(--brand-2)
}

.lp-ppc-art .spark.s1 {
    inset-inline-end: 8%;
    bottom: 4%;
    right: auto
}

@media (max-width: 991.98px) {
    .lp-ppc-art {
        padding-top:0
    }

    .lp-ppc-photo,.lp-ppc-chip,.lp-ppc-art .spark {
        display: none
    }

    .lp-ppc-art .lp-form-card {
        width: 100%
    }
}

.lp-logos {
    border-block:1px solid var(--line);padding-block: 1.8rem
}

.lp-logos .container {
    display: flex;
    align-items: center;
    gap: 1rem 2.5rem;
    flex-wrap: wrap
}

.lp-logos-label {
    margin: 0;
    font-size: .88rem;
    color: var(--muted);
    max-width: 14rem
}

.lp-logos-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem
}

.lp-logos-row .client {
    font-size: 1.3rem
}

@media (max-width: 767.98px) {
    .lp-logos-row {
        justify-content:flex-start;
        gap: .8rem 1.6rem
    }

    .lp-logos-row .client {
        font-size: 1.1rem
    }
}

.lp-ben {
    padding: 1.4rem 1.4rem 1.8rem;
    height: 100%;
    transition: transform .3s ease,box-shadow .3s ease
}

.lp-ben:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.lp-ben h3 {
    font-size: 1.35rem;
    margin-bottom: .6rem
}

.lp-ben-no {
    display: block;
    font-weight: 600;
    font-size: .82rem;
    color: var(--muted);
    letter-spacing: .1em;
    margin-bottom: .5rem
}

.lp-ben-vis {
    height: 176px;
    border-radius: 18px;
    background: var(--surface-2);
    margin-bottom: 1.5rem;
    padding: 1.1rem;
    position: relative;
    overflow: hidden
}

.lp-terms {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .45rem
}

.lp-terms span {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    border-radius: 10px;
    background: var(--surface);
    font-size: .85rem;
    font-weight: 500;
    width: max-content;
    max-width: 100%
}

.lp-terms .is-off {
    color: var(--muted);
    text-decoration: line-through
}

.lp-terms .is-off .bi {
    color: var(--coral)
}

.lp-terms .is-on .bi {
    color: var(--brand-2)
}

.lp-terms .is-on {
    box-shadow: inset 0 0 0 1.5px var(--brand)
}

.lp-terms span:nth-child(2) {
    margin-inline-start:1.2rem}

.lp-terms span:nth-child(4) {
    margin-inline-start:1.2rem}

[data-bs-theme="dark"] .lp-terms .is-on .bi {
    color: var(--brand)
}

.lp-match {
    display: grid;
    grid-template-columns: 1fr auto .8fr;
    align-items: center;
    gap: .6rem
}

.lp-mini-ad {
    background: var(--surface);
    border-radius: 12px;
    padding: .7rem;
    font-size: .72rem;
    line-height: 1.3;
    box-shadow: var(--shadow)
}

.lp-mini-ad small {
    display: block;
    font-weight: 700;
    font-size: .62rem;
    margin-bottom: .2rem
}

.lp-mini-ad b {
    display: block;
    color: var(--brand-2);
    font-size: .8rem;
    margin-bottom: .2rem
}

[data-bs-theme="dark"] .lp-mini-ad b {
    color: color-mix(in srgb,var(--brand-2) 55%,#fff)
}

.lp-mini-ad span {
    color: var(--muted)
}

.lp-match-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: .9rem
}

.lp-mini-page {
    background: var(--surface);
    border-radius: 12px;
    padding: .6rem;
    display: grid;
    gap: .35rem;
    box-shadow: var(--shadow)
}

.lp-mini-page i {
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 40%,var(--brand)))
}

.lp-mini-page b {
    height: 8px;
    width: 80%;
    border-radius: 4px;
    background: var(--text);
    opacity: .8
}

.lp-mini-page span {
    height: 5px;
    border-radius: 4px;
    background: var(--line)
}

.lp-mini-page em {
    height: 14px;
    width: 55%;
    border-radius: 999px;
    background: var(--brand)
}

.lp-sync {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: .5rem;
    row-gap: .8rem
}

.lp-sync-node {
    display: grid;
    justify-items: center;
    gap: .2rem
}

.lp-sync-node .bi {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--surface);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    box-shadow: var(--shadow)
}

.lp-sync-node.is-g .bi {
    background: var(--brand-2);
    color: #fff
}

.lp-sync-node small {
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted)
}

.lp-sync-line {
    height: 2px;
    background: repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 11px);
    position: relative;
    margin-bottom: 1.1rem;
    opacity: .7
}

.lp-sync-line span {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--brand-2);
    animation: lpSync 2.4s ease-in-out infinite
}

@keyframes lpSync {
    0% {
        left: 0
    }

    100% {
        left: calc(100% - 10px)
    }
}

.lp-sync-bars {
    grid-column: 1 / -1;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-height: 52px
}

.lp-sync-bars i {
    flex: 1;
    height: var(--h);
    border-radius: 6px 6px 2px 2px;
    background: color-mix(in srgb,var(--brand-2) 30%,var(--surface))
}

.lp-sync-bars i:last-child {
    background: var(--brand-2)
}

.lp-results {
    border-radius: 36px;
    padding: clamp(2rem,5vw,4rem);
    position: relative;
    overflow: hidden
}

.lp-results::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    inset-inline-end: -180px;
    bottom: -300px;
    background: radial-gradient(circle,color-mix(in srgb,var(--brand) 40%,transparent),transparent 65%);
    pointer-events: none
}

.lp-results .stat .n {
    font-size: clamp(2.4rem,4.4vw,3.6rem)
}

.lp-results .stat .n sup {
    font-size: .4em
}

.lp-case-art {
    position: relative;
    padding: 0 0 2.5rem 0
}

.lp-case-photo {
    aspect-ratio: 1 / .86;
    border-radius: var(--radius)
}

.lp-case-badge {
    position: absolute;
    inset-inline-start: 1.4rem;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1.1rem;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.lp-case-badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.1
}

.lp-case-badge small {
    color: var(--muted)
}

.lp-case-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.2rem
}

.lp-case-roas {
    position: absolute;
    inset-inline-end: -1rem;
    top: 1.6rem;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: var(--brand-2);
    color: #fff;
    box-shadow: var(--shadow)
}

.lp-case-roas small {
    display: block;
    font-size: .78rem;
    opacity: .95
}

.lp-case-roas b {
    font-family: var(--font-display);
    font-size: 2.2rem;
    letter-spacing: -.04em;
    line-height: 1
}

.lp-case-roas b span {
    font-size: .5em;
    font-weight: 500;
    opacity: .95
}

@media (max-width: 991.98px) {
    .lp-case-roas {
        inset-inline-end:.6rem
    }
}

@media (max-width: 575.98px) {
    .lp-case-roas {
        inset-inline-end:.6rem;
        top: .6rem;
        padding: .7rem .9rem
    }

    .lp-case-roas b {
        font-size: 1.6rem
    }
}

.lp-ba {
    padding: .4rem 1.2rem;
    margin-top: 1.6rem
}

.lp-ba-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
    font-size: .95rem
}

.lp-ba-row:last-child {
    border-bottom: 0
}

.lp-ba-row>span:nth-child(2) {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb,var(--coral) 70%,transparent)
}

.lp-ba-row b {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-ba-row b {
    color: var(--brand)
}

.lp-ba-head {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.lp-ba-head>span:nth-child(2) {
    text-decoration: none
}

.lp-case-quote blockquote {
    font-size: 1.12rem;
    line-height: 1.5;
    padding-inline-start:1.1rem;border-inline-start:3px solid var(--brand)}

.quote.h-100 {
    scroll-snap-align: none
}

.lp-signup {
    max-width: 600px;
    margin-top: 2rem;
    scroll-margin-top: 110px
}

.footer-news.lp-news {
    display: grid;
    grid-template-columns: .8fr 1.2fr auto;
    align-items: center;
    gap: 0;
    padding: .4rem;
    border-radius: 999px;
    box-shadow: var(--shadow)
}

.lp-news input[type="text"],.lp-news input[type="email"] {
    padding: .7rem 1.1rem;
    min-width: 0
}

.lp-news input[type="email"] {
    border-inline-start:1px solid var(--line)}

.lp-news .btn {
    white-space: nowrap
}

@media (min-width: 992px) and (max-width:1199.98px) {
    .footer-news.lp-news {
        grid-template-columns:1fr 1fr;
        border-radius: 22px;
        padding: .5rem
    }

    .lp-news .btn {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: .3rem
    }
}

@media (max-width: 575.98px) {
    .footer-news.lp-news {
        grid-template-columns:1fr;
        border-radius: 22px;
        padding: .5rem
    }

    .lp-news input[type="email"] {
        border-inline-start:0;border-top: 1px solid var(--line)
    }

    .lp-news .btn {
        justify-content: center;
        margin-top: .3rem
    }
}

.lp-book-scene {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center;
    perspective: 1600px
}

.lp-book-halo {
    position: absolute;
    width: min(470px,92%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--brand);
    opacity: .9
}

.lp-book-halo::after {
    content: "";
    position: absolute;
    inset: -26px;
    border-radius: 50%;
    border: 1.5px dashed var(--line)
}

.lp-book {
    --w: clamp(220px,26vw,310px);
    --t: 34px;
    position: relative;
    width: var(--w);
    aspect-ratio: 3 / 4.15;
    transform-style: preserve-3d;
    transform: rotateY(-26deg) rotateX(4deg);
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
    z-index: 2
}

.lp-book-scene:hover .lp-book {
    transform: rotateY(-14deg) rotateX(2deg)
}

.lp-book-cover {
    position: absolute;
    inset: 0;
    transform: translateZ(calc(var(--t) / 2));
    border-radius: 4px 14px 14px 4px;
    overflow: hidden;
    background: var(--brand-2);
    color: #fff;
    padding: 1.5rem 1.4rem 1.3rem 1.8rem;
    display: flex;
    flex-direction: column;
    box-shadow: inset 4px 0 0 rgba(255,255,255,.08)
}

.lp-book-cover::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 22px;
    background: linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.14) 45%,rgba(0,0,0,.1) 60%,transparent)
}

.lp-book-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,rgba(255,255,255,.18),transparent 38%,transparent 70%,rgba(0,0,0,.18));
    pointer-events: none
}

.lp-cover-ring {
    position: absolute;
    border-radius: 50%;
    border: 18px solid var(--brand);
    opacity: .95
}

.lp-cover-ring.r1 {
    width: calc(var(--w) * .68);
    height: calc(var(--w) * .68);
    inset-inline-end: calc(var(--w) * -.3);
    bottom: calc(var(--w) * .2);
    border-width: calc(var(--w) * .058)
}

.lp-cover-ring.r2 {
    width: calc(var(--w) * .29);
    height: calc(var(--w) * .29);
    inset-inline-end: calc(var(--w) * .17);
    bottom: calc(var(--w) * .08);
    border-width: calc(var(--w) * .033);
    border-color: var(--coral);
    opacity: .9
}

.lp-cover-kicker {
    position: relative;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .8
}

.lp-cover-title {
    position: relative;
    margin-top: 1.1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: calc(var(--w) * .15);
    line-height: .95;
    letter-spacing: -.04em
}

.lp-cover-title b {
    display: block;
    color: var(--brand);
    font-size: 1.3em
}

.lp-cover-title em {
    font-weight: 300
}

.lp-cover-sub {
    position: relative;
    margin-top: .9rem;
    font-size: .7rem;
    font-weight: 500;
    opacity: .85;
    max-width: 11rem
}

.lp-cover-foot {
    position: relative;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.03em
}

.lp-cover-mark {
    width: 24px;
    height: 24px
}

.lp-cover-mark rect {
    fill: var(--brand)
}

.lp-cover-mark path {
    stroke: var(--ink)
}

.lp-book-edge {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: calc(var(--w) - var(--t) / 2 - 3px);
    width: var(--t);
    transform: rotateY(90deg);
    background: repeating-linear-gradient(90deg,#f7f4ec 0 2px,#e2dccd 2px 3px);
    border-radius: 2px
}

.lp-book-back {
    position: absolute;
    inset: 0;
    transform: translateZ(calc(var(--t) / -2));
    border-radius: 4px 14px 14px 4px;
    background: color-mix(in srgb,var(--brand-2) 70%,#000)
}

.lp-book-shadow {
    position: absolute;
    z-index: 1;
    bottom: 50px;
    width: 300px;
    height: 40px;
    border-radius: 50%;
    background: rgba(18,18,18,.35);
    filter: blur(18px);
    transform: translateX(30px)
}

.lp-book-peek {
    position: absolute;
    z-index: 3;
    inset-inline-start: 0;
    bottom: 12%;
    width: 200px;
    padding: .9rem 1rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.lp-book-peek small {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.lp-book-peek b {
    display: block;
    font-size: .92rem;
    line-height: 1.25;
    margin: .2rem 0 .5rem
}

.lp-book-peek svg {
    width: 100%;
    height: 40px;
    display: block
}

.lp-peek-line {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
}

[data-bs-theme="dark"] .lp-peek-line {
    stroke: var(--brand)
}

.lp-book-rate {
    position: absolute;
    z-index: 3;
    inset-inline-end: 0;
    top: 50%;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1.1rem;
    border-radius: 16px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow)
}

.lp-book-rate b {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--brand)
}

.lp-book-rate small {
    display: block;
    font-size: .75rem;
    opacity: .75
}

[data-bs-theme="dark"] .lp-book-rate {
    background: #fff;
    color: var(--ink)
}

[data-bs-theme="dark"] .lp-book-rate b {
    color: var(--ink)
}

.lp-book-sticker {
    top: 4%;
    right: auto;
    inset-inline-end: 8%
}

@media (max-width: 991.98px) {
    .lp-book-scene {
        min-height:470px
    }

    .lp-book {
        --w: 250px
    }
}

@media (max-width: 575.98px) {
    .lp-book-scene {
        min-height:400px
    }

    .lp-book {
        --w: 205px;
        --t: 26px
    }

    .lp-book-shadow {
        width: 200px;
        bottom: 40px
    }

    .lp-book-peek {
        width: 160px;
        bottom: 2%;
        padding: .7rem .8rem
    }

    .lp-book-peek b {
        font-size: .8rem
    }

    .lp-book-rate {
        top: 6%;
        padding: .6rem .8rem
    }

    .lp-book-rate b {
        font-size: 1.5rem
    }

    .lp-book-sticker {
        top: 2%;
        inset-inline-end: auto;
        inset-inline-start: .8rem
    }
}

@media (prefers-reduced-motion:reduce) {
    .lp-book {
        transition: none
    }
}

.lp-inside-aside {
    position: sticky;
    top: 110px
}

.lp-inside-art {
    position: relative;
    padding-bottom: 2.2rem
}

.lp-inside-photo {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius)
}

.lp-bonus {
    position: absolute;
    inset-inline: 1.2rem;
    bottom: 0;
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: .9rem 1.1rem;
    box-shadow: var(--shadow)
}

.lp-bonus strong {
    display: block
}

.lp-bonus small {
    color: var(--muted);
    line-height: 1.3;
    display: block
}

.lp-bonus-ic {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.25rem
}

.lp-chapters {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line)
}

.lp-chapters li {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 1.2rem;
    padding: 1.5rem .8rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    transition: background-color .25s ease
}

.lp-chapters li:hover {
    background: var(--surface)
}

.lp-chapters li.is-hot {
    background: color-mix(in srgb,var(--brand) 22%,transparent)
}

[data-bs-theme="dark"] .lp-chapters li.is-hot {
    background: color-mix(in srgb,var(--brand) 12%,transparent)
}

.lp-ch-no {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-ch-no {
    color: var(--brand)
}

.lp-chapters h3 {
    font-size: 1.3rem;
    margin-bottom: .35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem
}

.lp-chapters h3 .tag {
    font-family: var(--font-body);
    letter-spacing: 0
}

.lp-chapters p {
    margin: 0;
    color: var(--muted);
    font-size: .98rem
}

.lp-ch-pg {
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    padding-top: .3rem
}

@media (max-width: 575.98px) {
    .lp-chapters li {
        grid-template-columns:44px 1fr;
        padding-inline:.2rem}

    .lp-ch-pg {
        display: none
    }

    .lp-ch-no {
        font-size: 1.5rem
    }
}

.lp-author-art {
    position: relative;
    max-width: 440px;
    margin-inline:auto;padding: 0 1.5rem 2rem 0
}

.lp-author-shape {
    position: absolute;
    inset: 2.5rem 0 0 2.5rem;
    border-radius: 240px 240px 30px 30px;
    background: var(--brand-2)
}

.lp-author-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 240px 240px 30px 30px;
    box-shadow: var(--shadow)
}

.lp-author-sign {
    position: absolute;
    inset-inline-start: -1rem;
    bottom: 0;
    padding: .9rem 1.3rem;
    border-radius: 18px;
    background: var(--brand);
    color: var(--ink);
    box-shadow: var(--shadow)
}

.lp-author-sign em {
    display: block;
    font-size: 1.6rem;
    line-height: 1.1
}

.lp-author-sign small {
    font-weight: 600;
    font-size: .8rem
}

@media (max-width: 575.98px) {
    .lp-author-sign {
        inset-inline-start:0
    }
}

.lp-author-facts {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem
}

.lp-author-facts li {
    border-top: 2px solid var(--text);
    padding-top: .8rem
}

.lp-author-facts b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.8rem,3vw,2.4rem);
    letter-spacing: -.04em;
    line-height: 1;
    margin-bottom: .3rem
}

.lp-author-facts span {
    font-size: .88rem;
    color: var(--muted)
}

@media (max-width: 575.98px) {
    .lp-author-facts {
        grid-template-columns:1fr
    }
}

.lp-coauthors {
    display: flex;
    align-items: center;
    gap: 1rem
}

.lp-author .avatar {
    border-color: var(--surface-2)
}

.lp-proof-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem
}

.lp-proof-stats b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.8rem,3vw,2.6rem);
    letter-spacing: -.04em;
    line-height: 1
}

.lp-proof-stats span {
    font-size: .85rem;
    color: var(--muted)
}

.lp-wall {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.25rem;
    align-items: start
}

.lp-note {
    margin: 0;
    padding: 1.6rem;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 1.2rem
}

.lp-note blockquote {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.5
}

.lp-note figcaption {
    display: flex;
    align-items: center;
    gap: .75rem
}

.lp-note figcaption small {
    display: block;
    color: var(--muted);
    font-size: .82rem
}

.lp-note.is-ink {
    background: var(--ink);
    color: #f3f1ec;
    --muted: #a3a09a;
    margin-top: 2.5rem
}

.lp-note.is-ink blockquote {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.02em
}

.lp-note.is-brand {
    background: var(--brand);
    color: var(--ink);
    --muted: rgba(18,18,18,.7);
    margin-top: 1.2rem
}

.lp-note:nth-child(3) {
    margin-top: 4rem
}

[data-bs-theme="dark"] .lp-note.is-ink {
    background: var(--surface-2)
}

.lp-note .avatar {
    border-color: transparent
}

@media (max-width: 991.98px) {
    .lp-wall {
        grid-template-columns:repeat(2,1fr)
    }

    .lp-note:nth-child(n) {
        margin-top: 0
    }

    .lp-proof-stats {
        justify-content: flex-start;
        gap: 2.5rem
    }
}

@media (max-width: 575.98px) {
    .lp-wall {
        grid-template-columns:1fr
    }

    .lp-proof-stats {
        gap: 1.5rem
    }
}

.lp-ebook-cta {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: clamp(2rem,5vw,4rem);
    padding-inline-start:clamp(2rem,30%,22rem);min-height: 300px;
    display: flex;
    align-items: center
}

.lp-mini-book {
    position: absolute;
    inset-inline-start: clamp(2rem,6%,5rem);
    top: 50%;
    width: 170px;
    aspect-ratio: 3 / 4.15;
    transform: translateY(-50%) rotate(-8deg);
    border-radius: 4px 12px 12px 4px;
    background: var(--brand-2);
    color: #fff;
    padding: 1.1rem 1rem 1rem 1.3rem;
    box-shadow: 14px 18px 0 -2px var(--brand),0 30px 50px -20px rgba(0,0,0,.6);
    overflow: hidden
}

.lp-mini-book::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 14px;
    background: linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.12))
}

.lp-mini-book span {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: .95;
    letter-spacing: -.04em
}

.lp-mini-book b {
    display: block;
    color: var(--brand);
    font-size: 1.35em
}

.lp-mini-book em {
    font-weight: 300
}

@media (max-width: 767.98px) {
    .lp-ebook-cta {
        padding-inline-start:clamp(2rem,5vw,4rem);
        padding-top: 15rem
    }

    .lp-mini-book {
        top: 2rem;
        transform: rotate(-8deg);
        width: 130px
    }

    .lp-mini-book span {
        font-size: 1.1rem
    }
}

.lp-web-hero {
    margin-inline:clamp(0px,1.2vw,18px);border-radius: clamp(0px,3vw,36px);
    padding-block:clamp(3rem,6vw,5.5rem)}

.lp-web-hero .hero-bg .blob {
    opacity: .22
}

[data-bs-theme="dark"] .lp-web-hero {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08)
}

.lp-web-hero h1 {
    color: #fff
}

.lp-live {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .04em
}

.lp-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 0 color-mix(in srgb,var(--coral) 60%,transparent);
    animation: lpPulse 1.8s ease-out infinite
}

@keyframes lpPulse {
    70% {
        box-shadow: 0 0 0 10px transparent
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

.lp-web-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    font-size: .95rem;
    font-weight: 500
}

.lp-web-meta li {
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.lp-web-meta .bi {
    color: var(--brand)
}

.lp-web-countlabel,.lp-reg-countlabel {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted)
}

.lp-web-count {
    max-width: 440px
}

.lp-web-count li {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1)
}

.lp-web-count b {
    color: var(--brand);
    font-size: clamp(1.9rem,3.4vw,2.6rem)
}

.lp-btn-ghost {
    border: 1.5px solid rgba(255,255,255,.35);
    color: #fff;
    background: transparent
}

.lp-btn-ghost:hover,.lp-btn-ghost:focus-visible {
    background: #fff;
    color: var(--ink);
    border-color: #fff
}

.lp-web-art {
    position: relative;
    padding: 2rem 1rem 2.5rem 2rem
}

.lp-web-window {
    position: relative;
    background: #1b1b1e;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    padding: .7rem;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
    transform: rotate(-1.5deg)
}

.lp-web-bar {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .2rem .4rem .7rem;
    font-size: .8rem;
    color: #a3a09a
}

.lp-web-bar .text-truncate {
    flex: 1;
    min-width: 0
}

.lp-web-rec {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 6px;
    background: var(--coral);
    color: var(--ink);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase
}

.lp-web-rec i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink)
}

.lp-web-viewers {
    display: inline-flex;
    gap: .35rem;
    align-items: center
}

.lp-web-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 16px
}

.lp-web-name {
    position: absolute;
    inset-inline-start: .8rem;
    bottom: .8rem;
    padding: .3rem .7rem;
    border-radius: 8px;
    background: rgba(18,18,18,.7);
    color: #fff;
    font-size: .78rem;
    font-weight: 600
}

.lp-web-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: .5rem;
    margin-top: .5rem
}

.lp-web-tiles figure {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 12px
}

.lp-web-tiles figcaption {
    position: absolute;
    inset-inline-start: .4rem;
    bottom: .4rem;
    padding: .1rem .45rem;
    border-radius: 6px;
    background: rgba(18,18,18,.7);
    color: #fff;
    font-size: .68rem;
    font-weight: 600
}

.lp-web-slide {
    border-radius: 12px;
    background: var(--brand-2);
    color: #fff;
    padding: .6rem .7rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: .72rem
}

.lp-web-slide svg {
    width: 100%;
    height: 38px
}

.lp-web-slide path {
    fill: none;
    stroke: var(--brand);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
}

.lp-web-chat {
    position: absolute;
    z-index: 2;
    inset-inline-start: -1rem;
    bottom: 0;
    max-width: 290px;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    border-radius: 18px 18px 18px 4px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 20px 40px -16px rgba(0,0,0,.6);
    font-size: .88rem;
    line-height: 1.35
}

.lp-web-chat .avatar {
    width: 36px;
    height: 36px;
    border: 0
}

.lp-web-chat small {
    display: block;
    font-weight: 700;
    font-size: .72rem;
    color: #5d5a54;
    margin-bottom: .15rem
}

.lp-web-react {
    position: absolute;
    z-index: 2;
    inset-inline-end: 0;
    top: .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-weight: 700;
    font-size: .9rem;
    box-shadow: var(--shadow)
}

.lp-web-react .bi-heart-fill {
    color: var(--coral)
}

@media (max-width: 575.98px) {
    .lp-web-art {
        padding:1.5rem 0 4.5rem
    }

    .lp-web-hero {
        margin-inline:0;border-radius: 0 0 28px 28px
    }

    .lp-web-art {
        padding-bottom: 4.5rem
    }

    .lp-web-chat {
        inset-inline-start: .5rem;
        bottom: 0;
        max-width: 250px;
        font-size: .8rem
    }

    .lp-web-react {
        inset-inline-end: .5rem;
        top: 0
    }
}

.lp-learn-photo {
    position: relative;
    aspect-ratio: 4 / 4.6;
    border-radius: 240px 240px var(--radius) var(--radius)
}

.lp-learn-photo figcaption {
    position: absolute;
    inset-inline: 1.2rem;
    bottom: 1.2rem;
    padding: .9rem 1.1rem;
    border-radius: 16px;
    background: var(--brand);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.3
}

.lp-learn-photo figcaption b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.03em;
    margin-inline-end:.3rem}

.lp-learn {
    list-style: none;
    padding: 0;
    margin: 0
}

.lp-learn li {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1.2rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--line)
}

.lp-learn li>span {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    background: var(--ink);
    color: var(--brand)
}

[data-bs-theme="dark"] .lp-learn li>span {
    background: var(--brand);
    color: var(--ink)
}

.lp-learn h3 {
    font-size: 1.25rem;
    margin-bottom: .35rem
}

.lp-learn p {
    margin: 0;
    color: var(--muted)
}

.lp-speaker h3 {
    margin: 1.2rem 0 .2rem;
    font-size: 1.5rem
}

.lp-speaker-job {
    font-weight: 600;
    color: var(--brand-2-text);
    margin-bottom: .6rem;
    font-size: .95rem
}

[data-bs-theme="dark"] .lp-speaker-job {
    color: var(--brand)
}

.lp-speaker-img {
    position: relative;
    aspect-ratio: 4 / 4.6;
    border-radius: var(--radius)
}

.lp-speaker-img img {
    transition: transform .6s cubic-bezier(.2,.7,.2,1)
}

.lp-speaker:hover .lp-speaker-img img {
    transform: scale(1.05)
}

.lp-speaker-role {
    position: absolute;
    inset-inline-start: 1rem;
    top: 1rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--paper);
    font-size: .78rem;
    font-weight: 600
}

.lp-speaker:first-child .lp-speaker-role {
    background: var(--brand);
    color: var(--ink)
}

.col-md-4:first-child .lp-speaker-role {
    background: var(--brand);
    color: var(--ink)
}

.lp-agenda-aside {
    position: sticky;
    top: 110px
}

.lp-agenda-card {
    display: flex;
    gap: .9rem;
    align-items: center;
    padding: 1.1rem 1.2rem;
    margin-top: 1.5rem
}

.lp-agenda-card>.bi {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: #fff;
    font-size: 1.2rem
}

.lp-agenda-card strong {
    display: block
}

.lp-agenda-card small {
    color: var(--muted);
    display: block;
    line-height: 1.35
}

.lp-timeline {
    list-style: none;
    padding: 0;
    margin: 0
}

.lp-timeline li {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 1.2rem
}

.lp-timeline time {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -.03em;
    padding-top: 1.3rem
}

.lp-tl-body {
    position: relative;
    padding: 1.3rem 1.4rem 1.6rem 2rem;
    border-inline-start:2px solid var(--line)}

.lp-tl-body :before {
    content:"";
    position: absolute;
    inset-inline-start: -9px;
    top: 1.75rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--brand-2)
}

.lp-timeline li:last-child .lp-tl-body {
    border-color: transparent
}

.lp-tl-body h3 {
    font-size: 1.25rem;
    margin-bottom: .35rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    align-items: center
}

.lp-tl-body h3 .tag {
    font-family: var(--font-body);
    letter-spacing: 0
}

.lp-tl-body p {
    color: var(--muted);
    margin-bottom: .7rem
}

.lp-timeline li.is-hot .lp-tl-body {
    background: color-mix(in srgb,var(--brand) 24%,transparent);
    border-radius: 0 18px 18px 0
}

.lp-timeline li.is-hot .lp-tl-body::before {
    background: var(--brand);
    border-color: var(--ink)
}

[data-bs-theme="dark"] .lp-timeline li.is-hot .lp-tl-body {
    background: color-mix(in srgb,var(--brand) 12%,transparent)
}

[data-bs-theme="dark"] .lp-tl-body::before {
    border-color: var(--brand)
}

.lp-tl-who {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    font-weight: 600;
    padding: .25rem .8rem .25rem .25rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.lp-tl-who .avatar {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: var(--surface)
}

.lp-tl-who .avatar-stack .avatar + .avatar {
    margin-inline-start:-10px}

.lp-tl-who>.bi {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2)
}

@media (max-width: 575.98px) {
    .lp-timeline li {
        grid-template-columns:1fr;
        gap: 0
    }

    .lp-timeline time {
        padding: 0 0 .4rem;
        font-size: 1.1rem
    }

    .lp-tl-body {
        padding: .4rem 0 1.6rem 1.4rem
    }

    .lp-tl-body::before {
        top: .55rem
    }

    .lp-timeline li.is-hot .lp-tl-body {
        padding: .8rem 1rem 1.2rem 1.4rem
    }
}

.lp-fit {
    height: 100%;
    padding: clamp(1.6rem,3.5vw,2.6rem);
    border-radius: var(--radius)
}

.lp-fit h2 {
    display: flex;
    align-items: center;
    gap: .6rem
}

.lp-fit ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .9rem
}

.lp-fit li {
    position: relative;
    padding-inline-start:2.1rem}

.lp-fit li::before {
    position: absolute;
    inset-inline-start: 0;
    top: .1rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "bootstrap-icons";
    font-size: .8rem
}

.lp-fit.is-yes {
    background: var(--brand-2);
    color: #fff
}

.lp-fit.is-yes h2 .bi {
    color: var(--brand)
}

.lp-fit.is-yes li::before {
    content: "\f633";
    background: var(--brand);
    color: var(--ink)
}

.lp-fit.is-no li::before {
    content: "\f659";
    background: var(--surface-2);
    color: var(--muted)
}

.lp-fit.is-no {
    color: var(--text)
}

.lp-fit.is-no li {
    color: var(--muted)
}

.lp-fit-roles {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.8rem
}

.lp-fit-roles .tag {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff
}

.lp-web-reg {
    background: linear-gradient(180deg,transparent,var(--surface-2) 40%)
}

.lp-seats-bar {
    height: 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden
}

.lp-seats-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--brand),var(--brand-2))
}

.lp-reg-count li {
    background: var(--surface)
}

.lp-perks {
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0;
    display: grid;
    gap: .7rem
}

.lp-perks li {
    display: flex;
    gap: .7rem;
    align-items: center;
    font-weight: 500
}

.lp-perks .bi {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--brand-2);
    flex: none
}

[data-bs-theme="dark"] .lp-perks .bi {
    color: var(--brand)
}

.lp-offer-bar {
    background: var(--brand-2);
    color: #fff;
    font-size: .92rem;
    padding-block:.65rem}

.lp-offer-bar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem 1rem;
    text-align: center
}

.lp-offer-bar .bi-fire {
    color: var(--brand)
}

.lp-cd-inline {
    display: inline-flex;
    gap: .3rem;
    font-variant-numeric: tabular-nums
}

.lp-cd-inline>span {
    display: inline-flex;
    align-items: baseline;
    gap: .1rem;
    padding: .15rem .45rem;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
    font-size: .8rem
}

.lp-cd-inline b {
    font-family: var(--font-display);
    font-size: 1rem;
    color: #fff
}

.lp-offer-bar-link {
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px
}

.lp-offer-bar-link:hover {
    color: var(--brand)
}

.lp-price {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin: 0 0 2rem;
    padding: 1rem 1.4rem;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    width: max-content;
    max-width: 100%;
    box-shadow: var(--shadow)
}

.lp-price small {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .2rem
}

.lp-price del {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -.04em;
    color: var(--muted);
    text-decoration-color: var(--coral);
    text-decoration-thickness: 3px
}

.lp-price-new b {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.4rem;
    letter-spacing: -.05em;
    line-height: .9;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-price-new b {
    color: var(--brand)
}

.lp-price-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink)
}

.lp-offer-art {
    position: relative;
    padding: 1rem 0 2rem 3rem
}

.lp-offer-photo {
    aspect-ratio: 1 / 1.08;
    border-radius: 32px 32px 200px 32px;
    box-shadow: var(--shadow)
}

.lp-score {
    position: absolute;
    z-index: 2;
    inset-inline-start: 0;
    bottom: 0;
    width: 290px;
    padding: 1.1rem 1.2rem;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px -30px rgba(18,18,18,.45)
}

.lp-score-top {
    display: flex;
    gap: .9rem;
    align-items: center;
    margin-bottom: .9rem
}

.lp-score-top small {
    display: block;
    font-size: .72rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em
}

.lp-score-top strong {
    display: block;
    font-size: 1rem
}

.lp-score-up {
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-score-up {
    color: var(--brand)
}

.lp-gauge {
    --v: 50;
    flex: none;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    background: radial-gradient(closest-side,var(--surface) 76%,transparent 77%),conic-gradient(var(--brand-2) calc(var(--v) * 1%),var(--surface-2) 0)
}

.lp-gauge b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -.04em
}

.lp-gauge small {
    font-size: .62rem;
    color: var(--muted)
}

.lp-score-row {
    display: grid;
    grid-template-columns: 64px 1fr 24px;
    gap: .6rem;
    align-items: center;
    font-size: .78rem;
    padding: .22rem 0
}

.lp-score-row span {
    color: var(--muted)
}

.lp-score-row i {
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--brand-2) var(--w),var(--surface-2) 0)
}

.lp-score-row i.is-low {
    background: linear-gradient(90deg,var(--coral) var(--w),var(--surface-2) 0)
}

.lp-score-row b {
    text-align: end
}

.lp-offer-sticker {
    top: 0;
    right: auto;
    inset-inline-end: -1rem
}

@media (max-width: 1299.98px) {
    .lp-offer-sticker {
        inset-inline-end:.5rem
    }
}

@media (max-width: 575.98px) {
    .lp-offer-art {
        padding:0 0 6rem
    }

    .lp-score {
        width: 250px;
        inset-inline-start: .6rem
    }

    .lp-offer-sticker {
        inset-inline-end: 1.2rem;
        top: -1rem
    }

    .lp-price {
        gap: .7rem;
        padding: .9rem 1rem;
        flex-wrap: nowrap
    }

    .lp-price small {
        font-size: .62rem;
        letter-spacing: .04em
    }

    .lp-price del {
        font-size: 1.5rem
    }

    .lp-price-new b {
        font-size: 2.5rem
    }

    .lp-price-arrow {
        width: 32px;
        height: 32px;
        flex: none
    }
}

.lp-receipt {
    position: sticky;
    top: 110px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding: 1.8rem 1.8rem 2.4rem;
    box-shadow: var(--shadow);
    font-variant-numeric: tabular-nums
}

.lp-receipt::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -14px;
    height: 14px;
    background: radial-gradient(circle at 10px -2px,transparent 10px,var(--surface) 10.5px) 0 0 / 20px 14px repeat-x
}

.lp-receipt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 2px dashed var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem
}

.lp-receipt-head small {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .8rem;
    color: var(--muted)
}

.lp-receipt ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.lp-receipt li,.lp-receipt-sum,.lp-receipt-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0
}

.lp-receipt li {
    border-bottom: 1px solid var(--line);
    font-size: .95rem
}

.lp-receipt li span:last-child {
    font-weight: 600
}

.lp-receipt-sum {
    font-size: .95rem;
    color: var(--muted)
}

.lp-receipt-sum:first-of-type {
    margin-top: .4rem
}

.lp-receipt-sum.is-off span:last-child {
    color: var(--coral);
    font-weight: 600
}

.lp-receipt-total {
    border-top: 2px dashed var(--line);
    margin-top: .3rem;
    padding-top: 1rem;
    align-items: baseline;
    font-weight: 600
}

.lp-receipt-total b {
    font-family: var(--font-display);
    font-size: 3rem;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-receipt-total b {
    color: var(--brand)
}

.lp-bfa {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.2rem
}

.lp-bfa-card {
    border-radius: var(--radius);
    padding: clamp(1.5rem,3vw,2.2rem);
    height: 100%
}

.lp-bfa-card.is-before {
    background: var(--surface);
    border: 1px solid var(--line)
}

.lp-bfa-card.is-after {
    background: var(--brand-2);
    color: #fff;
    --muted: rgba(255,255,255,.92)
}

.lp-bfa-label {
    display: inline-block;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--surface-2);
    color: var(--muted)
}

.is-after .lp-bfa-label {
    background: var(--brand);
    color: var(--ink)
}

.lp-bfa-chart {
    width: 100%;
    height: 90px;
    margin: 1.2rem 0
}

.lp-bfa-chart path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
}

.is-before .lp-bfa-chart path {
    stroke: var(--coral);
    stroke-dasharray: 6 6
}

.is-after .lp-bfa-chart path {
    stroke: var(--brand);
    stroke-width: 4
}

.lp-bfa-nums {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .8rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--line)
}

.is-after .lp-bfa-nums {
    border-color: rgba(255,255,255,.2)
}

.lp-bfa-nums b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem,3vw,2.3rem);
    letter-spacing: -.04em;
    line-height: 1
}

.is-before .lp-bfa-nums b {
    color: var(--muted)
}

.lp-bfa-nums small {
    color: var(--muted);
    font-size: .8rem
}

.lp-bfa-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .55rem;
    font-size: .95rem
}

.lp-bfa-card li {
    position: relative;
    padding-inline-start:1.7rem}

.lp-bfa-card li::before {
    position: absolute;
    inset-inline-start: 0;
    top: .05rem;
    font-family: "bootstrap-icons"
}

.is-before li {
    color: var(--muted)
}

.is-before li::before {
    content: "\f659";
    color: var(--coral)
}

.is-after li::before {
    content: "\f633";
    color: var(--brand)
}

.lp-bfa-mid {
    display: grid;
    justify-items: center;
    gap: .4rem
}

.lp-bfa-mid .bi {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    background: var(--brand);
    color: var(--ink);
    box-shadow: var(--shadow)
}

.lp-bfa-mid small {
    font-weight: 600;
    font-size: .8rem;
    color: var(--muted)
}

@media (max-width: 991.98px) {
    .lp-bfa {
        grid-template-columns:1fr
    }

    .lp-bfa-mid .bi {
        transform: rotate(90deg)
    }
}

.lp-mini-win {
    display: flex;
    align-items: center;
    gap: .8rem 1rem;
    padding: 1.1rem 1.4rem;
    flex-wrap: wrap
}

.lp-mini-win .client {
    font-size: 1.15rem;
    margin-inline-end:auto}

.lp-mini-win b {
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: -.04em;
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-mini-win b {
    color: var(--brand)
}

.lp-mini-win small {
    color: var(--muted)
}

.lp-seal-big {
    position: relative;
    overflow: hidden;
    width: min(340px,80%);
    aspect-ratio: 1;
    margin-inline:auto;border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 14px color-mix(in srgb,var(--brand) 30%,transparent),var(--shadow)
}

.lp-seal-big svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: spin 26s linear infinite
}

.lp-seal-big text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    fill: var(--ink)
}

.lp-seal-big>span {
    display: grid;
    place-items: center;
    width: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed rgba(18,18,18,.35);
    text-align: center;
    align-content: center
}

.lp-seal-big b {
    font-family: var(--font-display);
    font-size: clamp(2.6rem,6vw,4rem);
    letter-spacing: -.05em;
    line-height: .9
}

.lp-seal-big small {
    font-weight: 600;
    font-size: .85rem
}

.lp-badge {
    height: 100%;
    text-align: center;
    padding: 1.2rem .8rem;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.lp-badge>span {
    width: 54px;
    height: 54px;
    margin: 0 auto .8rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    background: var(--surface-2);
    color: var(--brand-2);
    outline: 2px dashed var(--line);
    outline-offset: 4px
}

[data-bs-theme="dark"] .lp-badge>span {
    color: var(--brand)
}

.lp-badge b {
    display: block;
    font-size: .95rem;
    line-height: 1.25
}

.lp-badge small {
    color: var(--muted);
    font-size: .8rem
}

.lp-claim-side {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 28px;
    padding: clamp(1.6rem,3.5vw,2.6rem)
}

.lp-cd-big {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .5rem;
    font-variant-numeric: tabular-nums
}

.lp-cd-big li {
    text-align: center;
    padding: .9rem .3rem;
    border-radius: 16px;
    background: var(--surface-2)
}

.lp-cd-big b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem,4vw,2.8rem);
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--brand)
}

.lp-cd-big span {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.lp-cd-big.is-over b {
    color: var(--muted)
}

.lp-seats-bar.is-dark {
    background: rgba(255,255,255,.1);
    border-color: transparent
}

.lp-claim-quote {
    margin: 2rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line)
}

.lp-claim-quote blockquote {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 1rem
}

.lp-claim-quote figcaption {
    display: flex;
    align-items: center;
    gap: .75rem
}

.lp-claim-quote figcaption small {
    display: block;
    color: var(--muted)
}

.lp-claim-quote .avatar {
    border-color: transparent
}

.lp-sticky {
    display: none
}

@media (max-width: 767.98px) {
    .lp-sticky {
        position:fixed;
        z-index: 1035;
        left: .6rem;
        right: .6rem;
        bottom: .6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .8rem;
        padding: .6rem .6rem .6rem 1.1rem;
        border-radius: 18px;
        background: var(--ink);
        color: #fff;
        box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
        transform: translateY(140%);
        transition: transform .35s cubic-bezier(.2,.7,.2,1)
    }

    .lp-sticky.is-on {
        transform: none
    }

    .lp-sticky b {
        display: block;
        font-size: .92rem;
        line-height: 1.2
    }

    .lp-sticky small {
        font-size: .78rem;
        color: #a3a09a;
        font-variant-numeric: tabular-nums
    }

    .lp-sticky small span {
        color: var(--brand);
        font-weight: 600
    }

    [data-bs-theme="dark"] .lp-sticky {
        background: #fff;
        color: var(--ink)
    }

    [data-bs-theme="dark"] .lp-sticky small {
        color: #5d5a54
    }

    [data-bs-theme="dark"] .lp-sticky small span {
        color: var(--brand-2)
    }

    body.lp-sticky-on .chat-float,body.lp-sticky-on .to-top {
        bottom: 5.4rem
    }

    body.lp-sticky-on .skin-panel {
        bottom: 9.6rem
    }
}

.lp-app-hero {
    padding-bottom: clamp(3rem,6vw,5rem)
}

.lp-app-intro {
    max-width: 880px;
    margin-inline:auto}

.lp-app-intro h1 {
    margin-block:1.4rem 1.4rem}

.lp-app-intro .lead {
    max-width: 40rem
}

.lp-news-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .9rem .3rem .3rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none
}

.lp-news-pill:hover {
    border-color: var(--text)
}

.lp-news-pill .bi {
    transition: transform .2s ease
}

.lp-news-pill:hover .bi {
    transform: translateX(3px)
}

.lp-app-fine {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.4rem;
    margin: 1.4rem 0 0;
    font-size: .88rem;
    color: var(--muted)
}

.lp-app-fine span {
    display: inline-flex;
    gap: .35rem;
    align-items: center
}

.lp-dash-wrap {
    position: relative;
    max-width: 1160px;
    margin: clamp(2.5rem,5vw,4rem) auto 0
}

.lp-dash-glow {
    position: absolute;
    inset: 12% 6% -4%;
    border-radius: 40px;
    background: var(--brand-2);
    filter: blur(60px);
    opacity: .35
}

[data-bs-theme="dark"] .lp-dash-glow {
    opacity: .3
}

.lp-dash {
    position: relative;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 50px 100px -40px rgba(18,18,18,.45),0 0 0 8px color-mix(in srgb,var(--surface) 55%,transparent);
    overflow: hidden;
    text-align: start;
    font-size: .8rem
}

.lp-dash-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2)
}

.lp-dots {
    display: flex;
    gap: 6px
}

.lp-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--line)
}

.lp-dots i:first-child {
    background: var(--coral)
}

.lp-dots i:nth-child(2) {
    background: var(--brand)
}

.lp-dash-url {
    flex: 1;
    max-width: 360px;
    margin-inline:auto;display: flex;
    gap: .4rem;
    align-items: center;
    justify-content: center;
    padding: .3rem .8rem;
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden
}

.lp-dash-team {
    display: flex;
    align-items: center
}

.lp-dash-team img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--surface-2)
}

.lp-dash-team img + img {
    margin-inline-start:-8px}

.lp-dash-team b {
    margin-inline-start:-8px;width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: .65rem;
    border: 2px solid var(--surface-2)
}

.lp-dash-body {
    display: grid;
    grid-template-columns: 190px 1fr
}

.lp-dash-side {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem .8rem;
    border-inline-end:1px solid var(--line)}

.lp-dash-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.03em;
    margin-bottom: 1rem;
    padding-inline:.5rem}

.lp-dash-logo svg {
    width: 24px;
    height: 24px
}

.lp-dash-logo rect {
    fill: var(--ink)
}

.lp-dash-logo path {
    stroke: var(--brand)
}

[data-bs-theme="dark"] .lp-dash-logo rect {
    fill: var(--brand)
}

[data-bs-theme="dark"] .lp-dash-logo path {
    stroke: var(--ink)
}

.lp-nav {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    color: var(--muted);
    font-weight: 500
}

.lp-nav.is-on {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600
}

.lp-nav.is-on .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-nav.is-on .bi {
    color: var(--brand)
}

.lp-nav em {
    margin-inline-start:auto;font-style: normal;
    font-size: .65rem;
    font-weight: 700;
    padding: .05rem .4rem;
    border-radius: 99px;
    background: var(--coral);
    color: var(--ink)
}

.lp-side-card {
    margin-top: auto;
    padding: .8rem;
    border-radius: 14px;
    background: var(--brand-2);
    color: #fff;
    display: grid;
    gap: .15rem
}

.lp-side-card .bi {
    color: var(--brand);
    font-size: 1.1rem
}

.lp-side-card small {
    opacity: .8
}

.lp-dash-main {
    padding: 1.1rem 1.2rem 1.2rem;
    display: grid;
    gap: .9rem;
    min-width: 0
}

.lp-dash-head {
    display: flex;
    align-items: center;
    gap: .8rem
}

.lp-dash-head>div {
    margin-inline-end:auto}

.lp-dash-head small {
    display: block;
    color: var(--muted);
    font-size: .72rem
}

.lp-dash-head b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.03em
}

.lp-dash-range,.lp-dash-share {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 9px;
    border: 1px solid var(--line);
    font-weight: 500;
    white-space: nowrap
}

.lp-dash-share {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

[data-bs-theme="dark"] .lp-dash-share {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

.lp-kpis {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .7rem
}

.lp-kpi {
    position: relative;
    padding: .8rem .9rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: .1rem .5rem
}

.lp-kpi small {
    grid-column: 1 / -1;
    color: var(--muted)
}

.lp-kpi b {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.03em;
    line-height: 1.1
}

.lp-kpi em {
    font-style: normal;
    font-weight: 600;
    font-size: .72rem;
    padding: .1rem .4rem;
    border-radius: 6px
}

.lp-kpi em.up {
    background: color-mix(in srgb,var(--brand) 45%,transparent);
    color: var(--text)
}

.lp-kpi em.down {
    background: color-mix(in srgb,var(--brand-2) 15%,transparent);
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-kpi em.down {
    color: color-mix(in srgb,var(--brand-2) 50%,#fff)
}

.lp-kpi svg {
    grid-column: 1 / -1;
    width: 100%;
    height: 24px;
    margin-top: .3rem
}

.lp-kpi path {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
}

[data-bs-theme="dark"] .lp-kpi path {
    stroke: var(--brand)
}

.lp-dash-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: .7rem
}

.lp-panel {
    position: relative;
    padding: .9rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    min-width: 0
}

.lp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .6rem
}

.lp-legend {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted);
    font-size: .72rem
}

.lp-legend i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    margin-inline-start:.5rem}

.lp-legend .is-rev {
    background: var(--brand-2)
}

.lp-legend .is-spend {
    background: color-mix(in srgb,var(--text) 18%,transparent)
}

.lp-muted {
    color: var(--muted);
    font-size: .72rem
}

.lp-chart {
    width: 100%;
    height: 170px;
    display: block;
    overflow: visible
}

.lp-grid {
    stroke: var(--line);
    stroke-width: 1;
    fill: none;
    vector-effect: non-scaling-stroke
}

.lp-bars rect {
    fill: color-mix(in srgb,var(--text) 12%,transparent)
}

.lp-line {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke
}

.lp-dot {
    fill: var(--surface);
    stroke: var(--brand-2);
    stroke-width: 3;
    vector-effect: non-scaling-stroke
}

[data-bs-theme="dark"] .lp-line,[data-bs-theme="dark"] .lp-dot {
    stroke: color-mix(in srgb,var(--brand-2) 60%,#fff)
}

.lp-tip {
    position: absolute;
    left: 72%;
    top: 2.3rem;
    padding: .35rem .6rem;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    line-height: 1.2;
    transform: translateX(-50%)
}

.lp-tip small {
    display: block;
    font-size: .62rem;
    opacity: .7
}

[data-bs-theme="dark"] .lp-tip {
    background: #fff;
    color: var(--ink)
}

.lp-donut-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: calc(100% - 2rem)
}

.lp-donut {
    flex: none;
    width: 122px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--brand-2) 0 38%,var(--brand) 0 67%,var(--coral) 0 85%,color-mix(in srgb,var(--text) 25%,transparent) 0)
}

.lp-donut>span {
    width: 64%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--surface);
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center
}

.lp-donut b {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: -.03em;
    line-height: 1
}

.lp-donut small {
    font-size: .65rem;
    color: var(--muted)
}

.lp-donut-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .45rem;
    flex: 1;
    min-width: 0
}

.lp-donut-legend li {
    display: flex;
    align-items: center;
    gap: .45rem
}

.lp-donut-legend b {
    margin-inline-start:auto}

.lp-donut-legend i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex: none
}

.lp-donut-legend .c1 {
    background: var(--brand-2)
}

.lp-donut-legend .c2 {
    background: var(--brand)
}

.lp-donut-legend .c3 {
    background: var(--coral)
}

.lp-donut-legend .c4 {
    background: color-mix(in srgb,var(--text) 25%,transparent)
}

.lp-table {
    padding-bottom: .5rem
}

.lp-tr {
    display: grid;
    grid-template-columns: 2.4fr 1fr 1fr 1.3fr;
    gap: .8rem;
    align-items: center;
    padding: .55rem 0;
    border-top: 1px solid var(--line)
}

.lp-th {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-top: 0;
    padding-top: 0
}

.lp-tr>span:first-child {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.lp-tr>span:first-child .bi {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: var(--surface-2)
}

.lp-tr>span:last-child {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600
}

.lp-roas {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(90deg,var(--brand-2) var(--w),var(--surface-2) 0)
}

.lp-dash-ai {
    position: absolute;
    z-index: 2;
    inset-inline-start: -2.5rem;
    top: 50%;
    width: 300px;
    display: flex;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.55);
    text-align: start;
    font-size: .88rem;
    line-height: 1.4
}

.lp-dash-ai small {
    display: block;
    color: #a3a09a;
    font-size: .72rem;
    margin-bottom: .2rem
}

.lp-dash-ai b {
    color: var(--brand)
}

[data-bs-theme="dark"] .lp-dash-ai {
    background: #fff;
    color: var(--ink)
}

[data-bs-theme="dark"] .lp-dash-ai small {
    color: #5d5a54
}

[data-bs-theme="dark"] .lp-dash-ai b {
    color: var(--brand-2)
}

.lp-ai-ic {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.1rem
}

.lp-dash-alert {
    position: absolute;
    z-index: 2;
    inset-inline-end: -2rem;
    top: 18%;
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .8rem 1rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    text-align: start
}

.lp-dash-alert>.bi {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--coral);
    color: var(--ink)
}

.lp-dash-alert b {
    display: block;
    font-size: .9rem
}

.lp-dash-alert small {
    color: var(--muted);
    font-size: .75rem
}

@media (max-width: 1299.98px) {
    .lp-dash-ai {
        inset-inline-start:-1rem
    }

    .lp-dash-alert {
        inset-inline-end: -.5rem
    }
}

@media (max-width: 991.98px) {
    .lp-dash-body {
        grid-template-columns:1fr
    }

    .lp-dash-side {
        display: none
    }

    .lp-kpis {
        grid-template-columns: repeat(2,1fr)
    }

    .lp-dash-ai {
        position: relative;
        inset: auto;
        width: auto;
        max-width: 460px;
        margin: -2rem auto 0 1rem
    }

    .lp-dash-alert {
        top: -1.2rem;
        inset-inline-end: .6rem
    }
}

@media (max-width: 575.98px) {
    .lp-dash-main {
        padding:.8rem
    }

    .lp-dash-url,.lp-dash-range {
        display: none
    }

    .lp-dash-team {
        margin-inline-start:auto}

    .lp-dash-grid {
        grid-template-columns: 1fr
    }

    .lp-tr {
        grid-template-columns: 1.8fr 1fr 1fr
    }

    .lp-tr>:nth-child(2) {
        display: none
    }

    .lp-tr>span:last-child .lp-roas {
        display: none
    }

    .lp-kpi b {
        font-size: 1.1rem
    }

    .lp-chart {
        height: 130px
    }

    .lp-dash-ai {
        margin: -1.5rem .6rem 0
    }

    .lp-dash-alert {
        display: none
    }
}

.lp-integrations {
    border-block:1px solid var(--line);padding-block: 2rem
}

.lp-int-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -.02em
}

.lp-int-label span {
    display: block;
    margin-top: .4rem;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: .88rem;
    letter-spacing: 0;
    color: var(--muted)
}

.lp-int-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: .6rem
}

.lp-int-grid li {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem .8rem;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    transition: transform .2s ease,border-color .2s ease
}

.lp-int-grid li:hover {
    transform: translateY(-2px);
    border-color: var(--text)
}

.lp-int-grid .bi {
    font-size: 1.15rem
}

.lp-int-grid .is-more {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand)
}

@media (max-width: 1199.98px) {
    .lp-int-grid {
        grid-template-columns:repeat(4,1fr)
    }
}

@media (max-width: 575.98px) {
    .lp-int-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

.lp-feat-title {
    font-size: clamp(1.7rem,3vw,2.4rem)
}

.lp-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.lp-tab-content {
    padding: clamp(1.5rem,4vw,3rem);
    border-radius: 32px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.lp-feat-art {
    position: relative;
    padding: 0 0 2rem 2rem
}

.lp-feat-photo {
    aspect-ratio: 16 / 11;
    border-radius: var(--radius)
}

.lp-feat-card {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 220px;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow)
}

.lp-feat-card small {
    display: block;
    color: #a3a09a;
    font-size: .72rem
}

.lp-feat-card b {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1.1;
    color: var(--brand)
}

.lp-feat-card span {
    font-size: .8rem;
    color: #a3a09a
}

.lp-feat-card svg {
    display: block;
    width: 100%;
    height: 30px;
    margin-top: .4rem
}

.lp-feat-card path {
    fill: none;
    stroke: var(--brand);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
}

.lp-ai-doc {
    padding: clamp(1.3rem,3vw,2rem);
    border-radius: var(--radius);
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.lp-ai-doc-head {
    display: flex;
    gap: .8rem;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line)
}

.lp-ai-doc-head>div {
    margin-inline-end:auto}

.lp-ai-doc-head b {
    display: block
}

.lp-ai-doc-head small {
    color: var(--muted)
}

.lp-ai-doc p {
    font-size: 1.02rem;
    line-height: 1.6
}

.lp-ai-doc mark {
    padding: .05rem .25rem;
    border-radius: 4px;
    background: color-mix(in srgb,var(--brand) 55%,transparent);
    color: inherit
}

.lp-ai-doc mark.is-warn {
    background: color-mix(in srgb,var(--coral) 35%,transparent)
}

.lp-ai-src {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.lp-ai-src span {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: .78rem;
    font-weight: 500
}

.lp-portal {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 250px;
    padding: 1rem;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px -24px rgba(18,18,18,.45)
}

.lp-portal-head {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-bottom: .7rem
}

.lp-portal-head b {
    display: block;
    line-height: 1.1
}

.lp-portal-head small {
    color: var(--muted);
    font-size: .72rem
}

.lp-portal-logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--coral);
    color: var(--ink);
    font-size: 1.1rem
}

.lp-portal-row {
    display: flex;
    justify-content: space-between;
    padding: .45rem 0;
    border-top: 1px solid var(--line);
    font-size: .88rem
}

.lp-portal-row span {
    color: var(--muted)
}

.lp-portal-row .is-up {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .lp-portal-row .is-up {
    color: var(--brand)
}

.lp-portal-btn {
    display: flex;
    gap: .4rem;
    align-items: center;
    justify-content: center;
    margin-top: .5rem;
    padding: .5rem;
    border-radius: 10px;
    background: var(--brand);
    color: var(--ink);
    font-weight: 600;
    font-size: .8rem
}

.lp-alerts {
    padding: 1.2rem;
    border-radius: var(--radius);
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: grid;
    gap: .7rem
}

.lp-alerts-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .5rem
}

.lp-alerts-head small {
    margin-inline-start:auto;color: var(--muted)
}

.lp-alert-msg {
    display: flex;
    gap: .9rem;
    padding: 1rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-start:4px solid var(--line)}

.lp-alert-msg b {
    display: block;
    margin-bottom: .15rem
}

.lp-alert-msg p {
    margin: 0 0 .3rem;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.45
}

.lp-alert-msg small {
    font-size: .75rem;
    color: var(--muted)
}

.lp-alert-ic {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center
}

.lp-alert-msg.is-red {
    border-inline-start-color:var(--coral)}

.lp-alert-msg.is-red .lp-alert-ic {
    background: var(--coral);
    color: var(--ink)
}

.lp-alert-msg.is-amber {
    border-inline-start-color:var(--brand-2)}

.lp-alert-msg.is-amber .lp-alert-ic {
    background: var(--brand-2);
    color: #fff
}

.lp-alert-msg.is-green {
    border-inline-start-color:var(--brand)}

.lp-alert-msg.is-green .lp-alert-ic {
    background: var(--brand);
    color: var(--ink)
}

@media (max-width: 575.98px) {
    .lp-feat-art {
        padding:0 0 5rem
    }

    .lp-feat-card,.lp-portal {
        inset-inline-start: .6rem
    }
}

.lp-app-quote {
    margin: 0;
    display: grid;
    grid-template-columns: 360px 1fr;
    border-radius: 36px;
    overflow: hidden;
    background: var(--brand);
    color: var(--ink)
}

.lp-app-quote-photo {
    min-height: 100%
}

.lp-app-quote-body {
    position: relative;
    padding: clamp(2rem,5vw,3.6rem);
    --muted: rgba(18,18,18,.7)
}

.lp-q-mark {
    position: absolute;
    inset-inline-end: 2rem;
    top: 1rem;
    font-size: 6rem;
    line-height: 1;
    opacity: .15
}

.lp-app-quote blockquote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.4rem,2.6vw,2.1rem);
    line-height: 1.25;
    letter-spacing: -.025em;
    margin: 0 0 1.4rem
}

.lp-app-quote figcaption strong {
    display: block
}

.lp-app-quote figcaption span {
    color: var(--muted);
    font-size: .92rem
}

.lp-app-quote-stats {
    list-style: none;
    padding: 1.5rem 0 0;
    margin: 1.8rem 0 0;
    border-top: 1px solid rgba(18,18,18,.18);
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem
}

.lp-app-quote-stats b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.7rem,3vw,2.4rem);
    letter-spacing: -.04em;
    line-height: 1
}

.lp-app-quote-stats span {
    font-size: .85rem;
    color: var(--muted)
}

@media (max-width: 991.98px) {
    .lp-app-quote {
        grid-template-columns:1fr
    }

    .lp-app-quote-photo {
        aspect-ratio: 16 / 10
    }

    .lp-app-quote-photo img {
        object-position: center 30%
    }
}

@media (max-width: 575.98px) {
    .lp-app-quote-stats {
        grid-template-columns:1fr
    }
}

.lp-host {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem
}

.lp-host strong {
    display: block
}

.lp-host small {
    color: var(--muted)
}

.lp-host .avatar {
    border: 0
}

.lp-steps {
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0;
    display: grid;
    gap: 1.1rem
}

.lp-steps li {
    display: flex;
    gap: 1rem;
    align-items: flex-start
}

.lp-steps li>span {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    background: var(--ink);
    color: var(--brand)
}

[data-bs-theme="dark"] .lp-steps li>span {
    background: var(--brand);
    color: var(--ink)
}

.lp-steps b {
    display: block
}

.lp-steps small {
    color: var(--muted)
}

@property --ai-ang {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg
}

.ai-hero {
    padding-bottom: clamp(3.5rem,7vw,6rem)
}

.ai-hero h1 {
    font-size: clamp(2.7rem,5.6vw,5.2rem)
}

.ai-demo {
    margin-top: 1.8rem;
    max-width: 36rem
}

.ai-prompt {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .95rem .95rem .95rem 1rem;
    border-radius: 22px;
    border: 2px solid transparent;
    background: linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--ai-ang),var(--brand),var(--brand-2),var(--coral),var(--brand)) border-box;
    box-shadow: 0 24px 50px -28px color-mix(in srgb,var(--brand-2) 55%,transparent);
    animation: ai-turn 6s linear infinite
}

@keyframes ai-turn {
    to {
        --ai-ang: 360deg
    }
}

.ai-prompt-ico {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: #fff;
    font-size: 1.05rem
}

.ai-prompt-text {
    flex: 1;
    min-width: 0;
    min-height: 4.5em;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    padding-top: .3rem
}

.ai-caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-inline-start:2px;vertical-align: -.18em;
    background: var(--brand-2);
    animation: ai-blink 1s steps(1) infinite
}

[data-bs-theme="dark"] .ai-caret {
    background: var(--brand)
}

@keyframes ai-blink {
    50% {
        opacity: 0
    }
}

.ai-go {
    flex: none;
    align-self: flex-end
}

.ai-try {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-top: .85rem
}

.ai-chip {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .84rem;
    font-weight: 500;
    transition: background-color .2s ease,color .2s ease
}

.ai-chip:hover {
    background: var(--surface-2)
}

.ai-chip[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .ai-chip[aria-pressed="true"] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

.ai-pause {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    display: grid;
    place-items: center;
    margin-inline-start:auto}

.ai-pause:hover {
    background: var(--surface-2)
}

.ai-stage {
    position: relative;
    display: grid;
    max-width: 620px;
    margin-inline:auto}

.ai-stage>* {
    grid-area: 1 / 1
}

.ai-arch {
    justify-self: end;
    width: 62%;
    aspect-ratio: 4 / 4.9;
    border-radius: 300px 300px 28px 28px;
    box-shadow: var(--shadow)
}

.ai-spark {
    position: absolute;
    width: 44px;
    inset-inline-end: 58%;
    top: 3%;
    fill: var(--coral);
    animation: twinkle 3s ease-in-out infinite
}

.ai-studio {
    align-self: start;
    width: 78%;
    margin-top: 32%;
    position: relative;
    z-index: 2;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: .85rem;
    box-shadow: 0 40px 80px -34px rgba(18,18,18,.45);
    font-size: .9rem;
    margin-bottom: 2.2rem
}

[data-bs-theme="dark"] .ai-studio {
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.9)
}

.ai-studio-bar {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .1rem .2rem .75rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: .7rem
}

.ai-dots {
    display: inline-flex;
    gap: 5px
}

.ai-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--surface-2)
}

.ai-dots i:first-child {
    background: var(--coral)
}

.ai-studio-title {
    font-weight: 600;
    font-size: .85rem
}

.ai-studio-title .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .ai-studio-title .bi {
    color: var(--brand)
}

.ai-studio-state {
    margin-inline-start:auto;font-size: .74rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(22,163,74,.12);
    color: #166534;
    white-space: nowrap
}

.ai-studio-state.is-busy {
    background: color-mix(in srgb,var(--brand-2) 12%,transparent);
    color: var(--brand-2)
}

[data-bs-theme="dark"] .ai-studio-state {
    color: #6fdc9c
}

[data-bs-theme="dark"] .ai-studio-state.is-busy {
    color: var(--brand);
    background: color-mix(in srgb,var(--brand) 14%,transparent)
}

.ai-steps {
    list-style: none;
    padding: 0 .2rem;
    margin: 0 0 .75rem;
    display: grid;
    gap: .25rem;
    font-size: .78rem;
    color: var(--muted)
}

.ai-steps li {
    display: flex;
    align-items: center;
    gap: .45rem;
    transition: opacity .3s ease
}

.ai-steps .bi {
    color: #16a34a;
    font-size: .95rem
}

.ai-steps li.is-wait {
    opacity: .35
}

.ai-steps li.is-now .bi::before {
    content: "\F130";
    display: inline-block;
    animation: spin 1s linear infinite
}

.ai-steps li.is-now .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .ai-steps li.is-now .bi {
    color: var(--brand)
}

.ai-set {
    display: none;
    gap: .55rem
}

.ai-set.is-on {
    display: grid
}

.ai-var {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0,1fr);
    gap: .75rem;
    align-items: center;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    transition: opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s ease
}

.ai-var figure {
    width: 60px;
    height: 60px;
    border-radius: 10px
}

.ai-var .ai-head {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: .12rem 0 .2rem
}

.ai-ch {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.ai-score {
    font-size: .76rem;
    color: var(--muted)
}

.ai-score b {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .ai-score b {
    color: var(--brand)
}

.ai-var.is-top {
    border-color: color-mix(in srgb,var(--brand-2) 55%,transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--brand-2) 12%,transparent)
}

[data-bs-theme="dark"] .ai-var.is-top {
    border-color: color-mix(in srgb,var(--brand) 55%,transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)
}

.ai-best {
    position: absolute;
    top: -.6rem;
    inset-inline-end: .7rem;
    background: var(--brand);
    color: var(--ink);
    font-size: .68rem;
    font-weight: 700;
    padding: .12rem .55rem;
    border-radius: 999px
}

.ai-var.is-skel {
    background: linear-gradient(100deg,var(--surface-2) 30%,var(--surface) 50%,var(--surface-2) 70%) 0 0 / 300% 100%;
    animation: ai-shimmer 1.2s linear infinite;
    border-color: transparent;
    box-shadow: none
}

.ai-var.is-skel>* {
    opacity: 0
}

.ai-var>* {
    transition: opacity .4s ease
}

@keyframes ai-shimmer {
    to {
        background-position: -150% 0
    }
}

.ai-approve {
    position: absolute;
    z-index: 3;
    bottom: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .9rem .6rem .6rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: .82rem;
    line-height: 1.2
}

.ai-approve img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

.ai-approve small {
    display: block;
    color: var(--muted);
    font-size: .74rem
}

.ai-approve>.bi {
    color: #16a34a;
    font-size: 1.2rem
}

.ai-vis-chip {
    position: absolute;
    z-index: 3;
    top: 9%;
    inset-inline-start: 0;
    background: var(--brand-2);
    color: #fff;
    border-radius: 20px;
    padding: .8rem 1rem;
    box-shadow: var(--shadow);
    line-height: 1.1
}

.ai-vis-chip small {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase
}

.ai-vis-chip b {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -.04em;
    margin-top: .2rem
}

.ai-vis-chip b span {
    font-size: .5em;
    opacity: .95
}

.ai-vis-chip em {
    font-style: normal;
    font-size: .78rem;
    font-weight: 700;
    color: #fff
}

@media (max-width: 1199.98px) and (min-width:992px) {
    .ai-studio {
        width:86%
    }

    .ai-var .ai-head {
        font-size: .86rem
    }
}

@media (max-width: 575.98px) {
    .ai-prompt {
        flex-wrap:wrap
    }

    .ai-prompt-text {
        flex-basis: calc(100% - 50px);
        min-height: 6em
    }

    .ai-go {
        margin-inline-start:auto}

    .ai-arch {
        width: 66%
    }

    .ai-studio {
        width: 100%;
        margin-top: 64%;
        font-size: .85rem;
        margin-bottom: 2.4rem
    }

    .ai-approve {
        inset-inline-end: .6rem;
        font-size: .76rem;
        padding-inline-end:.7rem}

    .ai-approve img {
        width: 32px;
        height: 32px
    }

    .ai-vis-chip {
        top: 4%;
        padding: .6rem .8rem
    }

    .ai-vis-chip b {
        font-size: 1.6rem
    }

    .ai-spark {
        display: none
    }
}

.ai-vis {
    padding: clamp(1.3rem,3vw,2.2rem)
}

.ai-vis-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

.ai-client {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.02em
}

.ai-client-logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--coral);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 1.1rem
}

.ai-vis-top {
    display: grid;
    grid-template-columns: 150px minmax(0,1fr);
    gap: 1.6rem;
    align-items: center;
    margin-top: 1.6rem
}

.ai-gauge {
    position: relative;
    width: 150px;
    aspect-ratio: 1
}

.ai-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.ai-gauge circle,.ai-gauge path {
    fill: none;
    stroke-width: 11
}

.ai-gauge .g-track {
    stroke: var(--surface-2)
}

.ai-gauge .g-val {
    stroke: var(--brand-2);
    stroke-linecap: round;
    stroke-dasharray: var(--v,0) 100;
    transition: stroke-dasharray 1s cubic-bezier(.2,.7,.2,1)
}

[data-bs-theme="dark"] .ai-gauge .g-val {
    stroke: var(--brand)
}

.ai-gauge-n {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1
}

.ai-gauge-n b {
    font-family: var(--font-display);
    font-size: 2.8rem;
    letter-spacing: -.05em
}

.ai-gauge-n small {
    color: var(--muted);
    font-size: .78rem;
    margin-top: .3rem
}

.ai-vis-stats {
    margin: 0;
    display: grid;
    gap: .7rem
}

.ai-vis-stats div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--line)
}

.ai-vis-stats div:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.ai-vis-stats dt {
    font-weight: 500;
    font-size: .92rem;
    color: var(--muted)
}

.ai-vis-stats dd {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    white-space: nowrap
}

.ai-vis-h {
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.8rem 0 .9rem
}

.ai-vis-bars {
    display: grid;
    gap: .8rem
}

.ai-vbar {
    display: grid;
    grid-template-columns: 9.5rem minmax(0,1fr) 3rem;
    gap: .9rem;
    align-items: center;
    font-size: .9rem;
    font-weight: 500
}

.ai-vbar b {
    text-align: end;
    font-variant-numeric: tabular-nums
}

.ai-vbar-track {
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.ai-vbar-track i {
    display: block;
    height: 100%;
    width: var(--p,0%);
    border-radius: inherit;
    background: var(--brand-2);
    transition: width .9s cubic-bezier(.2,.7,.2,1)
}

.ai-vbar:nth-child(2) i {
    background: var(--coral)
}

.ai-vbar:nth-child(3) i {
    background: color-mix(in srgb,var(--brand-2) 55%,var(--surface))
}

.ai-vbar:nth-child(4) i {
    background: var(--muted)
}

[data-bs-theme="dark"] .ai-vbar:first-child i {
    background: var(--brand)
}

.ai-q {
    list-style: none;
    padding: 0;
    margin: 0
}

.ai-q li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line)
}

.ai-q li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.ai-q-text {
    font-size: .93rem
}

.ai-q-text .bi {
    color: var(--muted);
    margin-inline-end:.55rem}

.ai-q-st {
    font-size: .78rem;
    font-weight: 600;
    padding: .22rem .7rem;
    border-radius: 999px;
    white-space: nowrap
}

.ai-q-st.is-good {
    color: #166534;
    background: rgba(22,163,74,.12)
}

.ai-q-st.is-bad {
    color: #b91c1c;
    background: rgba(220,38,38,.1)
}

.ai-q-st.is-mid {
    color: #a16207;
    background: rgba(245,166,35,.14)
}

[data-bs-theme="dark"] .ai-q-st.is-good {
    color: #6fdc9c
}

[data-bs-theme="dark"] .ai-q-st.is-bad {
    color: #ff8a8a
}

[data-bs-theme="dark"] .ai-q-st.is-mid {
    color: #f7c86b
}

.ai-vis-photo {
    position: relative
}

.ai-vis-photo figure {
    border-radius: 24px;
    aspect-ratio: 16 / 10
}

.ai-vis-tag {
    position: absolute;
    inset-inline-start: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: var(--shadow)
}

.ai-vis-tag span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22,163,74,.2);
    animation: ai-pulse 2s ease-in-out infinite
}

@keyframes ai-pulse {
    50% {
        box-shadow: 0 0 0 8px rgba(22,163,74,0)
    }
}

@media (max-width: 575.98px) {
    .ai-vis-top {
        grid-template-columns:1fr;
        justify-items: center
    }

    .ai-vis-stats {
        width: 100%
    }

    .ai-vbar {
        grid-template-columns: minmax(0,1fr) 3rem;
        gap: .35rem .8rem
    }

    .ai-vbar>span:first-child {
        grid-column: 1 / -1
    }

    .ai-vbar-track {
        grid-column: 1
    }
}

.ai-flow {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1.2rem
}

@media (max-width: 1199.98px) {
    .ai-flow {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media (max-width: 575.98px) {
    .ai-flow {
        grid-template-columns:minmax(0,1fr)
    }
}

.ai-step {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden
}

.ai-step-ph {
    aspect-ratio: 4 / 3
}

.ai-step-ph img {
    transition: transform .6s ease
}

.ai-step:hover .ai-step-ph img {
    transform: scale(1.05)
}

.ai-step-body {
    padding: 1.3rem 1.4rem 1.5rem
}

.ai-step-body h3 {
    font-size: 1.3rem;
    margin-bottom: .5rem
}

.ai-step-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem
}

.ai-step-no {
    font-size: .8rem;
    color: var(--muted);
    font-weight: 500
}

.ai-who {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 999px
}

.ai-who.is-h {
    background: var(--brand);
    color: var(--ink)
}

.ai-who.is-a {
    background: var(--brand-2);
    color: #fff
}

.ai-who.is-m {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .ai-who.is-m {
    background: #fff;
    color: var(--ink)
}

.ai-step.is-ai {
    background: var(--ink);
    color: #f3f1ec;
    border-color: var(--ink);
    --muted: #a3a09a
}

[data-bs-theme="dark"] .ai-step.is-ai {
    background: #050506;
    border-color: var(--line)
}

.ai-term {
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1.2rem 1.3rem;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size: .76rem;
    line-height: 1.35;
    background: radial-gradient(120% 80% at 80% 0%,color-mix(in srgb,var(--brand-2) 55%,transparent),transparent 60%),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0 / 100% 22px;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.ai-term span {
    display: flex;
    gap: .5rem;
    align-items: flex-start
}

.ai-term .bi {
    color: var(--brand)
}

.ai-term .is-run {
    color: var(--brand)
}

.ai-term .is-run .bi {
    display: inline-block;
    animation: spin 1.4s linear infinite
}

.ai-bento {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1.2rem
}

.ai-uc {
    padding: 1.7rem;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease,box-shadow .3s ease
}

.ai-uc:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.ai-uc h3 {
    font-size: 1.3rem
}

.ai-uc-ic {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--surface-2);
    color: var(--brand-2);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin-bottom: 1.3rem
}

[data-bs-theme="dark"] .ai-uc-ic {
    color: var(--brand)
}

.ai-uc-n {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .88rem;
    color: var(--muted)
}

.ai-uc-n b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.03em;
    color: var(--text);
    margin-inline-end:.3rem}

.ai-uc-lg {
    grid-row: span 2;
    background: var(--brand-2);
    color: #fff;
    border-color: var(--brand-2);
    --muted: rgba(255,255,255,.92);
    --line: rgba(255,255,255,.2);
    --text: #fff
}

.ai-uc-lg h3 {
    font-size: clamp(1.6rem,2.4vw,2.1rem)
}

.ai-uc-lg .ai-uc-ic {
    background: var(--brand);
    color: var(--ink)
}

.ai-uc-qs {
    display: grid;
    gap: .55rem;
    margin-block:.6rem 1.6rem}

.ai-uc-qs span {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 14px;
    padding: .6rem .9rem;
    font-size: .9rem
}

.ai-uc-qs span:nth-child(2) {
    margin-inline-start:1.2rem}

.ai-uc-qs span:nth-child(3) {
    margin-inline-start:2.4rem}

.ai-uc-photo {
    grid-row: span 2;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 320px;
    color: #fff;
    isolation: isolate;
    background: var(--surface-2)
}

.ai-uc-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .7s ease
}

.ai-uc-photo:hover img {
    transform: scale(1.05)
}

.ai-uc-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,transparent 40%,rgba(10,10,12,.8))
}

.ai-uc-over {
    position: absolute;
    inset-inline: 1.5rem;
    bottom: 1.4rem
}

.ai-uc-over .tag {
    background: var(--brand);
    color: var(--ink)
}

.ai-uc-over h3 {
    color: #fff;
    margin: .7rem 0 0;
    font-size: 1.5rem
}

.ai-uc-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 64px;
    margin-top: auto
}

.ai-uc-bars i {
    flex: 1;
    height: var(--h);
    border-radius: 6px 6px 2px 2px;
    background: var(--surface-2)
}

.ai-uc-bars i:last-child {
    background: var(--brand-2)
}

[data-bs-theme="dark"] .ai-uc-bars i:last-child {
    background: var(--brand)
}

.ai-bento>:last-child {
    grid-column: span 2
}

@media (max-width: 991.98px) {
    .ai-bento {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .ai-uc-lg {
        grid-column: span 2;
        grid-row: auto
    }

    .ai-uc-photo {
        grid-row: auto
    }
}

@media (max-width: 575.98px) {
    .ai-bento {
        grid-template-columns:minmax(0,1fr)
    }

    .ai-uc-lg,.ai-bento>:last-child {
        grid-column: auto
    }

    .ai-uc-qs span:nth-child(n) {
        margin-inline-start:0}
}

.ai-results {
    overflow: hidden
}

.ai-results::before {
    content: "";
    position: absolute;
    width: 640px;
    height: 640px;
    inset-inline-end: -220px;
    top: -260px;
    border-radius: 50%;
    background: radial-gradient(circle,color-mix(in srgb,var(--brand-2) 50%,transparent),transparent 65%);
    pointer-events: none
}

.ai-ba {
    display: grid;
    gap: 1.7rem;
    padding: clamp(1.4rem,3vw,2.2rem);
    border-radius: var(--radius);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line)
}

.ai-ba-k {
    display: block;
    font-weight: 600;
    margin-bottom: .55rem
}

.ai-ba-bars {
    display: grid;
    gap: .35rem
}

.ai-ba-bars>span {
    position: relative;
    display: block;
    height: 34px;
    border-radius: 10px;
    width: var(--p);
    min-width: 5rem;
    transition: width 1.1s cubic-bezier(.2,.7,.2,1)
}

.ai-ba.reveal:not(.in) .ai-ba-bars>span {
    width: 5rem
}

.ai-ba-bars em {
    position: absolute;
    inset-inline-end: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-weight: 700;
    font-size: .92rem;
    white-space: nowrap
}

.ai-ba-bars .b {
    background: rgba(255,255,255,.14);
    color: #f3f1ec
}

.ai-ba-bars .a {
    background: var(--brand);
    color: var(--ink)
}

.ai-ba-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: .85rem;
    color: var(--muted)
}

.ai-ba-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    margin-inline-end:.45rem;vertical-align: -1px
}

.ai-ba-legend i.b {
    background: rgba(255,255,255,.3)
}

.ai-ba-legend i.a {
    background: var(--brand)
}

.ai-res-quote {
    padding: 1.4rem 1.5rem;
    border-radius: var(--radius);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--line)
}

.ai-res-quote blockquote {
    font-size: 1.1rem;
    line-height: 1.5
}

@media (max-width: 575.98px) {
    .ai-term {
        aspect-ratio:auto;
        min-height: 180px
    }
}

.rp-print-head {
    display: none
}

.rp-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c,var(--brand-2));
    margin-inline-end:.55rem;vertical-align: 1px
}

.rp-sw-a,.rp-sw-b,.rp-sw-prev {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-inline-end:.4rem}

.rp-sw-a {
    background: var(--brand-2)
}

.rp-sw-b {
    background: var(--coral)
}

.rp-sw-prev {
    background: color-mix(in srgb,var(--text) 20%,transparent)
}

[data-bs-theme="dark"] .rp-sw-a {
    background: var(--brand)
}

.rp-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.2rem;
    margin-bottom: 1.6rem
}

.rp-top h1 {
    font-size: clamp(1.9rem,3.4vw,2.7rem);
    margin: 0 0 .5rem
}

.rp-top .eyebrow {
    margin-bottom: .6rem
}

.rp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem
}

.rp-summary {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(220px,300px);
    background: var(--brand-2);
    color: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    isolation: isolate
}

.rp-summary::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    inset-inline-start: -140px;
    bottom: -220px;
    border-radius: 50%;
    border: 60px solid rgba(255,255,255,.07);
    z-index: -1
}

.rp-summary-txt {
    padding: clamp(1.4rem,3vw,2.2rem)
}

.rp-kicker {
    display: block;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .8rem
}

.rp-summary .rp-kicker {
    color: #fff
}

.rp-summary h2 {
    color: #fff;
    font-size: clamp(1.6rem,2.6vw,2.25rem);
    margin-bottom: .8rem
}

.rp-summary p {
    color: rgba(255,255,255,.95);
    max-width: 40rem
}

.rp-hl {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.rp-hl li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
    font-size: .86rem;
    font-weight: 600
}

.rp-hl .bi {
    color: var(--brand)
}

.rp-summary-ph {
    position: relative;
    min-height: 240px
}

.rp-summary-ph img {
    position: absolute;
    inset: 0
}

.rp-summary-ph figcaption {
    position: absolute;
    inset-inline: .8rem;
    bottom: .8rem;
    padding: .7rem .9rem;
    border-radius: 14px;
    background: rgba(12,12,14,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: .8rem;
    line-height: 1.3
}

.rp-summary-ph figcaption b {
    display: block;
    font-size: .9rem
}

.rp-summary-ph figcaption span {
    opacity: .85
}

@media (max-width: 767.98px) {
    .rp-summary {
        grid-template-columns:minmax(0,1fr)
    }

    .rp-summary-ph {
        min-height: 220px
    }
}

.rp-kpi {
    display: flex;
    flex-direction: column
}

.rp-spark-w {
    margin-top: auto;
    padding-top: .8rem;
    position: relative
}

.rp-spark {
    display: block;
    width: 100%;
    height: 34px;
    overflow: visible
}

.rp-spark-a {
    fill: color-mix(in srgb,var(--brand-2) 14%,transparent)
}

.rp-spark-l {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round
}

[data-bs-theme="dark"] .rp-spark-a {
    fill: color-mix(in srgb,var(--brand) 14%,transparent)
}

[data-bs-theme="dark"] .rp-spark-l {
    stroke: var(--brand)
}

.rp-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible
}

.rp-svg .lbl {
    font-size: 11px;
    fill: var(--muted)
}

.rp-line-wrap {
    position: relative
}

.rp-line-wrap .rp-svg {
    touch-action: pan-y
}

.rp-line-b {
    fill: none;
    stroke: var(--coral);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.rp-guide {
    stroke: var(--muted);
    stroke-dasharray: 3 4
}

.rp-dot-b {
    fill: var(--coral);
    stroke: var(--surface);
    stroke-width: 3
}

[data-bs-theme="dark"] .chart-card .area {
    fill: color-mix(in srgb,var(--brand) 14%,transparent)
}

.rp-tip {
    position: absolute;
    top: -.4rem;
    transform: translateX(-50%);
    display: grid;
    gap: .1rem;
    padding: .5rem .75rem;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    font-size: .78rem;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow)
}

[data-bs-theme="dark"] .rp-tip {
    background: #fff;
    color: var(--ink)
}

.rp-tip i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-inline-end:.4rem}

.rp-tip[hidden] {
    display: none
}

.rp-bar-prev {
    fill: color-mix(in srgb,var(--text) 18%,transparent)
}

.rp-bar-cur {
    fill: var(--brand-2)
}

[data-bs-theme="dark"] .rp-bar-cur {
    fill: var(--brand)
}

.rp-bar-v {
    font-size: 10.5px;
    font-weight: 600;
    fill: var(--text)
}

.rp-table {
    min-width: 760px
}

.rp-table tfoot th,.rp-table tfoot td {
    font-weight: 700;
    padding: .9rem 1rem;
    border-top: 2px solid var(--line);
    text-align: start
}

.rp-table tfoot td.num {
    text-align: end
}

.rp-table .acc-delta {
    margin-top: 0
}

.rp-camps {
    list-style: none;
    padding: 0;
    margin: 0
}

.rp-camps li {
    display: grid;
    grid-template-columns: 52px minmax(0,1fr) auto;
    gap: .35rem 1rem;
    align-items: center;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line)
}

.rp-camps li:first-child {
    padding-top: 0
}

.rp-camps li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.rp-camps figure {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    grid-row: span 2
}

.rp-camp-txt strong {
    display: block;
    font-size: .97rem
}

.rp-camp-txt small,.rp-camp-n small {
    color: var(--muted);
    font-size: .8rem
}

.rp-camp-n {
    text-align: end
}

.rp-camp-n b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums
}

.rp-camp-bar {
    grid-column: 2 / -1;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.rp-camp-bar i {
    display: block;
    height: 100%;
    width: var(--p);
    border-radius: inherit;
    background: var(--brand-2)
}

[data-bs-theme="dark"] .rp-camp-bar i {
    background: var(--brand)
}

.rp-goals {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.25rem
}

.rp-goal-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-weight: 600;
    font-size: .94rem
}

.rp-goal-head b {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: -.02em;
    white-space: nowrap
}

.rp-goal-track {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    margin: .45rem 0 .4rem
}

.rp-goal-track i {
    display: block;
    height: 100%;
    width: var(--p);
    border-radius: inherit;
    background: var(--coral)
}

.rp-goals .is-done .rp-goal-track i {
    background: #22a356
}

.rp-goals small {
    color: var(--muted);
    font-size: .82rem
}

.rp-goals small .bi {
    color: #f5a623
}

.rp-goals .is-done small .bi {
    color: #22a356
}

.rp-next {
    list-style: none;
    padding: 0;
    margin: 0
}

.rp-next li {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line)
}

.rp-next li:first-child {
    padding-top: 0
}

.rp-next li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.rp-next-no {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .85rem
}

.rp-next strong {
    display: block;
    font-size: .97rem;
    line-height: 1.35
}

.rp-next small {
    color: var(--muted);
    font-size: .82rem
}

.rp-note {
    height: 100%;
    padding: clamp(1.4rem,3vw,2rem);
    border-radius: var(--radius);
    background: var(--ink);
    color: #f3f1ec;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden
}

[data-bs-theme="dark"] .rp-note {
    background: #050506;
    border: 1px solid var(--line)
}

.rp-note::after {
    content: "\201C";
    position: absolute;
    inset-inline-end: 1.2rem;
    top: -.6rem;
    font-family: var(--font-display);
    font-size: 9rem;
    line-height: 1;
    color: var(--brand);
    opacity: .9
}

.rp-note-ph {
    display: block
}

.rp-note img {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--brand)
}

.rp-note blockquote {
    font-size: 1.08rem;
    line-height: 1.55;
    margin: 1.1rem 0 1.2rem
}

.rp-note figcaption {
    margin-top: auto
}

.rp-note figcaption b {
    display: block
}

.rp-note figcaption span {
    color: #a3a09a;
    font-size: .88rem
}

.rp-doc {
    padding-bottom: clamp(2.5rem,6vw,4.5rem)
}

.rp-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding-block:.7rem;background: color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line)
}

.rp-bar-in {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .8rem
}

.rp-bar-title {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0
}

.rp-bar-title b {
    display: block;
    font-size: .95rem
}

.rp-bar-title small {
    display: block;
    color: var(--muted);
    font-size: .8rem
}

.rp-bar-ico {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    background: var(--brand-2);
    color: #fff;
    display: grid;
    place-items: center
}

.rp-doc-in {
    max-width: 1000px;
    padding-top: clamp(1.4rem,3vw,2.4rem);
    display: grid;
    gap: clamp(1.4rem,3vw,2.2rem)
}

.rp-sheet {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: clamp(1.4rem,5vw,3.4rem);
    overflow: hidden
}

.rp-sheet-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.6rem
}

.rp-sheet-head>span {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .9rem
}

.rp-sheet-head h2 {
    font-size: clamp(1.6rem,3vw,2.3rem);
    margin: 0
}

.rp-intro {
    max-width: 44rem;
    margin-bottom: 1.6rem
}

.rp-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -.04em;
    color: var(--text)
}

.rp-label {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .5rem
}

.rp-print-only {
    display: none
}

.rp-cover {
    padding: 0
}

.rp-cover-ph {
    aspect-ratio: 16 / 8.2;
    position: relative
}

.rp-cover-ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(10,10,12,.35),transparent 40%)
}

.rp-cover-top {
    position: absolute;
    top: clamp(1rem,3vw,1.6rem);
    inset-inline: clamp(1rem,3vw,1.6rem);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .6rem
}

.rp-cover-top .rp-logo {
    background: rgba(255,255,255,.94);
    color: var(--ink);
    padding: .35rem 1rem .35rem .35rem;
    border-radius: 999px;
    font-size: 1.2rem
}

.rp-cover-top .brand-mark .bm-bg {
    fill: var(--ink)
}

.rp-cover-top .brand-mark .bm-wave {
    stroke: var(--brand)
}

.rp-cover-ref {
    background: rgba(12,12,14,.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .82rem;
    font-weight: 600
}

.rp-cover-body {
    padding: clamp(1.4rem,5vw,3.4rem)
}

.rp-cover-body .rp-kicker {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .rp-cover-body .rp-kicker {
    color: var(--brand)
}

.rp-cover h1 {
    font-size: clamp(2.4rem,6vw,4.4rem);
    margin-bottom: 1.1rem;
    max-width: 14ch
}

.rp-cover-lead {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 38rem
}

.rp-cover-meta {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1.4rem;
    margin: 2rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line)
}

.rp-cover-meta dt {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .35rem
}

.rp-cover-meta dd {
    margin: 0;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.45
}

@media (max-width: 575.98px) {
    .rp-cover-meta {
        grid-template-columns:minmax(0,1fr);
        gap: 1rem
    }

    .rp-cover-ph {
        aspect-ratio: 4 / 3
    }
}

.rp-letter {
    font-size: 1.12rem;
    line-height: 1.65
}

.rp-facts {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: grid;
    gap: .9rem
}

.rp-facts li {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line)
}

.rp-facts li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.rp-facts b {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -.03em;
    min-width: 6.5rem;
    white-space: nowrap
}

.rp-facts span {
    color: var(--muted);
    font-size: .95rem
}

.rp-goal-ph {
    border-radius: 200px 200px 22px 22px;
    aspect-ratio: 4 / 4.7
}

.rp-sub {
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 2.4rem 0 1rem
}

.rp-goal-cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1rem
}

.rp-gc {
    border-radius: 18px;
    padding: 1.3rem;
    background: var(--surface-2)
}

.rp-gc .bi {
    font-size: 1.3rem;
    color: var(--brand-2)
}

.rp-gc b {
    display: block;
    font-family: var(--font-display);
    font-size: 2.3rem;
    letter-spacing: -.04em;
    line-height: 1;
    margin: .8rem 0 .4rem
}

.rp-gc span {
    color: var(--muted);
    font-size: .9rem
}

.rp-gc:first-child {
    background: var(--brand-2);
    color: #fff
}

.rp-gc:first-child .bi {
    color: var(--brand)
}

.rp-gc:first-child span {
    color: rgba(255,255,255,.95)
}

[data-bs-theme="dark"] .rp-gc:not(:first-child) .bi {
    color: var(--brand)
}

@media (max-width: 767.98px) {
    .rp-goal-cards {
        grid-template-columns:minmax(0,1fr)
    }

    .rp-goal-ph {
        max-width: 320px
    }
}

.rp-channels {
    border-top: 1px solid var(--line)
}

.rp-ch {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) 120px 140px;
    gap: 1rem 1.3rem;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--line)
}

.rp-ch-ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--brand-2);
    display: grid;
    place-items: center;
    font-size: 1.2rem
}

[data-bs-theme="dark"] .rp-ch-ic {
    color: var(--brand)
}

.rp-ch h3 {
    font-size: 1.12rem;
    margin-bottom: .3rem
}

.rp-ch p {
    color: var(--muted);
    font-size: .92rem;
    margin: 0
}

.rp-ch-kpi small,.rp-ch-share small {
    display: block;
    color: var(--muted);
    font-size: .76rem
}

.rp-ch-kpi b {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: -.02em
}

.rp-ch-share span {
    display: block;
    height: 8px;
    border-radius: 999px;
    margin-bottom: .4rem;
    background: linear-gradient(90deg,var(--brand-2) var(--p),var(--surface-2) var(--p))
}

[data-bs-theme="dark"] .rp-ch-share span {
    background: linear-gradient(90deg,var(--brand) var(--p),var(--surface-2) var(--p))
}

[dir="rtl"] .rp-ch-share span {
    background: linear-gradient(270deg,var(--brand-2) var(--p),var(--surface-2) var(--p))
}

@media (max-width: 767.98px) {
    .rp-ch {
        grid-template-columns:48px minmax(0,1fr) minmax(0,1fr);
        align-items: start
    }

    .rp-ch-txt {
        grid-column: 2 / -1
    }

    .rp-ch-kpi {
        grid-column: 2
    }
}

.rp-gantt {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .3rem
}

.rp-g-row {
    display: grid;
    grid-template-columns: 180px minmax(0,1fr);
    align-items: center;
    gap: 1rem;
    min-width: 600px;
    padding-block:.35rem}

.rp-g-row>span:first-child {
    font-weight: 600;
    font-size: .9rem
}

.rp-g-months {
    grid-template-columns: 180px repeat(6,minmax(0,1fr));
    gap: 0 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: .5rem
}

.rp-g-months span {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-inline-start:-1rem}

.rp-g-months span:first-child {
    text-align: start;
    margin-inline-start:0}

.rp-g-track {
    position: relative;
    height: 36px;
    background: linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0 / calc(100% / 6) 100%;
    border-inline-end:1px solid var(--line)}

.rp-g-track i {
    position: absolute;
    top: 5px;
    bottom: 5px;
    inset-inline-start: calc(var(--s) / 6 * 100%);
    width: calc((var(--e) - var(--s)) / 6 * 100%);
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding-inline:.75rem;font-style: normal;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.rp-g-track .c1 {
    background: var(--brand);
    color: var(--ink)
}

.rp-g-track .c2 {
    background: var(--brand-2);
    color: #fff
}

.rp-g-track .c3 {
    background: var(--coral);
    color: var(--ink)
}

.rp-g-track .c4 {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .rp-g-track .c4 {
    background: #fff;
    color: var(--ink)
}

.rp-g-ms .rp-g-track {
    height: 48px
}

.rp-g-track b {
    position: absolute;
    top: 4px;
    inset-inline-start: calc(var(--s) / 6 * 100%);
    width: 7rem;
    margin-inline-start:-3.5rem;text-align: center;
    font-size: .72rem;
    font-weight: 600;
    padding-top: 20px
}

.rp-g-track b::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 13px;
    height: 13px;
    margin-left: -6.5px;
    background: var(--coral);
    transform: rotate(45deg);
    border-radius: 3px
}

.rp-g-track b:last-child {
    margin-inline-start:-7rem;text-align: end
}

.rp-g-track b:last-child::before {
    left: auto;
    right: -6.5px;
    margin-left: 0
}

.rp-team {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1rem
}

.rp-team .ph {
    aspect-ratio: 4 / 4.6;
    border-radius: 18px
}

.rp-team figcaption b {
    display: block;
    margin-top: .7rem
}

.rp-team figcaption span {
    color: var(--muted);
    font-size: .86rem
}

@media (max-width: 767.98px) {
    .rp-team {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

.rp-options {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1rem
}

.rp-opt {
    position: relative;
    cursor: pointer;
    display: block
}

.rp-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px
}

.rp-opt-in {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    padding: 1.3rem;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    transition: border-color .2s ease,box-shadow .2s ease,background-color .2s ease
}

.rp-opt-in::after {
    content: "";
    position: absolute;
    top: 1.2rem;
    inset-inline-end: 1.2rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--surface)
}

.rp-opt:hover .rp-opt-in {
    border-color: color-mix(in srgb,var(--brand-2) 45%,var(--line))
}

.rp-opt input:checked + .rp-opt-in {
    border-color: var(--brand-2);
    background: color-mix(in srgb,var(--brand-2) 6%,var(--surface));
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 14%,transparent)
}

.rp-opt input:checked + .rp-opt-in::after {
    border-color: var(--brand-2);
    background: var(--brand-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M12.7 4.3a1 1 0 0 1 0 1.4l-5.5 5.5a1 1 0 0 1-1.4 0L3.3 8.7a1 1 0 1 1 1.4-1.4l1.8 1.8 4.8-4.8a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / 14px no-repeat
}

.rp-opt input:focus-visible + .rp-opt-in {
    outline: 3px solid var(--brand-2);
    outline-offset: 3px
}

.rp-opt-tag {
    align-self: flex-start;
    background: var(--brand);
    color: var(--ink);
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .6rem;
    border-radius: 999px;
    margin-bottom: .2rem
}

.rp-opt-name {
    font-weight: 700;
    font-size: 1.1rem
}

.rp-opt-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.rp-opt-price small {
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    margin-inline-start:.25rem}

.rp-opt-desc {
    color: var(--muted);
    font-size: .88rem
}

@media (max-width: 767.98px) {
    .rp-options {
        grid-template-columns:minmax(0,1fr)
    }
}

.rp-inv-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 1.4rem
}

.rp-inv-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .92rem
}

.rp-inv-table th,.rp-inv-table td {
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--line);
    text-align: center
}

.rp-inv-table thead th {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.rp-inv-table th[scope="row"] {
    text-align: start;
    font-weight: 500
}

.rp-inv-table .is-sel {
    background: color-mix(in srgb,var(--brand-2) 7%,transparent);
    font-weight: 600
}

.rp-inv-table thead .is-sel {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .rp-inv-table thead .is-sel {
    color: var(--brand)
}

.rp-inv-table .bi-check-lg {
    color: #22a356;
    font-size: 1.1rem
}

.rp-inv-table .bi-dash {
    color: var(--muted)
}

.rp-total {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1rem;
    margin-top: 1.4rem;
    padding: 1.2rem 1.4rem;
    border-radius: 18px;
    background: var(--ink);
    color: #f3f1ec
}

[data-bs-theme="dark"] .rp-total {
    background: #050506;
    border: 1px solid var(--line)
}

.rp-total small {
    display: block;
    color: #a3a09a;
    font-size: .78rem
}

.rp-total b {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.02em
}

.rp-total-sum b {
    color: var(--brand);
    font-size: 1.6rem
}

@media (max-width: 575.98px) {
    .rp-total {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

.rp-terms {
    padding-inline-start:1.2rem;margin: 0;
    display: grid;
    gap: .6rem;
    color: var(--muted)
}

.rp-terms b {
    color: var(--text)
}

.rp-sig {
    min-height: 92px;
    border: 1.5px dashed var(--line);
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: .5rem 1.4rem;
    background: var(--paper)
}

.rp-sig span {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.8rem,4vw,2.4rem);
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.rp-sig.is-empty span {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: .95rem;
    color: var(--muted);
    letter-spacing: 0
}

.rp-sign-msg {
    font-weight: 600;
    font-size: .92rem;
    color: #166534
}

.rp-sign-msg.is-err {
    color: #b91c1c
}

[data-bs-theme="dark"] .rp-sign-msg {
    color: #6fdc9c
}

[data-bs-theme="dark"] .rp-sign-msg.is-err {
    color: #ff8a8a
}

.rp-sign-lines {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 2rem;
    margin-top: 2.6rem
}

.rp-line {
    display: flex;
    align-items: flex-end;
    height: 56px;
    border-bottom: 1.5px solid var(--text);
    padding-bottom: .2rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.8rem;
    letter-spacing: -.02em
}

.rp-sign-lines small {
    display: block;
    margin-top: .45rem;
    color: var(--muted);
    font-size: .8rem
}

@media (max-width: 575.98px) {
    .rp-sign-lines {
        grid-template-columns:minmax(0,1fr)
    }
}

.rp-foot-note {
    margin: 2.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .8rem;
    color: var(--muted)
}

.rp-invoice::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: linear-gradient(90deg,var(--brand),var(--brand-2))
}

.rp-inv-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--line)
}

.rp-addr {
    font-style: normal;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--muted)
}

.rp-addr b {
    color: var(--text)
}

.rp-inv-title {
    text-align: end
}

.rp-inv-title h1 {
    font-size: clamp(2.6rem,6vw,4rem);
    margin: 0 0 .7rem
}

.rp-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: 999px;
    border: 1px solid
}

.rp-status.is-open {
    color: #a16207;
    background: rgba(245,166,35,.12);
    border-color: rgba(245,166,35,.35)
}

.rp-status.is-paid {
    color: #166534;
    background: rgba(22,163,74,.1);
    border-color: rgba(22,163,74,.3)
}

[data-bs-theme="dark"] .rp-status.is-open {
    color: #f7c86b
}

[data-bs-theme="dark"] .rp-status.is-paid {
    color: #6fdc9c
}

.rp-inv-meta {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,330px);
    gap: 2rem;
    margin-block:1.8rem;align-items: start
}

.rp-inv-dl {
    margin: 0;
    display: grid;
    gap: .4rem;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    background: var(--surface-2)
}

.rp-inv-dl div {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem
}

.rp-inv-dl dt {
    color: var(--muted);
    font-weight: 400;
    font-size: .88rem
}

.rp-inv-dl dd {
    margin: 0;
    font-weight: 600;
    font-size: .92rem;
    text-align: end
}

@media (max-width: 767.98px) {
    .rp-inv-meta {
        grid-template-columns:minmax(0,1fr);
        gap: 1.2rem
    }

    .rp-inv-title {
        text-align: start
    }
}

.rp-items-wrap {
    overflow-x: auto;
    overflow-y: hidden
}

.rp-items {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .95rem
}

.rp-items thead th {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .7rem .8rem;
    border-bottom: 2px solid var(--text);
    text-align: start
}

.rp-items tbody th,.rp-items tbody td {
    padding: 1rem .8rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-align: start
}

.rp-items tbody th {
    font-weight: 400
}

.rp-items tbody th b {
    display: block;
    font-weight: 600
}

.rp-items tbody th small {
    color: var(--muted);
    font-size: .85rem
}

.rp-items .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.rp-items thead th.num {
    text-align: end
}

.rp-inv-bottom {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,330px);
    gap: 2rem;
    margin-top: 1.6rem;
    align-items: start
}

.rp-inv-notes p {
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 1.2rem
}

.rp-sums {
    margin: 0
}

.rp-sums div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0
}

.rp-sums dt {
    font-weight: 400;
    color: var(--muted)
}

.rp-sums dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.rp-sums .rp-sum-total {
    margin-top: .6rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: var(--brand);
    color: var(--ink);
    align-items: baseline
}

.rp-sums .rp-sum-total dt {
    color: var(--ink);
    font-weight: 600
}

.rp-sums .rp-sum-total dd {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.03em
}

@media (max-width: 767.98px) {
    .rp-inv-bottom {
        grid-template-columns:minmax(0,1fr)
    }
}

.rp-pay {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
    gap: 1.6rem;
    margin-top: 2rem;
    padding: 1.4rem;
    border: 1.5px dashed var(--line);
    border-radius: 18px
}

.rp-pay-dl {
    margin: 0;
    display: grid;
    gap: .3rem
}

.rp-pay-dl div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0,1fr);
    gap: .8rem;
    align-items: center
}

.rp-pay-dl dt {
    font-weight: 400;
    color: var(--muted);
    font-size: .86rem
}

.rp-pay-dl dd {
    margin: 0;
    font-weight: 600;
    font-size: .92rem;
    font-variant-numeric: tabular-nums
}

.rp-pay-card p {
    color: var(--muted);
    font-size: .9rem
}

.rp-copy {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    display: inline-grid;
    place-items: center;
    font-size: .8rem;
    vertical-align: middle;
    margin-inline-start:.3rem}

.rp-copy:hover {
    background: var(--brand);
    color: var(--ink)
}

.rp-copy-msg {
    color: #166534;
    font-weight: 600;
    margin-top: .6rem;
    min-height: 1.2em
}

[data-bs-theme="dark"] .rp-copy-msg {
    color: #6fdc9c
}

@media (max-width: 767.98px) {
    .rp-pay {
        grid-template-columns:minmax(0,1fr)
    }
}

@media (max-width: 400px) {
    .rp-pay-dl div {
        grid-template-columns:minmax(0,1fr);
        gap: 0
    }
}

.rp-inv-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .8rem;
    color: var(--muted)
}

@page rpA4 {
    size: A4;
    margin: 12mm 12mm 14mm
}

@media print {
    .rp-print {
        page: rpA4
    }

    html:has(.rp-print),html[data-bs-theme="dark"]:has(.rp-print) {
        --paper: #fff;
        --surface: #fff;
        --surface-2: #f1eee7;
        --text: #121212;
        --muted: #5d5a54;
        --line: rgba(18,18,18,.14);
        --shadow: none;
        --bs-body-bg: #fff;
        --bs-body-color: #121212;
        color-scheme: light
    }

    html:has(.rp-print) body {
        background: #fff !important;
        color: #121212;
        font-size: 10.5pt
    }

    html:has(.rp-print) .rp-print,html:has(.rp-print) .rp-print * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }

    html:has(.rp-print) .site-header,html:has(.rp-print) .bare-footer,html:has(.rp-print) .to-top,html:has(.rp-print) .skin-panel,html:has(.rp-print) .cookie-bar,html:has(.rp-print) .chat-float,.rp-noprint,.rp-tip {
        display: none !important
    }

    html:has(.rp-print) .bare-main {
        min-height: 0;
        display: block
    }

    .rp-print-only {
        display: block
    }

    .rp-print a {
        text-decoration: none
    }

    html[data-bs-theme="dark"] .rp-print .ph {
        background: linear-gradient(135deg,#d9d2c3,#ebe6da)
    }

    html[data-bs-theme="dark"] .rp-print .brand-mark .bm-bg {
        fill: var(--ink)
    }

    html[data-bs-theme="dark"] .rp-print .brand-mark .bm-wave {
        stroke: var(--brand)
    }

    html[data-bs-theme="dark"] .rp-print .acc-delta.up {
        color: #166534
    }

    html[data-bs-theme="dark"] .rp-print .acc-delta.down {
        color: #b91c1c
    }

    html[data-bs-theme="dark"] .rp-print .acc-kpi .acc-kpi-top .bi,html[data-bs-theme="dark"] .rp-print .rp-ch-ic,html[data-bs-theme="dark"] .rp-print .rp-gc:not(:first-child) .bi,html[data-bs-theme="dark"] .rp-print .rp-inv-table thead .is-sel,html[data-bs-theme="dark"] .rp-print .rp-cover-body .rp-kicker {
        color: var(--brand-2)
    }

    html[data-bs-theme="dark"] .rp-print .chart-card .line,html[data-bs-theme="dark"] .rp-print .rp-spark-l {
        stroke: var(--brand-2)
    }

    html[data-bs-theme="dark"] .rp-print .chart-card .area,html[data-bs-theme="dark"] .rp-print .rp-spark-a {
        fill: color-mix(in srgb,var(--brand-2) 16%,transparent)
    }

    html[data-bs-theme="dark"] .rp-print .acc-chart-svg .acc-dot,html[data-bs-theme="dark"] .rp-print .rp-bar-cur {
        fill: var(--brand-2)
    }

    html[data-bs-theme="dark"] .rp-print .rp-sw-a,html[data-bs-theme="dark"] .rp-print .rp-camp-bar i {
        background: var(--brand-2)
    }

    html[data-bs-theme="dark"] .rp-print .rp-ch-share span {
        background: linear-gradient(90deg,var(--brand-2) var(--p),var(--surface-2) var(--p))
    }

    html[data-bs-theme="dark"] .rp-print .rp-g-track .c4 {
        background: var(--ink);
        color: #fff
    }

    html[data-bs-theme="dark"] .rp-print .rp-total,html[data-bs-theme="dark"] .rp-print .rp-note {
        background: var(--ink);
        border: 0
    }

    html[data-bs-theme="dark"] .rp-print .rp-status.is-open {
        color: #a16207
    }

    html[data-bs-theme="dark"] .rp-print .rp-status.is-paid,html[data-bs-theme="dark"] .rp-print .rp-sign-msg {
        color: #166534
    }

    .rp-report {
        padding: 0
    }

    .rp-report>.container-fluid {
        padding: 0 !important
    }

    .rp-report .acc-dash-grid {
        display: block
    }

    .rp-print-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding-bottom: .6rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--line);
        font-size: 8.5pt;
        color: var(--muted)
    }

    .rp-print-head .rp-logo {
        font-size: 1.1rem
    }

    .rp-print-head .brand-mark {
        width: 26px;
        height: 26px
    }

    .rp-top {
        margin-bottom: 1rem
    }

    .rp-top h1 {
        font-size: 22pt
    }

    .rp-summary {
        grid-template-columns: minmax(0,1fr) 170px
    }

    .rp-summary-ph {
        min-height: 0
    }

    .rp-summary h2 {
        font-size: 16pt
    }

    .rp-report .card-soft,.rp-summary,.rp-note {
        box-shadow: none;
        break-inside: avoid
    }

    .rp-report .acc-panel {
        padding: 1rem 1.1rem
    }

    .rp-avoid {
        break-inside: avoid
    }

    .rp-report .acc-table-wrap,.rp-items-wrap,.rp-inv-wrap,.rp-gantt {
        overflow: visible
    }

    .rp-table,.rp-items,.rp-inv-table {
        min-width: 0;
        font-size: 8.5pt
    }

    .rp-table th,.rp-table td {
        padding: .45rem .5rem
    }

    .rp-report .acc-kpi .acc-v {
        font-size: 18pt
    }

    .rp-sources {
        break-before: avoid
    }

    .rp-doc {
        padding: 0
    }

    .rp-doc-in {
        max-width: none;
        padding: 0;
        display: block
    }

    .rp-sheet {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        overflow: visible;
        break-after: page
    }

    .rp-sheet:last-child {
        break-after: auto
    }

    .rp-cover {
        min-height: 268mm;
        display: flex;
        flex-direction: column
    }

    .rp-cover-ph {
        aspect-ratio: auto;
        height: 140mm;
        border-radius: 16px;
        overflow: hidden
    }

    .rp-cover-top {
        top: 1.2rem;
        inset-inline: 1.2rem
    }

    .rp-cover-body {
        padding: 10mm 2mm 0;
        flex: 1;
        display: flex;
        flex-direction: column
    }

    .rp-cover h1 {
        font-size: 34pt
    }

    .rp-cover-meta {
        margin-top: auto
    }

    .rp-sheet-head h2 {
        font-size: 20pt
    }

    .rp-goal-ph {
        max-height: 95mm
    }

    .rp-ch,.rp-g-row,.rp-opt,.rp-total,.rp-team figure,.rp-gc,.rp-sign-lines,.rp-pay,.rp-inv-bottom {
        break-inside: avoid
    }

    .rp-g-row {
        min-width: 0;
        grid-template-columns: 140px minmax(0,1fr)
    }

    .rp-g-months {
        grid-template-columns: 140px repeat(6,minmax(0,1fr))
    }

    .rp-options {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .rp-opt-in {
        padding: .9rem
    }

    .rp-opt-price {
        font-size: 17pt
    }

    .rp-team {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .rp-team .ph {
        aspect-ratio: 1
    }

    .rp-accept .rp-sign-lines {
        margin-top: 3rem
    }

    .rp-invoice {
        padding-top: 6mm
    }

    .rp-invoice::before {
        height: 5px
    }

    .rp-inv-meta {
        grid-template-columns: minmax(0,1fr) 300px
    }

    .rp-inv-bottom {
        grid-template-columns: minmax(0,1fr) 290px
    }

    .rp-pay {
        grid-template-columns: minmax(0,1.3fr) minmax(0,1fr)
    }

    .rp-inv-title {
        text-align: end
    }
}

@media print {
    .rp-print .row {
        display: grid;
        grid-template-columns: minmax(0,7fr) minmax(0,5fr);
        gap: 12px;
        margin-inline:0;margin-top: 0
    }

    .rp-print .row>* {
        width: auto;
        max-width: none;
        padding: 0;
        margin-top: 0
    }

    .rp-print .row.rp-kpis {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .rp-print .row.rp-row-charts {
        grid-template-columns: minmax(0,1.7fr) minmax(0,1fr)
    }

    .rp-goal-cards {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .rp-ch {
        grid-template-columns: 40px minmax(0,1fr) 100px 110px;
        align-items: center;
        gap: .6rem 1rem;
        padding: .8rem 0
    }

    .rp-ch-txt,.rp-ch-kpi {
        grid-column: auto
    }

    .rp-ch-ic {
        width: 40px;
        height: 40px
    }

    .rp-cover-meta {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .rp-sign-lines {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .rp-inv-title {
        text-align: end
    }

    .rp-report .acc-kpi {
        padding: .9rem
    }

    .rp-report .acc-kpi .acc-since {
        display: block;
        margin: .3rem 0 0
    }
}

@media print {
    .rp-print .acc-panel,.rp-print .acc-kpi,.rp-print .rp-note,.rp-print .card-soft {
        height: auto
    }
}

@media print {
    .rp-print .row {
        break-inside: avoid;
        align-items: start
    }

    .rp-print .row>* {
        break-inside: avoid
    }
}

@media print {
    .rp-report .rp-main {
        zoom:.8}

    .rp-report .rp-table-card {
        break-before: page
    }

    .rp-report .rp-avoid,.rp-report .card-soft,.rp-note {
        break-inside: avoid
    }
}

@media print {
    .rp-table tfoot {
        display: table-row-group
    }
}

@media print {
    .rp-invoice {
        zoom:.82}

    .rp-inv-head {
        padding-bottom: 1rem
    }

    .rp-inv-meta {
        margin-block:1.1rem}

    .rp-invoice .rp-items tbody th,.rp-invoice .rp-items tbody td {
        padding-block:.5rem}

    .rp-inv-bottom {
        margin-top: 1rem
    }

    .rp-inv-notes p {
        margin-bottom: .6rem
    }

    .rp-invoice .rp-pay {
        margin-top: 1rem;
        padding: 1rem
    }

    .rp-inv-foot {
        margin-top: 1rem
    }

    .rp-invoice .rp-addr {
        line-height: 1.45
    }

    .rp-invoice .rp-inv-dl {
        padding: .7rem 1rem;
        gap: .2rem
    }

    .rp-accept .rp-sign-lines {
        margin-top: 2rem
    }
}

.h15-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h15-hero h1 {
    font-size: clamp(2.8rem,6vw,5.4rem)
}

.h15-hero .hero-bg .b1 {
    opacity: .35
}

.h15-facts {
    list-style: none;
    padding: 0;
    margin: 2.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
    border-top: 1px solid var(--line);
    padding-top: 1.4rem
}

.h15-facts li {
    display: flex;
    flex-direction: column
}

.h15-facts strong {
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1
}

.h15-facts li>span {
    font-size: .85rem;
    color: var(--muted);
    margin-top: .3rem
}

.h15-board {
    --fh-forest: #1f4a35;
    --fh-ember: #e0663a;
    --fh-oat: #efe4cf;
    --fh-roast: #2b1d17;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: clamp(.7rem,1.6vw,1.1rem);
    box-shadow: var(--shadow);
    container-type: inline-size;
    max-width: 720px;
    margin-inline:auto}

.h15-board-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .2rem .4rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted)
}

.h15-board-head .bi {
    color: var(--text)
}

.h15-ok {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    white-space: nowrap
}

.h15-ok .bi {
    color: var(--ink)
}

.h15-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(4,1fr);
    gap: clamp(6px,1.4cqw,12px);
    aspect-ratio: 6 / 4.7;
    font-size: clamp(7px,2cqw,14px)
}

.h15-t {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    padding: 1em 1.1em;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.h15-t small {
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .75
}

.h15-t-mark {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    background: var(--fh-forest);
    color: var(--fh-oat);
    align-items: center;
    text-align: center
}

.h15-t-mark small {
    align-self: flex-start
}

.h15-logo {
    width: 34%;
    margin-top: .4em
}

.lg-bg {
    fill: var(--fh-oat)
}

.lg-leaf {
    fill: var(--fh-forest)
}

.lg-vein {
    stroke: var(--fh-oat);
    stroke-width: 3.5;
    stroke-linecap: round;
    fill: none
}

.h15-word {
    font-family: var(--font-display);
    font-size: 2.6em;
    letter-spacing: -.045em;
    line-height: 1;
    margin-top: .3em
}

.h15-tagline {
    font-size: .85em;
    opacity: .7;
    margin-top: .45em;
    letter-spacing: .06em
}

.h15-t-type {
    grid-column: 4 / 7;
    grid-row: 1 / 3;
    background: var(--fh-oat);
    color: var(--fh-roast)
}

.h15-aa {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 7.4em;
    letter-spacing: -.06em;
    line-height: .95;
    margin-top: auto
}

.h15-type-name {
    font-weight: 600;
    font-size: 1em;
    margin-top: .3em
}

.h15-type-row {
    font-size: .9em;
    opacity: .65;
    margin-top: .2em;
    letter-spacing: .04em
}

.h15-t-sw {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
    flex-direction: row;
    padding: 0;
    gap: 0
}

.h15-sw {
    flex: 1;
    background: var(--c);
    color: #fff;
    padding: .8em .9em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0
}

.h15-sw.is-light {
    color: #2b1d17
}

.h15-sw b {
    font-size: 1em
}

.h15-sw code {
    color: inherit;
    font-size: .82em;
    opacity: .8;
    font-family: var(--font-body)
}

.h15-t-card {
    grid-column: 5 / 7;
    grid-row: 3 / 5;
    background: var(--fh-ember);
    padding: 0;
    display: grid;
    place-items: center
}

.h15-bcard {
    grid-area: 1 / 1;
    width: 78%;
    aspect-ratio: 1.75;
    border-radius: 6px;
    background: #fbf7ef;
    color: var(--fh-roast);
    padding: .8em .9em;
    display: flex;
    flex-direction: column;
    transform: rotate(5deg) translate(4%,12%);
    box-shadow: 0 14px 24px -12px rgba(0,0,0,.45)
}

.h15-bcard b {
    font-size: 1.05em;
    line-height: 1.1
}

.h15-bcard span {
    font-size: .75em;
    opacity: .7
}

.h15-bcard .h15-bcard-foot {
    margin-top: auto;
    opacity: .55
}

.h15-bcard.is-back {
    background: var(--fh-forest);
    transform: rotate(-8deg) translate(-6%,-16%);
    place-items: center;
    display: grid
}

.h15-bcard.is-back svg {
    width: 30%
}

.h15-bcard.is-back .lg-leaf {
    fill: var(--fh-oat)
}

.h15-t-var {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    background: var(--surface-2);
    color: var(--text)
}

.h15-vars {
    display: flex;
    gap: .6em;
    margin-top: auto
}

.h15-vars i {
    position: relative;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.h15-vars i::before {
    content: "";
    width: 1.25em;
    height: 1.25em;
    border-radius: 0 50%;
    transform: rotate(-45deg);
    background: currentColor
}

.h15-vars .v1 {
    background: var(--fh-forest);
    color: var(--fh-oat)
}

.h15-vars .v2 {
    background: var(--fh-ember);
    color: var(--fh-roast)
}

.h15-vars .v3 {
    border: 2px solid currentColor;
    color: var(--text)
}

.h15-t-pack {
    grid-column: 3 / 5;
    grid-row: 4 / 5;
    background: var(--fh-roast);
    padding: 0;
    display: grid;
    place-items: end center
}

.h15-bag {
    position: relative;
    width: 52%;
    height: 88%;
    background: var(--fh-oat);
    border-radius: 6px 6px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.2em;
    color: var(--fh-roast);
    text-align: center
}

.h15-bag-top {
    position: absolute;
    inset: 0 0 auto;
    height: .7em;
    background: repeating-linear-gradient(90deg,var(--fh-forest) 0 .35em,color-mix(in srgb,var(--fh-forest) 70%,#000) .35em .7em);
    border-radius: 6px 6px 0 0
}

.h15-bag svg {
    width: 36%
}

.h15-bag .lg-bg {
    fill: var(--fh-forest)
}

.h15-bag .lg-leaf {
    fill: var(--fh-oat)
}

.h15-bag b {
    font-size: .85em;
    margin-top: .4em;
    line-height: 1.1
}

.h15-bag span {
    font-size: .7em;
    opacity: .65
}

.h15-sticker {
    position: absolute;
    left: -1.4rem;
    bottom: -1.2rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .9rem;
    box-shadow: var(--shadow);
    white-space: nowrap
}

.h15-sticker .bi {
    color: var(--brand)
}

.h15-sticker b {
    color: var(--brand)
}

[data-bs-theme="dark"] .h15-sticker {
    background: #fff;
    color: var(--ink)
}

[data-bs-theme="dark"] .h15-sticker .bi,[data-bs-theme="dark"] .h15-sticker b {
    color: var(--ink)
}

.h15-awards {
    padding-block:.5rem 1rem}

.h15-award-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-block:1px solid var(--line)}

.h15-award-list li {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.4rem 1.2rem
}

.h15-award-list li + li {
    border-inline-start:1px solid var(--line)}

.h15-award-list .bi {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    font-size: 1.2rem
}

.h15-award-list strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -.02em;
    line-height: 1.2
}

.h15-award-list span {
    font-size: .82rem;
    color: var(--muted)
}

.h15-case {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(1.5rem,4vw,4rem);
    align-items: center
}

.h15-case + .h15-case {
    margin-top: clamp(3.5rem,7vw,6rem)
}

.h15-case.is-flip {
    grid-template-columns: 5fr 7fr
}

.h15-case.is-flip .h15-case-media {
    order: 2
}

.h15-case-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius)
}

.h15-case-media img {
    transition: transform .6s ease
}

.h15-case-media:hover img {
    transform: scale(1.04)
}

.h15-case-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(0,0,0,.38),transparent 42%);
    pointer-events: none
}

.h15-case-no {
    position: absolute;
    z-index: 2;
    left: 1.2rem;
    top: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem,7vw,5.5rem);
    letter-spacing: -.06em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0,0,0,.35)
}

.h15-case h3 {
    font-size: clamp(1.5rem,2.4vw,2.1rem);
    letter-spacing: -.03em;
    line-height: 1.12;
    margin-bottom: 1.4rem
}

.h15-case h3 a {
    text-decoration: none
}

.h15-case h3 a:hover {
    text-decoration: underline
}

.h15-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden
}

.h15-ba-col {
    padding: 1rem 1.1rem
}

.h15-ba-col.is-after {
    background: var(--surface);
    border-inline-start:1px solid var(--line)}

.h15-ba-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .6rem
}

.h15-ba-col.is-after .h15-ba-label {
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h15-ba-col.is-after .h15-ba-label {
    color: var(--brand)
}

.h15-ba-mark {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.2rem;
    margin-bottom: .6rem
}

.h15-ba-mark.is-old {
    font-family: Georgia,"Times New Roman",serif;
    font-size: .95rem;
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb,var(--coral) 70%,transparent)
}

.h15-ba-mark.is-new {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -.04em
}

.h15-ba-col p {
    font-size: .88rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5
}

.h15-mini {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    flex: none;
    position: relative;
    display: grid;
    place-items: center
}

.h15-mini.m1 {
    background: #1f4a35
}

.h15-mini.m1::before {
    content: "";
    width: .7rem;
    height: .7rem;
    border-radius: 0 50%;
    transform: rotate(-45deg);
    background: #efe4cf
}

.h15-mini.m2 {
    background: #d9cbb8;
    box-shadow: inset -.45rem 0 0 #3e3a52
}

.h15-mini.m3 {
    border-radius: 4px;
    background: #24364d
}

.h15-mini.m3::before {
    content: "";
    width: 1rem;
    height: .7rem;
    background: #fff;
    clip-path: polygon(50% 0,100% 100%,0 100%)
}

.h15-case-stats {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem
}

.h15-case-stats li {
    display: flex;
    flex-direction: column;
    font-size: .85rem;
    color: var(--muted)
}

.h15-case-stats b {
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: -.04em;
    line-height: 1.1;
    color: var(--text)
}

.h15-cap {
    position: relative;
    height: 100%;
    padding: 2rem 1.8rem 1.6rem;
    background: var(--surface);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease,box-shadow .3s ease
}

.h15-cap::before,.h15-cap::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--text);
    border-style: solid;
    opacity: .45;
    transition: opacity .3s ease,inset .3s ease
}

.h15-cap::before {
    top: -9px;
    left: -9px;
    border-width: 1.5px 0 0 1.5px
}

.h15-cap::after {
    bottom: -9px;
    right: -9px;
    border-width: 0 1.5px 1.5px 0
}

.h15-cap:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.h15-cap:hover::before,.h15-cap:hover::after {
    opacity: 1
}

.h15-cap-no {
    position: absolute;
    right: 1.6rem;
    top: 1.7rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .1em
}

.h15-cap-ic {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: var(--surface-2);
    margin-bottom: 1.4rem;
    transition: background-color .3s ease,color .3s ease
}

.h15-cap:hover .h15-cap-ic {
    background: var(--brand);
    color: var(--ink)
}

.h15-cap h3 {
    font-size: 1.4rem;
    margin-bottom: .6rem
}

.h15-cap p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 1.3rem
}

.h15-cap-tags {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.h15-cap-tags li {
    font-size: .76rem;
    font-weight: 500;
    padding: .25rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--line)
}

.h15-phase {
    position: relative;
    height: calc(100% - 2.4rem);
    padding: 0 1.5rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    display: flex;
    flex-direction: column;
    margin-top: 2.4rem
}

.h15-phase-tab {
    position: absolute;
    left: -1px;
    bottom: 100%;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    font-size: .8rem;
    color: var(--muted)
}

.h15-phase-tab span {
    font-weight: 700;
    color: var(--brand)
}

.h15-phase h3 {
    font-size: 1.6rem;
    margin: 1.4rem 0 1rem
}

.h15-phase ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem
}

.h15-phase li {
    position: relative;
    padding: .55rem 0 .55rem 1.6rem;
    border-top: 1px dashed var(--line);
    font-size: .95rem
}

.h15-phase li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: .55rem;
    color: var(--brand)
}

.h15-phase-sign {
    margin: auto 0 0;
    padding-top: 1rem;
    font-size: .85rem;
    color: var(--muted);
    border-top: 1px solid var(--line)
}

.h15-phase.is-hl,.h15-phase.is-hl .h15-phase-tab {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand);
    --line: rgba(18,18,18,.16)
}

.h15-phase.is-hl .h15-phase-tab span,.h15-phase.is-hl li::before {
    color: var(--ink)
}

.h15-phase.is-hl .h15-phase-tab,.h15-phase.is-hl .h15-phase-sign {
    color: rgba(18,18,18,.72)
}

.h15-ticks {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: .9rem
}

.h15-ticks li {
    display: flex;
    gap: .8rem;
    align-items: flex-start
}

.h15-ticks .bi {
    color: var(--brand-2);
    font-size: 1.15rem;
    margin-top: .1rem
}

[data-bs-theme="dark"] .h15-ticks .bi {
    color: var(--brand)
}

.h15-ticks span {
    color: var(--muted)
}

.h15-ticks strong {
    color: var(--text)
}

.h15-book {
    --fh-forest: #1f4a35;
    --fh-oat: #efe4cf;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: clamp(.6rem,1.5vw,1rem);
    border-radius: 18px;
    background: var(--fh-forest);
    box-shadow: 0 40px 60px -40px rgba(0,0,0,.5);
    transform: perspective(1600px) rotateX(8deg);
    container-type: inline-size
}

.h15-page {
    position: relative;
    aspect-ratio: 3 / 4;
    background: #fbf8f2;
    color: #2b1d17;
    padding: 1.4em;
    display: flex;
    flex-direction: column;
    font-size: clamp(8px,2.2cqw,14px)
}

.h15-page:first-child {
    border-radius: 8px 2px 2px 8px;
    box-shadow: inset -24px 0 30px -24px rgba(0,0,0,.25)
}

.h15-page:last-child {
    border-radius: 2px 8px 8px 2px;
    box-shadow: inset 24px 0 30px -24px rgba(0,0,0,.25)
}

.h15-page-h {
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1f4a35
}

.h15-page-no {
    position: absolute;
    bottom: 1em;
    right: 1.4em;
    font-size: .75em;
    opacity: .5
}

.h15-page:first-child .h15-page-no {
    right: auto;
    left: 1.4em
}

.h15-clear {
    position: relative;
    margin: 1.6em auto 0;
    width: 62%;
    aspect-ratio: 1;
    padding: 16%;
    border: 1.5px dashed #e0663a
}

.h15-clear svg {
    width: 100%;
    display: block
}

.h15-clear .lg-bg {
    fill: #1f4a35
}

.h15-clear .lg-leaf {
    fill: #efe4cf
}

.h15-clear .lg-vein {
    stroke: #1f4a35
}

.h15-x {
    position: absolute;
    font-size: .8em;
    font-style: italic;
    color: #e0663a
}

.h15-x.x1 {
    top: 2%;
    left: 50%
}

.h15-x.x2 {
    left: 3%;
    top: 45%
}

.h15-dont {
    display: flex;
    gap: .6em;
    margin-top: auto;
    margin-bottom: 1.4em
}

.h15-dont span {
    flex: 1;
    aspect-ratio: 1.3;
    border-radius: 4px;
    background: #efe4cf;
    display: grid;
    place-items: center;
    font-size: 1.1em
}

.h15-dont .is-do {
    color: #1f6b3e
}

.h15-dont .is-dont {
    color: #c4402a
}

.h15-dont .is-skew i {
    transform: skewX(-18deg) scaleX(1.4)
}

.h15-scale {
    display: flex;
    flex-direction: column;
    gap: .35em;
    margin-top: 1.2em
}

.h15-scale span {
    font-family: var(--font-display);
    font-size: var(--s);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    border-bottom: 1px solid rgba(43,29,23,.12);
    padding-bottom: .25em
}

.h15-scale span:last-child {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.45
}

.h15-chips {
    display: flex;
    gap: .45em;
    margin-top: auto;
    margin-bottom: 1.4em
}

.h15-chips i {
    flex: 1;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08)
}

.h15-wall {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,minmax(220px,auto));
    gap: clamp(.75rem,1.6vw,1.25rem)
}

.h15-w {
    border-radius: var(--radius)
}

.h15-w.w1 {
    grid-column: 1 / 3
}

.h15-w.w2 {
    grid-row: 1 / 3;
    grid-column: 3
}

.h15-w.w3 {
    grid-column: 4
}

.h15-w.w4 {
    grid-column: 1
}

.h15-quote {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: #f3f1ec;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem
}

[data-bs-theme="dark"] .h15-quote {
    background: var(--surface);
    border: 1px solid var(--line)
}

.h15-quote p {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin: 0
}

.h15-quote footer {
    display: flex;
    align-items: center;
    gap: .7rem
}

.h15-quote .avatar {
    object-fit: cover;
    border-color: transparent
}

.h15-quote strong {
    display: block;
    font-size: .9rem
}

.h15-quote small {
    color: #a3a09a;
    font-size: .8rem
}

.h15-stat {
    grid-column: 4;
    grid-row: 2;
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.h15-stat strong {
    font-family: var(--font-display);
    font-size: clamp(3rem,5vw,4.4rem);
    letter-spacing: -.05em;
    line-height: 1
}

.h15-stat>span {
    font-size: .92rem;
    margin-top: .5rem
}

.h15-audit {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    background: var(--brand);
    color: var(--ink);
    padding: clamp(2rem,5vw,4.5rem)
}

.h15-audit::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -120px;
    top: -160px;
    border-radius: 50%;
    border: 60px solid rgba(18,18,18,.06)
}

.h15-audit h2 {
    font-size: clamp(2.2rem,4.6vw,3.8rem)
}

.h15-audit-badge {
    display: inline-flex;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .82rem;
    font-weight: 600
}

.h15-audit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem 1.2rem;
    font-weight: 500
}

.h15-audit-list li {
    display: flex;
    gap: .5rem;
    align-items: center
}

.h15-audit-list .bi {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: .85rem;
    flex: none
}

.h15-form {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius);
    padding: clamp(1.4rem,3vw,2.2rem);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.35)
}

.h15-form .form-label {
    font-size: .88rem;
    font-weight: 600
}

@media (max-width: 1199.98px) {
    .h15-award-list {
        grid-template-columns:1fr 1fr
    }

    .h15-award-list li:nth-child(3) {
        border-inline-start:0}

    .h15-award-list li:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }
}

@media (max-width: 991.98px) {
    .h15-board {
        margin-top:1rem
    }

    .h15-sticker {
        left: .5rem;
        bottom: -1.1rem
    }

    .h15-case,.h15-case.is-flip {
        grid-template-columns: 1fr
    }

    .h15-case.is-flip .h15-case-media {
        order: 0
    }

    .h15-wall {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none
    }

    .h15-w.w1 {
        grid-column: 1 / 3;
        aspect-ratio: 16 / 9
    }

    .h15-w.w2,.h15-w.w3,.h15-w.w4 {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 1
    }

    .h15-quote {
        grid-column: 1 / 3;
        grid-row: auto
    }

    .h15-stat {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 1
    }

    .h15-book {
        transform: none
    }
}

@media (max-width: 575.98px) {
    .h15-board {
        border-radius:22px
    }

    .h15-sticker {
        display: none
    }

    .h15-facts {
        gap: 1rem 1.5rem
    }

    .h15-facts strong {
        font-size: 1.7rem
    }

    .h15-board-head {
        font-size: .72rem
    }

    .h15-t {
        border-radius: 10px
    }

    .h15-grid {
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(6,1fr);
        aspect-ratio: 4 / 6.4;
        font-size: clamp(8px,2.7cqw,13px)
    }

    .h15-t-mark {
        grid-column: 1 / 5;
        grid-row: 1 / 3
    }

    .h15-t-type {
        grid-column: 1 / 3;
        grid-row: 3 / 5
    }

    .h15-t-card {
        grid-column: 3 / 5;
        grid-row: 3 / 5
    }

    .h15-t-sw {
        grid-column: 1 / 5;
        grid-row: 5 / 6
    }

    .h15-t-var {
        grid-column: 1 / 3;
        grid-row: 6 / 7
    }

    .h15-t-pack {
        grid-column: 3 / 5;
        grid-row: 6 / 7
    }

    .h15-aa {
        font-size: 5.6em
    }

    .h15-award-list {
        grid-template-columns: 1fr
    }

    .h15-award-list li + li {
        border-inline-start:0;border-top: 1px solid var(--line)
    }

    .h15-award-list li {
        padding: 1rem .2rem
    }

    .h15-ba {
        grid-template-columns: 1fr
    }

    .h15-ba-col.is-after {
        border-inline-start:0;border-top: 1px solid var(--line)
    }

    .h15-audit-list {
        grid-template-columns: 1fr
    }

    .h15-audit {
        border-radius: 26px
    }

    .h15-wall {
        grid-template-columns: 1fr
    }

    .h15-w.w1,.h15-quote {
        grid-column: auto
    }

    .h15-w.w2,.h15-w.w3,.h15-w.w4 {
        aspect-ratio: 4 / 3
    }

    .h15-stat {
        aspect-ratio: auto
    }

    .h15-cap {
        padding: 1.7rem 1.4rem 1.4rem
    }
}

.h16-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h16-hero h1 {
    font-size: clamp(2.7rem,5.8vw,5.3rem);
    margin-bottom: 0
}

.h16-hero .lead {
    margin-bottom: 0
}

.h16-hero .hero-bg .b2 {
    left: auto;
    right: -160px;
    bottom: 10%
}

.h16-stage {
    --lh: #0cce6b;
    --lh-text: #08834a;
    position: relative;
    margin-top: clamp(2.5rem,5vw,4rem);
    padding-bottom: 2.5rem;
    container-type: inline-size
}

.h16-browser,.h16-scores,.h16-devices {
    font-size: clamp(7px,1.15cqw,14px)
}

.h16-browser {
    width: 84%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.h16-bar {
    display: flex;
    align-items: center;
    gap: 1.2em;
    padding: .9em 1.2em;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2)
}

.h16-dots {
    display: flex;
    gap: .45em
}

.h16-dots i {
    width: .85em;
    height: .85em;
    border-radius: 50%;
    background: #ff5f57
}

.h16-dots i:nth-child(2) {
    background: #febc2e
}

.h16-dots i:nth-child(3) {
    background: #28c840
}

.h16-url {
    flex: 1;
    max-width: 44%;
    margin-inline:auto;display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .4em 1em;
    border-radius: 999px;
    background: var(--surface);
    font-size: 1em;
    color: var(--muted)
}

.h16-url .bi {
    font-size: .8em
}

.h16-live {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .9em;
    font-weight: 600;
    white-space: nowrap
}

.h16-live i {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: #28c840;
    box-shadow: 0 0 0 .3em rgba(40,200,64,.2)
}

.h16-view {
    display: grid;
    grid-template-columns: 1fr 34%
}

.h16-site {
    position: relative;
    padding: 1.4em 1.8em 1.8em;
    background: #f7f3ee;
    color: #1d2a33;
    overflow: hidden
}

.h16-cols {
    position: absolute;
    inset: 0 1.8em;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 1.4em;
    pointer-events: none
}

.h16-cols i {
    background: rgba(109,74,255,.06);
    border-inline:1px solid rgba(109,74,255,.12)}

.h16-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.6em;
    margin-bottom: 1.8em
}

.h16-nav b {
    font-family: var(--font-display);
    font-size: 1.4em;
    letter-spacing: -.04em;
    margin-inline-end:auto}

.h16-nav span {
    width: 3.4em;
    height: .45em;
    border-radius: 9px;
    background: rgba(29,42,51,.2)
}

.h16-nav em {
    font-style: normal;
    font-size: .85em;
    font-weight: 600;
    padding: .45em 1.1em;
    border-radius: 999px;
    background: #1d2a33;
    color: #fff
}

.h16-shero {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1.6em;
    align-items: center;
    padding: 1.2em;
    margin: 0 -1.2em 1.6em
}

.h16-shero-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6em
}

.h16-shero-txt small {
    font-size: .8em;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #2f6f9f
}

.h16-shero-txt strong {
    font-family: var(--font-display);
    font-size: 2.9em;
    line-height: 1;
    letter-spacing: -.045em
}

.h16-ln {
    width: 90%;
    height: .5em;
    border-radius: 9px;
    background: rgba(29,42,51,.14)
}

.h16-ln.is-short {
    width: 60%
}

.h16-sbtn {
    margin-top: .5em;
    font-style: normal;
    font-size: .9em;
    font-weight: 600;
    padding: .7em 1.4em;
    border-radius: 999px;
    background: #2f6f9f;
    color: #fff
}

.h16-vase {
    position: relative;
    aspect-ratio: 1 / .9;
    border-radius: 1.4em;
    background: linear-gradient(160deg,#dfe9f1,#c9d9e6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: .5em;
    padding-bottom: 14%
}

.h16-vase i {
    display: block;
    background: #2f6f9f
}

.h16-vase .v1 {
    width: 22%;
    height: 52%;
    border-radius: 40% 40% 30% 30% / 20% 20% 50% 50%
}

.h16-vase .v2 {
    width: 30%;
    height: 70%;
    border-radius: 50% 50% 40% 40% / 30% 30% 45% 45%;
    background: #d7895f
}

.h16-vase .v3 {
    width: 18%;
    height: 36%;
    border-radius: 30% 30% 45% 45%;
    background: #e9dcc7
}

.h16-select {
    position: absolute;
    inset: 0;
    border: 1.5px solid #6d4aff;
    border-radius: 4px;
    pointer-events: none
}

.h16-select b {
    position: absolute;
    left: -1.5px;
    bottom: 100%;
    padding: .25em .6em;
    border-radius: 4px 4px 0 0;
    background: #6d4aff;
    color: #fff;
    font-size: .75em;
    font-weight: 500;
    white-space: nowrap
}

.h16-select::before,.h16-select::after {
    content: "";
    position: absolute;
    width: .6em;
    height: .6em;
    background: #fff;
    border: 1.5px solid #6d4aff
}

.h16-select::before {
    left: -.35em;
    top: -.35em
}

.h16-select::after {
    right: -.35em;
    bottom: -.35em
}

.h16-cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1em
}

.h16-cards span {
    aspect-ratio: 1 / 1.1;
    border-radius: .9em;
    background: #ebe3d8;
    display: flex;
    align-items: flex-end;
    padding: .8em
}

.h16-cards span:nth-child(2) {
    background: #dfe9f1
}

.h16-cards span:nth-child(4) {
    background: #f1dfd2
}

.h16-cards i {
    width: 70%;
    height: .5em;
    border-radius: 9px;
    background: rgba(29,42,51,.2)
}

.h16-code {
    background: #0f1218;
    color: #c9d1d9;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.h16-code-tab {
    display: flex;
    font-size: .85em;
    border-bottom: 1px solid rgba(255,255,255,.08)
}

.h16-code-tab span {
    padding: .7em 1.1em;
    color: #8b949e
}

.h16-code-tab .is-on {
    color: #fff;
    background: rgba(255,255,255,.05);
    box-shadow: inset 0 -2px 0 #6d4aff
}

.h16-code pre {
    margin: 0;
    padding: 1.2em;
    font-size: .92em;
    line-height: 1.7;
    color: #c9d1d9;
    overflow: hidden;
    white-space: pre
}

.h16-code b {
    font-weight: 400
}

.h16-code .k {
    color: #ff7b72
}

.h16-code .a {
    color: #79c0ff
}

.h16-code .s {
    color: #a5d6ff
}

.h16-code .v {
    color: #ffa657
}

.h16-code .n {
    color: #d2a8ff
}

.h16-code .c {
    color: #8b949e;
    font-style: italic
}

.h16-term {
    margin-top: auto;
    padding: .9em 1.2em;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: .3em;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size: .85em;
    color: #8b949e
}

.h16-term .is-ok {
    color: #3fb950
}

.h16-scores {
    position: absolute;
    left: -1.5%;
    bottom: 0;
    width: 36%;
    padding: 1.2em 1.4em 1.4em;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow)
}

.h16-scores-h {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: .95em;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 1em
}

.h16-rings {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .6em
}

.h16-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55em;
    text-align: center
}

.h16-ring b {
    width: 100%;
    max-width: 5em;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.35em;
    color: var(--lh-text);
    background: radial-gradient(closest-side,var(--surface) 80%,transparent 82% 100%),conic-gradient(var(--lh) calc(var(--p) * 1%),color-mix(in srgb,var(--lh) 18%,transparent) 0)
}

.h16-ring small {
    font-size: .78em;
    line-height: 1.2;
    color: var(--muted)
}

[data-bs-theme="dark"] .h16-stage {
    --lh-text: #0cce6b
}

.h16-devices {
    position: absolute;
    right: 1%;
    bottom: 0;
    width: 27%;
    aspect-ratio: 1 / 1.05
}

.h16-tablet,.h16-phone {
    position: absolute;
    background: #f7f3ee;
    border: .55em solid #15171c;
    box-shadow: 0 30px 50px -24px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: .7em;
    overflow: hidden
}

.h16-tablet {
    right: 0;
    bottom: 0;
    width: 74%;
    height: 78%;
    border-radius: 1.4em
}

.h16-phone {
    left: 0;
    bottom: -1em;
    width: 38%;
    height: 70%;
    border-radius: 1.6em;
    padding-top: 1.6em
}

.h16-notch {
    position: absolute;
    top: .4em;
    left: 50%;
    width: 36%;
    height: .7em;
    border-radius: 9px;
    background: #15171c;
    transform: translateX(-50%)
}

.h16-mini-nav {
    height: .5em;
    width: 40%;
    border-radius: 9px;
    background: rgba(29,42,51,.3)
}

.h16-mini-hero {
    flex: 1;
    max-height: 55%;
    border-radius: .7em;
    background: linear-gradient(160deg,#dfe9f1,#c9d9e6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10%
}

.h16-mini-hero i {
    width: 26%;
    height: 50%;
    border-radius: 50% 50% 40% 40% / 30% 30% 45% 45%;
    background: #d7895f
}

.h16-mini-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5em;
    flex: 1
}

.h16-mini-row i {
    border-radius: .5em;
    background: #ebe3d8
}

.h16-mini-txt {
    height: 1.6em;
    border-radius: 6px;
    background: repeating-linear-gradient(rgba(29,42,51,.18) 0 .35em,transparent .35em .65em)
}

.h16-mini-btn {
    height: 1.4em;
    width: 70%;
    border-radius: 999px;
    background: #2f6f9f
}

.h16-plat {
    height: 100%;
    padding: 1.8rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease,box-shadow .3s ease
}

.h16-plat:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow)
}

.h16-plat-ic {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: var(--brand);
    color: var(--ink);
    margin-bottom: 1.4rem
}

.h16-plat h3 {
    font-size: 1.5rem;
    margin-bottom: .6rem
}

.h16-plat p {
    color: var(--muted);
    font-size: .95rem
}

.h16-plat-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin: auto 0 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line)
}

.h16-plat-meta dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.h16-plat-meta dd {
    margin: .2rem 0 0;
    font-weight: 600;
    font-size: .95rem
}

.h16-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.h16-chips li {
    font-size: .76rem;
    font-weight: 500;
    padding: .28rem .7rem;
    border-radius: 8px;
    background: var(--surface-2);
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}

.h16-plat.is-dark {
    background: var(--ink);
    color: #f3f1ec;
    border-color: var(--ink);
    --muted: #a3a09a;
    --line: rgba(255,255,255,.14);
    --surface-2: #26262a
}

.h16-plat.is-dark .h16-plat-ic {
    background: var(--brand-2);
    color: #fff
}

[data-bs-theme="dark"] .h16-plat.is-dark {
    background: #050506;
    border-color: var(--line)
}

.h16-also {
    margin: 2rem 0 0;
    text-align: center;
    color: var(--muted);
    font-size: .95rem
}

.h16-also span {
    font-weight: 600;
    color: var(--text)
}

.h16-impact {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    border-top: 1px solid var(--line);
    padding-top: 1.4rem
}

.h16-impact strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2.1rem;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--brand)
}

.h16-impact span {
    display: block;
    font-size: .85rem;
    color: var(--muted);
    margin-top: .4rem
}

.h16-vitals {
    color: #f3f1ec;
    padding: clamp(1.4rem,3vw,2.2rem);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h16-vitals-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4rem 1rem;
    align-items: baseline
}

.h16-vitals-head span {
    font-size: .85rem;
    color: var(--muted)
}

.h16-legend {
    display: flex;
    gap: 1.2rem;
    margin: .9rem 0 .4rem;
    font-size: .82rem;
    color: var(--muted)
}

.h16-legend span {
    display: inline-flex;
    align-items: center;
    gap: .45rem
}

.h16-legend span::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--coral)
}

.h16-legend .is-after::before {
    background: var(--brand)
}

.h16-vital {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1.2rem;
    align-items: center;
    padding-block:1.6rem 1.1rem;border-bottom: 1px solid var(--line)
}

.h16-vital-k b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.02em;
    line-height: 1
}

.h16-vital-k small {
    font-size: .78rem;
    color: var(--muted)
}

.h16-bars {
    position: relative;
    display: grid;
    gap: .4rem
}

.h16-bars>span:not(.h16-limit) {
    width: var(--w);
    min-width: 4.5rem;
    height: 1.7rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline:.6rem;transform-origin: left
}

.h16-bar-b {
    background: color-mix(in srgb,var(--coral) 85%,transparent);
    color: var(--ink)
}

.h16-bar-a {
    background: var(--brand);
    color: var(--ink)
}

.h16-bars em {
    font-style: normal;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap
}

.reveal .h16-bars>span:not(.h16-limit) {
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s
}

.reveal.in .h16-bars>span:not(.h16-limit) {
    transform: none
}

.h16-limit {
    position: absolute;
    top: -.6rem;
    bottom: -.3rem;
    left: var(--at);
    border-inline-start:1.5px dashed currentColor;opacity: .6
}

.h16-limit small {
    position: absolute;
    bottom: 100%;
    left: .3rem;
    font-size: .7rem;
    white-space: nowrap;
    color: var(--muted)
}

.h16-vitals-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding-top: 1.1rem;
    font-size: .88rem;
    color: var(--muted)
}

.h16-vitals-foot span:first-child {
    color: inherit;
    font-weight: 600
}

.h16-vitals-foot .bi {
    color: var(--brand)
}

.h16-launches {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(1rem,2vw,1.6rem)
}

.h16-launch {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    text-decoration: none
}

.h16-launch.is-wide {
    grid-column: span 2
}

.h16-launch-frame {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: transform .35s ease,box-shadow .35s ease
}

.h16-launch:hover .h16-launch-frame {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.h16-launch-bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .8rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2)
}

.h16-launch-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line)
}

.h16-launch-bar em {
    font-style: normal;
    font-size: .75rem;
    color: var(--muted);
    margin-inline-start:.6rem}

.h16-launch-img {
    display: block;
    height: clamp(190px,21vw,290px)
}

.h16-launch-img img {
    transition: transform .6s ease
}

.h16-launch:hover .h16-launch-img img {
    transform: scale(1.04)
}

.h16-launch-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

.h16-launch-body strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -.02em
}

.h16-launch-body small {
    color: var(--muted);
    font-size: .85rem
}

.h16-score {
    --lh: #0cce6b;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .85rem;
    color: #08834a;
    background: radial-gradient(closest-side,var(--paper) 78%,transparent 80% 100%),conic-gradient(var(--lh) 0 100%)
}

[data-bs-theme="dark"] .h16-score {
    color: #0cce6b
}

.h16-gantt {
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    overflow-x: auto
}

.h16-gantt-scroll {
    --name: 13rem;
    position: relative;
    min-width: 760px;
    padding: .6rem 1.4rem 2.4rem
}

.h16-g-head,.h16-g-row {
    display: grid;
    grid-template-columns: var(--name) repeat(10,1fr);
    align-items: center
}

.h16-g-head {
    padding-block:.8rem;border-bottom: 1px solid var(--line);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.h16-g-head span:not(:first-child) {
    text-align: center
}

.h16-g-row {
    padding-block:.55rem;background-image: linear-gradient(90deg,transparent var(--name),var(--line) var(--name),var(--line) calc(var(--name) + 1px),transparent calc(var(--name) + 1px))
}

.h16-g-row + .h16-g-row {
    border-top: 1px dashed var(--line)
}

.h16-g-name {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 600;
    font-size: .95rem
}

.h16-g-name b {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .75rem;
    background: var(--surface-2)
}

.h16-g-bar {
    grid-column: calc(var(--s) + 1) / calc(var(--e) + 1);
    grid-row: 1;
    margin-inline:3px;padding: .6rem .9rem;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h16-g-bar.is-a {
    background: var(--surface-2);
    color: var(--text)
}

.h16-g-bar.is-b {
    background: color-mix(in srgb,var(--brand-2) 22%,var(--surface));
    color: var(--text)
}

.h16-g-bar.is-c {
    background: var(--brand-2);
    color: #fff
}

.h16-g-bar.is-d {
    background: var(--brand);
    color: var(--ink)
}

.h16-g-bar.is-e {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .h16-g-bar.is-e {
    background: #fff;
    color: var(--ink)
}

.h16-g-today {
    position: absolute;
    top: 3.2rem;
    bottom: 1.2rem;
    left: calc(1.4rem + var(--name) + (100% - 2.8rem - var(--name)) / 10 * var(--at));
    border-inline-start:2px solid var(--coral)}

.h16-g-today em {
    position: absolute;
    bottom: -1.2rem;
    left: 0;
    transform: translateX(-50%);
    font-style: normal;
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--coral);
    color: var(--ink);
    white-space: nowrap
}

.h16-ritual {
    height: 100%;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.3rem 1.4rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h16-ritual .bi {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: var(--brand);
    color: var(--ink)
}

.h16-ritual strong {
    display: block;
    margin-bottom: .2rem
}

.h16-ritual span {
    font-size: .9rem;
    color: var(--muted)
}

.h16-pack {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2.2rem 2rem 2rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h16-pack-name {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted)
}

.h16-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.2rem;
    letter-spacing: -.05em;
    line-height: 1;
    margin: .8rem 0 1rem
}

.h16-price small {
    display: block;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    margin-bottom: .3rem
}

.h16-pack p {
    color: var(--muted)
}

.h16-pack ul {
    list-style: none;
    padding: 1.2rem 0 0;
    margin: 0 0 1.8rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .6rem
}

.h16-pack li {
    display: flex;
    gap: .6rem;
    font-size: .95rem
}

.h16-pack li::before {
    content: "\F26B";
    font-family: "bootstrap-icons";
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h16-pack li::before {
    color: var(--brand)
}

.h16-pack .btn {
    margin-top: auto
}

.h16-pack.is-featured {
    background: var(--brand-2);
    color: var(--on-brand-2);
    border-color: var(--brand-2);
    --muted: rgba(255,255,255,.78);
    --line: rgba(255,255,255,.2);
    box-shadow: 0 30px 60px -30px color-mix(in srgb,var(--brand-2) 70%,transparent)
}

.h16-pack.is-featured li::before {
    color: var(--brand)
}

.h16-pack.is-featured .btn-ink {
    background: var(--ink);
    color: #fff
}

.h16-pack.is-featured .btn-ink:hover {
    background: var(--brand);
    color: var(--ink)
}

.h16-pack-flag {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700
}

.h16-care {
    display: grid;
    grid-template-columns: 1.4fr repeat(3,1fr);
    margin-top: clamp(1.5rem,3vw,2.2rem);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden
}

.h16-care>div {
    padding: 1.4rem 1.6rem
}

.h16-care-intro {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--surface-2)
}

.h16-care-intro .bi {
    font-size: 1.8rem;
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h16-care-intro .bi {
    color: var(--brand)
}

.h16-care-intro strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -.02em
}

.h16-care-intro span {
    font-size: .88rem;
    color: var(--muted)
}

.h16-care-plan {
    display: flex;
    flex-direction: column;
    border-inline-start:1px solid var(--line)}

.h16-care-plan>span {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.h16-care-plan strong {
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: -.04em;
    line-height: 1.2
}

.h16-care-plan strong small {
    font-size: .9rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0
}

.h16-care-plan>small {
    font-size: .85rem;
    color: var(--muted)
}

.h16-dev {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem
}

.h16-dev .avatar {
    object-fit: cover
}

.h16-dev strong {
    display: block
}

.h16-dev small {
    color: var(--muted)
}

.h16-start {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: clamp(2rem,5vw,4.5rem);
    background: var(--ink);
    color: #f3f1ec
}

.h16-start::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 15% 20%,#000,transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at 15% 20%,#000,transparent 60%)
}

[data-bs-theme="dark"] .h16-start {
    background: var(--surface);
    border: 1px solid var(--line)
}

.h16-start h2 {
    font-size: clamp(2.2rem,4.6vw,3.8rem)
}

.h16-start h2 .serif {
    color: var(--brand)
}

.h16-start p {
    color: #c9c6c0
}

.h16-start-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .7rem
}

.h16-start-list li {
    display: flex;
    gap: .7rem;
    align-items: center;
    font-size: .95rem
}

.h16-start-list .bi {
    color: var(--brand);
    font-size: 1.1rem
}

.h16-brief {
    padding: clamp(1.4rem,3vw,2rem);
    border-radius: var(--radius);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12)
}

.h16-brief legend {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #a3a09a;
    margin-bottom: .7rem
}

.h16-opts {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .5rem
}

.h16-opts label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    cursor: pointer;
    font-weight: 600;
    font-size: .92rem;
    transition: background-color .2s ease,border-color .2s ease,color .2s ease
}

.h16-opts label .bi {
    font-size: 1.2rem;
    color: var(--brand)
}

.h16-opts label:hover {
    border-color: rgba(255,255,255,.4)
}

.h16-opts.is-small label {
    flex-direction: row;
    justify-content: center;
    padding: .6rem .8rem;
    border-radius: 999px;
    font-size: .88rem
}

.h16-opts .btn-check:checked + label {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

.h16-opts .btn-check:checked + label .bi {
    color: var(--ink)
}

.h16-opts .btn-check:focus-visible + label {
    outline: 3px solid var(--brand);
    outline-offset: 2px
}

.h16-send {
    display: flex;
    gap: .4rem;
    padding: .35rem;
    margin-top: 1.4rem;
    border-radius: 999px;
    background: #fff
}

.h16-send input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding-inline:1.1rem;color: var(--ink)
}

.h16-send input::placeholder {
    color: #6b6862
}

.h16-send input:focus {
    outline: none
}

.h16-send:focus-within {
    box-shadow: 0 0 0 3px var(--brand)
}

.h16-send .btn-ink,[data-bs-theme="dark"] .h16-send .btn-ink {
    background: var(--ink);
    color: #fff
}

.h16-send .btn-ink:hover {
    background: var(--brand-2);
    color: #fff
}

@media (max-width: 1199.98px) {
    .h16-care {
        grid-template-columns:repeat(3,1fr)
    }

    .h16-care-intro {
        grid-column: 1 / -1
    }

    .h16-care-plan:nth-child(2) {
        border-inline-start:0}
}

@media (max-width: 991.98px) {
    .h16-browser {
        width:100%
    }

    .h16-browser,.h16-scores,.h16-devices {
        font-size: clamp(7px,1.4cqw,14px)
    }

    .h16-scores {
        bottom: -1rem;
        left: 3%;
        width: 46%
    }

    .h16-stage {
        padding-bottom: 7rem
    }

    .h16-devices {
        bottom: -1rem;
        width: 30%
    }

    .h16-vital {
        grid-template-columns: 8rem 1fr
    }

    .h16-launches {
        grid-template-columns: 1fr 1fr
    }

    .h16-opts {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 575.98px) {
    .h16-view {
        grid-template-columns:1fr
    }

    .h16-code,.h16-devices,.h16-live,.h16-nav span {
        display: none
    }

    .h16-url {
        max-width: none
    }

    .h16-browser,.h16-scores {
        font-size: clamp(7px,2.3cqw,13px)
    }

    .h16-site {
        padding: 1.2em 1.4em 1.4em
    }

    .h16-shero {
        grid-template-columns: 1fr;
        margin-inline:0}

    .h16-vase {
        aspect-ratio: 2 / 1
    }

    .h16-scores {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        margin: -1.4rem .6rem 0
    }

    .h16-stage {
        padding-bottom: 0
    }

    .h16-impact {
        grid-template-columns: 1fr
    }

    .h16-vital {
        grid-template-columns: 1fr;
        gap: .9rem
    }

    .h16-bars {
        margin-top: .9rem
    }

    .h16-gantt-scroll {
        --name: 10rem;
        min-width: 700px
    }

    .h16-launches {
        grid-template-columns: 1fr
    }

    .h16-launch.is-wide {
        grid-column: auto
    }

    .h16-care {
        grid-template-columns: 1fr
    }

    .h16-care-plan {
        border-inline-start:0;border-top: 1px solid var(--line)
    }

    .h16-start {
        border-radius: 26px
    }

    .h16-send {
        flex-wrap: wrap;
        border-radius: 22px
    }

    .h16-send input {
        padding-block:.7rem}

    .h16-send .btn {
        flex: 1 1 100%;
        justify-content: center
    }

    .h16-pack {
        padding: 1.8rem 1.5rem
    }
}

.h17-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h17-hero h1 {
    font-size: clamp(2.6rem,5.4vw,4.9rem);
    margin-bottom: 0
}

.h17-hero .lead {
    margin-bottom: 0
}

.h17-hero .hero-bg .b1 {
    right: 10%;
    top: auto;
    bottom: -120px
}

.h17-stage {
    position: relative;
    margin-top: clamp(2.5rem,5vw,4rem);
    display: grid;
    grid-template-columns: .9fr 2.5fr 1.1fr;
    gap: 1.25rem;
    align-items: center
}

.h17-prods {
    display: grid;
    gap: 1.1rem;
    position: relative;
    z-index: 2;
    margin-inline-end:-1.75rem}

.h17-prod {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: .55rem;
    box-shadow: var(--shadow);
    rotate: -3deg
}

.h17-prod.is-2 {
    margin-inline-start:22%;rotate: 2.5deg
}

.h17-prod-img {
    display: block;
    aspect-ratio: 1 / .82;
    border-radius: 14px
}

.h17-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink)
}

.h17-prod-body {
    padding: .6rem .45rem .3rem;
    line-height: 1.25
}

.h17-prod-body b {
    display: block;
    font-size: .9rem
}

.h17-price {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    margin-top: .15rem
}

.h17-price s {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .78rem;
    color: var(--muted)
}

.h17-prod-body small {
    font-size: .74rem;
    color: var(--muted)
}

.h17-prod-body small .bi {
    color: #f5a623
}

.h17-add {
    position: absolute;
    right: .9rem;
    bottom: .9rem;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: #fff;
    font-size: .95rem
}

[data-bs-theme="dark"] .h17-add {
    background: var(--brand);
    color: var(--ink)
}

.h17-panel {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 1.1rem 1.2rem 1.2rem;
    box-shadow: var(--shadow);
    container-type: inline-size
}

.h17-panel-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line);
    font-size: .82rem
}

.h17-store {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    margin-inline-end:auto}

.h17-store .bi {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink)
}

.h17-range {
    display: inline-flex;
    padding: .2rem;
    border-radius: 999px;
    background: var(--surface-2)
}

.h17-range span {
    padding: .2rem .65rem;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 600
}

.h17-range .on {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,.12)
}

.h17-live {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--muted)
}

.h17-live span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.2);
    animation: h17-blink 1.6s ease-in-out infinite
}

@keyframes h17-blink {
    50% {
        opacity: .35
    }
}

.h17-kpis {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .6rem;
    margin: 1rem 0
}

.h17-kpis div {
    padding: .75rem .85rem;
    border-radius: 16px;
    background: var(--surface-2);
    line-height: 1.15;
    min-width: 0
}

.h17-kpis .is-main {
    background: color-mix(in srgb,var(--brand) 55%,var(--surface));
    color: var(--ink)
}

[data-bs-theme="dark"] .h17-kpis .is-main {
    background: var(--brand)
}

.h17-kpis small {
    display: block;
    font-size: .74rem;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: .3rem
}

.h17-kpis .is-main small {
    color: rgba(18,18,18,.65)
}

.h17-kpis b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1rem,4.4cqw,1.7rem);
    letter-spacing: -.04em;
    white-space: nowrap
}

.h17-kpis em {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-style: normal;
    font-size: .74rem;
    font-weight: 700;
    color: #15803d;
    margin-top: .3rem
}

[data-bs-theme="dark"] .h17-kpis em {
    color: #4ade80
}

.h17-kpis .is-main em {
    color: var(--ink)
}

.h17-chart-box {
    position: relative;
    height: 150px
}

.h17-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible
}

.h17-grid {
    fill: none;
    stroke: var(--line);
    stroke-dasharray: 3 5;
    vector-effect: non-scaling-stroke
}

.h17-stop {
    stop-color: var(--brand-2)
}

.h17-line {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke
}

.h17-prev {
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
    opacity: .6;
    vector-effect: non-scaling-stroke
}

[data-bs-theme="dark"] .h17-stop {
    stop-color: var(--brand)
}

[data-bs-theme="dark"] .h17-line {
    stroke: var(--brand)
}

.h17-pt {
    position: absolute;
    left: 91.67%;
    top: 16%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--brand-2);
    transform: translate(-50%,-50%)
}

[data-bs-theme="dark"] .h17-pt {
    border-color: var(--brand)
}

.h17-tip {
    position: absolute;
    right: 12%;
    top: 0;
    transform: translateY(-30%);
    padding: .35rem .7rem;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font-size: .72rem;
    line-height: 1.2
}

.h17-tip b {
    display: block;
    font-size: .95rem;
    font-family: var(--font-display)
}

[data-bs-theme="dark"] .h17-tip {
    background: #fff;
    color: var(--ink)
}

.h17-days {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--muted);
    margin-top: .5rem
}

.h17-split {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line)
}

.h17-split-bar {
    display: flex;
    gap: 3px;
    height: 10px;
    border-radius: 999px;
    overflow: hidden
}

.h17-split-bar i,.h17-split li span {
    background: var(--brand-2)
}

.h17-split-bar i {
    width: var(--w)
}

.h17-split-bar i:nth-child(2),.h17-split li:nth-child(2) span {
    background: var(--coral)
}

.h17-split-bar i:nth-child(3),.h17-split li:nth-child(3) span {
    background: var(--brand)
}

.h17-split-bar i:nth-child(4),.h17-split li:nth-child(4) span {
    background: var(--muted)
}

.h17-split ul {
    list-style: none;
    padding: 0;
    margin: .6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    font-size: .74rem;
    color: var(--muted)
}

.h17-split li {
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.h17-split li span {
    width: 8px;
    height: 8px;
    border-radius: 3px
}

.h17-orders {
    display: grid;
    gap: .55rem;
    position: relative;
    z-index: 2;
    margin-inline-start:-.75rem}

.h17-order {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .8rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: .8rem;
    line-height: 1.25
}

.h17-order>div {
    min-width: 0;
    flex: 1
}

.h17-order b {
    display: block;
    font-size: .85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h17-order small {
    display: block;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h17-order time {
    align-self: flex-start;
    font-size: .7rem;
    color: var(--muted)
}

.h17-order-ic {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb,var(--brand) 45%,var(--surface));
    color: var(--ink)
}

[data-bs-theme="dark"] .h17-order-ic {
    background: var(--brand)
}

.h17-order-ic.is-amz {
    background: #232f3e;
    color: #ff9900
}

.h17-order-ic.is-mail {
    background: color-mix(in srgb,var(--coral) 30%,var(--surface));
    color: var(--text)
}

.h17-order.is-new {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand-2) 15%,transparent),var(--shadow);
    animation: h17-pop 5s cubic-bezier(.2,.7,.2,1) infinite
}

[data-bs-theme="dark"] .h17-order.is-new {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb,var(--brand) 15%,transparent),var(--shadow)
}

.h17-order:nth-child(3) {
    opacity: .8
}

.h17-order:nth-child(4) {
    opacity: .55;
    scale: .96
}

@keyframes h17-pop {
    0% {
        transform: translateY(-14px);
        opacity: 0
    }

    8%,100% {
        transform: none;
        opacity: 1
    }
}

.h17-today {
    margin-top: .35rem;
    padding: 1rem 1.1rem;
    border-radius: 20px;
    background: var(--brand-2);
    color: #fff;
    line-height: 1.2
}

.h17-today small {
    display: block;
    font-size: .75rem;
    opacity: .8
}

.h17-today b {
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: -.05em;
    line-height: 1.05
}

.h17-today span {
    font-size: .75rem;
    opacity: .85
}

@media (prefers-reduced-motion:reduce) {
    .h17-order.is-new,.h17-live span {
        animation: none
    }
}

@media (max-width: 1199.98px) {
    .h17-stage {
        grid-template-columns:1fr 2.4fr 1.2fr;
        gap: 1rem
    }

    .h17-kpis {
        grid-template-columns: repeat(2,1fr)
    }

    .h17-prods {
        margin-inline-end:-1.5rem}

    .h17-orders {
        margin-inline-start:-.5rem}
}

@media (max-width: 991.98px) {
    .h17-stage {
        grid-template-columns:1fr 1fr;
        gap: 1.2rem;
        align-items: start
    }

    .h17-panel {
        grid-column: 1 / -1;
        order: -1
    }

    .h17-kpis {
        grid-template-columns: repeat(4,1fr)
    }

    .h17-prods,.h17-orders {
        margin: 0
    }

    .h17-prods {
        grid-template-columns: 1fr 1fr;
        gap: .8rem
    }

    .h17-prod,.h17-prod.is-2 {
        rotate: none;
        margin: 0
    }
}

@media (max-width: 575.98px) {
    .h17-stage {
        grid-template-columns:1fr
    }

    .h17-panel {
        padding: .9rem;
        border-radius: 22px
    }

    .h17-kpis {
        grid-template-columns: 1fr 1fr
    }

    .h17-kpis b {
        font-size: 1.35rem
    }

    .h17-range span:first-child {
        display: none
    }

    .h17-chart-box {
        height: 120px
    }

    .h17-order:nth-child(4) {
        display: none
    }
}

.h17-chan {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 1.25rem
}

.h17-ch {
    grid-column: span 5;
    padding: 1.7rem;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease,border-color .3s ease
}

.h17-ch.is-store,.h17-ch.is-mail {
    grid-column: span 7
}

.h17-ch:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb,var(--text) 30%,transparent)
}

.h17-ch-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: 1.4rem
}

.h17-ch-ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: var(--ink);
    color: var(--brand)
}

[data-bs-theme="dark"] .h17-ch-ic {
    background: var(--brand);
    color: var(--ink)
}

.h17-ch h3 {
    margin-bottom: .5rem
}

.h17-ch>p {
    color: var(--muted);
    margin-bottom: 1.4rem;
    max-width: 34rem
}

.h17-ch-stats {
    list-style: none;
    padding: 1.1rem 0 0;
    margin: auto 0 0;
    display: flex;
    gap: 2.2rem;
    border-top: 1px solid var(--line)
}

.h17-ch-stats b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.h17-ch-stats span {
    font-size: .85rem;
    color: var(--muted)
}

.h17-mini-pdp {
    position: relative;
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 1rem;
    padding: .8rem;
    border-radius: 18px;
    background: var(--surface-2);
    margin-bottom: 1.4rem
}

.h17-mini-img {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 12px
}

.h17-mini-pdp>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .55rem
}

.h17-mini-pdp i {
    display: block;
    height: 9px;
    border-radius: 99px;
    background: color-mix(in srgb,var(--text) 16%,transparent)
}

.h17-mini-pdp .w70 {
    width: 70%;
    height: 12px
}

.h17-mini-pdp .w40 {
    width: 40%
}

.h17-mini-swatch {
    display: flex;
    gap: .35rem
}

.h17-mini-swatch i {
    width: 16px;
    height: 16px !important;
    border-radius: 50%;
    background: var(--brand-2)
}

.h17-mini-swatch i:nth-child(2) {
    background: var(--coral)
}

.h17-mini-swatch i:nth-child(3) {
    background: var(--brand)
}

.h17-mini-btn {
    align-self: flex-start;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .78rem;
    font-weight: 600
}

[data-bs-theme="dark"] .h17-mini-btn {
    background: #fff;
    color: var(--ink)
}

.h17-speed {
    position: absolute;
    right: .9rem;
    top: .9rem;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    font-size: .55rem;
    line-height: 1.1;
    color: var(--muted);
    background: var(--surface);
    border: 4px solid #22c55e
}

.h17-speed b {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text)
}

.h17-mini-list {
    margin-bottom: 1.4rem;
    border-radius: 18px;
    background: var(--surface-2);
    padding: .4rem 1rem
}

.h17-mini-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    font-size: .9rem
}

.h17-mini-list div + div {
    border-top: 1px dashed var(--line)
}

.h17-mini-list span {
    color: var(--muted)
}

.h17-mini-list b {
    font-family: var(--font-display)
}

.h17-mini-ads {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .6rem;
    margin-bottom: 1.4rem
}

.h17-mini-ads>span {
    position: relative;
    aspect-ratio: 1;
    border-radius: 14px
}

.h17-mini-ads b {
    position: absolute;
    left: .45rem;
    bottom: .45rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15)
}

.h17-mini-sms {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    border-radius: 18px;
    background: var(--surface-2);
    margin-bottom: 1.4rem;
    font-size: .88rem;
    line-height: 1.4
}

.h17-mini-sms span {
    max-width: 78%;
    padding: .6rem .9rem;
    border-radius: 18px
}

.h17-mini-sms .in {
    align-self: flex-start;
    background: var(--surface);
    border-bottom-left-radius: 6px
}

.h17-mini-sms .out {
    align-self: flex-end;
    background: var(--brand-2);
    color: #fff;
    border-bottom-right-radius: 6px
}

@media (max-width: 991.98px) {
    .h17-ch,.h17-ch.is-store,.h17-ch.is-mail {
        grid-column:span 6
    }
}

@media (max-width: 767.98px) {
    .h17-ch,.h17-ch.is-store,.h17-ch.is-mail {
        grid-column:1 / -1
    }
}

@media (max-width: 575.98px) {
    .h17-ch {
        padding:1.3rem
    }

    .h17-mini-pdp {
        grid-template-columns: 1fr
    }

    .h17-speed {
        width: 54px;
        height: 54px
    }
}

.h17-funnel {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.25rem
}

.h17-funnel>li {
    display: flex;
    flex-direction: column
}

.h17-f-bar {
    height: 250px;
    display: flex;
    align-items: flex-end;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px dashed var(--line);
    margin-bottom: 1.4rem;
    overflow: hidden
}

.h17-f-bar span {
    width: 100%;
    height: var(--h);
    min-height: 58px;
    border-radius: 16px;
    background: linear-gradient(180deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#050506));
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    padding: .6rem .9rem;
    display: flex;
    align-items: flex-start
}

.h17-f-txt small {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 600
}

.h17-f-txt h3 {
    margin: .3rem 0 .7rem
}

.h17-drop {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    background: color-mix(in srgb,var(--coral) 22%,transparent);
    color: #ffb39f
}

.h17-drop.is-win {
    background: color-mix(in srgb,var(--brand) 20%,transparent);
    color: var(--brand)
}

.h17-f-txt ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: .5rem;
    font-size: .92rem;
    color: var(--muted)
}

.h17-f-txt ul li {
    display: flex;
    gap: .5rem
}

.h17-f-txt ul li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    color: var(--brand)
}

.h17-funnel-sum {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 3rem;
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h17-funnel-sum p {
    flex: 1;
    font-size: 1.05rem
}

.h17-sum-ic {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.3rem
}

@media (max-width: 991.98px) {
    .h17-funnel {
        grid-template-columns:1fr 1fr;
        row-gap: 2.5rem
    }

    .h17-f-bar {
        height: 180px
    }
}

@media (max-width: 575.98px) {
    .h17-funnel {
        grid-template-columns:1fr;
        row-gap: 2rem
    }

    .h17-f-bar {
        height: auto;
        border: 0;
        background: none;
        margin-bottom: 1rem
    }

    .h17-f-bar span {
        width: max(var(--h),36%);
        height: 52px;
        align-items: center
    }

    .h17-funnel-sum {
        flex-wrap: wrap
    }

    .h17-funnel-sum .btn {
        width: 100%;
        justify-content: center
    }
}

.h17-testsum {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.4rem
}

.h17-testsum b {
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: -.05em;
    line-height: 1
}

.h17-testsum li>span {
    font-size: .85rem;
    color: var(--muted)
}

.h17-ab {
    padding: 1.4rem;
    height: 100%;
    display: flex;
    flex-direction: column
}

.h17-ab-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem
}

.h17-ab-head small {
    color: var(--muted);
    font-size: .8rem
}

.h17-ab-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    margin-bottom: 1.3rem
}

.h17-wire {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 180px;
    padding: .7rem;
    border-radius: 14px;
    background: var(--surface-2);
    border: 2px solid transparent
}

.h17-wire small {
    font-size: .7rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 2px
}

.h17-wire i {
    display: block;
    height: 8px;
    border-radius: 99px;
    background: color-mix(in srgb,var(--text) 15%,transparent)
}

.h17-wire .img {
    height: 58px;
    border-radius: 9px
}

.h17-wire .w80 {
    width: 80%
}

.h17-wire .w50 {
    width: 50%
}

.h17-wire .btn-w {
    height: 18px;
    margin-top: auto;
    background: color-mix(in srgb,var(--text) 35%,transparent)
}

.h17-wire .row-i {
    height: 22px;
    border-radius: 7px;
    background: var(--surface)
}

.h17-wire .field {
    height: 16px;
    border-radius: 5px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.h17-wire.is-win {
    border-color: var(--brand-2);
    background: color-mix(in srgb,var(--brand-2) 8%,var(--surface-2))
}

[data-bs-theme="dark"] .h17-wire.is-win {
    border-color: var(--brand);
    background: color-mix(in srgb,var(--brand) 6%,var(--surface-2))
}

.h17-wire.is-win small {
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h17-wire.is-win small {
    color: var(--brand)
}

.h17-wire.is-win .btn-w {
    background: var(--brand-2)
}

[data-bs-theme="dark"] .h17-wire.is-win .btn-w {
    background: var(--brand)
}

.h17-wire .stars {
    width: 55%;
    height: 7px;
    background: repeating-linear-gradient(90deg,#f5a623 0 7px,transparent 7px 10px)
}

.h17-wire .sticky {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -10px;
    height: 14px;
    background: var(--ink);
    box-shadow: 0 4px 10px rgba(0,0,0,.25)
}

[data-bs-theme="dark"] .h17-wire .sticky {
    background: #fff
}

.h17-wire .ship {
    height: 10px;
    background: linear-gradient(90deg,#22c55e 72%,color-mix(in srgb,var(--text) 15%,transparent) 72%)
}

.h17-wire .upsell {
    height: 22px;
    border-radius: 7px;
    background: transparent;
    border: 1.5px dashed var(--brand-2)
}

[data-bs-theme="dark"] .h17-wire .upsell {
    border-color: var(--brand)
}

.h17-wire .pay {
    height: 20px;
    border-radius: 6px;
    background: var(--ink)
}

[data-bs-theme="dark"] .h17-wire .pay {
    background: #fff
}

.h17-wire .trust {
    width: 60%;
    height: 7px;
    background: #22c55e;
    opacity: .7
}

.h17-ab h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem
}

.h17-ab-res {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.25
}

.h17-ab-res small {
    display: block;
    font-weight: 400;
    font-size: .76rem;
    color: var(--muted);
    margin-top: .2rem
}

.h17-up {
    flex: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -.04em;
    padding: .3rem .75rem;
    border-radius: 14px;
    background: var(--brand);
    color: var(--ink)
}

.h17-tabs {
    flex-direction: column;
    gap: .6rem
}

.h17-tabs .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .9rem;
    text-align: start;
    padding: .9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    transition: background-color .25s ease,color .25s ease,transform .25s ease
}

.h17-tabs .nav-link:hover {
    transform: translateX(4px)
}

.h17-tabs .nav-link>.bi {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    font-size: 1.15rem
}

.h17-tabs .nav-link small {
    display: block;
    font-weight: 400;
    font-size: .82rem;
    color: var(--muted)
}

.h17-tabs .nav-link.active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

.h17-tabs .nav-link.active small {
    color: rgba(255,255,255,.7)
}

.h17-tabs .nav-link.active>.bi {
    background: var(--brand);
    color: var(--ink)
}

[data-bs-theme="dark"] .h17-tabs .nav-link.active {
    background: #fff;
    color: var(--ink);
    border-color: #fff
}

[data-bs-theme="dark"] .h17-tabs .nav-link.active small {
    color: rgba(18,18,18,.65)
}

.h17-flowbox {
    padding: clamp(1.3rem,3vw,2rem)
}

.h17-flow-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: 1.2rem
}

.h17-flow-head h3 {
    margin: 0
}

.h17-rpr {
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-size: .85rem
}

.h17-rpr b {
    font-family: var(--font-display);
    font-size: 1.05rem
}

.h17-flow {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .55rem;
    counter-reset: h17f
}

.h17-flow li {
    display: grid;
    grid-template-columns: 5.2rem 42px 1fr;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border-radius: 16px;
    background: var(--paper);
    border: 1px solid var(--line)
}

.h17-when {
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em
}

.h17-ch-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb,var(--brand-2) 16%,var(--surface));
    color: var(--brand-2-text)
}

.h17-ch-dot.is-sms {
    background: color-mix(in srgb,var(--coral) 22%,var(--surface));
    color: var(--text)
}

.h17-ch-dot.is-ad {
    background: color-mix(in srgb,var(--brand) 45%,var(--surface));
    color: var(--ink)
}

[data-bs-theme="dark"] .h17-ch-dot {
    color: #fff
}

.h17-flow b {
    display: block;
    font-size: .98rem;
    line-height: 1.3
}

.h17-flow small {
    color: var(--muted);
    font-size: .82rem
}

.h17-flow-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: 1.4rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line)
}

.h17-flow-foot b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: -.04em;
    line-height: 1.05
}

.h17-flow-foot span {
    font-size: .82rem;
    color: var(--muted)
}

.h17-flow-foot .btn {
    margin-inline-start:auto}

@media (min-width: 576px) and (max-width:991.98px) {
    .h17-tabs {
        flex-direction:row
    }

    .h17-tabs .nav-item {
        flex: 1 1 0;
        min-width: 0
    }
}

@media (max-width: 575.98px) {
    .h17-flow li {
        grid-template-columns:36px 1fr;
        gap: .2rem .8rem;
        padding: .7rem .8rem
    }

    .h17-when {
        grid-column: 2;
        grid-row: 1
    }

    .h17-ch-dot {
        grid-row: 1 / span 2;
        width: 36px;
        height: 36px
    }

    .h17-flow li>div {
        grid-column: 2
    }

    .h17-flow-foot .btn {
        margin: 0;
        width: 100%;
        justify-content: center
    }
}

.h17-brand {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .35s ease,box-shadow .35s ease
}

.h17-brand:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow)
}

.h17-brand-img {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10
}

.h17-brand-img img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.h17-brand:hover .h17-brand-img img {
    transform: scale(1.05)
}

.h17-brand-name {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em
}

.h17-brand-name .bi {
    color: var(--brand-2);
    font-size: .9rem
}

[data-bs-theme="dark"] .h17-brand-name .bi {
    color: var(--brand)
}

.h17-brand-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.3rem 1.4rem 1.4rem
}

.h17-brand-rows {
    display: grid
}

.h17-brand-rows>span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .65rem 0;
    border-top: 1px solid var(--line)
}

.h17-brand-rows small {
    color: var(--muted);
    font-size: .88rem
}

.h17-brand-rows b {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -.03em;
    white-space: nowrap
}

.h17-brand-rows .bi {
    font-size: .85rem;
    color: var(--muted)
}

.h17-brand-go {
    margin-top: auto;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .4rem
}

.h17-brand:hover .h17-brand-go {
    text-decoration: underline;
    text-underline-offset: 4px
}

.h17-brand.is-feat {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: #fff;
    --muted: rgba(255,255,255,.72);
    --line: rgba(255,255,255,.2)
}

.h17-brand.is-feat .tag {
    background: rgba(255,255,255,.16)
}

.h17-brand.is-feat .h17-brand-rows b {
    color: var(--brand)
}

.h17-quote {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 3rem 0 0;
    padding: 1.5rem 1.8rem;
    border-radius: var(--radius);
    border: 1.5px dashed var(--line)
}

.h17-quote blockquote {
    flex: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem,2vw,1.45rem);
    letter-spacing: -.02em;
    line-height: 1.35
}

.h17-quote figcaption {
    flex: none;
    font-size: .88rem;
    line-height: 1.35
}

.h17-quote figcaption strong,.h17-quote figcaption span {
    display: block
}

.h17-quote figcaption span {
    color: var(--muted)
}

@media (max-width: 767.98px) {
    .h17-quote {
        flex-wrap:wrap;
        padding: 1.3rem
    }

    .h17-quote blockquote {
        flex-basis: 100%;
        order: -1
    }
}

.h17-bands {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: 1.4rem;
    margin-bottom: 1.6rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted)
}

.h17-bands::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg,color-mix(in srgb,var(--brand) 50%,var(--surface)),var(--brand) 40%,var(--brand-2))
}

.h17-bands span {
    position: relative
}

.h17-bands span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1.75rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--text);
    transform: translateX(-50%)
}

.h17-bands span:first-child::before {
    left: 0;
    transform: none
}

.h17-bands span:last-child::before {
    left: auto;
    right: 0;
    transform: none
}

.h17-band {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 1rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    background: var(--surface-2)
}

.h17-plan.featured .h17-band {
    background: rgba(255,255,255,.18);
    margin-bottom: 0
}

.h17-plan.featured>.d-flex {
    margin-bottom: 1rem
}

.h17-plan h3 {
    margin-bottom: .4rem
}

@media (max-width: 991.98px) {
    .h17-bands {
        display:none
    }
}

.h18-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem);
    padding-bottom: clamp(4rem,7vw,6rem)
}

.h18-hero h1 {
    font-size: clamp(2.6rem,5.2vw,4.7rem)
}

.h18-hero .hero-bg .b2 {
    background: color-mix(in srgb,var(--coral) 40%,#fff)
}

.h18-proof {
    list-style: none;
    padding: 0;
    margin: 2.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.2rem
}

.h18-proof li {
    border-inline-start:2px solid var(--brand);padding-inline-start: .9rem;
    line-height: 1.2
}

.h18-proof b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: -.04em
}

.h18-proof span {
    font-size: .85rem;
    color: var(--muted)
}

.h18-art {
    position: relative;
    padding: 2.4em 0 3.6em;
    container-type: inline-size;
    font-size: clamp(9px,2.05cqw,15.5px)
}

.h18-board {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 2em;
    padding: 1.1em;
    box-shadow: var(--shadow)
}

.h18-board-bar {
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .2em .3em 1em
}

.h18-board-title {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-weight: 700;
    font-size: 1.05em
}

.h18-board-title .bi {
    width: 2em;
    height: 2em;
    border-radius: .6em;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--brand)
}

[data-bs-theme="dark"] .h18-board-title .bi {
    background: var(--brand);
    color: var(--ink)
}

.h18-board-total {
    padding: .3em .8em;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: .85em;
    font-weight: 600
}

.h18-owners {
    display: flex;
    margin-inline-start:auto}

.h18-owners .avatar,.h18-who .avatar,.h18-committee .avatar {
    width: 2.2em;
    height: 2.2em;
    font-size: .75em;
    border-color: var(--surface)
}

.h18-owners .avatar + .avatar {
    margin-inline-start:-.6em}

.h18-cols {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: .65em
}

.h18-col {
    display: flex;
    flex-direction: column;
    gap: .5em;
    min-width: 0;
    padding: .6em;
    border-radius: 1.1em;
    background: var(--surface-2);
    border-top: 3px solid var(--muted);
    min-height: 21em
}

.h18-col:nth-child(2) {
    border-top-color: var(--brand-2)
}

.h18-col:nth-child(3) {
    border-top-color: var(--coral)
}

.h18-col:nth-child(4) {
    border-top-color: var(--brand)
}

.h18-col-head {
    display: flex;
    align-items: center;
    gap: .4em;
    padding: .2em .2em .3em;
    font-size: .85em
}

.h18-col-head span {
    padding: 0 .5em;
    border-radius: 999px;
    background: var(--surface);
    font-weight: 700;
    font-size: .85em
}

.h18-col-head small {
    margin-inline-start:auto;color: var(--muted);
    font-weight: 600
}

.h18-deal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25em;
    padding: .7em .75em;
    border-radius: .9em;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    font-size: .82em;
    line-height: 1.25
}

.h18-deal b {
    font-size: 1.02em;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h18-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2em;
    letter-spacing: -.03em
}

.h18-dtag {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .15em .55em;
    border-radius: 999px;
    font-size: .82em;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--muted)
}

.h18-dtag.is-li {
    background: color-mix(in srgb,var(--brand-2) 14%,var(--surface));
    color: var(--brand-2-text)
}

.h18-dtag.is-cal {
    background: color-mix(in srgb,var(--coral) 22%,var(--surface));
    color: var(--text)
}

[data-bs-theme="dark"] .h18-dtag.is-li {
    color: #fff
}

.h18-intent {
    align-self: stretch;
    height: 4px;
    margin-top: .3em;
    border-radius: 99px;
    background: var(--surface-2);
    overflow: hidden
}

.h18-intent::after {
    content: "";
    display: block;
    width: var(--w);
    height: 100%;
    background: var(--brand-2)
}

.h18-deal.is-ghost {
    opacity: .5
}

.h18-deal.is-moving {
    border-color: var(--brand-2);
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.35);
    rotate: -3deg;
    translate: .5em 0;
    animation: h18-move 4s ease-in-out infinite
}

[data-bs-theme="dark"] .h18-deal.is-moving {
    border-color: var(--brand)
}

@keyframes h18-move {
    0%,100% {
        translate: .5em 0
    }

    50% {
        translate: 1.1em -.3em
    }
}

.h18-who {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    margin-top: .2em;
    font-size: .9em;
    color: var(--muted)
}

.h18-deal.is-won {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

.h18-deal.is-won .h18-dtag {
    background: rgba(18,18,18,.12);
    color: var(--ink)
}

.h18-won-ic {
    position: absolute;
    top: .6em;
    right: .6em;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--brand);
    font-size: .9em
}

.h18-meet {
    position: absolute;
    z-index: 2;
    left: -3%;
    bottom: 0;
    width: 33%;
    padding: 1.1em 1.2em;
    border-radius: 1.5em;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow)
}

[data-bs-theme="dark"] .h18-meet {
    background: var(--surface-2);
    border: 1px solid var(--line)
}

.h18-meet small {
    display: block;
    font-size: .8em;
    opacity: .75
}

.h18-meet-n {
    display: flex;
    align-items: baseline;
    gap: .5em
}

.h18-meet-n b {
    font-family: var(--font-display);
    font-size: 3.4em;
    letter-spacing: -.05em;
    line-height: 1.05
}

.h18-meet-n span {
    font-size: .85em;
    font-weight: 700;
    color: var(--brand)
}

.h18-week {
    display: flex;
    align-items: flex-end;
    gap: .4em;
    height: 3.2em;
    margin-bottom: 1.2em
}

.h18-week i {
    position: relative;
    flex: 1;
    height: var(--h);
    border-radius: .35em;
    background: rgba(255,255,255,.18)
}

.h18-week i.on {
    background: var(--brand)
}

.h18-week em {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: .25em;
    text-align: center;
    font-style: normal;
    font-size: .7em;
    opacity: .7
}

.h18-toast {
    position: absolute;
    z-index: 2;
    right: -2%;
    top: 0;
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .7em 1em .7em .7em;
    border-radius: 1.1em;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: .9em;
    line-height: 1.25
}

.h18-toast small {
    display: block;
    color: var(--muted);
    font-size: .85em
}

.h18-toast-ic {
    width: 2.4em;
    height: 2.4em;
    border-radius: .8em;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: #fff
}

@media (prefers-reduced-motion:reduce) {
    .h18-deal.is-moving {
        animation: none
    }
}

@media (max-width: 575.98px) {
    .h18-art {
        font-size:3.1cqw;
        padding-top: 4em;
        padding-bottom: 8em
    }

    .h18-cols {
        grid-template-columns: 1fr 1fr
    }

    .h18-col {
        min-height: 0
    }

    .h18-col .h18-deal:nth-child(n+3) {
        display: none
    }

    .h18-meet {
        left: 0;
        width: 52%
    }

    .h18-toast {
        right: 0
    }

    .h18-board-total {
        display: none
    }
}

.h18-icp {
    padding: clamp(1.3rem,3vw,2rem);
    box-shadow: var(--shadow)
}

.h18-icp-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .4rem
}

.h18-icp-head b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.02em
}

.h18-icp-head small {
    color: var(--muted)
}

.h18-icp-ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: #fff;
    font-size: 1.3rem
}

.h18-group {
    margin-top: 1.3rem
}

.h18-group legend {
    float: left;
    width: 100%;
    margin-bottom: .6rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.h18-chip {
    position: relative;
    display: inline-flex;
    margin: 0 .3rem .45rem 0;
    cursor: pointer
}

.h18-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px
}

.h18-chip span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: .92rem;
    font-weight: 500;
    transition: background-color .2s ease,color .2s ease,border-color .2s ease
}

.h18-chip:hover span {
    border-color: var(--text)
}

.h18-chip input:checked + span {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff
}

.h18-chip input:checked + span::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    color: var(--brand)
}

[data-bs-theme="dark"] .h18-chip input:checked + span {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

[data-bs-theme="dark"] .h18-chip input:checked + span::before {
    color: var(--ink)
}

.h18-chip input:focus-visible + span {
    outline: 3px solid var(--brand-2);
    outline-offset: 2px
}

.h18-icp-out {
    clear: both;
    display: grid;
    grid-template-columns: repeat(3,auto) 1fr;
    align-items: center;
    gap: 1rem 1.8rem;
    margin-top: 1.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line)
}

.h18-icp-out b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: -.04em;
    line-height: 1.05
}

.h18-icp-out small {
    font-size: .82rem;
    color: var(--muted)
}

.h18-icp-out .btn {
    justify-self: end
}

.h18-icp-note {
    margin: .9rem 0 0;
    font-size: .8rem;
    color: var(--muted)
}

@media (max-width: 767.98px) {
    .h18-icp-out {
        grid-template-columns:repeat(3,1fr);
        gap: 1rem;
        align-items: start
    }

    .h18-icp-out .btn {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center
    }

    .h18-icp-out b {
        font-size: 1.45rem
    }
}

.h18-chans {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--line)
}

.h18-chans li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0,1.1fr) minmax(0,1.6fr) 11rem;
    align-items: center;
    gap: 1.5rem;
    padding: 1.6rem 1.2rem;
    border-top: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: background-color .3s ease,color .3s ease
}

.h18-chans li:hover {
    background: var(--brand);
    color: var(--ink);
    --muted: rgba(18,18,18,.7)
}

.h18-ch-no {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--muted)
}

.h18-ch-name {
    display: flex;
    align-items: center;
    gap: .9rem
}

.h18-ch-name .bi {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--brand);
    font-size: 1.15rem
}

[data-bs-theme="dark"] .h18-ch-name .bi {
    background: var(--brand);
    color: var(--ink)
}

.h18-ch-name b {
    font-family: var(--font-display);
    font-size: clamp(1.2rem,2vw,1.55rem);
    letter-spacing: -.03em;
    line-height: 1.15
}

.h18-chans p {
    margin: 0;
    color: var(--muted)
}

.h18-ch-kpi {
    text-align: end;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.25
}

.h18-ch-kpi b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: -.04em;
    color: var(--text)
}

.h18-chans li:hover .h18-ch-kpi b {
    color: var(--ink)
}

@media (max-width: 991.98px) {
    .h18-chans li {
        grid-template-columns:2.5rem 1fr auto;
        gap: .6rem 1.2rem
    }

    .h18-chans p {
        grid-column: 2 / -1;
        grid-row: 2
    }
}

@media (max-width: 575.98px) {
    .h18-chans li {
        grid-template-columns:1fr auto;
        padding: 1.3rem .4rem
    }

    .h18-ch-no {
        display: none
    }

    .h18-chans p {
        grid-column: 1 / -1
    }

    .h18-ch-name .bi {
        width: 40px;
        height: 40px
    }
}

.h18-res {
    height: 100%;
    padding: 1.8rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h18-res small {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.h18-res-n {
    display: block;
    margin: .6rem 0 .5rem;
    font-family: var(--font-display);
    font-size: clamp(2.8rem,4.6vw,4rem);
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--brand)
}

.h18-res p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 1.6rem
}

.h18-qbars {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    height: 84px;
    margin-bottom: 1.4rem
}

.h18-qbars i {
    position: relative;
    flex: 1;
    height: var(--h);
    border-radius: 10px 10px 4px 4px;
    background: rgba(255,255,255,.14)
}

.h18-qbars i:last-child {
    background: var(--brand)
}

.h18-qbars em {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: .3rem;
    text-align: center;
    font-style: normal;
    font-size: .75rem;
    color: var(--muted)
}

.h18-cmp {
    display: grid;
    gap: .8rem
}

.h18-cmp div {
    display: grid;
    grid-template-columns: 4.2rem 1fr 3.6rem;
    align-items: center;
    gap: .7rem;
    font-size: .85rem
}

.h18-cmp span {
    color: var(--muted)
}

.h18-cmp i {
    display: block;
    width: var(--w);
    height: 12px;
    border-radius: 99px;
    background: rgba(255,255,255,.25)
}

.h18-cmp em {
    font-style: normal;
    font-weight: 600;
    text-align: end
}

.h18-cmp .is-us span,.h18-cmp .is-us em {
    color: var(--brand)
}

.h18-cmp .is-us i {
    background: var(--brand)
}

.h18-mini-stats {
    list-style: none;
    padding: 2rem 0 0;
    margin: 2.5rem 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.2rem 2rem
}

.h18-mini-stats li {
    display: flex;
    align-items: baseline;
    gap: .7rem
}

.h18-mini-stats b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.03em;
    color: var(--brand);
    white-space: nowrap
}

.h18-mini-stats b .bi {
    font-size: .9rem
}

.h18-mini-stats span {
    color: var(--muted);
    font-size: .92rem
}

.h18-acct {
    padding: 1.5rem
}

@media (min-width: 992px) {
    .h18-acct {
        position:sticky;
        top: 110px
    }
}

.h18-acct-head {
    display: flex;
    align-items: center;
    gap: .9rem
}

.h18-acct-head>div {
    flex: 1;
    line-height: 1.25
}

.h18-acct-head b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -.02em
}

.h18-acct-head small {
    color: var(--muted);
    font-size: .85rem
}

.h18-acct-logo {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: #fff;
    font-size: 1.35rem
}

.h18-acct-label {
    margin: 1.4rem 0 .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.h18-committee {
    list-style: none;
    padding: 0;
    margin: 0
}

.h18-committee li {
    display: grid;
    grid-template-columns: auto 1fr 72px;
    align-items: center;
    gap: .8rem;
    padding: .7rem 0;
    border-top: 1px solid var(--line);
    line-height: 1.25
}

.h18-committee .avatar {
    font-size: .8rem;
    width: 40px;
    height: 40px
}

.h18-committee b {
    display: block;
    font-size: .95rem
}

.h18-committee small {
    color: var(--muted);
    font-size: .8rem
}

.h18-heat {
    display: block;
    height: 8px;
    border-radius: 99px;
    background: var(--surface-2);
    overflow: hidden
}

.h18-heat::after {
    content: "";
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--coral),var(--brand-2))
}

.h18-play {
    list-style: none;
    padding: 0;
    margin: 0
}

.h18-play li {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1.4rem
}

.h18-wk {
    justify-self: start;
    align-self: start;
    margin-top: .15rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap
}

.h18-play li>div {
    position: relative;
    padding: 0 0 2rem 1.8rem;
    border-left: 2px solid var(--line)
}

.h18-play li>div::before {
    content: "";
    position: absolute;
    left: -8px;
    top: .35rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--brand-2)
}

[data-bs-theme="dark"] .h18-play li>div::before {
    border-color: var(--brand)
}

.h18-play h3 {
    font-size: 1.3rem;
    margin-bottom: .4rem
}

.h18-play p {
    margin: 0;
    color: var(--muted)
}

.h18-play-kpi {
    display: inline-block;
    margin-top: .7rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb,var(--brand-2) 12%,transparent);
    color: var(--brand-2-text);
    font-size: .82rem;
    font-weight: 600
}

[data-bs-theme="dark"] .h18-play-kpi {
    color: #fff;
    background: color-mix(in srgb,var(--brand-2) 30%,transparent)
}

.h18-play li.is-won>div {
    padding: 1.2rem 1.4rem 1.2rem 1.8rem;
    border-radius: 0 20px 20px 0;
    border-left-color: var(--ink);
    background: var(--brand);
    color: var(--ink)
}

.h18-play li.is-won p {
    color: rgba(18,18,18,.75)
}

.h18-play li.is-won>div::before {
    top: 1.55rem;
    background: var(--brand);
    border-color: var(--ink)
}

.h18-play li.is-won .h18-wk {
    background: var(--ink);
    color: var(--brand)
}

[data-bs-theme="dark"] .h18-play li.is-won .h18-wk {
    background: var(--brand);
    color: var(--ink)
}

@media (max-width: 575.98px) {
    .h18-play li {
        grid-template-columns:1fr;
        gap: .5rem
    }

    .h18-wk {
        margin-inline-start:1.8rem}

    .h18-play li>div {
        padding-bottom: 1.6rem
    }

    .h18-play li {
        position: relative
    }
}

.h18-align {
    position: relative;
    margin-bottom: 1.5rem
}

.h18-align-img {
    aspect-ratio: 16 / 10;
    border-radius: 28px 160px 28px 28px
}

.h18-sla {
    position: absolute;
    right: -1rem;
    bottom: -1.5rem;
    padding: 1rem 1.3rem;
    border-radius: 20px;
    background: var(--brand);
    color: var(--ink);
    box-shadow: var(--shadow);
    line-height: 1.2
}

.h18-sla small {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .75
}

.h18-sla b {
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: -.05em;
    line-height: 1.1
}

.h18-sla span {
    font-size: .85rem
}

.h18-step {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform .3s ease
}

.h18-step:hover {
    transform: translateY(-4px)
}

.h18-step-no {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--brand);
    font-family: var(--font-display);
    font-weight: 700
}

[data-bs-theme="dark"] .h18-step-no {
    background: var(--brand);
    color: var(--ink)
}

.h18-step h3 {
    font-size: 1.2rem;
    margin: 1.2rem 0 .5rem
}

.h18-step p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 1.2rem
}

.h18-step-who {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: .8rem;
    font-weight: 600
}

@media (max-width: 575.98px) {
    .h18-sla {
        right:.6rem;
        padding: .8rem 1rem
    }

    .h18-sla b {
        font-size: 1.9rem
    }

    .h18-align-img {
        border-radius: 22px 90px 22px 22px
    }
}

.h18-tools {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    gap: clamp(2rem,4vw,3.5rem);
    align-items: center;
    padding: clamp(1.6rem,4vw,3rem);
    border-radius: 32px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.h18-tools-head h2 {
    margin-bottom: 1rem
}

.h18-stack {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
    gap: 1.5rem
}

.h18-stack-g small {
    display: block;
    margin-bottom: .6rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.h18-stack-g ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.h18-stack-g li {
    padding: .4rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: .9rem;
    font-weight: 600
}

.h18-stack-g li.is-key {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .h18-stack-g li.is-key {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

@media (max-width: 991.98px) {
    .h18-tools {
        grid-template-columns:1fr
    }
}

.h18-cta .btn-line {
    border-color: var(--ink);
    color: var(--ink)
}

.h18-cta .btn-line:hover {
    background: var(--ink);
    color: #fff
}

.h18-slots {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    border-radius: 24px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 50px -24px rgba(18,18,18,.45)
}

.h18-slots-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    line-height: 1.25
}

.h18-slots-head b {
    display: block
}

.h18-slots-head small {
    color: var(--muted)
}

.h18-slots-day {
    margin: 1.2rem 0 .7rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted)
}

.h18-slot-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .5rem
}

.h18-slot-grid a {
    padding: .75rem .4rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    transition: background-color .2s ease,color .2s ease
}

.h18-slot-grid a:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff
}

.h18-slot-grid a.is-pick {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: #fff
}

[data-bs-theme="dark"] .h18-slot-grid a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink)
}

@media (max-width: 575.98px) {
    .h18-slot-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 992px) and (max-width:1199.98px) {
    .h18-col-head small {
        display:none
    }

    .h18-meet {
        left: -5%;
        width: 31%
    }
}

.h19-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h19-hero h1 {
    font-size: clamp(2.7rem,6vw,5.4rem);
    margin-bottom: 0
}

.h19-hero .lead {
    margin-bottom: 1.6rem
}

.h19-edit {
    position: relative;
    margin-top: clamp(2.2rem,5vw,3.8rem);
    padding: .8em;
    border-radius: var(--radius);
    background: #141416;
    color: #ece9e2;
    box-shadow: 0 30px 70px -30px rgba(18,18,18,.55);
    container-type: inline-size;
    font-size: clamp(9px,1.12cqw,14px)
}

[data-bs-theme="dark"] .h19-edit {
    background: #09090b;
    border: 1px solid rgba(255,255,255,.1)
}

.h19-bar {
    display: flex;
    align-items: center;
    gap: 1.1em;
    padding: .15em .4em .8em;
    font-size: .82em;
    color: rgba(255,255,255,.62);
    min-width: 0
}

.h19-dots {
    display: flex;
    gap: .45em;
    flex: none
}

.h19-dots i {
    width: .8em;
    height: .8em;
    border-radius: 50%;
    background: #ff5f57
}

.h19-dots i:nth-child(2) {
    background: #febc2e
}

.h19-dots i:nth-child(3) {
    background: #28c840
}

.h19-file {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0
}

.h19-file b {
    font-weight: 600;
    font-size: .85em;
    padding: .1em .5em;
    border-radius: 999px;
    background: rgba(255,255,255,.12)
}

.h19-saved {
    margin-inline-start:auto;display: inline-flex;
    align-items: center;
    gap: .45em;
    white-space: nowrap
}

.h19-saved .bi {
    color: var(--brand)
}

.h19-stage {
    display: grid;
    grid-template-columns: 1fr 15.5em;
    gap: .8em
}

.h19-view {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: .7em;
    overflow: hidden;
    background: #000
}

.h19-frame {
    position: absolute;
    inset: 0
}

.h19-frame img {
    object-position: 50% 60%
}

.h19-view::before,.h19-view::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 8%;
    background: rgba(0,0,0,.82);
    z-index: 1
}

.h19-view::before {
    top: 0
}

.h19-view::after {
    bottom: 0
}

.h19-safe {
    position: absolute;
    inset: 14% 7%;
    z-index: 1;
    pointer-events: none
}

.h19-safe i {
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    border: 2px solid rgba(255,255,255,.7)
}

.h19-safe i:nth-child(1) {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0
}

.h19-safe i:nth-child(2) {
    top: 0;
    right: 0;
    border-left: 0;
    border-bottom: 0
}

.h19-safe i:nth-child(3) {
    bottom: 0;
    left: 0;
    border-right: 0;
    border-top: 0
}

.h19-safe i:nth-child(4) {
    bottom: 0;
    right: 0;
    border-left: 0;
    border-top: 0
}

.h19-tc {
    position: absolute;
    z-index: 2;
    top: 10.5%;
    inset-inline-end: 1em;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .3em .65em;
    border-radius: .4em;
    background: rgba(0,0,0,.6);
    color: #fff;
    font: 600 .9em/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    letter-spacing: .04em
}

.h19-rec {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: #ff4d4d;
    animation: h19-blink 1.4s steps(2) infinite
}

@keyframes h19-blink {
    50% {
        opacity: .2
    }
}

.h19-sub {
    position: absolute;
    z-index: 2;
    bottom: 13%;
    inset-inline: 0;
    margin-inline:auto;width: fit-content;
    max-width: 86%;
    padding: .3em .75em;
    border-radius: .3em;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: 1.15em;
    font-weight: 500;
    text-align: center
}

.h19-play {
    position: absolute;
    z-index: 3;
    inset: 0;
    margin: auto;
    width: 5.6em;
    height: 5.6em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: 1em;
    text-decoration: none;
    box-shadow: 0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent);
    animation: h19-ring 2.2s ease-out infinite;
    transition: transform .25s ease
}

.h19-play .bi {
    font-size: 2.6em;
    margin-inline-start:.1em;line-height: 1
}

.h19-play:hover,.h19-play:focus-visible {
    transform: scale(1.08);
    color: var(--ink)
}

@keyframes h19-ring {
    70% {
        box-shadow: 0 0 0 1.4em transparent
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

.h19-side {
    display: flex;
    flex-direction: column;
    gap: .55em;
    padding: .9em;
    border-radius: .7em;
    background: #1d1d21;
    font-size: .86em;
    min-width: 0
}

.h19-side-h {
    display: flex;
    justify-content: space-between;
    font-size: .78em;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.55);
    margin-bottom: .2em
}

.h19-side-h b {
    color: #fff
}

.h19-exp {
    display: flex;
    align-items: center;
    gap: .75em;
    padding: .65em .7em;
    border-radius: .55em;
    background: rgba(255,255,255,.05);
    flex: 1;
    min-width: 0
}

.h19-exp>div {
    flex: 1;
    min-width: 0
}

.h19-exp strong {
    display: block;
    font-size: .95em;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h19-exp small {
    display: block;
    font-size: .8em;
    color: rgba(255,255,255,.55)
}

.h19-exp>.bi {
    color: var(--brand);
    flex: none
}

.h19-exp>b {
    font-size: .82em;
    color: #fff;
    flex: none
}

.h19-exp.is-busy {
    background: rgba(255,255,255,.09)
}

.h19-ratio {
    flex: none;
    width: 2.6em;
    height: 2.2em;
    display: grid;
    place-items: center
}

.h19-ratio::before {
    content: "";
    border: 2px solid rgba(255,255,255,.55);
    border-radius: .25em;
    width: 2.4em;
    height: 1.35em
}

.h19-ratio.is-916::before {
    width: 1em;
    height: 1.8em
}

.h19-ratio.is-11::before {
    width: 1.5em;
    height: 1.5em
}

.h19-ratio.is-45::before {
    width: 1.35em;
    height: 1.7em;
    border-color: var(--brand)
}

.h19-prog {
    display: block;
    height: .3em;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    margin-top: .4em;
    overflow: hidden
}

.h19-prog span {
    display: block;
    width: var(--p);
    height: 100%;
    background: var(--brand)
}

.h19-tl {
    --nm: 3.6em;
    position: relative;
    margin-top: .8em;
    padding: .5em .8em .8em;
    border-radius: .7em;
    background: #1d1d21
}

.h19-ruler,.h19-track {
    display: grid;
    grid-template-columns: var(--nm) 1fr;
    gap: .5em;
    align-items: stretch
}

.h19-track {
    margin-top: .35em
}

.h19-ruler .h19-lane {
    height: 1.7em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font: .68em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    color: rgba(255,255,255,.5);
    background: repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 2.5%) bottom / 100% .5em no-repeat
}

.h19-tname {
    display: flex;
    align-items: center;
    gap: .35em;
    padding-inline:.45em;border-radius: .35em;
    background: rgba(255,255,255,.06);
    font-size: .72em;
    font-weight: 600;
    color: rgba(255,255,255,.7)
}

.h19-ruler .h19-tname {
    background: none
}

.h19-lane {
    position: relative;
    height: 2.3em;
    border-radius: .35em;
    background: rgba(255,255,255,.03)
}

.h19-clip {
    position: absolute;
    top: .22em;
    bottom: .22em;
    left: var(--s);
    width: calc(var(--w) - 2px);
    display: flex;
    align-items: center;
    padding-inline:.6em;border-radius: .3em;
    font-size: .7em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h19-clip.is-cap {
    background: var(--brand);
    color: var(--ink)
}

.h19-clip.is-vid {
    background: var(--brand-2) linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px) 0 0 / 2.6em 100%;
    color: #fff
}

.h19-clip.is-alt {
    background-color: color-mix(in srgb,var(--brand-2) 62%,#000)
}

.h19-clip.is-sel {
    box-shadow: inset 0 0 0 2px #fff
}

.h19-clip.is-end {
    background: var(--coral);
    color: var(--ink)
}

.h19-track:nth-child(4) .h19-lane,.h19-track:nth-child(5) .h19-lane {
    height: 2.6em
}

.h19-clip.is-aud,.h19-clip.is-mus {
    padding: 0 .3em
}

.h19-clip.is-aud {
    background: color-mix(in srgb,var(--brand) 22%,#1d1d21)
}

.h19-clip.is-mus {
    background: color-mix(in srgb,var(--coral) 22%,#1d1d21)
}

.h19-clip svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke-width: 1
}

.h19-clip.is-aud svg {
    stroke: var(--brand)
}

.h19-clip.is-mus svg {
    stroke: var(--coral)
}

.h19-head {
    position: absolute;
    top: .5em;
    bottom: .8em;
    left: calc(.8em + var(--nm) + .5em);
    right: .8em;
    pointer-events: none
}

.h19-head-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 48%;
    width: 2px;
    background: #ff4d4d;
    animation: h19-scrub 16s linear infinite
}

.h19-head-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: -.45em;
    width: calc(.9em + 2px);
    height: 1em;
    border-radius: .2em .2em .5em .5em;
    background: #ff4d4d
}

@keyframes h19-scrub {
    0% {
        left: 2%
    }

    100% {
        left: 98%
    }
}

.h19-note {
    position: absolute;
    z-index: 4;
    top: 5.2em;
    left: -2.4em;
    display: flex;
    align-items: center;
    gap: .7em;
    max-width: 21em;
    padding: .7em .95em;
    border-radius: 1em;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    font-size: .92em
}

.h19-note img {
    width: 2.8em;
    height: 2.8em;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

.h19-note b {
    display: block;
    font-weight: 600;
    line-height: 1.3
}

.h19-note small {
    display: block;
    color: var(--muted);
    font-size: .85em
}

@media (prefers-reduced-motion:reduce) {
    .h19-head-line,.h19-play,.h19-rec {
        animation: none
    }
}

@media (max-width: 1399.98px) {
    .h19-note {
        left:1.6em;
        top: auto;
        bottom: 15em
    }
}

@media (max-width: 991.98px) {
    .h19-stage {
        grid-template-columns:1fr
    }

    .h19-side {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .h19-side-h {
        grid-column: 1 / -1
    }

    .h19-note {
        display: none
    }
}

@media (max-width: 575.98px) {
    .h19-edit {
        padding:.6em;
        border-radius: var(--radius-sm);
        font-size: 9px
    }

    .h19-meta,.h19-saved {
        display: none
    }

    .h19-side {
        grid-template-columns: 1fr;
        font-size: 1em
    }

    .h19-exp:nth-of-type(n+3) {
        display: none
    }

    .h19-tl {
        --nm: 2.8em;
        padding-inline:.5em}

    .h19-tname .bi {
        display: none
    }

    .h19-head {
        left: calc(.5em + var(--nm) + .5em);
        right: .5em
    }

    .h19-clip {
        padding-inline:.35em}

    .h19-play {
        width: 4.8em;
        height: 4.8em
    }

    .h19-sub {
        font-size: 1.1em
    }
}

.h19-fmt {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s ease,box-shadow .3s ease
}

.h19-fmt:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.h19-fmt-media {
    position: relative;
    aspect-ratio: 7 / 5
}

.h19-fmt-media::before,.h19-fmt-media::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 16px;
    z-index: 1;
    background: repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.88) 7px 15px,transparent 15px 22px) center / 100% 7px no-repeat,#121214
}

.h19-fmt-media::before {
    top: 0
}

.h19-fmt-media::after {
    bottom: 0
}

.h19-fmt-media img {
    transition: transform .6s ease
}

.h19-fmt:hover .h19-fmt-media img {
    transform: scale(1.05)
}

.h19-fmt-r {
    position: absolute;
    z-index: 2;
    top: 28px;
    inset-inline-start: 14px;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em
}

.h19-fmt-body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.6rem 1.4rem
}

.h19-fmt-ic {
    position: absolute;
    top: -27px;
    inset-inline-end: 1.4rem;
    z-index: 2;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    background: var(--brand);
    color: var(--ink);
    border: 4px solid var(--surface)
}

.h19-fmt h3 {
    font-size: 1.35rem;
    margin: 0 0 .55rem
}

.h19-fmt p {
    color: var(--muted);
    font-size: .97rem;
    margin-bottom: 1.2rem
}

.h19-fmt-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--line);
    font-size: .9rem
}

.h19-fmt-foot span {
    color: var(--muted)
}

.h19-fmt-foot b {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em
}

.h19-reel {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem
}

.h19-shot {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    isolation: isolate
}

.h19-shot:hover {
    color: #fff
}

.h19-shot.is-big {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
    border-radius: var(--radius)
}

.h19-shot-img {
    position: absolute;
    inset: 0;
    z-index: -1
}

.h19-shot-img img {
    transition: transform .6s ease
}

.h19-shot:hover .h19-shot-img img {
    transform: scale(1.05)
}

.h19-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.05) 62%)
}

.h19-shot-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.55);
    backdrop-filter: blur(8px);
    transition: background-color .25s ease,color .25s ease,transform .25s ease
}

.h19-shot.is-big .h19-shot-play {
    width: 84px;
    height: 84px;
    font-size: 2.3rem
}

.h19-shot:hover .h19-shot-play,.h19-shot:focus-visible .h19-shot-play {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink);
    transform: scale(1.08)
}

.h19-shot-len {
    position: absolute;
    top: .75rem;
    inset-inline-end: .75rem;
    padding: .2rem .5rem;
    border-radius: 6px;
    background: rgba(0,0,0,.62);
    font: 600 .75rem/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}

.h19-shot-cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: .9rem 1rem
}

.h19-shot.is-big .h19-shot-cap {
    padding: 1.6rem 1.8rem
}

.h19-shot-cap small {
    display: block;
    font-size: .78rem;
    opacity: .85
}

.h19-shot-cap strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem,2.6vw,2.2rem);
    letter-spacing: -.03em;
    line-height: 1.1;
    margin: .25rem 0 .6rem
}

.h19-shot-res {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
    font-size: .85rem
}

.h19-shot-res b {
    color: var(--brand);
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -.02em
}

.h19-shot-res b + b,.h19-shot-res b:nth-of-type(2) {
    margin-inline-start:.6rem}

.h19-shot.is-big .h19-shot-res b {
    font-size: 1.4rem
}

.h19-stats {
    list-style: none;
    margin: 3rem 0 0;
    padding: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--line)
}

.h19-stats b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem,3.4vw,2.8rem);
    letter-spacing: -.04em;
    line-height: 1
}

.h19-stats li>span {
    display: block;
    color: var(--muted);
    font-size: .92rem;
    margin-top: .4rem
}

@media (max-width: 991.98px) {
    .h19-reel {
        grid-template-columns:1fr 1fr
    }

    .h19-shot.is-big {
        grid-row: auto;
        aspect-ratio: 16 / 9
    }

    .h19-stats {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 575.98px) {
    .h19-reel {
        grid-template-columns:1fr
    }

    .h19-shot.is-big {
        grid-column: auto
    }

    .h19-shot.is-big .h19-shot-cap {
        padding: 1rem
    }

    .h19-shot-play,.h19-shot.is-big .h19-shot-play {
        inset: .75rem auto auto .75rem;
        margin: 0;
        width: 46px;
        height: 46px;
        font-size: 1.3rem
    }

    .h19-shot-cap strong {
        font-size: 1.35rem
    }

    .h19-stats li>span {
        font-size: .85rem
    }
}

.h19-phase-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 2rem
}

.h19-phase-bar span {
    flex: 0 1 var(--w);
    min-width: 0;
    padding: .75rem 1rem;
    border-radius: 12px;
    font-size: .82rem;
    color: rgba(255,255,255,.75);
    background: var(--brand-2) linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px) 0 0 / 28px 100%
}

.h19-phase-bar b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: -.01em
}

.h19-phase-bar .is-day {
    background-color: var(--brand);
    color: color-mix(in srgb,var(--ink) 75%,transparent)
}

.h19-phase-bar .is-day b {
    color: var(--ink)
}

.h19-phase {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: .6rem .6rem 1.5rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h19-phase figure {
    aspect-ratio: 16 / 10;
    border-radius: calc(var(--radius) - 8px)
}

.h19-phase-no {
    margin: 1.3rem 1rem .3rem;
    font: 600 .8rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    color: var(--brand);
    letter-spacing: .1em
}

.h19-phase h3,.h19-phase p,.h19-phase ul {
    margin-inline:1rem}

.h19-phase h3 {
    margin-bottom: .6rem
}

.h19-phase ul {
    list-style: none;
    padding: 0;
    margin-block:.2rem 1.4rem;display: grid;
    gap: .45rem;
    font-size: .95rem
}

.h19-phase li {
    display: flex;
    gap: .5rem
}

.h19-phase li .bi {
    color: var(--brand)
}

.h19-approve {
    margin: auto 1rem 0;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    font-size: .85rem;
    font-weight: 500
}

.h19-approve .bi {
    color: var(--brand)
}

@media (max-width: 575.98px) {
    .h19-phase-bar {
        display:none
    }
}

.h19-call {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow)
}

.h19-call-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.6rem 1.3rem 1rem;
    background: var(--ink);
    color: #fff
}

.h19-call-head::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 12px;
    background: repeating-linear-gradient(-45deg,#fff 0 12px,var(--ink) 12px 24px);
    opacity: .9
}

[data-bs-theme="dark"] .h19-call-head {
    background: #050506;
    border-bottom: 1px solid var(--line)
}

[data-bs-theme="dark"] .h19-call-head::before {
    background: repeating-linear-gradient(-45deg,#fff 0 12px,#050506 12px 24px)
}

.h19-clap {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: var(--brand);
    color: var(--ink)
}

.h19-call-head small {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.65)
}

.h19-call-head strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.3
}

.h19-call-info {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .8rem;
    margin: 0;
    padding: 1rem 1.3rem;
    border-bottom: 1px dashed var(--line)
}

.h19-call-info dt {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted)
}

.h19-call-info dd {
    margin: .15rem 0 0;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.3
}

.h19-call-list {
    list-style: none;
    margin: 0;
    padding: .4rem 1.3rem 1rem
}

.h19-call-list li {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .93rem
}

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

.h19-call-list time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h19-call-list time {
    color: var(--brand)
}

.h19-call-list .is-wrap span {
    font-weight: 600
}

.h19-set {
    position: relative;
    aspect-ratio: 16 / 9.6;
    border-radius: var(--radius)
}

.h19-set figcaption {
    position: absolute;
    bottom: 1rem;
    inset-inline-start: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.h19-set-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--shadow)
}

.h19-inc {
    height: 100%;
    padding: 1.4rem
}

.h19-inc-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: var(--brand);
    color: var(--ink)
}

.h19-inc-ic.is-2 {
    background: var(--brand-2);
    color: #fff
}

.h19-inc-ic.is-3 {
    background: var(--coral);
    color: var(--ink)
}

.h19-inc h3 {
    font-size: 1.2rem;
    margin: 1rem 0 .5rem
}

.h19-inc ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.h19-inc li {
    padding: .38rem 0;
    border-top: 1px dashed var(--line);
    font-size: .92rem;
    color: var(--muted)
}

.h19-inc li:first-child {
    border-top: 0
}

.h19-addons {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
    padding: 1rem 1.2rem 1rem 1.6rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h19-addons strong {
    font-family: var(--font-display);
    font-size: 1.1rem
}

.h19-addons ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.h19-addons li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .88rem
}

.h19-addons li b {
    margin-inline-start:.15rem}

.h19-addons li .bi {
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h19-addons li .bi {
    color: var(--brand)
}

.h19-cta-slot {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.4rem;
    padding: .45rem .95rem;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    font-size: .88rem;
    font-weight: 600
}

.h19-cta .btn-line {
    border-color: var(--ink);
    color: var(--ink)
}

.h19-cta .btn-line:hover,.h19-cta .btn-line:focus-visible {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

.h20-hero,.h20-featured,.h20-wall,.h20-cta,.h20-heads {
    --h20-serif: Georgia,"Times New Roman",Times,serif
}

.h20-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h20-hero h1 {
    font-size: clamp(2.8rem,6vw,5.4rem)
}

.h20-proof {
    list-style: none;
    padding: 0;
    margin: 2.2rem 0 0;
    display: grid;
    grid-template-columns: repeat(3,auto);
    justify-content: start;
    gap: 1.2rem 1.5rem
}

.h20-proof li {
    padding-inline-start:.9rem;border-inline-start:2px solid var(--brand-2)}

.h20-proof b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    letter-spacing: -.04em;
    line-height: 1
}

.h20-proof span {
    display: block;
    font-size: .82rem;
    color: var(--muted);
    margin-top: .3rem
}

.h20-art {
    position: relative;
    aspect-ratio: 1 / .9;
    max-width: 700px;
    margin-inline:auto;container-type: inline-size;
    font-size: clamp(8px,1.85cqw,13px)
}

.h20-clip {
    position: absolute;
    background: #f7f3ea;
    color: #1a1a1a;
    padding: 1.4em 1.5em 1.5em;
    box-shadow: 0 22px 44px -20px rgba(0,0,0,.4)
}

.h20-clip::before {
    content: "";
    position: absolute;
    top: -.9em;
    left: 38%;
    width: 7em;
    height: 1.9em;
    background: rgba(255,236,170,.78);
    transform: rotate(-4deg);
    box-shadow: 0 1px 2px rgba(0,0,0,.08)
}

.h20-clip.is-main {
    left: 0;
    top: 8%;
    width: 60%;
    transform: rotate(-2.5deg);
    z-index: 1
}

.h20-clip.is-side {
    right: 0;
    top: 0;
    width: 41%;
    transform: rotate(3deg);
    z-index: 2;
    padding: 1.2em 1.3em 1.4em
}

.h20-clip.is-side::before {
    left: 20%;
    transform: rotate(5deg)
}

.h20-mast {
    font-family: var(--h20-serif);
    font-weight: 700;
    font-size: 2.1em;
    line-height: 1.05;
    text-align: center;
    letter-spacing: -.01em;
    padding-bottom: .3em;
    border-bottom: 4px double currentColor
}

.h20-mast.is-sans {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: .32em;
    font-size: 1.5em;
    text-align: start
}

.h20-dateline {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    font-size: .62em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .5em 0;
    border-bottom: 1px solid currentColor;
    margin-bottom: .9em
}

.h20-hl {
    display: block;
    font-family: var(--h20-serif);
    font-weight: 700;
    font-size: 1.65em;
    line-height: 1.1;
    letter-spacing: -.01em
}

.h20-clip.is-side .h20-hl {
    font-size: 1.3em
}

.h20-deck {
    font-family: var(--h20-serif);
    font-style: italic;
    font-size: .9em;
    color: #55524c;
    margin: .5em 0 .9em;
    line-height: 1.35
}

.h20-kicker {
    display: block;
    margin: .8em 0 .3em;
    font-size: .65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #b3261e
}

.h20-body {
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: .9em
}

.h20-body figure {
    background: none
}

.h20-body img {
    height: auto;
    aspect-ratio: 4 / 4.6
}

.h20-body figcaption {
    font-size: .58em;
    color: #6b675f;
    margin-top: .35em;
    line-height: 1.3
}

.h20-lines {
    display: block;
    min-height: 6em;
    background: repeating-linear-gradient(rgba(26,26,26,.24) 0 .34em,transparent .34em .9em)
}

.h20-lines.is-short {
    height: 5em;
    margin-top: .8em;
    mask-image: linear-gradient(90deg,#000 70%,rgba(0,0,0,.3))
}

.h20-tv {
    position: absolute;
    right: 1%;
    top: 42%;
    width: 52%;
    z-index: 3;
    border: .45em solid #1b1b1e;
    border-radius: 1em;
    overflow: hidden;
    background: #000;
    box-shadow: 0 26px 50px -22px rgba(0,0,0,.6)
}

.h20-tv-screen {
    aspect-ratio: 16 / 10
}

.h20-tv-screen img {
    object-position: 50% 38%
}

.h20-live {
    position: absolute;
    top: .8em;
    left: .8em;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .25em .6em;
    border-radius: .3em;
    background: #e5383b;
    color: #fff;
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em
}

.h20-live i {
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: #fff;
    animation: h20-blink 1.4s steps(2) infinite
}

@keyframes h20-blink {
    50% {
        opacity: .2
    }
}

.h20-bug {
    position: absolute;
    top: .7em;
    right: .9em;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05em;
    color: #fff;
    line-height: 1;
    text-align: end;
    text-shadow: 0 1px 4px rgba(0,0,0,.4)
}

.h20-bug small {
    display: block;
    font-size: .55em;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase
}

.h20-third {
    position: absolute;
    left: 0;
    bottom: 2.3em;
    max-width: 88%;
    padding: .45em .9em;
    background: var(--brand);
    color: var(--ink);
    line-height: 1.25
}

.h20-third strong {
    display: block;
    font-size: .95em
}

.h20-third span {
    display: block;
    font-size: .68em
}

.h20-ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.1em;
    display: flex;
    align-items: stretch;
    background: #111;
    color: #fff;
    font-size: .7em;
    white-space: nowrap;
    overflow: hidden
}

.h20-ticker b {
    display: flex;
    align-items: center;
    padding-inline:.7em;background: #e5383b;
    text-transform: uppercase;
    letter-spacing: .06em;
    flex: none
}

.h20-ticker span {
    display: flex;
    align-items: center;
    padding-inline:.8em}

.h20-sov {
    position: absolute;
    left: 3%;
    bottom: 0;
    width: 41%;
    z-index: 4;
    display: grid;
    grid-template-columns: 5.6em 1fr;
    gap: .5em .9em;
    align-items: center;
    padding: 1.1em 1.2em;
    border-radius: 1.2em;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.h20-sov>small {
    grid-column: 1 / -1;
    font-size: .74em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted)
}

.h20-donut {
    width: 5.6em;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(closest-side,var(--surface) 63%,transparent 64%),conic-gradient(var(--brand-2) 0 var(--p),var(--coral) var(--p) 68%,var(--surface-2) 68%)
}

.h20-donut b {
    font-family: var(--font-display);
    font-size: 1.3em;
    letter-spacing: -.03em
}

.h20-sov ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .25em;
    font-size: .74em
}

.h20-sov li {
    display: flex;
    align-items: center;
    gap: .45em;
    white-space: nowrap
}

.h20-sov li i {
    width: .75em;
    height: .75em;
    border-radius: .2em;
    background: var(--coral);
    flex: none
}

.h20-sov li i.is-you {
    background: var(--brand-2)
}

.h20-sov li i.is-c {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line)
}

.h20-up {
    grid-column: 1 / -1;
    font-size: .78em;
    font-weight: 600;
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h20-up {
    color: var(--brand)
}

.h20-alert {
    position: absolute;
    z-index: 5;
    left: 1%;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .55em 1em;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .9em;
    box-shadow: var(--shadow)
}

.h20-alert .bi {
    color: var(--brand)
}

[data-bs-theme="dark"] .h20-alert {
    background: #fff;
    color: var(--ink)
}

[data-bs-theme="dark"] .h20-alert .bi {
    color: var(--brand-2)
}

@media (prefers-reduced-motion:reduce) {
    .h20-live i {
        animation: none
    }
}

@media (max-width: 575.98px) {
    .h20-art {
        aspect-ratio:1 / 1.08;
        font-size: 2.3cqw
    }

    .h20-clip.is-main {
        width: 66%;
        top: 7%
    }

    .h20-clip.is-side {
        width: 44%
    }

    .h20-tv {
        width: 58%;
        top: 46%
    }

    .h20-sov {
        width: 50%;
        grid-template-columns: 1fr
    }

    .h20-sov ul {
        display: none
    }

    .h20-deck {
        display: none
    }
}

.h20-featured {
    border-block:1px solid var(--line);padding-block: 1.8rem
}

.h20-featured-row {
    display: flex;
    align-items: center;
    gap: 1.5rem 2.5rem
}

.h20-featured-label {
    flex: none;
    max-width: 9rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.35
}

.h20-masts {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2.2rem
}

.h20-masts li {
    color: var(--text);
    opacity: .62;
    line-height: 1;
    transition: opacity .2s ease;
    white-space: nowrap
}

.h20-masts li:hover {
    opacity: 1
}

.h20-masts .m1 {
    font-family: var(--h20-serif);
    font-weight: 700;
    font-size: 1.4rem
}

.h20-masts .m2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: .32em
}

.h20-masts .m3 {
    font-family: var(--h20-serif);
    font-style: italic;
    font-size: 1.45rem
}

.h20-masts .m4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -.05em
}

.h20-masts .m5 {
    font-family: var(--h20-serif);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .1em
}

.h20-masts .m6 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    padding: .25em .45em;
    border: 2px solid currentColor
}

@media (max-width: 991.98px) {
    .h20-featured-row {
        flex-direction:column;
        align-items: flex-start
    }

    .h20-featured-label {
        max-width: none
    }

    .h20-masts {
        justify-content: flex-start
    }
}

.h20-front {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border-top: 4px double var(--text);
    padding-top: 1.8rem
}

.h20-lead,.h20-col {
    display: block;
    text-decoration: none;
    color: inherit
}

.h20-lead {
    padding-inline-end:2.2rem;border-inline-end:1px solid var(--line)}

.h20-lead-img {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm)
}

.h20-lead-img img {
    transition: transform .6s ease
}

.h20-lead:hover .h20-lead-img img {
    transform: scale(1.04)
}

.h20-lead h3 {
    font-size: clamp(1.7rem,2.6vw,2.3rem);
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: .8rem
}

.h20-lead p,.h20-col p {
    color: var(--muted)
}

.h20-sec {
    display: block;
    margin: 1.3rem 0 .55rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--brand-2-text)
}

.h20-sec.is-alert {
    color: color-mix(in srgb,var(--coral) 70%,#000)
}

[data-bs-theme="dark"] .h20-sec {
    color: color-mix(in srgb,var(--brand-2) 50%,#fff)
}

[data-bs-theme="dark"] .h20-sec.is-alert {
    color: var(--coral)
}

.h20-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: .92rem
}

.h20-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-inline-start:2.2rem}

.h20-col {
    padding-bottom: 1.6rem
}

.h20-col:nth-child(-n+2) {
    border-bottom: 1px solid var(--line)
}

.h20-col:nth-child(odd) {
    padding-inline-end:1.5rem;border-inline-end:1px solid var(--line)}

.h20-col: nth-child(even) {
    padding-inline-start:1.5rem
}

.h20-col:nth-child(n+3) {
    padding-top: .4rem;
    padding-bottom: 0
}

.h20-col:nth-child(-n+2) .h20-sec {
    margin-top: 0
}

.h20-col h3 {
    font-size: 1.3rem;
    margin-bottom: .6rem
}

.h20-col p {
    font-size: .95rem
}

.h20-lead:hover h3,.h20-col:hover h3,.h20-story:hover h3,.h20-heads a:hover h3 {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px
}

@media (max-width: 991.98px) {
    .h20-front {
        grid-template-columns:1fr
    }

    .h20-lead {
        padding: 0 0 2rem;
        border: 0;
        border-bottom: 1px solid var(--line);
        margin-bottom: 1.8rem
    }

    .h20-cols {
        padding: 0
    }
}

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

    .h20-col,.h20-col:nth-child(n) {
        padding: 0 0 1.4rem;
        margin-bottom: 1.4rem;
        border: 0;
        border-bottom: 1px solid var(--line)
    }

    .h20-col:last-child {
        border-bottom: 0;
        margin-bottom: 0
    }

    .h20-col .h20-sec,.h20-col:nth-child(-n+2) .h20-sec {
        margin-top: 0
    }
}

.h20-wall {
    columns: 3 280px;
    column-gap: 1.2rem
}

.h20-card {
    break-inside: avoid;
    margin-bottom: 1.2rem;
    padding: 1.4rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: transform .3s ease,box-shadow .3s ease
}

.h20-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow)
}

.h20-card h3 {
    font-family: var(--h20-serif);
    font-weight: 700;
    font-size: 1.32rem;
    letter-spacing: -.01em;
    line-height: 1.22;
    margin: .5rem 0 0
}

.h20-card-mast {
    font-family: var(--h20-serif);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.1;
    padding-bottom: .45rem;
    margin-bottom: .55rem;
    border-bottom: 3px double currentColor
}

.h20-card-mast.is-sans {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .28em
}

.h20-card-mast.is-serif2 {
    font-weight: 400;
    font-style: italic
}

.h20-card-meta {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted)
}

.h20-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.1rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--line);
    font-size: .85rem
}

.h20-card-foot b {
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h20-card-foot b {
    color: var(--brand)
}

.h20-card.is-paper {
    background: color-mix(in srgb,var(--surface) 60%,var(--surface-2))
}

.h20-card-img {
    display: block;
    aspect-ratio: 16 / 10;
    margin: -1.4rem -1.4rem 1.1rem
}

.h20-card.is-tv {
    background: var(--ink);
    color: #fff;
    border-color: transparent
}

[data-bs-theme="dark"] .h20-card.is-tv {
    background: #050506;
    border-color: var(--line)
}

.h20-card-live {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    border-radius: 6px;
    background: #e5383b;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em
}

.h20-card.is-tv .h20-card-foot,.h20-card.is-pod .h20-card-foot {
    border-color: rgba(255,255,255,.22)
}

.h20-card.is-tv .h20-card-foot b,.h20-card.is-pod .h20-card-foot b {
    color: var(--brand)
}

.h20-card.is-quote {
    background: var(--brand);
    color: var(--ink);
    border-color: transparent
}

.h20-card.is-quote>.bi {
    font-size: 2.4rem;
    line-height: 1;
    display: block
}

.h20-card.is-quote h3 {
    font-style: italic;
    font-weight: 400;
    font-size: 1.45rem;
    margin: .2rem 0 .9rem
}

.h20-card.is-quote .h20-card-meta {
    color: var(--ink);
    opacity: .7
}

.h20-card.is-quote .h20-card-foot {
    border-color: rgba(18,18,18,.25)
}

.h20-card.is-quote .h20-card-foot b {
    color: var(--ink)
}

.h20-card.is-pod {
    background: var(--brand-2);
    color: #fff;
    border-color: transparent
}

.h20-card.is-pod .h20-card-live {
    background: rgba(255,255,255,.18)
}

.h20-wave {
    display: block;
    height: 1.8rem;
    margin-top: 1rem;
    background: repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 3px,transparent 3px 7px);
    mask-image: linear-gradient(transparent,#000 25% 75%,transparent),linear-gradient(90deg,#000 45%,rgba(0,0,0,.35) 45%);
    mask-composite: intersect
}

.h20-count {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6,1fr)
}

.h20-count li {
    position: relative;
    padding-inline-end:1.2rem;isolation: isolate
}

.h20-count li::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: calc(1.3rem + .5rem + 21px);
    height: 2px;
    background: var(--line)
}

.h20-count li:last-child::after {
    right: auto;
    width: 22px
}

.h20-count li.is-day ~ li::after {
    background: repeating-linear-gradient(90deg,var(--brand-2) 0 6px,transparent 6px 11px)
}

.h20-t {
    display: block;
    height: 1.3rem;
    font: 700 .8rem/1.3rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted)
}

.h20-node {
    display: flex;
    align-items: center;
    height: 44px;
    margin: .5rem 0 1rem
}

.h20-node::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--brand-2);
    background: var(--paper)
}

.is-day .h20-node::before {
    display: none
}

.h20-node .bi {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: 1.1rem;
    box-shadow: 0 0 0 6px color-mix(in srgb,var(--brand) 30%,transparent)
}

.is-day .h20-t {
    color: var(--text)
}

.h20-count h3 {
    font-size: 1.15rem;
    margin-bottom: .45rem
}

.h20-count p {
    color: var(--muted);
    font-size: .92rem;
    margin: 0
}

@media (max-width: 991.98px) {
    .h20-count {
        grid-template-columns:1fr;
        gap: 0
    }

    .h20-count li {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 1.1rem;
        padding: 0 0 1.8rem
    }

    .h20-count li::after,.h20-count li:last-child::after {
        left: 21px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto
    }

    .h20-count li:last-child::after {
        bottom: auto;
        height: 22px
    }

    .h20-count li.is-day ~ li::after {
        background: repeating-linear-gradient(var(--brand-2) 0 6px,transparent 6px 11px)
    }

    .h20-node {
        grid-column: 1;
        grid-row: 1 / span 3;
        margin: 0;
        align-items: flex-start;
        justify-content: center;
        height: auto;
        padding-top: 2px
    }

    .h20-t,.h20-count h3,.h20-count p {
        grid-column: 2
    }

    .h20-t {
        margin-bottom: .3rem
    }
}

.h20-kpis {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1.6rem
}

.h20-kpis li {
    border-top: 1px solid var(--line);
    padding-top: 1rem
}

.h20-kpis b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem,3.4vw,2.7rem);
    letter-spacing: -.04em;
    line-height: 1
}

.h20-kpis li>span {
    display: block;
    color: var(--muted);
    font-size: .9rem;
    margin-top: .4rem
}

.h20-chart {
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h20-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap
}

.h20-chart-head small {
    display: block;
    color: var(--muted);
    font-size: .82rem
}

.h20-chart-head strong {
    display: block;
    font-size: 1.15rem
}

.h20-chart-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-weight: 600;
    font-size: .85rem
}

.h20-bars {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: clamp(.5rem,2vw,1.1rem);
    height: 280px;
    margin: 1.8rem 0 2.4rem
}

.h20-bar {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    height: 100%
}

.h20-bar span {
    display: block;
    height: var(--h);
    border-radius: 5px;
    border-top: 3px solid var(--surface)
}

.h20-bar .s1 {
    background: var(--brand);
    border-top: 0
}

.h20-bar .s2 {
    background: var(--brand-2)
}

.h20-bar .s3 {
    background: color-mix(in srgb,var(--coral) 75%,var(--surface))
}

.h20-bar .s4 {
    background: rgba(255,255,255,.2)
}

.h20-bar small {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.7rem;
    text-align: center;
    font-size: .78rem;
    color: var(--muted)
}

.h20-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.2rem;
    font-size: .85rem;
    color: var(--muted)
}

.h20-legend li {
    display: inline-flex;
    align-items: center;
    gap: .45rem
}

.h20-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px
}

.h20-legend .s1 {
    background: var(--brand)
}

.h20-legend .s2 {
    background: var(--brand-2)
}

.h20-legend .s3 {
    background: color-mix(in srgb,var(--coral) 75%,var(--surface))
}

.h20-legend .s4 {
    background: rgba(255,255,255,.2)
}

@media (max-width: 575.98px) {
    .h20-bars {
        height:220px
    }

    .h20-chart {
        padding: 1.2rem
    }
}

.h20-train {
    position: relative;
    padding-bottom: 2.2rem
}

.h20-train-img {
    aspect-ratio: 1 / .95;
    border-radius: var(--radius)
}

.h20-rec {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(0,0,0,.62);
    color: #fff;
    font-size: .82rem;
    font-weight: 600
}

.h20-rec i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5383b;
    animation: h20-blink 1.4s steps(2) infinite
}

.h20-house {
    position: absolute;
    right: -1rem;
    bottom: 0;
    width: 64%;
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.h20-roof {
    display: block;
    padding: 1.7rem 1rem .8rem;
    background: var(--brand);
    color: var(--ink);
    font-weight: 700;
    font-size: .88rem;
    line-height: 1.3;
    text-align: center;
    clip-path: polygon(50% 0,100% 34%,100% 100%,0 100%,0 34%)
}

.h20-pillars {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .4rem;
    margin-top: .4rem
}

.h20-pillars span {
    padding: .7rem .4rem;
    border-radius: 6px;
    background: var(--surface-2);
    font-size: .74rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3
}

.h20-house small {
    display: block;
    margin-top: .55rem;
    text-align: center;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted)
}

.h20-train-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.1rem
}

.h20-train-list li {
    display: flex;
    gap: 1rem
}

.h20-train-list .bi {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    background: var(--surface-2)
}

.h20-train-list strong {
    display: block
}

.h20-train-list span {
    display: block;
    color: var(--muted);
    font-size: .95rem
}

.h20-offer {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h20-offer small {
    display: block;
    color: var(--muted);
    font-size: .85rem
}

.h20-offer strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

@media (max-width: 1199.98px) {
    .h20-house {
        right:.8rem
    }
}

@media (max-width: 575.98px) {
    .h20-train {
        padding-bottom:0
    }

    .h20-house {
        position: relative;
        right: auto;
        width: auto;
        margin: -3rem .8rem 0
    }
}

.h20-story {
    display: block;
    text-decoration: none;
    color: inherit
}

.h20-story-img {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius)
}

.h20-story h3 {
    font-size: clamp(1.6rem,2.5vw,2.1rem);
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-bottom: .7rem
}

.h20-story p {
    color: var(--muted);
    margin: 0
}

.h20-heads {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 4px double var(--text)
}

.h20-heads li {
    border-bottom: 1px solid var(--line)
}

.h20-heads a {
    display: block;
    padding: 1.3rem 0;
    text-decoration: none;
    color: inherit
}

.h20-heads .h20-sec {
    margin-top: 0
}

.h20-heads h3 {
    font-family: var(--h20-serif);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin: 0
}

.h20-cta {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.h20-cta-paper {
    padding: clamp(2rem,5vw,4rem)
}

.h20-cta .h20-mast {
    font-size: clamp(1.8rem,3.4vw,2.6rem);
    text-align: start
}

.h20-cta .h20-dateline {
    font-size: .72rem;
    color: var(--muted);
    border-color: var(--line)
}

.h20-cta h2 {
    font-size: clamp(2.3rem,4.6vw,3.8rem);
    margin: 1.4rem 0 1rem
}

.h20-cta p {
    color: var(--muted);
    max-width: 34rem;
    margin-bottom: 1.6rem
}

.h20-cta-img {
    min-height: 100%
}

@media (max-width: 991.98px) {
    .h20-cta {
        grid-template-columns:1fr
    }

    .h20-cta-img {
        aspect-ratio: 2 / 1;
        min-height: 0
    }
}

.h21-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h21-hero h1 {
    font-size: clamp(2.6rem,5.4vw,4.9rem)
}

.h21-hero .hero-bg .b1 {
    right: -200px;
    top: -120px
}

.h21-proof {
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 1.4rem 0 0;
    display: grid;
    grid-template-columns: repeat(3,auto);
    justify-content: start;
    gap: 1rem 2rem;
    border-top: 1px solid var(--line)
}

.h21-proof strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    letter-spacing: -.04em;
    line-height: 1
}

.h21-proof span {
    display: block;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--muted);
    max-width: 9.5rem
}

.h21-stack {
    position: relative;
    aspect-ratio: 1 / .8;
    max-width: 680px;
    margin-inline:auto;container-type: inline-size;
    font-size: clamp(9px,2.25cqw,15px)
}

.h21-card {
    position: absolute;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 1.6em;
    box-shadow: var(--shadow);
    overflow: hidden
}

.h21-card-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2
}

.h21-card.is-back2 {
    width: 46%;
    left: 0;
    top: 8%;
    transform: rotate(-7deg)
}

.h21-card.is-back1 {
    width: 46%;
    right: 0;
    top: 2%;
    transform: rotate(6deg)
}

.h21-card.is-back2 .h21-card-media,.h21-card.is-back1 .h21-card-media {
    opacity: .9
}

.h21-card-mini {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5em;
    padding: .8em 1em
}

.h21-card-mini b {
    font-family: var(--font-display);
    font-size: 1.15em;
    letter-spacing: -.03em
}

.h21-card-mini small {
    font-size: .78em;
    color: var(--muted)
}

.h21-card.is-front {
    width: 66%;
    left: 17%;
    top: 13%;
    z-index: 2;
    border-radius: 1.8em;
    transition: transform .5s cubic-bezier(.2,.7,.2,1)
}

.h21-stack:hover .h21-card.is-front {
    transform: translateY(-.4em)
}

.h21-card.is-front .h21-card-media {
    aspect-ratio: 16 / 10
}

.h21-tour {
    position: absolute;
    left: 1em;
    top: 1em;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .4em .8em;
    border-radius: 999px;
    background: rgba(18,18,18,.72);
    color: #fff;
    font-size: .85em;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

.h21-tour .bi {
    color: var(--brand);
    font-size: 1.2em
}

.h21-sold {
    position: absolute;
    right: 1em;
    top: 1em;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .45em .9em;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-size: .85em;
    font-weight: 700;
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.4)
}

.h21-gal {
    position: absolute;
    left: 50%;
    bottom: .9em;
    transform: translateX(-50%);
    display: flex;
    gap: .35em
}

.h21-gal i {
    width: .45em;
    height: .45em;
    border-radius: 50%;
    background: rgba(255,255,255,.6)
}

.h21-gal i.on {
    width: 1.3em;
    border-radius: 999px;
    background: #fff
}

.h21-card-body {
    padding: 1.1em 1.3em 1.2em
}

.h21-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em
}

.h21-price {
    font-family: var(--font-display);
    font-size: 1.75em;
    letter-spacing: -.04em;
    line-height: 1
}

.h21-over {
    display: inline-flex;
    align-items: center;
    font-size: .8em;
    font-weight: 600;
    padding: .25em .6em;
    border-radius: 999px;
    background: color-mix(in srgb,var(--brand) 30%,var(--surface));
    white-space: nowrap
}

.h21-addr {
    margin: .45em 0 .8em;
    font-size: .85em;
    color: var(--muted);
    display: flex;
    gap: .35em
}

.h21-specs {
    list-style: none;
    margin: 0;
    padding: .7em 0;
    display: flex;
    gap: 1.2em;
    border-block:1px solid var(--line);font-size: .85em;
    color: var(--muted)
}

.h21-specs .bi {
    margin-right: .35em;
    color: var(--text)
}

.h21-specs b {
    color: var(--text);
    font-weight: 600
}

.h21-req {
    display: flex;
    align-items: center;
    gap: .7em;
    margin-top: .85em;
    font-size: .85em
}

.h21-req .avatar {
    width: 2.2em;
    height: 2.2em;
    border-width: 2px;
    border-color: var(--surface)
}

.h21-req .avatar + .avatar {
    margin-inline-start:-.7em}

.h21-spark {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: .2em;
    height: 1.8em
}

.h21-spark i {
    width: .4em;
    height: var(--h);
    border-radius: 2px;
    background: var(--brand-2);
    opacity: .85
}

[data-bs-theme="dark"] .h21-spark i {
    background: var(--brand)
}

.h21-float {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: .55em 1em .55em .55em;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: .9em;
    white-space: nowrap
}

.h21-float .bi {
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--brand)
}

.h21-float b {
    font-weight: 700
}

.h21-float.is-offer {
    left: 0;
    top: 38%
}

.h21-float.is-walk {
    right: 0;
    top: 54%
}

.h21-float.is-walk .bi {
    background: var(--brand);
    color: var(--ink)
}

[data-bs-theme="dark"] .h21-float.is-offer .bi {
    background: #fff;
    color: var(--ink)
}

@media (max-width: 575.98px) {
    .h21-stack {
        aspect-ratio:1 / 1.2;
        font-size: 3.1cqw
    }

    .h21-card.is-back2,.h21-card.is-back1 {
        width: 54%
    }

    .h21-card.is-front {
        width: 86%;
        left: 7%;
        top: 10%
    }

    .h21-float.is-walk {
        top: auto;
        bottom: 0;
        right: 4%
    }

    .h21-float.is-offer {
        display: none
    }

    .h21-proof {
        gap: 1rem 1.2rem
    }

    .h21-proof strong {
        font-size: 1.5rem
    }
}

.h21-bento {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-auto-rows: minmax(280px,auto);
    gap: 1.25rem
}

.h21-svc {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s ease,box-shadow .35s ease
}

.h21-svc:hover {
    color: var(--text);
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.h21-svc.is-wide {
    grid-column: span 2;
    grid-row: span 2
}

.h21-svc strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.03em;
    line-height: 1.1
}

.h21-svc small {
    font-size: .92rem;
    color: var(--muted);
    line-height: 1.5
}

.h21-svc-no {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--muted)
}

.h21-svc-ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: var(--brand);
    color: var(--ink);
    margin-bottom: auto
}

.h21-svc-stat {
    margin-top: .8rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    font-size: .85rem;
    color: var(--muted)
}

.h21-svc-stat b {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.03em;
    color: var(--text);
    margin-right: .25rem
}

.h21-svc.is-ink {
    background: var(--ink);
    color: #f3f1ec;
    border-color: transparent;
    --muted: #a3a09a;
    --line: rgba(255,255,255,.14)
}

.h21-svc.is-ink:hover {
    color: #f3f1ec
}

.h21-svc.is-ink .h21-svc-stat b {
    color: var(--brand)
}

[data-bs-theme="dark"] .h21-svc.is-ink {
    background: color-mix(in srgb,var(--brand-2) 34%,#111114)
}

.h21-svc.is-photo {
    justify-content: flex-end;
    color: #fff;
    border: 0;
    min-height: 280px
}

.h21-svc.is-photo:hover {
    color: #fff
}

.h21-svc-img {
    position: absolute;
    inset: 0;
    z-index: -2
}

.h21-svc-img img {
    transition: transform .8s cubic-bezier(.2,.7,.2,1)
}

.h21-svc.is-photo:hover .h21-svc-img img {
    transform: scale(1.05)
}

.h21-svc.is-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,rgba(8,8,10,0) 35%,rgba(8,8,10,.82))
}

.h21-svc-body {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-width: 30rem
}

.h21-svc.is-photo small,.h21-svc.is-photo .h21-svc-no {
    color: rgba(255,255,255,.82)
}

.h21-svc.is-wide strong {
    font-size: clamp(1.6rem,2.6vw,2.2rem)
}

@media (max-width: 1199.98px) {
    .h21-bento {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .h21-svc.is-wide {
        grid-row: span 1;
        min-height: 380px
    }
}

@media (max-width: 575.98px) {
    .h21-bento {
        grid-template-columns:1fr;
        grid-auto-rows: auto
    }

    .h21-svc.is-wide {
        grid-column: auto
    }

    .h21-svc.is-wide {
        min-height: 340px
    }

    .h21-svc-ic {
        margin-bottom: 1.4rem
    }
}

.h21-lst {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    transition: transform .35s ease,box-shadow .35s ease
}

.h21-lst:hover {
    color: var(--text);
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.h21-lst-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3
}

.h21-lst-img img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.h21-lst:hover .h21-lst-img img {
    transform: scale(1.05)
}

.h21-lst-tag {
    position: absolute;
    top: 1.2rem;
    right: -2.4rem;
    width: 9rem;
    padding: .3rem 0;
    text-align: center;
    transform: rotate(45deg);
    background: var(--brand);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.35)
}

.h21-lst-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.2rem 1.3rem 1.3rem
}

.h21-lst-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.h21-lst-price small {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    text-decoration: line-through;
    margin-left: .3rem
}

.h21-lst-addr {
    font-size: .88rem;
    color: var(--muted);
    margin: .3rem 0 1.1rem
}

.h21-lst-res {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: .9rem
}

.h21-lst-res span {
    font-size: .74rem;
    color: var(--muted);
    line-height: 1.3
}

.h21-lst-res span + span {
    border-left: 1px solid var(--line);
    padding-left: .7rem
}

.h21-lst-res b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: -.03em;
    color: var(--text)
}

.h21-dev {
    position: relative;
    height: 100%;
    min-height: 460px;
    border-radius: var(--radius)
}

.h21-dev figcaption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 1.1rem 1.2rem;
    border-radius: 18px;
    background: rgba(12,12,14,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff
}

.h21-dev .tag {
    background: var(--brand);
    color: var(--ink);
    font-weight: 600
}

.h21-dev-facts {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .5rem
}

.h21-dev-facts b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.h21-dev-facts span {
    font-size: .78rem;
    color: rgba(255,255,255,.7)
}

.h21-chart {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.3rem,3vw,2rem);
    height: 100%
}

.h21-legend {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    color: var(--muted)
}

.h21-legend i {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 3px;
    margin-left: .5rem
}

.h21-legend i.is-plan {
    height: 0;
    border-top: 2px dashed var(--muted);
    border-radius: 0
}

.h21-legend i.is-real {
    background: var(--brand)
}

.h21-bars {
    display: flex;
    align-items: flex-end;
    gap: clamp(.3rem,1.2vw,.8rem);
    height: 230px;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--line);
    background-image: linear-gradient(var(--line) 1px,transparent 1px);
    background-size: 100% 25%;
    background-position: 0 1.6rem
}

.h21-bars span {
    position: relative;
    flex: 1;
    height: 100%
}

.h21-bars span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--v);
    border-radius: 8px 8px 2px 2px;
    background: color-mix(in srgb,var(--brand) 55%,var(--surface));
    transition: height 1s cubic-bezier(.2,.7,.2,1)
}

.h21-bars span.is-last::after {
    background: var(--brand)
}

.h21-bars span::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: -2px;
    right: -2px;
    bottom: var(--p);
    border-top: 2px dashed rgba(18,18,18,.7)
}

.h21-chart:not(.in) .h21-bars span::after {
    height: 0
}

.h21-bars em {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: .45rem;
    text-align: center;
    font-style: normal;
    font-size: .72rem;
    color: var(--muted)
}

.h21-bars b {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .3rem);
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .75rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink)
}

.h21-units {
    padding: 1.1rem;
    border-radius: 16px;
    background: var(--surface-2);
    height: 100%
}

.h21-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 5px
}

.h21-grid i,.h21-key i {
    display: block;
    aspect-ratio: 1.3;
    border-radius: 4px;
    border: 1px solid var(--line)
}

.h21-grid i.s,.h21-key i.s {
    background: var(--brand);
    border-color: transparent
}

.h21-grid i.r,.h21-key i.r {
    background: var(--coral);
    border-color: transparent
}

.h21-key {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin-top: .8rem;
    font-size: .74rem;
    color: var(--muted)
}

.h21-key span {
    display: inline-flex;
    align-items: center;
    gap: .35rem
}

.h21-key i {
    width: 12px;
    aspect-ratio: 1
}

.h21-dev-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.h21-dev-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .78rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
    color: var(--muted)
}

.h21-dev-list li:first-child {
    padding-top: .2rem
}

.h21-dev-list b {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.03em;
    color: #f3f1ec;
    white-space: nowrap
}

@media (max-width: 991.98px) {
    .h21-dev {
        min-height:380px
    }
}

@media (max-width: 575.98px) {
    .h21-bars {
        height:190px
    }

    .h21-bars em {
        font-size: .6rem
    }

    .h21-dev-facts b {
        font-size: 1.25rem
    }
}

.h21-src {
    list-style: none;
    margin: 0;
    padding: 0
}

.h21-src li {
    display: grid;
    grid-template-columns: auto 1fr auto 5.6rem;
    align-items: center;
    gap: .3rem 1rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--line)
}

.h21-src li:first-child {
    border-top: 1px solid var(--line)
}

.h21-src-ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--text);
    font-size: 1.1rem
}

.h21-src li:first-child .h21-src-ic {
    background: var(--brand);
    color: var(--ink)
}

.h21-src strong {
    display: block;
    font-size: .98rem;
    font-weight: 600;
    margin-bottom: .45rem
}

.h21-src-bar {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    position: relative;
    overflow: hidden
}

.h21-src-bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--w) * 2.6);
    border-radius: inherit;
    background: var(--brand-2);
    transition: width 1s cubic-bezier(.2,.7,.2,1) .2s
}

[data-bs-theme="dark"] .h21-src-bar::after {
    background: var(--brand)
}

.h21-src li:not(.in) .h21-src-bar::after {
    width: 0
}

.h21-src b {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: -.03em
}

.h21-src small {
    font-size: .8rem;
    color: var(--muted);
    text-align: right
}

@media (max-width: 575.98px) {
    .h21-src li {
        grid-template-columns:auto 1fr auto
    }

    .h21-src small {
        grid-column: 2 / -1;
        text-align: left;
        margin-top: -.2rem
    }
}

.h21-val {
    position: relative;
    max-width: 560px;
    margin-inline:auto;padding-bottom: 3rem;
    container-type: inline-size
}

.h21-val-img {
    width: 82%;
    margin-left: auto;
    aspect-ratio: 4 / 4.4;
    border-radius: 200px 200px var(--radius) var(--radius)
}

.h21-val-card {
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(62%,300px);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.2rem;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.h21-val-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: -.02em
}

.h21-val-head .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .h21-val-head .bi {
    color: var(--brand)
}

.h21-val-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    font-size: .85rem;
    color: var(--muted)
}

.h21-val-range small {
    display: block;
    font-size: .74rem;
    color: var(--muted)
}

.h21-val-range b {
    font-family: var(--font-display);
    font-size: 1.45rem;
    letter-spacing: -.04em
}

.h21-val-meter {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--surface-2),var(--surface-2));
    position: relative
}

.h21-val-meter span {
    position: absolute;
    left: 38%;
    width: 30%;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: var(--brand);
    box-shadow: 0 0 0 2px var(--surface)
}

.h21-val-card .btn {
    pointer-events: none
}

.h21-val-ping {
    position: absolute;
    right: 0;
    top: 8%;
    display: flex;
    align-items: center;
    gap: .7rem;
    max-width: 72%;
    padding: .65rem .9rem .65rem .65rem;
    border-radius: 16px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
    font-size: .82rem;
    line-height: 1.3
}

.h21-val-ping .bi {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink)
}

.h21-val-ping b {
    display: block
}

[data-bs-theme="dark"] .h21-val-ping {
    background: var(--surface-2);
    border: 1px solid var(--line)
}

@media (max-width: 575.98px) {
    .h21-val-img {
        width:92%
    }

    .h21-val-card {
        width: 74%;
        padding: 1rem
    }

    .h21-val-ping {
        right: auto;
        left: 0;
        top: 4%;
        max-width: 86%
    }
}

.h21-road {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 36px;
    padding: clamp(1.6rem,5vw,4rem)
}

.h21-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 1.4rem;
    position: relative
}

.h21-steps::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 4.4rem;
    border-top: 2px dashed var(--line)
}

.h21-steps li {
    position: relative
}

.h21-day {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--surface-2);
    margin-bottom: 1rem
}

.h21-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--line);
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
    transition: background-color .3s ease,transform .3s ease
}

.h21-steps li:hover .h21-dot {
    background: var(--brand);
    color: var(--ink);
    border-color: transparent;
    transform: scale(1.06)
}

.h21-dot.is-end {
    background: var(--ink);
    color: var(--brand);
    border-color: transparent
}

[data-bs-theme="dark"] .h21-dot.is-end {
    background: var(--brand);
    color: var(--ink)
}

.h21-steps h3 {
    font-size: 1.2rem;
    margin-bottom: .45rem
}

.h21-steps p {
    font-size: .92rem;
    color: var(--muted);
    margin: 0
}

@media (max-width: 991.98px) {
    .h21-steps {
        grid-template-columns:1fr;
        gap: 0
    }

    .h21-steps::before {
        top: 0;
        bottom: 0;
        left: 27px;
        right: auto;
        border-top: 0;
        border-left: 2px dashed var(--line)
    }

    .h21-steps li {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 1.2rem;
        padding-bottom: 1.6rem
    }

    .h21-steps li:last-child {
        padding-bottom: 0
    }

    .h21-dot {
        grid-row: 1 / span 3;
        margin: 0
    }

    .h21-day {
        justify-self: start;
        margin-bottom: .5rem
    }
}

.h21-quote {
    position: relative;
    height: 100%;
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column
}

.h21-quote blockquote {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1.2rem
}

.h21-quote figcaption strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: -.02em
}

.h21-quote figcaption small {
    color: var(--muted);
    font-size: .85rem
}

.h21-quote .avatar {
    width: 48px;
    height: 48px;
    border-color: var(--surface)
}

.h21-quote-stat {
    margin-top: auto;
    align-self: flex-start;
    font-size: .82rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: color-mix(in srgb,var(--brand) 32%,var(--surface))
}

.h21-quote-stat b {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: -.02em;
    margin-right: .2rem
}

.h21-quote.is-big {
    display: grid;
    grid-template-columns: 42% 1fr;
    padding: 0;
    overflow: hidden
}

.h21-quote-photo {
    display: block;
    min-height: 100%
}

.h21-quote-body {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.8rem
}

.h21-q {
    font-size: 2.8rem;
    line-height: 1;
    color: var(--brand-2);
    margin-bottom: .6rem
}

[data-bs-theme="dark"] .h21-q {
    color: var(--brand)
}

.h21-quote.is-big blockquote {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.02em;
    line-height: 1.35
}

.h21-quote.is-big figcaption {
    margin-bottom: 1.2rem
}

@media (max-width: 575.98px) {
    .h21-quote.is-big {
        grid-template-columns:1fr
    }

    .h21-quote-photo {
        aspect-ratio: 4 / 3.4
    }

    .h21-quote-body {
        padding: 1.5rem
    }

    .h21-quote.is-big blockquote {
        font-size: 1.15rem
    }
}

.h21-addr-form {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border-radius: 999px;
    padding: .35rem .35rem .35rem 1.1rem;
    max-width: 540px;
    position: relative;
    z-index: 1
}

.h21-addr-form .bi {
    color: var(--ink);
    font-size: 1.1rem
}

.h21-addr-form input {
    border: 0;
    background: transparent;
    flex: 1;
    min-width: 0;
    padding: .6rem .4rem;
    color: var(--ink)
}

.h21-addr-form input::placeholder {
    color: #6b6862
}

.h21-addr-form input:focus {
    outline: none
}

.h21-addr-form:focus-within {
    box-shadow: 0 0 0 3px var(--ink)
}

@media (max-width: 575.98px) {
    .h21-addr-form {
        flex-wrap:wrap;
        border-radius: 22px;
        padding: .5rem
    }

    .h21-addr-form .bi {
        margin-left: .6rem
    }

    .h21-addr-form .btn {
        flex: 1 1 100%;
        justify-content: center
    }
}

.h22-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h22-hero h1 {
    font-size: clamp(2.6rem,5.2vw,4.7rem)
}

.h22-glow {
    position: absolute;
    inset: -35% -15% auto 30%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(closest-side,color-mix(in srgb,var(--brand-2) 16%,transparent),transparent)
}

[data-bs-theme="dark"] .h22-glow {
    background: radial-gradient(closest-side,color-mix(in srgb,var(--brand-2) 22%,transparent),transparent)
}

.h22-trust {
    list-style: none;
    margin: 2.2rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    font-size: .9rem;
    color: var(--muted)
}

.h22-trust li {
    display: inline-flex;
    align-items: center;
    gap: .45rem
}

.h22-trust .bi {
    color: var(--brand-2-text);
    font-size: 1.05rem
}

[data-bs-theme="dark"] .h22-trust .bi {
    color: var(--brand)
}

.h22-art {
    position: relative;
    aspect-ratio: 1 / .86;
    max-width: 680px;
    margin-inline:auto;container-type: inline-size;
    font-size: clamp(9px,2.2cqw,15px)
}

.h22-doc {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 88%;
    border-radius: 2.4em;
    box-shadow: var(--shadow)
}

.h22-book {
    position: absolute;
    left: 0;
    top: 7%;
    width: 62%;
    z-index: 2;
    padding: 1.3em;
    border-radius: 1.6em;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: 0 2px 4px rgba(18,18,18,.04),0 30px 60px -24px rgba(18,18,18,.3)
}

.h22-book-head {
    display: flex;
    align-items: center;
    gap: .7em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--line)
}

.h22-book-head strong {
    display: block;
    font-size: 1em;
    line-height: 1.2
}

.h22-book-head small {
    font-size: .78em;
    color: var(--muted)
}

.h22-logo {
    width: 2.5em;
    height: 2.5em;
    flex: none;
    border-radius: .8em;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: var(--on-brand-2);
    font-size: 1.05em
}

.h22-steps-mini {
    margin-left: auto;
    display: flex;
    gap: .3em
}

.h22-steps-mini i {
    width: 1.4em;
    height: .3em;
    border-radius: 999px;
    background: var(--surface-2)
}

.h22-steps-mini i.on {
    background: var(--brand-2)
}

.h22-book-sec {
    padding-top: .9em
}

.h22-lbl {
    display: block;
    font-size: .72em;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .5em
}

.h22-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35em
}

.h22-chips span {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .35em .75em;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: .78em
}

.h22-chips span.on {
    background: color-mix(in srgb,var(--brand-2) 12%,var(--surface));
    border-color: var(--brand-2);
    color: var(--brand-2-text);
    font-weight: 600
}

[data-bs-theme="dark"] .h22-chips span.on {
    color: var(--text);
    background: color-mix(in srgb,var(--brand-2) 30%,var(--surface))
}

.h22-doc-row {
    display: flex;
    align-items: center;
    gap: .7em;
    margin-top: .9em;
    padding: .7em;
    border-radius: 1em;
    background: var(--surface-2)
}

.h22-doc-row img {
    width: 2.9em;
    height: 2.9em;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

.h22-doc-row>span:nth-child(2) {
    min-width: 0;
    flex: 1;
    line-height: 1.25
}

.h22-doc-row strong {
    display: block;
    font-size: .88em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h22-doc-row small {
    font-size: .74em;
    color: var(--muted);
    white-space: nowrap
}

.h22-doc-row small .bi {
    color: #f5a623
}

.h22-new {
    flex: none;
    font-size: .7em;
    font-weight: 700;
    padding: .35em .7em;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink)
}

.h22-days {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: .35em
}

.h22-days span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .45em 0;
    border-radius: .8em;
    border: 1px solid var(--line);
    font-weight: 700;
    font-size: .95em;
    line-height: 1.2
}

.h22-days small {
    font-size: .68em;
    font-weight: 500;
    color: var(--muted)
}

.h22-days span.on {
    background: var(--brand-2);
    border-color: var(--brand-2);
    color: var(--on-brand-2)
}

.h22-days span.on small {
    color: inherit;
    opacity: .8
}

.h22-days span.off,.h22-slots span.off {
    opacity: .4;
    text-decoration: line-through
}

.h22-slots {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .35em;
    margin-top: .55em
}

.h22-slots span {
    text-align: center;
    padding: .45em 0;
    border-radius: .7em;
    background: var(--surface-2);
    font-size: .8em;
    font-weight: 600
}

.h22-slots span.on {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .h22-slots span.on {
    background: #fff;
    color: var(--ink)
}

.h22-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    margin-top: 1em;
    padding: .8em;
    border-radius: 999px;
    background: var(--brand-2);
    color: var(--on-brand-2);
    font-weight: 600;
    font-size: .88em
}

.h22-score {
    position: absolute;
    z-index: 3;
    right: 4%;
    top: 5%;
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .7em 1em;
    border-radius: 1.2em;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.h22-score-n {
    font-family: var(--font-display);
    font-size: 2em;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1
}

.h22-score .rating {
    display: block;
    line-height: 1
}

.h22-score .rating .bi-star-fill {
    font-size: .8em
}

.h22-score small {
    display: block;
    font-size: .74em;
    color: var(--muted);
    margin-top: .2em;
    white-space: nowrap
}

.h22-hipaa {
    position: absolute;
    z-index: 3;
    right: -1%;
    bottom: 3%;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .5em 1em .5em .5em;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .9em;
    box-shadow: var(--shadow);
    white-space: nowrap
}

.h22-hipaa .bi {
    width: 2.1em;
    height: 2.1em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink)
}

[data-bs-theme="dark"] .h22-hipaa {
    background: var(--surface-2);
    border: 1px solid var(--line)
}

@media (min-width: 992px) and (max-width:1199.98px) {
    .h22-art {
        aspect-ratio:1 / .84;
        font-size: 11px
    }

    .h22-book {
        width: 74%
    }

    .h22-doc {
        width: 46%;
        height: 80%
    }
}

@media (max-width: 575.98px) {
    .h22-art {
        aspect-ratio:1 / 1.22;
        font-size: 3.15cqw
    }

    .h22-doc {
        width: 58%;
        height: 62%
    }

    .h22-book {
        width: 84%;
        top: 22%
    }

    .h22-score {
        right: 0;
        top: 2%
    }

    .h22-hipaa {
        right: auto;
        left: 0;
        bottom: auto;
        top: 10%
    }
}

.h22-tabs {
    gap: .5rem;
    margin-bottom: 1.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px
}

.h22-tabs::-webkit-scrollbar {
    display: none
}

.h22-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    transition: background-color .2s ease,color .2s ease
}

.h22-tabs .nav-link:hover {
    background: var(--surface-2)
}

.h22-tabs .nav-link.active {
    background: var(--ink);
    color: #fff;
    border-color: transparent
}

.h22-tabs .nav-link.active .bi {
    color: var(--brand)
}

[data-bs-theme="dark"] .h22-tabs .nav-link.active {
    background: #fff;
    color: var(--ink)
}

[data-bs-theme="dark"] .h22-tabs .nav-link.active .bi {
    color: var(--brand-2-text)
}

.h22-panel {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(1.5rem,4vw,3.5rem);
    align-items: center;
    padding: clamp(1rem,2vw,1.4rem);
    border-radius: 32px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.h22-panel-img {
    aspect-ratio: 4 / 3;
    border-radius: 22px
}

.h22-panel-body {
    padding-right: clamp(0rem,2vw,2rem)
}

.h22-panel-body h3 {
    font-size: clamp(1.5rem,2.6vw,2.1rem);
    letter-spacing: -.03em;
    margin-bottom: 1rem
}

.h22-panel-stats {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 1.4rem 0 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    border-top: 1px solid var(--line)
}

.h22-panel-stats b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem,2.4vw,2rem);
    letter-spacing: -.04em;
    line-height: 1.1
}

.h22-panel-stats span {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.35;
    display: block
}

.h22-spec {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap
}

.h22-spec-lbl {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.h22-spec ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.h22-spec li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: .9rem;
    font-weight: 500
}

.h22-spec .bi {
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h22-spec .bi {
    color: var(--brand)
}

@media (max-width: 991.98px) {
    .h22-panel {
        grid-template-columns:1fr
    }

    .h22-panel-body {
        padding: 0 .4rem .6rem
    }
}

@media (max-width: 575.98px) {
    .h22-panel-stats {
        grid-template-columns:1fr 1fr
    }

    .h22-tabs {
        margin-inline:calc(var(--bs-gutter-x,1.5rem) * -.5);padding-inline: calc(var(--bs-gutter-x,1.5rem) * .5)
    }
}

.h22-path {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 1rem;
    position: relative
}

.h22-path::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 28px;
    height: 2px;
    background: linear-gradient(90deg,var(--line),var(--brand-2),var(--line));
    opacity: .7
}

.h22-path>li {
    position: relative;
    display: flex;
    flex-direction: column
}

.h22-path>li::after {
    content: "";
    position: absolute;
    inset: 28px 0 0;
    z-index: 0;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h22-path>li>* {
    position: relative;
    z-index: 1
}

.h22-node {
    align-self: flex-start;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    margin: 0 1.4rem 1.2rem;
    transition: transform .3s ease
}

.h22-node.is-key {
    background: var(--brand-2);
    color: var(--on-brand-2);
    border-color: transparent
}

.h22-path>li:hover .h22-node {
    transform: translateY(-4px)
}

.h22-path .h22-step,.h22-path h3,.h22-path .h22-think {
    padding-inline:1.4rem}

.h22-step {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.h22-path h3 {
    font-size: 1.4rem;
    margin: .3rem 0 .6rem
}

.h22-think {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.02rem;
    color: var(--brand-2-text);
    margin-bottom: 1rem
}

[data-bs-theme="dark"] .h22-think {
    color: color-mix(in srgb,var(--brand-2) 45%,#fff)
}

.h22-path ul {
    list-style: none;
    margin: auto 1.4rem 0;
    padding: 1rem 0 1.4rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .5rem;
    font-size: .88rem;
    color: var(--muted)
}

.h22-path ul li {
    position: relative;
    padding-left: 1.3rem;
    line-height: 1.4
}

.h22-path ul li::before {
    content: "\F272";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h22-path ul li::before {
    color: var(--brand)
}

@media (max-width: 1199.98px) {
    .h22-path {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap: 1.4rem
    }

    .h22-path::before {
        display: none
    }

    .h22-path>li:last-child {
        grid-column: span 2
    }
}

@media (max-width: 575.98px) {
    .h22-path {
        grid-template-columns:1fr
    }

    .h22-path>li:last-child {
        grid-column: auto
    }
}

.h22-rules {
    display: grid;
    gap: 1.2rem
}

.h22-rule {
    display: flex;
    gap: 1rem
}

.h22-rule-ic {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb,var(--brand-2) 12%,var(--surface));
    color: var(--brand-2-text);
    font-size: 1.2rem
}

[data-bs-theme="dark"] .h22-rule-ic {
    background: color-mix(in srgb,var(--brand-2) 26%,var(--surface));
    color: #fff
}

.h22-rule h3 {
    font-size: 1.1rem;
    margin-bottom: .25rem
}

.h22-rule p {
    font-size: .92rem;
    color: var(--muted);
    margin: 0
}

.h22-review {
    position: relative;
    border-radius: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden
}

.h22-review-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.4rem;
    background: var(--surface-2);
    font-size: .88rem;
    font-weight: 600
}

.h22-review-bar .bi {
    margin-right: .4rem;
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h22-review-bar .bi {
    color: var(--brand)
}

.h22-status {
    font-size: .76rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb,#f5a623 22%,var(--surface))
}

.h22-review-body {
    padding: 1.2rem 1.4rem .4rem
}

.h22-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    margin-bottom: .6rem;
    border-radius: 14px;
    font-size: 1rem
}

.h22-line em {
    flex: none;
    font-style: normal;
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px
}

.h22-line.is-cut {
    background: color-mix(in srgb,var(--coral) 9%,var(--surface))
}

.h22-line.is-cut span {
    text-decoration: line-through;
    text-decoration-color: var(--coral);
    text-decoration-thickness: 2px;
    color: var(--muted)
}

.h22-line.is-cut em {
    background: color-mix(in srgb,var(--coral) 22%,var(--surface))
}

.h22-line.is-ok {
    background: color-mix(in srgb,#1e9e6a 9%,var(--surface));
    font-weight: 500
}

.h22-line.is-ok em {
    background: color-mix(in srgb,#1e9e6a 22%,var(--surface))
}

.h22-review-foot {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--line)
}

.h22-review-foot img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

.h22-review-foot strong {
    display: block;
    font-size: .92rem
}

.h22-review-foot small {
    font-size: .8rem;
    color: var(--muted)
}

.h22-stamp {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 2px solid #1e9e6a;
    color: #17805a;
    font-weight: 700;
    font-size: .85rem;
    transform: rotate(-4deg)
}

[data-bs-theme="dark"] .h22-stamp {
    color: #4fd1a0;
    border-color: #4fd1a0
}

.h22-checks {
    list-style: none;
    margin: 0;
    padding: .9rem 1.4rem 1.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    font-size: .85rem;
    font-weight: 500;
    background: var(--surface-2)
}

.h22-checks .bi {
    color: #1e9e6a;
    margin-right: .35rem
}

@media (max-width: 575.98px) {
    .h22-line {
        flex-direction:column;
        align-items: flex-start;
        gap: .45rem;
        font-size: .92rem
    }

    .h22-review-foot {
        flex-wrap: wrap
    }
}

.h22-res {
    height: 100%;
    padding: 1.8rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h22-res-k {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .92rem;
    color: var(--muted)
}

.h22-res-k .bi {
    color: var(--brand)
}

.h22-res-v {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem,6vw,4.6rem);
    letter-spacing: -.05em;
    line-height: 1;
    margin: 1rem 0 1.6rem
}

.h22-cmp {
    display: grid;
    gap: .8rem
}

.h22-cmp>span {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-bottom: .7rem;
    font-size: .82rem
}

.h22-cmp>span::before,.h22-cmp>span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 6px;
    border-radius: 999px
}

.h22-cmp>span::before {
    right: 0;
    background: var(--surface-2)
}

.h22-cmp>span::after {
    width: var(--w);
    background: #6d6a64;
    transition: width 1s cubic-bezier(.2,.7,.2,1) .2s
}

.h22-cmp>span.is-now::after {
    background: var(--brand)
}

.reveal:not(.in) .h22-cmp>span::after {
    width: 0
}

.h22-cmp small {
    color: var(--muted);
    font-size: inherit
}

.h22-cmp b {
    font-weight: 600
}

.h22-res-note {
    display: flex;
    gap: .55rem;
    margin: 2rem 0 0;
    font-size: .85rem;
    color: var(--muted);
    max-width: 52rem
}

.h22-locs {
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden
}

.h22-locs-head,.h22-loc {
    display: grid;
    grid-template-columns: 1.6fr 1fr .9fr;
    gap: .8rem;
    align-items: center;
    padding: .85rem 1.2rem
}

.h22-locs-head {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-2)
}

.h22-loc {
    border-top: 1px solid var(--line);
    font-size: .92rem
}

.h22-loc>span:first-child {
    font-weight: 500
}

.h22-loc>span:nth-child(2) {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--muted)
}

.h22-loc .bi {
    font-size: .8rem
}

.h22-loc b.is-up {
    color: var(--text);
    padding: .1rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb,var(--brand) 40%,var(--surface))
}

[data-bs-theme="dark"] .h22-loc b.is-up {
    background: color-mix(in srgb,var(--brand) 22%,var(--surface))
}

.h22-loc>span:last-child {
    font-weight: 600;
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h22-loc>span:last-child {
    color: var(--brand)
}

.h22-feed {
    display: grid;
    gap: 1.2rem
}

.h22-rv {
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h22-rv-top {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .9rem
}

.h22-rv-top strong {
    display: block;
    line-height: 1.2
}

.h22-rv-top small {
    font-size: .8rem;
    color: var(--muted)
}

.h22-rv-av {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .85rem;
    background: color-mix(in srgb,var(--brand-2) 18%,var(--surface));
    color: var(--brand-2-text)
}

.h22-rv-av.is-b {
    background: color-mix(in srgb,var(--brand) 45%,var(--surface));
    color: var(--ink)
}

[data-bs-theme="dark"] .h22-rv-av {
    color: #fff
}

.h22-rv blockquote {
    margin: 0 0 1rem;
    font-size: 1.02rem
}

.h22-reply {
    padding: .9rem 1rem;
    border-radius: 14px;
    background: var(--surface-2);
    font-size: .9rem;
    color: var(--muted);
    border-left: 3px solid var(--brand-2)
}

.h22-reply strong {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--text);
    font-size: .85rem;
    margin-bottom: .2rem
}

.h22-flag {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1.2rem;
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb,#1e9e6a 60%,transparent);
    font-size: .88rem;
    color: var(--muted)
}

.h22-flag .bi {
    font-size: 1.4rem;
    color: #1e9e6a
}

.h22-flag b {
    display: block;
    color: var(--text)
}

.h22-md {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .35s ease,box-shadow .35s ease
}

.h22-md:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.h22-md-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3.4
}

.h22-md-img img {
    object-position: center 20%
}

.h22-md-vid {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem .35rem .4rem;
    border-radius: 999px;
    background: rgba(18,18,18,.72);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

.h22-md-vid .bi {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--ink)
}

.h22-md-body {
    padding: 1.3rem 1.4rem 1.4rem
}

.h22-accept {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: #17805a;
    margin-bottom: .6rem
}

[data-bs-theme="dark"] .h22-accept {
    color: #4fd1a0
}

.h22-md h3 {
    font-size: 1.35rem;
    margin-bottom: .2rem
}

.h22-md-body>p {
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 1rem
}

.h22-md-meta {
    list-style: none;
    margin: 0;
    padding: .9rem 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    font-size: .82rem;
    color: var(--muted)
}

.h22-md-meta .bi {
    margin-right: .3rem;
    color: var(--text)
}

.h22-md-meta .bi-star-fill {
    color: #f5a623
}

.h22-content {
    height: 100%;
    padding: 1.8rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: #f3f1ec;
    display: flex;
    flex-direction: column
}

[data-bs-theme="dark"] .h22-content {
    background: color-mix(in srgb,var(--brand-2) 26%,#111114)
}

.h22-content h3 {
    font-size: 1.45rem;
    margin-bottom: 1.3rem
}

.h22-content ul {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: grid;
    gap: 1.1rem
}

.h22-content li {
    display: flex;
    gap: .85rem;
    font-size: .88rem;
    color: #a3a09a;
    line-height: 1.45
}

.h22-content li .bi {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    color: var(--brand);
    font-size: 1rem
}

.h22-content li b {
    display: block;
    color: #f3f1ec;
    font-size: .95rem;
    margin-bottom: .1rem
}

.h22-content-stat {
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .88rem;
    color: #a3a09a
}

.h22-content-stat b {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: -.04em;
    color: var(--brand);
    margin-right: .45rem
}

.h22-cta-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1.4rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(18,18,18,.08);
    font-size: .85rem;
    font-weight: 600
}

.h22-cta .btn-line {
    border-color: var(--ink);
    color: var(--ink)
}

.h22-cta .btn-line:hover,.h22-cta .btn-line:focus-visible {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink)
}

.h22-cta .cta-photo img {
    object-position: center 20%
}

.h23-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h23-hero h1 {
    font-size: clamp(2.6rem,5.4vw,4.9rem)
}

.h23-hero .hero-bg .b1 {
    right: -200px;
    top: -220px
}

.h23-proof {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.2rem
}

.h23-proof li {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    border-left: 2px solid var(--brand-2)
}

[data-bs-theme="dark"] .h23-proof li {
    border-color: var(--brand)
}

.h23-proof strong {
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: -.04em;
    line-height: 1.1
}

.h23-proof span {
    font-size: .9rem;
    color: var(--muted)
}

.h23-stage {
    position: relative;
    padding: 5.5% 0 9.5%;
    max-width: 720px;
    margin-inline:auto;container-type: inline-size
}

.h23-stage>* {
    font-size: clamp(8px,2.05cqw,15px)
}

.h23-student {
    position: absolute;
    right: 0;
    top: 0;
    width: 42%;
    height: 84%;
    border-radius: 999px 999px 32px 32px;
    box-shadow: var(--shadow)
}

.h23-dash {
    position: relative;
    width: 64%;
    z-index: 2;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 1.6em;
    box-shadow: var(--shadow);
    padding: 1.2em;
    display: grid;
    gap: 1em
}

.h23-dash-bar {
    display: flex;
    align-items: center;
    gap: .7em
}

.h23-dash-bar b {
    display: block;
    font-size: 1.05em;
    line-height: 1.2
}

.h23-dash-bar small {
    display: block;
    font-size: .78em;
    color: var(--muted)
}

.h23-dash-logo {
    width: 2.5em;
    height: 2.5em;
    border-radius: .8em;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: #fff;
    font-size: 1.05em
}

.h23-live {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-size: .75em;
    font-weight: 600;
    padding: .35em .8em;
    border-radius: 999px;
    background: color-mix(in srgb,var(--brand) 35%,var(--surface))
}

.h23-live i {
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: #1f9d55;
    animation: h23-blink 1.6s ease-in-out infinite
}

@keyframes h23-blink {
    50% {
        opacity: .25
    }
}

.h23-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7em
}

.h23-kpi {
    background: var(--surface-2);
    border-radius: 1em;
    padding: .8em .9em;
    min-width: 0
}

.h23-kpi small {
    display: block;
    font-size: .72em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.h23-kpi b {
    display: block;
    font-family: var(--font-display);
    font-size: 2em;
    letter-spacing: -.04em;
    line-height: 1.15
}

.h23-kpi em {
    font-style: normal;
    font-size: .72em;
    font-weight: 600;
    color: #1f9d55;
    display: inline-flex;
    align-items: center;
    gap: .2em
}

.h23-kpi em.is-muted {
    color: var(--muted)
}

.h23-seats {
    font-size: .85em
}

.h23-seats span {
    color: var(--muted)
}

.h23-seats b {
    color: var(--text)
}

.h23-meter {
    display: block;
    height: .75em;
    margin-top: .45em;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.h23-meter span {
    display: block;
    width: var(--p);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,var(--brand-2),color-mix(in srgb,var(--brand-2) 55%,var(--brand)))
}

.h23-chart small {
    display: block;
    font-size: .72em;
    color: var(--muted);
    margin-bottom: .5em
}

.h23-bars {
    display: flex;
    align-items: flex-end;
    gap: .35em;
    height: 4.2em
}

.h23-bars span {
    flex: 1;
    height: var(--h);
    border-radius: .3em .3em .1em .1em;
    background: color-mix(in srgb,var(--brand-2) 22%,var(--surface-2))
}

.h23-bars span.is-now {
    background: var(--brand);
    box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--ink) 15%,transparent)
}

.h23-enrolled {
    display: flex;
    align-items: center;
    gap: .7em;
    padding-top: .9em;
    border-top: 1px solid var(--line);
    font-size: .85em;
    color: var(--muted)
}

.h23-enrolled b {
    color: var(--text)
}

.h23-enrolled .avatar {
    width: 2.4em;
    height: 2.4em;
    border-width: 2px;
    border-color: var(--surface);
    object-fit: cover
}

.h23-enrolled .avatar + .avatar {
    margin-inline-start:-.7em}

.h23-course {
    position: absolute;
    z-index: 3;
    right: 2%;
    bottom: 0;
    width: 48%;
    display: flex;
    gap: .8em;
    align-items: stretch;
    padding: .7em;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 1.3em;
    box-shadow: var(--shadow)
}

.h23-course-img {
    flex: 0 0 34%;
    border-radius: .9em
}

.h23-course-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2em;
    padding-block:.1em}

.h23-course-body b {
    font-size: 1em;
    line-height: 1.2
}

.h23-course-body small {
    font-size: .74em;
    color: var(--muted)
}

.h23-open {
    align-self: flex-start;
    font-size: .66em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .3em .7em;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink)
}

.h23-course-foot {
    display: flex;
    justify-content: space-between;
    gap: .5em;
    margin-top: auto;
    font-size: .74em;
    padding-top: .3em
}

.h23-stars .bi {
    color: #f5a623
}

.h23-left {
    font-weight: 600;
    color: var(--coral)
}

.h23-toast {
    position: absolute;
    z-index: 3;
    right: 20%;
    top: 2%;
    display: flex;
    align-items: center;
    gap: .65em;
    padding: .6em 1em .6em .6em;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
    font-size: clamp(7px,1.75cqw,13px);
    white-space: nowrap
}

.h23-toast b {
    display: block;
    line-height: 1.2
}

.h23-toast small {
    display: block;
    font-size: .8em;
    opacity: .7
}

.h23-toast-ic {
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink)
}

[data-bs-theme="dark"] .h23-toast {
    background: #fff;
    color: var(--ink)
}

.h23-who {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    position: relative;
    padding-top: 2.4rem
}

.h23-who-tab {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.6rem;
    padding: 0 1.2rem;
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    font-weight: 600;
    font-size: .92rem
}

.h23-who-tab .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .h23-who-tab .bi {
    color: var(--brand)
}

.h23-who-img {
    display: block;
    aspect-ratio: 4 / 4.2;
    border-radius: 0 var(--radius) 0 0;
    border: 1px solid var(--line);
    border-bottom: 0
}

.h23-who-img img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.h23-who:hover .h23-who-img img {
    transform: scale(1.05)
}

.h23-who-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.3rem 1.3rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: background-color .3s ease
}

.h23-who-body strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: -.02em
}

.h23-who-body small {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.45
}

.h23-who-stat {
    margin-top: auto;
    padding-top: .9rem;
    font-size: .88rem;
    color: var(--muted)
}

.h23-who-stat b {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--text);
    margin-right: .25rem
}

.h23-who:hover .h23-who-body,.h23-who:hover .h23-who-tab {
    background: color-mix(in srgb,var(--brand) 22%,var(--surface))
}

[data-bs-theme="dark"] .h23-who:hover .h23-who-body,[data-bs-theme="dark"] .h23-who:hover .h23-who-tab {
    background: color-mix(in srgb,var(--brand) 10%,var(--surface))
}

.h23-funnel {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem
}

.h23-funnel li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h23-f-no {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .85rem;
    color: var(--brand);
    letter-spacing: .08em
}

.h23-f-head {
    display: flex;
    align-items: center;
    gap: .6rem
}

.h23-f-head .bi {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--brand);
    font-size: 1.1rem
}

.h23-f-head h3 {
    font-size: 1.2rem;
    margin: 0
}

.h23-funnel p {
    color: var(--muted);
    font-size: .95rem;
    margin: 0
}

.h23-f-bar {
    margin-top: auto;
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.h23-f-bar span {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: inherit;
    background: var(--brand)
}

.h23-f-num b {
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: -.04em;
    line-height: 1
}

.h23-f-num small {
    display: block;
    color: var(--muted);
    font-size: .85rem;
    margin-top: .3rem
}

.h23-f-rate {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    transform: translate(-50%,-50%);
    padding: .3rem .55rem;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-size: .75rem;
    font-weight: 700;
    box-shadow: 0 0 0 4px var(--ink)
}

[data-bs-theme="dark"] .h23-f-rate {
    box-shadow: 0 0 0 4px #050506
}

.h23-funnel li:last-child {
    background: color-mix(in srgb,var(--brand) 14%,var(--surface));
    border-color: color-mix(in srgb,var(--brand) 40%,transparent)
}

.h23-tabs {
    gap: .6rem
}

.h23-tab {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    text-align: start;
    padding: .9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    transition: background-color .25s ease,border-color .25s ease
}

.h23-tab .bi {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    font-size: 1.15rem
}

.h23-tab b {
    display: block;
    font-weight: 600
}

.h23-tab small {
    display: block;
    color: var(--muted);
    font-size: .85rem
}

.h23-tab:hover {
    background: var(--surface)
}

.h23-tab.active {
    background: var(--surface);
    border-color: var(--text);
    box-shadow: var(--shadow)
}

.h23-tab.active .bi {
    background: var(--brand);
    color: var(--ink)
}

.h23-panes {
    height: 100%
}

.h23-pane {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden
}

.h23-pane-img {
    position: relative;
    min-height: 420px
}

.h23-pane-chip {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--shadow)
}

.h23-pane-chip .bi {
    color: var(--brand-2)
}

[data-bs-theme="dark"] .h23-pane-chip .bi {
    color: var(--brand)
}

.h23-pane-body {
    padding: clamp(1.5rem,3vw,2.4rem);
    display: flex;
    flex-direction: column
}

.h23-pane-body h3 {
    font-size: 1.7rem
}

.h23-checks {
    list-style: none;
    padding: 0;
    margin: .4rem 0 1.6rem;
    display: grid;
    gap: .65rem
}

.h23-checks li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .97rem
}

.h23-checks .bi {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    font-size: .8rem;
    margin-top: .15rem
}

.h23-pane-stat {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: .7rem;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--line)
}

.h23-pane-stat b {
    font-family: var(--font-display);
    font-size: 2.6rem;
    letter-spacing: -.05em;
    line-height: 1
}

.h23-pane-stat span {
    color: var(--muted);
    font-size: .92rem
}

.h23-stat {
    height: 100%;
    padding: 1.3rem;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.h23-stat b {
    display: block;
    font-family: var(--font-display);
    font-size: 2.3rem;
    letter-spacing: -.04em;
    line-height: 1
}

.h23-stat>span {
    display: block;
    color: var(--muted);
    font-size: .9rem;
    margin-top: .4rem
}

.h23-report {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.4rem,3vw,2.2rem);
    background-image: repeating-linear-gradient(transparent 0 39px,color-mix(in srgb,var(--brand-2) 10%,transparent) 39px 40px)
}

.h23-report::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.4rem;
    width: 2px;
    background: color-mix(in srgb,var(--coral) 45%,transparent)
}

.h23-report>* {
    position: relative
}

.h23-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-left: 1.6rem;
    margin-bottom: 1.2rem
}

.h23-report-head small {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted)
}

.h23-report-head strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -.03em
}

.h23-seal {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    background: var(--brand);
    color: var(--ink);
    border: 3px dashed color-mix(in srgb,var(--ink) 30%,transparent);
    transform: rotate(-12deg)
}

.h23-grades {
    width: 100%;
    border-collapse: collapse;
    font-size: .97rem
}

.h23-grades th,.h23-grades td {
    padding: .7rem .5rem;
    border-bottom: 1px solid var(--line);
    text-align: start
}

.h23-grades thead th {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 0
}

.h23-grades tbody th {
    font-weight: 600;
    padding-left: 1.6rem
}

.h23-grades thead th:first-child {
    padding-left: 1.6rem
}

.h23-grades td {
    color: var(--muted);
    font-variant-numeric: tabular-nums
}

.h23-grades td:nth-child(3) {
    color: var(--text);
    font-weight: 600
}

.h23-grades th:last-child,.h23-grades td:last-child {
    text-align: end
}

.h23-grade {
    display: inline-grid;
    place-items: center;
    min-width: 2.6rem;
    height: 2.1rem;
    padding-inline:.4rem;border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--coral);
    border: 2px solid currentColor;
    transform: rotate(-4deg)
}

.h23-grade.is-b {
    color: var(--brand-2-text)
}

[data-bs-theme="dark"] .h23-grade.is-b {
    color: color-mix(in srgb,var(--brand-2) 50%,#fff)
}

.h23-report-note {
    margin: 1.2rem 0 0 1.6rem;
    font-style: italic;
    font-size: .95rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    align-items: center
}

.h23-report-note .bi {
    color: var(--coral);
    font-style: normal
}

.h23-report-note span {
    font-style: normal;
    font-size: .82rem;
    color: var(--muted)
}

.h23-tl {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1.4rem;
    position: relative
}

.h23-tl::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3.15rem;
    height: 2px;
    background: repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)
}

.h23-tl li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.h23-tl-wk {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .7rem
}

.h23-tl-dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1.5px solid var(--text);
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1
}

.h23-tl h3 {
    font-size: 1.2rem;
    margin-bottom: .5rem
}

.h23-tl p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 1rem
}

.h23-tl .tag {
    margin-top: auto
}

.h23-tl li.is-start .h23-tl-dot {
    background: var(--brand);
    color: var(--ink);
    border-color: var(--brand);
    box-shadow: 0 0 0 6px color-mix(in srgb,var(--brand) 30%,transparent)
}

.h23-tl li.is-start .tag {
    background: var(--ink);
    color: #fff
}

[data-bs-theme="dark"] .h23-tl li.is-start .tag {
    background: var(--brand);
    color: var(--ink)
}

.h23-voices {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.2rem
}

.h23-voice-main {
    grid-row: span 2;
    display: grid;
    grid-template-columns: .85fr 1fr;
    background: var(--brand-2);
    color: #fff;
    border-radius: var(--radius);
    overflow: hidden
}

.h23-voice-img {
    display: block;
    min-height: 100%
}

.h23-voice-body {
    padding: clamp(1.6rem,3.5vw,2.8rem);
    display: flex;
    flex-direction: column
}

.h23-voice-body .eyebrow {
    color: color-mix(in srgb,var(--brand-2) 15%,#fff)
}

.h23-voice-main blockquote {
    font-family: var(--font-display);
    font-size: clamp(1.35rem,2.2vw,1.85rem);
    letter-spacing: -.02em;
    line-height: 1.3;
    margin-bottom: 2rem
}

.h23-voice-main figcaption {
    margin-top: auto
}

.h23-voice-main figcaption strong {
    display: block;
    font-size: 1.05rem
}

.h23-voice-main figcaption span {
    font-size: .9rem;
    opacity: .8
}

.h23-voice {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.h23-voice blockquote {
    margin: 0;
    font-size: 1.02rem
}

.h23-voice figcaption {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .8rem
}

.h23-voice figcaption .avatar {
    object-fit: cover;
    border-color: var(--surface)
}

.h23-voice figcaption strong {
    display: block;
    font-size: .95rem
}

.h23-voice figcaption small {
    color: var(--muted)
}

.h23-plan h3 {
    margin-top: 1.2rem
}

.h23-plan-ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: var(--surface-2)
}

.h23-plan.featured .h23-plan-ic {
    background: rgba(255,255,255,.16);
    color: #fff
}

.h23-cta {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: clamp(2.2rem,6vw,4.5rem);
    background: var(--brand);
    color: var(--ink)
}

.h23-cta::after {
    content: "";
    position: absolute;
    right: -140px;
    top: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 70px solid rgba(18,18,18,.07)
}

.h23-cta h2 {
    font-size: clamp(2.3rem,5vw,4.2rem)
}

.h23-cta .btn-ink {
    background: var(--ink);
    color: #fff
}

.h23-cta .btn-ink:hover {
    background: var(--brand-2)
}

.h23-cta .btn-line {
    border-color: var(--ink);
    color: var(--ink)
}

.h23-cta .btn-line:hover {
    background: var(--ink);
    color: #fff
}

.h23-cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(18,18,18,.08);
    font-size: .88rem;
    font-weight: 600
}

.h23-ticket {
    position: relative;
    z-index: 1;
    max-width: 360px;
    margin-inline:auto;padding: 1.8rem;
    border-radius: 22px;
    background: #fff;
    color: #121212;
    box-shadow: 0 30px 60px -25px rgba(0,0,0,.35);
    transform: rotate(4deg);
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.h23-ticket-ic {
    position: absolute;
    right: 1.4rem;
    top: 1.2rem;
    font-size: 2rem;
    color: var(--brand-2)
}

.h23-ticket small {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6b675f
}

.h23-ticket strong {
    font-family: var(--font-display);
    font-size: clamp(1.5rem,5vw,2rem);
    padding-right: 2.6rem;
    letter-spacing: -.03em;
    line-height: 1.1
}

.h23-ticket>span {
    color: #4a4740
}

.h23-ticket-foot {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px dashed rgba(18,18,18,.15);
    font-size: .85rem;
    font-weight: 600
}

.h23-ticket-foot .bi {
    color: #1f9d55
}

@media (max-width: 1199.98px) {
    .h23-funnel {
        grid-template-columns:repeat(2,1fr)
    }

    .h23-f-rate {
        display: none
    }

    .h23-tl {
        grid-template-columns: repeat(3,1fr);
        row-gap: 2.4rem
    }

    .h23-tl::before {
        display: none
    }

    .h23-plan .price {
        font-size: 2.8rem
    }
}

@media (max-width: 991.98px) {
    .h23-stage {
        max-width:640px
    }

    .h23-pane-img {
        min-height: 320px
    }

    .h23-voices {
        grid-template-columns: 1fr 1fr
    }

    .h23-voice-main {
        grid-column: 1 / -1;
        grid-row: auto
    }

    .h23-ticket {
        transform: rotate(2deg)
    }
}

@media (max-width: 767.98px) {
    .h23-pane {
        grid-template-columns:1fr
    }

    .h23-pane-img {
        min-height: 240px;
        aspect-ratio: 16 / 10
    }

    .h23-tl {
        grid-template-columns: 1fr;
        row-gap: 0
    }

    .h23-tl li {
        display: grid;
        grid-template-columns: 48px 1fr;
        column-gap: 1rem;
        padding-bottom: 1.8rem
    }

    .h23-tl li::before {
        content: "";
        position: absolute;
        left: 23px;
        top: 48px;
        bottom: 0;
        width: 2px;
        background: var(--line)
    }

    .h23-tl li:last-child::before {
        display: none
    }

    .h23-tl-dot {
        grid-row: 1 / span 4;
        grid-column: 1;
        margin: 0
    }

    .h23-tl-wk,.h23-tl h3,.h23-tl p,.h23-tl .tag {
        grid-column: 2;
        justify-self: start
    }

    .h23-tl-wk {
        margin: .2rem 0 .3rem
    }

    .h23-voices {
        grid-template-columns: 1fr
    }

    .h23-voice-main {
        grid-template-columns: 1fr
    }

    .h23-voice-img {
        aspect-ratio: 16 / 11;
        min-height: 0
    }
}

@media (max-width: 575.98px) {
    .h23-stage {
        padding:12% 0 22%
    }

    .h23-stage>* {
        font-size: 2.75cqw
    }

    .h23-dash {
        width: 76%;
        padding: 1em
    }

    .h23-student {
        width: 44%;
        height: 70%
    }

    .h23-course {
        width: 72%;
        right: 0
    }

    .h23-toast {
        right: auto;
        left: 0;
        top: 0;
        font-size: 2.4cqw
    }

    .h23-funnel {
        grid-template-columns: 1fr
    }

    .h23-who-img {
        aspect-ratio: 16 / 10
    }

    .h23-stat {
        padding: .9rem .8rem
    }

    .h23-stat b {
        font-size: 1.55rem
    }

    .h23-stat>span {
        font-size: .8rem
    }

    .h23-grades {
        font-size: .88rem
    }

    .h23-grades th,.h23-grades td {
        padding-inline:.3rem}

    .h23-grades tbody th,.h23-grades thead th:first-child {
        padding-left: 1.2rem
    }

    .h23-report::before {
        left: 1.6rem
    }

    .h23-report-head {
        padding-left: 1.2rem
    }

    .h23-report-note {
        margin-left: 1.2rem
    }

    .h23-seal {
        width: 52px;
        height: 52px;
        font-size: 1.4rem
    }
}

.h24-hero {
    padding-top: clamp(1.5rem,3.5vw,3rem)
}

.h24-hero h1 {
    font-size: clamp(2.7rem,6vw,5.4rem);
    margin-bottom: 0
}

.h24-hero h1 em {
    display: block
}

.h24-hero .hero-bg .b2 {
    left: auto;
    right: -160px;
    bottom: -120px
}

.h24-stage {
    position: relative;
    margin-top: clamp(2rem,4vw,3.2rem);
    padding-bottom: 3.5rem;
    container-type: inline-size
}

.h24-stage>* {
    font-size: clamp(10px,1.25cqw,15px)
}

.h24-crowd {
    position: relative;
    aspect-ratio: 16 / 6.4;
    border-radius: 36px;
    box-shadow: var(--shadow)
}

.h24-crowd::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(10,10,14,.55),transparent 55%);
    pointer-events: none
}

.h24-live {
    position: absolute;
    z-index: 2;
    left: 2.2em;
    top: 2em;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .5em 1em;
    border-radius: 999px;
    background: rgba(10,10,14,.55);
    color: #fff;
    font-weight: 600;
    font-size: .95em;
    backdrop-filter: blur(6px)
}

.h24-live i {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 0 0 rgba(255,77,77,.6);
    animation: h24-ping 1.8s ease-out infinite
}

@keyframes h24-ping {
    70% {
        box-shadow: 0 0 0 .7em transparent
    }

    100% {
        box-shadow: 0 0 0 0 transparent
    }
}

.h24-ticket {
    position: absolute;
    z-index: 3;
    left: 4%;
    bottom: 0;
    width: 46%;
    display: flex;
    filter: drop-shadow(0 24px 30px rgba(0,0,0,.28));
    transform: rotate(-3deg)
}

.h24-ticket-main {
    flex: 1;
    min-width: 0;
    padding: 1.6em 1.8em;
    border-radius: 1.4em .5em .5em 1.4em;
    background: var(--brand-2);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .7em
}

.h24-ticket-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .78em;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand)
}

.h24-ticket-name {
    font-family: var(--font-display);
    font-size: 2.1em;
    letter-spacing: -.035em;
    line-height: 1.05
}

.h24-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4em 1.6em;
    font-weight: 600;
    font-size: .95em
}

.h24-ticket-meta small {
    display: block;
    font-size: .72em;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7
}

.h24-ticket-stub {
    flex: 0 0 9.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: 1.2em;
    border-radius: .5em 1.4em 1.4em .5em;
    background: #fff;
    color: #121212;
    border-left: 3px dashed color-mix(in srgb,var(--brand-2) 55%,#fff)
}

.h24-qr {
    display: block;
    width: 6.4em;
    aspect-ratio: 1
}

.h24-qr svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: #121212
}

.h24-ticket-stub small {
    font-size: .72em;
    font-weight: 600;
    letter-spacing: .08em;
    color: #5d5a54
}

.h24-sales {
    position: absolute;
    z-index: 3;
    right: 3%;
    top: 10%;
    width: 30%;
    padding: 1.3em 1.4em;
    border-radius: 1.4em;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: var(--shadow)
}

.h24-sales b {
    font-size: 1em
}

.h24-hot {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .25em .7em;
    border-radius: 999px;
    font-size: .75em;
    font-weight: 600;
    background: color-mix(in srgb,var(--coral) 22%,var(--surface));
    color: color-mix(in srgb,var(--coral) 70%,var(--text))
}

.h24-sales-num {
    display: flex;
    align-items: baseline;
    gap: .4em;
    margin: .5em 0 .6em
}

.h24-sales-num strong {
    font-family: var(--font-display);
    font-size: 2.6em;
    letter-spacing: -.045em;
    line-height: 1
}

.h24-sales-num span {
    color: var(--muted);
    font-weight: 600
}

.h24-sales-bar {
    display: block;
    height: .8em;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.h24-sales-bar span {
    display: block;
    width: var(--p);
    height: 100%;
    border-radius: inherit;
    background: repeating-linear-gradient(-45deg,var(--brand-2) 0 .5em,color-mix(in srgb,var(--brand-2) 78%,#fff) .5em 1em)
}

.h24-sales-foot {
    display: flex;
    align-items: center;
    gap: .45em;
    margin-top: .8em;
    font-size: .85em;
    color: var(--muted)
}

.h24-sales-foot b {
    color: var(--text)
}

.h24-sponsor {
    position: absolute;
    z-index: 3;
    right: 8%;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .65em 1.2em .65em .65em;
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    box-shadow: var(--shadow)
}

.h24-sponsor b {
    display: block;
    line-height: 1.15
}

.h24-sponsor small {
    display: block;
    font-size: .8em
}

.h24-sponsor-ic {
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--brand)
}

.h24-badge {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2.4rem 1.2rem 1.4rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: transform .35s ease,box-shadow .35s ease;
    transform-origin: 50% 0
}

.h24-badge:hover {
    transform: rotate(-1.5deg);
    box-shadow: var(--shadow)
}

.h24-badge-slot {
    position: absolute;
    left: 50%;
    top: .9rem;
    width: 3.4rem;
    height: .7rem;
    margin-left: -1.7rem;
    border-radius: 999px;
    background: var(--paper);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.18)
}

.h24-badge-img {
    display: block;
    aspect-ratio: 5 / 4;
    border-radius: 14px;
    margin-bottom: 1.1rem
}

.h24-badge-role {
    align-self: flex-start;
    padding: .3rem .8rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--ink);
    color: #fff;
    margin-bottom: .8rem
}

[data-bs-theme="dark"] .h24-badge-role {
    background: var(--brand);
    color: var(--ink)
}

.h24-badge strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: .4rem
}

.h24-badge small {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.45
}

.h24-badge-stat {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px dashed var(--line);
    margin-inline:-1.2rem;padding-inline:1.2rem;font-size: .88rem;
    color: var(--muted)
}

.h24-badge-stat b {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--text);
    margin-right: .3rem
}

.h24-badge>small {
    margin-bottom: 1rem
}

.h24-sales-tl {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1.2rem
}

.h24-sales-tl li {
    display: flex;
    flex-direction: column
}

.h24-col {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 240px;
    margin-bottom: 1.4rem;
    border-bottom: 2px solid var(--line);
    background: repeating-linear-gradient(0deg,transparent 0 59px,rgba(255,255,255,.06) 59px 60px)
}

.h24-col>span {
    width: 100%;
    height: var(--h);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: .7rem;
    border-radius: 14px 14px 0 0;
    min-height: 3.2rem;
    background: linear-gradient(180deg,color-mix(in srgb,var(--brand-2) 85%,#fff),var(--brand-2));
    color: #fff;
    transform-origin: bottom;
    transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s
}

.reveal:not(.in) .h24-col>span {
    transform: scaleY(.1)
}

.h24-col b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.03em
}

.h24-sales-tl li.is-live .h24-col>span {
    background: var(--brand);
    color: var(--ink)
}

.h24-wk {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .4rem
}

.h24-sales-tl h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.2rem;
    margin-bottom: .5rem
}

.h24-sales-tl h3 .bi {
    color: var(--brand)
}

.h24-sales-tl p {
    color: var(--muted);
    font-size: .94rem;
    margin: 0
}

.h24-case {
    position: relative;
    display: flex;
    height: 100%;
    text-decoration: none;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    isolation: isolate
}

.h24-case-img {
    position: relative;
    flex: 0 0 42%
}

.h24-case-img img {
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}

.h24-case:hover .h24-case-img img {
    transform: scale(1.05)
}

.h24-case-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 1.5rem
}

.h24-case-body strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: -.02em;
    line-height: 1.2
}

.h24-case:hover strong {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px
}

.h24-case-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    margin-top: auto
}

.h24-case-stats>span {
    display: flex;
    flex-direction: column;
    font-size: .82rem;
    color: var(--muted)
}

.h24-case-stats b {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--text)
}

.h24-case.is-big {
    flex-direction: column;
    min-height: 560px;
    border: 0;
    color: #fff;
    background: #121212
}

.h24-case.is-big .h24-case-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto
}

.h24-case.is-big .h24-case-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(8,8,12,.1) 30%,rgba(8,8,12,.85))
}

.h24-case.is-big .h24-case-body {
    justify-content: flex-end;
    padding: clamp(1.5rem,3vw,2.2rem)
}

.h24-case.is-big strong {
    font-size: clamp(1.5rem,2.4vw,2rem);
    max-width: 26ch
}

.h24-case.is-big .tag {
    background: rgba(255,255,255,.18);
    color: #fff
}

.h24-case.is-big .h24-case-stats {
    margin-top: .4rem
}

.h24-case.is-big .h24-case-stats>span {
    color: rgba(255,255,255,.75)
}

.h24-case.is-big .h24-case-stats b {
    color: var(--brand);
    font-size: 2rem
}

.h24-stamp {
    position: absolute;
    right: 1.6rem;
    top: 1.6rem;
    padding: .5rem 1rem;
    border: 3px solid var(--brand);
    border-radius: 10px;
    color: var(--brand);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    transform: rotate(8deg);
    background: rgba(8,8,12,.35)
}

.h24-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .8rem
}

.h24-checks li {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-weight: 500
}

.h24-checks .bi {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line)
}

.h24-tier {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line)
}

.h24-tier-chip {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid var(--line)
}

.h24-tier-chip::before {
    content: "";
    width: .7rem;
    height: .7rem;
    border-radius: 50%
}

.h24-tier-chip.is-silver::before {
    background: linear-gradient(135deg,#e6e6e6,#9a9a9a)
}

.h24-tier-chip.is-gold::before {
    background: linear-gradient(135deg,#ffe08a,#c99619)
}

.h24-tier-chip.is-headline::before {
    background: var(--coral)
}

.h24-tier-price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.8rem;
    letter-spacing: -.05em;
    line-height: 1;
    margin: 1.1rem 0 .3rem
}

.h24-tier ul {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 1.4rem;
    display: grid;
    gap: .55rem;
    font-size: .95rem
}

.h24-tier li {
    display: flex;
    gap: .5rem;
    align-items: flex-start
}

.h24-tier li .bi {
    color: var(--brand-2-text);
    font-weight: 700
}

[data-bs-theme="dark"] .h24-tier li .bi {
    color: var(--brand)
}

.h24-tier-bar {
    display: block;
    margin-top: auto;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden
}

.h24-tier-bar span {
    display: block;
    width: var(--p);
    height: 100%;
    background: var(--brand-2);
    border-radius: inherit
}

.h24-tier.is-featured {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    --surface-2: rgba(255,255,255,.14);
    --line: rgba(255,255,255,.18);
    transform: translateY(-.8rem)
}

[data-bs-theme="dark"] .h24-tier.is-featured {
    background: #050506;
    border-color: rgba(255,255,255,.14)
}

.h24-tier.is-featured small {
    color: rgba(255,255,255,.7)
}

.h24-tier.is-featured li .bi {
    color: var(--brand)
}

.h24-tier.is-featured .h24-tier-bar span {
    background: var(--brand)
}

.h24-sponsor-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.4rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--ink)
}

.h24-sponsor-band>div {
    display: flex;
    flex-direction: column
}

.h24-sponsor-band b {
    font-family: var(--font-display);
    font-size: 2.4rem;
    letter-spacing: -.04em;
    line-height: 1
}

.h24-sponsor-band div>span {
    font-size: .9rem;
    margin-top: .3rem
}

.h24-crew {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.h24-crew-item {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1.1rem;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.h24-crew-item .bi {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    color: #fff;
    font-size: 1.1rem
}

.h24-crew-item strong {
    display: block;
    font-size: 1rem
}

.h24-crew-item span {
    display: block;
    font-size: .87rem;
    color: var(--muted);
    line-height: 1.4
}

.h24-cover {
    position: relative;
    padding: 0 0 3rem;
    container-type: inline-size
}

.h24-cover-main {
    width: 74%;
    aspect-ratio: 4 / 4.2;
    border-radius: 30px
}

.h24-story {
    position: absolute;
    right: 0;
    top: 8%;
    width: 36%;
    aspect-ratio: 9 / 17;
    border-radius: 1.6rem;
    overflow: hidden;
    border: 6px solid #121212;
    background: #121212;
    color: #fff;
    box-shadow: var(--shadow);
    font-size: clamp(9px,2.1cqw,14px)
}

.h24-story-img {
    position: absolute;
    inset: 0
}

.h24-story-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.45),transparent 30%,transparent 60%,rgba(0,0,0,.7))
}

.h24-story-bars {
    position: absolute;
    left: .8em;
    right: .8em;
    top: .8em;
    display: flex;
    gap: .3em
}

.h24-story-bars i {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,.4)
}

.h24-story-bars i:first-child {
    background: #fff
}

.h24-story-bars i:nth-child(2) {
    background: linear-gradient(90deg,#fff 60%,rgba(255,255,255,.4) 60%)
}

.h24-story-user {
    position: absolute;
    left: .8em;
    top: 1.8em;
    display: flex;
    align-items: center;
    gap: .45em;
    font-size: .95em
}

.h24-story-user small {
    opacity: .7
}

.h24-story-av {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: var(--ink);
    border: 2px solid #fff;
    font-size: .85em
}

.h24-story-rec {
    position: absolute;
    right: .8em;
    top: 1.9em;
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .2em .6em;
    border-radius: 6px;
    background: #ff3b3b;
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase
}

.h24-story-rec i {
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: #fff;
    animation: h24-blink 1.2s ease-in-out infinite
}

@keyframes h24-blink {
    50% {
        opacity: .2
    }
}

.h24-story-txt {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translateX(-50%) rotate(-4deg);
    white-space: nowrap;
    padding: .35em .7em;
    border-radius: .4em;
    background: #fff;
    color: #121212;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05em
}

.h24-story-views {
    position: absolute;
    left: .9em;
    bottom: .9em;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-size: .9em;
    font-weight: 600
}

.h24-cover-chip {
    position: absolute;
    z-index: 2;
    left: 6%;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    box-shadow: var(--shadow)
}

.h24-cover-chip .bi {
    color: var(--brand)
}

[data-bs-theme="dark"] .h24-cover-chip {
    background: #fff;
    color: var(--ink)
}

[data-bs-theme="dark"] .h24-cover-chip .bi {
    color: var(--brand-2)
}

.h24-after {
    padding: clamp(1.8rem,4.5vw,3.6rem);
    border-radius: 36px;
    background: var(--surface);
    border: 1px solid var(--line)
}

.h24-after-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.2rem
}

.h24-after-steps li {
    display: grid;
    grid-template-columns: 5.2rem 1fr;
    gap: 1rem;
    align-items: start
}

.h24-after-steps li>span {
    padding: .35rem .6rem;
    border-radius: 999px;
    text-align: center;
    background: var(--surface-2);
    font-size: .8rem;
    font-weight: 600
}

.h24-after-steps strong {
    display: block;
    margin-bottom: .2rem
}

.h24-after-steps p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem
}

.h24-presale {
    padding: clamp(1.5rem,3vw,2.2rem);
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow)
}

[data-bs-theme="dark"] .h24-presale {
    background: #050506;
    border: 1px solid rgba(255,255,255,.1)
}

.h24-presale-head {
    display: flex;
    align-items: center;
    gap: .9rem
}

.h24-presale-head small {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6)
}

.h24-presale-head strong {
    display: block;
    font-size: 1.05rem
}

.h24-presale-ic {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--brand-2);
    font-size: 1.3rem
}

.h24-presale-num {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 1.4rem 0;
    padding-bottom: 1.4rem;
    border-bottom: 1px dashed rgba(255,255,255,.18)
}

.h24-presale-num b {
    font-family: var(--font-display);
    font-size: clamp(3.4rem,7vw,5.2rem);
    letter-spacing: -.05em;
    line-height: .9;
    color: var(--brand)
}

.h24-presale-num span {
    color: rgba(255,255,255,.7);
    font-weight: 600
}

.h24-presale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.4rem
}

.h24-presale-grid small {
    display: block;
    font-size: .82rem;
    color: rgba(255,255,255,.6)
}

.h24-presale-grid b {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: -.03em
}

.h24-cta {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    color: #fff;
    text-align: center;
    isolation: isolate;
    background: #121212
}

.h24-cta-img {
    position: absolute;
    inset: 0;
    z-index: -1
}

.h24-cta-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,rgba(8,8,12,.55),rgba(8,8,12,.85))
}

.h24-cta-body {
    max-width: 720px;
    margin-inline:auto;padding: clamp(3rem,8vw,6rem) 1.4rem
}

.h24-cta h2 {
    font-size: clamp(2.4rem,5.5vw,4.6rem)
}

.h24-cta-date {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 1.6rem;
    background: var(--brand);
    color: var(--ink);
    line-height: 1.05;
    transform: rotate(-10deg)
}

.h24-cta-date small {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.h24-cta-date b {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.6rem
}

.h24-cta p {
    color: rgba(255,255,255,.8)
}

.h24-btn-ghost {
    border: 1.5px solid rgba(255,255,255,.7);
    color: #fff;
    background: transparent
}

.h24-btn-ghost:hover,.h24-btn-ghost:focus-visible {
    background: #fff;
    color: #121212;
    border-color: #fff
}

@media (max-width: 1199.98px) {
    .h24-ticket {
        width:54%
    }

    .h24-sales {
        width: 36%
    }

    .h24-hero .lead {
        max-width: 40rem
    }

    .h24-crew {
        grid-template-columns: 1fr
    }
}

@media (max-width: 991.98px) {
    .h24-hero h1 em {
        display:inline
    }

    .h24-stage>* {
        font-size: clamp(9px,1.7cqw,14px)
    }

    .h24-crowd {
        aspect-ratio: 16 / 8
    }

    .h24-ticket {
        width: 64%
    }

    .h24-sales {
        width: 42%;
        top: 6%
    }

    .h24-sponsor {
        display: none
    }

    .h24-sales-tl {
        grid-template-columns: repeat(5,minmax(0,1fr));
        gap: .8rem
    }

    .h24-col {
        height: 180px
    }

    .h24-col b {
        font-size: 1rem
    }

    .h24-case.is-big {
        min-height: 460px
    }

    .h24-tier.is-featured {
        transform: none
    }
}

@media (max-width: 767.98px) {
    .h24-sales-tl {
        grid-template-columns:1fr;
        gap: 0
    }

    .h24-sales-tl li {
        display: grid;
        grid-template-columns: 4.2rem 1fr;
        column-gap: 1.1rem;
        padding-bottom: 1.4rem
    }

    .h24-col {
        grid-row: 1 / span 3;
        height: 100%;
        min-height: 120px;
        margin: 0;
        border-bottom: 0;
        border-left: 2px solid var(--line);
        align-items: stretch;
        background: none
    }

    .h24-col>span {
        width: var(--h);
        min-width: 3.4rem;
        height: auto;
        align-items: center;
        border-radius: 0 12px 12px 0;
        padding: 0
    }

    .reveal:not(.in) .h24-col>span {
        transform: none
    }

    .h24-col b {
        font-size: .9rem;
        writing-mode: vertical-rl;
        transform: rotate(180deg)
    }

    .h24-wk,.h24-sales-tl h3,.h24-sales-tl p {
        grid-column: 2
    }

    .h24-case {
        flex-direction: column
    }

    .h24-case-img {
        flex-basis: auto;
        aspect-ratio: 16 / 9
    }

    .h24-cover-main {
        width: 80%
    }
}

@media (max-width: 575.98px) {
    .h24-stage {
        padding-bottom:0
    }

    .h24-stage>* {
        font-size: 3cqw
    }

    .h24-crowd {
        aspect-ratio: 4 / 4.4;
        border-radius: 26px
    }

    .h24-crowd::after {
        background: linear-gradient(180deg,rgba(10,10,14,.5),transparent 40%)
    }

    .h24-ticket {
        position: relative;
        left: auto;
        width: 96%;
        margin: -32% auto 0;
        transform: rotate(-2deg)
    }

    .h24-sales {
        width: 62%;
        right: 4%;
        top: 18%
    }

    .h24-live {
        left: 1.2em;
        top: 1.2em
    }

    .h24-ticket-name {
        font-size: 1.8em
    }

    .h24-ticket-stub {
        flex-basis: 8.4em
    }

    .h24-sponsor-band {
        grid-template-columns: 1fr
    }

    .h24-presale-grid {
        gap: .8rem 1rem
    }

    .h24-after-steps li {
        grid-template-columns: 1fr;
        gap: .4rem
    }

    .h24-after-steps li>span {
        justify-self: start
    }

    .h24-stamp {
        font-size: 1rem;
        right: 1rem;
        top: 1rem
    }

    .h24-case.is-big {
        min-height: 440px
    }
}



/* WHY SOOO DIGITAL HEADER LOGO FIX */

.site-header .container > a.brand {
    display: flex !important;
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 60px !important;
    align-items: center !important;
}

.site-header .container > a.brand img#headerLogo {
    display: block !important;
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 0 !important;
    max-width: 120px !important;
    height: 60px !important;
    object-fit: contain !important;
}

img.logo {
    width: 100px;
}