/* ── V2 Core Design System ── */

/* Reset */
.v2-page *,
.v2-page *::before,
.v2-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* CSS Variables */
:root {
    --cr: #E8175D;
    --crd: #C4104A;
    --crt: #FFF0F4;
    --ye: #FFD600;
    --yet: #FFF8CC;
    --wh: #FFFFFF;
    --of: #F9F9F9;
    --ch: #111111;
    --t1: #1A1A1A;
    --t2: #555555;
    --tm: #888888;
    --bl: #E8E8E8;
    --bm: #D0D0D0;
    --gn: #22C55E;
}

/* Base */
.v2-page {
    font-family: 'Nunito', sans-serif;
    background: #ffffff;
    color: #1A1A1A;
    line-height: 1.6;
    overflow-x: hidden;
}

.v2-page a {
    text-decoration: none;
    color: inherit;
}

/* ── NAV ── */
.v2-page nav {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #ffffff;
    border-bottom: 1px solid #E8E8E8;
    height: 64px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 48px;
}

.v2-page .ni {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.v2-page .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
    color: var(--cr);
    text-decoration: none;
    flex-shrink: 0;
}

.v2-page .logo img {
    height: 30px;
    width: auto;
}

.v2-page .nl {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Grow to fill the gap between logo (left) and CTA (right) and center the
       links within it, so the menu reads centered in the bar. */
    flex: 1;
    justify-content: center;
    list-style: none;
}

.v2-page .nl > li > a {
    padding: 8px 11px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #1A1A1A;
    cursor: pointer;
    transition: color 150ms;
    white-space: nowrap;
    background: transparent;
}

.v2-page .nl > li > a:hover,
.v2-page .nl > li > a.act {
    color: #E8175D;
    background: transparent;
}

.v2-page .nav-cta {
    flex-shrink: 0;
    background: var(--cr);
    color: var(--wh);
    border: none;
    border-radius: 9999px;
    padding: 11px 22px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(232, 23, 93, 0.3);
    transition: background 200ms, transform 150ms;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}

.v2-page .nav-cta:hover {
    background: var(--crd);
    transform: translateY(-1px);
}

/* Dropdown */
.v2-page .dd {
    position: relative;
}

.v2-page .ddm {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--wh);
    border: 1px solid var(--bl);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    padding: 8px;
    z-index: 300;
}

.v2-page .dd:hover > .ddm {
    display: block;
}

.v2-page .ddm a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms;
}

.v2-page .ddm a:hover {
    background: var(--crt);
    color: var(--cr);
}

.v2-page .ddm .dd > a::after {
    content: "▸";
    float: right;
    font-size: 11px;
    opacity: .7;
    margin-left: 8px;
}

.v2-page .ddm .dd > a:hover {
    background: transparent;
    color: var(--t1);
}

.v2-page .ddm .dd > .ddm {
    top: -9px;
    left: 100%;
    margin-left: -1px;
}

/* ── SHARED LAYOUT ── */
.v2-page .sec {
    padding: 80px 64px;
}

.v2-page .sec-in {
    max-width: 1200px;
    margin: 0 auto;
}

/* Labels */
.v2-page .lbl {
    display: inline-block;
    background: var(--crt);
    color: var(--cr);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 9999px;
    margin-bottom: 12px;
}

.v2-page .lbl.ye { background: var(--ye); color: var(--ch); }
.v2-page .lbl.wh { background: var(--wh); color: var(--ch); }
.v2-page .lbl.dk { background: rgba(255, 214, 0, 0.15); color: var(--ye); }

/* Headings */
.v2-page .h1 {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--t1);
    margin-bottom: 12px;
    line-height: 1.1;
}

.v2-page .h1 em,
.v2-page .h1 span.red {
    font-style: normal;
    color: var(--cr);
}

.v2-page .sub {
    font-size: 17px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 44px;
    max-width: 560px;
    line-height: 1.65;
}

/* ── BUTTONS ── */
.v2-page .br {
    display: inline-block;
    background: var(--cr);
    color: var(--wh);
    border-radius: 9999px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 4px 14px rgba(232, 23, 93, 0.35);
    transition: background 200ms, transform 150ms;
}

.v2-page .br:hover {
    background: var(--crd);
    transform: translateY(-1px);
}

.v2-page .bo {
    display: inline-block;
    border: 2px solid var(--bl);
    color: var(--t1);
    border-radius: 9999px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    transition: border-color 200ms, color 200ms;
}

.v2-page .bo:hover {
    border-color: var(--cr);
    color: var(--cr);
}

.v2-page .bg {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 9999px;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    transition: all 200ms;
}

.v2-page .bg:hover {
    border-color: rgba(255, 255, 255, 0.7);
}

/* ── CARDS ── */
.v2-page .card {
    background: var(--wh);
    border-radius: 16px;
    padding: 26px;
    border: 1px solid var(--bl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: transform 200ms, box-shadow 200ms;
}

.v2-page .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* ── CTA DARK ── */
.v2-page .cta-dk {
    background: var(--ch);
    padding: 88px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.v2-page .cta-dk::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(232, 23, 93, 0.15) 0%, transparent 70%);
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
}

.v2-page .cta-di {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
}

.v2-page .cta-di h2 {
    font-size: 46px;
    font-weight: 800;
    color: var(--wh);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 14px;
}

.v2-page .cta-di p {
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 32px;
    line-height: 1.65;
}

.v2-page .cta-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── CTA RED VARIANT ── */
.v2-page .cta-dk.cta-red {
    background: var(--cr);
}

.v2-page .cta-dk.cta-red .cta-di p {
    color: rgba(255, 255, 255, 0.8);
}

