:root {
    --ink: #14213d;
    --ink-soft: #61708a;
    --paper: #ffffff;
    --canvas: #f2f3f8;
    --surface: rgba(255, 255, 255, 0.82);
    --line: #dce4f2;
    --brand: #2f67f6;
    --brand-strong: #1d46d8;
    --brand-soft: #eaf0ff;
    --title-gradient-start: #2f67f6;
    --title-gradient-end: #8a4ff7;
    --title-gradient-glow: #22c4ff;
    --shadow-xs: 0 6px 18px rgba(25, 49, 95, 0.06);
    --shadow-md: 0 20px 60px rgba(25, 49, 95, 0.12);
    --cta-bg: #14213d;
    --cta-text: #ffffff;
    --cta-muted: rgba(255, 255, 255, 0.74);
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 36px;
}

[data-theme="dark"] {
    --ink: #f3f6ff;
    --ink-soft: #aebbd4;
    --paper: #10182e;
    --canvas: #080d1a;
    --surface: rgba(18, 29, 55, 0.9);
    --line: #273657;
    --brand: #79a0ff;
    --brand-strong: #a69aff;
    --brand-soft: #1b2c55;
    --title-gradient-start: #8baaff;
    --title-gradient-end: #c3a1ff;
    --title-gradient-glow: #55d6ff;
    --shadow-xs: 0 8px 20px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 26px 70px rgba(0, 0, 0, 0.38);
    --cta-bg: #17264b;
    --cta-text: #ffffff;
    --cta-muted: rgba(255, 255, 255, 0.76);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background: var(--canvas);
    color: var(--ink);
    font-family: Roboto;/*Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    transition: background-color 0.25s ease, color 0.25s ease;
}
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 44vw;
    height: 44vw;
    max-width: 640px;
    max-height: 640px;
    border-radius: 999px;
    filter: blur(18px);
    opacity: 0.55;
    pointer-events: none;
}
body::before { top: -24vw; right: -19vw; background: #cfe1ff; }
body::after { bottom: -26vw; left: -24vw; background: #ebe0ff; }
[data-theme="dark"] body::before { background: #1a2c55; }
[data-theme="dark"] body::after { background: #2d1f52; }

button, input { font: inherit; }
button { border: 0; }
a { color: inherit; }
svg { display: block; }

/* Auth */
.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(13, 24, 54, 0.42);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
}
.auth-modal.active { opacity: 1; visibility: visible; }
.auth-container {
    width: min(100%, 484px);
    padding: clamp(28px, 5vw, 48px);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 30px;
    background: var(--paper);
    box-shadow: var(--shadow-md);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.24s ease;
}
.auth-modal.active .auth-container { transform: translateY(0) scale(1); }
.auth-title { margin: 0 0 30px; font-size: clamp(28px, 4vw, 38px); line-height: 1.1;}
.form-group { position: relative; margin: 0 0 20px; }
.form-label { display: block; margin: 0 0 8px; color: var(--ink-soft); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.form-input {
    width: 100%;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); background: var(--paper); }
.suggestions-list {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    z-index: 50;
    display: none;
    max-height: 230px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow-md);
}
.suggestions-list.active { display: block; }
.suggestion-item { padding: 12px 14px; cursor: pointer; }
.suggestion-item + .suggestion-item { border-top: 1px solid var(--line); }
.suggestion-item:hover { background: var(--brand-soft); }
.checkbox-group { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 24px; }
.checkbox-custom { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--brand); border-radius: 7px; cursor: pointer; }
.checkbox-custom.checked { display: grid; place-items: center; background: var(--brand); }
.checkbox-custom.checked::after { content: "✓"; color: white; font-size: 13px; font-weight: 900; }
.checkbox-label { color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.privacy-link { color: var(--brand); font-weight: 700; cursor: pointer; }
.btn-primary, .btn-chat, .btn-chatbot-start, .btn-download-presentation, .btn-download-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 13px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(47, 103, 246, 0.18);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary { width: 100%; }
.btn-primary:hover, .btn-chat:hover, .btn-chatbot-start:hover, .btn-download-presentation:hover, .btn-download-chat:hover { transform: translateY(-2px); background: var(--brand-strong); box-shadow: 0 14px 28px rgba(47, 103, 246, 0.26); }
.btn-download-presentation:hover, .btn-download-chat:hover { background: var(--brand); color: #fff; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Page chrome */
.main-content { display: none; padding: 82px 24px 0; }
.main-content.active { display: block; }
.header {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 32px), 1180px);
    min-height: 54px;
    padding: 7px 8px 7px 18px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--paper) 80%, transparent);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(16px);
    transform: translateX(-50%);
}
.top-nav { display: flex; gap: 2px; align-items: center; }
.nav-item { font-family: Montserrat; padding: 8px 10px; border-radius: 10px; color: var(--ink-soft); font-size: 13px; font-weight: 750; text-decoration: none; transition: color 0.18s ease, background 0.18s ease; }
.nav-item:hover { color: var(--brand); background: var(--brand-soft); }
.theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
.theme-toggle:hover { background: var(--brand-soft); }
.theme-icon { width: 19px; height: 19px; fill: currentColor; }
.theme-icon.sun { display: none; }
[data-theme="dark"] .theme-icon.moon { display: none; }
[data-theme="dark"] .theme-icon.sun { display: block; }

