/* Voyager page: the three boxes under the card (compare, questions, close).
   Kept in its own file so it never collides with the card or perk-list work in
   voyager.html. Uses the page's own tokens from voyager.html :root. */

/* The card sits a little lower than voyager.html sets it, with more air
   under the nav. main. outranks the page's own .voyager-stage rule. */
main.voyager-stage {
    padding-top: clamp(140px, 21vh, 230px);
}

/* Voyager's sky gradient, sized for a button: the head of the table's
   Voyager column. Used by the selected question tab. */
:root {
    --vy-sky: linear-gradient(180deg, #eef6ff 0%, #c6ddf6 52%, #a3c5ec 100%);
    --vy-sky-ink: #13263f;
}

/* ---------- The ground: the hero's bottom edge, carried on forever ----------
   The ::before overlaps the bottom of the hero by --vy-fade and fades in over
   it, so the image dissolves into the ground below it.

   The ground is --vy-ground, built by cometfare-voyager-sections.js: it reads
   the bottom strip of the part of the hero actually on screen (cover crop
   included), averages it in linear light into a smooth left-to-right ramp, and
   eases that toward the strip's mean colour further down. Purely horizontal,
   so nothing streaks.

   Fallback, until the script has run: the old stretch, the image's bottom ~10%
   pulled to the full height and blurred. Stretching drags every bottom pixel
   into a vertical streak ("paintfall"), which is why it is only a fallback. */
.vy-sections {
    /* How far the blur reaches up over the hero, and how far the first box
       rises into it. --vy-pull is set by cometfare-voyager-sections.js from the
       real gap under the card, so the box never touches it. */
    --vy-fade: clamp(260px, 42vh, 480px);
    --vy-pull: 0px;
    margin-top: calc(var(--vy-pull) * -1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Between the boxes, above the footer, and (via --vy-pull) under the card:
       all the page's side gutter, so every gap around a box is the same. */
    gap: var(--gutter);
    padding: 0 var(--gutter) var(--gutter);
    /* Keep the blur from spilling sideways (and widening the page), but let it
       reach up over the hero. clip, unlike hidden, allows that mix. */
    overflow-x: clip;
    overflow-y: visible;
}

.vy-sections::before {
    content: "";
    position: absolute;
    top: calc((var(--vy-fade) - var(--vy-pull)) * -1);
    /* Wider than the page so the blur's soft sides sit outside the clip. */
    right: -160px;
    bottom: 0;
    left: -160px;
    z-index: 0;
    pointer-events: none;
    background: url("/ImageAssortment/Backgrounds/MainHighQ/GrossyHerosecondarytest56.webp") center bottom / 100% 1000% no-repeat;
    filter: blur(70px) saturate(1.05);
    /* An eased ramp: the blur creeps in slowly, so the image dissolves
       rather than stopping on an edge. */
    --vy-ramp: linear-gradient(to bottom,
        transparent 0,
        rgba(0, 0, 0, 0.06) calc(var(--vy-fade) * 0.2),
        rgba(0, 0, 0, 0.22) calc(var(--vy-fade) * 0.4),
        rgba(0, 0, 0, 0.5) calc(var(--vy-fade) * 0.6),
        rgba(0, 0, 0, 0.8) calc(var(--vy-fade) * 0.8),
        #000 var(--vy-fade));
    -webkit-mask-image: var(--vy-ramp);
    mask-image: var(--vy-ramp);
}

.vy-sections.has-ground::before {
    background: var(--vy-ground);
    filter: none;
}

/* ---------- The boxes: the card's width, radius and shadow, one solid fill ---------- */
.vy-box {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: var(--card-w);
    padding: calc(var(--pad) * 1.4);
    border-radius: var(--r-card);
    background: var(--card-bg);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
    color: var(--ink);
}

.vy-box h2 {
    margin: 0;
    font-family: "Fredoka", "Quicksand", sans-serif;
    font-size: calc(var(--fs-display) * 0.95);
    font-weight: 600;
    line-height: 1.05;
}

/* The white button, the same plate as Get Voyager in the product view. */
.vy-get {
    appearance: none;
    display: inline-block;
    border: 0;
    border-radius: var(--r-control);
    padding: 13px 22px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--btn-primary-ink);
    background: var(--btn-primary);
    text-decoration: none;
    cursor: pointer;
}
.vy-get:hover { opacity: 0.86; }
.vy-get[hidden] { display: none; }

/* ---------- 1. Compare ---------- */
.vy-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
}

.vy-table th,
.vy-table td {
    padding: 15px 16px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
}

.vy-table th[scope="row"],
.vy-table .vy-t-feature,
.vy-table .vy-t-group th {
    text-align: left;
}

/* Each striped row is rounded on its left end; the Voyager tile closes the right. */
.vy-table tbody th[scope="row"] { border-radius: 10px 0 0 10px; }

.vy-table tbody th[scope="row"] { color: var(--ink); font-weight: 600; }
.vy-table tbody td { color: var(--ink-2); }
.vy-table td.vy-t-voy {
    color: #ffffff;
    font-weight: 700;
    /* Keeps the white readable where the column is still light blue. */
    text-shadow: 0 1px 3px rgba(12, 28, 56, 0.45);
}

/* Rows are told apart by a faint fill on every other one, never a line. */
.vy-table tbody tr:not(.vy-t-group):nth-child(even) th,
.vy-table tbody tr:not(.vy-t-group):nth-child(even) td:not(.vy-t-voy) {
    background: rgba(255, 255, 255, 0.025);
}
/* Each chapter's block rounds its bottom corner, so a striped row that ends a
   chapter would stop short of it and leave a dark notch. Fill ONLY the sliver
   outside the curve, so nothing is ever drawn over the blue itself. */
.vy-table tbody tr.vy-t-end:nth-child(even) td.vy-t-voy {
    background: radial-gradient(circle at 100% 0, transparent calc(var(--vy-col-r) - 0.5px), rgba(255, 255, 255, 0.025) var(--vy-col-r)) left bottom / var(--vy-col-r) var(--vy-col-r) no-repeat;
}

/* The infinity sign that stands in for "no limit". */
.vy-inf {
    font-size: 1.3em;
    line-height: 1;
    vertical-align: -0.08em;
}

.vy-table .vy-t-feature { width: 46%; vertical-align: bottom; padding-bottom: 18px; }
.vy-compare h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-3);
}
.vy-table thead .vy-t-free .vy-t-plan { color: var(--ink-2); }
.vy-table .vy-t-free,
.vy-table thead .vy-t-voy { width: 27%; vertical-align: bottom; padding-bottom: 18px; }

