/* ======================================================================
   VisualRoute – Unified Stylesheet
   Design: luxury, modern, clean. Poppins, deep navy ink, champagne accent.
   ====================================================================== */

/* -- Fonts ------------------------------------------------------------- */
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Thin.woff2') format('woff2'),url('../fonts/Poppins-Thin.woff') format('woff'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-ExtraLight.woff2') format('woff2'),url('../fonts/Poppins-ExtraLight.woff') format('woff'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Light.woff2') format('woff2'),url('../fonts/Poppins-Light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Regular.woff2') format('woff2'),url('../fonts/Poppins-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Medium.woff2') format('woff2'),url('../fonts/Poppins-Medium.woff') format('woff'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-SemiBold.woff2') format('woff2'),url('../fonts/Poppins-SemiBold.woff') format('woff'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-Bold.woff2') format('woff2'),url('../fonts/Poppins-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),url('../fonts/Poppins-ExtraBold.woff') format('woff'); font-weight:800; font-style:normal; font-display:swap; }

/* -- Tokens ------------------------------------------------------------ */
:root {
    --ink          : #0b1220;
    --ink-soft     : #1a2334;
    --paper        : #ffffff;
    --paper-warm   : #faf8f4;
    --paper-tint   : #f4f1ea;
    --line         : rgba(11, 18, 32, 0.08);
    --line-strong  : rgba(11, 18, 32, 0.14);
    --muted        : #5c6577;
    --muted-soft   : #8a92a3;
    --gold         : #c8a96a;
    --gold-deep    : #a88a4a;
    --navy         : #14243f;
    --navy-deep    : #0a1529;
    --accent-soft  : rgba(200, 169, 106, 0.12);
    --success      : #2e7d5b;
    --danger       : #b2443c;

    --radius-sm    : 6px;
    --radius       : 12px;
    --radius-lg    : 20px;
    --shadow-sm    : 0 1px 2px rgba(11, 18, 32, 0.04), 0 1px 3px rgba(11, 18, 32, 0.06);
    --shadow       : 0 10px 30px -12px rgba(11, 18, 32, 0.18), 0 2px 6px rgba(11, 18, 32, 0.04);
    --shadow-lg    : 0 30px 60px -20px rgba(11, 18, 32, 0.35);

    --container    : 1200px;
    --container-sm : 880px;

    --ease         : cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-fast       : 180ms;
    --t            : 280ms;
}

/* -- Reset & base ------------------------------------------------------ */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
    margin:0;
    font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:1.6;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}
img, svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; transition:color var(--t-fast) var(--ease); }
a:hover { color:var(--gold-deep); }
p { margin:0 0 1em; }
h1, h2, h3, h4, h5, h6 { margin:0 0 0.5em; font-weight:600; letter-spacing:-0.01em; line-height:1.15; color:var(--ink); }
h1 { font-size:clamp(2.2rem, 4.6vw, 3.8rem); font-weight:700; letter-spacing:-0.025em; }
h2 { font-size:clamp(1.7rem, 3vw, 2.6rem); letter-spacing:-0.02em; }
h3 { font-size:clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size:1.05rem; font-weight:600; }
ul, ol { padding-left:1.25em; }
hr { border:0; border-top:1px solid var(--line); margin:3rem 0; }
::selection { background:var(--gold); color:var(--ink); }

/* -- Layout primitives ------------------------------------------------- */
.container    { max-width:var(--container);    margin:0 auto; padding:0 28px; }
.container-sm { max-width:var(--container-sm); margin:0 auto; padding:0 28px; }
.section      { padding:88px 0; }
.section--sm  { padding:56px 0; }
.section--lg  { padding:120px 0; }
.section--tint  { background:var(--paper-warm); }
.section--ink   { background:var(--navy-deep); color:#e6ebf3; }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color:#fff; }
.section--ink a:hover { color:var(--gold); }

.eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.72rem; font-weight:600;
    letter-spacing:0.18em; text-transform:uppercase;
    color:var(--gold-deep);
}
.eyebrow::before {
    content:""; width:28px; height:1px; background:var(--gold);
}
.section--ink .eyebrow { color:var(--gold); }