.v2-page .cta-dk.cta-red .cta-red-btn {
    display: inline-block;
    background: var(--wh);
    color: var(--cr);
    border-radius: 9999px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 150ms;
    text-decoration: none;
}

.v2-page .cta-dk.cta-red .cta-red-btn:hover {
    transform: translateY(-1px);
}

/* ── HERO 2-COL ── */
.v2-page .h2c {
    padding: 80px 64px;
}

.v2-page .h2ci {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.v2-page .h2c h1 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.2px;
    color: var(--t1);
    margin-bottom: 16px;
}

.v2-page .h2c h1 em,
.v2-page .h2c h1 span.red {
    font-style: normal;
    color: var(--cr);
}

.v2-page .h2c .sub2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.65;
    margin-bottom: 26px;
}

/* Visual cards */
.v2-page .vis {
    border-radius: 20px;
    padding: 26px;
    min-height: 270px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.v2-page .vis.ye { background: var(--ye); }
.v2-page .vis.pk { background: var(--crt); }
.v2-page .vis.dk { background: var(--ch); }
.v2-page .vis.tl { background: #E0F7FA; }

.v2-page .vis .be {
    position: absolute;
    font-size: 90px;
    opacity: 0.12;
    right: -10px;
    bottom: -10px;
    line-height: 1;
    pointer-events: none;
}

.v2-page .vc {
    background: var(--wh);
    border-radius: 11px;
    padding: 12px 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.v2-page .vc .vl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tm);
    margin-bottom: 3px;
}

.v2-page .vc .vv {
    font-size: 13px;
    font-weight: 800;
    color: var(--t1);
}

.v2-page .vtag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    margin-top: 4px;
}

.v2-page .vtag.r { background: var(--crt); color: var(--cr); }
.v2-page .vtag.g { background: #DCFCE7; color: #16A34A; }
.v2-page .vtag.y { background: var(--yet); color: #92400E; }

/* ── CHALLENGES ── */
.v2-page .cg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 44px;
}

.v2-page .cc {
    background: var(--wh);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--bl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
    display: flex;
    gap: 13px;
    align-items: flex-start;
    transition: transform 200ms;
}

.v2-page .cc:hover {
    transform: translateY(-2px);
}

.v2-page .cc .ci {
    font-size: 26px;
    flex-shrink: 0;
}

.v2-page .cc h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 6px;
}

.v2-page .cc p {
    font-size: 13px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.6;
}

/* ── SOLUTION ── */
.v2-page .sol {
    padding: 72px 64px;
}

.v2-page .soli {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.v2-page .slb {
    background: var(--wh);
    border-radius: 20px;
    padding: 26px;
    border: 1px solid var(--bl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
}

.v2-page .sr {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--bl);
}

.v2-page .sr:last-child { border-bottom: none; }
.v2-page .sc { background: var(--cr); }

.v2-page .sr .sc {
    color: var(--wh);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
}

.v2-page .sr h4 {
    font-size: 13px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 2px;
}

.v2-page .sr p {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.5;
}

/* ── FEATURE GRID ── */
.v2-page .fg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 44px;
}

.v2-page .fc {
    background: var(--wh);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    position: relative;
    overflow: hidden;
    transition: transform 200ms;
}

.v2-page .fc:hover { transform: translateY(-2px); }

.v2-page .fn {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 36px;
    font-weight: 900;
    color: rgba(255, 214, 0, 0.25);
    line-height: 1;
}

.v2-page .fc .fi { font-size: 24px; margin-bottom: 9px; }

.v2-page .fm {
    font-size: 10px;
    font-weight: 700;
    color: var(--cr);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.v2-page .fc h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 6px;
}

.v2-page .fc p {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.6;
}

.v2-page .fv {
    display: inline-block;
    background: var(--crt);
    color: var(--cr);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 9999px;
    margin-top: 8px;
}

/* ── RESULTS ── */
.v2-page .rs {
    background: var(--ch);
    padding: 72px 64px;
}

.v2-page .ri {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.v2-page .ri h2 {
    font-size: 38px;
    font-weight: 800;
    color: var(--wh);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
}

.v2-page .ri > .rp {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 44px;
}

.v2-page .rg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.v2-page .rc {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 16px;
}

.v2-page .rn {
    font-size: 38px;
    font-weight: 900;
    color: var(--ye);
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 6px;
}

.v2-page .rl {
    font-size: 13px;
    font-weight: 800;
    color: var(--wh);
    margin-bottom: 4px;
}

.v2-page .rd {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.5;
}

/* ── MARQUEE ── */
.v2-page .mq {
    overflow: hidden;
    position: relative;
}

.v2-page .mq::before,
.v2-page .mq::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
}

.v2-page .mq::before {
    left: 0;
    background: linear-gradient(to right, var(--wh), transparent);
}

.v2-page .mq::after {
    right: 0;
    background: linear-gradient(to left, var(--wh), transparent);
}

.v2-page .mq-t {
    display: flex;
    animation: v2-mq 28s linear infinite;
}

.v2-page .mq-t:hover {
    animation-play-state: paused;
}

@keyframes v2-mq {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.v2-page .li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border-right: 1px solid var(--bl);
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
    color: var(--t2);
}

/* Partner-logo marquee items (shared trust-logos partial). Defined here in core
   so any page hosting the marquee gets the styling, not just ecosystem home. */
.li-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 48px;
    height: 130px;
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    box-sizing: border-box;
}
.li-logo img {
    height: 64px;
    width: 160px;
    object-fit: contain;
    object-position: center;
    filter: grayscale(100%) opacity(0.6);
    transition: filter 250ms ease;
    display: block;
}
.li-logo img:hover { filter: grayscale(0%) opacity(1); }

/* ── FAQ ── */
.v2-page .fq {
    background: var(--bl);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 10px;
}

