/* ==========================================================================
   Bourbon 26 — product page
   Dark, Apple-inspired theme. Scoped to this page only: this file is loaded
   through $additional_css, so the global overrides below never leak to the
   rest of the site.
   ========================================================================== */

.b26 {
    --bg:          #000000;
    --bg-raised:   #0b0b0d;
    --bg-panel:    #141416;
    --surface:     rgba(255, 255, 255, 0.045);
    --surface-2:   rgba(255, 255, 255, 0.075);
    --border:      rgba(255, 255, 255, 0.11);
    --border-soft: rgba(255, 255, 255, 0.06);

    --text:        #f5f5f7;
    --dim:         #a1a1a8;
    --dimmer:      #8a8a92;   /* lightened: #75757c fell to 4.02:1 on panels */

    --amber:       #e8763c;
    --amber-lit:   #f5a15c;
    --amber-deep:  #8b4513;
    --blue:        #0a84ff;
    --blue-deep:   #0060df;
    --green:       #32d74b;
    --red:         #ff453a;

    --radius:      22px;
    --radius-sm:   14px;
    --ease:        cubic-bezier(0.16, 1, 0.3, 1);

    --shell: min(1180px, 100% - 48px);
}

/* --- page shell ---------------------------------------------------------- */

body:has(.b26) {
    background: var(--bg, #000);
}

.b26 {
    background: #000;
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.b26 ::selection {
    background: var(--amber);
    color: #fff;
}

.b26-shell {
    width: var(--shell);
    margin-inline: auto;
}

.b26 h1,
.b26 h2,
.b26 h3,
.b26 h4 {
    letter-spacing: -0.025em;
    line-height: 1.06;
    font-weight: 700;
    color: var(--text);
}

.b26 p {
    color: var(--dim);
}

/* --- global chrome overrides (page-scoped) ------------------------------- */

/* !important is deliberate. The shared js/script.js on the server writes an
   inline white background onto .navbar while scrolling, and an inline style
   beats any stylesheet rule. This keeps the dark pages dark whether or not
   the newer class-based script.js has been deployed. */
body:has(.b26) .navbar {
    background: rgba(0, 0, 0, 0.62) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.4s var(--ease);
}

body:has(.b26) .navbar.is-scrolled {
    background: rgba(0, 0, 0, 0.82) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.6) !important;
}

body:has(.b26) .nav-logo,
body:has(.b26) .nav-link,
body:has(.b26) .logo-text {
    color: #f5f5f7;
}

body:has(.b26) .logo-credit {
    color: var(--dimmer);
}

body:has(.b26) .nav-link:hover {
    color: var(--amber-lit);
}

body:has(.b26) .hamburger .bar {
    background: #f5f5f7;
}

/* The shared mobile drawer is white in styles.css, which would put our
   near-white nav links on a white panel. Darken it for this page only. */
body:has(.b26) .nav-menu {
    background-color: rgba(10, 10, 12, 0.98);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

body:has(.b26) .footer {
    background: #000;
    border-top: 1px solid var(--border-soft);
}

/* Fallback for browsers without :has() — the page wrapper paints its own
   background, so only the fixed navbar needs the manual class from JS. */
.b26-dark-chrome .navbar {
    background: rgba(0, 0, 0, 0.62) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.b26-dark-chrome .nav-logo,
.b26-dark-chrome .nav-link,
.b26-dark-chrome .logo-text {
    color: #f5f5f7;
}

.b26-dark-chrome .nav-menu {
    background-color: rgba(10, 10, 12, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.b26-dark-chrome .navbar.is-scrolled {
    background: rgba(0, 0, 0, 0.82) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.6) !important;
}

.b26-dark-chrome .footer {
    background: #000;
}

/* --- shared atoms -------------------------------------------------------- */

.b26-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber-lit);
    margin-bottom: 18px;
}

.b26-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--amber));
}

.b26-section {
    position: relative;
    padding: clamp(80px, 11vw, 150px) 0;
}

.b26-section--tight {
    padding: clamp(56px, 7vw, 90px) 0;
}

.b26-section__head {
    max-width: 760px;
    margin-bottom: 60px;
}

.b26-section__head--center {
    margin-inline: auto;
    text-align: center;
}

.b26-section__head h2 {
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    margin-bottom: 20px;
}

.b26-section__head p {
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    line-height: 1.65;
}

