/* Linear.app DESIGN.md — tokens and site overrides.
   Canvas #010102. Ink #f7f8f8. Single accent lavender #5e6ad2.
   No light marketing page, no second chromatic accent, no atmospheric
   gradients, no drop shadows, no pill CTAs. */

:root {
    --color-primary: #5e6ad2;
    --color-on-primary: #ffffff;
    --color-primary-hover: #828fff;
    --color-primary-focus: #5e69d1;
    --color-link: #9aa3f0;
    --color-ink: #f7f8f8;
    --color-ink-muted: #d0d6e0;
    --color-ink-subtle: #c5c9d2;
    --color-ink-tertiary: #a8adb6;
    --color-canvas: #010102;
    --color-surface-1: #0f1011;
    --color-surface-2: #141516;
    --color-surface-3: #18191a;
    --color-surface-4: #191a1b;
    --color-hairline: #23252a;
    --color-hairline-strong: #34343a;
    --color-hairline-tertiary: #3e3e44;
    --color-inverse-canvas: #ffffff;
    --color-inverse-ink: #000000;
    --color-brand-secure: #7a7fad;
    --color-semantic-success: #27a644;
    --font-display: Inter, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", -apple-system, system-ui, "Segoe UI", sans-serif;
    --font-text: Inter, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", -apple-system, system-ui, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --rounded-xs: 4px;
    --rounded-sm: 6px;
    --rounded-md: 8px;
    --rounded-lg: 12px;
    --rounded-xl: 16px;
    --rounded-xxl: 24px;
    --rounded-pill: 9999px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --spacing-section: 96px;

    /* Kill leftover brown token aliases from older pages */
    --primary-brown: #5e6ad2;
    --primary-brown-dark: #5e69d1;
    --primary-brown-light: #141516;
    --light-brown: #141516;
    --soft-brown: #d0d6e0;
    --dark-brown: #c5c9d2;
}

html {
    background: var(--color-canvas);
    color-scheme: dark;
}

body {
    font-family: var(--font-text) !important;
    background: var(--color-canvas) !important;
    background-image: none !important;
    color: var(--color-ink) !important;
    margin: 0;
}

.font-display,
h1, h2, h3, h4 {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.6px;
    color: var(--color-ink) !important;
}

h1 {
    font-size: clamp(36px, 6vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.8px;
}

h2 {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -1px;
}

h3 {
    font-size: 22px;
    font-weight: 500 !important;
    letter-spacing: -0.4px;
}

p, li {
    font-weight: 400;
}

a { color: var(--color-link); }
a:hover { color: #c8ccf8; }
main a:not(.btn-brown):not(.btn-border-brown),
footer a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
nav a,
.btn-brown,
.btn-border-brown {
    text-decoration: none;
}

/* —— Buttons: 8px, never pill. Lavender only on primary. —— */
.btn-brown,
.btn-border-brown,
.cta-primary,
.cta-secondary,
a.btn-brown,
button.btn-brown,
.article-cta-booking .cta-primary,
.article-cta-booking .cta-secondary,
[class*="btn-brown"],
[class*="btn-border"],
[class*="btn-green"],
[class*="btn-pink"],
[class*="btn-indigo"],
[class*="btn-purple"],
[class*="btn-red"],
[class*="btn-yellow"] {
    background: var(--color-primary) !important;
    background-image: none !important;
    color: var(--color-on-primary) !important;
    border: 0 !important;
    border-radius: var(--rounded-md) !important;
    padding: 8px 14px !important;
    font-family: var(--font-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    min-height: 40px;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
}

.btn-border-brown,
.cta-secondary,
.article-cta-booking .cta-secondary,
a.btn-border-brown {
    background: var(--color-surface-1) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
}

.btn-brown:hover,
.cta-primary:hover,
a.btn-brown:hover {
    background: var(--color-primary-hover) !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-brown:disabled,
button.btn-brown:disabled,
#step-1-next:disabled {
    background: var(--color-surface-2) !important;
    color: var(--color-ink-tertiary) !important;
}

/* Inverse / white CTA on dark — allowed; still 8px, not pill */
a.bg-white.rounded-full,
a.bg-white[href*="booking"] {
    background: var(--color-inverse-canvas) !important;
    color: var(--color-inverse-ink) !important;
    border-radius: var(--rounded-md) !important;
}

a.border-white.rounded-full,
a.border-2.border-white {
    background: var(--color-canvas) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--rounded-md) !important;
}

a.rounded-full[href],
button.rounded-full.font-semibold,
button.rounded-full.font-medium,
.btn-brown.rounded-full,
.btn-border-brown.rounded-full {
    border-radius: var(--rounded-md) !important;
}

.btn-brown:focus-visible,
.btn-border-brown:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary-focus) !important;
    outline-offset: 2px;
}