.v2-page .fqq {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    color: var(--t1);
    gap: 12px;
    user-select: none;
}

.v2-page .fqi {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--crt);
    color: var(--cr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: transform 250ms;
}

.v2-page .fq.open .fqi {
    transform: rotate(45deg);
}

.v2-page .fqa {
    max-height: 0;
    overflow: hidden;
    transition: max-height 350ms ease, padding 250ms ease;
    background: var(--wh);
}

.v2-page .fq.open .fqa {
    max-height: 250px;
    padding: 4px 20px 16px;
}

.v2-page .fqa p {
    font-size: 13px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.7;
}

/* ── CAROUSEL ── */
.v2-page .cw {
    overflow: hidden;
}

.v2-page .ct {
    display: flex;
    gap: 18px;
    transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.v2-page .cc-btns {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.v2-page .cb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--bl);
    background: var(--wh);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 200ms;
    color: var(--t1);
}

.v2-page .cb:hover {
    border-color: var(--cr);
    color: var(--cr);
}

.v2-page .cd {
    display: flex;
    gap: 6px;
}

.v2-page .cdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bl);
    cursor: pointer;
    transition: all 200ms;
}

.v2-page .cdot.on {
    background: var(--cr);
    width: 20px;
    border-radius: 9999px;
}

/* ── WIDGET PREVIEW ── */
.v2-page .wb {
    background: var(--wh);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--bl);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.v2-page .wtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.v2-page .wt {
    padding: 6px 13px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
}

.v2-page .wt.on { background: var(--cr); color: var(--wh); }
.v2-page .wt.off { background: var(--of); color: var(--t2); }

.v2-page .mc {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 12px;
}

.v2-page .mch {
    font-size: 9px;
    font-weight: 700;
    color: var(--tm);
    text-align: center;
    padding: 2px 0;
}

.v2-page .mcd {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    margin: 0 auto;
    transition: all 150ms;
}

.v2-page .mcd.av {
    color: var(--t1);
    background: var(--wh);
    border: 1px solid var(--bl);
}

.v2-page .mcd.av:hover {
    border-color: var(--cr);
    color: var(--cr);
}

.v2-page .mcd.sel {
    background: var(--cr);
    color: var(--wh);
}

.v2-page .mcd.off {
    color: var(--bl);
    cursor: default;
}

.v2-page .mcd.full {
    background: var(--of);
    color: var(--bm);
    border: 1px dashed var(--bl);
    cursor: not-allowed;
    text-decoration: line-through;
}

.v2-page .tr {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.v2-page .tc {
    padding: 5px 11px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    border: 1.5px solid var(--bl);
    color: var(--t2);
    cursor: pointer;
    transition: all 150ms;
}

.v2-page .tc.sel {
    background: var(--cr);
    color: var(--wh);
    border-color: var(--cr);
}

.v2-page .tc:hover:not(.sel) {
    border-color: var(--cr);
    color: var(--cr);
}

/* ── TRUST BAR ── */
.v2-page .tb {
    background: #ffffff;
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
    padding: 18px 64px;
}

.v2-page .tbi {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}

.v2-page .tbit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
}

.v2-page .tbdiv {
    width: 1px;
    height: 20px;
    background: rgba(232, 23, 93, 0.2);
}

/* ── REVIEWS ── */
.v2-page .rev {
    min-width: 480px;
    background: var(--crt);
    border-radius: 22px;
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.v2-page .rev::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    right: 18px;
    font-size: 100px;
    font-weight: 900;
    color: rgba(232, 23, 93, 0.08);
    line-height: 1;
    font-family: 'Nunito', sans-serif;
}

.v2-page .rev-st {
    font-size: 18px;
    margin-bottom: 12px;
}

.v2-page .rev-tx {
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    line-height: 1.7;
    margin-bottom: 18px;
}

.v2-page .rev-au {
    display: flex;
    align-items: center;
    gap: 11px;
}

.v2-page .rav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cr);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wh);
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
}

.v2-page .rn2 {
    font-size: 13px;
    font-weight: 800;
    color: var(--t1);
}

.v2-page .rr {
    font-size: 11px;
    font-weight: 600;
    color: var(--tm);
}

/* ── DO SLIDE (delivery options) ── */
.v2-page .dos {
    min-width: 340px;
    background: var(--wh);
    border-radius: 18px;
    border: 1px solid var(--bl);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: transform 200ms;
}

.v2-page .dos:hover { transform: translateY(-3px); }

.v2-page .dosi {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-page .dosi.ye { background: var(--ye); }
.v2-page .dosi.pk { background: var(--crt); }
.v2-page .dosi.dk { background: var(--ch); }

.v2-page .dosb { padding: 20px; }

.v2-page .dosb h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 6px;
}

.v2-page .dosb p {
    font-size: 13px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.6;
    margin-bottom: 11px;
}

.v2-page .stpill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--yet);
    border: 1px solid var(--ye);
    border-radius: 9999px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ch);
}

/* ── HOW CARD ── */
.v2-page .hc {
    min-width: 250px;
    background: var(--wh);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: transform 200ms;
}

.v2-page .hc:hover { transform: translateY(-2px); }

.v2-page .hci {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--crt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 13px;
}

.v2-page .hc h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 7px;
    line-height: 1.3;
}

.v2-page .hc p {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.6;
}

/* ── PLAN TABS ── */
.v2-page .ptr {
    display: flex;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    border: 1px solid var(--bl);
    border-bottom: none;
    margin-top: 14px;
    padding-top: 14px;
}

.v2-page .pt {
    flex: 1;
    padding: 16px 18px;
    cursor: pointer;
    background: var(--of);
    border: none;
    font-family: 'Nunito', sans-serif;
    text-align: left;
    transition: background 200ms;
    position: relative;
    border-right: 1px solid var(--bl);
}