.b26-gradient-text {
    background: linear-gradient(120deg, #fff 10%, var(--amber-lit) 55%, var(--amber) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* buttons */

.b26-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 980px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
                background 0.3s ease, border-color 0.3s ease;
}

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

.b26-btn--primary {
    background: linear-gradient(135deg, #ffc27a, var(--amber-lit) 45%, var(--amber));
    color: #2a1206;
    box-shadow: 0 10px 34px rgba(232, 118, 60, 0.36);
}

.b26-btn--primary:hover {
    box-shadow: 0 16px 46px rgba(232, 118, 60, 0.5);
}

.b26-btn--ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    backdrop-filter: blur(12px);
}

.b26-btn--ghost:hover {
    background: var(--surface-2);
    border-color: rgba(255, 255, 255, 0.24);
}

.b26-btn__sub {
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.72;
}

/* --- hero ---------------------------------------------------------------- */

.b26-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px 0 60px;
    overflow: hidden;
    isolation: isolate;
}

/* animated aurora field */
.b26-aurora {
    position: absolute;
    inset: -30% -10%;
    z-index: -2;
    filter: blur(90px);
    opacity: 0.75;
    pointer-events: none;
}

.b26-aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
    mix-blend-mode: screen;
    animation: b26-drift 22s ease-in-out infinite;
}

.b26-aurora span:nth-child(1) {
    width: 46vw; height: 46vw;
    top: 2%; left: 8%;
    background: radial-gradient(circle, rgba(232, 118, 60, 0.65), transparent 68%);
}

.b26-aurora span:nth-child(2) {
    width: 38vw; height: 38vw;
    top: 26%; right: 4%;
    background: radial-gradient(circle, rgba(10, 132, 255, 0.42), transparent 68%);
    animation-delay: -7s;
    animation-duration: 27s;
}

.b26-aurora span:nth-child(3) {
    width: 34vw; height: 34vw;
    bottom: 2%; left: 32%;
    background: radial-gradient(circle, rgba(245, 161, 92, 0.4), transparent 70%);
    animation-delay: -13s;
    animation-duration: 31s;
}

@keyframes b26-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(4%, -6%, 0) scale(1.12); }
    66%      { transform: translate3d(-5%, 4%, 0) scale(0.94); }
}

/* fine grid + vignette */
.b26-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px) 0 0 / 100% 62px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px) 0 0 / 62px 100%,
        radial-gradient(ellipse at 50% 42%, transparent 38%, #000 84%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
    pointer-events: none;
}

.b26-hero__inner {
    text-align: center;
    max-width: 900px;
    margin-inline: auto;
}

.b26-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 9px;
    border-radius: 980px;
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: blur(14px);
    font-size: 0.86rem;
    color: var(--dim);
    margin-bottom: 28px;
}

.b26-badge b {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 980px;
    background: linear-gradient(135deg, var(--amber-lit), var(--amber));
    color: #2a1206;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.b26-hero h1 {
    font-size: clamp(2.9rem, 8vw, 6.4rem);
    letter-spacing: -0.04em;
    margin-bottom: 26px;
}

.b26-hero h1 span {
    display: block;
}

.b26-hero__lead {
    font-size: clamp(1.1rem, 2.1vw, 1.5rem);
    line-height: 1.55;
    max-width: 660px;
    margin: 0 auto 40px;
    color: var(--dim);
}

.b26-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 18px;
}

.b26-hero__note {
    font-size: 0.9rem;
    color: var(--dimmer);
}

/* staged entrance */
.b26-rise {
    opacity: 0;
    transform: translateY(28px);
    animation: b26-rise-in 1s var(--ease) forwards;
}

.b26-rise[data-delay="1"] { animation-delay: 0.10s; }
.b26-rise[data-delay="2"] { animation-delay: 0.20s; }
.b26-rise[data-delay="3"] { animation-delay: 0.30s; }
.b26-rise[data-delay="4"] { animation-delay: 0.40s; }
.b26-rise[data-delay="5"] { animation-delay: 0.52s; }

@keyframes b26-rise-in {
    to { opacity: 1; transform: translateY(0); }
}

/* --- 3D floating app window ---------------------------------------------- */

.b26-stage {
    perspective: 1800px;
    perspective-origin: 50% 30%;
    margin-top: clamp(48px, 7vw, 86px);
}

.b26-window {
    position: relative;
    width: min(1080px, 100%);
    margin-inline: auto;
    border-radius: 16px;
    overflow: hidden;
    background: #141416;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.5),
        0 30px 70px rgba(0, 0, 0, 0.65),
        0 60px 140px rgba(232, 118, 60, 0.14);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 9deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
    will-change: transform;
}

