/* ==========================================================================
   SkyBridge site styles
   --------------------------------------------------------------------------
   Organized so a future React migration can lift sections out as component
   styles. Everything is tokenized via CSS custom properties on :root.
   ========================================================================== */


/* ---------- Design tokens ---------- */
:root {
    --brand: #6B4FBB;
    --brand-dark: #4A3480;
    --brand-light: #9B85D9;
    --brand-soft: #f3f0fa;
    /* Right-side endpoint of the headline gradient — picked to match the
       magenta-pink at the bottom of the SkyBridge logo's icon, so the headline
       and the logo share the same blue-to-magenta progression. */
    --brand-rose: #C2185B;

    --ink: #1a1a2e;
    --ink-muted: #4a4a68;
    --ink-soft: #6b6b85;

    --paper: #ffffff;
    --paper-soft: #f7f6fb;
    --line: #e5e3ed;

    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --danger: #b91c1c;

    /* Heading hues — analogous cool palette (purple → indigo → teal) */
    --heading-h2: #4338ca; /* indigo-700 */
    --heading-h3: #0e7490; /* cyan-700  */

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.06);
    --shadow-md: 0 4px 12px rgba(26, 26, 46, 0.08);

    --container: 1200px;
    --reading: 900px;
}


/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--ink);
    line-height: 1.6;
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, iframe, video { max-width: 100%; height: auto; }
iframe { border: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { color: var(--ink); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 1rem;
}

h1 {
    /* Horizontal left-to-right gradient (90deg) so each line of a multi-line
       heading shows the full blue-purple-to-magenta progression, mirroring the
       colour shift in the SkyBridge logo's icon (blue at top, magenta at bottom). */
    background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand) 50%, var(--brand-rose) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brand); /* fallback for browsers without background-clip:text */
}


/* ---------- Top banner / header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.site-header__brand { display: flex; align-items: center; text-decoration: none; }
.site-header__logo { height: 34px; display: block; }

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.site-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.15s ease;
}

.site-nav a:hover { color: var(--brand); text-decoration: none; }

.site-nav a.active {
    color: var(--brand);
    position: relative;
}

.site-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-0.9rem - 1px);
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}

.site-nav a.cta {
    background: var(--brand);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: background 0.15s ease;
}

.site-nav a.cta:hover { background: var(--brand-dark); color: #fff; }


/* ---------- Site nav dropdown ---------- */
.site-nav .has-dropdown {
    position: relative;
}

.site-nav .dropdown-toggle {
    cursor: pointer;
}

.site-nav .dropdown-chevron {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.7em;
    transition: transform 0.15s ease;
}

.site-nav .has-dropdown:hover .dropdown-chevron,
.site-nav .has-dropdown:focus-within .dropdown-chevron {
    transform: rotate(180deg);
}

.site-nav .dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    display: none;
    flex-direction: column;
    gap: 0;
    z-index: 200;
}

/* Invisible bridge to keep hover state when moving from toggle to menu */
.site-nav .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
}

.site-nav .has-dropdown:hover .dropdown-menu,
.site-nav .has-dropdown:focus-within .dropdown-menu {
    display: flex;
}

.site-nav .dropdown-menu li {
    width: 100%;
    margin: 0;
}

.site-nav .dropdown-menu a {
    display: block;
    width: 100%;
    padding: 0.55rem 1rem;
    font-size: 0.92rem;
    color: var(--ink);
    border-radius: 0;
    white-space: nowrap;
}

.site-nav .dropdown-menu a:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
    text-decoration: none;
}


/* ---------- Article byline (used on essay-style pages e.g. TheNewTide) ---------- */
.article-byline {
    margin: -0.5rem 0 2rem;
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.95rem;
}


/* ---------- Site nav mega-menu (Products) ---------- */
.site-nav .has-megamenu {
    position: relative;
}

.site-nav .megamenu-toggle {
    cursor: pointer;
}

.site-nav .has-megamenu:hover .dropdown-chevron,
.site-nav .has-megamenu:focus-within .dropdown-chevron {
    transform: rotate(180deg);
}

.site-nav .megamenu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: 720px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 1.25rem 0;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    z-index: 200;
}

/* Invisible bridge so cursor can travel from toggle into the panel without it closing */
.site-nav .megamenu::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
}

.site-nav .has-megamenu:hover .megamenu,
.site-nav .has-megamenu:focus-within .megamenu {
    display: grid;
}

.megamenu__column {
    min-width: 0;
    padding: 0 1.25rem;
}

.megamenu__column + .megamenu__column {
    border-left: 1px solid var(--line);
}

.megamenu__heading {
    margin: 0 0 0.75rem;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    font-weight: 500;
}

.megamenu__column ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.megamenu__column li {
    margin: 0;
    display: block;
}