.v2-page .pt:last-child { border-right: none; }
.v2-page .pt.on { background: var(--wh); box-shadow: 0 -2px 0 var(--cr) inset; }

.v2-page .tpop {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gn);
    color: var(--wh);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 9999px;
    white-space: nowrap;
}

.v2-page .tn {
    font-size: 15px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 2px;
}

.v2-page .pt.st .tn { color: var(--cr); }

.v2-page .tp {
    font-size: 18px;
    font-weight: 900;
    color: var(--t1);
}

.v2-page .tp .per {
    font-size: 11px;
    font-weight: 600;
    color: var(--tm);
}

.v2-page .pc {
    display: none;
    background: var(--wh);
    border: 1px solid var(--bl);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
}

.v2-page .pc.on { display: block; }
.v2-page .pc.smc { border-color: var(--cr); }

.v2-page .pcg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 24px;
}

.v2-page .pcpr {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1;
}

.v2-page .pcpr sup {
    font-size: 20px;
    vertical-align: super;
}

.v2-page .pcan {
    display: inline-block;
    background: var(--crt);
    color: var(--cr);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 9999px;
    margin-top: 6px;
}

.v2-page .pcq {
    background: var(--of);
    border-radius: 11px;
    padding: 16px;
    border: 1px solid var(--bl);
}

.v2-page .pcq li {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.v2-page .pcq li::before {
    content: '\2022';
    color: var(--cr);
    font-size: 14px;
}

.v2-page .pcc {
    display: block;
    background: var(--t1);
    color: var(--wh);
    border-radius: 9999px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border: none;
    font-family: 'Nunito', sans-serif;
    margin-top: 16px;
    width: 100%;
    transition: background 200ms;
    text-decoration: none;
}

.v2-page .smc .pcc { background: var(--cr); }

.v2-page .pcf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.v2-page .pcfg h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tm);
    margin-bottom: 10px;
}

.v2-page .pfi {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 5px;
}

.v2-page .pfi .ck {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #DCFCE7;
    color: #16A34A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    flex-shrink: 0;
    margin-top: 2px;
}

.v2-page .bsf {
    font-size: 9px;
    font-weight: 700;
    color: var(--gn);
    background: rgba(34, 197, 94, 0.1);
    padding: 1px 5px;
    border-radius: 9999px;
    margin-left: 3px;
}

.v2-page .soon {
    font-size: 9px;
    font-weight: 700;
    color: #F59E0B;
    margin-left: 3px;
}

.v2-page .frb {
    background: var(--of);
    border: 1px solid var(--bl);
    border-radius: 13px;
    padding: 20px 28px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.v2-page .frb h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--t1);
}

.v2-page .ffts {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1;
}

.v2-page .fft {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--t2);
}

.v2-page .fft::before {
    content: '\2713';
    color: var(--gn);
    font-weight: 800;
}

/* ── COMPARISON TABLE (plan features) ── */
.v2-page .ctb {
    width: 100%;
    border-collapse: collapse;
    background: var(--wh);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
    table-layout: fixed;
}

.v2-page .ctb thead th {
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    background: var(--ch);
    color: rgba(255, 255, 255, 0.65);
}

.v2-page .ctb thead th:first-child { text-align: left; }
.v2-page .ctb thead th.sc { background: var(--cr); color: var(--wh); }

.v2-page .ctb .gh td {
    background: var(--ye);
    font-size: 11px;
    font-weight: 800;
    color: var(--ch);
    padding: 9px 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.v2-page .ctb .sg td {
    background: var(--yet);
    font-size: 10px;
    font-weight: 700;
    color: var(--t2);
    padding: 8px 16px;
    font-style: italic;
}

.v2-page .ctb tbody tr:hover td { background: rgba(255, 248, 204, 0.4); }
.v2-page .ctb tbody tr:hover td.smc { background: rgba(232, 23, 93, 0.06); }

.v2-page .ctb td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--bl);
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    text-align: center;
    vertical-align: middle;
}

.v2-page .ctb td:first-child {
    text-align: left;
    color: var(--t1);
    font-weight: 700;
}

.v2-page .ctb td.smc { background: rgba(232, 23, 93, 0.03); }