.b26-window::after {
    /* moving specular sheen */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 32%,
        rgba(255, 255, 255, 0.09) 46%,
        transparent 60%);
    background-size: 260% 100%;
    animation: b26-sheen 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes b26-sheen {
    0%, 62% { background-position: 190% 0; }
    100%    { background-position: -60% 0; }
}

.b26-window__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(28, 28, 30, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.b26-window__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.b26-window__dot--r { background: #ff5f57; }
.b26-window__dot--y { background: #febc2e; }
.b26-window__dot--g { background: #28c840; }

.b26-window__title {
    margin-left: 12px;
    font-size: 0.8rem;
    color: var(--dimmer);
    font-weight: 500;
}

.b26-window img {
    display: block;
    width: 100%;
    height: auto;
}

/* glow pooled under the window */
.b26-stage__glow {
    width: min(760px, 76%);
    height: 120px;
    margin: -50px auto 0;
    background: radial-gradient(ellipse at center, rgba(232, 118, 60, 0.34), transparent 70%);
    filter: blur(46px);
    pointer-events: none;
}

/* --- marquee of the stack ------------------------------------------------ */

.b26-marquee {
    position: relative;
    padding: 30px 0;
    border-block: 1px solid var(--border-soft);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.015);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.b26-marquee__track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: b26-scroll 34s linear infinite;
}

.b26-marquee:hover .b26-marquee__track {
    animation-play-state: paused;
}

@keyframes b26-scroll {
    to { transform: translateX(-50%); }
}

.b26-marquee__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dimmer);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.b26-marquee__item:hover {
    color: var(--amber-lit);
}

.b26-marquee__item i {
    color: var(--amber);
    font-size: 0.9rem;
}

/* --- scroll reveal ------------------------------------------------------- */

/* Reveals are opt-in: the hidden state only applies once JS has marked the
   page, so with JS disabled or broken the content is simply visible. */
.b26-js .b26-reveal {
    opacity: 0;
    transform: translateY(34px);
}

.b26-reveal {
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.b26-js .b26-reveal.is-in {
    opacity: 1;
    transform: none;
}

.b26-reveal[data-stagger="1"] { transition-delay: 0.08s; }
.b26-reveal[data-stagger="2"] { transition-delay: 0.16s; }
.b26-reveal[data-stagger="3"] { transition-delay: 0.24s; }
.b26-reveal[data-stagger="4"] { transition-delay: 0.32s; }
.b26-reveal[data-stagger="5"] { transition-delay: 0.40s; }
.b26-reveal[data-stagger="6"] { transition-delay: 0.48s; }

/* --- the old way / problem cards ----------------------------------------- */

.b26-problem {
    display: grid;
    /* Six tracks so the five cards break 3 + 2: the top three span two each,
       and the bottom two span three each so they fill the row instead of
       leaving a ragged gap. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}

.b26-problem__card {
    grid-column: span 2;
}

.b26-problem__card:nth-child(4),
.b26-problem__card:nth-child(5) {
    grid-column: span 3;
}

@media (max-width: 900px) {
    .b26-problem {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .b26-problem__card,
    .b26-problem__card:nth-child(4) {
        grid-column: auto;
    }

    /* odd card out — let the Bourbon card take the full width */
    .b26-problem__card:nth-child(5) {
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .b26-problem {
        grid-template-columns: minmax(0, 1fr);
    }

    .b26-problem__card:nth-child(5) {
        grid-column: auto;
    }
}

.b26-problem__card {
    position: relative;
    padding: 30px 26px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    overflow: hidden;
}

.b26-problem__card h3 {
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.b26-problem__tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--red);
    margin-bottom: 14px;
    display: block;
}

.b26-problem__card p {
    font-size: 0.94rem;
    line-height: 1.6;
}

.b26-problem__card--win {
    background: linear-gradient(160deg, rgba(232, 118, 60, 0.16), rgba(232, 118, 60, 0.04));
    border-color: rgba(232, 118, 60, 0.32);
}

.b26-problem__card--win .b26-problem__tag {
    color: var(--amber-lit);
}

/* --- setup sequence ------------------------------------------------------ */

.b26-setup {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}

.b26-checklist {
    padding: 30px;
    border-radius: var(--radius);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border);
    backdrop-filter: blur(16px);
}

.b26-checklist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--dim);
}

