/* Mapians — site styles. Mobile-first responsive; single light theme in brand green/black. */

/* Layout: clean white retail layout in the logo's green + black. Mint-tint bands for rhythm, soft-shadow cards, ticket-stub plan cards, phone mockup hero. Single light theme by design. */
:root {
    color-scheme: light;
    --bg: #ffffff;
    --soft: #f5f9f6;
    --mint: #eaf5ee;
    --mint2: #d6ecdd;
    --ink: #0a0f0c;
    --ink2: #1e2621;
    --muted: #5a6760;
    --line: #e3eae5;
    --green: #126834;
    --green-d: #0c4f26;
    --green-l: #1e8a48;
    --lime: #b7e4c7;
    --amber: #f5b300;
    --amber-ink: #3b2b00;
    --red: #d2453b;
    --red-soft: #fcecea;
    --tp: #00b67a;
    --shadow:
        0 1px 2px rgba(10, 40, 20, 0.05), 0 10px 30px rgba(10, 40, 20, 0.07);
    --shadow-l:
        0 2px 6px rgba(10, 40, 20, 0.06), 0 24px 60px rgba(10, 40, 20, 0.12);
    --f-display: "Outfit", "Segoe UI", system-ui, sans-serif;
    --f-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    --r: 18px;
    /* legacy aliases used by templates */
    --teal: var(--green);
    --teal-soft: var(--mint);
    --chip: #eef3f0;
    --surface: #ffffff;
    --onnavy: var(--ink);
    --onnavy-mute: var(--muted);
    --sun: var(--green);
    --sun-ink: #fff;
    --navy: var(--soft);
    --navy2: #fff;
}
* {
    box-sizing: border-box;
}
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: env(safe-area-inset-top, 0px);
    z-index: 60;
    background: #fff;
}
a {
    color: inherit;
}
h1,
h2,
h3,
h4 {
    font-family: var(--f-display);
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
    letter-spacing: -0.02em;
    color: var(--ink);
}
h1 {
    font-size: clamp(2.2rem, 5.2vw, 3.9rem);
    font-weight: 800;
}
h2 {
    font-size: clamp(1.7rem, 3.3vw, 2.6rem);
    font-weight: 800;
}
h3 {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
p {
    margin: 0;
}
.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.band {
    padding-block: 84px;
}
.band.tight {
    padding-block: 40px;
}
.band.alt {
    background: var(--soft);
}
.band.navy {
    background: var(--mint);
}
.muted {
    color: var(--muted);
}
.eyebrow {
    font: 700 0.78rem var(--f-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
}
.eyebrow::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--green);
}
.lede {
    font-size: 1.14rem;
    max-width: 62ch;
}
.sec-head {
    display: grid;
    gap: 14px;
    margin-bottom: 40px;
    max-width: 780px;
}
.sec-head.center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}
.mono {
    font-family: var(--f-mono);
}
.num {
    font-variant-numeric: tabular-nums;
}
.hl {
    color: var(--green);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 700 1rem var(--f-body);
    padding: 14px 24px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.15s,
        box-shadow 0.15s,
        background 0.15s;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 2px;
}
.btn.sun {
    background: var(--green);
    color: #fff;
    box-shadow: 0 6px 18px rgba(18, 104, 52, 0.28);
}
.btn.sun:hover {
    background: var(--green-d);
}
.btn.ink {
    background: var(--ink);
    color: #fff;
}
.btn.ghost {
    border-color: var(--line);
    background: #fff;
    color: var(--ink);
}
.btn.ghost:hover {
    border-color: var(--green);
    color: var(--green);
}
.btn.sm {
    padding: 10px 16px;
    font-size: 0.92rem;
    border-radius: 10px;
}
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.grid {
    display: grid;
    gap: 22px;
}
.g2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.g3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.g4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 26px;
    min-width: 0;
    box-shadow: var(--shadow);
}
.card h3 {
    margin-bottom: 8px;
}
a.card {
    transition:
        transform 0.18s,
        box-shadow 0.18s,
        border-color 0.18s;
}
a.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-l);
    border-color: var(--mint2);
}
.ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--mint);
    color: var(--green);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}
.ico svg {
    width: 24px;
    height: 24px;
}
.tick {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display: grid;
    gap: 9px;
}
.tick li {
    padding-left: 30px;
    position: relative;
}
.tick li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mint)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23126834' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center/100% no-repeat;
}
.cross li::before {
    background: var(--red-soft)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7' fill='none' stroke='%23D2453B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
        center/100% no-repeat;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--chip);
    color: var(--ink2);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    text-decoration: none;
}
.chip.sun {
    background: var(--green);
    color: #fff;
}
.chip.teal {
    background: var(--mint);
    color: var(--green);
}
.chip.amber {
    background: #fff4cc;
    color: #7a5a00;
}