.v2-page .tick { color: var(--gn); font-size: 14px; font-weight: 900; }
.v2-page .cross { color: #EF4444; font-size: 14px; }

/* ── COMPARISON TABLE (competitors) ── */
.v2-page .c2 {
    width: 100%;
    border-collapse: collapse;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    table-layout: fixed;
}

.v2-page .c2 thead th {
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    background: var(--ye);
    color: var(--ch);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.v2-page .c2 thead th:nth-child(1) { text-align: left; width: 120px; }
.v2-page .c2 thead th:nth-child(2) { text-align: left; width: 200px; }
.v2-page .c2 thead th.hl { background: var(--cr); color: var(--wh); }

.v2-page .c2 .gc td {
    background: var(--yet);
    font-size: 11px;
    font-weight: 800;
    color: var(--ch);
    padding: 11px 14px;
    vertical-align: middle;
    border-right: 1px solid var(--bl);
}

.v2-page .c2 .fec td {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    padding: 11px 16px;
    border-right: 1px solid var(--bl);
    vertical-align: middle;
}

.v2-page .c2 .chc {
    text-align: center;
    padding: 11px 14px;
    border-right: 1px solid var(--bl);
    vertical-align: middle;
    font-size: 12px;
    font-weight: 700;
}

.v2-page .c2 .chc.dc { background: rgba(232, 23, 93, 0.03); }
.v2-page .c2 tbody tr:hover td { background: rgba(255, 248, 204, 0.4); }
.v2-page .c2 tbody tr:hover td.dc { background: rgba(232, 23, 93, 0.07); }
.v2-page .c2 td { border-bottom: 1px solid var(--bl); }

/* ── CASE CARDS ── */
.v2-page .csg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.v2-page .csc {
    background: var(--wh);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--bl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: transform 200ms;
    cursor: pointer;
}

.v2-page .csc:hover { transform: translateY(-4px); }

.v2-page .csci {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.v2-page .csci .csb {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: var(--wh);
    border-radius: 9px;
    padding: 8px 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.v2-page .csb .csn {
    font-size: 19px;
    font-weight: 900;
    color: var(--cr);
    display: block;
    line-height: 1;
}

.v2-page .csb .csl {
    font-size: 9px;
    font-weight: 700;
    color: var(--tm);
}

.v2-page .cscb { padding: 20px; }

.v2-page .cscb h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 4px;
}

.v2-page .cscb p {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.6;
    margin-bottom: 11px;
}

/* ── BILLING TOGGLE ── */
.v2-page .btg {
    display: inline-flex;
    background: var(--of);
    border-radius: 9999px;
    padding: 4px;
    gap: 3px;
    border: 1px solid var(--bl);
}

.v2-page .btb {
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: 'Nunito', sans-serif;
    color: var(--t2);
    background: transparent;
    transition: all 200ms;
}

.v2-page .btb.on {
    background: var(--wh);
    color: var(--t1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.v2-page .svb {
    display: inline-block;
    background: var(--gn);
    color: var(--wh);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 9999px;
    margin-left: 4px;
}

/* ── SHOPIFY PLUS HERO ── */
.v2-page .sph {
    background: linear-gradient(160deg, #0a0a0a 0%, #1a0510 50%, #1a0008 100%);
    padding: 88px 64px;
    position: relative;
    overflow: hidden;
}

.v2-page .sph::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(232, 23, 93, 0.18) 0%, transparent 70%);
    top: -100px;
    right: -100px;
}

.v2-page .sphi {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.v2-page .sph h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--wh);
    margin-bottom: 16px;
}

.v2-page .sph h1 span { color: var(--ye); }

.v2-page .sph .sp {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 26px;
}

.v2-page .spbst {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 214, 0, 0.12);
    border: 1px solid rgba(255, 214, 0, 0.3);
    border-radius: 11px;
    padding: 11px 16px;
    margin-bottom: 24px;
}

.v2-page .spbn {
    font-size: 28px;
    font-weight: 900;
    color: var(--ye);
    line-height: 1;
}

.v2-page .spbt {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}

.v2-page .cpv {
    background: var(--wh);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.v2-page .cps {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--bl);
}

.v2-page .cps:last-child { border-bottom: none; }

.v2-page .cpi {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.v2-page .cpi.dn { background: #DCFCE7; color: #16A34A; }
.v2-page .cpi.ac { background: var(--cr); color: var(--wh); }
.v2-page .cpi.pe { background: var(--bl); color: var(--tm); }

.v2-page .cps h5 {
    font-size: 12px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 1px;
}

.v2-page .cps p {
    font-size: 10px;
    font-weight: 600;
    color: var(--tm);
}

.v2-page .cpdt {
    background: var(--yet);
    border: 1px solid var(--ye);
    border-radius: 10px;
    padding: 12px;
    margin-top: 12px;
}

.v2-page .cpdr {
    display: flex;
    gap: 5px;
    margin-top: 7px;
}

.v2-page .cpd2 {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.v2-page .cpd2.av { background: var(--wh); color: var(--t1); border: 1px solid var(--bl); }
.v2-page .cpd2.sel { background: var(--cr); color: var(--wh); }
.v2-page .cpd2.full { background: var(--of); color: var(--bm); }

/* ── BLOG ── */
.v2-page .blg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.v2-page .bc {
    background: var(--wh);
    border-radius: 18px;
    border: 1px solid var(--bl);
    overflow: hidden;
    cursor: pointer;
    transition: transform 200ms, box-shadow 200ms;
    display: flex;
    flex-direction: column;
}

.v2-page .bc:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.08);
}

.v2-page .bci {
    /* Block flow so the box grows to the image height — full image, no crop.
       position:relative anchors the category overlay; min-height is a
       placeholder for posts without a thumbnail (inline bg fills it). */
    position: relative;
    min-height: 120px;
}

.v2-page .bci img {
    display: block;
    width: 100%;
    height: auto;
}

.v2-page .bci .ct2 {
    position: absolute;
    top: 9px;
    left: 9px;
    background: var(--wh);
    color: var(--t1);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 9999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.v2-page .bcb {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.v2-page .bcb h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--t1);
    line-height: 1.3;
    margin-bottom: 8px;
}

.v2-page .bcb p {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 12px;
}

.v2-page .bcf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--bl);
}

.v2-page .mav {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wh);
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}

/* Blog featured */
.v2-page .bfc {
    /* Stacked layout (image on top, content below). A side-by-side grid forces
       row height = max(image, text), so any image/text height mismatch shows as
       crop or whitespace. Stacking lets the image render at its natural ratio
       (full, no crop) with the text flowing beneath (no whitespace) regardless
       of image ratio or excerpt length. Capped width keeps the hero image from
       becoming oversized at full container width. */
    max-width: 760px;
    margin: 0 auto;
    background: var(--wh);
    border-radius: 22px;
    border: 1px solid var(--bl);
    overflow: hidden;
    display: block;
    cursor: pointer;
    transition: transform 200ms;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.v2-page .bfc:hover { transform: translateY(-4px); }

.v2-page .bfi {
    /* Natural-height image — full featured image, no crop. position:relative
       anchors the "Featured" badge; min-height covers a missing thumbnail. */
    position: relative;
    overflow: hidden;
    min-height: 200px;
}

.v2-page .bfi img {
    display: block;
    width: 100%;
    height: auto;
}

.v2-page .bfi .ct3 {
    position: absolute;
    top: 18px;
    left: 18px;
    background: var(--cr);
    color: var(--wh);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 9999px;
}

.v2-page .bfb {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.v2-page .bfm {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tm);
    margin-bottom: 14px;
}

.v2-page .bfdot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--bl);
}