.b26-checklist__pill {
    padding: 4px 12px;
    border-radius: 980px;
    background: rgba(50, 215, 75, 0.14);
    color: var(--green);
    font-size: 0.76rem;
}

.b26-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    /* tighter than it looks — there are 14 rows */
    padding: 9px 0;
    list-style: none;
    font-size: 0.95rem;
    color: var(--text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.b26-checklist__hint {
    margin-left: auto;
    padding-left: 12px;
    font-size: 0.78rem;
    font-style: normal;
    color: var(--dimmer);
    text-align: right;
    white-space: nowrap;
}

.b26-checklist li:last-child {
    border-bottom: 0;
}

.b26-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: transparent;
    font-size: 0.7rem;
    transform: scale(0.6);
    transition: background 0.45s var(--ease), color 0.45s var(--ease),
                transform 0.45s var(--ease);
}

/* Each row carries its index as --i, so the cascade scales to any number of
   steps without a rule per item. */
.b26-checklist.is-running .b26-check {
    transition-delay: calc(0.12s + var(--i, 0) * 0.13s);
}

.b26-checklist.is-running .b26-check {
    background: var(--green);
    color: #04250b;
    transform: scale(1);
}

.b26-setup__copy h2 {
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    margin-bottom: 20px;
}

.b26-setup__copy p {
    font-size: 1.06rem;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* --- feature cards with 3D tilt ------------------------------------------ */

.b26-features {
    display: grid;
    /* Six tracks, cards spanning two, so the row count is explicit rather than
       inferred by auto-fit. Lets the odd card out be centred instead of
       stranded at the left of a half-empty row. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    perspective: 1400px;
}

.b26-card {
    grid-column: span 2;
}

/* a lone card on the final row sits centred */
.b26-card:last-child:nth-child(3n + 1) {
    grid-column: 3 / span 2;
}

@media (max-width: 980px) {
    .b26-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .b26-card,
    .b26-card:last-child:nth-child(3n + 1) {
        grid-column: auto;
    }

    /* odd card out spans the full width */
    .b26-card:last-child:nth-child(odd) {
        grid-column: span 2;
    }
}

@media (max-width: 620px) {
    .b26-features {
        grid-template-columns: minmax(0, 1fr);
    }

    .b26-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

.b26-card {
    position: relative;
    padding: 34px 30px 32px;
    border-radius: var(--radius);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.018));
    border: 1px solid var(--border-soft);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease), border-color 0.4s ease,
                box-shadow 0.5s var(--ease);
    will-change: transform;
}

.b26-card:hover {
    border-color: rgba(232, 118, 60, 0.4);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* cursor-tracking spotlight */
.b26-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
        rgba(232, 118, 60, 0.16), transparent 62%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.b26-card:hover::before {
    opacity: 1;
}

.b26-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 15px;
    background: linear-gradient(150deg, rgba(232, 118, 60, 0.28), rgba(232, 118, 60, 0.08));
    border: 1px solid rgba(232, 118, 60, 0.3);
    color: var(--amber-lit);
    font-size: 1.24rem;
    transform: translateZ(38px);
}

.b26-card h3 {
    font-size: 1.28rem;
    margin-bottom: 11px;
    transform: translateZ(26px);
}

.b26-card p {
    font-size: 0.97rem;
    line-height: 1.65;
    transform: translateZ(16px);
}

/* --- bottle shelf --------------------------------------------------------- */

.b26-shelf {
    display: grid;
    /* 240px keeps this at 4 columns on a 1180px shell, so 8 bottles sit as a
       clean 4 x 2 rather than 5 + 3 */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    perspective: 1500px;
}

.b26-bottle {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    border-radius: 18px;
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--border-soft);
    text-align: center;
    transform-style: preserve-3d;
    transition: transform 0.55s var(--ease), border-color 0.4s ease;
}

.b26-bottle:hover {
    transform: translateY(-8px) rotateX(6deg) scale(1.02);
    border-color: rgba(232, 118, 60, 0.42);
}

/* CSS-drawn bottle. Every part is centred off the same 50% axis so the neck,
   body and label stay aligned regardless of the container width. */
.b26-bottle__glass {
    position: relative;
    width: 58px;
    height: 106px;
    margin: 0 auto 20px;
    transform: translateZ(30px);
}

.b26-bottle__neck {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 38px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #43291a, #5c3b22);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 0;
}