.megamenu__column a {
    display: block;
    padding: 0.45rem 0.5rem;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--ink);
    border-radius: 0.4rem;
    white-space: nowrap;
}

.megamenu__column a:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
    text-decoration: none;
}


/* ---------- Documentation tables (used on RpcSdkReference page) ---------- */
.layout-sidebar__main table,
.page table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.95rem;
}

.layout-sidebar__main th,
.layout-sidebar__main td,
.page th,
.page td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.layout-sidebar__main thead th,
.page thead th {
    background: var(--paper-soft);
    font-weight: 600;
    color: var(--ink-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--line);
}

.layout-sidebar__main tbody tr:hover,
.page tbody tr:hover {
    background: var(--paper-soft);
}


/* ---------- Documentation page h4 (method signatures, collapsible) ---------- */
/* Scoped to .docs-page so other pages' h4s (e.g. The New Tide) are unaffected.
   Styled as a callout band so each method signature is easy to pick up while scrolling.
   Click toggles the corresponding .method-body underneath. */
.docs-page h4 {
    margin: 3rem 0 1.25rem;
    padding: 0.85rem 2.75rem 0.85rem 1rem;   /* extra right padding for chevron */
    background: var(--brand-soft);
    border-left: 4px solid var(--brand);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-family: Consolas, "SF Mono", Monaco, monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-dark);
    line-height: 1.45;
    word-break: break-word;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease;
}

.docs-page h4:hover {
    background: #ede8f7;
}

.docs-page h4:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.docs-page h4 .method-chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
    font-size: 0.85em;
    color: var(--brand);
    line-height: 1;
    pointer-events: none;
}

.docs-page h4.expanded .method-chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* Body (everything between this h4 and the next h1\u2013h4) is hidden by default. */
.docs-page .method-body {
    display: none;
}

.docs-page .method-body.expanded {
    display: block;
}


/* ---------- Hero ---------- */


/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(135deg, var(--brand-soft) 0%, #ffffff 60%);
    padding: 4.5rem 1.5rem 3.5rem;
    border-bottom: 1px solid var(--line);
}

.hero__inner { max-width: var(--reading); margin: 0 auto; }


/* ---------- Architecture banner (below hero, above Layer-4 section) ---------- */

.architecture-banner {
    background: linear-gradient(180deg, #ffffff 0%, var(--paper-soft) 100%);
    padding: 3rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

.architecture-banner__inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

.architecture-banner__inner img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
    display: block;
    margin: 0 auto;
}

/* Click-to-enlarge: the architecture diagram is wrapped in a button so the user can
   trigger a full-viewport lightbox. The button is otherwise transparent — only the
   image and the corner badge are visible. */
.architecture-banner__zoom-trigger {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    background: none;
    border: 0;
    /* High-resolution custom magnifier-plus cursor with hotspot at the lens centre.
       Fallback to the OS hand if a browser can't load the SVG cursor — always crisp,
       always signals clickable. */
    cursor: url('/images/cursor-zoom-in.svg') 13 13, pointer;
}

.architecture-banner__zoom-trigger img {
    /* override the generic .architecture-banner__inner img selector — margin is on the button */
    margin: 0;
}

.architecture-banner__zoom-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.architecture-banner__zoom-trigger:hover .architecture-banner__zoom-badge,
.architecture-banner__zoom-trigger:focus-visible .architecture-banner__zoom-badge {
    background: rgba(0, 0, 0, 0.78);
    transform: scale(1.05);
}

.architecture-banner__zoom-badge svg {
    width: 22px;
    height: 22px;
}

/* Phones get native pinch-to-zoom on the inline image. Hide the lightbox affordance. */
@media (max-width: 768px) {
    .architecture-banner__zoom-trigger {
        cursor: default;
    }
    .architecture-banner__zoom-badge {
        display: none;
    }
}

.architecture-banner__caption {
    margin: 1.25rem 0 0;
    color: var(--ink-muted);
    font-size: 0.95rem;
}

/* Lightbox overlay shown when the user clicks the architecture diagram. Image scales
   to fit the viewport without cropping. Closes on backdrop click, the close button,
   or Escape (focus management handled in inline JS in Home.cshtml). */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    /* Custom zoom-out cursor over the backdrop — click anywhere outside the image to close. */
    cursor: url('/images/cursor-zoom-out.svg') 13 13, pointer;
}

.lightbox[hidden] {
    display: none;
}

.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    cursor: default;
}

.lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.7rem 0.35rem;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.75rem);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hero p.lead {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--ink-muted);
    max-width: 48rem;
    margin: 0 0 1.5rem;
}