/* Reading progress bar, glued to the bottom edge of the header pill.
   The wrapper reproduces the header's own box (inset: 0) and its exact
   border-radius, so the bar underneath is clipped by that real curve
   instead of a separately-radiused strip — it can't poke out past the
   header's rounded corners, and its ends follow the same curve. */
.scroll-progress {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    overflow: hidden;
    pointer-events: none;
}
.scroll-progress-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--title-gradient-end));
    transition: width 0.12s linear;
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    width: min(100%, 1180px);
    min-height: 490px;
    margin: 0 auto 46px;
    padding: clamp(48px, 4vw, 105px) clamp(24px, 4vw, 100px);
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--paper) 88%, var(--brand-soft)) 0%, var(--paper) 60%);
    box-shadow: var(--shadow-md);
}
.hero::before {
    content: "";
    position: absolute;
    top: -115px;
    right: -90px;
    width: 310px;
    height: 310px;
    border: 54px solid color-mix(in srgb, var(--brand) 14%, transparent);
    border-radius: 50%;
}
.hero::after {
    content: "";
    position: absolute;
    right: 9%;
    bottom: 17%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 28px 20px 0 color-mix(in srgb, var(--brand) 48%, transparent), 56px -9px 0 color-mix(in srgb, var(--brand) 28%, transparent), -22px 36px 0 color-mix(in srgb, var(--brand) 35%, transparent);
}
.digital-day-tag, .eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 0 0 18px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 78%, transparent);
    color: var(--brand);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.event-title-gradient {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0;
    background: linear-gradient(90deg, var(--title-gradient-start) 0%, var(--title-gradient-end) 52%, var(--title-gradient-glow) 100%);
    background-size: 160% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ink);
    font-size: clamp(48px, 8.2vw, 105px);
    font-weight: 600;
    letter-spacing: -0.065em;
    line-height: 0.92;
    animation: title-gradient-shift 7s ease-in-out infinite alternate;
    font-family: Montserrat;
}
@keyframes title-gradient-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.event-location-box {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 28px 0 0;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 74%, var(--paper));
    color: var(--brand);
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 10%, transparent);
}
.location-icon { width: 18px; height: 18px; fill: currentColor; }
.event-description { position: relative; z-index: 1; max-width: 600px; margin: 19px 0 0; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px); line-height: 1.48; }
.btn-chat { position: relative; z-index: 1; margin-top: 32px; }
.chat-btn-icon, .download-icon { width: 18px; height: 18px; fill: currentColor; }

/* Section layout */
.section { width: min(100%, 1180px); margin: 0 auto 72px; scroll-margin-top: 94px; }
.section-title { font-family: Montserrat; max-width: 900px; margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1;}
.section-subtitle { max-width: 560px; margin: 13px 0 28px; color: var(--ink-soft); font-size: 16px; }
.reveal-on-scroll { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal-on-scroll.visible { opacity: 1; transform: none; }

/* Program — vertical stepper */
.schedule-timeline { max-width: 760px; margin: 4px auto 0; counter-reset: schedule-step; }
.schedule-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 22px;
}
.schedule-item + .schedule-item { margin-top: 30px; }
.schedule-step-marker { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.schedule-step-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--brand);
    background: var(--paper);
    color: var(--brand);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.schedule-step-dot::before { counter-increment: schedule-step; content: counter(schedule-step); }
.schedule-step-marker::after {
    content: "";
    position: absolute;
    top: 34px;
    bottom: -30px;
    width: 2px;
    background: var(--line);
}
.schedule-item:last-child .schedule-step-marker::after { display: none; }
.schedule-step-content { padding-bottom: 2px; }
.schedule-time-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 820;
    letter-spacing: -0.01em;
}
.time-icon { display: none; }
.schedule-title { max-width: 700px; color: var(--ink); font-size: clamp(18px, 2.5vw, 23px); font-weight: 760; letter-spacing: -0.01em; line-height: 1.23; }
.schedule-speaker-wrapper { display: flex; gap: 11px; align-items: flex-start; margin-top: 10px; }
.speaker-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; fill: var(--brand); }
.schedule-speaker-name { color: var(--ink); font-weight: 800; }
.schedule-speaker-role { margin-top: 1px; color: var(--ink-soft); font-size: 13px; line-height: 1.4; }

/* Industry materials — aligned with speaker presentation cards */
.industry-grid { margin-top: 4px; }
.industry-presentation-card { min-height: 278px; }
.industry-presentation-icon {
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.industry-presentation-card .presentation-topic { margin-bottom: 22px; }

/* Top row: the one wide "hero" card plus a normal card beside it. Plain
   grid, since it's just these two — the hero spans 2 of the 3 columns
   (desktop only; see below), the normal card takes the third. */
.industry-hero-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }

/* Bottom 6 cards: a hand-tuned bento layout, not a uniform masonry — the
   left column stacks a tall card over a short one (31% width), while the
   remaining width is two stacked rows (04+05, then 07+08) that each
   split their own width unevenly, and in OPPOSITE directions (04 wider
   than 05; 08 wider than 07). A single CSS Grid can't give two rows
   different column splits — its track list is shared by every row — so
   each row is its own small flex container instead, nested inside a
   flex column next to the (separately flex-column) left card. */
.industry-bento { display: flex; gap: 14px; align-items: flex-start; }
.industry-bento-col0 { display: flex; flex-direction: column; gap: 14px; flex: 0 0 31%; min-width: 0; }
.industry-bento-right { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.industry-bento-row {
    display: flex;
    gap: 14px;
    /* Row partners keep their own natural height instead of the flex
       default (stretch) — otherwise opening one card's materials
       dropdown (which grows that card downward) would also inflate its
       row-mate to match, even though the row-mate's own content never
       changed. */
    align-items: flex-start;
}
.industry-bento-row > .presentation-card { flex: 1; min-width: 0; }
/* Both rows' right-hand cards (05 Здравоохранение, 08 Транспорт и
   логистика) are pinned to the exact same pixel width by app.js
   (alignIndustryCardWidths), matching card 02 — so the middle column (04,
   07) and right column (05, 08) line up between the two rows instead of
   each row splitting its width independently. flex: 1 above already
   makes 04 and 07 absorb whatever space 05/08 don't use, no extra ratio
   needed here.
*/

@media (min-width: 921px) {
    /* Hero: one wide card up top — spans 2 columns, with bigger type
       and a soft brand tint (via .featured-presentation). */
    .presentation-card.industry-card-hero { grid-column: span 2; min-height: 320px; padding: 30px; }
    /* Hero row's align-items is `start` (not the grid default `stretch`) so
       opening one card's dropdown doesn't inflate its row-mate to match —
       but that also means the row-mate no longer gets its resting height
       from being stretched to the hero card's row height. Pin it explicitly
       so the two cards still match at 320px when both are closed. */
    .industry-hero-row > .presentation-card:not(.industry-card-hero) { min-height: 320px; }
    .industry-card-hero .presentation-speaker-icon { width: 40px; height: 40px; margin: 22px 0 18px; }
    .industry-card-hero .presentation-name { font-size: 28px; }
    .industry-card-hero .presentation-topic { font-size: 14.5px; }

    /* Tall: a quieter, taller card within its own masonry column — this
       is what actually makes each column's total height differ from its
       neighbors (real masonry), rather than a spanned grid cell. */
    .presentation-card.industry-card-tall { min-height: 390px; padding: 26px; }
    .industry-card-tall .presentation-speaker-icon { width: 33px; height: 33px; margin: 30px 0 18px; }
    .industry-card-tall .presentation-name { font-size: 24px; }
    .industry-card-tall .presentation-topic { margin-bottom: 26px; }
}

/* Speaker materials */
.presentations-section { padding-top: 2px; }
.presentations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* Speaker cards only: true masonry via app.js, which splits the cards into
   independent column stacks (.presentations-column), so opening a card's
   materials dropdown only pushes down the card below it in the SAME
   column — other columns never move. Plain CSS grid can't do this (a grid
   row's height is shared across every column in that row), so the column
   count is JS-driven; only the gap is still controlled here, responsively.
   A distinct class from .presentations-grid above — that one is also used
   by the industry-expertise cards, which stay a plain, unaffected grid. */
.speaker-presentations-grid { display: flex; gap: 14px; align-items: flex-start; }
.presentations-column { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.presentation-card {
    display: flex;
    flex-direction: column;
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--shadow-xs);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.presentation-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--shadow-md); }
.featured-presentation { border-color: color-mix(in srgb, var(--brand) 44%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--brand-soft) 70%, var(--paper)) 0%, var(--paper) 55%); }
.presentation-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-size: 11px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.presentation-number { color: var(--brand); }
.presentation-format { padding: 4px 7px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); }
.presentation-speaker-icon { width: 27px; height: 27px; margin: 28px 0 16px; fill: var(--brand); }
.presentation-name { margin: 0; color: var(--ink); font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; }
.presentation-topic { flex: 1; margin: 9px 0 22px; color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.btn-download-presentation { align-self: flex-start; min-height: 42px; padding: 0 13px; border-radius: 999px; font-size: 13px; background: var(--brand-soft); color: var(--brand); border: none; box-shadow: none; }
/* One or more downloadable files per speaker, listed as rows instead of a
   single button, so a speaker with several materials (slides, recording,
   handout...) just gets more rows rather than needing a redesign. A card
   with exactly one material renders it as a plain link (below); app.js
   upgrades any card with 2+ materials into a collapsed dropdown so the
   card doesn't grow tall as more files are added over time. */
.presentation-materials { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 16px; }
.presentation-material-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.presentation-material-row:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-soft); }
.material-format { flex: 0 0 auto; min-width: 42px; padding: 3px 7px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 850; letter-spacing: 0.04em; text-align: center; }
.material-label { flex: 1; overflow-wrap: break-word; }
.presentation-material-row .download-icon { flex: 0 0 auto; width: 16px; height: 16px; fill: var(--ink-soft); }
.presentation-material-row:hover .download-icon { fill: var(--brand); }
/* Dropdown variant, added by app.js when a card has 2+ materials */
.presentation-materials-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: none;
    color: var(--ink);
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.presentation-materials-toggle:hover,
.presentation-materials-multi.open .presentation-materials-toggle { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-soft); }
.materials-chevron { flex: 0 0 auto; width: 16px; height: 16px; fill: var(--ink-soft); transition: transform 0.18s ease, fill 0.18s ease; }
.presentation-materials-multi.open .materials-chevron { transform: rotate(180deg); fill: var(--brand); }
/* Animated height via grid-template-rows (0fr -> 1fr) instead of the
   hidden attribute, so opening/closing the list is a smooth slide rather
   than an instant snap. The inner wrapper clips the content while collapsed. */