/* header */
.topbar {
    background: var(--green);
    color: #fff;
    font-size: 0.88rem;
    text-align: center;
    padding: 8px 16px;
    font-weight: 500;
}
.topbar code {
    font-family: var(--f-mono);
    background: rgba(255, 255, 255, 0.18);
    padding: 1px 8px;
    border-radius: 5px;
    font-weight: 700;
}
header.site {
    position: sticky;
    top: 0;
    top: env(safe-area-inset-top, 0px);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.6) blur(12px);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--line);
    width: 100%;
}
.hdr {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 74px;
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.logo img {
    height: 30px;
    width: auto;
    display: block;
}
nav.main {
    display: flex;
    gap: 2px;
    margin-left: 10px;
}
nav.main > div {
    position: relative;
}
nav.main a.top,
nav.main button.top {
    background: none;
    border: 0;
    color: var(--ink2);
    font: 600 0.95rem var(--f-body);
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    display: block;
}
nav.main a.top:hover,
nav.main button.top:hover,
nav.main div:focus-within > button.top {
    background: var(--soft);
    color: var(--green);
}
.drop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 560px;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-l);
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
nav.main div:hover > .drop,
nav.main div:focus-within > .drop {
    display: grid;
}
.drop.one {
    min-width: 250px;
    grid-template-columns: 1fr;
}
.drop h5 {
    font: 700 0.72rem var(--f-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
    padding-left: 10px;
}
.drop a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
.drop a span {
    font-weight: 500;
    color: var(--muted);
    font-size: 0.8rem;
}
.drop a:hover {
    background: var(--mint);
    color: var(--green);
}
.hdr-right {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}
select.cur {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 12px;
    font: 600 0.88rem var(--f-body);
}
.burger {
    display: none;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 10px;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    cursor: pointer;
}
.mnav {
    display: none;
    background: #fff;
    padding: 8px 0 20px;
    border-top: 1px solid var(--line);
    max-height: 75vh;
    overflow: auto;
}
.mnav a {
    display: block;
    padding: 11px 0;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
.mnav h5 {
    font: 700 0.72rem var(--f-body);
    letter-spacing: 0.12em;
    color: var(--green);
    margin: 18px 0 4px;
    text-transform: uppercase;
}
@media (max-width: 1060px) {
    nav.main,
    .hdr-right .btn.login {
        display: none;
    }
    .burger {
        display: block;
    }
    .mnav.open {
        display: block;
    }
}

/* hero */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            1200px 500px at 85% -10%,
            var(--mint) 0%,
            rgba(234, 245, 238, 0) 60%
        ),
        linear-gradient(#fff, #fff);
}
.hero canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hero .wrap > * {
    min-width: 0;
}
.hero h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}
.hero .wrap {
    position: relative;
    padding-block: 60px 76px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: center;
}
@media (max-width: 940px) {
    .hero .wrap {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 40px 56px;
    }
}
.hero h1 .hl {
    background: linear-gradient(transparent 68%, var(--lime) 68%);
    color: var(--green);
    padding: 0 0.06em;
}
.tp-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px 6px 8px;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: var(--shadow);
}
.tp-stars {
    display: inline-flex;
    gap: 2px;
}
.tp-stars i {
    width: 18px;
    height: 18px;
    background: var(--tp);
    display: grid;
    place-items: center;
    color: #fff;
    font-style: normal;
    font-size: 12px;
}
.search {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 7px;
    display: flex;
    gap: 8px;
    margin-top: 26px;
    max-width: 600px;
    position: relative;
    box-shadow: var(--shadow-l);
}
.search:focus-within {
    border-color: var(--green);
}
.search .sicon {
    display: grid;
    place-items: center;
    padding-left: 10px;
    color: var(--muted);
}
.search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: 500 1.05rem var(--f-body);
    padding: 12px 6px;
    color: var(--ink);
}
.search input:focus {
    outline: none;
}
.sugg {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-l);
    overflow-y: auto;
    max-height: 400px;
    z-index: 50;
    text-align: left;
}
.sugg-head {
    padding: 8px 16px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    background: #fafafa;
    border-bottom: 1px solid var(--line);
}
.sugg-head:not(:first-child) {
    border-top: 1px solid var(--line);
}
.sugg a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.12s ease;
}
.sugg a:hover,
.sugg a.active {
    background: var(--mint);
}
.sugg-empty {
    padding: 16px;
    color: var(--muted);
    font-size: 0.9rem;
    display: block;
    text-align: center;
}
.trustrow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 14px;
    margin-top: 28px;
    max-width: 600px;
}
.trustrow div {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.3;
}
.trustrow b {
    color: var(--ink);
    display: block;
}
.trustrow .ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    margin: 0;
    flex: none;
}
.trustrow .ico svg {
    width: 19px;
    height: 19px;
}
.popular {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    align-items: center;
}
.popular a.chip {
    background: #fff;
    border: 1px solid var(--line);
}
.popular a.chip:hover {
    border-color: var(--green);
    color: var(--green);
}

/* phone mockup */
.stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 540px;
}
.phone {
    width: 290px;
    max-width: 100%;
    background: #0a0f0c;
    border-radius: 44px;
    padding: 12px;
    box-shadow:
        0 40px 80px rgba(10, 40, 20, 0.25),
        0 0 0 1px #2a302c inset;
    position: relative;
    z-index: 2;
}
.screen {
    background: #fff;
    border-radius: 34px;
    overflow: hidden;
    min-height: 520px;
    display: grid;
    align-content: start;
}
.notch {
    width: 96px;
    height: 26px;
    background: #0a0f0c;
    border-radius: 0 0 16px 16px;
    margin: 0 auto;
}
.scr-h {
    padding: 14px 18px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.scr-h img {
    height: 18px;
}
.scr-card {
    margin: 10px 14px;
    border-radius: 20px;
    background: linear-gradient(140deg, var(--green) 0%, var(--green-d) 100%);
    color: #fff;
    padding: 18px;
    display: grid;
    gap: 10px;
}
.scr-card small {
    opacity: 0.8;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.ring {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    margin: 4px auto;
    background: conic-gradient(#fff 0 62%, rgba(255, 255, 255, 0.22) 0);
    display: grid;
    place-items: center;
}
.ring div {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: var(--green-d);
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.1;
}
.ring b {
    font: 800 1.5rem var(--f-display);
}
.scr-list {
    padding: 6px 14px 14px;
    display: grid;
    gap: 8px;
}
.scr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 0.85rem;
}
.scr-item b {
    display: block;
    font-size: 0.9rem;
}
.scr-item .p {
    margin-left: auto;
    font: 700 0.85rem var(--f-mono);
    color: var(--green);
}
.float {
    position: absolute;
    z-index: 3;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: var(--shadow-l);
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.85rem;
    line-height: 1.25;
    animation: bob 5s ease-in-out infinite;
}
.float b {
    display: block;
    font-size: 0.95rem;
}
.float.f1 {
    top: 250px;
    left: -10px;
}
.float.f2 {
    bottom: 90px;
    right: 0;
    animation-delay: 1.2s;
}
.float.f3 {
    bottom: 20px;
    left: 10px;
    animation-delay: 2.4s;
}
@keyframes bob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}
@media (max-width: 520px) {
    .float.f1 {
        left: -4px;
        top: 10px;
    }
    .float.f2 {
        right: -4px;
    }
    .float {
        font-size: 0.78rem;
        padding: 9px 11px;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* logos strip */
.logos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 34px;
    align-items: center;
    justify-content: center;
}
.logos .lg {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 1.05rem var(--f-display);
    color: var(--ink2);
    opacity: 0.85;
}
.strip-label {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
}

/* stats */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}
.stats div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow);
}
.stats b {
    display: block;
    font: 800 2rem var(--f-display);
    color: var(--green);
    letter-spacing: -0.02em;
}
.stats span {
    font-size: 0.9rem;
    color: var(--muted);
}

/* destinations */
.dest {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 12px;
}
.dest a {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px 15px;
    text-decoration: none;
    transition:
        border-color 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
}
.dest a:hover {
    border-color: var(--green);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.flag {
    font-size: 1.7rem;
    line-height: 1;
}
.dest b {
    display: block;
    font-weight: 700;
    line-height: 1.2;
}
.dest small {
    color: var(--muted);
    font-size: 0.82rem;
}
.dest .p {
    margin-left: auto;
    text-align: right;
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
    line-height: 1.2;
}
.dest .p strong {
    display: block;
    font: 700 1rem var(--f-body);
    color: var(--green);
}
.tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    background: var(--soft);
    padding: 5px;
    border-radius: 14px;
    width: max-content;
    max-width: 100%;
}
.tabs button {
    border: 0;
    background: transparent;
    color: var(--ink2);
    padding: 9px 16px;
    border-radius: 10px;
    font: 600 0.92rem var(--f-body);
    cursor: pointer;
}
.tabs button[aria-selected="true"] {
    background: #fff;
    color: var(--green);
    box-shadow: var(--shadow);
}
.band.alt .tabs,
.band.navy .tabs {
    background: #fff;
    border: 1px solid var(--line);
}
.band.alt .tabs button[aria-selected="true"],
.band.navy .tabs button[aria-selected="true"] {
    background: var(--green);
    color: #fff;
}