.lede { font-size:1.125rem; color:var(--muted); max-width:62ch; }
.section--ink .lede { color:#b8c0cf; }

.text-center { text-align:center; }
.mx-auto { margin-left:auto; margin-right:auto; }

/* -- Header / Nav ------------------------------------------------------ */
.site-header {
    position:sticky; top:0; z-index:50;
    background:rgba(255, 255, 255, 0.82);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line);
}
.site-header__inner {
    max-width:var(--container); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:32px; padding:18px 28px;
}
.site-header__logo {
    display:inline-flex; align-items:center; gap:12px;
    font-weight:700; font-size:1.45rem; letter-spacing:-0.025em;
    color:var(--ink);
}
.site-header__logo img { width:36px; height:36px; object-fit:contain; display:block; flex:none; }
.site-footer__brand .site-header__logo { color:#fff; }
.site-footer__brand .site-header__logo img { width:auto; height:36px; }
.site-nav ul {
    display:flex; gap:4px; list-style:none; margin:0; padding:0;
}
.site-nav a {
    display:inline-block; padding:9px 16px; border-radius:8px;
    font-size:0.935rem; font-weight:500; color:var(--ink-soft);
    transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.site-nav a:hover { background:var(--paper-tint); color:var(--ink); }
.site-nav a.is-active { color:var(--ink); background:var(--paper-tint); }
.site-header__cta { display:flex; align-items:center; gap:10px; }

.nav-toggle {
    display:none; background:none; border:0; padding:8px; cursor:pointer;
    color:var(--ink);
}
.nav-toggle svg { width:24px; height:24px; }

@media (max-width:900px) {
    .site-header__inner { padding:14px 20px; }
    .nav-toggle { display:inline-flex; }
    .site-nav {
        position:fixed; inset:66px 0 auto 0;
        background:#fff; border-bottom:1px solid var(--line);
        padding:16px 20px 22px;
        transform:translateY(-120%); transition:transform var(--t) var(--ease);
        box-shadow:var(--shadow);
    }
    .site-nav.is-open { transform:translateY(0); }
    .site-nav ul { flex-direction:column; gap:2px; }
    .site-nav a { padding:12px 14px; font-size:1rem; }
    .site-header__cta .btn--ghost { display:none; }
}

/* -- Buttons ----------------------------------------------------------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:13px 22px; border-radius:999px;
    font-family:inherit; font-size:0.95rem; font-weight:500;
    letter-spacing:0.005em;
    border:1px solid transparent; cursor:pointer;
    transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
    text-decoration:none; white-space:nowrap;
}
.btn:active { transform:translateY(1px); }
.btn svg { width:16px; height:16px; }

.btn--primary {
    background:var(--ink); color:#fff; border-color:var(--ink);
    box-shadow:0 1px 2px rgba(11, 18, 32, 0.1);
}
.btn--primary:hover { background:var(--gold); color:var(--ink); border-color:var(--gold); box-shadow:0 10px 24px -10px rgba(200, 169, 106, 0.5); }

.btn--gold { background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn--gold:hover { background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }

.btn--ghost {
    background:transparent; color:var(--ink); border-color:var(--line-strong);
}
.btn--ghost:hover { background:var(--paper-warm); border-color:var(--ink); color:var(--ink); box-shadow:0 6px 18px -10px rgba(11, 18, 32, 0.22); }

/* Ghost variant for dark backgrounds (hero, ink sections) */
.btn--outline {
    background:transparent; color:#fff; border-color:rgba(255, 255, 255, 0.22);
}
.btn--outline:hover { background:#fff; color:var(--ink); border-color:#fff; }

.btn--light {
    background:#fff; color:var(--ink); border-color:#fff;
}
.btn--light:hover { background:var(--gold); border-color:var(--gold); }

.btn--sm { padding:9px 16px; font-size:0.88rem; }
.btn--lg { padding:16px 28px; font-size:1rem; }
.btn--block { display:flex; width:100%; }

.btn-group { display:flex; flex-wrap:wrap; gap:12px; }

/* -- Hero -------------------------------------------------------------- */
.hero {
    position:relative; overflow:hidden;
    background:linear-gradient(160deg, #0a1529 0%, #14243f 55%, #1e3450 100%);
    color:#f0f3f9;
    padding:120px 0 110px;
}
.hero::before {
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(200, 169, 106, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 100%, rgba(100, 140, 220, 0.16) 0%, transparent 55%);
    pointer-events:none;
}
.hero::after {
    content:""; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse at center, #000 0%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center, #000 0%, transparent 75%);
    pointer-events:none;
}
.hero__inner {
    position:relative; z-index:1;
    max-width:var(--container); margin:0 auto; padding:0 28px;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.hero h1 { color:#fff; margin-bottom:22px; }
.hero h1 .accent {
    display:inline-block;
    background:linear-gradient(180deg, #f4e0b3 0%, #c8a96a 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    font-style:italic; font-weight:500;
    padding-right:0.12em;
}
.hero__sub { font-size:1.15rem; color:#c4cbd9; max-width:52ch; margin-bottom:32px; }
.hero__visual {
    position:relative;
    border-radius:var(--radius-lg);
    padding:18px;
    background:rgba(255, 255, 255, 0.02);
    border:1px solid rgba(255, 255, 255, 0.08);
    box-shadow:var(--shadow-lg);
    backdrop-filter:blur(10px);
}
.hero__visual img { border-radius:12px; width:100%; }
.hero__meta {
    display:flex; flex-wrap:wrap; gap:28px; margin-top:38px;
    padding-top:28px; border-top:1px solid rgba(255, 255, 255, 0.08);
}
.hero__meta-item { display:flex; flex-direction:column; gap:2px; }
.hero__meta-item strong { color:#fff; font-weight:600; font-size:1.1rem; }
.hero__meta-item span { color:#8d97ab; font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase; }

.hero--sub {
    padding:96px 0 70px;
}
.hero--sub .hero__inner { grid-template-columns:1fr; max-width:var(--container-sm); text-align:center; }
.hero--sub .eyebrow { justify-content:center; display:inline-flex; }
.hero--sub .hero__sub { margin-left:auto; margin-right:auto; }

@media (max-width:900px) {
    .hero { padding:72px 0 68px; }
    .hero__inner { grid-template-columns:1fr; gap:40px; }
}

/* -- Section heading --------------------------------------------------- */
.section-head {
    max-width:680px; margin:0 auto 56px; text-align:center;
    display:flex; flex-direction:column; gap:14px; align-items:center;
}
.section-head--left { margin-left:0; text-align:left; align-items:flex-start; }
.section-head h2 { margin:0; }
.section-head p { margin:0; color:var(--muted); font-size:1.05rem; max-width:60ch; }

/* -- Feature grid ------------------------------------------------------ */
.feature-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
}
/* Balanced layout for exactly 7 items: 4 across, then 3 centered */
@media (min-width:1100px) {
    .feature-grid--7 { grid-template-columns:repeat(12, 1fr); }
    .feature-grid--7 > :nth-child(-n+4) { grid-column:span 3; }
    .feature-grid--7 > :nth-child(n+5)  { grid-column:span 4; }
}
@media (min-width:760px) and (max-width:1099px) {
    .feature-grid--7 { grid-template-columns:repeat(6, 1fr); }
    .feature-grid--7 > * { grid-column:span 2; }
    .feature-grid--7 > :nth-last-child(1) { grid-column:2 / span 4; }
}
.feature-card {
    background:var(--paper);
    padding:40px 34px;
    display:flex; flex-direction:column; gap:14px;
    transition:background var(--t) var(--ease);
}
.feature-card:hover { background:var(--paper-warm); }
.feature-card__icon {
    width:52px; height:52px;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper-warm);
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:8px;
}
.feature-card__icon img { width:38px; height:38px; object-fit:contain; }
.feature-card h3 { margin:0; font-size:1.15rem; }
.feature-card p { margin:0; color:var(--muted); font-size:0.95rem; line-height:1.65; }
.feature-card .more-link {
    margin-top:auto;
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.85rem; font-weight:500; color:var(--ink);
}
.feature-card .more-link svg { width:14px; height:14px; flex:none; transition:transform var(--t-fast) var(--ease); }
.feature-card .more-link:hover svg { transform:translateX(3px); }

/* -- Benefit split ----------------------------------------------------- */
.split {
    display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}
.split--reverse > *:first-child { order:2; }
.split__visual {
    position:relative; padding:16px; border-radius:var(--radius-lg);
    background:var(--paper-warm);
    border:1px solid var(--line);
}
.split__visual img { border-radius:12px; }
.split ul.check-list { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:12px; }
.check-list li { padding-left:32px; position:relative; color:var(--ink-soft); }
.check-list li::before {
    content:""; position:absolute; left:0; top:0.5em;
    width:18px; height:18px; border-radius:50%;
    background:var(--accent-soft);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a88a4a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 6.5 12 13 5'/></svg>");
    background-repeat:no-repeat; background-position:center;
}
@media (max-width:900px) {
    .split { grid-template-columns:1fr; gap:40px; }
    .split--reverse > *:first-child { order:0; }
}

/* -- Stat band --------------------------------------------------------- */
.stat-band {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:2px; background:var(--line);
    border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
}
.stat {
    background:var(--paper); padding:32px 28px; text-align:center;
}
.stat strong { display:block; font-size:2.2rem; font-weight:700; letter-spacing:-0.03em; color:var(--ink); }
.stat strong em { font-style:normal; color:var(--gold-deep); }
.stat span { font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }

/* -- Testimonials ------------------------------------------------------ */
.quote-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px;
}
.quote {
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:32px 28px;
    display:flex; flex-direction:column; gap:18px;
    transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.quote:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.quote__mark {
    font-family:Georgia, serif; font-size:3.4rem; line-height:0.8; color:var(--gold);
    font-weight:700;
}
.quote p { color:var(--ink-soft); font-size:0.98rem; line-height:1.65; margin:0; }
.quote cite {
    font-style:normal; font-size:0.85rem; color:var(--muted);
    margin-top:auto;
}
.quote cite strong { display:block; color:var(--ink); font-weight:600; font-size:0.95rem; }

.section--ink .quote { background:rgba(255, 255, 255, 0.03); border-color:rgba(255, 255, 255, 0.08); }
.section--ink .quote p { color:#cbd2e0; }
.section--ink .quote cite { color:#8d97ab; }
.section--ink .quote cite strong { color:#fff; }

/* -- Download card ----------------------------------------------------- */
.dl-card {
    display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center;
    padding:28px 32px;
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}
.dl-card__os {
    width:56px; height:56px; border-radius:12px;
    background:var(--paper-warm);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink);
}
.dl-card__os svg { width:30px; height:30px; }
.dl-card__meta strong { display:block; font-size:1.1rem; font-weight:600; }
.dl-card__meta span { color:var(--muted); font-size:0.9rem; }
.dl-reqs {
    display:flex; flex-wrap:wrap; gap:20px 32px;
    list-style:none; padding:0; margin:24px 0 0;
    font-size:0.9rem; color:var(--muted);
}
.dl-reqs li { display:flex; align-items:center; gap:8px; }
.dl-reqs li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
@media (max-width:700px) {
    .dl-card { grid-template-columns:1fr; text-align:center; justify-items:center; }
}

/* -- Pricing (purchase page) ------------------------------------------- */
.price-shell {
    display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px;
    align-items:flex-start;
}
@media (max-width:1000px) { .price-shell { grid-template-columns:1fr; } }

.price-builder {
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:40px;
    box-shadow:var(--shadow);
}
.price-builder h2 { margin:0 0 6px; }
.price-builder__intro { color:var(--muted); margin-bottom:28px; }

.steps { display:flex; flex-direction:column; gap:26px; }
.step { display:flex; flex-direction:column; gap:12px; }
.step__head {
    display:flex; align-items:center; gap:12px;
    font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.12em;
    color:var(--muted);
}
.step__num {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%;
    background:var(--paper-tint); color:var(--ink-soft); font-size:0.72rem; font-weight:600;
    letter-spacing:0;
}
.step.is-active .step__num { background:var(--ink); color:#fff; }
.step.is-complete .step__num { background:var(--gold); color:var(--ink); }

.choice-row {
    display:grid; gap:10px;
}
.choice-row--cols-2 { grid-template-columns:1fr 1fr; }
.choice-row--cols-4 { grid-template-columns:repeat(4, 1fr); }
.choice-row--seats { grid-template-columns:repeat(7, 1fr); }
@media (max-width:640px) {
    .choice-row--cols-4 { grid-template-columns:repeat(2, 1fr); }
    .choice-row--seats  { grid-template-columns:repeat(4, 1fr); }
}

.choice {
    position:relative;
    border:1px solid var(--line-strong); border-radius:10px;
    padding:14px 16px;
    cursor:pointer; user-select:none;
    background:var(--paper); transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    display:flex; flex-direction:column; gap:2px;
    min-height:58px; justify-content:center;
}
.choice input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.choice__label { font-size:0.92rem; font-weight:500; color:var(--ink); }
.choice__hint  { font-size:0.8rem; color:var(--muted); }
.choice:hover { border-color:var(--ink); }
.choice.is-selected {
    border-color:var(--ink); background:var(--ink); color:#fff;
    box-shadow:0 8px 22px -10px rgba(11, 18, 32, 0.4);
}
.choice.is-selected .choice__label,
.choice.is-selected .choice__hint { color:#fff; }
.choice.is-selected .choice__hint { color:rgba(255, 255, 255, 0.68); }
.choice.is-disabled { opacity:0.4; pointer-events:none; }

.seat-chip { text-align:center; padding:14px 8px; font-weight:600; font-size:1.05rem; }
.seat-chip .choice__hint { font-size:0.72rem; font-weight:400; margin-top:2px; }

/* Summary panel */
.summary {
    position:sticky; top:100px;
    background:var(--navy-deep); color:#e6ebf3;
    border-radius:var(--radius-lg);
    padding:36px;
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    border:1px solid rgba(255, 255, 255, 0.06);
}
.summary::before {
    content:""; position:absolute; top:-40%; right:-20%; width:70%; height:80%;
    background:radial-gradient(circle, rgba(200, 169, 106, 0.18) 0%, transparent 60%);
    pointer-events:none;
}
.summary > * { position:relative; z-index:1; }
.summary h3 { color:#fff; margin:0 0 4px; font-size:1.1rem; }
.summary__sub { color:#9aa3b8; font-size:0.88rem; margin-bottom:24px; }
.summary__lines { list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:12px; }
.summary__lines li {
    display:flex; justify-content:space-between; gap:16px;
    padding:10px 0; border-bottom:1px solid rgba(255, 255, 255, 0.08);
    font-size:0.92rem; color:#b8c0cf;
}
.summary__lines li strong { color:#fff; font-weight:500; }
.summary__lines li.empty { color:#6b7488; justify-content:center; border:0; padding:18px 0; }

.price-display {
    display:flex; align-items:baseline; gap:10px; margin:12px 0 6px;
}
.price-display .amount { font-size:2.6rem; font-weight:700; color:#fff; letter-spacing:-0.03em; }
.price-display .unit { color:#9aa3b8; font-size:0.88rem; }
.summary__note { color:#9aa3b8; font-size:0.8rem; margin-bottom:22px; }
.summary .btn--gold { width:100%; }
.summary__secondary { margin-top:14px; text-align:center; font-size:0.82rem; color:#8d97ab; }

/* -- Comparison table -------------------------------------------------- */
.compare-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
.compare {
    width:100%; border-collapse:collapse;
    min-width:720px;
}
.compare th, .compare td {
    padding:16px 20px; text-align:left; font-size:0.92rem;
    border-bottom:1px solid var(--line);
}
.compare thead th {
    background:var(--paper-warm);
    font-weight:600; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--ink); text-align:center;
}
.compare thead th:first-child { text-align:left; }
.compare tbody td { text-align:center; color:var(--ink-soft); }
.compare tbody td:first-child { text-align:left; font-weight:500; color:var(--ink); }
.compare tr:last-child td { border-bottom:0; }
.compare tbody tr:nth-child(even) td { background:#fbfaf7; }
.compare .yes { color:var(--gold-deep); font-weight:600; }
.compare .no  { color:var(--muted-soft); }

/* -- Forms (support request) ------------------------------------------ */
.form-layout {
    display:grid; grid-template-columns:1.35fr 0.65fr; gap:48px;
}
@media (max-width:1000px) { .form-layout { grid-template-columns:1fr; } }

.form-card {
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:44px; box-shadow:var(--shadow-sm);
}
.form-card__head { margin-bottom:28px; }
.form-card__head h2 { margin:0 0 6px; font-size:1.55rem; }
.form-card__head p  { margin:0; color:var(--muted); }

.field { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.field--row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field--row > .field { margin:0; }
.field label {
    font-size:0.84rem; font-weight:500; color:var(--ink-soft);
}
.field .req { color:var(--gold-deep); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
    font-family:inherit; font-size:0.95rem;
    padding:12px 14px;
    border:1px solid var(--line-strong); border-radius:10px;
    background:#fff; color:var(--ink);
    transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    width:100%;
}
.field textarea { resize:vertical; min-height:140px; line-height:1.6; }
.field select { appearance:none; -webkit-appearance:none; padding-right:40px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235c6577' stroke-width='1.6'><polyline points='5 8 10 13 15 8'/></svg>");
    background-repeat:no-repeat; background-position:right 14px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline:none; border-color:var(--ink);
    box-shadow:0 0 0 3px rgba(11, 18, 32, 0.08);
}
.field .hint { font-size:0.82rem; color:var(--muted); }

.form-hp { display:none !important; }

.form-alert {
    display:flex; align-items:flex-start; gap:14px;
    padding:16px 18px; border-radius:10px;
    margin-bottom:24px;
    border:1px solid var(--line);
}
.form-alert svg { flex:none; width:20px; height:20px; margin-top:2px; }
.form-alert--success { background:#f0f8f3; border-color:#cfe5d8; color:#1f5a40; }
.form-alert--error   { background:#fcf1ef; border-color:#eccdc8; color:#7a2f28; }

.sidebar-cards { display:flex; flex-direction:column; gap:16px; }
.side-card {
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:24px; display:flex; flex-direction:column; gap:10px;
}
.side-card__icon {
    width:40px; height:40px; border-radius:10px;
    background:var(--accent-soft); color:var(--gold-deep);
    display:flex; align-items:center; justify-content:center;
}
.side-card h4 { margin:0; font-size:1rem; }
.side-card p  { margin:0; color:var(--muted); font-size:0.88rem; line-height:1.6; }
.side-card a {
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.85rem; font-weight:500; color:var(--ink);
}
.side-card a:hover svg { transform:translateX(3px); }
.side-card--alt { background:var(--navy-deep); color:#e6ebf3; border-color:transparent; }
.side-card--alt h4 { color:#fff; }
.side-card--alt p  { color:#9aa3b8; }
.side-card--alt a  { color:var(--gold); }

/* -- Breadcrumb -------------------------------------------------------- */
.breadcrumb {
    background:var(--paper-warm); border-bottom:1px solid var(--line);
    padding:14px 0; font-size:0.85rem; color:var(--muted);
}
.breadcrumb ul { list-style:none; margin:0; padding:0;
    max-width:var(--container); margin:0 auto; padding:0 28px;
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.breadcrumb li + li::before { content:"/"; margin:0 10px; color:var(--muted-soft); }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--ink); }
.breadcrumb li:last-child { color:var(--ink); }

/* -- Doc content (support/feature pages) ------------------------------ */
.doc {
    display:grid; grid-template-columns:220px 1fr; gap:56px;
    align-items:flex-start;
}
@media (max-width:900px) { .doc { grid-template-columns:1fr; } }

.doc__nav {
    position:sticky; top:90px;
    border-left:1px solid var(--line); padding-left:20px;
}
.doc__nav h5 {
    margin:0 0 12px; font-size:0.75rem; text-transform:uppercase;
    letter-spacing:0.12em; color:var(--muted);
}
.doc__nav ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.doc__nav a {
    display:block; padding:6px 0; font-size:0.9rem; color:var(--ink-soft);
}
.doc__nav a.is-active { color:var(--gold-deep); font-weight:500; }
.doc__nav a:hover { color:var(--ink); }

.prose { max-width:720px; font-size:1.02rem; line-height:1.75; color:var(--ink-soft); }
.prose h1 { margin-bottom:20px; }
.prose h2 { margin-top:2em; margin-bottom:0.6em; font-size:1.55rem; }
.prose h3 { margin-top:1.8em; margin-bottom:0.5em; }
.prose p  { margin:0 0 1.15em; }
.prose ul, .prose ol { margin:0 0 1.15em; padding-left:1.4em; }
.prose li { margin-bottom:0.4em; }
.prose img { border-radius:10px; margin:1.4em 0; box-shadow:var(--shadow); }
.prose a { color:var(--gold-deep); border-bottom:1px solid rgba(200, 169, 106, 0.35); }
.prose a:hover { color:var(--ink); border-color:var(--ink); }
.prose blockquote {
    margin:1.5em 0; padding:1em 1.4em;
    border-left:3px solid var(--gold);
    background:var(--paper-warm);
    color:var(--ink-soft); font-style:italic;
    border-radius:0 10px 10px 0;
}
.prose code { background:var(--paper-tint); padding:2px 6px; border-radius:4px; font-size:0.92em; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }

.callout {
    padding:20px 24px; border-radius:12px;
    background:var(--accent-soft); border:1px solid rgba(200, 169, 106, 0.28);
    color:var(--ink-soft); margin:1.6em 0;
    display:flex; gap:14px; align-items:flex-start;
}
.callout svg { flex:none; width:22px; height:22px; color:var(--gold-deep); margin-top:2px; }

/* -- Link list (index pages) ------------------------------------------ */
.link-list {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:16px; list-style:none; padding:0; margin:0;
}
.link-list a {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 22px;
    background:var(--paper); border:1px solid var(--line); border-radius:12px;
    color:var(--ink); font-weight:500;
    transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.link-list a:hover {
    border-color:var(--ink); box-shadow:var(--shadow-sm);
    transform:translateY(-1px);
}
.link-list a svg { width:14px; height:14px; flex:none; transition:transform var(--t-fast) var(--ease); color:var(--muted); }
.link-list a:hover svg { transform:translateX(3px); color:var(--gold-deep); }
.link-list small { display:block; color:var(--muted); font-weight:400; font-size:0.82rem; margin-top:2px; }

/* -- CTA Band ---------------------------------------------------------- */
.cta-band {
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%);
    color:#fff;
    border-radius:var(--radius-lg);
    padding:64px 56px;
    display:flex; justify-content:space-between; align-items:center; gap:40px;
    flex-wrap:wrap;
}
.cta-band::before {
    content:""; position:absolute; top:-50%; right:-10%; width:70%; height:200%;
    background:radial-gradient(circle, rgba(200, 169, 106, 0.18) 0%, transparent 60%);
    pointer-events:none;
}
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; margin:0 0 10px; }
.cta-band p { margin:0; color:#b8c0cf; max-width:50ch; }

@media (max-width:700px) {
    .cta-band { padding:40px 28px; }
    .form-card { padding:28px; }
    .price-builder { padding:28px; }
}

/* -- Footer ------------------------------------------------------------ */
.site-footer {
    background:var(--navy-deep); color:#9aa3b8;
    padding:72px 0 36px;
}
.site-footer__grid {
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:48px; border-bottom:1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width:800px) { .site-footer__grid { grid-template-columns:1fr 1fr; } }
.site-footer h5 {
    color:#fff; font-size:0.78rem; text-transform:uppercase;
    letter-spacing:0.14em; margin:0 0 18px;
}
.site-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:0.92rem; }
.site-footer a { color:#9aa3b8; }
.site-footer a:hover { color:#fff; }
.site-footer__brand p { color:#9aa3b8; font-size:0.92rem; line-height:1.7; max-width:32ch; }
.site-footer__brand .site-header__logo { color:#fff; margin-bottom:14px; }
.site-footer__meta {
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
    padding-top:28px; font-size:0.82rem; color:#6b7488;
}

/* -- Small helpers ----------------------------------------------------- */
.bg-network {
    background:
        linear-gradient(180deg, transparent 60%, var(--paper-warm) 100%),
        radial-gradient(circle at 20% 30%, rgba(200, 169, 106, 0.08), transparent 40%);
}
.reveal { opacity:0; transform:translateY(16px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }