/* ==== Theme (Drawize blue + clean cards) ==== */
:root {
    --brand: #1eb9ec;
    --brand-2: #12a7d6;
    --ink: #0f2a35;
    --ink-2: #4c6a77;
    --bg: #f7fbfd;
    --card: #ffffff;
    --line: #e3eef2;
    --ok: #1db574;
    --danger: #e05656;
    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 8px 24px rgba(7, 50, 72, .08);
    --maxw: 1120px;
    --hdr: 72px;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .01em;
    position: relative;
}

/* Fixed background gradient (non-repeating) */
.bg-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(1200px 900px at 12% -10%, rgba(30,185,236,.55), transparent 55%), radial-gradient(900px 800px at 95% -15%, rgba(18,167,214,.45), transparent 52%), linear-gradient(180deg, #e9faff 0%, #dcf5ff 18%, #e9fbff 42%, #f7fbfd 68%, #ffffff 100%);
    background-repeat: no-repeat;
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

.container {
    width: min(100% - 32px, var(--maxw));
    margin-inline: auto
}

section {
    scroll-margin-top: calc(var(--hdr) + 12px)
}

/* Header */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(140%) blur(8px);
    background: rgba(255,255,255,.78);
    border-bottom: 1px solid var(--line);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: .01em
}

.brand-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: radial-gradient(110% 90% at 30% 20%, #fff, #e7faff 34%, #9fe7f8 66%, var(--brand));
    box-shadow: 0 6px 18px rgba(30,185,236,.35), inset 0 2px 8px rgba(255,255,255,.6);
}

.nav-links {
    display: none;
    gap: 10px;
    align-items: center
}

    .nav-links a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 999px;
        font-weight: 700;
        color: var(--ink)
    }

.nav-cta {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #043142;
    border: 1px solid rgba(4,49,66,.08);
    box-shadow: var(--shadow)
}

@media (min-width: 900px) {
    .nav-links {
        display: flex
    }
}

/* Hero */
.hero {
    padding: clamp(44px, 7vw, 96px) 0 36px;
    text-align: center
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-weight: 700
}

    .eyebrow .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ok);
        box-shadow: 0 0 16px var(--ok)
    }

.hero h1 {
    font-size: clamp(28px, 4.2vw, 52px);
    line-height: 1.06;
    margin: 16px auto 10px;
    max-width: 22ch
}

.hero p {
    color: var(--ink-2);
    font-size: clamp(16px, 2vw, 20px);
    margin: 0 auto;
    max-width: 70ch
}

.hero-cta {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 800;
    border: 1px solid transparent;
    cursor: pointer;
    transition: .2s transform ease, .25s box-shadow ease, .2s background ease, .2s border-color ease
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: var(--shadow);
    color: #043142
}

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

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

.subtext {
    color: var(--ink-2);
    font-size: 14px;
    margin-top: 12px
}

/* Controls (tabs + billing) */
.controls-bar {
    margin: 22px auto 0;
    padding: 12px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: var(--shadow)
}

.tabs {
    display: flex;
    background: #f2fbff;
    border: 1px solid var(--line);
    padding: 6px;
    border-radius: 999px;
    gap: 6px
}

.tab-btn {
    background: transparent;
    color: var(--ink-2);
    font-weight: 800;
    border: 0;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer
}

    .tab-btn[aria-selected="true"] {
        color: #043142;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        box-shadow: var(--shadow)
    }

.billing {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-2);
    font-weight: 700
}

.switch {
    --h: 28px;
    --w: 50px;
    position: relative;
    width: var(--w);
    height: var(--h);
    background: #e6f7fd;
    border-radius: 999px;
    border: 1px solid var(--line);
    transition: .2s ease;
    cursor: pointer
}

    .switch input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer
    }

.knob {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: translate(0,-50%);
    background: #fff;
    transition: .2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.15)
}

.switch input:checked + .knob {
    transform: translate(calc(50px - 26px), -50%)
}

.save-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #043142;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #c8f3ff, var(--brand));
    border: 1px solid rgba(4,49,66,.08)
}

/* Added billing pill visuals */
.bill-pill {
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.02em;
    background:#e6f7fd;
    color:var(--ink-2);
    border:1px solid var(--line);
    line-height:1;
    white-space:nowrap;
}
.bill-pill.active {
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#043142;
    box-shadow:var(--shadow);
    border-color:rgba(4,49,66,.12);
}

/* Plans */
.plans {
    padding: 22px 0 8px
}