/* plan ticket */
.plans {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: 18px;
}
.ticket {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    box-shadow: var(--shadow);
    transition:
        transform 0.18s,
        box-shadow 0.18s,
        border-color 0.18s;
}
.ticket:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-l);
    border-color: var(--mint2);
}
.ticket .t-top {
    padding: 20px 20px 16px;
    display: grid;
    gap: 8px;
}
.ticket .net {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
}
.ticket .data {
    font: 800 2.1rem var(--f-display);
    letter-spacing: -0.02em;
}
.ticket .data small {
    font-size: 1rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0;
}
.ticket .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ticket .tperf {
    border-top: 2px dashed var(--line);
    margin: 0 16px;
    position: relative;
}
.ticket .tperf::before,
.ticket .tperf::after {
    content: "";
    position: absolute;
    top: -11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pg, #fff);
    border: 1px solid var(--line);
}
.band.alt .ticket,
.band.navy .ticket {
    --pg: var(--soft);
}
.band.navy .ticket {
    --pg: var(--mint);
}
.ticket .tperf::before {
    left: -27px;
    clip-path: inset(0 0 0 50%);
}
.ticket .tperf::after {
    right: -27px;
    clip-path: inset(0 50% 0 0);
}
.ticket .t-bot {
    padding: 16px 20px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}
.price {
    font: 800 1.55rem var(--f-display);
    letter-spacing: -0.01em;
}
.price small {
    display: block;
    font: 500 0.78rem var(--f-body);
    color: var(--muted);
    letter-spacing: 0;
}
.ribbon {
    position: absolute;
    top: -11px;
    right: 16px;
    box-shadow: var(--shadow);
}

/* tables */
.tbl-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    box-shadow: var(--shadow);
}
table {
    border-collapse: collapse;
    width: 100%;
    min-width: 660px;
    font-size: 0.95rem;
}
th,
td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
thead th {
    font: 700 0.82rem var(--f-body);
    color: var(--ink2);
    background: var(--soft);
}
th.us {
    background: var(--green);
    color: #fff;
}
td.us {
    background: #f3faf5;
    font-weight: 500;
}
tbody tr:last-child td {
    border-bottom: 0;
}
.yes {
    color: var(--green);
    font-weight: 700;
}
.no {
    color: var(--red);
    font-weight: 700;
}
.mid {
    color: var(--muted);
    font-weight: 500;
}
.foot {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 12px;
}

/* problem/solution */
.pvs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px;
}
.pvs .card.bad {
    border-top: 4px solid var(--red);
}
.pvs .card.good {
    border: 2px solid var(--green);
    box-shadow: var(--shadow-l);
}
.bigq {
    font: 800 clamp(1.6rem, 2.8vw, 2.2rem) var(--f-display);
    letter-spacing: -0.02em;
    color: var(--green);
}

/* calculator */
.calc > * {
    min-width: 0;
}
.calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
}
@media (max-width: 860px) {
    .calc {
        grid-template-columns: minmax(0, 1fr);
    }
}
.calc > div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 30px;
    box-shadow: var(--shadow);
}
.field {
    display: grid;
    gap: 6px;
}
.field label {
    font-weight: 600;
    font-size: 0.9rem;
}
.field input,
.field select,
.field textarea {
    font: 500 1rem var(--f-body);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--green);
    outline: none;
}
.bars {
    display: grid;
    gap: 16px;
    align-content: center;
}
.bar {
    display: grid;
    gap: 6px;
    font-weight: 600;
    font-size: 0.92rem;
}
.bar .track {
    height: 40px;
    border-radius: 10px;
    background: var(--soft);
    overflow: hidden;
}
.bar .fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font: 700 0.95rem var(--f-body);
    color: #fff;
    border-radius: 10px;
    transition: width 0.5s;
}
.fill.r {
    background: var(--red);
}
.fill.a {
    background: #c9821b;
}
.fill.m {
    background: var(--green);
}
.save {
    font: 800 2.8rem var(--f-display);
    color: var(--green);
    letter-spacing: -0.02em;
}

/* steps */
.steps {
    counter-reset: s;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 20px;
}
.step {
    position: relative;
    padding-top: 78px;
}
.step::before {
    counter-increment: s;
    content: counter(s);
    position: absolute;
    top: 24px;
    left: 26px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--green);
    color: #fff;
    font: 800 1.15rem var(--f-display);
    display: grid;
    place-items: center;
}

/* faq */
details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 10px;
}
details[open] {
    box-shadow: var(--shadow);
    border-color: var(--mint2);
}
details summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.02rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
details summary::-webkit-details-marker {
    display: none;
}
details summary::after {
    content: "+";
    font: 700 1.4rem var(--f-body);
    color: var(--green);
    line-height: 1;
}
details[open] summary::after {
    content: "–";
}
details p {
    margin-top: 10px;
    color: var(--muted);
    max-width: 75ch;
}

/* reviews */
.rev {
    display: grid;
    gap: 14px;
    align-content: start;
}
.stars {
    display: inline-flex;
    gap: 2px;
}
.stars i {
    width: 20px;
    height: 20px;
    background: var(--tp);
    color: #fff;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 13px;
}
.who {
    display: flex;
    gap: 12px;
    align-items: center;
}
.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 700 0.95rem var(--f-display);
    background: var(--mint);
    color: var(--green);
}
.verified {
    font-size: 0.78rem;
    color: var(--green);
    font-weight: 600;
}

/* inner hero */
.phero {
    background:
        radial-gradient(
            900px 380px at 90% 0%,
            var(--mint) 0%,
            rgba(234, 245, 238, 0) 65%
        ),
        #fff;
    border-bottom: 1px solid var(--line);
}
.phero .wrap {
    padding-block: 48px 56px;
    display: grid;
    gap: 16px;
}
.phero .grid2 > * {
    min-width: 0;
}
.phero .grid2 {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 40px;
    align-items: center;
}
@media (max-width: 880px) {
    .phero .grid2 {
        grid-template-columns: minmax(0, 1fr);
    }
}
.crumbs {
    font-size: 0.86rem;
    color: var(--muted);
}
.crumbs a {
    color: var(--muted);
    text-decoration: none;
}
.crumbs a:hover {
    color: var(--green);
}