/* —— Nav: 56px canvas bar —— */
nav.fixed,
nav.sticky,
header nav,
body > nav {
    background: var(--color-canvas) !important;
    color: var(--color-ink) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--color-hairline);
    min-height: 56px;
}

nav a,
nav .nav-link,
.nav-link {
    color: var(--color-ink-muted) !important;
    font-size: 14px !important;
}

nav a:hover,
.nav-link:hover,
nav a.text-orange-600,
nav a.text-orange-400 {
    color: var(--color-ink) !important;
}

.nav-link::after { display: none !important; }

footer,
footer.bg-gray-800,
.bg-gray-800 {
    background: var(--color-canvas) !important;
    color: var(--color-ink-subtle) !important;
    box-shadow: none !important;
}

/* —— Kill beige / gold / pastel marketing fills —— */
.bg-white,
.bg-white\/90,
.bg-gray-50,
.bg-gray-100,
.bg-orange-50,
.bg-orange-100,
.bg-amber-50,
.bg-amber-100,
.bg-yellow-50,
.bg-yellow-100,
.bg-green-50,
.bg-blue-50,
.bg-pink-50,
.bg-indigo-50,
.bg-purple-50,
.bg-red-50,
.bg-cyan-50,
.bg-emerald-50,
.bg-orange-50\/50,
[class*="from-orange"],
[class*="from-amber"],
[class*="from-yellow"],
[class*="from-green"],
[class*="from-blue"],
[class*="from-pink"],
[class*="from-indigo"],
[class*="from-purple"],
[class*="from-red"],
[class*="from-cyan"],
[class*="from-emerald"],
[class*="from-gray-50"],
[class*="to-white"],
[class*="to-yellow"],
[class*="to-green"],
[class*="to-orange"],
[class*="bg-gradient"],
[class*="from-[#D2"],
[class*="from-[#A0"],
[class*="to-[#A0"],
[class*="bg-[#faf"],
[class*="bg-[#fef"],
[class*="bg-[#FDF"],
[class*="bg-[#FAF"],
[class*="bg-[#FFF"],
[style*="#FDF6EE"],
[style*="#fdf6ee"],
[style*="#F5E6D3"],
[style*="#f5e6d3"],
[style*="#FFF8E1"],
[style*="#fff8e1"],
[style*="#fef7ed"],
[style*="#FEF7ED"],
[style*="#faf6f1"],
[style*="#FAF6F1"],
[style*="#FDF8F1"],
[style*="#F3F4F6"],
[style*="#f3f4f6"],
[style*="background: linear-gradient"][style*="#D2B48C"],
[style*="background:linear-gradient"][style*="#D2B48C"],
[style*="background:white"],
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background:#f8f9fa"],
[style*="background: #f8f9fa"],
.bg-white\/60,
.scientific-references {
    background: var(--color-surface-1) !important;
    background-image: none !important;
    background-color: var(--color-surface-1) !important;
}

section[class*="bg-gradient"],
section[class*="from-[#D2"],
section.py-20.bg-gradient-to-r {
    background: var(--color-surface-1) !important;
    background-image: none !important;
}