.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.hero__metrics {
    /* Flex with content-sized children so the visual gap between consecutive
       tiles is the same regardless of how short or long any tile's value/label
       text is. With the previous grid + 1fr columns, every tile reserved an
       equal slice of width but content was left-aligned, so a short value like
       "3" left a big empty area at the right of its cell that looked like an
       extra-wide gap before the next tile. Flex makes each tile only as wide
       as its content; gap then renders uniformly between every adjacent pair. */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem 2.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.hero__metric-value {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
    font-weight: 600;
    color: var(--brand);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Unit modifier inside a metric value (e.g. "years" in "4 years",
   "ms" in "100 ms"). Sized via em so it scales with the parent value, and
   coloured with --brand-rose to echo the right-side endpoint of the headline
   gradient — ties the metrics row visually to the hero heading. */
.hero__metric-unit {
    font-size: 0.55em;
    font-weight: 500;
    color: #96348B;
    letter-spacing: 0;
    margin-left: 0.3em;
}

/* Metric tile with a flag image to the left of its value/label. Flag height
   is set to roughly match the combined height of value + label so the flag's
   bottom lines up with the bottom of the label's last line. Width is auto and
   the SVG's 2:1 aspect ratio determines it. No gap between flag and text. */
.hero__metric--with-flag {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.hero__metric-flag {
    display: block;
    height: 4.5rem;
    width: auto;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    margin-right: 0.5rem;
}

.hero__metric-label {
    font-size: 0.88rem;
    color: var(--ink-muted);
    margin-top: 0.35rem;
    line-height: 1.3;
}


/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.95rem;
    cursor: pointer;
    border: 0;
    transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--paper-soft); }


/* ---------- Page content ---------- */
.page {
    max-width: var(--reading);
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.page--wide {
    max-width: var(--container);
}

.page > section { margin-bottom: 3.5rem; scroll-margin-top: 80px; }
.page > section:last-child { margin-bottom: 0; }

.page h1,
.layout-sidebar__main h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin: 0 0 1.5rem;
}

.page h2,
.layout-sidebar__main h2 {
    color: var(--heading-h2);
    font-size: 1.6rem;
    margin: 2.5rem 0 1rem;
    letter-spacing: -0.01em;
}

/* When a heading is the very first content in a page area, drop its top
   margin — the page padding / preceding hero already provides enough room. */
.page > h2:first-child,
.page > section:first-child > h2:first-child,
.layout-sidebar__main > section:first-of-type > h2:first-child {
    margin-top: 0;
}

.page h3,
.layout-sidebar__main h3 {
    color: var(--heading-h3);
    font-size: 1.25rem;
    margin: 2rem 0 0.75rem;
}

.page h4,
.layout-sidebar__main h4 {
    color: var(--ink);
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem;
}

.page p, .page li,
.layout-sidebar__main p, .layout-sidebar__main li {
    font-size: 1rem;
    color: var(--ink);
}

.page ul, .page ol,
.layout-sidebar__main ul, .layout-sidebar__main ol {
    padding-left: 1.25rem;
    margin: 1rem 0 1rem 2em;
}

.page li,
.layout-sidebar__main li { margin-top: 0.6rem; }

.page figure,
.layout-sidebar__main figure { margin: 1.5rem 0; }

.page figure img,
.layout-sidebar__main figure img { border-radius: var(--radius-md); }


/* ---------- Sidebar layout (for ProxyDll pages) ---------- */
.layout-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 3rem;
    max-width: var(--container);
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.layout-sidebar--left {
    grid-template-columns: 240px minmax(0, 1fr);
}

.layout-sidebar__main { min-width: 0; }

.layout-sidebar__aside {
    position: sticky;
    top: 90px;
    align-self: start;
    font-size: 0.93rem;
}

.layout-sidebar__aside h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    margin: 0 0 0.75rem;
}

.layout-sidebar__aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.layout-sidebar__aside li {
    margin: 0;
    padding: 0.35rem 0 0.35rem 0.75rem;
    border-left: 2px solid var(--line);
}

.layout-sidebar__aside a {
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.layout-sidebar__aside a:hover { color: var(--brand); }

@media (max-width: 880px) {
    .layout-sidebar,
    .layout-sidebar--left {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .layout-sidebar__aside {
        position: static;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: 1rem;
        background: var(--paper-soft);
    }
}


/* ---------- Quote / callout blocks ---------- */
.callout {
    background: var(--paper-soft);
    border-left: 3px solid var(--brand);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.callout--danger {
    background: #fef2f2;
    border-left-color: var(--danger);
    color: var(--danger);
}

.quote-block {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink-muted);
    margin: 1.25rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--brand-light);
}

.code-inline {
    font-family: Consolas, "SF Mono", Monaco, monospace;
    background: var(--paper-soft);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.93em;
}


/* ---------- Code blocks (syntax-highlighted by highlight.js) ---------- */
.code-block-wrapper {
    position: relative;
    margin: 1.5rem 0;
}

.code-block-wrapper pre {
    margin: 0;
}

.code-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ink-muted);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    z-index: 1;
}