/* boarding pass card */
.pass {
    background: #fff;
    color: var(--ink);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-l);
    border: 1px solid var(--line);
    position: relative;
}
.pass-top {
    padding: 22px 24px;
    display: grid;
    gap: 14px;
}
.pass-route {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pass-route .code {
    font: 800 2.2rem var(--f-display);
    letter-spacing: -0.02em;
}
.pass-route .lbl {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.plane {
    flex: 1;
    margin: 0 14px;
    border-top: 2px dashed var(--line);
    position: relative;
}
.plane::after {
    content: "✈";
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 6px;
    color: var(--green);
    font-size: 1.1rem;
}
.perf {
    position: relative;
    border-top: 2px dashed var(--line);
    margin: 0 18px;
}
.perf::before,
.perf::after {
    content: "";
    position: absolute;
    top: -12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
}
.perf::before {
    left: -30px;
}
.perf::after {
    right: -30px;
}
.pass-bot {
    padding: 18px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: var(--soft);
}
.pass-bot div small {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}
.pass-bot div b {
    font: 800 1.1rem var(--f-display);
}

/* guarantee */
.guar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    align-items: center;
    background: #fff;
    border: 2px solid var(--green);
    border-radius: 24px;
    padding: 32px;
    box-shadow: var(--shadow-l);
}
@media (max-width: 700px) {
    .guar {
        grid-template-columns: 1fr;
    }
}
.seal {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    font: 800 0.78rem/1.1 var(--f-display);
    letter-spacing: 0.04em;
    box-shadow: 0 0 0 8px var(--mint);
}
.seal b {
    display: block;
    font-size: 2.2rem;
}
.pay {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pay span {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font: 800 0.78rem var(--f-display);
    color: var(--ink2);
    letter-spacing: 0.02em;
}

/* cta box */
.ctabox {
    background: linear-gradient(120deg, var(--green) 0%, var(--green-d) 100%);
    color: #fff;
    border-radius: 28px;
    padding: clamp(28px, 5vw, 56px);
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 28px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.ctabox::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 40px solid rgba(255, 255, 255, 0.07);
}
.ctabox h2 {
    color: #fff;
}
.ctabox .muted {
    color: rgba(255, 255, 255, 0.82);
}
.ctabox .eyebrow {
    color: var(--lime);
}
.ctabox .eyebrow::before {
    background: var(--lime);
}
.ctabox .btn.sun {
    background: #fff;
    color: var(--green);
    box-shadow: none;
}
.ctabox .btn.ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 760px) {
    .ctabox {
        grid-template-columns: 1fr;
    }
}

/* footer */
footer {
    background: var(--soft);
    color: var(--muted);
    padding-block: 64px 30px;
    font-size: 0.93rem;
    border-top: 1px solid var(--line);
}
footer .cols {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 28px;
}
@media (max-width: 1000px) {
    footer .cols {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    }
}
footer h5 {
    color: var(--ink);
    font: 700 0.9rem var(--f-display);
    margin: 0 0 14px;
}
footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}
footer a {
    text-decoration: none;
}
footer a:hover {
    color: var(--green);
}
.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.badges span {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    color: var(--ink2);
    font-weight: 600;
}
.legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    font-size: 0.84rem;
}

.netlogo {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font: 800 0.9rem var(--f-display);
    color: #fff;
    flex: none;
}
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(10, 40, 20, 0.08);
    padding: 10px max(16px, env(safe-area-inset-right, 0px))
        calc(10px + env(safe-area-inset-bottom, 0px))
        max(16px, env(safe-area-inset-left, 0px));
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
@media (max-width: 700px) {
    .sticky-cta.show {
        display: flex;
    }
}
.note {
    background: var(--mint);
    border-radius: 14px;
    padding: 15px 18px;
    font-size: 0.93rem;
    color: var(--ink2);
}
.split > * {
    min-width: 0;
}
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}
@media (max-width: 880px) {
    .split {
        grid-template-columns: minmax(0, 1fr);
    }
}
.prose {
    max-width: 78ch;
    display: grid;
    gap: 14px;
}
.prose h2 {
    font-size: 1.35rem;
    margin-top: 22px;
    color: var(--ink);
}
.prose h3 {
    font-size: 1.1rem;
    margin-top: 14px;
    font-weight: 700;
    color: var(--ink);
}
.prose p {
    line-height: 1.7;
    color: var(--ink2);
}
.prose ul,
.prose ol {
    padding-left: 22px;
    display: grid;
    gap: 8px;
}
.prose li {
    line-height: 1.65;
    color: var(--ink2);
}
.prose strong {
    color: var(--ink);
}
.prose a {
    color: var(--green);
    text-decoration: underline;
}
.prose a:hover {
    color: var(--ink);
}
.prose code {
    background: var(--soft);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.9em;
}
.legal-card {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 24px;
    display: grid;
    gap: 6px;
    font-size: 0.94rem;
}
.legal-card p {
    margin: 0;
    line-height: 1.5;
}
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    z-index: 80;
    box-shadow: var(--shadow-l);
}
.vs-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.vs-badge {
    font: 800 1rem var(--f-display);
    background: var(--green);
    color: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
}
.verdict {
    border-left: 4px solid var(--green);
    padding: 8px 0 8px 20px;
    background: linear-gradient(90deg, var(--mint), transparent);
    border-radius: 0 12px 12px 0;
}
.devs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 10px;
}
.devs div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 14px;
    font-weight: 600;
    font-size: 0.93rem;
}
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: #fff;
    border-radius: 12px;
    padding: 9px 16px;
    text-decoration: none;
    line-height: 1.1;
}
.app-badge small {
    display: block;
    font-size: 0.68rem;
    opacity: 0.8;
}
.app-badge b {
    font-size: 1.02rem;
}