.presentation-materials-list {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}
.presentation-materials-list.open { grid-template-rows: 1fr; }
.presentation-materials-list-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.presentation-coming-soon {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 74%, var(--paper));
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
}
.materials-note { max-width: 740px; margin: 18px 0 0; color: var(--ink-soft); font-size: 13px; }
.materials-status-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); text-align: center; box-shadow: var(--shadow-xs); }
.materials-status-card .presentation-speaker-icon { margin: 0 auto 12px; }
.materials-status-title { font-size: 19px; font-weight: 800; }
.presentation-status { margin-top: 6px; color: var(--ink-soft); font-size: 13px; }

/* Chat CTA / floating controls */

.chatbot-cta-section {
    position: relative;
    overflow: hidden;
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: clamp(35px, 3vw, 70px);
    border: 1px solid color-mix(in srgb, var(--cta-bg) 82%, var(--line));
    border-radius: var(--radius-lg);
    background: var(--cta-bg);
    color: var(--cta-text);
    box-shadow: var(--shadow-md);
}

.chatbot-cta-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -90px;
    width: 310px;
    height: 310px;
    border: 54px solid color-mix(in srgb, var(--brand) 14%, transparent);
    border-radius: 50%;
}

.chatbot-cta-title { font-family: Montserrat; max-width: 700px; margin: 0; color: var(--cta-text); font-size: clamp(30px, 4.5vw, 50px); line-height: 1; letter-spacing: -0.04em; }
.chatbot-cta-text { margin: 15px 0 25px; color: var(--cta-muted); font-size: 16px; }
.btn-chatbot-start { background: #fff; color: #14213d; box-shadow: none; }
.btn-chatbot-start:hover { background: var(--brand); color: #fff; }

/* Footer — full-bleed bar glued to the page bottom. Colors are inverted
   relative to the page theme (dark panel while the site is light, light
   panel while the site is dark) by swapping --ink/--paper, which already
   flip per theme, rather than hardcoding colors here. */
.site-footer { margin: 40px -24px 0; padding: 34px 24px 45px; background: var(--ink); color: var(--paper); }
.footer-inner { width: min(100%, 1180px); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.footer-col-title { margin-bottom: 12px; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); font-size: 11px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-event-name, .footer-csm-name { margin-bottom: 10px; color: var(--paper); font-weight: 800; font-size: 16px; }
.footer-row { display: flex; align-items: center; gap: 9px; color: color-mix(in srgb, var(--paper) 78%, var(--ink)); font-size: 14px; }
.footer-row + .footer-row { margin-top: 8px; }
.footer-icon { flex: 0 0 auto; width: 16px; height: 16px; fill: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
a.footer-link { width: fit-content; color: color-mix(in srgb, var(--paper) 78%, var(--ink)); text-decoration: none; transition: color 0.18s ease; }
a.footer-link:hover { color: var(--paper); }
.chat-button-fixed, .scroll-top, .scroll-bottom-arrow {
    position: fixed;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
    color: var(--brand);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.chat-button-fixed { right: 23px; bottom: 24px; width: 56px; height: 56px; background: var(--brand); color: #fff; border-color: transparent; }
.scroll-top { left: 23px; bottom: 88px; }
.scroll-bottom-arrow { left: 23px; bottom: 24px; }
.chat-button-fixed:hover, .scroll-top:hover, .scroll-bottom-arrow:hover { transform: translateY(-3px); background: var(--brand); color: #fff; }
.chat-button-fixed:hover { background: var(--brand-strong); }
.chat-icon, .scroll-top svg, .scroll-bottom-arrow svg { width: 22px; height: 22px; fill: currentColor; }
.bottom-nav { display: none; }

/* Chat modal */
.chat-modal {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 200;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(420px, calc(100vw - 28px));
    height: min(660px, calc(100dvh - 44px));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 32px;
    background: var(--paper);
    box-shadow: 0 28px 80px rgba(16, 30, 68, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.98);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.chat-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}
@keyframes chat-content-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 19px 18px; border-bottom: 1px solid var(--line); }
.chat-title { margin: 0; font-size: 17px; letter-spacing: -0.025em; }
.chat-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 22px; line-height: 1; cursor: pointer; }
.chat-messages { min-height: 0; padding: 16px; overflow-y: auto; background: color-mix(in srgb, var(--canvas) 70%, var(--paper)); }
.chat-enter { animation: chat-content-in 0.34s cubic-bezier(.2,.8,.2,1) both; }
.message { max-width: 93%; margin: 0 0 10px; padding: 12px 14px; border-radius: 22px; font-size: 13px; line-height: 1.45; }
.message-sender { margin: 14px 4px 6px; font-size: 11px; font-weight: 750; letter-spacing: 0.01em; color: var(--ink-soft); }
.message-sender:first-child { margin-top: 0; }
.message-sender.user { text-align: right; }
.message-sender.bot { text-align: left; }
.message.bot, .info-block { border: 1px solid var(--line); border-bottom-left-radius: 9px; background: var(--paper); color: var(--ink); }
.message.bot strong { display: block; margin-top: 8px; font-weight: 800; }
.message.bot strong:first-child { margin-top: 0; }
.message.user { margin-left: auto; border-bottom-right-radius: 9px; background: var(--brand); color: #fff; }
.schedule-chat-block, .speaker-chat-block, .csm-chat-card, .industry-download-block, .speaker-download-block, .industry-buttons-container, .speaker-buttons-container { max-width: 100%; }
.schedule-chat-time-box { display: flex; gap: 7px; align-items: center; color: var(--brand); font-size: 12px; font-weight: 850; }
.schedule-chat-title { margin: 6px 0 10px; font-weight: 800; }
.schedule-chat-speaker-wrapper { display: flex; gap: 8px; margin-top: 8px; }
.schedule-chat-speaker-info, .speaker-chat-block { min-width: 0; }
.schedule-chat-speaker-name, .speaker-chat-name { font-weight: 800; }
.schedule-chat-speaker-role { color: var(--ink-soft); font-size: 12px; }
.speaker-chat-block { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.speaker-chat-details { min-width: 0; }
.speaker-chat-name { margin-bottom: 7px; }
.speaker-chat-meta { display: grid; gap: 5px; }
.speaker-chat-meta-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.speaker-chat-meta-label { color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.speaker-chat-meta-value { color: var(--ink); font-size: 12px; font-weight: 650; line-height: 1.36; }
.speaker-chat-icon-wrapper { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--brand-soft); }
.speaker-chat-icon { width: 16px; height: 16px; fill: var(--brand); }
.csm-chat-title, .industry-download-title, .speaker-download-name { margin-bottom: 9px; font-weight: 850; }
.csm-chat-row { display: grid; grid-template-columns: 87px 1fr; gap: 7px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; }
.csm-chat-label { color: var(--ink-soft); }
.csm-chat-value { overflow-wrap: anywhere; font-weight: 700; }
.chat-scenarios { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.industry-buttons-container, .speaker-buttons-container { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-btn { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 750; cursor: pointer; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; }
.scenario-btn:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.btn-download-chat { min-height: 38px; padding: 0 13px; border-radius: 999px; font-size: 12px; background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.speaker-materials-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.chat-input-area { display: flex; gap: 9px; padding: 11px 14px 14px; border-top: 1px solid var(--line); background: var(--paper); }
.chat-input { flex: 1; min-width: 0; height: 44px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); color: var(--ink); outline: none; }
.chat-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 13%, transparent); }
.btn-send { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 999px; background: var(--brand); color: #fff; cursor: pointer; }
.btn-send:hover { background: var(--brand-strong); }
.btn-send svg { width: 19px; height: 19px; fill: currentColor; }
.back-button { min-height: 34px; margin: 0 0 10px; padding: 0 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; cursor: pointer; }
.loading { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 12px; }
.loading::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 920px) {
    .industry-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .presentations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .industry-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .industry-bento-col0, .industry-bento-right, .industry-bento-row { display: contents; }
}
@media (max-width: 640px) {
    .main-content { padding: 76px 14px 0; }
    .header { top: 8px; width: calc(100% - 20px); min-height: 48px; padding: 5px 5px 5px 9px; border-radius: 15px; }
    .scroll-progress { border-radius: 15px; }
    .nav-item { padding: 7px 7px; font-size: 11px; }
    .theme-toggle { width: 35px; height: 35px; }
    .hero { min-height: 455px; margin-bottom: 38px; padding: 54px 24px; border-radius: 26px; }
    .hero::before { top: -135px; right: -130px; }
    .event-title-gradient { font-size: clamp(46px, 15vw, 72px); }
    .section { margin-bottom: 50px; }
    .section-heading-row { display: block; }
    .section-heading-row .section-subtitle { margin: 12px 0 0; }
    .schedule-item { grid-template-columns: 26px 1fr; column-gap: 14px; }
    .schedule-item + .schedule-item { margin-top: 24px; }
    .schedule-step-dot { width: 26px; height: 26px; font-size: 11px; }
    .schedule-step-marker::after { top: 26px; bottom: -24px; }
    /* Keep industry materials easy to scan: two cards in each row on mobile. */
    .industry-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
    .industry-bento { gap: 10px; }
    .presentations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    /* Speaker cards carry a materials list, not just one button — needs the
       full row width on mobile so labels don't wrap into a narrow column. */
    .presentations-column { gap: 12px; }
    .industry-presentation-card,
    .presentation-card { min-height: 0; padding: 14px; border-radius: 17px; }
    .presentation-card-top { font-size: 9px; }
    .presentation-format { padding: 3px 5px; border-radius: 6px; }
    .presentation-speaker-icon { width: 24px; height: 24px; margin: 18px 0 12px; }
    .presentation-name { font-size: 16px; line-height: 1.08; }
    .presentation-topic { margin: 8px 0 15px; font-size: 11px; line-height: 1.35; }
    .industry-presentation-card .presentation-topic { margin-bottom: 15px; }
    .btn-download-presentation,
    .presentation-coming-soon { width: 100%; min-height: 37px; padding: 0 8px; justify-content: center; font-size: 10px; text-align: center; }
    .btn-download-presentation .download-icon { width: 14px; height: 14px; }
    .chatbot-cta-section { border-radius: 26px; }
    .site-footer { margin: 32px -14px 0; padding: 26px 20px 90px; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    /* .scroll-top's mobile layout (display, position, at-bottom-slot) is defined
       further down, in the "mobile return control" block — kept in one place
       instead of splitting it across two media queries. */
    .scroll-bottom-arrow { left: 14px; bottom: 15px; width: 45px; height: 45px; }
    .chat-button-fixed { right: 14px; bottom: 15px; width: 52px; height: 52px; }
    .chat-modal { right: 10px; bottom: 10px; width: calc(100vw - 20px); height: min(680px, calc(100dvh - 20px)); border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}


/* Refined entrance and theme transition */
html.theme-transitioning,
html.theme-transitioning body {
    transition: background-color 480ms cubic-bezier(.2,.8,.2,1), color 360ms ease !important;
}
html.theme-transitioning body::before,
html.theme-transitioning body::after,
html.theme-transitioning .auth-modal,
html.theme-transitioning .auth-container,
html.theme-transitioning .auth-brand-panel,
html.theme-transitioning .auth-form-heading,
html.theme-transitioning .form-input,
html.theme-transitioning .suggestions-list,
html.theme-transitioning .header,
html.theme-transitioning .hero,
html.theme-transitioning .section,
html.theme-transitioning .schedule-item,
html.theme-transitioning .industry-presentation-card,
html.theme-transitioning .presentation-card,
html.theme-transitioning .chatbot-cta-section,
html.theme-transitioning .chat-modal,
html.theme-transitioning .chat-header,
html.theme-transitioning .chat-messages,
html.theme-transitioning .chat-scenarios,
html.theme-transitioning .chat-input-area,
html.theme-transitioning .message.bot,
html.theme-transitioning .info-block,
html.theme-transitioning .scenario-btn,
html.theme-transitioning .theme-toggle {
    transition-duration: 460ms !important;
    transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
}

.auth-modal {
    padding: max(20px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--title-gradient-glow) 24%, transparent), transparent 31%),
        radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--title-gradient-end) 22%, transparent), transparent 32%),
        rgba(9, 18, 43, 0.56);
    backdrop-filter: blur(20px) saturate(125%);
    transition: opacity 360ms ease, visibility 360ms ease, background-color 460ms cubic-bezier(.2,.8,.2,1);
}
.auth-shell {
    display: grid;
    grid-template-columns: minmax(230px, .86fr) minmax(370px, 1.14fr);
    width: min(100%, 920px);
    min-height: 548px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--paper) 56%, transparent);
    border-radius: 32px;
    background: color-mix(in srgb, var(--paper) 93%, transparent);
    box-shadow: 0 34px 96px rgba(8, 17, 43, 0.32);
    transform: translateY(18px) scale(.985);
    transition: transform 420ms cubic-bezier(.2,.85,.2,1), background-color 460ms cubic-bezier(.2,.8,.2,1), border-color 460ms cubic-bezier(.2,.8,.2,1), box-shadow 460ms cubic-bezier(.2,.8,.2,1);
}
.auth-modal.active .auth-shell { transform: translateY(0) scale(1); }
.auth-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    min-width: 0;
    padding: clamp(32px, 5vw, 58px);
    border: 0;
    border-radius: 0;
    background: var(--paper);
    box-shadow: none;
    transform: none;
}
.auth-modal.active .auth-container { transform: none; }
.auth-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(30px, 5vw, 54px);
    color: #fff;
    background:
        radial-gradient(circle at 20% 14%, rgba(101, 198, 255, .44), transparent 29%),
        radial-gradient(circle at 89% 87%, rgba(180, 118, 255, .5), transparent 37%),
        linear-gradient(145deg, #1c3fc6 0%, #5835ca 56%, #7d3ac4 100%);
    isolation: isolate;
}
.auth-brand-panel::before,
.auth-brand-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
}
.auth-brand-panel::before { width: 340px; height: 340px; right: -180px; bottom: -162px; }
.auth-brand-panel::after { width: 174px; height: 174px; left: -104px; top: 42%; }
.auth-brand-mark {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    width: max-content;
    height: 30px;
    margin: 0 0 40px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 11px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
}
.auth-brand-mark span { display: block; width: 5px; border-radius: 999px; background: #fff; }
.auth-brand-mark span:nth-child(1) { height: 8px; opacity: .72; }
.auth-brand-mark span:nth-child(2) { height: 15px; opacity: .88; }
.auth-brand-mark span:nth-child(3) { height: 21px; }
.auth-eyebrow,
.auth-kicker {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-family: Roboto;
}
.auth-eyebrow { color: rgba(255,255,255,.78); }
.auth-kicker { color: var(--brand); }
.auth-brand-title {
    max-width: 300px;
    margin: 0;
    color: #fff;
    font-size: clamp(44px, 5.7vw, 72px);
    font-weight: 860;
    letter-spacing: -.07em;
    line-height: .89;
    font-family: Montserrat;
}
.auth-brand-title span { display: block; color: rgba(255,255,255,.72); font-size: .54em; letter-spacing: -.055em; }
.auth-brand-text { max-width: 310px; margin: 24px 0 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.5; }
.auth-brand-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 32px; }
.auth-brand-pills span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.10); color: rgba(255,255,255,.86); font-size: 11px; font-weight: 750; backdrop-filter: blur(8px); }
.auth-form-heading { margin-bottom: 30px; }
.auth-title { margin: 0; color: var(--ink); font-size: clamp(31px, 4vw, 42px); font-weight: 840; line-height: 1; font-family: Montserrat; }
.auth-lead { max-width: 390px; margin: 13px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.form-group { margin-bottom: 19px; }
.form-label { margin-bottom: 9px; color: var(--ink); font-size: 12px; font-weight: 780; letter-spacing: .01em; }
.form-input { min-height: 54px; padding: 0 16px; border-radius: 16px; background: color-mix(in srgb, var(--canvas) 76%, var(--paper)); }
.form-input::placeholder { color: color-mix(in srgb, var(--ink-soft) 75%, transparent); }
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 13%, transparent); }
.suggestions-list { border-radius: 16px; }
.suggestion-item { padding: 13px 15px; }
.checkbox-group { gap: 11px; margin: 21px 0 24px; }
.checkbox-custom { flex-basis: 21px; width: 21px; height: 21px; margin-top: 0; padding: 0; border: 1.5px solid var(--brand); border-radius: 8px; background: transparent; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.checkbox-custom:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.checkbox-custom.checked { background: var(--brand); transform: scale(1.03); }
.checkbox-label { padding-top: 1px; font-size: 12px; }
.btn-primary { min-height: 54px; border-radius: 16px; background: linear-gradient(100deg, var(--brand), var(--title-gradient-end)); box-shadow: 0 13px 26px color-mix(in srgb, var(--brand) 25%, transparent); }
.btn-primary svg { width: 18px; height: 18px; fill: currentColor; transition: transform .2s ease; }
.btn-primary:hover svg { transform: translateX(3px); }
.auth-footnote { margin: 17px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.theme-toggle { position: relative; overflow: hidden; transition: background-color .25s ease, color .25s ease, transform .25s ease; }
.theme-toggle:hover { transform: translateY(-1px); }
.theme-icon { position: absolute; transition: opacity 300ms ease, transform 360ms cubic-bezier(.2,.8,.2,1); }
.theme-icon.moon { opacity: 1; transform: rotate(0) scale(1); }
.theme-icon.sun { display: block; opacity: 0; transform: rotate(-70deg) scale(.55); }
[data-theme="dark"] .theme-icon.moon { display: block; opacity: 0; transform: rotate(70deg) scale(.55); }
[data-theme="dark"] .theme-icon.sun { display: block; opacity: 1; transform: rotate(0) scale(1); }

@media (max-width: 720px) {
    .auth-modal { align-items: end; padding: 12px; }
    .auth-shell { display: block; width: min(100%, 540px); min-height: 0; max-height: calc(100dvh - 24px); overflow: auto; border-radius: 27px; }
    .auth-brand-panel { min-height: 190px; padding: 25px 26px; }
    .auth-brand-mark { margin-bottom: 24px; }
    .auth-brand-title { max-width: none; font-size: 45px; }
    .auth-brand-title span { display: inline; margin-left: 6px; }
    .auth-brand-text { max-width: 430px; margin-top: 15px; font-size: 13px; }
    .auth-brand-pills { display: none; }
    .auth-container { padding: 28px 25px 26px; }
    .auth-form-heading { margin-bottom: 24px; }
    .auth-title { font-size: 32px; }
}
@media (max-width: 390px) {
    .auth-brand-panel { min-height: 170px; padding: 22px; }
    .auth-brand-mark { margin-bottom: 16px; }
    .auth-brand-title { font-size: 40px; }
    .auth-brand-text { display: none; }
    .auth-container { padding: 24px 20px; }
    .auth-footnote { display: none; }
}


/* Minimal access screen and mobile return control — 2026-06-22 */
.auth-shell.auth-shell-minimal {
    display: block;
    width: min(100%, 460px);
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--paper) 62%, transparent);
    border-radius: 28px;
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    box-shadow: 0 28px 88px rgba(8, 17, 43, 0.30);
}
.auth-shell-minimal .auth-container {
    display: block;
    width: auto;
    padding: clamp(30px, 6vw, 42px);
    border: 0;
    border-radius: 28px;
    background: transparent;
    box-shadow: none;
}
.auth-topline {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 31px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .01em;
}
.auth-topline b { color: var(--brand); font-weight: 900; }
.auth-wordmark {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    width: 25px;
    height: 25px;
    padding: 5px;
    border-radius: 9px;
    background: linear-gradient(145deg, var(--brand), var(--title-gradient-end));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 26%, transparent);
}
.auth-wordmark i { display: block; width: 3px; border-radius: 999px; background: #fff; }
.auth-wordmark i:nth-child(1) { height: 6px; opacity: .7; }
.auth-wordmark i:nth-child(2) { height: 10px; opacity: .85; }
.auth-wordmark i:nth-child(3) { height: 14px; }
.auth-shell-minimal .auth-form-heading { margin-bottom: 27px; }
.auth-shell-minimal .auth-kicker {
    margin-bottom: 11px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 10px;
    letter-spacing: .065em;
}
.auth-shell-minimal .auth-title {
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.02;
}
.auth-shell-minimal .auth-lead { margin-top: 12px; font-size: 13px; }
.auth-shell-minimal .form-group { margin-bottom: 17px; }
.auth-shell-minimal .form-label { margin-bottom: 8px; color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.auth-shell-minimal .form-input { min-height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--canvas) 78%, var(--paper)); }
.auth-shell-minimal .checkbox-group { margin: 19px 0 22px; }
.auth-shell-minimal .btn-primary { min-height: 52px; border-radius: 14px; box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 20%, transparent); }
.auth-shell-minimal .auth-footnote { margin-top: 15px; text-align: center; }