/* foil cap */
.b26-bottle__neck::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -2px;
    right: -2px;
    height: 12px;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, #2a1810, #3d2314);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.b26-bottle__body {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 50px;
    height: 76px;
    /* the large top radius is what reads as the bottle's shoulder */
    border-radius: 22px 22px 10px 10px;
    background: linear-gradient(165deg, var(--tint, #b86a2e), #4a2a12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    overflow: hidden;
    box-shadow: inset 0 -16px 24px rgba(0, 0, 0, 0.45);
}

/* liquid fill + highlight */
.b26-bottle__body::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 66%;
    background: linear-gradient(180deg, var(--tint, #d98a45), rgba(0, 0, 0, 0.4));
    opacity: 0.9;
}

.b26-bottle__body::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 8px;
    width: 5px;
    height: 54%;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
}

.b26-bottle__label {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: 38px;
    height: 26px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(248, 244, 236, 0.95), rgba(226, 218, 203, 0.9));
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.b26-bottle h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
    transform: translateZ(20px);
}

.b26-bottle__proof {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--amber-lit);
    margin-bottom: 12px;
}

.b26-bottle__runs {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--dim);
    margin: 0;
}

/* --- stats --------------------------------------------------------------- */

.b26-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    padding: 44px 32px;
    border-radius: var(--radius);
    background: linear-gradient(150deg, rgba(232, 118, 60, 0.12), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(232, 118, 60, 0.22);
    text-align: center;
}

.b26-stat__num {
    font-size: clamp(2.2rem, 4.4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(160deg, #fff, var(--amber-lit));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 10px;
}

.b26-stat__label {
    font-size: 0.92rem;
    color: var(--dim);
    margin: 0;
}

/* --- screenshot gallery --------------------------------------------------- */

.b26-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
}

.b26-shot {
    position: relative;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-panel);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: transform 0.5s var(--ease), border-color 0.4s ease,
                box-shadow 0.5s var(--ease);
}

.b26-shot:hover,
.b26-shot:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(232, 118, 60, 0.45);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
    outline: none;
}

.b26-shot img {
    display: block;
    width: 100%;
    /* height:auto is required — the img's height attribute is a presentational
       hint that would otherwise beat aspect-ratio and squash the box.
       25/16 matches the 900x576 thumbnails exactly, so cover never crops. */
    height: auto;
    aspect-ratio: 25 / 16;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.7s var(--ease);
}

.b26-shot:hover img {
    transform: scale(1.045);
}

.b26-shot__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-top: 1px solid var(--border-soft);
}

.b26-shot__meta strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 3px;
}

.b26-shot__meta span {
    font-size: 0.85rem;
    color: var(--dimmer);
}

.b26-shot__expand {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--dim);
    font-size: 0.78rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.b26-shot:hover .b26-shot__expand {
    background: var(--amber);
    color: #2a1206;
}

/* --- 3D lightbox modal ---------------------------------------------------- */

.b26-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 56px);
    perspective: 2200px;
    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(26px) saturate(140%);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s;
}

.b26-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.b26-modal__panel {
    position: relative;
    width: min(1200px, 100%);
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 50px 120px rgba(0, 0, 0, 0.8),
                0 0 90px rgba(232, 118, 60, 0.16);
    transform: rotateX(22deg) translateY(60px) scale(0.86);
    opacity: 0;
    transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}

.b26-modal.is-open .b26-modal__panel {
    transform: rotateX(0deg) translateY(0) scale(1);
    opacity: 1;
}

.b26-modal__panel img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 74svh;
    object-fit: contain;
    background: #000;
}

.b26-modal__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 24px;
    border-top: 1px solid var(--border-soft);
}

.b26-modal__caption h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.b26-modal__caption p {
    font-size: 0.9rem;
    margin: 0;
}

.b26-modal__count {
    font-size: 0.85rem;
    color: var(--dimmer);
    font-variant-numeric: tabular-nums;
}

.b26-modal__close,
.b26-modal__nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(20, 20, 22, 0.8);
    backdrop-filter: blur(14px);
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s var(--ease);
}

.b26-modal__close:hover,
.b26-modal__nav:hover {
    background: var(--amber);
    transform: scale(1.08);
}

.b26-modal__close {
    top: clamp(14px, 3vw, 30px);
    right: clamp(14px, 3vw, 30px);
    z-index: 2;
}