/* video cards */
.vcard {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition:
        transform 0.18s,
        box-shadow 0.18s;
}
.vcard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-l);
}
.vthumb {
    aspect-ratio: 16/10;
    max-width: 100%;
    position: relative;
    background: linear-gradient(
        135deg,
        hsl(var(--h) 45% 32%),
        hsl(calc(var(--h) + 20) 55% 18%)
    );
    display: grid;
    place-items: center;
}
.vplay {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    color: var(--green);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    padding-left: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.vcard:hover .vplay {
    transform: scale(1.08);
}
.vdur {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 6px;
}
.vflag {
    position: absolute;
    left: 12px;
    top: 10px;
    font-size: 1.6rem;
}
.stars.sm i {
    width: 15px;
    height: 15px;
    font-size: 10px;
}
/* plan builder */
.pb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 980px) {
    .pb {
        grid-template-columns: minmax(0, 1fr);
    }
}
.pb-main {
    min-width: 0;
}
.pb-side {
    position: sticky;
    top: calc(96px + env(safe-area-inset-top, 0px));
}
@media (max-width: 980px) {
    .pb-side {
        position: static;
    }
}
.pb-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px;
    font-size: 1.02rem;
}
.pb-step:first-child {
    margin-top: 0;
}
.pb-n {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    font: 800 0.82rem var(--f-display);
}
.seg {
    display: inline-flex;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    flex-wrap: wrap;
}
.seg button {
    border: 0;
    background: transparent;
    padding: 10px 18px;
    border-radius: 9px;
    font: 600 0.95rem var(--f-body);
    color: var(--ink2);
    cursor: pointer;
}
.seg button[aria-selected="true"] {
    background: #fff;
    color: var(--green);
    box-shadow: var(--shadow);
}
.typecards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.typecard {
    position: relative;
    text-align: left;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 6px;
    align-content: start;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.typecard:hover:not([disabled]) {
    border-color: var(--green);
}
.typecard[aria-pressed="true"] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--mint);
    background: #fbfefc;
}
.typecard[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: #fafafa;
}
.typecard small {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.4;
}
.typecard .chip {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.7rem;
}
.tc-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mint);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: var(--green);
    font-weight: 800;
}
.pb-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 16px 24px;
    margin-top: 24px;
}
.pb-filters .pb-step {
    margin: 0 0 12px;
}
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fchip {
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    font: 600 0.9rem var(--f-body);
    color: var(--ink2);
    cursor: pointer;
}
.fchip:hover {
    border-color: var(--green);
}
.fchip[aria-pressed="true"] {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.plist {
    display: grid;
    gap: 10px;
}
.prow {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.prow:hover {
    border-color: var(--mint2);
}
.prow[aria-pressed="true"] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--mint);
}
.radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--line);
    flex: none;
}
.prow[aria-pressed="true"] .radio {
    border: 6px solid var(--green);
}
.mlogo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mint);
    padding: 5px;
    flex: none;
    object-fit: contain;
}
.prow-main {
    flex: 1;
    min-width: 0;
    display: grid;
}
.prow-main small {
    color: var(--muted);
    font-size: 0.84rem;
}
.prow-price {
    text-align: right;
    display: grid;
    line-height: 1.2;
}
.prow-price b {
    font: 800 1.2rem var(--f-display);
}
.prow-price s {
    font-size: 0.8rem;
}
@media (max-width: 560px) {
    .prow-pgb {
        display: none;
    }
}
.sum {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
    min-width: 0;
}
.sum-plan > div {
    min-width: 0;
    overflow-wrap: anywhere;
}
.kv dd {
    overflow-wrap: anywhere;
    min-width: 0;
}
.co-side > * {
    min-width: 0;
}
.sum-plan {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    background: var(--soft);
    border-radius: 14px;
}
.sum-plan small {
    display: block;
}
.kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 14px;
    margin: 0;
    font-size: 0.92rem;
}
.kv dt {
    color: var(--muted);
}
.kv dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
}
.qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.qty button {
    width: 36px;
    height: 36px;
    border: 0;
    background: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--ink);
}
.qty button:hover {
    background: var(--mint);
}
.qty b {
    min-width: 32px;
    text-align: center;
}
.sum-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px dashed var(--line);
    padding-top: 14px;
}
.sum-total b {
    font: 800 1.9rem var(--f-display);
    color: var(--ink);
}
.sum-total small {
    display: block;
    font-size: 0.78rem;
}
.sum-trust {
    display: grid;
    gap: 4px;
    font-size: 0.86rem;
    color: var(--green);
    font-weight: 600;
}
.dtabs {
    padding: 26px;
}
.dtabs .tabs {
    margin-bottom: 22px;
}
.olist {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}
.devok {
    background: var(--soft);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.9rem;
}
.covlist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.covlist span {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.86rem;
    font-weight: 500;
}
/* checkout */
.costeps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.costeps span {
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--muted);
}
.costeps span.on {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.co {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 980px) {
    .co {
        grid-template-columns: minmax(0, 1fr);
    }
}
.co-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}
.co-sec {
    display: grid;
    gap: 14px;
}
.co-side {
    position: sticky;
    top: calc(96px + env(safe-area-inset-top, 0px));
    min-width: 0;
}
@media (max-width: 980px) {
    .co-side {
        position: static;
        order: -1;
    }
}
.chk {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.chk input {
    width: 20px;
    height: 20px;
    accent-color: var(--green);
    margin-top: 2px;
    flex: none;
}
.paytabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    gap: 8px;
}
.paytabs button {
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    font: 700 0.95rem var(--f-body);
    cursor: pointer;
    color: var(--ink);
}
.paytabs button[aria-pressed="true"] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--mint);
    color: var(--green);
}
.co-pay {
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
}
.coupon {
    display: flex;
    gap: 8px;
}
.coupon input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    font: 500 0.95rem var(--f-body);
    text-transform: uppercase;
}
.linkbtn {
    background: none;
    border: 0;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.kv2 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    font-size: 0.93rem;
}
.kv2 span:nth-child(odd) {
    color: var(--muted);
}
.okbig {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    box-shadow: 0 0 0 10px var(--mint);
}
.qrwrap {
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
}

/* finder */
.finder {
    padding: 28px;
    display: grid;
    gap: 16px;
    border: 2px solid var(--green);
    box-shadow: var(--shadow-l);
}
.fd-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.fd-q {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px 28px;
}
.fd-lbl {
    display: block;
    margin-bottom: 10px;
}
.usecards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 10px;
}
.usecard {
    text-align: left;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display: grid;
    gap: 4px;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
}
.usecard small {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.35;
}
.usecard span {
    font-size: 0.78rem;
    color: var(--green);
}
.usecard:hover {
    border-color: var(--green);
}
.usecard[aria-pressed="true"] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--mint);
    background: #fbfefc;
}
.fd-results {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 8px;
}
@media (max-width: 860px) {
    .fd-results {
        grid-template-columns: minmax(0, 1fr);
    }
}
.fd-alt {
    display: grid;
    gap: 12px;
    align-content: start;
}
.fd-res {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    display: grid;
    gap: 12px;
    align-content: start;
}
.fd-res.big {
    border-color: var(--green);
    background: linear-gradient(180deg, #f6fbf8, #fff);
    padding: 22px;
}
.fd-res .chip {
    justify-self: start;
}
.fd-data {
    font: 800 1.25rem var(--f-display);
}
.fd-res.big .fd-data {
    font-size: 1.6rem;
}
.fd-why {
    font-weight: 600;
    color: var(--green);
}
.fd-inc {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--ink2);
}
.fd-inc li::before {
    content: "✓ ";
    color: var(--green);
    font-weight: 800;
}
.promise {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 2px dashed var(--green);
    border-radius: 16px;
    padding: 16px;
    margin-top: 6px;
}
.cogrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
@media (max-width: 880px) {
    .cogrid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.cocard {
    display: grid;
    gap: 18px;
    padding: 28px;
    border-top: 4px solid var(--green);
}
.cocard .kv dd {
    text-align: right;
}
.wa-float {
    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px 8px 8px;
    box-shadow: var(--shadow-l);
    text-decoration: none;
    color: var(--ink);
    font-size: 0.86rem;
    line-height: 1.2;
}
.wa-float .wa {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #25d366;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.3rem;
}
.wa-float small {
    display: block;
    color: var(--muted);
}
@media (max-width: 700px) {
    .wa-float {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        padding: 6px;
    }
    .wa-float .txt {
        display: none;
    }
}
.express {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 10px;
}
.express button {
    border: 0;
    border-radius: 12px;
    padding: 14px;
    font: 700 1rem var(--f-body);
    cursor: pointer;
}
.express .ap {
    background: #000;
    color: #fff;
}
.express .gp {
    background: #fff;
    color: #000;
    border: 1.5px solid var(--line);
}
.express .pp {
    background: #ffc439;
    color: #003087;
}
.or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.86rem;
}
.or::before,
.or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--line);
}
details.devchk {
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0;
}
details.devchk summary {
    font-size: 0.93rem;
    color: var(--green);
}
details.devchk summary::after {
    font-size: 1.1rem;
}
.co-legal {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
}