.plan-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    margin-top: 18px
}

@media (min-width:700px) {
    .plan-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1050px) {
    .plan-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.plan-grid.has2 {
    max-width: 920px;
    margin-inline: auto
}

@media (min-width:1050px) {
    .plan-grid.has2 {
        grid-template-columns: repeat(2, 1fr)
    }
}

.card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column
}

    .card .head {
        padding: 18px 18px 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px
    }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #043142;
    background: linear-gradient(135deg, var(--brand), #b8f6ff);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(4,49,66,.12)
}

.card h3 {
    margin: 10px 18px 6px;
    font-size: 22px
}

.tagline {
    margin: 0 18px;
    color: var(--ink-2);
    min-height: 44px
}

.price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 18px 12px;
    flex-wrap: wrap
}

    .price .amount {
        font-size: 38px;
        font-weight: 800;
        letter-spacing: .01em
    }

    .price small {
        color: var(--ink-2)
    }

.feat {
    padding: 0 18px 10px;
    margin: 0;
    list-style: none;
    display: grid;
    gap: 10px
}

    .feat li {
        display: flex;
        align-items: flex-start;
        gap: 10px
    }

    .feat svg {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin-top: 2px;
        color: var(--ok)
    }

.cta-zone {
    margin: 16px 18px 22px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap
}

.note {
    color: var(--ink-2);
    font-size: 13px
}

.foot-hint {
    padding: 10px 18px 16px;
    border-top: 1px dashed var(--line);
    color: var(--ink-2);
    font-size: 12px
}

.muted .feat svg {
    color: #94aeb9
}

.muted {
    filter: saturate(.9);
    opacity: .9
}

.hidden {
    display: none !important
}

/* Segmented control (Event tiers) */
.seg {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    background: #f2fbff;
    border: 1px solid var(--line);
    margin: 0 18px 8px;
    align-self: flex-start
}

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

    .seg label {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        border-radius: 10px;
        font-weight: 800;
        cursor: pointer;
        color: var(--ink-2)
    }

    .seg input:checked + label {
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        color: #043142;
        box-shadow: var(--shadow)
    }

/* Comparison / Use-cases / FAQ */
.compare {
    padding: 38px 0
}

.table {
    width: 100%;
    overflow: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow)
}

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

thead th {
    text-align: left;
    font-size: 14px;
    color: var(--ink-2);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line)
}

tbody td, tbody th {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line)
}

tbody tr:hover {
    background: #f7fcff
}

.check {
    color: var(--ok);
    font-weight: 800
}

.cross {
    color: var(--danger);
    font-weight: 800
}

.two-col {
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr;
    align-items: center
}

@media (min-width:900px) {
    .two-col {
        grid-template-columns: 1.15fr .85fr
    }
}

.blob {
    border-radius: 22px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 20px;
    min-height: 220px;
    display: grid;
    gap: 12px;
    box-shadow: var(--shadow)
}

.steps {
    display: grid;
    gap: 12px
}

.step {
    display: flex;
    gap: 12px;
    align-items: flex-start
}

    .step .n {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        color: #043142
    }

.faq {
    padding: 40px 0
}

details {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    box-shadow: var(--shadow)
}

    details + details {
        margin-top: 12px
    }

summary {
    cursor: pointer;
    font-weight: 800
}

details p {
    color: var(--ink-2);
    margin: 10px 0 0
}

footer {
    padding: 30px 0 60px;
    color: var(--ink-2);
    border-top: 1px solid var(--line)
}

/* Motion helpers */
@media (prefers-reduced-motion:no-preference) {
    [data-anim] {
        opacity: 0;
        transform: translateY(10px);
        transition: .6s ease
    }

        [data-anim].in {
            opacity: 1;
            transform: none
        }
}


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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer
}

.btn-primary {
    background: linear-gradient(135deg,#1eb9ec,#12a7d6);
    color: #043142
}

.btn-ghost {
    border: 1px solid #e3eef2;
    background: #fff;
    color: #0f2a35
}

.mini {
    font-size: 13px
}

#siteLogo {
    width: auto;
    height: 50px;
}

.brand span {
    color: #eda52c;
    font-size: 30px;

    border-bottom: 3px solid #11dbfc;
}