[style*="#8B6914"],
[style*="#7A6548"],
[style*="#5a3e28"],
[style*="#5C4A32"],
[style*="#6B5344"],
[style*="#A0826D"],
[class*="text-[#5a3"],
[class*="text-[#8B"],
[class*="text-[#6B"],
[class*="text-[#A0"] {
    color: var(--color-ink-muted) !important;
}

a[style*="#D2B48C"],
a[style*="#A0826D"] {
    color: var(--color-link) !important;
    background: transparent !important;
}

[style*="border-color: #D2B48C"],
[style*="border-color:#D2B48C"] {
    border-color: var(--color-hairline) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500,
.text-gray-400,
.text-orange-400,
.text-orange-500,
.text-orange-600,
.text-orange-700,
.text-orange-800,
.text-amber-400,
.text-amber-500,
.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-yellow-400,
.text-yellow-500,
.text-yellow-600,
.text-yellow-700,
.text-yellow-800,
.text-green-500,
.text-green-600,
.text-pink-500,
.text-pink-600,
.text-red-500,
.text-red-600,
.text-white {
    color: var(--color-ink-muted) !important;
}

h1, h2, h3,
h1.text-gray-900,
h2.text-gray-800,
h2.text-white,
.font-display.text-gray-800,
.font-display.text-white {
    color: var(--color-ink) !important;
}

/* —— Cards: surface-1 + hairline, no shadow —— */
.card,
.card-hover,
.article-content.bg-white,
.rounded-2xl,
.shadow-lg,
.shadow-sm,
.shadow-md,
.highlight-box,
.related-reading,
.related-articles,
.article-key-data,
.article-cat-card,
.brand-data-block,
.testimonial-item,
.store-card,
.service-card,
.feature-card,
.pricing-card {
    background: var(--color-surface-1) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--rounded-lg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color: var(--color-ink) !important;
}

.card-hover:hover,
.store-card:hover,
.service-card:hover {
    background: var(--color-surface-2) !important;
    transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    border-color: var(--color-hairline-strong) !important;
}

.store-card.selected,
.service-card.selected,
.time-slot.selected {
    background: var(--color-surface-2) !important;
    border-color: var(--color-hairline-strong) !important;
    color: var(--color-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transform: none !important;
}

.time-slot:hover {
    background: var(--color-surface-2) !important;
    border-color: var(--color-hairline-strong) !important;
}

.geo-answer-block,
#geo-answer-first:not(.hero-lead) {
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    padding: 0 0 0 16px !important;
    color: var(--color-ink) !important;
}

.geo-answer-block p,
#geo-answer-first:not(.hero-lead) p {
    color: var(--color-ink) !important;
}

#geo-answer-first.hero-lead {
    border: 0 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
}

.article-cta-booking,
.cta-banner {
    background: var(--color-surface-1) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--rounded-lg) !important;
    padding: 24px !important;
}

.article-cta-booking h2,
.cta-banner h2 {
    font-family: var(--font-display) !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: -0.6px;
    color: var(--color-ink) !important;
}

.article-cta-booking .cta-actions a {
    border-radius: var(--rounded-md) !important;
}

/* Status chips may be pills; CTAs may not */
.status-badge,
.inline-flex.px-4.py-2.rounded-full,
.rounded-full.text-sm,
span.rounded-full,
span[class*="rounded-full"] {
    background: var(--color-surface-2) !important;
    color: var(--color-ink-muted) !important;
    border-radius: var(--rounded-pill) !important;
    border: 1px solid var(--color-hairline);
    box-shadow: none !important;
}

/* Avatar / number circles stay circular */
.w-10.h-10.rounded-full,
.w-12.h-12.rounded-full,
.w-16.h-16.rounded-full,
.progress-step {
    border-radius: var(--rounded-pill) !important;
    background: var(--color-surface-2) !important;
    color: var(--color-ink) !important;
    box-shadow: none !important;
}

.progress-step.completed,
.progress-line {
    background: var(--color-primary) !important;
    background-image: none !important;
    color: var(--color-on-primary) !important;
}

.progress-container {
    background: var(--color-surface-2) !important;
}