.code-block-wrapper:hover .code-copy-btn,
.code-block-wrapper:focus-within .code-copy-btn {
    opacity: 1;
}

.code-copy-btn:hover,
.code-copy-btn:focus {
    color: var(--brand-dark);
    border-color: var(--brand);
    background: #fff;
    outline: none;
}

.code-copy-btn.copied {
    color: #15803d;
    border-color: #15803d;
    background: #f0fdf4;
    opacity: 1;
}

.page pre,
.layout-sidebar__main pre {
    margin: 1.5rem 0;
    border-radius: var(--radius-md);
    overflow-x: auto;
    border: 1px solid var(--line);
}

/* When wrapped by the copy-button wrapper, the wrapper owns the outer margin */
.code-block-wrapper .page pre,
.code-block-wrapper .layout-sidebar__main pre,
.code-block-wrapper > pre {
    margin: 0;
}

.page pre code,
.layout-sidebar__main pre code {
    display: block;
    padding: 1rem 1.25rem;
    font-family: Consolas, "SF Mono", Monaco, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}


/* ---------- YouTube click-to-play facade ---------- */
/* Shows thumbnail + play button. On click, JS swaps in the real iframe.
   Avoids loading YouTube's embed script until the user actually clicks,
   which sidesteps the navigator.permissions.query "Illegal invocation"
   error that some browser extensions trigger against YouTube's player. */
.youtube-facade {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    background: #000;
    overflow: hidden;
    border: 0;
    padding: 0;
    display: block;
}

.youtube-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.youtube-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(33, 33, 33, 0.8);
    border: 0;
    border-radius: 14%;
    transition: background 0.2s ease;
    pointer-events: none;
}

.youtube-facade:hover .youtube-facade__play,
.youtube-facade:focus-visible .youtube-facade__play {
    background: #f00;
}

.youtube-facade__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 18px solid #fff;
}


/* ---------- Utility ---------- */
.text-brand { color: var(--brand); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--ink-muted); }
.text-danger { color: var(--danger); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }


/* ---------- AI opinion callout (Home page) ---------- */
.ai-opinion {
    background: linear-gradient(135deg, var(--brand-soft) 0%, #fbfbfd 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 3.5rem 1.5rem;
    margin-top: 4rem;
}

.ai-opinion__inner {
    max-width: var(--reading);
    margin: 0 auto;
    position: relative;
}

.ai-opinion__inner::before {
    content: "\201C"; /* left double quotation mark */
    position: absolute;
    top: -2rem;
    left: -1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 6rem;
    line-height: 1;
    color: var(--brand-light);
    opacity: 0.45;
    pointer-events: none;
}

.ai-opinion h2 {
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    color: var(--ink-muted);
}

.ai-opinion__icon {
    flex-shrink: 0;
}

.ai-opinion p,
.ai-opinion ul {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink-muted);
    margin: 0 0 1.25rem;
}

/* Give each bullet item a small bottom margin so the list doesn't feel cramped
   against the surrounding paragraph rhythm. The values are smaller than the
   paragraph margin so each list still reads as a single block. */
.ai-opinion li {
    margin-bottom: 0.5rem;
}

.ai-opinion li:last-child {
    margin-bottom: 0;
}

.ai-opinion p:last-child,
.ai-opinion ul:last-child {
    margin-bottom: 0;
}


/* ---------- Footer ---------- */
.site-footer {
    background: #12121f;
    color: #d6d4e0;
    padding: 3rem 1.5rem 1.75rem;
    margin-top: 4rem;
}

.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #2a2a3e;
}

.site-footer h3 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1rem;
    color: #b8b5c4;
    font-weight: 600;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-top: 0.5rem; font-size: 0.93rem; }
.site-footer a { color: #d6d4e0; text-decoration: none; }
.site-footer a:hover { color: var(--brand-light); text-decoration: none; }

.site-footer__brand p {
    color: #8a869e;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.55;
}

.site-footer__bottom {
    max-width: var(--container);
    margin: 0 auto;
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: #8a869e;
    font-size: 0.85rem;
}


/* ---------- Mobile adjustments ---------- */
@media (max-width: 720px) {
    .site-nav ul { gap: 1rem; }
    .site-nav a { font-size: 0.88rem; }
    .site-nav a.cta { display: none; }
    .hero { padding: 3rem 1.5rem 2.5rem; }
    .page { padding: 2rem 1.5rem; }
}

@media (max-width: 520px) {
    .site-nav li:not(:first-child):not(:last-child) { display: none; }
}