.scroll-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease, background-color .18s ease, color .18s ease, bottom .22s ease;
    border: none;
}
.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.scroll-top.visible:hover { transform: translateY(-3px); }
.scroll-top-label { display: none; }

/* When the scroll-to-bottom arrow disappears at the end of the page,
   return-to-top drops into its slot instead of leaving an empty gap. */
.scroll-top.at-bottom-slot { bottom: 24px; }

.scroll-bottom-arrow {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s ease, visibility .22s ease, transform .18s ease, background-color .18s ease, color .18s ease;
    border: none;
}
.scroll-bottom-arrow.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 640px) {
    .auth-modal { align-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
    .auth-shell.auth-shell-minimal { width: min(100%, 430px); border-radius: 24px; }
    .auth-shell-minimal .auth-container { padding: 28px 22px 24px; border-radius: 24px; }
    .auth-topline { margin-bottom: 25px; }
    .auth-shell-minimal .auth-form-heading { margin-bottom: 23px; }
    .auth-shell-minimal .auth-title { font-size: 31px; }
    .auth-shell-minimal .auth-lead { font-size: 12.5px; }
    .auth-shell-minimal .form-input,
    .auth-shell-minimal .btn-primary { min-height: 50px; }
    .scroll-top {
        display: flex;
        left: 14px;
        bottom: calc(70px + env(safe-area-inset-bottom));
        width: auto;
        min-width: 54px;
        height: 50px;
        padding: 0 15px;
        border: none;
        border-radius: 999px;
        background: var(--paper);
        color: var(--brand);
        box-shadow: 0 14px 30px rgba(16, 30, 68, .18);
    }
    .scroll-top:hover,
    .scroll-top:active { transform: translateY(-2px); background: var(--brand); color: #fff; }
    .scroll-top.visible { transform: translateY(0); }
    .scroll-top.visible:hover,
    .scroll-top.visible:active { transform: translateY(-2px); }
    .scroll-top-label { display: inline; font-size: 12px; font-weight: 820; }
    .scroll-top svg { width: 18px; height: 18px; }
    /* Same slot the mobile .scroll-bottom-arrow sits in (left: 14px; bottom: 15px). */
    .scroll-top.at-bottom-slot { bottom: 15px; }
}

@media (max-width: 390px) {
    .auth-shell-minimal .auth-container { padding: 24px 20px 21px; }
    .auth-shell-minimal .auth-title { font-size: 29px; }
    .auth-shell-minimal .auth-footnote { display: block; }
}