.netlogo {
    position: relative;
    overflow: hidden;
}
.netlogo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    padding: 12%;
    border-radius: inherit;
}
/* mini phones */
.mph {
    display: grid;
    justify-items: center;
    gap: 10px;
}
.mph-s {
    width: 200px;
    max-width: 100%;
    height: 390px;
    background: #fff;
    border: 9px solid #0a0f0c;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(10, 40, 20, 0.18);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 10px;
    font-size: 11px;
    position: relative;
}
.mph-s::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 16px;
    background: #0a0f0c;
    border-radius: 0 0 10px 10px;
}
.mph-bar {
    display: flex;
    justify-content: space-between;
    padding: 6px 14px 0;
    font-size: 9px;
    font-weight: 700;
}
.mph-lbl {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 600;
}
.ms-h {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 12px 2px;
    font-size: 13px;
}
.ms-h img {
    width: 18px;
    height: 18px;
}
.ms-search {
    margin: 0 10px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    color: var(--ink2);
}
.ms-row,
.ms-plan {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.ms-row b {
    flex: 1;
}
.ms-row em,
.ms-plan em {
    font-style: normal;
    font-weight: 800;
    color: var(--green);
}
.ms-row.on,
.ms-plan.on {
    border-color: var(--green);
    box-shadow: 0 0 0 2px var(--mint);
}
.ms-plan {
    justify-content: space-between;
}
.ms-plan small {
    display: block;
    color: var(--muted);
    font-size: 9.5px;
}
.ms-plan b {
    font-size: 13px;
}
.ms-btn {
    margin: 4px 10px 0;
    background: var(--green);
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 9px;
    font-weight: 700;
    font-size: 12px;
}
.ms-btn.sm {
    margin: 4px 0 0;
}
.ms-btn.ghost {
    background: #fff;
    color: var(--green);
    border: 1.5px solid var(--green);
    margin-top: auto;
}
.ms-pay {
    text-align: center;
    color: var(--muted);
    font-size: 9.5px;
}
.ms-mail {
    margin: 0 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
}
.ms-mail small {
    color: var(--muted);
    justify-self: start;
}
.ms-qr {
    width: 110px;
    height: 110px;
    background: conic-gradient(#0a0f0c 25%, #fff 0 50%, #0a0f0c 0 75%, #fff 0) 0
        0/14px 14px;
    border: 7px solid #fff;
    outline: 6px solid #0a0f0c;
    border-radius: 4px;
}
.ms-list {
    margin: 0 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.ms-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
}
.ms-list div:last-child {
    border: 0;
}
.ms-list em {
    font-style: normal;
    color: var(--muted);
}
.ms-list .on {
    background: var(--mint);
    font-weight: 700;
}
.ms-list .add {
    color: var(--green);
    font-weight: 700;
}
.tog {
    width: 28px;
    height: 16px;
    border-radius: 9px;
    background: var(--line);
    position: relative;
}
.tog.on {
    background: var(--green);
}
.tog.on::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
}
.ms-live {
    margin: 0 10px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--green), var(--green-d));
    color: #fff;
    padding: 12px;
    display: grid;
    gap: 6px;
    justify-items: center;
}
.ms-ring {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(#fff 0 72%, rgba(255, 255, 255, 0.25) 0);
    display: grid;
    place-items: center;
}
.ms-ring div {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--green-d);
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1;
}
.ms-ring b {
    font: 800 18px var(--f-display);
}
/* how steps */
.hsteps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 26px;
}
.hstep {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: grid;
}
.hstep-img {
    background: radial-gradient(circle at 50% 30%, var(--mint), var(--soft));
    padding: 28px 16px 0;
    display: grid;
    justify-items: center;
    height: 330px;
    overflow: hidden;
}
.hstep-txt {
    padding: 22px 24px 26px;
    display: grid;
    gap: 8px;
}
.hnum {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font: 800 1rem var(--f-display);
    display: grid;
    place-items: center;
}
.gsteps {
    display: grid;
    gap: 26px;
}
.gstep {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px 32px;
    box-shadow: var(--shadow);
}
.gstep > div:last-child {
    display: grid;
    gap: 10px;
    max-width: 56ch;
}
@media (max-width: 640px) {
    .gstep {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        padding: 22px;
    }
    .gstep > div:last-child {
        justify-items: center;
    }
}
/* partner */
.dash {
    display: grid;
    gap: 16px;
    padding: 24px;
}
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.dash-kpis div {
    background: var(--soft);
    border-radius: 12px;
    padding: 12px;
}
.dash-kpis small {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
}
.dash-kpis b {
    font: 800 1.25rem var(--f-display);
}
.dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 110px;
}
.dash-bars i {
    flex: 1;
    background: linear-gradient(var(--green-l), var(--green));
    border-radius: 6px 6px 2px 2px;
}
.segico {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--mint);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}
.tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px;
}
.tier {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 28px;
    display: grid;
    gap: 10px;
    align-content: start;
    box-shadow: var(--shadow);
}
.tier.hot {
    border: 2px solid var(--green);
    box-shadow: var(--shadow-l);
}
.tier-n {
    font: 700 1.1rem var(--f-display);
}
.tier-m {
    font: 800 2.4rem var(--f-display);
    color: var(--green);
    letter-spacing: -0.02em;
}
.tier .btn {
    margin-top: 10px;
}
.code {
    background: #0b1410;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-l);
    min-width: 0;
}
.code-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #132219;
    color: #cfe9d8;
    font: 600 0.85rem var(--f-mono);
}
.code pre {
    margin: 0;
    padding: 18px;
    color: #d7f5e1;
    font: 500 0.8rem/1.6 var(--f-mono);
    overflow-x: auto;
}
.code .cm {
    color: #7fa58c;
}