.vy-t-plan {
    display: block;
    margin-bottom: 10px;
    font-family: "Fredoka", "Quicksand", sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
}

/* The Voyager column: one continuous layer in the hero's own sky colours,
   a pale morning blue at the head sinking into a deep evening blue down the
   rows, so it belongs to the sky above it. Painted once behind the table so
   it never repeats per cell. */
.vy-table-wrap {
    --vy-col: 27%;
    /* Matched by eye to the card's 32px corner around it. The gap between them
       is wider than that radius, so a strictly concentric corner would come out
       square; 17px is what reads in step. */
    --vy-col-r: 17px;
    --vy-col-paint: linear-gradient(180deg,
        #eef6ff 0,
        #c6ddf6 5%,
        #8fb5e0 14%,
        #6792c7 30%,
        #4c78b0 52%,
        rgba(44, 82, 136, 0.9) 76%,
        rgba(32, 62, 110, 0.78) 100%);
    position: relative;
}
.vy-table-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--vy-col);
    border-radius: var(--vy-col-r);
    background: var(--vy-col-paint);
    pointer-events: none;
}

/* One block per chapter, so a new chapter reads as a new group at a glance.
   The gradient is NOT restarted per block: every block paints the same
   full-height ramp, shifted up by its own offset, so the three read as windows
   onto one continuous column. Placed by cometfare-voyager-sections.js; until
   then the single ::before column above stands in. */
.vy-table-wrap.has-blocks::before { display: none; }
.vy-col-block {
    position: absolute;
    right: 0;
    width: var(--vy-col);
    border-radius: var(--vy-col-r);
    background: var(--vy-col-paint);
    background-size: 100% var(--vy-col-h, 100%);
    background-position: 0 calc(var(--vy-block-top, 0px) * -1);
    background-repeat: no-repeat;
    pointer-events: none;
}
.vy-table { position: relative; z-index: 1; }
.vy-table thead .vy-t-voy { padding-top: 22px; }
/* The column's own Get Voyager stays on one line: as the column narrows the
   label shrinks a little and keeps its breathing room, instead of wrapping. */