.v2-page .bfb h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--t1);
    line-height: 1.2;
    margin-bottom: 12px;
}

.v2-page .bfb p {
    font-size: 14px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.65;
    margin-bottom: 20px;
}

.v2-page .bfar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--bl);
}

/* Blog filter */
.v2-page .bfsrch {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 64px;
    background: var(--wh);
    border-bottom: 1px solid var(--bl);
    position: sticky;
    top: 64px;
    z-index: 90;
}

.v2-page .bfsrch input {
    padding: 9px 15px;
    border: 1.5px solid var(--bl);
    border-radius: 9999px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    outline: none;
    transition: border-color 200ms;
    min-width: 200px;
}

.v2-page .bfsrch input:focus { border-color: var(--cr); }

.v2-page .flps {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.v2-page .flp {
    padding: 7px 15px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--bl);
    background: var(--wh);
    color: var(--t2);
    transition: all 150ms;
    font-family: 'Nunito', sans-serif;
}

.v2-page .flp.on {
    background: var(--cr);
    color: var(--wh);
    border-color: var(--cr);
}

.v2-page .flp:hover:not(.on) {
    border-color: var(--cr);
    color: var(--cr);
}

/* Newsletter */
.v2-page .nltr {
    padding: 48px 64px;
}

.v2-page .nltri {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.v2-page .nltri h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 8px;
}

.v2-page .nltri p {
    font-size: 14px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 22px;
}

.v2-page .nlf {
    display: flex;
    gap: 8px;
}

.v2-page .nlf input {
    flex: 1;
    padding: 11px 16px;
    border: 1.5px solid var(--bl);
    border-radius: 9999px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 600;
    outline: none;
}

.v2-page .nlf input:focus { border-color: var(--cr); }

.v2-page .nlf button {
    background: var(--cr);
    color: var(--wh);
    border: none;
    border-radius: 9999px;
    padding: 11px 22px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 200ms;
}

.v2-page .nlf button:hover { background: var(--crd); }

/* ── BLOG POST ── */
.v2-page .pgr {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 64px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 52px;
    padding-top: 40px;
    padding-bottom: 80px;
}

.v2-page .pbdy h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--t1);
    margin: 34px 0 12px;
}

.v2-page .pbdy h3 {
    font-size: 19px;
    font-weight: 800;
    color: var(--t1);
    margin: 22px 0 9px;
}

.v2-page .pbdy p {
    font-size: 14px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.75;
    margin-bottom: 16px;
}

.v2-page .pbdy strong {
    font-weight: 800;
    color: var(--t1);
}

.v2-page .pbdy ul {
    margin: 0 0 16px 0;
    padding: 0;
}

.v2-page .pbdy li {
    font-size: 14px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.75;
    margin-bottom: 7px;
    list-style: none;
    position: relative;
    padding-left: 18px;
}

/* Absolute marker keeps inline children (<strong> + text) flowing on one line.
   A flex li would split each inline child into its own column. */
.v2-page .pbdy li::before {
    content: '\2022';
    color: var(--cr);
    font-weight: 800;
    position: absolute;
    left: 0;
    top: 0;
}

.v2-page .pled {
    font-size: 17px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.7;
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-top: none;
    border-bottom: 1px solid var(--bl);
}

.v2-page .cbox {
    border-radius: 13px;
    padding: 18px 22px;
    margin: 22px 0;
}

.v2-page .cbox.ye { background: var(--yet); border: 1px solid var(--ye); }
.v2-page .cbox.pk { background: var(--crt); border: 1px solid rgba(232, 23, 93, 0.2); }
.v2-page .cbox.dk { background: var(--ch); }

.v2-page .cbox .clbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.v2-page .cbox.ye .clbl { color: #92400E; }
.v2-page .cbox.pk .clbl { color: var(--cr); }
.v2-page .cbox.dk .clbl { color: var(--ye); }

.v2-page .cbox p {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    line-height: 1.65;
}

.v2-page .cbox.dk p { color: rgba(255, 255, 255, 0.7); }

.v2-page .s3g {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0;
}

.v2-page .s3b {
    background: var(--of);
    border-radius: 11px;
    padding: 16px;
    text-align: center;
    border: 1px solid var(--bl);
}

.v2-page .s3b .sn {
    font-size: 30px;
    font-weight: 900;
    color: var(--cr);
    letter-spacing: -1px;
    line-height: 1;
}

.v2-page .s3b .sl {
    font-size: 11px;
    font-weight: 700;
    color: var(--t2);
    margin-top: 4px;
}

.v2-page blockquote {
    border-left: 4px solid var(--cr);
    padding: 12px 20px;
    margin: 22px 0;
    background: var(--crt);
    border-radius: 0 10px 10px 0;
}

.v2-page blockquote p {
    font-size: 16px;
    font-weight: 700;
    color: var(--t1);
    line-height: 1.65;
    font-style: italic;
    margin: 0;
}

.v2-page blockquote cite {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tm);
    font-style: normal;
}

.v2-page .ptags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 24px 0;
    padding-top: 22px;
    border-top: 1px solid var(--bl);
}

.v2-page .ptag {
    background: var(--of);
    border: 1px solid var(--bl);
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--t2);
}