/* calculator v2 */
.calc2-band {
    background: linear-gradient(180deg, var(--mint), #fff);
}
.calc2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}
@media (max-width: 880px) {
    .calc2 {
        grid-template-columns: minmax(0, 1fr);
    }
}
.c2-in {
    display: grid;
    gap: 22px;
    padding: 28px;
    align-content: start;
}
.c2-q {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.c2-sel,
.c2-num {
    font: 600 1rem var(--f-body);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    width: 100%;
}
.c2-num {
    width: 110px;
}
.c2-range {
    width: 100%;
    accent-color: var(--green);
    height: 28px;
}
.c2-out {
    padding: 28px;
    display: grid;
    gap: 22px;
    align-content: start;
    border: 2px solid var(--green);
    box-shadow: var(--shadow-l);
}
.c2-save {
    display: grid;
    gap: 8px;
    justify-items: start;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--line);
}
.c2-big {
    font: 800 clamp(2.6rem, 6vw, 3.6rem) var(--f-display);
    color: var(--green);
    letter-spacing: -0.03em;
    line-height: 1;
}
.c2-bars {
    display: grid;
    gap: 14px;
}
.c2-bar {
    display: grid;
    gap: 6px;
}
.c2-bar .track {
    height: 14px;
    border-radius: 8px;
    background: var(--soft);
    overflow: hidden;
}
.c2-bar .fill {
    height: 100%;
    border-radius: 8px;
    padding: 0;
}
.c2-plan {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--soft);
    border-radius: 14px;
    padding: 14px;
    flex-wrap: wrap;
}
/* UK hero */
.ukhero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            900px 420px at 80% 10%,
            var(--mint),
            rgba(234, 245, 238, 0) 60%
        ),
        linear-gradient(#fff, #f7fbf8);
    border-bottom: 1px solid var(--line);
}
.ukh-in {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 40px;
    align-items: center;
    padding-block: 44px 104px;
}
@media (max-width: 900px) {
    .ukh-in {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 32px 110px;
    }
}
.ukh-txt {
    display: grid;
    gap: 18px;
}
.ukh-txt h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
}
.ukh-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 10px;
}
.ukh-trust > span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.92rem;
}
.ukh-cards {
    position: relative;
    min-height: 340px;
}
.ukh-card {
    position: absolute;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-l);
    display: grid;
    gap: 8px;
    width: min(280px, 90%);
}
.ukh-card.c1 {
    top: 0;
    right: 0;
    border: 2px solid var(--green);
    z-index: 2;
}
.ukh-card.c2 {
    top: 170px;
    left: 0;
    width: min(240px, 80%);
}
.ukh-card.c3 {
    bottom: 0;
    right: 10px;
    width: min(250px, 85%);
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}
.ukh-card.c3 .muted {
    color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 900px) {
    .ukh-cards {
        min-height: 0;
        display: grid;
        gap: 12px;
    }
    .ukh-card {
        position: static;
        width: 100%;
    }
}
.sky {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 96px;
    z-index: 0;
    opacity: 0.55;
}
/* promise */
.promise2 {
    background: #fff;
    border: 2px solid var(--green);
    border-radius: 26px;
    padding: clamp(22px, 4vw, 40px);
    box-shadow: var(--shadow-l);
    display: grid;
    gap: 26px;
}
.p2-head {
    display: flex;
    gap: 26px;
    align-items: center;
    flex-wrap: wrap;
}
.p2-head > div:last-child {
    flex: 1;
    min-width: min(100%, 280px);
}
.p2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 14px;
}
.p2-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--soft);
    border-radius: 16px;
    padding: 16px;
}
.p2-item p {
    font-size: 0.9rem;
    margin-top: 4px;
}
/* evidence */
.ev-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 18px;
}
@media (max-width: 1000px) {
    .ev-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.ev-bars {
    display: grid;
    gap: 14px;
}
.ev-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 4px 12px;
    align-items: center;
}
.ev-l {
    grid-column: 1/-1;
    font-size: 0.86rem;
    font-weight: 600;
}
.ev-row .track {
    height: 16px;
    border-radius: 8px;
    background: var(--soft);
    overflow: hidden;
}
.ev-row .fill {
    height: 100%;
    border-radius: 8px;
    padding: 0;
}
.fill.o {
    background: #b9c3bd;
}
.ev-row b {
    text-align: right;
}
.ev-vs {
    display: grid;
    gap: 10px;
}
.ev-vs > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: var(--soft);
}
.ev-vs > div small {
    max-width: 60%;
}
.ev-vs b {
    font: 800 1.4rem var(--f-display);
}
.ev-vs .win {
    background: var(--green);
    color: #fff;
}
.ev-checks {
    display: grid;
    gap: 12px;
    align-content: start;
}
.ev-c {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ev-c small {
    display: block;
    font-size: 0.8rem;
}
/* challenges */
.chal {
    display: grid;
    gap: 12px;
}
.chal-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: var(--shadow);
}
.chal-ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--soft);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
}
.chal-bad p,
.chal-good p {
    font-size: 0.9rem;
    margin-top: 2px;
}
.chal-bad small,
.chal-good small {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
}
.chal-arrow {
    color: var(--green);
    font: 800 1.4rem var(--f-display);
    text-align: center;
}
.chal-good {
    background: var(--mint);
    border-radius: 12px;
    padding: 12px 14px;
}
@media (max-width: 760px) {
    .chal-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .chal-arrow {
        display: none;
    }
    .chal-good {
        grid-column: 1/-1;
    }
}
/* timeline */
.tl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    position: relative;
}
.tl li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 0 0 18px;
    position: relative;
}
.tl li::before {
    content: "";
    position: absolute;
    left: 103px;
    top: 8px;
    bottom: -8px;
    width: 2px;
    background: var(--mint2);
}
.tl li:last-child::before {
    display: none;
}
.tl li > div {
    padding-left: 22px;
    position: relative;
}
.tl li > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px var(--mint);
}
.tl-t {
    font: 700 0.82rem var(--f-body);
    color: var(--green);
    text-align: right;
    padding-top: 2px;
}
.tl p {
    font-size: 0.92rem;
}
.net-stat {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
}
.net-stat small {
    display: block;
}
/* accreditations */
.acc-ops {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.acc-op {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
    box-shadow: var(--shadow);
}
.acc-op small {
    font-size: 0.72rem;
}
.acc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 12px;
}
.acc-b {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
}
.acc-b small {
    display: block;
    font-size: 0.8rem;
}
.acc-i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--mint);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    flex: none;
    color: var(--green);
    font-weight: 800;
}
/* usp */
.usp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
@media (max-width: 900px) {
    .usp {
        grid-template-columns: minmax(0, 1fr);
    }
}
.usp-l {
    display: grid;
    gap: 18px;
}
.usp-l h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}
.usp-r {
    display: grid;
    gap: 12px;
}
.usp-p {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
}
.usp-p p {
    font-size: 0.92rem;
    margin-top: 2px;
}
.ex3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.ex3 > div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display: grid;
    gap: 4px;
    text-align: center;
}
.ex3 span {
    font-size: 1.6rem;
}
.hc {
    padding: 26px;
    display: grid;
    gap: 20px;
    border: 2px solid var(--green);
    box-shadow: var(--shadow-l);
}
.hc-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px 28px;
}
.hc-rows {
    display: grid;
    gap: 12px;
}
.hc-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--soft);
}
.hc-row.us {
    background: var(--mint);
    border: 1.5px solid var(--green);
}
.hc-row .track {
    height: 14px;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.hc-row .fill {
    height: 100%;
    border-radius: 8px;
    padding: 0;
}
.hc-row > b {
    font: 800 1.15rem var(--f-display);
    min-width: 80px;
    text-align: right;
}
.hc-n small {
    display: block;
    font-size: 0.8rem;
}
@media (max-width: 640px) {
    .hc-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .hc-row .track {
        grid-column: 1/-1;
        grid-row: 2;
    }
}
.hc-save {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}
.c-flagcard {
    display: grid;
    gap: 14px;
    justify-items: center;
}
.c-flag {
    font-size: clamp(5rem, 12vw, 8rem);
    line-height: 1;
    filter: drop-shadow(0 18px 30px rgba(10, 40, 20, 0.18));
}
.est {
    color: #8a6500;
    font-weight: 600;
}
.typecard.soft {
    opacity: 0.6;
    border-style: dashed;
}
.typecard.soft[aria-pressed="true"] {
    opacity: 1;
}
.speeds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 12px;
    margin-top: 20px;
}
.spd {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 4px;
}
.spd p {
    font-size: 0.88rem;
    margin-top: 4px;
}
.spd-bar {
    height: 8px;
    border-radius: 5px;
    background: var(--soft);
    overflow: hidden;
    margin-bottom: 8px;
}
.spd-bar i {
    display: block;
    height: 100%;
    border-radius: 5px;
}
.spd.good .spd-bar i {
    width: 100%;
    background: var(--green);
}
.spd.mid .spd-bar i {
    width: 35%;
    background: #c9821b;
}
.spd.bad .spd-bar i {
    width: 10%;
    background: var(--red);
}
.spd.bad b {
    color: var(--red);
}
.unl-way {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: 24px;
    align-items: center;
    margin-top: 24px;
    background: var(--mint);
    border-radius: 22px;
    padding: 26px;
}
@media (max-width: 820px) {
    .unl-way {
        grid-template-columns: minmax(0, 1fr);
    }
}
.unl-cta {
    display: grid;
    gap: 6px;
    border: 2px solid var(--green);
}
.nounl {
    background: #fff8e1;
}
.corp-band {
    background: linear-gradient(180deg, #fff, var(--soft));
}
.corp {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 36px;
    align-items: center;
}
@media (max-width: 900px) {
    .corp {
        grid-template-columns: minmax(0, 1fr);
    }
}
.corp-l {
    display: grid;
    gap: 18px;
}
.corp-pts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 12px;
}
.corp-pt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
}
.corp-pt small {
    display: block;
    font-size: 0.84rem;
}
.corp-r {
    display: grid;
    gap: 14px;
    padding: 22px;
}
.corp-emp {
    display: grid;
    gap: 10px;
}
.ce {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--soft);
    border-radius: 12px;
    padding: 10px 12px;
}
.cbar {
    height: 6px;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    margin-top: 6px;
}
.cbar i {
    display: block;
    height: 100%;
    background: var(--green);
    border-radius: 4px;
}
.corp-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.corp-kpi div {
    background: var(--soft);
    border-radius: 12px;
    padding: 12px;
}
.corp-kpi small {
    display: block;
}
.corp-kpi b {
    font: 800 1.4rem var(--f-display);
}
.way {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    text-decoration: none;
}
.way .segico {
    margin: 0;
}
.way p {
    font-size: 0.9rem;
}