.b26-modal__nav--prev { left: clamp(10px, 2.4vw, 26px); top: 50%; transform: translateY(-50%); }
.b26-modal__nav--next { right: clamp(10px, 2.4vw, 26px); top: 50%; transform: translateY(-50%); }

.b26-modal__nav--prev:hover { transform: translateY(-50%) scale(1.08); }
.b26-modal__nav--next:hover { transform: translateY(-50%) scale(1.08); }

/* --- comparison table ----------------------------------------------------- */

.b26-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.022);
    -webkit-overflow-scrolling: touch;
}

.b26-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.b26-table th,
.b26-table td {
    padding: 16px 18px;
    text-align: center;
    border-bottom: 1px solid var(--border-soft);
}

.b26-table thead th {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--dim);
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.03);
}

.b26-table tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.b26-table td {
    color: var(--dim);
}

.b26-table .is-ours {
    background: rgba(232, 118, 60, 0.09);
    color: var(--text);
    font-weight: 600;
    border-left: 1px solid rgba(232, 118, 60, 0.25);
    border-right: 1px solid rgba(232, 118, 60, 0.25);
}

.b26-table thead .is-ours {
    background: rgba(232, 118, 60, 0.18);
    color: var(--amber-lit);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.b26-table .yes { color: var(--green); }
.b26-table .no  { color: var(--red); }

.b26-table__note {
    font-size: 0.82rem;
    color: var(--dimmer);
    margin-top: 16px;
    text-align: center;
}

/* --- honest compatibility ------------------------------------------------- */

.b26-honest {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.b26-honest__item {
    padding: 26px 24px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--tone, var(--dim));
}

.b26-honest__item h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.02rem;
    margin-bottom: 9px;
}

.b26-honest__item h3 i {
    color: var(--tone, var(--dim));
}

.b26-honest__item p {
    font-size: 0.93rem;
    line-height: 1.62;
    margin: 0;
}

/* --- FAQ ------------------------------------------------------------------ */

.b26-faq {
    max-width: 860px;
    margin-inline: auto;
}

.b26-faq__item {
    border-bottom: 1px solid var(--border-soft);
}

.b26-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 24px 4px;
    background: none;
    border: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 1.08rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.b26-faq__q:hover {
    color: var(--amber-lit);
}

.b26-faq__q i {
    flex: none;
    color: var(--amber);
    font-size: 0.9rem;
    transition: transform 0.45s var(--ease);
}

.b26-faq__item.is-open .b26-faq__q i {
    transform: rotate(45deg);
}

.b26-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease);
}

.b26-faq__item.is-open .b26-faq__a {
    grid-template-rows: 1fr;
}

.b26-faq__a > div {
    overflow: hidden;
}

.b26-faq__a p {
    padding: 0 4px 24px;
    font-size: 0.99rem;
    line-height: 1.7;
    margin: 0;
}

/* --- final CTA ------------------------------------------------------------ */

.b26-cta {
    position: relative;
    text-align: center;
    padding: clamp(70px, 10vw, 120px) clamp(24px, 5vw, 70px);
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(232, 118, 60, 0.3), transparent 62%),
        linear-gradient(170deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(232, 118, 60, 0.26);
}

.b26-cta h2 {
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    margin-bottom: 18px;
}

.b26-cta p {
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

.b26-cta__price {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 30px;
}

.b26-cta__price b {
    font-size: clamp(2.6rem, 6vw, 3.8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
}

.b26-cta__price span {
    font-size: 0.98rem;
    color: var(--dim);
}

.b26-cta__row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 22px;
}

.b26-cta__fine {
    font-size: 0.88rem;
    color: var(--dimmer);
}

/* --- requirements strip --------------------------------------------------- */

.b26-req {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.b26-req span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 980px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    font-size: 0.87rem;
    color: var(--dim);
}

.b26-req i {
    color: var(--amber);
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
    .b26 { --shell: min(1180px, 100% - 32px); }

    .b26-setup {
        grid-template-columns: 1fr;
    }

    .b26-window {
        transform: none !important;
    }

    .b26-modal__nav {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 560px) {
    .b26-hero {
        padding-top: 116px;
    }

    .b26-btn {
        width: 100%;
    }

    .b26-hero__cta,
    .b26-cta__row {
        flex-direction: column;
    }
}

/* --- motion preferences --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .b26 *,
    .b26 *::before,
    .b26 *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .b26-rise,
    .b26-reveal {
        opacity: 1;
        transform: none;
    }

    .b26-aurora {
        animation: none;
    }
}