input, select, textarea, .form-input {
    background: var(--color-surface-1) !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--rounded-md) !important;
    padding: 8px 12px !important;
    min-height: 44px;
    box-shadow: none !important;
}

.form-input:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--color-hairline-strong) !important;
    box-shadow: none !important;
    outline: 2px solid rgba(94, 105, 209, 0.5) !important;
}

.product-screenshot-card {
    background: var(--color-surface-1) !important;
    border: 1px solid var(--color-hairline) !important;
    border-radius: var(--rounded-xl) !important;
    overflow: hidden;
    box-shadow: none !important;
}

.hero-photo,
img.hero-photo,
.product-screenshot-card img {
    display: block !important;
    width: 100% !important;
    height: 24rem !important;
    object-fit: cover !important;
    border-radius: var(--rounded-xl) !important;
    border: 1px solid var(--color-hairline);
    background: var(--color-surface-1);
    box-shadow: none !important;
}

@media (min-width: 1024px) {
    .hero-photo,
    img.hero-photo,
    .product-screenshot-card img {
        height: 32rem !important;
    }
}

table,
.store-table,
.article-content table,
.prose-article table,
article table,
main table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--color-surface-1) !important;
}

/* Orphaned article bodies (tables dumped next to <body>) stay in the
   same reading column as about.html / first-time hubs. */
body > table,
body > .table-wrap,
body > .geo-answer-block,
body > #geo-answer-first,
body > .related-reading,
body > .article-cta-booking,
body > aside.article-cta-booking,
article > table,
article > .table-wrap {
    width: calc(100% - 2rem);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

body > .geo-answer-block,
body > #geo-answer-first,
body > .related-reading,
body > .article-cta-booking,
body > aside.article-cta-booking {
    padding-left: 1rem;
    padding-right: 1rem;
}

.table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.25rem 0 1.75rem;
    border: 1px solid var(--color-hairline);
    background: var(--color-surface-1);
}

.table-wrap table {
    margin: 0;
    border: 0;
}

@media (max-width: 720px) {
    .table-wrap table,
    table {
        table-layout: auto !important;
        width: max-content !important;
        min-width: 100%;
    }
    .table-wrap th,
    .table-wrap td,
    th, td {
        overflow-wrap: normal;
        word-break: keep-all;
        min-width: 12rem;
    }
}

.table-wrap caption,
table caption {
    caption-side: top;
    text-align: left;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--color-ink-subtle);
    background: var(--color-surface-2);
}

th,
td,
.store-table th,
.store-table td,
.article-content th,
.article-content td,
.prose-article th,
.prose-article td,
article th,
article td,
main th,
main td {
    border: 1px solid var(--color-hairline) !important;
    color: var(--color-ink-muted) !important;
    background: transparent !important;
    padding: 10px 12px !important;
    vertical-align: top;
    text-align: left !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.45;
}

th,
.store-table th,
.article-content th,
article th,
main th {
    background: var(--color-surface-2) !important;
    color: var(--color-ink) !important;
    font-weight: 500 !important;
}

/* Old templates painted light zebra / tan fills on <tr>. Those show
   through transparent tds and kill contrast on the dark canvas. */
table tr[style*="background"],
table tr[style*="background-color"],
table th[style*="background"],
table td[style*="background"],
table th[style*="background-color"],
table td[style*="background-color"] {
    background: transparent !important;
    background-color: transparent !important;
}

table thead tr[style*="background"],
table thead tr[style*="background-color"] {
    background: transparent !important;
}

table tr[style*="#D2B48C"] td,
table tr[style*="#F5E6D3"] td,
table tr[style*="#d2b48c"] td,
table tr[style*="#f5e6d3"] td,
table tr[style*="#D2B48C"] th,
table tr[style*="#F5E6D3"] th {
    background: var(--color-surface-2) !important;
    color: var(--color-ink) !important;
}