/* ---- Laravel build: accessibility, forms, flash messages ---- */
.skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
}
.skip:focus {
    left: 12px;
}
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.flash {
    border-radius: 14px;
    padding: 14px 18px;
    margin: 0 0 16px;
    font-weight: 600;
    background: var(--green-soft, #e7f4ec);
    color: var(--green, #126834);
    border: 1px solid rgba(18, 104, 52, 0.25);
}
.flash.err {
    background: #fdecec;
    color: #9b1c1c;
    border-color: rgba(155, 28, 28, 0.25);
}
.form-errors {
    background: #fdecec;
    color: #9b1c1c;
    border: 1px solid rgba(155, 28, 28, 0.25);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 0.92rem;
}
.form-errors ul {
    margin: 6px 0 0 18px;
}
.field-error {
    display: block;
    color: #9b1c1c;
    font-size: 0.84rem;
    margin-top: 4px;
}
.form {
    display: grid;
    gap: 12px;
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #c53030 !important;
}
:focus-visible {
    outline: 3px solid rgba(18, 104, 52, 0.45);
    outline-offset: 2px;
}
img {
    max-width: 100%;
    height: auto;
}
html,
body {
    overflow-x: clip;
}
table {
    word-break: normal;
}
@media (max-width: 640px) {
    .tbl-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .co {
        grid-template-columns: 1fr !important;
    }
    .fd-results,
    .pb-filters {
        grid-template-columns: 1fr !important;
    }
    .hc-row {
        grid-template-columns: 1fr auto !important;
    }
    .hc-row .track {
        grid-column: 1/-1;
    }
    input,
    select,
    textarea {
        font-size: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
[hidden] {
    display: none !important;
}
.tbl-wrap {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.blog-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    height: 100%;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-l);
    border-color: var(--mint2);
}
.blog-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--mint);
}
.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.blog-card:hover .blog-card-thumb img {
    transform: scale(1.05);
}
.blog-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}
.blog-card-title {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--ink);
    transition: color 0.18s;
}
.blog-card:hover .blog-card-title {
    color: var(--green);
}
.blog-card-desc {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
    flex-grow: 1;
}
.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 0.84rem;
}