/* === Responsive tweaks for plan controls on small screens === */
@media (max-width: 640px) {
    .controls-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px 14px;
        gap: 12px;
    }
    .controls-bar .tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .controls-bar .tabs::-webkit-scrollbar { display: none; }
    .controls-bar .tab-btn {
        font-size: 14px;
        padding: 8px 12px;
        white-space: nowrap;
        flex: 1 1 auto;
    }
    .controls-bar .billing {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 6px;
        font-size: 12px;
    }
    .controls-bar #billHelp { font-size: 12px; flex:1 1 100%; }
    .controls-bar .save-pill { font-size: 11px; padding: 4px 8px; }
    .controls-bar .mini { font-size: 11px; }
}

.billing.hide-cycle .switch,
.billing.hide-cycle #billHelp { display:none !important; }
.billing.hide-cycle > .mini { display:none !important; }
.billing.hide-cycle { gap:8px; }


/* Status / Thank You page enhancements */
.status-page { padding:56px 0 72px; }
.status-wrap { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:40px; }
.status-block { text-align:center; background:var(--card); border:1px solid var(--line); padding:40px 36px 44px; border-radius:24px; box-shadow:0 4px 16px rgba(7,50,72,.05); position:relative; }
.status-title { margin:12px 0 8px; font-size:28px; font-weight:800; letter-spacing:-.5px; }
.status-text { margin:0 auto; font-size:16px; line-height:1.55; color:var(--ink-2); max-width:560px; }
.status-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.status-icon { width:72px; height:72px; border-radius:20px; background:#e6f7fd; display:flex; align-items:center; justify-content:center; margin:0 auto; position:relative; }
.status-icon.spin { border:6px solid rgba(30,185,236,.15); border-top-color:var(--brand); background:transparent; animation:spin 1s linear infinite; width:72px; height:72px; }
.status-icon.ok { background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; }
.status-icon.warn { background:#fff3e0; color:#d78200; border:1px solid #f8d7a6; }

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

/* Password card */
.pw-card { margin-top:22px; text-align:left; border:1px solid var(--line); background:#fff; border-radius:18px; padding:20px 22px 24px; box-shadow:0 4px 14px rgba(7,50,72,.06); }
.pw-input { width:100%; padding:12px 14px; margin:0 0 10px; font-size:14px; border:1px solid var(--line); border-radius:10px; background:#f9fcfe; }
.pw-input:focus { outline:2px solid rgba(30,185,236,.45); outline-offset:1px; background:#fff; }
.pw-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }



@media (max-width:640px){
  .status-block { padding:32px 22px 40px; }
  .status-title { font-size:24px; }
  .status-icon { width:64px; height:64px; }
  .status-icon.spin { width:64px; height:64px; border-width:5px; }
}
/* Bundle links styling */
#bundle-links { border:1px solid var(--line); background:#fff; padding:18px 20px 20px; border-radius:16px; box-shadow:0 2px 8px rgba(7,50,72,.04); }
.bundle-link-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:6px; font-size:14px; }
.bundle-link-row a { font-weight:600; word-break:break-all; }
.bundle-link-row .lbl { font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; }
.btn.btn-ghost.btn-xs { padding:4px 10px; font-size:12px; line-height:1.2; }

.two-col.equalize { align-items: stretch; }
.two-col.equalize .blob { height: 100%; display: flex; flex-direction: column; }

/* Prominent Play Free button */
.btn-play-big {
    font-size: 20px;
    line-height: 1.15;
    padding: 20px 36px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg,#ffde72,#ffc53d 32%,#ffae00);
    color: #492c00;
    box-shadow: 0 8px 24px -4px rgba(255,175,0,.45), 0 4px 14px rgba(0,0,0,.08);
    position: relative;
    font-weight: 800;
    letter-spacing: .5px;
}
.btn-play-big:hover { transform: translateY(-2px); }
.btn-play-big:active { transform: translateY(0); }
.btn-play-big .sub {
    display: block;
    font-size: 12px;
    font-weight: 600;
    opacity: .95;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 6px;
}
.btn-play-big .sub.ad-supported { color:#b54700; text-shadow:0 1px 0 rgba(255,255,255,.4); }

/* Hero CTA grouping adjustments */
.hero-cta { flex-direction: column; align-items: center; }
.cta-primary-free { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cta-secondary-premium { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.or-label { font-size:11px; font-weight:800; letter-spacing:.18em; color:var(--ink-2); opacity:.8; }

@media (min-width:700px){
  .cta-secondary-premium { flex-direction:row; }
}
@media (max-width:640px){
  .btn-play-big { width:100%; font-size:18px; padding:18px 28px 16px; }
}