table td[style*="color:#222"],
table th[style*="color:#222"],
table td[style*="color: #222"],
table th[style*="color: #222"],
table td[style*="color:#2d6a4f"],
table td[style*="color: #2d6a4f"] {
    color: var(--color-ink) !important;
}

table.decision-table,
table.decision-table.bg-white,
table.decision-table tr,
table.decision-table th,
table.decision-table td,
table.decision-table tr:nth-child(even) td,
table.decision-table tr:nth-child(odd) td {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--color-ink-muted) !important;
    border-color: var(--color-hairline) !important;
}

table.decision-table th {
    background: var(--color-surface-2) !important;
    color: var(--color-ink) !important;
}

/* Route cards: same rhythm as homepage changelog rows. Use these
   instead of 4-column rowspan tables for itineraries. */
.route-list {
    margin: 8px 0 28px;
    border-top: 1px solid var(--color-hairline);
}
.route-row {
    display: grid;
    grid-template-columns: minmax(10.5rem, 28%) minmax(0, 1fr);
    gap: 12px 32px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-hairline);
    align-items: start;
}
.route-row > div p:last-child { margin-bottom: 0 !important; }
.route-row h3 {
    margin: 0;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px;
    line-height: 1.45;
    padding-top: 0.1em;
}
.route-row p {
    margin: 0 0 6px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--color-ink-subtle) !important;
}
.route-row p:last-child { margin-bottom: 0 !important; }
.route-row a { font-size: 14px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link,
a.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
}
.skip-link:focus,
a.skip-link:focus,
.sr-only:focus,
.sr-only:focus-visible {
    position: absolute;
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    white-space: nowrap;
    z-index: 100;
    padding: 8px 12px;
    background: var(--color-surface-2);
    color: var(--color-ink);
}

.page-shell { min-height: 100%; }
.wrap,
.article-page.wrap {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.site-header {
    border-bottom: 1px solid var(--color-hairline);
    background: var(--color-canvas);
}
.site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    min-height: 64px;
}
.site-header__inner > :first-child { justify-self: start; }
.site-header__inner > :nth-child(2):not(:last-child) { justify-self: center; }
.site-header__inner > :last-child { justify-self: end; }
.wordmark {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.6px;
    color: var(--color-ink) !important;
    text-decoration: none !important;
}
.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.nav-links a {
    color: var(--color-ink-subtle) !important;
    text-decoration: none !important;
    font-size: 14px;
}
.kicker {
    font-size: 13px;
    color: var(--color-ink-subtle);
    margin: 24px 0 8px !important;
}
.article-lead {
    font-size: 18px !important;
    line-height: 1.45 !important;
    max-width: 100%;
}
.geo-answer {
    border-left: 2px solid var(--color-primary);
    padding: 0 0 0 16px;
    margin: 0 0 28px;
}
.faq-list { margin: 0 0 32px; }
.faq-list dt {
    margin: 18px 0 6px;
    font-weight: 500;
    color: var(--color-ink);
}
.faq-list dd {
    margin: 0;
    color: var(--color-ink-subtle);
    font-size: 15px;
    line-height: 1.5;
}
.related-block,
.related-reading {
    border-top: 1px solid var(--color-hairline);
    padding-top: 24px;
    margin-top: 32px;
}
.cta-band {
    border-top: 1px solid var(--color-hairline);
    padding: 32px 0;
    margin-top: 16px;
}
.cta-band__inner {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.btn.btn-primary,
a.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
}
.site-footer {
    border-top: 1px solid var(--color-hairline);
    padding: 24px 0 40px;
    color: var(--color-ink-subtle);
    font-size: 13px;
}

@media (max-width: 768px) {
    .route-row { grid-template-columns: 1fr; gap: 6px; }
    .route-row h3 { padding-top: 0; }
    .site-header__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 0;
    }
}

.store-table tr:hover {
    background: var(--color-surface-2) !important;
}

.brand-data-block .stat-value {
    color: var(--color-ink) !important;
    font-weight: 600 !important;
}