.vy-table thead .vy-get {
    white-space: nowrap;
    font-size: clamp(0.8rem, 1.25vw, 0.95rem);
    padding: 12px clamp(14px, 2vw, 22px);
}
.vy-table thead .vy-t-voy .vy-t-plan { color: #13263f; }

/* Group titles: big and heavy, in Quicksand, so the table reads as
   three chapters at a glance. Quicksand tops out at 700 and is far narrower
   than the Unbounded these replaced, so the mass comes from size plus a
   stroke in the text's own colour, painted under the fill. */
.vy-t-group th {
    padding: 58px 14px 12px 0;
    font-family: "Quicksand", sans-serif;
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    -webkit-text-stroke: 0.045em currentColor;
    paint-order: stroke fill;
}
.vy-table tbody tr.vy-t-group:first-child th { padding-top: 14px; }

/* Each chapter opens on its title as plain heavy type. The split column and
   the open space above it do the separating, so the title needs no plate. */
.vy-t-banner {
    display: inline-block;
    padding: 0 0 0 16px;
}

/* Ticks and dashes. */
.vy-table [data-yes]::before,
.vy-table [data-no]::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: var(--vy-icon) center / contain no-repeat;
    mask: var(--vy-icon) center / contain no-repeat;
}
.vy-table [data-yes] {
    --vy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    color: var(--ink);
}
.vy-table [data-no] {
    --vy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
    color: var(--ink-3);
}

/* The (i) beside a row label. Its explanation floats above it on hover or
   keyboard focus, and shows instantly. */
.vy-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-left: 6px;
    /* centred on the label's lowercase letters, not sat on its baseline */
    vertical-align: middle;
    margin-top: -0.2em;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 800;
    font-style: normal;
    cursor: help;
}
.vy-info::before { content: "i"; }
.vy-info:hover,
.vy-info:focus-visible { background: rgba(255, 255, 255, 0.24); color: var(--ink); outline: none; }

.vy-info-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 5;
    width: max-content;
    max-width: 280px;
    transform: translateX(-50%);
    padding: 12px 14px;
    border-radius: var(--r-control);
    background: #24262b;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    visibility: hidden;
}
.vy-info:hover .vy-info-tip,
.vy-info:focus-visible .vy-info-tip { visibility: visible; }

/* ---------- 2. Questions ---------- */
.vy-faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 18px 0 16px;
}

.vy-faq-tabs button {
    appearance: none;
    border: 0;
    border-radius: var(--r-control);
    padding: 10px 18px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-2);
    background: transparent;
    cursor: pointer;
}
.vy-faq-tabs button:hover { color: var(--ink); }
.vy-faq-tabs button[aria-selected="true"] {
    color: var(--vy-sky-ink);
    background: var(--vy-sky);
}

.vy-faq-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vy-faq-list[hidden] { display: none; }

.vy-faq-list details {
    border-radius: var(--r-tile);
    background: rgba(255, 255, 255, 0.04);
}
.vy-faq-list details[open] { background: rgba(255, 255, 255, 0.07); }

.vy-faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.vy-faq-list summary::-webkit-details-marker { display: none; }

/* Plus when closed, minus when open. Swaps instantly. */
.vy-faq-list summary::after {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--vy-plus) center / contain no-repeat;
    mask: var(--vy-plus) center / contain no-repeat;
    --vy-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.vy-faq-list details[open] summary::after {
    --vy-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.vy-faq-list details p {
    margin: 0;
    padding: 0 20px 20px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.vy-faq-list details a { color: var(--ink); }

/* ---------- 3. Close ---------- */
.vy-close {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-top: calc(var(--pad) * 2.2);
    padding-bottom: calc(var(--pad) * 2.2);
}

.vy-close-mark {
    width: 30px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.vy-close p {
    margin: 0 0 8px;
    font-size: 1rem;
    color: var(--ink-2);
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
    .vy-box { padding: var(--pad) 18px; }
    .vy-table { font-size: 0.85rem; }
    .vy-table th,
    .vy-table td { padding: 11px 8px; }
    .vy-table .vy-t-feature { width: 40%; }
    .vy-table .vy-t-free,
    .vy-table thead .vy-t-voy { width: 30%; }
    .vy-table-wrap { --vy-col: 30%; }
    .vy-t-banner { padding: 14px 14px; }
    .vy-get { padding: 10px 12px; }
}