.v2-page .shrow {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 16px 0;
    border-top: 1px solid var(--bl);
    border-bottom: 1px solid var(--bl);
    margin: 18px 0;
}

.v2-page .shbtn {
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid var(--bl);
    background: var(--wh);
    transition: all 150ms;
    font-family: 'Nunito', sans-serif;
}

.v2-page .shbtn:hover {
    border-color: var(--cr);
    color: var(--cr);
}

/* Sidebar widgets */
.v2-page .sbw {
    background: var(--wh);
    border-radius: 13px;
    border: 1px solid var(--bl);
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.v2-page .sbw h3 {
    font-size: 14px;
    font-weight: 800;
    color: var(--t1);
    margin-bottom: 12px;
}

.v2-page .tocl {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--t2);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: all 150ms;
    text-decoration: none;
}

.v2-page .tocl:hover,
.v2-page .tocl.on {
    background: var(--crt);
    color: var(--cr);
    border-left-color: var(--cr);
}

.v2-page .ctsb {
    background: var(--cr);
    border-radius: 13px;
    padding: 20px;
    text-align: center;
}

.v2-page .ctsb h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--wh);
    margin-bottom: 8px;
}

.v2-page .ctsb p {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 14px;
    line-height: 1.5;
}

.v2-page .ctsb a {
    display: block;
    background: var(--wh);
    color: var(--cr);
    border-radius: 9999px;
    padding: 9px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.v2-page .rg3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.v2-page .rrec {
    background: var(--wh);
    border-radius: 13px;
    border: 1px solid var(--bl);
    overflow: hidden;
    cursor: pointer;
    transition: transform 200ms;
}

.v2-page .rrec:hover { transform: translateY(-2px); }

.v2-page .rreci {
    /* Block flow so the box grows to the image's height — the thumbnail never
       overflows onto the title. min-height is a placeholder for posts with no
       thumbnail (the inline bg color fills it). */
    min-height: 90px;
}

.v2-page .rreci img {
    display: block;
    width: 100%;
    height: auto; /* full image, natural ratio — no crop, no overflow */
}

.v2-page .rrecb { padding: 12px; }

.v2-page .rrecb h4 {
    font-size: 13px;
    font-weight: 800;
    color: var(--t1);
    line-height: 1.3;
    margin-bottom: 3px;
}

.v2-page .rrecb p {
    font-size: 10px;
    font-weight: 600;
    color: var(--tm);
}

/* ── PROGRESS BAR ── */
.v2-page .pgb {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bl);
    pointer-events: none;
    z-index: 199;
}

.v2-page .pgbf {
    height: 100%;
    background: var(--cr);
    width: 0%;
    transition: width 50ms linear;
}

/* ── FOOTER ── */
.v2-page footer {
    background: var(--ch);
    padding: 44px 64px 26px;
}

.v2-page .fgr {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 44px;
    margin-bottom: 32px;
}

.v2-page .fbr p {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.65;
    max-width: 200px;
    margin-top: 9px;
}

.v2-page .fsoc {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.v2-page .fsoc a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: all 150ms;
    font-size: 14px;
}

.v2-page .fsoc a:hover {
    color: #ffffff;
    border-color: #ffffff;
}

.v2-page .flt {
    font-size: 16px;
    font-weight: 800;
    color: var(--cr);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.v2-page .flt-logo {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    object-fit: contain;
    vertical-align: middle;
}

.v2-page .fcol h4 {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 12px;
}

.v2-page .fcol a {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    margin-bottom: 8px;
    cursor: pointer;
    transition: color 150ms;
}

.v2-page .fcol a:hover { color: var(--wh); }

.v2-page .fbot {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
}

/* ── HAMBURGER BUTTON ── */
.v2-page .nav-ham {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    flex-direction: column;
    gap: 5px;
}

.v2-page .nav-ham span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--t1);
    border-radius: 2px;
    transition: transform 200ms, opacity 200ms;
}

/* ── MOBILE NAV OVERLAY ── */
.v2-page .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--wh);
    flex-direction: column;
    padding: 0 24px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.v2-page .nav-overlay.open { display: flex; }

.v2-page .nav-overlay-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--bl);
    margin-bottom: 8px;
}

.v2-page .nav-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--t1);
    padding: 4px 8px;
    line-height: 1;
}

.v2-page .nav-mob-links {
    list-style: none;
    flex: 1;
}

.v2-page .nav-mob-links > li > a,
.v2-page .nav-acc-btn {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--t1);
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    border-bottom: 1px solid var(--bl);
    text-decoration: none;
}

.v2-page .nav-mob-links > li > a.act,
.v2-page .nav-acc-btn.act { color: var(--cr); }

.v2-page .nav-arr {
    float: right;
    transition: transform 250ms;
}

.v2-page .nav-acc.open .nav-arr { transform: rotate(180deg); }

.v2-page .nav-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
}

.v2-page .nav-acc.open .nav-acc-panel { max-height: 500px; }

.v2-page .nav-acc-panel a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--t2);
    text-decoration: none;
    border-bottom: 1px solid var(--bl);
}

.v2-page .nav-acc-panel a:last-child { border-bottom: none; }

.v2-page .nav-acc-panel a:hover { color: var(--cr); }

.v2-page .nav-mob-cta {
    display: block;
    background: var(--cr);
    color: var(--wh);
    border-radius: 9999px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    margin-top: 16px;
    box-shadow: 0 4px 14px rgba(232, 23, 93, 0.3);
}