/* Homepage: short hero, metric strip, changelog rows */
.hero-kicker {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--color-ink-subtle) !important;
    margin: 0 0 12px;
}
.hero-lead {
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: var(--color-ink-muted) !important;
    max-width: 100%;
    margin: 0 0 24px !important;
}
.hero-facts {
    margin: 16px 0 0;
    max-width: 36em;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-ink-subtle);
}
.hero-facts summary {
    cursor: pointer;
    list-style: none;
    color: inherit;
}
.hero-facts summary::-webkit-details-marker,
.hero-facts summary::marker {
    display: none;
    content: "";
}
.hero-facts[open] summary {
    margin-bottom: 8px;
}
.hero-facts p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: inherit;
}
main blockquote {
    margin: 0 0 12px;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--color-primary);
    color: var(--color-ink-muted);
    font-size: 15px;
    line-height: 1.5;
}
.metric-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.metric-strip li {
    margin: 0;
    color: var(--color-ink-subtle);
    font-size: 13px;
    line-height: 1.3;
}
.metric-strip strong {
    display: block;
    color: var(--color-ink);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.4px;
}
.changelog-row {
    display: grid;
    grid-template-columns: 8.75rem minmax(0, 1fr);
    gap: 16px 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-hairline);
    background: transparent !important;
    box-shadow: none !important;
    align-items: start;
}
.changelog-row:first-child { border-top: 1px solid var(--color-hairline); }
.changelog-row h3 {
    margin: 0;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px;
}
.changelog-row p {
    margin: 0;
    font-size: 14px !important;
    color: var(--color-ink-subtle) !important;
}
.store-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-hairline);
    align-items: baseline;
}
.store-row strong { color: var(--color-ink); }
.store-row span, .store-row a { color: var(--color-ink-subtle); font-size: 14px; }

@media (max-width: 768px) {
    h1 { font-size: 36px !important; letter-spacing: -1px !important; }
    .changelog-row { grid-template-columns: 1fr; gap: 8px; }
}

/* Hero and first screen must paint immediately — no opacity:0 fade */
.fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Article related links: a list, not a cream card */
.related-reading,
.related-articles {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--color-hairline) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px 0 0 !important;
    margin: 32px 0 0 !important;
}
.related-reading h3,
.related-articles h3,
.related-reading p {
    color: var(--color-ink) !important;
    font-size: 16px !important;
    margin: 0 0 12px !important;
}
.related-reading ul,
.related-articles ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.related-reading a,
.related-articles a {
    color: var(--color-ink-muted) !important;
    text-decoration: none;
}
.related-reading a:hover,
.related-articles a:hover {
    color: var(--color-link) !important;
}

.article-cta-booking h2 {
    font-size: 22px !important;
    margin: 0 0 8px !important;
}
.article-cta-booking .cta-phones {
    margin: 0 0 16px !important;
    font-size: 14px !important;
    color: var(--color-ink-subtle) !important;
}

/* Index: links, not marketing cards */
.article-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px 32px;
}
.article-cat-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.article-cat-header {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-ink-subtle) !important;
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--color-hairline);
}
.article-cat-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 !important;
}
.article-cat-body a {
    color: var(--color-ink-muted) !important;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}
.article-cat-body a:hover {
    color: var(--color-link) !important;
}
.cat-badge { display: none !important; }

ul.index-featured {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--color-hairline);
}
ul.index-featured li {
    border-bottom: 1px solid var(--color-hairline);
    margin: 0;
}
ul.index-featured a {
    display: block;
    padding: 14px 0;
    color: var(--color-ink) !important;
    text-decoration: none;
    font-size: 16px;
}
ul.index-featured a:hover { color: var(--color-primary) !important; }
details.article-index {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
details.article-index summary {
    cursor: pointer;
    color: var(--color-ink-subtle);
    font-size: 14px;
    padding: 8px 0 16px;
}

/* FAQ / fact / disclaimer cards still ship beige fills in page <style>. */
.faq-card,
.fact-box,
.disclaimer-banner,
details.faq-item,
details.group,
article.faq-card,
[class*="bg-orange-50"],
[class*="bg-orange-100"],
[class*="open:bg-white"],
[class*="open\:bg-white"] {
    background: var(--color-surface-1) !important;
    background-color: var(--color-surface-1) !important;
    border-color: var(--color-hairline) !important;
    box-shadow: none !important;
}

.disclaimer-banner {
    background: var(--color-surface-2) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-ink) !important;
}