/* ── RESPONSIVE: TABLET (≤1024px) ── */
@media (max-width: 1024px) {
    .v2-page .sec { padding: 60px 32px; }
    .v2-page nav { padding: 0 24px; }
    .v2-page .tb { padding: 18px 32px; }
    .v2-page .cta-dk { padding: 64px 32px; }
    .v2-page .h2c { padding: 60px 32px; }
    .v2-page .sol { padding: 56px 32px; }
    .v2-page .rs { padding: 56px 32px; }
    .v2-page footer { padding: 36px 32px 22px; }

    .v2-page .rg { grid-template-columns: repeat(2, 1fr); }
    .v2-page .fgr { grid-template-columns: repeat(3, 1fr); gap: 28px; }

    .v2-page .rev { min-width: 360px; }
    .v2-page .dos { min-width: 280px; }

    .v2-page .nlf { flex-wrap: wrap; }
    .v2-page .nlf input { min-width: 100%; }
}

/* ── RESPONSIVE: MOBILE (≤768px) ── */
@media (max-width: 768px) {
    .v2-page nav { padding: 0 16px; }
    .v2-page nav .nl { display: none; }
    .v2-page nav .nav-cta { display: none; }
    .v2-page .nav-ham { display: flex; }

    .v2-page .sec { padding: 40px 20px; }
    .v2-page .tb { padding: 14px 20px; }
    .v2-page .tbi { gap: 16px; }
    .v2-page .tbdiv { display: none; }
    .v2-page .cta-dk { padding: 48px 20px; }
    .v2-page .h2c { padding: 40px 20px; }
    .v2-page .sol { padding: 40px 20px; }
    .v2-page .rs { padding: 40px 20px; }
    .v2-page footer { padding: 32px 20px 18px; }

    .v2-page .h1 { font-size: 28px; letter-spacing: -0.3px; }
    .v2-page .sub { font-size: 15px; margin-bottom: 28px; max-width: 100%; }
    .v2-page .h2c h1 { font-size: 32px; }
    .v2-page .cta-di h2 { font-size: 30px; }
    .v2-page .cta-di p { font-size: 15px; }

    .v2-page .br { padding: 12px 24px; font-size: 14px; }
    .v2-page .bo { padding: 10px 22px; font-size: 14px; }
    .v2-page .bg { padding: 10px 20px; font-size: 14px; }

    .v2-page .h2ci { grid-template-columns: 1fr; gap: 32px; }
    .v2-page .soli { grid-template-columns: 1fr; gap: 32px; }
    .v2-page .cg { grid-template-columns: 1fr; }
    .v2-page .fg { grid-template-columns: 1fr; }
    .v2-page .rg { grid-template-columns: repeat(2, 1fr); }

    .v2-page .fgr { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .v2-page .fbot { flex-direction: column; gap: 8px; text-align: center; }

    .v2-page .rev { min-width: 0; width: 100%; }
    .v2-page .dos { min-width: 0; width: 100%; }
    .v2-page .hc { min-width: 0; width: 100%; }

    .v2-page .ct { gap: 12px; }
    .v2-page .cc-btns { margin-top: 16px; }

    .v2-page .cw {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .v2-page .cw .ct {
        transition: none;
    }
    .v2-page .cw .rev,
    .v2-page .cw .dos,
    .v2-page .cw .hc {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 85vw;
    }
    .v2-page .cc-btns .cb { display: none; }

    .v2-page .mq-t { animation-duration: 18s; }

    .v2-page .ri h2 { font-size: 28px; }

    .v2-page .sph { padding: 48px 20px; }
    .v2-page .sphi { grid-template-columns: 1fr; gap: 28px; }
    .v2-page .sph h1 { font-size: 32px; }

    .v2-page .pgr {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 24px 20px 40px;
    }

    .v2-page .s3g { grid-template-columns: repeat(2, 1fr); }
    .v2-page .rg3 { grid-template-columns: 1fr; }

    .v2-page .bfsrch { padding: 12px 20px; top: 64px; }
    .v2-page .nltr { padding: 32px 20px; }
    .v2-page .blg { grid-template-columns: repeat(2, 1fr); }
    .v2-page .bfc { grid-template-columns: 1fr; }
    .v2-page .bfi { min-height: 180px; }
    .v2-page .bfb { padding: 24px 20px; }
    .v2-page .bfb h2 { font-size: 22px; }

    .v2-page .post-hero { padding: 40px 20px; }
    .v2-page .post-hero h1 { font-size: 28px; }

    .v2-page .csg { grid-template-columns: 1fr; }

    .v2-page .ptr { flex-wrap: wrap; }
    .v2-page .pt { min-width: 45%; }
    .v2-page .pcg { grid-template-columns: 1fr; }
    .v2-page .pcf { grid-template-columns: 1fr; }
}

/* ── RESPONSIVE: SMALL MOBILE (≤480px) ── */
@media (max-width: 480px) {
    .v2-page .sec { padding: 32px 16px; }
    .v2-page .h1 { font-size: 24px; }
    .v2-page .h2c h1 { font-size: 28px; }
    .v2-page .cta-di h2 { font-size: 26px; }

    .v2-page .rg { grid-template-columns: 1fr; }
    .v2-page .fgr { grid-template-columns: 1fr; gap: 20px; }
    .v2-page .blg { grid-template-columns: 1fr; }
    .v2-page .s3g { grid-template-columns: 1fr; }

    .v2-page .tbi { flex-direction: column; gap: 8px; }
    .v2-page .frb { flex-direction: column; gap: 14px; text-align: center; }
    .v2-page .ffts { justify-content: center; }

    .v2-page .sph h1 { font-size: 26px; }
    .v2-page .post-hero h1 { font-size: 24px; }
    .v2-page .ri h2 { font-size: 24px; }

    .v2-page .cw .rev,
    .v2-page .cw .dos,
    .v2-page .cw .hc { width: 90vw; }
}