.faq-card h3,
.faq-card p,
.fact-box,
.fact-box li,
.disclaimer-banner p,
details.faq-item p,
details.group p {
    color: var(--color-ink-muted) !important;
}

[style*="color: #555"],
[style*="color:#555"],
[style*="color: #555555"],
[style*="color:#555555"],
[style*="color: #444"],
[style*="color:#444"],
[style*="color: #333"],
[style*="color:#333"],
[style*="color: #1a1a1a"],
[style*="color:#1a1a1a"] {
    color: var(--color-ink-muted) !important;
}

/* Leftover article cards and even-row paints from old page <style> blocks. */
article {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.intro,
.highlight,
.faq-item,
.faq-section,
.brand-slogan,
.comparison-table,
.comparison-table tr:nth-child(even),
table tr,
table tbody tr,
table thead tr,
tr:nth-child(even),
tr:nth-child(odd),
tr:hover {
    background: transparent !important;
    background-color: transparent !important;
}

.text-orange-900,
.text-orange-950,
[class*="text-orange-9"] {
    color: var(--color-ink) !important;
}

p, li {
    color: var(--color-ink-muted) !important;
}

/* Kill leftover header pills on article pages */
article header .uppercase,
article header .tracking-\[0\.25em\],
main > header .rounded-full {
    display: none !important;
}

/* —— Alignment: one reading edge, optical nav center, honor text-center —— */
nav.fixed > div > .flex.justify-between.items-center,
nav.sticky > div > .flex.justify-between.items-center,
header nav > div > .flex.justify-between.items-center,
nav .flex.justify-between.items-center.h-16 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
}

nav .flex.justify-between.items-center.h-16 > :first-child,
nav.fixed > div > .flex.justify-between.items-center > :first-child {
    justify-self: start;
    min-width: 0;
}

nav .flex.justify-between.items-center.h-16 > :nth-child(2):not(:last-child),
nav.fixed > div > .flex.justify-between.items-center > :nth-child(2):not(:last-child) {
    justify-self: center;
}

nav .flex.justify-between.items-center.h-16 > :last-child,
nav.fixed > div > .flex.justify-between.items-center > :last-child {
    justify-self: end;
}

nav a.text-2xl.font-display,
nav .text-2xl.font-display {
    display: inline-flex;
    align-items: baseline;
    column-gap: 0.4em;
    white-space: nowrap;
}

nav a.text-2xl.font-display span,
nav .text-2xl.font-display span {
    font-weight: 400;
    line-height: 1;
}

.btn-brown,
.btn-border-brown,
.cta-primary,
.cta-secondary,
a.btn-brown,
a.btn-border-brown,
button.btn-brown {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.text-center .hero-lead,
.text-center .hero-facts,
.text-center .article-lead,
.text-center .hero-kicker {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.text-center .metric-strip {
    justify-content: center;
}

.text-center > h1,
.text-center > h2,
.text-center > h3,
.text-center > p {
    text-align: center;
}

.table-wrap table thead tr:has(th:nth-child(3)):not(:has(th:nth-child(4))) th:first-child,
.table-wrap table tbody tr:has(td:nth-child(3)):not(:has(td:nth-child(4))) td:first-child {
    width: 22%;
}

.article-cat-header {
    padding: 0 0 8px !important;
}

@media (max-width: 768px) {
    nav.fixed > div > .flex.justify-between.items-center,
    nav .flex.justify-between.items-center.h-16 {
        display: flex !important;
        justify-content: space-between;
        column-gap: 12px;
    }

    nav a.text-2xl.font-display,
    nav .text-2xl.font-display {
        white-space: normal;
    }
}