/*
 * GraphicBidu — CSS Cleanup V1
 * Scope: visual layer only. No PHP, JS, routes, controller, database, or .htaccess changes.
 * Default mode: premium monochrome light interface.
 * Release: 2026-06-20
 */

/* --------------------------------------------------------------------------
   1. Foundation
   -------------------------------------------------------------------------- */
:root {
    --gb-ink: #0a0a0a;
    --gb-ink-2: #1b1b1b;
    --gb-paper: #ffffff;
    --gb-paper-soft: #f7f7f5;
    --gb-paper-muted: #efefec;
    --gb-line: #deded9;
    --gb-line-strong: #bdbdb7;
    --gb-text: #0a0a0a;
    --gb-text-secondary: #62625e;
    --gb-text-muted: #8a8a84;
    --gb-inverse: #ffffff;
    --gb-success: #167447;
    --gb-warning: #7a5716;
    --gb-danger: #8a2525;
    --gb-radius: 14px;
    --gb-radius-sm: 10px;
    --gb-radius-lg: 20px;
    --gb-max: 1180px;
    --gb-shadow: 0 14px 34px rgba(10, 10, 10, 0.06);
    --gb-shadow-hover: 0 18px 44px rgba(10, 10, 10, 0.09);
    --gb-focus: 0 0 0 4px rgba(10, 10, 10, 0.12);

    /* Compatibility tokens used throughout legacy markup. */
    --bg: var(--gb-paper);
    --bg-soft: var(--gb-paper-soft);
    --panel: var(--gb-paper);
    --panel-2: var(--gb-paper-soft);
    --line: var(--gb-line);
    --text: var(--gb-text);
    --muted: var(--gb-text-secondary);
    --white: var(--gb-inverse);
    --shadow: var(--gb-shadow);
    --radius: var(--gb-radius);
    --radius-sm: var(--gb-radius-sm);
    --max: var(--gb-max);
}

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

html {
    background: var(--gb-paper);
    color: var(--gb-text);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    background: var(--gb-paper);
    color: var(--gb-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.nav-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
select {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

::selection {
    background: var(--gb-ink);
    color: var(--gb-inverse);
}

:focus-visible {
    outline: 2px solid var(--gb-ink);
    outline-offset: 3px;
}

.wrapper {
    width: min(calc(100% - 40px), var(--gb-max));
    margin: 0 auto;
}

.narrow {
    width: min(calc(100% - 40px), 840px);
    margin: 0 auto;
}

.site-main {
    min-height: calc(100vh - 260px);
}

.section {
    padding: 80px 0;
}

.page-hero {
    padding-top: 70px;
    padding-bottom: 42px;
}

.dashboard-shell {
    padding-bottom: 60px;
}

.section-dark {
    background: var(--gb-paper-soft);
    border-top: 1px solid var(--gb-line);
    border-bottom: 1px solid var(--gb-line);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--gb-text);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.12;
}

h1 {
    font-size: clamp(36px, 4.8vw, 60px);
}

h2 {
    font-size: clamp(27px, 3vw, 38px);
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 15px;
}

p {
    margin: 0;
}

p + p {
    margin-top: 1rem;
}

ul,
ol {
    margin: 0;
    padding-left: 1.2rem;
}

.lead,
.muted,
.section p,
.dashboard-link,
.profile-role,
.search-summary,
.search-result p,
.definition-list span,
.metric-card span,
.data-table td span,
.launch-auth-intro,
.launch-auth-support-copy,
.launch-password-help,
.launch-footer-supporting-line,
.contact-support-subtitle {
    color: var(--gb-text-secondary);
}

.lead {
    max-width: 650px;
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.7;
}

.eyebrow,
.panel-label,
.launch-card-label,
.launch-footer-label,
.search-result-type,
.dropdown-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--gb-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 16px;
    height: 1px;
    background: var(--gb-ink);
    content: "";
    opacity: 0.55;
}

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

/* --------------------------------------------------------------------------
   2. Shared grid and visual components
   -------------------------------------------------------------------------- */
.hero-grid,
.two-column,
.public-profile-hero,
.dashboard-hero,
.contact-layout,
.messaging-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 32px;
    align-items: start;
}

.hero-grid,
.dashboard-hero {
    align-items: center;
}

.section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.metric-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.link-grid,
.directory-grid,
.review-summary-grid,
.job-board-grid,
.gallery-grid,
.gallery-grid-wide,
.skills-grid,
.mentor-grid,
.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.marketplace-grid,
.skills-grid,
.mentor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card,
.panel,
.pricing-card,
.auth-card,
.form-card,
.table-card,
.metric-card,
.public-score-card,
.summary-panel,
.toggle-card,
.dashboard-nav-group,
.resource-link,
.file-tile,
.message-thread-card,
.conversation-bubble,
.search-group,
.search-result,
.quick-action-card,
.outline-card,
.lesson-card,
.application-card,
.marketplace-card,
.purchase-card,
.contact-support-card,
.contact-form-card {
    background: var(--gb-paper);
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius);
    box-shadow: none;
}

.card,
.panel,
.pricing-card,
.auth-card,
.form-card,
.table-card,
.public-score-card,
.summary-panel,
.toggle-card,
.dashboard-nav-group,
.message-thread-card,
.conversation-bubble,
.search-group,
.quick-action-card,
.outline-card,
.lesson-card,
.application-card,
.marketplace-card,
.purchase-card,
.contact-support-card,
.contact-form-card {
    padding: 24px;
}

.panel-slim,
.compact-card {
    padding: 16px;
}

.metric-card,
.resource-link,
.file-tile,
.search-result {
    padding: 18px;
}

.card,
.panel,
.metric-card,
.resource-link,
.file-tile,
.search-result,
.message-thread-card,
.conversation-bubble,
.application-card,
.marketplace-card,
.purchase-card,
.quick-action-card {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.card:hover,
.metric-card:hover,
.resource-link:hover,
.file-tile:hover,
.search-result:hover,
.application-card:hover,
.marketplace-card:hover,
.purchase-card:hover,
.quick-action-card:hover {
    transform: translateY(-2px);
    border-color: var(--gb-ink);
    box-shadow: var(--gb-shadow-hover);
}

.panel > :first-child,
.card > :first-child,
.form-card > :first-child,
.table-card > :first-child,
.auth-card > :first-child {
    margin-top: 0;
}

.panel > :last-child,
.card > :last-child,
.form-card > :last-child,
.table-card > :last-child,
.auth-card > :last-child {
    margin-bottom: 0;
}

.empty-state {
    padding: 42px 24px;
    border: 1px dashed var(--gb-line-strong);
    border-radius: var(--gb-radius);
    color: var(--gb-text-secondary);
    text-align: center;
}

.note {
    padding: 16px 18px;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius-sm);
}

.note-muted {
    background: var(--gb-paper-soft);
}

.note-visible {
    background: #ffffff;
    border-color: var(--gb-line-strong);
}

.note-warning {
    background: #fff9eb;
    border-color: #e9d08e;
}

.top-note {
    margin-top: 18px;
}

.section-divider {
    height: 1px;
    margin: 28px 0;
    border: 0;
    background: var(--gb-line);
}

.inline-link {
    color: var(--gb-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.inline-link:hover {
    color: var(--gb-text-secondary);
}

.spaced-heading {
    margin-top: 32px;
}

.stacked-panels,
.stacked-copy,
.application-stack,
.course-outline,
.message-thread-list,
.conversation-stream,
.search-results,
.search-group-list,
.timeline {
    display: grid;
    gap: 16px;
}

.compact-stack {
    gap: 10px;
}

.align-start {
    align-items: flex-start;
}

/* --------------------------------------------------------------------------
   3. Buttons, forms, controls
   -------------------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--gb-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    text-align: center;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: var(--gb-ink);
    color: var(--gb-inverse);
    border-color: var(--gb-ink);
}

.button-primary:hover {
    background: var(--gb-ink-2);
    border-color: var(--gb-ink-2);
    box-shadow: 0 8px 20px rgba(10, 10, 10, 0.16);
}

.button-secondary {
    background: var(--gb-paper);
    color: var(--gb-text);
    border-color: var(--gb-ink);
}

.button-secondary:hover {
    background: var(--gb-paper-soft);
}

.button-ghost {
    color: var(--gb-text);
    border-color: transparent;
}

.button-ghost:hover {
    background: var(--gb-paper-soft);
}

.button-block {
    width: 100%;
}

.button-small {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.hero-actions,
.form-actions,
.inline-actions,
.inline-form-row,
.shortlist-header,
.shortlist-item-row,
.shortlist-action,
.purchase-head,
.application-header,
.search-group-head,
.public-badge-row,
.public-meta-row,
.filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-actions {
    flex-wrap: wrap;
    margin-top: 28px;
}

.form-actions {
    justify-content: flex-end;
    margin-top: 18px;
}

.top-form-actions {
    margin-top: 12px;
}

.dual-actions {
    justify-content: space-between;
}

.start-actions {
    justify-content: flex-start;
}

.inline-form,
.hidden-form {
    display: inline;
}

.form-stack,
.form-grid {
    display: grid;
    gap: 16px;
}

.form-stack {
    margin-top: 22px;
}

.form-stack label,
.form-grid label {
    display: grid;
    gap: 8px;
    color: var(--gb-text);
    font-size: 14px;
    font-weight: 600;
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
}

.full-width {
    grid-column: 1 / -1;
}

.field-label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--gb-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid var(--gb-line);
    border-radius: 10px;
    outline: none;
    background: var(--gb-paper);
    color: var(--gb-text);
    line-height: 1.35;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

textarea {
    min-height: 128px;
    resize: vertical;
}

select {
    appearance: auto;
}

input[type="file"] {
    padding: 9px 12px;
}

input::placeholder,
textarea::placeholder {
    color: var(--gb-text-muted);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--gb-ink);
    box-shadow: var(--gb-focus);
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--gb-ink);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.checkbox-card,
.consent-row,
.checkbox-field {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--gb-line);
    border-radius: 10px;
    background: var(--gb-paper-soft);
    color: var(--gb-text);
    font-weight: 500;
}

.consent-row,
.launch-legal-checkbox {
    align-items: flex-start;
}

.launch-legal-checkbox {
    display: flex !important;
    gap: 10px !important;
    color: var(--gb-text-secondary);
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5;
}

.launch-legal-checkbox span {
    flex: 1 1 auto;
}

.launch-legal-checkbox a,
.launch-inline-link {
    color: var(--gb-text);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.launch-password-field {
    position: relative;
}

.launch-password-field input {
    padding-right: 48px;
}

.launch-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--gb-text-secondary);
    transform: translateY(-50%);
}

.launch-password-toggle:hover {
    background: var(--gb-paper-soft);
    color: var(--gb-text);
}

.launch-eye-icon {
    position: relative;
    width: 18px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-radius: 50% / 65%;
}

.launch-eye-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%);
}

.launch-password-toggle.is-visible .launch-eye-icon::after {
    position: absolute;
    top: -4px;
    left: 8px;
    width: 1.5px;
    height: 17px;
    border-radius: 99px;
    background: currentColor;
    content: "";
    transform: rotate(-45deg);
}

.launch-auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.launch-password-help,
.error-text {
    font-size: 13px;
    font-weight: 400;
}

.error-text {
    color: var(--gb-danger);
}

.flash {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius-sm);
}

.flash-success {
    background: #f0faf4;
    border-color: #b7ddc5;
    color: #145c36;
}

.flash-error {
    background: #fff2f2;
    border-color: #e8bdbd;
    color: #842121;
}

/* --------------------------------------------------------------------------
   4. Header — existing markup only, no PHP structure change
   -------------------------------------------------------------------------- */
.site-header.launch-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--gb-line);
    backdrop-filter: blur(14px);
}

.launch-header-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    min-height: 68px;
}

.brand,
.launch-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    color: var(--gb-text);
    font-weight: 700;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.brand-logo {
    width: auto;
    height: 32px;
    max-width: 42px;
    object-fit: contain;
}

.brand-text {
    font-size: 15px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.launch-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 24px;
}

.launch-nav-group {
    position: relative;
}

.launch-nav-summary,
.launch-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gb-text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    list-style: none;
    cursor: pointer;
}

.launch-nav-summary::-webkit-details-marker,
.profile-trigger::-webkit-details-marker,
.launch-mobile-group-summary::-webkit-details-marker {
    display: none;
}

.launch-nav-summary:hover,
.launch-nav-summary.active,
.launch-nav-link:hover,
.launch-nav-link.active {
    color: var(--gb-text);
}

.launch-nav-summary::after {
    width: 6px;
    height: 6px;
    margin-left: 7px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    opacity: 0.72;
    transform: rotate(45deg);
}

.launch-nav-group[open] .launch-nav-summary::after {
    margin-top: 3px;
    transform: rotate(225deg);
}

.launch-nav-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    display: none;
    min-width: 230px;
    padding: 8px;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: var(--gb-paper);
    box-shadow: var(--gb-shadow-hover);
    transform: translateX(-50%);
}

.launch-nav-group[open] .launch-nav-dropdown {
    display: grid;
    gap: 3px;
}

.launch-nav-dropdown-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--gb-text-secondary);
    font-size: 14px;
    font-weight: 550;
}

.launch-nav-dropdown-link:hover,
.launch-nav-dropdown-link.active {
    background: var(--gb-paper-soft);
    color: var(--gb-text);
}

.launch-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--gb-line);
    border-radius: 9px;
    background: var(--gb-paper);
    color: var(--gb-text);
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.icon-button:hover {
    border-color: var(--gb-ink);
    background: var(--gb-paper-soft);
    transform: translateY(-1px);
}

.icon-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.header-auth,
.desktop-auth-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-menu {
    position: relative;
}

.profile-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    gap: 9px;
    padding: 4px 9px 4px 4px;
    border: 1px solid var(--gb-line);
    border-radius: 10px;
    background: var(--gb-paper);
    color: var(--gb-text);
    cursor: pointer;
    list-style: none;
}

.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gb-ink);
    color: var(--gb-inverse);
    font-size: 12px;
    font-weight: 700;
}

.profile-meta {
    display: grid;
    gap: 1px;
    text-align: left;
}

.profile-name {
    max-width: 170px;
    overflow: hidden;
    color: var(--gb-text);
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-role {
    font-size: 11px;
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: none;
    width: min(290px, calc(100vw - 32px));
    padding: 10px;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: var(--gb-paper);
    box-shadow: var(--gb-shadow-hover);
}

.profile-menu[open] .dropdown-panel {
    display: grid;
    gap: 6px;
}

.dropdown-head {
    display: grid;
    gap: 3px;
    padding: 6px 8px 12px;
    border-bottom: 1px solid var(--gb-line);
}

.dropdown-head strong {
    font-size: 14px;
}

.dropdown-head span,
.dropdown-section-label {
    color: var(--gb-text-secondary);
    font-size: 12px;
}

.dropdown-section {
    display: grid;
    gap: 3px;
}

.dropdown-section + .dropdown-section {
    padding-top: 8px;
    border-top: 1px solid var(--gb-line);
}

.dropdown-section a,
.dropdown-section button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--gb-text-secondary);
    text-align: left;
    font-size: 14px;
    font-weight: 550;
}

.dropdown-section a:hover,
.dropdown-section a.active,
.dropdown-section button:hover {
    background: var(--gb-paper-soft);
    color: var(--gb-text);
}

.dropdown-action .button {
    justify-content: center;
}

.launch-mobile-shortcut,
.launch-mobile-auth-shortcuts,
.launch-mobile-panel,
.mobile-search-button,
.launch-nav-toggle {
    display: none;
}

/* --------------------------------------------------------------------------
   5. Homepage and public marketing visuals
   -------------------------------------------------------------------------- */
.hero-home,
.launch-hero {
    padding-top: 86px;
    padding-bottom: 72px;
}

.launch-hero-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(400px, 0.88fr);
    gap: 56px;
}

.hero-copy,
.launch-hero-copy {
    max-width: 560px;
}

.launch-hero-copy h1 {
    max-width: 12ch;
}

.launch-hero-showcase {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 430px;
}

.launch-app-frame {
    position: relative;
    width: min(100%, 510px);
    padding: 16px;
    overflow: hidden;
    border: 1px solid #323232;
    border-radius: 22px;
    background: #171717;
    box-shadow: 0 24px 54px rgba(10, 10, 10, 0.16);
}

.launch-app-frame-glow {
    display: none;
}

.launch-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 14px;
}

.launch-window-dots {
    display: inline-flex;
    gap: 6px;
}

.launch-window-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #777;
}

.launch-window-dots span:first-child {
    background: #969696;
}

.launch-app-title,
.launch-app-badge,
.launch-card-label,
.launch-status-row,
.launch-mini-pill,
.launch-status-pill {
    color: #f7f7f5;
}

.launch-app-title {
    font-size: 12px;
    font-weight: 600;
}

.launch-app-badge,
.launch-status-pill,
.launch-mini-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 10px;
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.launch-app-body {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(165px, 0.78fr);
    gap: 14px;
    padding: 14px;
    border: 1px solid #393939;
    border-radius: 16px;
    background: #111111;
}

.launch-preview-column {
    display: grid;
    gap: 14px;
}

.launch-profile-preview,
.launch-credibility-card,
.launch-proof-card,
.launch-mini-card,
.launch-status-row {
    border: 1px solid #363636;
    border-radius: 14px;
    background: #1d1d1d;
}

.launch-profile-preview {
    display: flex;
    align-items: center;
    min-height: 138px;
    gap: 14px;
    padding: 16px;
}

.launch-profile-avatar {
    width: 62px;
    height: 62px;
    border: 1px solid #555;
    border-radius: 18px;
    background: #2b2b2b;
}

.launch-profile-copy {
    display: grid;
    flex: 1;
    gap: 10px;
}

.launch-profile-line {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 99px;
    background: #60605b;
}

.launch-profile-line.short {
    width: 70%;
}

.launch-profile-line.tiny {
    width: 46%;
}

.launch-credibility-card {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
}

.launch-credibility-card strong {
    color: #ffffff;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.launch-card-label {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.1em;
}

.launch-status-row {
    justify-content: space-between;
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    font-size: 13px;
}

.launch-proof-card {
    display: grid;
    min-height: 145px;
    gap: 18px;
    padding: 16px;
}

.launch-proof-bars {
    display: grid;
    gap: 10px;
}

.launch-proof-bars span {
    display: block;
    height: 10px;
    border-radius: 99px;
    background: #676761;
}

.launch-proof-bars span:nth-child(2) {
    width: 82%;
}

.launch-proof-bars span:nth-child(3) {
    width: 58%;
}

.launch-mini-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 96px;
    gap: 10px;
    padding: 14px;
}

.launch-pillars-section {
    padding-top: 36px;
    padding-bottom: 78px;
}

.hero-pillars,
.launch-pillars-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.launch-pillar-card {
    min-height: 204px;
}

.card-symbol {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    border: 1px solid var(--gb-line);
    border-radius: 11px;
    background: var(--gb-paper-soft);
}

.card-symbol::after {
    position: absolute;
    inset: 11px;
    border-radius: 50%;
    background: var(--gb-ink);
    content: "";
}

.trust-band {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 42px;
    align-items: center;
}

.trust-copy {
    max-width: 620px;
}

/* --------------------------------------------------------------------------
   6. Auth, dashboards, navigation
   -------------------------------------------------------------------------- */
.auth-section {
    min-height: calc(100vh - 260px);
    display: grid;
    align-items: center;
}

.auth-wrap,
.pricing-wrap {
    display: flex;
    justify-content: center;
}

.auth-card,
.pricing-card {
    width: min(100%, 520px);
}

.wide-auth-card {
    width: min(100%, 860px);
}

.launch-auth-card {
    padding: 30px;
}

.launch-auth-card h1 {
    font-size: clamp(28px, 3vw, 34px);
}

.launch-auth-support-copy {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.launch-auth-secondary-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--gb-text-secondary);
    font-size: 14px;
}

.dashboard-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.dashboard-nav-group {
    padding: 14px;
}

.dashboard-nav-group h2 {
    margin-bottom: 10px;
    color: var(--gb-text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-nav-links {
    display: grid;
    gap: 5px;
}

.dashboard-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    gap: 10px;
    padding: 8px 9px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.dashboard-link:hover,
.dashboard-link.active {
    background: var(--gb-paper-soft);
    color: var(--gb-text);
}

.dashboard-link-arrow {
    color: var(--gb-text-muted);
}

.dashboard-hero-panel {
    display: grid;
    gap: 14px;
}

.launch-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 0;
}

.launch-stats div {
    padding: 12px;
    border: 1px solid var(--gb-line);
    border-radius: 10px;
    background: var(--gb-paper-soft);
}

.launch-stats dt {
    color: var(--gb-text-secondary);
    font-size: 12px;
}

.launch-stats dd {
    margin: 5px 0 0;
    font-size: 16px;
    font-weight: 750;
}

.quick-action-card {
    display: grid;
    align-content: start;
    gap: 12px;
}

.metric-card span {
    display: block;
    font-size: 13px;
}

.metric-card strong {
    display: block;
    margin-top: 7px;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.subnav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--gb-line);
    border-radius: 999px;
    color: var(--gb-text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.subnav a:hover,
.subnav a.active {
    border-color: var(--gb-ink);
    color: var(--gb-text);
}

/* --------------------------------------------------------------------------
   7. Data, status, directory and profile elements
   -------------------------------------------------------------------------- */
.definition-list {
    display: grid;
    gap: 0;
    list-style: none;
    padding: 0;
}

.definition-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--gb-line);
}

.definition-list li:first-child {
    padding-top: 0;
}

.definition-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.definition-list strong {
    color: var(--gb-text);
    font-weight: 700;
    text-align: right;
}

.compact-definitions {
    margin-top: 18px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--gb-line);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    color: var(--gb-text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.data-table td {
    font-size: 14px;
}

.data-table td span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
}

.empty-cell {
    padding: 28px !important;
    color: var(--gb-text-secondary);
    text-align: center !important;
}

.status-pill,
.registry-state,
.chip,
.search-group-count,
.search-result-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid var(--gb-line-strong);
    border-radius: 999px;
    background: var(--gb-paper);
    color: var(--gb-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
}

.status-approved,
.status-published,
.status-active,
.status-completed,
.status-accepted,
.status-feedback_ready,
.registry-valid {
    border-color: var(--gb-ink);
    background: var(--gb-ink);
    color: var(--gb-inverse);
}

.status-draft,
.status-submitted,
.status-assigned,
.status-under_review,
.status-needs_improvement,
.status-expired,
.status-rejected,
.registry-expired,
.registry-revoked,
.registry-not-found {
    background: var(--gb-paper-soft);
}

.chip-wrap,
.compact-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.public-badge-row,
.public-meta-row {
    flex-wrap: wrap;
}

.public-meta-row {
    color: var(--gb-text-secondary);
    font-size: 14px;
}

.public-score-card strong {
    display: block;
    margin: 8px 0;
    font-size: 46px;
    line-height: 1;
}

.registry-panel,
.badge-panel {
    text-align: center;
}

.registry-state {
    margin-top: 10px;
}

.directory-card h2 {
    margin-bottom: 7px;
    font-size: 22px;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--gb-line);
    border-radius: 9px;
    color: var(--gb-text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.pagination a:hover,
.pagination a.active {
    border-color: var(--gb-ink);
    background: var(--gb-ink);
    color: var(--gb-inverse);
}

.timeline-item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
}

.timeline-dot {
    width: 10px;
    height: 10px;
    margin-top: 10px;
    border-radius: 50%;
    background: var(--gb-ink);
}

.timeline-content {
    padding: 15px 17px;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius-sm);
    background: var(--gb-paper-soft);
}

.timeline-content p {
    margin-top: 5px;
}

.timeline-content span {
    color: var(--gb-text-secondary);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   8. Marketplace, media, jobs, messages
   -------------------------------------------------------------------------- */
.marketplace-thumb,
.purchase-thumb {
    width: 100%;
    border: 1px solid var(--gb-line);
    border-radius: 10px;
    background: var(--gb-paper-soft);
    object-fit: cover;
}

.marketplace-thumb {
    aspect-ratio: 16 / 10;
}

.marketplace-thumb-preview {
    max-height: 300px;
}

.marketplace-thumb-placeholder {
    display: grid;
    min-height: 170px;
    place-items: center;
    color: var(--gb-text-secondary);
}

.marketplace-price-row {
    display: grid;
    gap: 4px;
    margin-top: 16px;
}

.marketplace-price-row strong {
    font-size: 28px;
    line-height: 1;
}

.gallery-grid {
    gap: 14px;
}

.file-tile img {
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--gb-line);
    border-radius: 8px;
    object-fit: cover;
}

.file-remove {
    color: var(--gb-text-secondary);
    font-size: 13px;
}

.purchase-head {
    justify-content: flex-start;
}

.purchase-thumb {
    width: 92px;
    min-width: 92px;
    height: 72px;
}

.purchase-download .button {
    width: fit-content;
}

.compact-downloads {
    margin-top: 16px;
}

.job-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.job-apply-form {
    display: grid;
    gap: 12px;
    width: 100%;
}

.job-apply-form textarea {
    min-height: 112px;
}

.application-header {
    justify-content: space-between;
}

.compact-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.compact-metrics div {
    padding: 12px;
    border: 1px solid var(--gb-line);
    border-radius: 10px;
    background: var(--gb-paper-soft);
}

.compact-metrics strong,
.compact-metrics span {
    display: block;
}

.message-thread-unread {
    border-color: var(--gb-ink);
}

.resource-link {
    display: grid;
    gap: 6px;
}

.resource-link strong {
    color: var(--gb-text);
}

.resource-link span {
    color: var(--gb-text-secondary);
    overflow-wrap: anywhere;
    font-size: 14px;
}

.resource-link-active {
    border-color: var(--gb-ink);
}

.conversation-bubble-own {
    background: var(--gb-paper-soft);
    border-color: var(--gb-line-strong);
}

.code-panel {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius-sm);
    background: var(--gb-ink);
    color: #f3f3ef;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer.launch-footer {
    margin-top: 0;
    padding: 64px 0 28px;
    background: var(--gb-ink);
    color: var(--gb-inverse);
    border-top: 1px solid var(--gb-ink);
}

.launch-footer-shell {
    display: grid;
    gap: 34px;
}

.launch-footer-band {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.75fr);
    gap: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.16);
}

.launch-footer-brand {
    display: grid;
    gap: 12px;
    align-content: start;
}

.launch-footer-brand .brand,
.launch-footer-brand .brand-text {
    color: var(--gb-inverse);
}

.launch-footer-brand .brand-logo {
    filter: brightness(0) invert(1);
}

.launch-footer-tagline {
    margin: 0;
    color: var(--gb-inverse);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.45;
}

.launch-footer-supporting-line {
    margin: 0;
    color: #c8c8c1;
    font-size: 14px;
}

.launch-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.launch-social-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.26);
    border-radius: 9px;
    color: #f8f8f3;
}

.launch-social-pill:hover {
    background: rgba(255,255,255,0.12);
}

.launch-social-pill svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.launch-footer-newsletter {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--gb-radius);
    background: rgba(255,255,255,0.045);
}

.launch-footer-label {
    margin: 0;
    color: #c8c8c1;
}

.launch-footer-newsletter h3 {
    color: var(--gb-inverse);
    font-size: 20px;
    letter-spacing: -0.025em;
}

.footer-newsletter-form,
.launch-newsletter-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.footer-newsletter-form input,
.launch-newsletter-form input {
    min-width: 0;
    flex: 1;
    border-color: rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.98);
    color: var(--gb-text);
}

.footer-newsletter-form .button,
.launch-newsletter-form .button {
    flex: 0 0 auto;
}

.footer-grid.launch-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.footer-grid.launch-footer-grid h4 {
    margin: 0 0 12px;
    color: #c8c8c1;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-grid.launch-footer-grid a {
    display: block;
    margin-top: 9px;
    color: #f6f6f1;
    font-size: 14px;
}

.footer-grid.launch-footer-grid a:hover {
    color: #c8c8c1;
}

.footer-bottom {
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.16);
}

.footer-meta,
.launch-footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 22px;
    color: #c8c8c1;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
    .launch-header-shell {
        gap: 20px;
    }

    .launch-nav {
        gap: 20px;
    }

    .launch-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
        gap: 34px;
    }

    .metric-grid-5,
    .dashboard-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .marketplace-grid,
    .skills-grid,
    .mentor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .wrapper,
    .narrow {
        width: min(calc(100% - 32px), var(--gb-max));
    }

    .launch-header-shell {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 62px;
        gap: 14px;
    }

    .launch-nav,
    .desktop-search-button,
    .desktop-auth-actions,
    .launch-profile-menu,
    .launch-mobile-shortcut {
        display: none !important;
    }

    .launch-header-right {
        gap: 8px;
    }

    .launch-mobile-auth-shortcuts {
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
    }

    .launch-mobile-auth-link {
        color: var(--gb-text-secondary);
        font-size: 13px;
        font-weight: 600;
    }

    .launch-mobile-auth-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 12px;
        border-radius: 9px;
        background: var(--gb-ink);
        color: var(--gb-inverse);
        font-size: 13px;
        font-weight: 700;
    }

    .launch-nav-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        gap: 4px;
        padding: 0;
        border: 1px solid var(--gb-line);
        border-radius: 10px;
        background: var(--gb-paper);
        color: var(--gb-text);
    }

    .launch-nav-toggle span {
        display: block;
        width: 17px;
        height: 1.5px;
        border-radius: 99px;
        background: currentColor;
        transition: transform 160ms ease, opacity 160ms ease;
    }

    .launch-nav-toggle.is-active span:nth-child(1) {
        transform: translateY(5.5px) rotate(45deg);
    }

    .launch-nav-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .launch-nav-toggle.is-active span:nth-child(3) {
        transform: translateY(-5.5px) rotate(-45deg);
    }

    .launch-mobile-panel {
        display: none;
        padding: 16px 0 20px;
        border-top: 1px solid var(--gb-line);
    }

    .launch-mobile-panel.is-open {
        display: grid;
        gap: 14px;
    }

    .launch-mobile-nav {
        display: grid;
        gap: 8px;
    }

    .launch-mobile-group {
        display: grid;
        gap: 8px;
    }

    .launch-mobile-group-summary,
    .launch-mobile-nav-link {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 0 14px;
        border: 1px solid var(--gb-line);
        border-radius: 10px;
        background: var(--gb-paper);
        color: var(--gb-text);
        font-size: 14px;
        font-weight: 650;
        list-style: none;
    }

    .launch-mobile-group-summary::after {
        width: 7px;
        height: 7px;
        margin-left: auto;
        margin-top: -3px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        content: "";
        transform: rotate(45deg);
    }

    .launch-mobile-group[open] .launch-mobile-group-summary::after {
        margin-top: 3px;
        transform: rotate(225deg);
    }

    .launch-mobile-group-panel {
        display: none;
        gap: 7px;
        padding-left: 10px;
    }

    .launch-mobile-group[open] .launch-mobile-group-panel {
        display: grid;
    }

    .launch-mobile-nav-link {
        color: var(--gb-text-secondary);
        font-weight: 600;
    }

    .launch-mobile-nav-link:hover,
    .launch-mobile-nav-link.active {
        border-color: var(--gb-ink);
        color: var(--gb-text);
    }

    .launch-mobile-panel-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .mobile-search-button {
        display: inline-flex;
    }

    .launch-mobile-panel-actions .button {
        flex: 1 1 160px;
    }

    .hero-grid,
    .two-column,
    .launch-hero-grid,
    .public-profile-hero,
    .dashboard-hero,
    .contact-layout,
    .messaging-layout,
    .trust-band,
    .launch-footer-band {
        grid-template-columns: 1fr;
    }

    .launch-hero-copy,
    .hero-copy {
        max-width: 660px;
    }

    .launch-hero-copy h1 {
        max-width: 14ch;
    }

    .launch-hero-showcase {
        min-height: auto;
    }

    .dashboard-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-grid.launch-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .launch-footer-newsletter {
        max-width: 520px;
    }
}

@media (max-width: 720px) {
    .section {
        padding: 54px 0;
    }

    .page-hero {
        padding-top: 54px;
        padding-bottom: 26px;
    }

    .hero-home,
    .launch-hero {
        padding-top: 58px;
        padding-bottom: 48px;
    }

    h1,
    .hero h1,
    .page-hero h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 30px;
    }

    .section-grid,
    .link-grid,
    .directory-grid,
    .review-summary-grid,
    .job-board-grid,
    .gallery-grid,
    .gallery-grid-wide,
    .skills-grid,
    .mentor-grid,
    .marketplace-grid,
    .metric-grid-4,
    .metric-grid-5,
    .dashboard-nav {
        grid-template-columns: 1fr;
    }

    .hero-pillars,
    .launch-pillars-grid {
        grid-template-columns: 1fr;
    }

    .launch-app-body {
        grid-template-columns: 1fr;
    }

    .launch-preview-column-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .launch-proof-card,
    .launch-mini-card {
        min-height: 118px;
    }

    .form-grid,
    .checkbox-grid,
    .job-action-grid,
    .compact-metrics {
        grid-template-columns: 1fr;
    }

    .full-width {
        grid-column: auto;
    }

    .data-table {
        min-width: 640px;
    }

    .table-card {
        overflow-x: auto;
    }

    .footer-newsletter-form,
    .launch-newsletter-form,
    .search-page-form {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-newsletter-form .button,
    .launch-newsletter-form .button {
        width: 100%;
    }

    .form-actions,
    .dual-actions,
    .inline-actions,
    .shortlist-header,
    .shortlist-item-row,
    .shortlist-action,
    .purchase-head,
    .application-header,
    .search-group-head,
    .public-badge-row,
    .public-meta-row,
    .filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    .definition-list li {
        flex-direction: column;
        gap: 4px;
    }

    .definition-list strong {
        text-align: left;
    }

    .launch-auth-card {
        padding: 22px;
    }

    .launch-auth-secondary-links {
        align-items: center;
        flex-direction: column;
    }

    .launch-footer-band {
        gap: 28px;
    }
}

@media (max-width: 480px) {
    .wrapper,
    .narrow {
        width: min(calc(100% - 24px), var(--gb-max));
    }

    h1,
    .hero h1,
    .page-hero h1 {
        font-size: 34px;
    }

    .lead {
        font-size: 16px;
    }

    .launch-header-shell {
        gap: 8px;
    }

    .brand-logo {
        height: 30px;
        max-width: 38px;
    }

    .brand-text {
        font-size: 15px;
    }

    .launch-mobile-auth-shortcuts {
        gap: 7px;
    }

    .launch-mobile-auth-link {
        font-size: 12px;
    }

    .launch-mobile-auth-pill {
        min-height: 34px;
        padding: 0 10px;
        font-size: 12px;
    }

    .launch-app-frame {
        padding: 12px;
    }

    .launch-app-body {
        padding: 10px;
    }

    .launch-preview-column-side {
        grid-template-columns: 1fr;
    }

    .launch-profile-preview {
        min-height: 120px;
        padding: 13px;
    }

    .launch-profile-avatar {
        width: 52px;
        height: 52px;
    }

    .card,
    .panel,
    .form-card,
    .table-card,
    .auth-card,
    .pricing-card,
    .contact-support-card,
    .contact-form-card {
        padding: 18px;
    }

    .button,
    .hero-actions .button {
        width: 100%;
    }

    .launch-mobile-panel-actions .icon-button {
        flex: 0 0 44px;
    }

    .footer-grid.launch-footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-meta,
    .launch-footer-meta {
        justify-content: flex-start;
        flex-direction: column;
    }
}


/* --------------------------------------------------------------------------
   11. Compatibility helpers used by existing views
   -------------------------------------------------------------------------- */
.header-shell { width: 100%; }
.site-nav { min-width: 0; }
.nav-toggle { border: 0; }

.check-list,
.stack-list,
.compact-list {
    display: grid;
    gap: 10px;
    color: var(--gb-text-secondary);
}

.check-list li::marker,
.stack-list li::marker,
.compact-list li::marker {
    color: var(--gb-ink);
}

.compact-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.compact-timeline {
    margin-top: 0;
}

.spaced-table {
    margin-top: 18px;
}

.pricing-cta {
    margin-top: 22px;
}

.search-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--gb-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.search-back-link:hover,
.search-card-link:hover {
    color: var(--gb-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.search-state-card {
    max-width: 720px;
}

.search-result-main {
    min-width: 0;
}

.search-result-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.contact-page-hero {
    padding-top: 68px;
    padding-bottom: 32px;
}

.contact-support-card {
    display: grid;
    align-content: start;
    gap: 16px;
}

.contact-support-list {
    display: grid;
    gap: 0;
}

.contact-support-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--gb-line);
}

.contact-support-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.contact-support-dot {
    width: 6px;
    height: 6px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--gb-ink);
}

.contact-support-item > div {
    display: grid;
    gap: 3px;
}

.contact-support-label {
    color: var(--gb-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-support-value {
    color: var(--gb-text);
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.job-card,
.mentor-card {
    min-height: 100%;
}

.launch-auth-form {
    gap: 18px;
}

.launch-header-auth,
.launch-profile-dropdown,
.launch-profile-trigger,
.launch-search-button,
.launch-mobile-dashboard-button,
.launch-preview-column-main,
.launch-hero-actions,
.launch-footer-brand-link,
.launch-footer-bottom,
.launch-footer-meta-primary,
.launch-footer-meta-secondary {
    /* marker classes retained intentionally for existing PHP markup */
}

@media (max-width: 720px) {
    .search-result-meta {
        justify-content: flex-start;
    }

    .compact-list li {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}


/* --------------------------------------------------------------------------
   13. Launch interaction and accessibility hardening
   Scope: global navigation, dropdowns, focus, motion, print only.
   -------------------------------------------------------------------------- */
.site-header.launch-header {
    isolation: isolate;
}

.launch-nav-group[open],
.profile-menu[open] {
    z-index: 12;
}

.launch-nav-dropdown,
.dropdown-panel {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.launch-nav-summary,
.profile-trigger,
.launch-mobile-group-summary,
.launch-nav-toggle {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.launch-nav-summary:focus-visible,
.profile-trigger:focus-visible,
.launch-mobile-group-summary:focus-visible,
.launch-nav-toggle:focus-visible,
.launch-nav-dropdown-link:focus-visible,
.launch-mobile-nav-link:focus-visible {
    outline: 2px solid var(--gb-ink);
    outline-offset: 3px;
}

.site-main [id] {
    scroll-margin-top: 96px;
}

.flash {
    scroll-margin-top: 96px;
}

@media (max-width: 960px) {
    .launch-mobile-panel {
        max-height: calc(100vh - 66px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .launch-mobile-panel-actions {
        position: sticky;
        bottom: 0;
        padding-top: 10px;
        background: var(--gb-paper);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .site-header,
    .site-footer,
    .launch-mobile-panel,
    .nav-toggle,
    .button,
    .icon-button,
    .profile-menu {
        display: none !important;
    }

    body,
    .site-main,
    .section,
    .section-dark {
        background: #fff !important;
        color: #000 !important;
    }

    .site-main {
        min-height: 0;
    }
}

/* --------------------------------------------------------------------------
   14. Global visual calibration V1
   Scope: hierarchy, desktop alignment, homepage rhythm and footer polish.
   -------------------------------------------------------------------------- */

/* Header: logo left, navigation truly centred, profile/actions right —
   all within the same desktop content grid rather than viewport edges. */
@media (min-width: 961px) {
    .site-header.launch-header .launch-header-calibrated {
        width: min(calc(100% - 64px), var(--gb-max));
        margin-right: auto;
        margin-left: auto;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: clamp(20px, 2.5vw, 36px);
    }

    .launch-header-calibrated .launch-brand {
        justify-self: start;
    }

    .launch-header-calibrated .launch-nav {
        justify-self: center;
        gap: clamp(20px, 2.1vw, 28px);
    }

    .launch-header-calibrated .launch-header-right {
        justify-self: end;
    }
}

/* Home hero: confident desktop hierarchy without forcing a visually heavy
   third headline line. */
.hero-home,
.launch-hero {
    padding-top: clamp(68px, 6vw, 86px);
    padding-bottom: 48px;
}

.launch-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 0.92fr);
    gap: clamp(44px, 5vw, 64px);
}

.launch-hero-copy,
.hero-copy {
    max-width: 600px;
}

.launch-hero-copy h1 {
    max-width: 16ch;
    font-size: clamp(44px, 4.1vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.048em;
}

.launch-hero-copy .lead {
    max-width: 570px;
    margin-top: 18px;
    line-height: 1.65;
}

.launch-hero-actions,
.hero-actions {
    margin-top: 24px;
}

/* Home pillars: less empty vertical weight, same equal-card rhythm. */
.launch-pillars-section {
    padding-top: 32px;
    padding-bottom: 68px;
}

.hero-pillars,
.launch-pillars-grid {
    gap: 18px;
}

.launch-pillar-card {
    min-height: 184px;
    padding: 22px;
}

.launch-pillar-card .card-symbol {
    margin-bottom: 16px;
}

.launch-pillar-card h3 {
    line-height: 1.2;
}

.launch-pillar-card p {
    margin-top: 6px;
    line-height: 1.55;
}

/* Footer: a tighter desktop band and a public-facing trust line. */
.site-footer.launch-footer {
    padding-top: 56px;
    padding-bottom: 24px;
}

.launch-footer-band {
    gap: 40px;
    padding-bottom: 28px;
}

.launch-footer-meta-secondary {
    color: #c8c8c1;
}

/* Maintain the existing mobile navigation and readable small-screen rhythm. */
@media (max-width: 1120px) {
    .launch-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 0.86fr);
        gap: 36px;
    }
}

@media (max-width: 960px) {
    .hero-home,
    .launch-hero {
        padding-top: 64px;
        padding-bottom: 44px;
    }

    .launch-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .launch-hero-copy h1 {
        max-width: 15ch;
    }

    .launch-hero-showcase {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .hero-home,
    .launch-hero {
        padding-top: 54px;
        padding-bottom: 38px;
    }

    .launch-hero-copy h1 {
        max-width: 13ch;
        font-size: clamp(38px, 10vw, 46px);
    }

    .launch-pillars-section {
        padding-top: 26px;
        padding-bottom: 52px;
    }

    .launch-pillar-card {
        min-height: 0;
        padding: 20px;
    }

    .site-footer.launch-footer {
        padding-top: 48px;
    }
}

/* --------------------------------------------------------------------------
   15. Public listing and card-density calibration V1
   Scope: public directory/catalogue result layouts and pricing package rhythm.
   -------------------------------------------------------------------------- */

/* Listing/filter pages use a tighter sequence than long-form information pages.
   Workspace, admin and detail page section spacing is intentionally unchanged. */
.listing-filter-section {
    padding-top: 48px;
    padding-bottom: 40px;
}

.listing-results-section {
    padding-top: 48px;
    padding-bottom: 68px;
}

.pricing-package-section {
    padding-top: 44px;
    padding-bottom: 72px;
}

/* Every public catalogue card retains the existing 24px internal padding.
   This rule only creates a stable vertical structure so CTAs align when
   titles, descriptions, skills or tags have different lengths. */
.listing-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.listing-card > .form-actions.start-actions {
    margin-top: auto;
    padding-top: 20px;
}

/* A sparse catalogue should never look like an unfinished multi-column grid.
   One record becomes a deliberate centred feature card. Two records become a
   centred pair. Three or more continue to use the existing responsive grids. */
@media (min-width: 721px) {
    .listing-grid {
        align-items: stretch;
    }

    .listing-grid--wide.listing-grid--single {
        grid-template-columns: minmax(0, 520px);
        justify-content: center;
    }

    .listing-grid--compact.listing-grid--single {
        grid-template-columns: minmax(0, 400px);
        justify-content: center;
    }

    .listing-grid--compact.listing-grid--single .marketplace-thumb {
        aspect-ratio: 16 / 9;
        max-height: 220px;
        object-fit: contain;
    }
}

@media (min-width: 960px) {
    .listing-grid--wide.listing-grid--pair {
        grid-template-columns: repeat(2, minmax(0, 520px));
        justify-content: center;
    }

    .listing-grid--compact.listing-grid--pair {
        grid-template-columns: repeat(2, minmax(0, 400px));
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .listing-filter-section,
    .listing-results-section,
    .pricing-package-section {
        padding-top: 42px;
        padding-bottom: 54px;
    }

    .listing-card > .form-actions.start-actions {
        padding-top: 18px;
    }
}

/* --------------------------------------------------------------------------
   16. Public card internal rhythm hotfix V1
   Scope: badge-to-title, title-to-summary, metadata, tags and CTA spacing
   inside public listing cards only.
   -------------------------------------------------------------------------- */

/* The badge row is a real content group, not a decorative overlay.
   It needs its own vertical rhythm before the title begins. */
.listing-card > .public-badge-row {
    gap: 8px;
    margin: 0 0 14px;
}

.listing-card > .marketplace-thumb + .public-badge-row {
    margin-top: 14px;
}

/* Keep compact state labels polished without making them dominate card titles. */
.listing-card > .public-badge-row .chip,
.listing-card > .public-badge-row .status-pill {
    min-height: 25px;
    padding-right: 9px;
    padding-left: 9px;
    font-size: 9px;
    letter-spacing: 0.08em;
}

/* Marketplace inherited the global H2 scale. All public catalogue cards now
   use one readable card-title scale, regardless of content type. */
.listing-card h2 {
    max-width: 100%;
    font-size: clamp(22px, 1.7vw, 26px);
    line-height: 1.14;
    letter-spacing: -0.038em;
}

.listing-card > .public-badge-row + h2 {
    margin-top: 0;
}

.listing-card h2 + .muted {
    margin-top: 9px;
}

.listing-card > .muted {
    line-height: 1.58;
}

/* Metadata, expertise, tags and CTA each receive one deliberate separation.
   This avoids the current “everything touches the next element” look. */
.listing-card .compact-definitions {
    margin-top: 20px;
}

.listing-card .compact-definitions + .muted {
    margin-top: 16px;
}

.listing-card .compact-chip-wrap,
.listing-card .compact-definitions + .chip-wrap {
    margin-top: 16px;
}

.listing-card > .form-actions.start-actions {
    min-height: 46px;
    padding-top: 20px;
}

/* Product media stays visually separate from the information hierarchy. */
.listing-card .marketplace-thumb {
    display: block;
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .listing-card > .public-badge-row {
        margin-bottom: 12px;
    }

    .listing-card > .marketplace-thumb + .public-badge-row {
        margin-top: 12px;
    }

    .listing-card h2 + .muted {
        margin-top: 8px;
    }

    .listing-card .compact-definitions {
        margin-top: 18px;
    }

    .listing-card .compact-chip-wrap,
    .listing-card .compact-definitions + .chip-wrap,
    .listing-card .compact-definitions + .muted {
        margin-top: 14px;
    }
}

/* --------------------------------------------------------------------------
   17. Search, login and social-link polish V1
   Scope: public search form, guest login language/icon treatment, footer links.
   -------------------------------------------------------------------------- */

/* Search page: intentional single-line desktop action; stacked mobile fallback. */
.launch-search-page-form {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 720px;
    margin-top: 24px;
}

.launch-search-page-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
}

.launch-search-page-form .button {
    flex: 0 0 auto;
    min-height: 48px;
    white-space: nowrap;
}

/* Login: use compact, legible SVG eye states instead of a CSS-drawn glyph. */
.launch-password-toggle {
    width: 38px;
    height: 38px;
    right: 6px;
    border: 1px solid transparent;
    border-radius: 9px;
}

.launch-password-toggle:hover,
.launch-password-toggle:focus-visible {
    border-color: var(--gb-line);
    background: var(--gb-paper-soft);
    color: var(--gb-text);
}

.launch-password-eye {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.launch-password-eye--hide {
    display: none;
}

.launch-password-toggle.is-visible .launch-password-eye--show {
    display: none;
}

.launch-password-toggle.is-visible .launch-password-eye--hide {
    display: block;
}

/* Retire the former CSS-drawn eye while retaining backward compatibility
   for historical auth pages that still contain the previous span markup. */
.launch-password-toggle .launch-eye-icon {
    display: none;
}

@media (max-width: 720px) {
    .launch-search-page-form {
        align-items: stretch;
        gap: 10px;
    }

    .launch-search-page-form .button {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   18. Home hero product-story carousel V1
   Scope: homepage visual only. Replaces the CSS mockup with three responsive,
   static marketing visuals and calm accessible carousel controls.
   -------------------------------------------------------------------------- */

.launch-hero-showcase {
    min-height: auto;
}

.launch-hero-carousel {
    width: min(100%, 560px);
}

.launch-carousel-viewport {
    overflow: hidden;
    border: 1px solid var(--gb-line);
    border-radius: 24px;
    background: var(--gb-paper-soft);
    box-shadow: 0 22px 48px rgba(10, 10, 10, 0.10);
}

.launch-carousel-slide {
    width: 100%;
    margin: 0;
}

.launch-carousel-slide[hidden] {
    display: none;
}

.launch-carousel-slide img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--gb-paper-soft);
}

.launch-carousel-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 2px 0;
}

.launch-carousel-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.launch-carousel-kicker {
    color: var(--gb-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.10em;
    line-height: 1.2;
    text-transform: uppercase;
}

.launch-carousel-copy strong {
    color: var(--gb-text);
    font-size: 14px;
    line-height: 1.35;
}

.launch-carousel-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.launch-carousel-dot {
    min-width: 30px;
    min-height: 30px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--gb-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
}

.launch-carousel-dot:hover,
.launch-carousel-dot:focus-visible {
    border-color: var(--gb-line-strong);
    background: var(--gb-paper-soft);
    color: var(--gb-text);
}

.launch-carousel-dot.is-active {
    border-color: var(--gb-ink);
    background: var(--gb-ink);
    color: var(--gb-inverse);
}

@media (max-width: 960px) {
    .launch-hero-carousel {
        width: min(100%, 600px);
    }
}

@media (max-width: 720px) {
    .launch-carousel-viewport {
        border-radius: 18px;
    }

    .launch-carousel-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding-top: 14px;
    }

    .launch-carousel-copy strong {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   19. Home hero carousel cleanup hotfix V1
   Scope: remove generated-image canvas gutters and remove visual captions,
   dots and secondary carousel UI from the homepage hero.
   -------------------------------------------------------------------------- */

.launch-hero-carousel--clean {
    width: min(100%, 560px);
}

.launch-hero-carousel--clean .launch-carousel-viewport {
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: #151515;
    box-shadow: 0 22px 48px rgba(10, 10, 10, 0.13);
}

.launch-hero-carousel--clean .launch-carousel-slide {
    display: block;
    width: 100%;
    margin: 0;
}

.launch-hero-carousel--clean .launch-carousel-slide[hidden] {
    display: none;
}

.launch-hero-carousel--clean .launch-carousel-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: cover;
    background: #151515;
}

/* Supersedes the V1 footer/caption treatment if residual markup exists in a
   browser cache during deployment. */
.launch-hero-carousel--clean .launch-carousel-footer,
.launch-hero-carousel--clean .launch-carousel-copy,
.launch-hero-carousel--clean .launch-carousel-controls {
    display: none;
}

@media (max-width: 960px) {
    .launch-hero-carousel--clean {
        width: min(100%, 600px);
    }
}

@media (max-width: 720px) {
    .launch-hero-carousel--clean .launch-carousel-viewport {
        border-radius: 18px;
    }
}

/* --------------------------------------------------------------------------
   20. Hero transition and search-state alignment hotfix V1
   Scope: homepage carousel crossfade and public search empty-state alignment.
   -------------------------------------------------------------------------- */

/* Keep both hero slides mounted, then crossfade them inside one stable frame.
   This removes the abrupt display:none switch and prevents layout jumps when
   the source images have slightly different crop ratios. */
.launch-hero-carousel--clean .launch-carousel-viewport {
    position: relative;
    aspect-ratio: 1.382 / 1;
}

.launch-hero-carousel--clean .launch-carousel-slide,
.launch-hero-carousel--clean .launch-carousel-slide[hidden] {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.018);
    transition:
        opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.launch-hero-carousel--clean .launch-carousel-slide.is-active {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
}

.launch-hero-carousel--clean .launch-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .launch-hero-carousel--clean .launch-carousel-slide,
    .launch-hero-carousel--clean .launch-carousel-slide[hidden] {
        transition: none;
        transform: none;
    }
}

/* The keyword helper is a supporting action, so it should sit deliberately
   in the centre of the same public-search column instead of inheriting the
   broad page wrapper's left edge. */
.search-state-card--centred {
    width: min(100%, 680px);
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 720px) {
    .launch-hero-carousel--clean .launch-carousel-viewport {
        aspect-ratio: 1.35 / 1;
    }
}

/* --------------------------------------------------------------------------
   21. Pre-launch accessibility, theme, analytics and rendering foundation V1
   -------------------------------------------------------------------------- */

html[data-theme="dark"] {
    --gb-ink: #f4f4ef;
    --gb-ink-2: #ddddd6;
    --gb-paper: #111111;
    --gb-paper-soft: #191918;
    --gb-paper-muted: #242422;
    --gb-line: #393936;
    --gb-line-strong: #5b5b56;
    --gb-text: #f4f4ef;
    --gb-text-secondary: #b8b8b1;
    --gb-text-muted: #92928b;
    --gb-inverse: #101010;
    --gb-shadow: 0 18px 42px rgba(0, 0, 0, 0.30);
    --gb-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.42);
    --gb-focus: 0 0 0 4px rgba(244, 244, 239, 0.16);
}

html[data-theme="dark"] .site-header.launch-header {
    background: rgba(17, 17, 17, 0.94);
}

html[data-theme="dark"] .brand-logo {
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .site-footer.launch-footer {
    background: #070707;
    border-color: #070707;
    color: #f4f4ef;
}

html[data-theme="dark"] .launch-footer-brand .brand-logo {
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .flash-success {
    background: #123321;
    border-color: #2c7047;
    color: #d7f5e0;
}

html[data-theme="dark"] .flash-error {
    background: #3a1515;
    border-color: #8a3a3a;
    color: #ffe2e2;
}

html[data-theme="dark"] .note-visible {
    background: #171716;
}

html[data-theme="dark"] .note-warning {
    background: #3a2f15;
    border-color: #7d6420;
}

html[data-theme="dark"] .launch-hero-carousel--clean .launch-carousel-viewport {
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.44);
}

/* Explicit light/dark controls are available in the public header and mobile
   menu. The stored preference is applied before CSS loads to avoid a white
   flash on dark-mode visits. */
.theme-toggle {
    position: relative;
    overflow: hidden;
}

.theme-toggle__icon {
    position: absolute;
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: opacity 160ms ease, transform 160ms ease;
}

.theme-toggle__icon--sun {
    opacity: 0;
    transform: scale(0.72) rotate(-35deg);
}

html[data-theme="dark"] .theme-toggle__icon--moon {
    opacity: 0;
    transform: scale(0.72) rotate(35deg);
}

html[data-theme="dark"] .theme-toggle__icon--sun {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.mobile-theme-toggle {
    display: none;
}

/* Footer analytics controls intentionally look like links, not another
   primary CTA. */
.launch-footer-privacy-choice {
    display: block;
    padding: 0;
    margin-top: 9px;
    border: 0;
    background: transparent;
    color: #f6f6f1;
    font: inherit;
    font-size: 14px;
    text-align: left;
}

.launch-footer-privacy-choice:hover,
.launch-footer-privacy-choice:focus-visible {
    color: #c8c8c1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* First-party consent choice. The Google tag remains configured with storage
   denied until the visitor explicitly accepts analytics. */
.analytics-consent {
    position: fixed;
    z-index: 200;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    width: min(calc(100% - 40px), 560px);
    padding: 20px;
    border: 1px solid var(--gb-line-strong);
    border-radius: var(--gb-radius);
    background: var(--gb-paper);
    box-shadow: var(--gb-shadow-hover);
}

.analytics-consent[hidden] {
    display: none;
}

.analytics-consent__copy {
    display: grid;
    gap: 6px;
}

.analytics-consent__copy strong {
    color: var(--gb-text);
    font-size: 16px;
    line-height: 1.3;
}

.analytics-consent__copy p {
    color: var(--gb-text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

.analytics-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.analytics-consent__privacy {
    display: inline-block;
    margin-top: 12px;
    color: var(--gb-text-secondary);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.analytics-consent__privacy:hover {
    color: var(--gb-text);
}

/* Avoid unnecessary repaints for large lower-page sections without affecting
   content above the fold. */
@supports (content-visibility: auto) {
    .site-footer,
    .listing-results-section,
    .section-dark:not(.launch-hero) {
        content-visibility: auto;
        contain-intrinsic-size: auto 500px;
    }
}

@media (max-width: 960px) {
    .desktop-theme-toggle {
        display: none !important;
    }

    .mobile-theme-toggle {
        display: inline-flex;
    }
}

@media (max-width: 720px) {
    .analytics-consent {
        right: 12px;
        bottom: 12px;
        width: calc(100% - 24px);
        padding: 18px;
    }

    .analytics-consent__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .analytics-consent__actions .button {
        width: 100%;
    }
}


/* --------------------------------------------------------------------------
   21. Email verification and SMTP activation V1
   -------------------------------------------------------------------------- */

.launch-email-verification-card {
    width: min(100%, 560px);
}

.launch-verification-steps {
    display: grid;
    gap: 10px;
    margin: 22px 0;
}

.launch-verification-steps > div {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 11px;
    align-items: start;
    padding: 13px 14px;
    border: 1px solid var(--gb-line);
    border-radius: var(--gb-radius-sm);
    background: var(--gb-paper-soft);
}

.launch-verification-steps span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    grid-row: span 2;
    border-radius: 50%;
    background: var(--gb-ink);
    color: var(--gb-inverse);
    font-size: 12px;
    font-weight: 800;
}

.launch-verification-steps strong {
    color: var(--gb-text);
    font-size: 14px;
}

.launch-verification-steps p {
    margin: 3px 0 0;
    color: var(--gb-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.button[disabled] {
    cursor: not-allowed;
    opacity: .52;
}


/* --------------------------------------------------------------------------
   22. Email confirmation UX and disposable-email protection V1
   -------------------------------------------------------------------------- */

.launch-email-verification-section .auth-wrap {
    width: min(100%, 640px);
}

.launch-email-verification-card {
    width: 100%;
    padding: clamp(28px, 4vw, 42px);
}

.launch-email-verification-card h1 {
    max-width: 13ch;
    margin-bottom: 12px;
}

.launch-verification-email-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    margin: 18px 0 24px;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid var(--gb-line-strong);
    border-radius: 999px;
    background: var(--gb-paper-soft);
    color: var(--gb-text);
}

.launch-verification-email-chip > span {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--gb-ink);
    color: var(--gb-inverse);
    font-size: 12px;
    line-height: 1;
}

.launch-verification-email-chip strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.launch-verification-timeline {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.launch-verification-step {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: var(--gb-paper-soft);
}

.launch-verification-step-number {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--gb-ink);
    color: var(--gb-inverse);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.launch-verification-step strong {
    display: block;
    color: var(--gb-text);
    font-size: 14px;
    line-height: 1.35;
}

.launch-verification-step p {
    margin: 3px 0 0;
    color: var(--gb-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.launch-verification-resend-form {
    margin-top: 2px;
}

.launch-email-verification-card .launch-auth-support-copy {
    margin-top: 14px;
}

@media (max-width: 560px) {
    .launch-email-verification-card {
        padding: 24px 20px;
    }

    .launch-email-verification-card h1 {
        max-width: none;
        font-size: clamp(30px, 9vw, 42px);
    }

    .launch-verification-step {
        padding: 12px;
    }
}

/* --------------------------------------------------------------------------
   23. Workspace rhythm, pricing signature card, and email-branding polish V1
   -------------------------------------------------------------------------- */

/* Dashboard section rhythm: headings must lead into the related cards rather
   than visually collide with them. */
.workspace-flow-section,
.verification-record-section,
.verification-process-section,
.learning-records-section,
.billing-services-section,
.billing-records-section {
    padding-top: 88px;
    padding-bottom: 88px;
}

.workspace-section-heading {
    display: grid;
    gap: 0;
    max-width: 760px;
}

.workspace-section-heading .eyebrow {
    margin-bottom: 15px;
}

.workspace-section-heading h2 {
    max-width: 20ch;
}

.workspace-action-grid {
    margin-top: 30px;
}

.workspace-action-card,
.workspace-continue-card,
.verification-summary-card,
.verification-process-card,
.billing-service-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.workspace-action-card {
    min-height: 236px;
    padding: 26px;
}

.workspace-action-card .panel-label {
    margin-bottom: 16px;
}

.workspace-action-card h3,
.workspace-continue-card h3,
.verification-summary-card h3,
.verification-process-card h3,
.billing-service-card h3 {
    margin-bottom: 11px;
}

.workspace-action-card .muted,
.workspace-continue-card .muted,
.verification-summary-card > .muted,
.verification-process-card > .muted,
.billing-service-card > .muted {
    line-height: 1.65;
}

.workspace-action-card > .button {
    width: 100%;
    margin-top: auto;
}

.workspace-continue-card {
    min-height: 208px;
    padding: 26px;
}

.workspace-continue-card > .button,
.workspace-continue-card > .hero-actions {
    margin-top: auto;
}

.workspace-continue-card .hero-actions {
    padding-top: 20px;
}

.workspace-continue-card .hero-actions .button {
    min-width: 0;
}

.verification-hero-panel,
.payments-state-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.verification-hero-panel .panel-label,
.payments-state-panel .panel-label {
    margin-bottom: 15px;
}

.verification-hero-panel h2,
.payments-state-panel h2 {
    margin-bottom: 13px;
}

.verification-hero-panel .hero-actions,
.payments-state-panel .hero-actions {
    margin-top: 24px;
}

.verification-summary-grid,
.verification-process-grid {
    gap: 22px;
}

.verification-summary-card,
.verification-process-card {
    min-height: 100%;
    padding: 28px;
}

.verification-summary-card .eyebrow,
.verification-process-card .eyebrow {
    margin-bottom: 16px;
}

.verification-summary-card .definition-list {
    margin-top: 18px;
}

.verification-next-card .stack-list,
.verification-process-card .stack-list {
    margin-top: 18px;
    padding-left: 20px;
    line-height: 1.6;
}

.verification-next-card .hero-actions,
.verification-after-card .hero-actions {
    margin-top: auto;
    padding-top: 22px;
}

.verification-process-card .muted {
    max-width: 58ch;
}

.learning-metrics-section,
.payments-metrics-section {
    padding-top: 52px;
    padding-bottom: 52px;
}

.learning-empty-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 34px;
    padding: 30px;
}

.learning-empty-card .eyebrow {
    margin-bottom: 15px;
}

.learning-empty-card h2 {
    max-width: 25ch;
    margin-bottom: 12px;
    font-size: clamp(25px, 2.5vw, 34px);
}

.learning-empty-card .muted {
    max-width: 700px;
    line-height: 1.65;
}

.learning-empty-card-action {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.learning-empty-card-action .button {
    white-space: nowrap;
}

.billing-service-grid {
    gap: 22px;
}

.billing-service-card {
    min-height: 244px;
    padding: 27px;
}

.billing-service-card .eyebrow {
    margin-bottom: 16px;
}

.billing-service-card .definition-list {
    margin-top: auto;
    padding-top: 22px;
}

.billing-records-card {
    padding: 30px;
}

.billing-records-header {
    display: block;
    margin-bottom: 24px;
}

.billing-records-header .eyebrow {
    margin-bottom: 14px;
}

.billing-records-header h2 {
    margin-bottom: 12px;
}

.billing-records-header .muted {
    max-width: 760px;
    line-height: 1.65;
}

.billing-records-empty {
    max-width: 760px;
    padding: 18px 0 2px;
    line-height: 1.65;
}

/* Signature pricing: the ₹499 offer should read as a flagship human-review
   product, not a narrow generic checkout card. */
.pricing-page-hero {
    padding-bottom: 30px;
}

.pricing-signature-section {
    padding-top: 38px;
    padding-bottom: 96px;
}

.pricing-card--signature {
    width: min(100%, 820px);
    padding: clamp(26px, 4vw, 42px);
    border-color: var(--gb-line-strong);
}

.pricing-signature-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.6fr);
    gap: 36px;
    align-items: end;
}

.pricing-kicker {
    display: inline-flex;
    margin: 0 0 16px;
    padding: 7px 9px;
    border: 1px solid var(--gb-line-strong);
    border-radius: 999px;
    background: var(--gb-paper-soft);
    color: var(--gb-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.pricing-signature-copy h2 {
    margin-bottom: 13px;
    font-size: clamp(34px, 4.2vw, 50px);
}

.pricing-signature-copy .muted {
    max-width: 46ch;
    line-height: 1.65;
}

.pricing-price-block {
    display: grid;
    justify-items: end;
    gap: 7px;
    padding: 20px;
    border: 1px solid var(--gb-line);
    border-radius: 14px;
    background: var(--gb-paper-soft);
    text-align: right;
}

.pricing-price-block > span {
    color: var(--gb-text-secondary);
    font-size: 12px;
    font-weight: 650;
}

.pricing-price-block strong {
    color: var(--gb-text);
    font-size: clamp(46px, 6vw, 62px);
    font-weight: 750;
    letter-spacing: -0.07em;
    line-height: 0.95;
}

.pricing-price-block strong small {
    margin-right: 3px;
    font-size: 0.48em;
    vertical-align: 0.22em;
}

.pricing-price-block em {
    color: var(--gb-text-secondary);
    font-size: 12px;
    font-style: normal;
    line-height: 1.45;
}

.pricing-signature-divider {
    height: 1px;
    margin: 34px 0;
    background: var(--gb-line);
}

.pricing-inclusions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.75fr);
    gap: 34px;
    align-items: start;
}

.pricing-inclusions .panel-label {
    margin-bottom: 16px;
}

.pricing-feature-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-feature-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: var(--gb-text);
    font-size: 14px;
    line-height: 1.5;
}

.pricing-feature-list li > span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid var(--gb-ink);
    border-radius: 50%;
    color: var(--gb-ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.pricing-trust-note {
    display: flex;
    gap: 13px;
    padding: 18px;
    border: 1px solid var(--gb-line);
    border-radius: 14px;
    background: var(--gb-paper-soft);
}

.pricing-trust-mark {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--gb-ink);
    color: var(--gb-inverse);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
}

.pricing-trust-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--gb-text);
    font-size: 14px;
    line-height: 1.4;
}

.pricing-trust-note p {
    color: var(--gb-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.pricing-signature-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--gb-line);
}

.pricing-signature-footer > p {
    max-width: 48ch;
    color: var(--gb-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.pricing-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Responsive guardrails for the focused workspace and pricing layouts. */
@media (max-width: 720px) {
    .workspace-flow-section,
    .verification-record-section,
    .verification-process-section,
    .learning-records-section,
    .billing-services-section,
    .billing-records-section {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .workspace-action-grid {
        margin-top: 22px;
    }

    .workspace-action-card,
    .workspace-continue-card,
    .verification-summary-card,
    .verification-process-card,
    .billing-service-card,
    .billing-records-card {
        padding: 20px;
    }

    .workspace-action-card,
    .workspace-continue-card,
    .billing-service-card {
        min-height: auto;
    }

    .learning-empty-card,
    .pricing-signature-head,
    .pricing-inclusions,
    .pricing-signature-footer {
        grid-template-columns: 1fr;
        display: grid;
    }

    .learning-empty-card {
        gap: 20px;
    }

    .learning-empty-card-action {
        justify-content: flex-start;
    }

    .learning-empty-card-action .button {
        width: 100%;
    }

    .pricing-price-block {
        justify-items: start;
        text-align: left;
    }

    .pricing-signature-footer {
        gap: 18px;
    }

    .pricing-footer-actions {
        display: grid;
        justify-content: stretch;
    }

    .pricing-footer-actions .button {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   24. Password recovery, information pages, legal content, email polish V1
   -------------------------------------------------------------------------- */

/* Password recovery */
.recovery-page .auth-wrap {
    width: min(100%, 560px);
}

.recovery-card {
    padding: clamp(28px, 4vw, 42px);
}

.recovery-card h1 {
    max-width: 14ch;
    margin-bottom: 12px;
}

.recovery-card .launch-auth-form {
    margin-top: 26px;
}

.recovery-security-note {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 22px;
    padding: 14px;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: var(--gb-paper-soft);
}

.recovery-security-note > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--gb-ink);
    color: var(--gb-inverse);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
}

.recovery-security-note p {
    margin: 1px 0 0;
    color: var(--gb-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.recovery-security-note strong {
    color: var(--gb-text);
}

/* About + legal pages */
.info-page-hero {
    padding-bottom: 66px;
}

.info-page-hero .lead {
    max-width: 67ch;
}

.info-page-section {
    padding-top: 78px;
    padding-bottom: 78px;
}

.info-section-heading {
    display: grid;
    gap: 0;
    max-width: 760px;
    margin-bottom: 30px;
}

.info-section-heading .eyebrow {
    margin-bottom: 15px;
}

.info-section-heading h2 {
    max-width: 24ch;
}

.about-intro-grid,
.about-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: 22px;
    align-items: stretch;
}

.about-manifesto {
    padding: clamp(6px, 1vw, 14px) 0;
}

.about-manifesto .eyebrow {
    margin-bottom: 15px;
}

.about-manifesto h2 {
    max-width: 22ch;
    margin-bottom: 16px;
    font-size: clamp(28px, 3.1vw, 42px);
}

.about-manifesto > p {
    max-width: 62ch;
    color: var(--gb-text-secondary);
    font-size: 16px;
    line-height: 1.7;
}

.about-position-card {
    padding: 28px;
}

.about-position-card .panel-label {
    margin-bottom: 16px;
}

.about-position-card .stack-list {
    margin-bottom: 22px;
}

.about-not-note {
    padding-top: 17px;
    border-top: 1px solid var(--gb-line);
    color: var(--gb-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.about-not-note strong {
    color: var(--gb-text);
}

.about-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.about-journey-card {
    min-height: 225px;
    padding: 26px;
}

.about-journey-card > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    margin-bottom: 28px;
    border-radius: 50%;
    background: var(--gb-ink);
    color: var(--gb-inverse);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
}

.about-journey-card h3 {
    margin-bottom: 11px;
}

.about-journey-card .muted {
    line-height: 1.65;
}

.info-card-grid,
.legal-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.info-card,
.legal-card {
    min-height: 208px;
    padding: 27px;
}

.info-card h3,
.legal-card h2 {
    margin-bottom: 12px;
    font-size: 19px;
    line-height: 1.3;
}

.info-card .muted,
.legal-card > p {
    color: var(--gb-text-secondary);
    line-height: 1.68;
}

.about-trust-grid {
    align-items: start;
}

.about-trust-grid .eyebrow {
    margin-bottom: 15px;
}

.about-trust-grid h2 {
    max-width: 24ch;
}

.about-trust-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-trust-list li {
    padding: 15px 0;
    border-bottom: 1px solid var(--gb-line);
    color: var(--gb-text-secondary);
    line-height: 1.58;
}

.about-trust-list li:first-child {
    padding-top: 0;
}

.about-trust-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.about-trust-list strong {
    color: var(--gb-text);
}

.info-contact-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 30px;
}

.info-contact-card .eyebrow {
    margin-bottom: 14px;
}

.info-contact-card h2 {
    margin-bottom: 10px;
}

.info-contact-card .muted {
    max-width: 60ch;
    line-height: 1.65;
}

.legal-page .legal-meta {
    margin-top: 18px;
    color: var(--gb-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.legal-page .legal-meta a,
.legal-card a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-summary-card {
    margin-bottom: 22px;
    padding: 25px 27px;
    border-color: var(--gb-line-strong);
    background: var(--gb-paper-soft);
}

.legal-summary-card .panel-label {
    margin-bottom: 13px;
}

.legal-summary-card > p:last-child {
    max-width: 74ch;
    color: var(--gb-text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.legal-card {
    min-height: 0;
}

.legal-card .stack-list {
    margin-top: 15px;
    padding-left: 19px;
}

.legal-card .stack-list li {
    margin-bottom: 10px;
    color: var(--gb-text-secondary);
    line-height: 1.58;
}

.legal-jurisdiction-card {
    margin-top: 22px;
    padding: 27px;
}

.legal-jurisdiction-card h2 {
    margin-bottom: 11px;
    font-size: 19px;
}

.legal-jurisdiction-card p {
    max-width: 84ch;
    color: var(--gb-text-secondary);
    line-height: 1.68;
}

@media (max-width: 760px) {
    .info-page-hero,
    .info-page-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .about-intro-grid,
    .about-trust-grid,
    .about-journey-grid,
    .info-card-grid,
    .legal-card-grid {
        grid-template-columns: 1fr;
    }

    .about-journey-card,
    .info-card,
    .legal-card {
        min-height: auto;
        padding: 21px;
    }

    .info-contact-card {
        display: grid;
        padding: 22px;
    }

    .info-contact-card .button {
        width: 100%;
    }

    .legal-summary-card,
    .legal-jurisdiction-card {
        padding: 21px;
    }
}

/* --------------------------------------------------------------------------
   25. Password reset CTA + password-eye visibility hotfix V1
   -------------------------------------------------------------------------- */

/* The reset form uses real SVG icons instead of pseudo-element drawing so the
   control remains visible in both light and dark user-selected themes. */
.recovery-page .launch-password-field {
    position: relative;
}

.recovery-page .launch-password-field input {
    padding-right: 62px;
}

.recovery-page .launch-password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 9px;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--gb-line-strong);
    border-radius: 9px;
    background: var(--gb-paper-soft);
    color: var(--gb-text);
    cursor: pointer;
    transform: translateY(-50%);
}

.recovery-page .launch-password-toggle:hover,
.recovery-page .launch-password-toggle:focus-visible {
    border-color: var(--gb-ink);
    background: var(--gb-ink);
    color: var(--gb-inverse);
    outline: none;
}

.recovery-page .launch-password-toggle svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.recovery-page .launch-password-toggle .launch-eye-closed-icon {
    display: none;
}

.recovery-page .launch-password-toggle.is-visible .launch-eye-open-icon {
    display: none;
}

.recovery-page .launch-password-toggle.is-visible .launch-eye-closed-icon {
    display: block;
}

/* Hide old CSS-drawn icon if an older cached template is ever loaded. */
.recovery-page .launch-password-toggle .launch-eye-icon {
    display: none;
}

/* --------------------------------------------------------------------------
   26. Password-eye clarity override V1
   -------------------------------------------------------------------------- */

.recovery-page .launch-password-field input {
    padding-right: 82px;
}

.recovery-page .launch-password-toggle {
    right: 7px;
    width: auto;
    min-width: 66px;
    height: 34px;
    gap: 5px;
    padding: 0 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--gb-text-secondary);
    font-size: 12px;
    font-weight: 700;
    transform: translateY(-50%);
}

.recovery-page .launch-password-toggle:hover,
.recovery-page .launch-password-toggle:focus-visible {
    border: 0;
    background: var(--gb-paper-soft);
    color: var(--gb-text);
    outline: 2px solid var(--gb-ink);
    outline-offset: 1px;
}

.recovery-page .launch-password-toggle svg,
.recovery-page .launch-password-toggle svg * {
    fill: none !important;
    stroke: currentColor !important;
}

.recovery-page .launch-password-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke-width: 1.9px;
}

.recovery-page .launch-password-toggle .launch-password-toggle-label {
    display: inline-block;
    line-height: 1;
}

/* Make the intended visual state deterministic even when broader global SVG
   styles are cached by the browser. */
.recovery-page .launch-password-toggle .launch-eye-open-icon {
    display: block !important;
}

.recovery-page .launch-password-toggle .launch-eye-closed-icon {
    display: none !important;
}

.recovery-page .launch-password-toggle.is-visible .launch-eye-open-icon {
    display: none !important;
}

.recovery-page .launch-password-toggle.is-visible .launch-eye-closed-icon {
    display: block !important;
}

/* --------------------------------------------------------------------------
   27. Reset password must use the exact login eye component V1
   -------------------------------------------------------------------------- */

.recovery-page .launch-password-field input {
    padding-right: 48px;
}

.recovery-page .launch-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-flex;
    width: 38px;
    min-width: 38px;
    height: 38px;
    gap: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--gb-text-secondary);
    font-size: 0;
    transform: translateY(-50%);
}

.recovery-page .launch-password-toggle:hover,
.recovery-page .launch-password-toggle:focus-visible {
    border-color: var(--gb-line);
    background: var(--gb-paper-soft);
    color: var(--gb-text);
    outline: none;
}

.recovery-page .launch-password-toggle .launch-password-eye {
    display: block;
    width: 19px;
    height: 19px;
    fill: currentColor !important;
    stroke: none !important;
}

.recovery-page .launch-password-toggle .launch-password-eye--hide {
    display: none;
}

.recovery-page .launch-password-toggle.is-visible .launch-password-eye--show {
    display: none;
}

.recovery-page .launch-password-toggle.is-visible .launch-password-eye--hide {
    display: block;
}

/* Neutralize previous reset-only Show/Hide label rules completely. */
.recovery-page .launch-password-toggle .launch-password-toggle-label,
.recovery-page .launch-password-toggle .launch-eye-open-icon,
.recovery-page .launch-password-toggle .launch-eye-closed-icon,
.recovery-page .launch-password-toggle .launch-eye-icon {
    display: none !important;
}

/* ==========================================================================
   28. GraphicBidu Visual Foundation V2 — Phase 1
   Scope: visual system only.
   Does not alter routes, payment, Razorpay, auth, emails, database, or JS.
   ========================================================================== */

:root {
    --gb-space-1: 8px;
    --gb-space-2: 12px;
    --gb-space-3: 16px;
    --gb-space-4: 24px;
    --gb-space-5: 32px;
    --gb-space-6: 48px;
    --gb-space-7: 72px;
    --gb-space-8: 104px;

    --gb-radius-surface: 18px;
    --gb-radius-action: 16px;
    --gb-border-subtle: rgba(10, 10, 10, 0.07);
    --gb-surface-recessed: #f7f7f5;

    --gb-status-success-bg: #eef8f1;
    --gb-status-success-border: #b8dfc4;
    --gb-status-success-text: #146c3d;
    --gb-status-warning-bg: #fff7e5;
    --gb-status-warning-border: #ead29b;
    --gb-status-warning-text: #725109;
    --gb-status-danger-bg: #fff0ef;
    --gb-status-danger-border: #e8bbb8;
    --gb-status-danger-text: #872f2a;
    --gb-status-neutral-bg: #f5f5f2;
    --gb-status-neutral-border: #d7d7d1;
    --gb-status-neutral-text: #5c5c56;
}

html[data-theme="dark"] {
    --gb-border-subtle: rgba(255, 255, 255, 0.07);
    --gb-surface-recessed: #181817;

    --gb-status-success-bg: rgba(44, 132, 78, 0.16);
    --gb-status-success-border: rgba(101, 193, 135, 0.34);
    --gb-status-success-text: #9be0b1;
    --gb-status-warning-bg: rgba(179, 126, 21, 0.17);
    --gb-status-warning-border: rgba(230, 184, 90, 0.32);
    --gb-status-warning-text: #f0cf7d;
    --gb-status-danger-bg: rgba(167, 58, 52, 0.18);
    --gb-status-danger-border: rgba(229, 122, 116, 0.32);
    --gb-status-danger-text: #f2aaa4;
    --gb-status-neutral-bg: rgba(255, 255, 255, 0.06);
    --gb-status-neutral-border: rgba(255, 255, 255, 0.14);
    --gb-status-neutral-text: #c8c8c0;
}

/* --------------------------------------------------------------------------
   System rhythm: one deliberate spacing scale across public, workspace,
   payment, and legal screens.
   -------------------------------------------------------------------------- */

.section {
    padding-block: clamp(var(--gb-space-7), 7vw, var(--gb-space-8));
}

.page-hero,
.info-page-hero {
    padding-top: clamp(56px, 6vw, 88px);
    padding-bottom: clamp(34px, 4vw, 54px);
}

.page-hero + .section,
.info-page-hero + .info-page-section {
    padding-top: clamp(52px, 5.5vw, 80px);
}

.workspace-flow-section,
.verification-record-section,
.verification-process-section,
.learning-records-section,
.billing-services-section,
.billing-records-section {
    padding-top: clamp(68px, 7vw, 96px);
    padding-bottom: clamp(68px, 7vw, 96px);
}

.section-grid,
.workspace-action-grid,
.verification-summary-grid,
.verification-process-grid,
.info-card-grid,
.legal-card-grid {
    gap: clamp(16px, 2vw, 24px);
}

.section-heading,
.workspace-section-heading {
    margin-bottom: var(--gb-space-4);
}

.workspace-section-heading {
    max-width: 760px;
}

.workspace-section-heading .eyebrow,
.section-heading .eyebrow {
    margin-bottom: var(--gb-space-2);
}

.workspace-section-heading h2,
.section-heading h2 {
    max-width: 24ch;
}

.hero-copy .lead,
.dashboard-hero-copy .lead,
.page-hero .lead,
.info-page-hero .lead {
    margin-top: var(--gb-space-3);
}

.hero-actions {
    gap: var(--gb-space-2);
    margin-top: var(--gb-space-4);
}

/* --------------------------------------------------------------------------
   Surface hierarchy:
   1) surface cards = information,
   2) action cards = next best action,
   3) record cards = evidence / operational detail,
   4) status cards = states and metrics.
   -------------------------------------------------------------------------- */

.card,
.panel,
.pricing-card,
.auth-card,
.form-card,
.table-card,
.public-score-card,
.summary-panel,
.toggle-card,
.dashboard-nav-group,
.message-thread-card,
.conversation-bubble,
.search-group,
.quick-action-card,
.outline-card,
.lesson-card,
.application-card,
.marketplace-card,
.purchase-card,
.contact-support-card,
.contact-form-card {
    border-color: var(--gb-line);
    border-radius: var(--gb-radius-surface);
    box-shadow: 0 1px 0 var(--gb-border-subtle);
}

.card,
.panel,
.pricing-card,
.auth-card,
.form-card,
.table-card,
.public-score-card,
.summary-panel,
.toggle-card,
.quick-action-card,
.outline-card,
.lesson-card,
.application-card,
.marketplace-card,
.purchase-card,
.contact-support-card,
.contact-form-card {
    padding: clamp(22px, 2.3vw, 30px);
}

.metric-card,
.resource-link,
.file-tile,
.search-result {
    border-radius: var(--gb-radius-action);
    box-shadow: none;
}

.card > h3 + p,
.panel > h3 + p,
.pricing-card > h3 + p,
.application-card > h3 + p,
.workspace-action-card > h3 + p,
.workspace-continue-card > h3 + p,
.verification-summary-card > h3 + p,
.verification-process-card > h3 + p,
.billing-service-card > h3 + p {
    margin-top: 10px;
}

.card > .button,
.panel > .button,
.pricing-card > .button,
.quick-action-card > .button,
.workspace-action-card > .button,
.workspace-continue-card > .button {
    margin-top: var(--gb-space-4);
}

.card > .hero-actions,
.panel > .hero-actions,
.pricing-card > .hero-actions {
    margin-top: var(--gb-space-4);
}

@media (hover: hover) and (pointer: fine) {
    .card:hover,
    .panel:hover,
    .metric-card:hover,
    .resource-link:hover,
    .file-tile:hover,
    .search-result:hover,
    .application-card:hover,
    .marketplace-card:hover,
    .purchase-card:hover,
    .quick-action-card:hover {
        transform: translateY(-1px);
        border-color: var(--gb-line-strong);
        box-shadow: var(--gb-shadow-hover);
    }
}

/* Primary action surfaces should guide a task without turning every card
   into a visually loud marketing tile. */
.quick-action-card,
.workspace-action-card,
.workspace-continue-card,
.verification-summary-card,
.verification-process-card,
.billing-service-card,
.payments-state-panel,
.verification-hero-panel {
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--gb-ink);
}

.quick-action-card,
.workspace-action-card,
.workspace-continue-card,
.verification-summary-card,
.verification-process-card,
.billing-service-card {
    background: var(--gb-paper);
}

.quick-action-card .panel-label,
.workspace-action-card .panel-label,
.workspace-continue-card .panel-label,
.verification-summary-card .panel-label,
.verification-process-card .panel-label,
.billing-service-card .panel-label {
    margin-bottom: var(--gb-space-3);
}

.workspace-action-grid {
    margin-top: var(--gb-space-5);
}

.workspace-action-card {
    min-height: 248px;
}

.workspace-continue-card {
    min-height: 220px;
}

.verification-summary-card,
.verification-process-card,
.billing-service-card {
    min-height: 100%;
}

/* Compact data surfaces: less "wall of boxes", more readable record. */
.metric-card {
    padding: 18px;
    background: var(--gb-surface-recessed);
    border-color: var(--gb-line);
}

.metric-card span {
    color: var(--gb-text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.metric-card strong {
    margin-top: 8px;
    font-size: clamp(26px, 2.5vw, 34px);
}

.definition-list li {
    padding-block: 15px;
}

.definition-list strong {
    max-width: 55%;
}

/* --------------------------------------------------------------------------
   Workspace navigation: retain the complete information architecture but make
   it feel like a compact control strip rather than repeated large cards.
   -------------------------------------------------------------------------- */

.dashboard-nav {
    gap: 12px;
    margin-bottom: clamp(30px, 4vw, 48px);
}

.dashboard-nav-group {
    padding: 13px;
    background: var(--gb-surface-recessed);
    border-radius: var(--gb-radius-action);
    box-shadow: none;
}

.dashboard-nav-group h2 {
    margin-bottom: 8px;
    color: var(--gb-text-muted);
    font-size: 10px;
    letter-spacing: 0.13em;
}

.dashboard-nav-links {
    gap: 4px;
}

.dashboard-link {
    min-height: 36px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.dashboard-link:hover,
.dashboard-link.active {
    border-color: var(--gb-line);
    background: var(--gb-paper);
}

.dashboard-link-arrow {
    opacity: 0.58;
}

html[data-theme="dark"] .dashboard-link:hover,
html[data-theme="dark"] .dashboard-link.active {
    background: var(--gb-paper-soft);
}

/* Top-of-workspace readiness stats become quiet operational signals. */
.launch-stats {
    gap: 8px;
    margin-top: 2px;
}

.launch-stats div {
    padding: 13px 12px;
    border-radius: 10px;
    background: var(--gb-surface-recessed);
}

.launch-stats dt {
    font-size: 11px;
}

.launch-stats dd {
    margin-top: 6px;
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   Buttons, fields, and text: calm, tactile, and consistent in both themes.
   -------------------------------------------------------------------------- */

.button {
    min-height: 44px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.button-primary {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.button-primary:hover {
    box-shadow: 0 10px 22px rgba(10, 10, 10, 0.14);
}

.button-secondary,
.button-ghost {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    border-radius: 10px;
    background: var(--gb-paper);
}

input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gb-ink) 12%, transparent);
}

/* --------------------------------------------------------------------------
   Clear semantic state—not decoration. These styles preserve the platform's
   black/white core while allowing a person to scan important outcomes fast.
   -------------------------------------------------------------------------- */

.status-approved,
.status-published,
.status-active,
.status-completed,
.status-accepted,
.status-feedback_ready,
.registry-valid {
    border-color: var(--gb-status-success-border);
    background: var(--gb-status-success-bg);
    color: var(--gb-status-success-text);
}

.status-under_review,
.status-assigned,
.status-submitted,
.status-needs_improvement {
    border-color: var(--gb-status-warning-border);
    background: var(--gb-status-warning-bg);
    color: var(--gb-status-warning-text);
}

.status-rejected,
.status-expired,
.registry-expired,
.registry-revoked,
.registry-not-found {
    border-color: var(--gb-status-danger-border);
    background: var(--gb-status-danger-bg);
    color: var(--gb-status-danger-text);
}

.status-draft {
    border-color: var(--gb-status-neutral-border);
    background: var(--gb-status-neutral-bg);
    color: var(--gb-status-neutral-text);
}

/* --------------------------------------------------------------------------
   Homepage rhythm only. No carousel behaviour or hero asset changes here.
   -------------------------------------------------------------------------- */

.hero-home {
    padding-top: clamp(72px, 8vw, 112px);
    padding-bottom: clamp(56px, 6vw, 88px);
}

.launch-pillars-section {
    padding-top: clamp(46px, 5vw, 72px);
}

.launch-pillars-grid {
    gap: clamp(16px, 2vw, 24px);
}

.launch-pillar-card {
    min-height: 214px;
    padding: clamp(22px, 2.3vw, 30px);
}

.launch-pillar-card .card-symbol {
    margin-bottom: 28px;
}

.launch-pillar-card h3 {
    margin-bottom: 10px;
}

.launch-pillar-card p {
    max-width: 30ch;
    line-height: 1.65;
}

.trust-band {
    gap: clamp(32px, 5vw, 72px);
}

.trust-copy > p {
    max-width: 58ch;
    line-height: 1.72;
}

/* --------------------------------------------------------------------------
   Motion hygiene.
   -------------------------------------------------------------------------- */

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

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

    .workspace-action-card,
    .workspace-continue-card {
        min-height: 0;
    }

    .definition-list strong {
        max-width: 60%;
    }
}

@media (max-width: 640px) {
    .section {
        padding-block: 56px;
    }

    .page-hero,
    .info-page-hero {
        padding-top: 48px;
        padding-bottom: 28px;
    }

    .dashboard-nav {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .card,
    .panel,
    .pricing-card,
    .auth-card,
    .form-card,
    .table-card,
    .public-score-card,
    .summary-panel,
    .toggle-card,
    .quick-action-card,
    .outline-card,
    .lesson-card,
    .application-card,
    .marketplace-card,
    .purchase-card,
    .contact-support-card,
    .contact-form-card {
        padding: 20px;
    }

    .definition-list li {
        gap: 12px;
    }

    .definition-list strong {
        max-width: 58%;
    }

    .launch-stats {
        grid-template-columns: 1fr;
    }

    .launch-pillar-card {
        min-height: 0;
    }
}

/* ==========================================================================
   29. Dark Theme Contrast Repair V1
   Scope: fixes legacy text/control colours that can remain black after a
   dark-theme switch. No structural or functional behaviour is changed.
   ========================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;
}

/* Make the application frame explicitly inherit the dark token set. */
html[data-theme="dark"] body,
html[data-theme="dark"] .site-main,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .dashboard-shell,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .info-page-hero,
html[data-theme="dark"] .section,
html[data-theme="dark"] .section-dark,
html[data-theme="dark"] .profile-menu,
html[data-theme="dark"] .dropdown-panel,
html[data-theme="dark"] .launch-nav-dropdown {
    color: var(--gb-text);
}

/* Headings, labels and data labels must never inherit a legacy black text
   colour when the surface is dark. */
html[data-theme="dark"] .site-main :is(
    h1, h2, h3, h4, h5, h6,
    label, legend, caption, th,
    .field-label,
    .panel-label,
    .eyebrow,
    .dashboard-link,
    .profile-name,
    .dropdown-head strong,
    .metric-card strong,
    .definition-list strong,
    .data-table td strong,
    .data-table td b,
    .search-result h2,
    .search-result h3,
    .search-result h4,
    .price,
    .amount,
    .record-number,
    .page-title,
    .section-title
) {
    color: var(--gb-text) !important;
}

/* Secondary copy remains visibly secondary rather than disappearing as black
   text on black/charcoal surfaces. */
html[data-theme="dark"] .site-main :is(
    p, li, dt, dd, small,
    .lead,
    .muted,
    .text-muted,
    .text-secondary,
    .profile-role,
    .search-summary,
    .search-result p,
    .definition-list span,
    .metric-card span,
    .data-table td span,
    .launch-auth-intro,
    .launch-auth-support-copy,
    .launch-password-help,
    .contact-support-subtitle,
    .empty-state
) {
    color: var(--gb-text-secondary) !important;
}

/* Anchors outside black/white buttons should be readable and clearly
   distinguishable in dark mode. */
html[data-theme="dark"] .site-main a:not(.button):not(.launch-app-badge):not(.launch-status-pill):not(.launch-mini-pill),
html[data-theme="dark"] .profile-menu a,
html[data-theme="dark"] .dropdown-panel a,
html[data-theme="dark"] .launch-nav-dropdown a {
    color: var(--gb-text) !important;
}

html[data-theme="dark"] .site-main a:not(.button):not(.launch-app-badge):not(.launch-status-pill):not(.launch-mini-pill):hover,
html[data-theme="dark"] .profile-menu a:hover,
html[data-theme="dark"] .dropdown-panel a:hover,
html[data-theme="dark"] .launch-nav-dropdown a:hover {
    color: var(--gb-text-secondary) !important;
}

/* Native controls can otherwise keep browser/default black foreground text
   after a runtime theme switch. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color: var(--gb-text) !important;
    caret-color: var(--gb-text);
    background-color: var(--gb-paper) !important;
    border-color: var(--gb-line) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--gb-text-muted) !important;
    opacity: 1;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    color: var(--gb-text);
    background: var(--gb-paper);
}

/* Explicitly restore readable control text after the general content repairs. */
html[data-theme="dark"] .button-primary {
    background: var(--gb-ink);
    border-color: var(--gb-ink);
    color: var(--gb-inverse) !important;
}

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .button-ghost,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .nav-toggle,
html[data-theme="dark"] .profile-trigger,
html[data-theme="dark"] .launch-profile-trigger {
    color: var(--gb-text) !important;
}

/* State labels remain semantically coloured after the broad text repair. */
html[data-theme="dark"] :is(
    .status-approved,
    .status-published,
    .status-active,
    .status-completed,
    .status-accepted,
    .status-feedback_ready,
    .registry-valid
) {
    color: var(--gb-status-success-text) !important;
}

html[data-theme="dark"] :is(
    .status-under_review,
    .status-assigned,
    .status-submitted,
    .status-needs_improvement
) {
    color: var(--gb-status-warning-text) !important;
}

html[data-theme="dark"] :is(
    .status-rejected,
    .status-expired,
    .registry-expired,
    .registry-revoked,
    .registry-not-found
) {
    color: var(--gb-status-danger-text) !important;
}

html[data-theme="dark"] .status-draft {
    color: var(--gb-status-neutral-text) !important;
}

html[data-theme="dark"] .flash-success {
    color: #d7f5e0 !important;
}

html[data-theme="dark"] .flash-error {
    color: #ffe2e2 !important;
}

html[data-theme="dark"] .note-warning {
    color: #f0cf7d !important;
}

/* The homepage verification illustration intentionally has its own dark
   artwork/white status chips. Keep it isolated from global text repairs. */
html[data-theme="dark"] .launch-app-frame,
html[data-theme="dark"] .launch-app-frame * {
    color: revert;
}

html[data-theme="dark"] .launch-app-title,
html[data-theme="dark"] .launch-app-badge,
html[data-theme="dark"] .launch-card-label,
html[data-theme="dark"] .launch-status-row,
html[data-theme="dark"] .launch-mini-pill,
html[data-theme="dark"] .launch-status-pill {
    color: #f7f7f5;
}

html[data-theme="dark"] .launch-app-badge,
html[data-theme="dark"] .launch-status-pill,
html[data-theme="dark"] .launch-mini-pill {
    color: #111111;
}

/* Firefox / Chromium autofill can otherwise reintroduce a white field with
   black text after a dark preference is set. */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--gb-text);
    box-shadow: 0 0 0 1000px var(--gb-paper) inset;
    caret-color: var(--gb-text);
}

/* ==========================================================================
   30. Footer Dark Contrast Repair V1
   The main contrast repair scoped text to .site-main. The footer lives outside
   that region, so legacy black foreground colours could remain in dark mode.
   ========================================================================== */

html[data-theme="dark"] :is(
    footer,
    .site-footer,
    .footer,
    .global-footer,
    .launch-footer
) {
    color: var(--gb-text);
}

/* Footer headings, brand text, labels and legal/meta items. */
html[data-theme="dark"] :is(
    footer,
    .site-footer,
    .footer,
    .global-footer,
    .launch-footer
) :is(
    h1, h2, h3, h4, h5, h6,
    strong, b,
    .footer-brand,
    .footer-brand-name,
    .footer-heading,
    .footer-title,
    .footer-label,
    .footer-column-title,
    .eyebrow,
    .panel-label,
    .site-footer__brand,
    .site-footer__heading,
    .site-footer__label
) {
    color: var(--gb-text) !important;
}

/* Normal footer copy stays readable but intentionally secondary. */
html[data-theme="dark"] :is(
    footer,
    .site-footer,
    .footer,
    .global-footer,
    .launch-footer
) :is(
    p, span, small, li,
    .muted,
    .text-muted,
    .footer-copy,
    .footer-description,
    .footer-meta,
    .footer-legal,
    .footer-copyright,
    .footer-tagline,
    .site-footer__copy,
    .site-footer__meta
) {
    color: var(--gb-text-secondary) !important;
}

/* All footer links, including social icon links and legal navigation. */
html[data-theme="dark"] :is(
    footer,
    .site-footer,
    .footer,
    .global-footer,
    .launch-footer
) a {
    color: var(--gb-text) !important;
}

html[data-theme="dark"] :is(
    footer,
    .site-footer,
    .footer,
    .global-footer,
    .launch-footer
) a:hover,
html[data-theme="dark"] :is(
    footer,
    .site-footer,
    .footer,
    .global-footer,
    .launch-footer
) a:focus-visible {
    color: var(--gb-text-secondary) !important;
}

/* Preserve the high-contrast CTA treatment inside the footer. */
html[data-theme="dark"] :is(
    footer,
    .site-footer,
    .footer,
    .global-footer,
    .launch-footer
) .button-primary {
    color: var(--gb-inverse) !important;
}

html[data-theme="dark"] :is(
    footer,
    .site-footer,
    .footer,
    .global-footer,
    .launch-footer
) .button-secondary,
html[data-theme="dark"] :is(
    footer,
    .site-footer,
    .footer,
    .global-footer,
    .launch-footer
) .button-ghost {
    color: var(--gb-text) !important;
}

/* ==========================================================================
   31. Course video watermark foundation
   Paid lessons use GraphicBidu private R2 delivery. Public trailers/previews
   remain separate sales-page content.
   ========================================================================== */

.field-help {
    display: block;
    margin-top: 7px;
    color: var(--gb-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.course-video-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 22px;
    border: 1px solid var(--gb-line-strong);
    border-radius: 14px;
    background: #090909;
    aspect-ratio: 16 / 9;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.13);
}

.course-video-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #090909;
}

.course-video-watermark {
    position: absolute;
    z-index: 2;
    max-width: min(76%, 440px);
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(8, 8, 8, 0.44);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    user-select: none;
    opacity: 0.78;
    transition: top 580ms ease, right 580ms ease, bottom 580ms ease, left 580ms ease, opacity 180ms ease;
}

.course-video-watermark--top-left {
    top: 14px;
    left: 14px;
    right: auto;
    bottom: auto;
}

.course-video-watermark--top-right {
    top: 14px;
    right: 14px;
    bottom: auto;
    left: auto;
}

.course-video-watermark--bottom-right {
    right: 14px;
    bottom: 14px;
    top: auto;
    left: auto;
}

.course-video-watermark--bottom-left {
    bottom: 14px;
    left: 14px;
    top: auto;
    right: auto;
}

.course-video-watermark--center {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
}

.course-video-watermark--top-left,
.course-video-watermark--top-right,
.course-video-watermark--bottom-right,
.course-video-watermark--bottom-left {
    transform: none;
}

.course-video-access-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    color: var(--gb-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.course-video-access-note strong {
    flex: 0 0 auto;
    color: var(--gb-text);
    font-size: 12px;
}

.course-video-access-note span {
    max-width: 74ch;
}

html[data-theme="dark"] .course-video-shell {
    border-color: rgba(255, 255, 255, 0.17);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .course-video-access-note strong {
    color: var(--gb-text) !important;
}

html[data-theme="dark"] .course-video-access-note span {
    color: var(--gb-text-secondary) !important;
}

@media (max-width: 640px) {
    .course-video-shell {
        margin-top: 18px;
        border-radius: 11px;
    }

    .course-video-watermark {
        max-width: 82%;
        padding: 6px 8px;
        font-size: 10px;
    }

    .course-video-access-note {
        flex-direction: column;
        gap: 3px;
        font-size: 12px;
    }
}

/* ==========================================================================
   32. Official Course Commerce V1
   Paid course CTA, pricing context, and automatic-access messaging.
   ========================================================================== */

.course-public-hero .public-score-card {
    position: relative;
}

.course-purchase-card {
    border-top: 3px solid var(--gb-ink);
}

.course-purchase-card > strong {
    display: block;
    margin-top: 4px;
    font-size: clamp(28px, 3.2vw, 42px);
    letter-spacing: -0.04em;
}

.course-purchase-note {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid var(--gb-line);
    color: var(--gb-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.course-official-program-section {
    padding-top: clamp(58px, 6vw, 84px);
    padding-bottom: clamp(58px, 6vw, 84px);
}

.course-official-program-card {
    min-height: 230px;
}

.course-official-program-card .eyebrow {
    margin-bottom: 14px;
}

.course-official-program-card h2 {
    max-width: 18ch;
    margin-bottom: 14px;
}

.course-official-program-card .stack-list {
    margin-top: 18px;
    padding-left: 20px;
}

.course-official-program-card .stack-list li {
    margin-bottom: 10px;
    color: var(--gb-text-secondary);
    line-height: 1.58;
}

html[data-theme="dark"] .course-purchase-card > strong,
html[data-theme="dark"] .course-official-program-card h2 {
    color: var(--gb-text) !important;
}

html[data-theme="dark"] .course-purchase-note,
html[data-theme="dark"] .course-official-program-card .stack-list li {
    color: var(--gb-text-secondary) !important;
}


/* ==========================================================================
   33. Course Completion Certificate V1
   ========================================================================== */

.course-certificate-status-section {
    padding-top: clamp(44px, 5vw, 72px);
    padding-bottom: 0;
}

.course-certificate-status-card {
    border-top: 3px solid var(--gb-ink);
}

.course-certificate-status-card h2 {
    max-width: 28ch;
}

.course-certificate-metadata,
.course-certificate-requirements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-top: 24px;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: var(--gb-line);
}

.course-certificate-metadata span,
.course-certificate-metadata strong,
.course-certificate-requirements div {
    background: var(--gb-paper);
}

.course-certificate-metadata span {
    padding: 12px 14px 0;
    color: var(--gb-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.course-certificate-metadata strong {
    padding: 4px 14px 14px;
    font-size: 15px;
}

.course-certificate-requirements div {
    display: grid;
    gap: 7px;
    padding: 16px;
}

.course-certificate-requirements span {
    color: var(--gb-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.course-certificate-requirements strong {
    color: var(--gb-text);
    font-size: 15px;
}

.course-certificate-boundary {
    margin: 18px 0 0;
    color: var(--gb-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.course-certificate-public-hero .public-score-card strong {
    font-size: clamp(19px, 2.25vw, 27px);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.course-certificate-admin-settings {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: var(--gb-surface-recessed);
}

.course-certificate-admin-settings .panel-label {
    margin-bottom: 7px;
}

.inline-form { display: inline; }
.danger-link { color: var(--gb-status-danger-text) !important; }

html[data-theme="dark"] .course-certificate-metadata span,
html[data-theme="dark"] .course-certificate-metadata strong,
html[data-theme="dark"] .course-certificate-requirements div {
    background: var(--gb-paper);
}

html[data-theme="dark"] .course-certificate-metadata strong,
html[data-theme="dark"] .course-certificate-requirements strong,
html[data-theme="dark"] .course-certificate-status-card h2 {
    color: var(--gb-text) !important;
}

@media (max-width: 640px) {
    .course-certificate-metadata,
    .course-certificate-requirements { grid-template-columns: 1fr; }
}


/* ==========================================================================
   34. Course Live Labs + Career Toolkit V1
   Protected learner resources and included group-session management.
   ========================================================================== */

.course-support-section {
    padding-top: clamp(50px, 5.5vw, 82px);
    padding-bottom: 0;
}

.course-support-grid {
    align-items: stretch;
}

.course-career-toolkit-card,
.course-live-labs-card {
    min-height: 100%;
}

.course-resource-list,
.course-live-session-list {
    margin-top: 20px;
}

.course-resource-row,
.course-live-session-row,
.admin-course-resource-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 0;
    border-top: 1px solid var(--gb-line);
}

.course-resource-row:first-child,
.course-live-session-row:first-child,
.admin-course-resource-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.course-resource-row strong,
.course-live-session-row strong,
.admin-course-resource-row strong {
    display: block;
    margin-top: 6px;
}

.course-resource-row p,
.course-live-session-row p {
    margin: 7px 0 0;
    color: var(--gb-text-secondary);
    line-height: 1.56;
}

.course-resource-row small,
.course-live-session-row small,
.admin-course-resource-row span {
    display: block;
    margin-top: 8px;
    color: var(--gb-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.resource-type-label {
    color: var(--gb-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.course-live-session-actions {
    display: grid;
    justify-items: end;
    gap: 8px;
    min-width: 140px;
}

.course-live-session-actions form {
    margin: 0;
}

.admin-course-resource-list,
.admin-live-session-list {
    margin-top: 20px;
}

.admin-course-resource-row {
    align-items: center;
}

.admin-live-session-card {
    padding: 22px;
}

html[data-theme="dark"] .course-resource-row p,
html[data-theme="dark"] .course-live-session-row p {
    color: var(--gb-text-secondary) !important;
}

html[data-theme="dark"] .resource-type-label,
html[data-theme="dark"] .course-resource-row small,
html[data-theme="dark"] .course-live-session-row small,
html[data-theme="dark"] .admin-course-resource-row span {
    color: var(--gb-text-muted) !important;
}

@media (max-width: 640px) {
    .course-resource-row,
    .course-live-session-row,
    .admin-course-resource-row {
        flex-direction: column;
        gap: 13px;
    }

    .course-live-session-actions {
        justify-items: start;
        min-width: 0;
    }

    .course-resource-row .button,
    .course-live-session-actions .button {
        width: 100%;
    }
}


/* ==========================================================================
   36. Course Sales Page Conversion V1
   Direct-sales course detail page, public trailer, accurate buyer content.
   ========================================================================== */

.course-sales-hero {
    padding-top: clamp(70px, 8vw, 112px);
    padding-bottom: clamp(52px, 6vw, 88px);
}

.course-sales-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
    align-items: center;
    gap: clamp(34px, 6vw, 88px);
}

.course-sales-copy h1 {
    max-width: 14ch;
}

.course-sales-copy .lead {
    max-width: 58ch;
}

.course-sales-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 22px;
}

.course-sales-hero-facts span {
    padding: 7px 10px;
    border: 1px solid var(--gb-line);
    border-radius: 999px;
    color: var(--gb-text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.course-sales-purchase-card {
    border-top: 3px solid var(--gb-ink);
}

.course-sales-purchase-card > strong {
    display: block;
    margin-top: 5px;
    font-size: clamp(29px, 3vw, 42px);
    letter-spacing: -0.04em;
}

.course-sales-purchase-note {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--gb-line);
    color: var(--gb-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.course-trailer-section {
    padding-top: 0;
}

.course-trailer-shell {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--gb-line-strong);
    border-radius: 18px;
    background: #090909;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.14);
}

.course-trailer-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.course-trailer-caption {
    margin: 12px 0 0;
    color: var(--gb-text-muted);
    font-size: 12px;
}

.course-sales-description-card h2 {
    max-width: 23ch;
}

.course-sales-block-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.course-sales-block-card {
    min-height: 190px;
}

.course-sales-block-card h3 {
    margin-bottom: 11px;
}

.course-sales-block-card p {
    color: var(--gb-text-secondary);
    line-height: 1.62;
}

.course-sales-requirements-card .stack-list > div {
    padding: 14px 0;
    border-top: 1px solid var(--gb-line);
}

.course-sales-requirements-card .stack-list > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.course-sales-requirements-card .stack-list strong,
.course-sales-requirements-card .stack-list span {
    display: block;
}

.course-sales-requirements-card .stack-list span {
    margin-top: 6px;
    color: var(--gb-text-secondary);
    line-height: 1.55;
}

.course-sales-legal-link {
    margin: 18px 0 0;
    font-size: 13px;
}

.course-sales-faq-list {
    display: grid;
    gap: 10px;
}

.course-sales-faq-item {
    padding: 18px 20px;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: var(--gb-paper);
}

.course-sales-faq-item summary {
    cursor: pointer;
    color: var(--gb-text);
    font-weight: 750;
}

.course-sales-faq-item p {
    margin: 14px 0 0;
    color: var(--gb-text-secondary);
    line-height: 1.62;
}

.course-sales-final-cta-section {
    padding-top: 0;
}

.course-sales-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-top: 3px solid var(--gb-ink);
}

.course-sales-final-cta h2 {
    max-width: 27ch;
    margin-top: 6px;
}

.course-sales-admin-block-list {
    margin-top: 18px;
}

.course-sales-admin-block-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--gb-line);
}

.course-sales-admin-block-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.course-sales-admin-block-row strong,
.course-sales-admin-block-row p {
    display: block;
}

.course-sales-admin-block-row strong {
    margin-top: 5px;
}

.course-sales-admin-block-row p {
    margin: 7px 0 0;
    color: var(--gb-text-secondary);
    line-height: 1.55;
}

html[data-theme="dark"] .course-sales-block-card p,
html[data-theme="dark"] .course-sales-purchase-note,
html[data-theme="dark"] .course-sales-requirements-card .stack-list span,
html[data-theme="dark"] .course-sales-faq-item p,
html[data-theme="dark"] .course-sales-admin-block-row p {
    color: var(--gb-text-secondary) !important;
}

html[data-theme="dark"] .course-sales-faq-item {
    background: var(--gb-paper);
}

@media (max-width: 900px) {
    .course-sales-hero-grid,
    .course-sales-block-grid {
        grid-template-columns: 1fr;
    }

    .course-sales-copy h1 {
        max-width: none;
    }

    .course-sales-block-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .course-sales-final-cta,
    .course-sales-admin-block-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .course-sales-final-cta .button,
    .course-sales-admin-block-row .button {
        width: 100%;
    }

    .course-trailer-shell {
        border-radius: 12px;
    }
}


/* ==========================================================================
   38. Course Public Preview Lessons V1
   Public YouTube previews are explicitly separate from private paid lessons.
   ========================================================================== */

.course-preview-lessons-section {
    padding-top: 0;
}

.course-preview-lessons-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 28px);
}

.course-preview-lesson-card {
    overflow: hidden;
    padding: 0;
}

.course-preview-video-shell {
    aspect-ratio: 16 / 9;
    background: #090909;
}

.course-preview-video-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.course-preview-lesson-meta {
    padding: 20px;
}

.course-preview-lesson-meta > span {
    color: var(--gb-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.course-preview-lesson-meta h3 {
    margin: 8px 0 0;
}

.course-preview-lesson-meta p {
    margin: 8px 0 0;
    color: var(--gb-text-secondary);
    font-size: 13px;
}

html[data-theme="dark"] .course-preview-lesson-meta p {
    color: var(--gb-text-secondary) !important;
}

@media (max-width: 720px) {
    .course-preview-lessons-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   39. Course Email + Purchase Onboarding Automation V1
   Welcome plan for activated enrolments and clear next steps.
   ========================================================================== */

.course-welcome-hero {
    padding-top: clamp(70px, 8vw, 112px);
    padding-bottom: clamp(54px, 6vw, 88px);
}

.course-welcome-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.65fr);
    align-items: center;
    gap: clamp(30px, 6vw, 82px);
}

.course-welcome-hero h1 {
    max-width: 15ch;
}

.course-welcome-progress-card {
    border-top: 3px solid var(--gb-ink);
}

.course-welcome-progress-card > strong {
    display: block;
    margin-top: 6px;
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: -0.05em;
}

.course-welcome-progress-bar {
    height: 7px;
    overflow: hidden;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--gb-surface-recessed);
}

.course-welcome-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--gb-ink);
}

.course-welcome-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.3vw, 26px);
}

.course-welcome-step-card {
    min-height: 250px;
}

.course-welcome-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--gb-ink);
    color: var(--gb-paper);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
}

.course-welcome-step-card h3 {
    margin-top: 7px;
}

.course-welcome-step-card .muted {
    min-height: 66px;
    line-height: 1.58;
}

.course-welcome-support-card,
.course-welcome-boundary-card {
    min-height: 100%;
}

.course-welcome-boundary-card .muted {
    line-height: 1.62;
}

html[data-theme="dark"] .course-welcome-progress-bar {
    background: var(--gb-surface-recessed);
}

html[data-theme="dark"] .course-welcome-step-number {
    background: var(--gb-text);
    color: var(--gb-paper);
}

@media (max-width: 900px) {
    .course-welcome-hero-grid,
    .course-welcome-steps {
        grid-template-columns: 1fr;
    }

    .course-welcome-hero h1 {
        max-width: none;
    }

    .course-welcome-step-card {
        min-height: 0;
    }

    .course-welcome-step-card .muted {
        min-height: 0;
    }
}


/* ==========================================================================
   40. Course Operations Dashboard V1
   Read-only operational visibility for courses, cohorts, support and review.
   ========================================================================== */

.course-operations-index-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
}

.course-operations-hero {
    padding-top: clamp(70px, 8vw, 112px);
    padding-bottom: clamp(52px, 6vw, 84px);
}

.course-operations-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.7fr);
    align-items: center;
    gap: clamp(28px, 5vw, 76px);
}

.course-operations-hero h1 {
    max-width: 16ch;
}

.course-operations-primary-card {
    border-top: 3px solid var(--gb-ink);
}

.course-operations-primary-card > strong {
    display: block;
    margin-top: 5px;
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: -0.05em;
}

.course-operations-progress-bar {
    height: 7px;
    overflow: hidden;
    margin-top: 18px;
    border-radius: 999px;
    background: var(--gb-surface-recessed);
}

.course-operations-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--gb-ink);
}

.course-operations-summary-section {
    padding-top: 0;
}

.course-operations-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.course-operations-metric-card {
    min-height: 164px;
}

.course-operations-metric-card > span,
.course-operations-segment-card > span {
    display: block;
    color: var(--gb-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.course-operations-metric-card > strong,
.course-operations-segment-card > strong {
    display: block;
    margin-top: 10px;
    color: var(--gb-text);
    font-size: clamp(26px, 2.5vw, 36px);
    letter-spacing: -0.04em;
}

.course-operations-metric-card p,
.course-operations-segment-card p {
    margin: 8px 0 0;
    color: var(--gb-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.course-operations-segment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.course-operations-segment-card {
    min-height: 164px;
}

.course-operations-attention-card {
    min-height: 100%;
}

.course-operations-list {
    margin-top: 18px;
}

.course-operations-list-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--gb-line);
}

.course-operations-list-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.course-operations-list-row strong,
.course-operations-list-row span {
    display: block;
}

.course-operations-list-row > div > span {
    margin-top: 6px;
    color: var(--gb-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.course-operations-purchase-status {
    display: grid;
    justify-items: end;
    gap: 7px;
    text-align: right;
    white-space: nowrap;
}

html[data-theme="dark"] .course-operations-metric-card p,
html[data-theme="dark"] .course-operations-segment-card p {
    color: var(--gb-text-secondary) !important;
}

html[data-theme="dark"] .course-operations-list-row > div > span {
    color: var(--gb-text-muted) !important;
}

@media (max-width: 1120px) {
    .course-operations-metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .course-operations-segment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .course-operations-hero-grid,
    .course-operations-metric-grid,
    .course-operations-segment-grid {
        grid-template-columns: 1fr;
    }

    .course-operations-hero h1 {
        max-width: none;
    }

    .course-operations-metric-card,
    .course-operations-segment-card {
        min-height: 0;
    }

    .course-operations-list-row {
        flex-direction: column;
        gap: 10px;
    }

    .course-operations-purchase-status {
        justify-items: start;
        text-align: left;
    }
}


/* ==========================================================================
   41. Course Launch Offers + Coupon Codes V2
   Genuine, server-validated launch discounts without fake timers.
   ========================================================================== */

.course-launch-checkout-form {
    display: grid;
    gap: 10px;
    width: 100%;
}

.course-launch-code-field {
    display: grid;
    gap: 6px;
    width: 100%;
    text-align: left;
}

.course-launch-code-field span {
    color: var(--gb-text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.course-launch-code-field em {
    color: var(--gb-text-muted);
    font-style: normal;
    font-weight: 500;
}

.course-launch-code-field input {
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--gb-line);
    border-radius: 9px;
    background: var(--gb-paper);
    color: var(--gb-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.course-launch-code-field input:focus {
    outline: 2px solid var(--gb-ink);
    outline-offset: 1px;
}

.course-offers-hero {
    padding-top: clamp(70px, 8vw, 112px);
    padding-bottom: clamp(52px, 6vw, 84px);
}

.course-offers-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.7fr);
    align-items: center;
    gap: clamp(28px, 5vw, 76px);
}

.course-offers-hero h1 {
    max-width: 16ch;
}

.course-offers-price-card {
    border-top: 3px solid var(--gb-ink);
}

.course-offers-price-card > strong {
    display: block;
    margin-top: 6px;
    font-size: clamp(30px, 3.4vw, 46px);
    letter-spacing: -0.05em;
}

.course-offers-price-card p {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--gb-line);
    color: var(--gb-text-secondary);
    font-size: 12px;
    line-height: 1.55;
}

.course-offers-create-card,
.course-offers-policy-card {
    min-height: 100%;
}

.course-offers-policy-card .stack-list > div {
    padding: 14px 0;
    border-top: 1px solid var(--gb-line);
}

.course-offers-policy-card .stack-list > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.course-offers-policy-card strong,
.course-offers-policy-card span {
    display: block;
}

.course-offers-policy-card span {
    margin-top: 6px;
    color: var(--gb-text-secondary);
    line-height: 1.55;
}

.course-offers-register {
    gap: 16px;
}

.course-offers-register-card h3 {
    margin: 6px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.06em;
}

.course-offers-register-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 20px 0 0;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: var(--gb-line);
}

.course-offers-register-metrics > div {
    padding: 13px;
    background: var(--gb-paper);
}

.course-offers-register-metrics span,
.course-offers-register-metrics strong {
    display: block;
}

.course-offers-register-metrics span {
    color: var(--gb-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.course-offers-register-metrics strong {
    margin-top: 6px;
    color: var(--gb-text);
    font-size: 17px;
}

.course-offers-register-time {
    margin: 15px 0;
    color: var(--gb-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

html[data-theme="dark"] .course-launch-code-field input,
html[data-theme="dark"] .course-offers-register-metrics > div {
    background: var(--gb-paper);
    color: var(--gb-text) !important;
}

html[data-theme="dark"] .course-offers-price-card p,
html[data-theme="dark"] .course-offers-policy-card span {
    color: var(--gb-text-secondary) !important;
}

@media (max-width: 820px) {
    .course-offers-hero-grid,
    .course-offers-register-metrics {
        grid-template-columns: 1fr;
    }

    .course-offers-hero h1 {
        max-width: none;
    }
}


/* GraphicBidu private R2 course player — practical access control, not DRM. */
.course-protected-video-card {
    margin-top: 1.25rem;
    -webkit-user-select: none;
    user-select: none;
}

.course-protected-video-shell {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    aspect-ratio: 16 / 9;
    background: #0c1525;
    border: 1px solid rgba(19, 35, 59, 0.22);
    isolation: isolate;
}

.course-player-start-gate,
.course-protected-video-host,
.course-protected-video-host > div {
    width: 100%;
    height: 100%;
}

.course-player-start-gate {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.85rem;
    padding: clamp(1.25rem, 5vw, 3rem);
    text-align: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.45), transparent 35%),
        radial-gradient(circle at 80% 80%, rgba(22, 163, 74, 0.35), transparent 38%),
        linear-gradient(145deg, #081326, #12233d);
}

.course-player-start-gate[hidden],
.course-protected-video-host[hidden],
.course-player-controls[hidden],
.course-player-security-notice[hidden] {
    display: none !important;
}

.course-player-start-gate strong {
    max-width: 52rem;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1.35;
}

.course-player-start-gate p {
    max-width: 40rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

.course-player-protection-label {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.68rem;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.course-protected-video-host {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000000;
}

.course-protected-video-shell .course-video-watermark {
    z-index: 5;
    pointer-events: none;
    max-width: min(86%, 44rem);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.42);
    border-color: rgba(255, 255, 255, 0.26);
    font-size: clamp(0.62rem, 1.35vw, 0.85rem);
}

.course-player-controls {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.course-player-control {
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 0.65rem;
    padding: 0.45rem 0.7rem;
    color: #ffffff;
    background: rgba(5, 12, 24, 0.78);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.course-player-control:hover,
.course-player-control:focus-visible {
    background: rgba(37, 99, 235, 0.9);
    outline: none;
}

.course-player-security-notice {
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.85rem;
    z-index: 7;
    margin-right: 10.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.65rem;
    color: #ffffff;
    background: rgba(5, 12, 24, 0.88);
    font-size: 0.78rem;
    line-height: 1.35;
}

.course-player-security-notice.is-error {
    border-color: rgba(248, 113, 113, 0.7);
    background: rgba(127, 29, 29, 0.94);
}

html[data-theme="dark"] .course-protected-video-shell {
    border-color: rgba(203, 213, 225, 0.16);
}

@media (max-width: 640px) {
    .course-protected-video-shell {
        border-radius: 0.85rem;
    }

    .course-player-controls {
        right: 0.55rem;
        bottom: 0.55rem;
        gap: 0.3rem;
    }

    .course-player-control {
        padding: 0.38rem 0.52rem;
        font-size: 0.7rem;
    }

    .course-player-security-notice {
        left: 0.55rem;
        right: 0.55rem;
        bottom: 3.35rem;
        margin-right: 0;
    }
}


/* Course study workspace: protected video plus a private learner transcript. */
.course-learning-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.85fr);
    gap: 18px;
    align-items: stretch;
    margin-top: 18px;
}

.course-learning-workspace .course-protected-video-card {
    margin-top: 0;
}

.course-transcript-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--border, #dedbd4);
    border-radius: 18px;
    background: var(--surface, #fff);
    overflow: hidden;
}

.course-transcript-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #dedbd4);
    font-weight: 800;
}

.course-transcript-panel__header small {
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted, #667085);
    font-weight: 600;
}

.course-transcript-panel__body {
    flex: 1;
    overflow: auto;
    max-height: 430px;
    padding: 16px;
    white-space: normal;
    line-height: 1.7;
    color: var(--text, #1d1d1f);
}

.course-transcript-panel__empty {
    padding: 18px 16px;
    color: var(--muted, #667085);
    line-height: 1.6;
}

.course-content-manager {
    display: grid;
    gap: 20px;
}

.course-content-module-card {
    display: grid;
    gap: 10px;
}

.course-content-lesson-list {
    display: grid;
    gap: 12px;
}

.course-content-lesson-editor {
    border: 1px solid var(--border, #dedbd4);
    border-radius: 14px;
    background: var(--surface-soft, #faf9f6);
    overflow: hidden;
}

.course-content-lesson-editor summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px;
    list-style: none;
}

.course-content-lesson-editor summary::-webkit-details-marker {
    display: none;
}

.course-content-lesson-editor summary small {
    display: block;
    margin-top: 4px;
    color: var(--muted, #667085);
}

.course-content-lesson-editor > form {
    padding: 0 16px 16px;
}

.course-learning-workspace:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    padding: 24px;
    background: var(--background, #101114);
    grid-template-columns: minmax(0, 1.8fr) minmax(330px, 0.85fr);
    gap: 24px;
    align-items: center;
}

.course-learning-workspace:fullscreen .course-transcript-panel {
    height: calc(100vh - 48px);
}

.course-learning-workspace:fullscreen .course-transcript-panel__body {
    max-height: none;
}

.course-learning-workspace:fullscreen .course-protected-video-shell {
    max-height: calc(100vh - 96px);
}

@media (max-width: 1050px) {
    .course-learning-workspace {
        grid-template-columns: 1fr;
    }

    .course-transcript-panel__body {
        max-height: 360px;
    }

    .course-learning-workspace:fullscreen {
        grid-template-columns: 1fr;
        overflow: auto;
        align-items: start;
    }

    .course-learning-workspace:fullscreen .course-transcript-panel {
        height: auto;
        min-height: 260px;
    }
}

/* Native private-R2 lesson video. The browser receives an expiring Worker
   stream only after the enrolled learner starts the protected player. */
.course-protected-video-host video.course-r2-native-video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
    outline: 0;
}


/* ==========================================================================
   38. Private R2 Course Player V2
   Native GraphicBidu player: private R2 stream, custom controls, learner
   watermark, video-only fullscreen, and full workspace focus mode.
   ========================================================================== */
.course-protected-video-card {
    margin-top: 0;
}

.course-protected-video-shell {
    border-radius: 20px;
    border-color: rgba(18, 35, 61, 0.32);
    background: #04070d;
    box-shadow: 0 20px 46px rgba(10, 18, 35, 0.18);
}

.course-protected-video-host,
.course-protected-video-host > video.course-r2-native-video {
    width: 100%;
    height: 100%;
}

.course-protected-video-host video.course-r2-native-video {
    display: block;
    background: #000;
    object-fit: contain;
    cursor: pointer;
}

.course-player-start-gate {
    background:
        radial-gradient(circle at 18% 18%, rgba(48, 105, 255, 0.46), transparent 36%),
        radial-gradient(circle at 83% 79%, rgba(24, 168, 116, 0.34), transparent 42%),
        linear-gradient(135deg, #050c1d 0%, #101e37 55%, #071224 100%);
}

.course-player-start-gate .button-primary {
    min-width: 210px;
}

.course-protected-video-shell .course-video-watermark {
    z-index: 12;
    max-width: min(86%, 44rem);
    border-color: rgba(255, 255, 255, 0.30);
    background: rgba(0, 0, 0, 0.48);
    font-size: clamp(0.62rem, 1.2vw, 0.82rem);
    backdrop-filter: blur(5px);
}

.course-player-ui {
    position: absolute;
    z-index: 13;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: 10px;
    padding: 14px 16px 15px;
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, rgba(2, 5, 12, 0.38) 15%, rgba(2, 5, 12, 0.94) 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 170ms ease, transform 170ms ease;
}

.course-protected-video-shell:hover .course-player-ui,
.course-protected-video-shell:focus-within .course-player-ui,
.course-protected-video-shell:fullscreen .course-player-ui {
    opacity: 1;
    transform: translateY(0);
}

.course-player-progress-row,
.course-player-control-row,
.course-player-control-group {
    display: flex;
    align-items: center;
}

.course-player-progress-row {
    gap: 10px;
}

.course-player-control-row {
    justify-content: space-between;
    gap: 12px;
}

.course-player-control-group {
    flex-wrap: wrap;
    gap: 7px;
}

.course-player-control-group--view {
    justify-content: flex-end;
}

.course-player-time {
    min-width: 42px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.course-player-seek,
.course-player-volume {
    accent-color: #9dc4ff;
    cursor: pointer;
}

.course-player-seek {
    flex: 1;
    min-width: 90px;
}

.course-player-volume {
    width: 82px;
}

.course-player-control,
.course-player-rate {
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 9px;
    color: #fff;
    background: rgba(5, 13, 28, 0.76);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
}

.course-player-control {
    padding: 0 11px;
}

.course-player-control--primary {
    min-width: 62px;
    border-color: transparent;
    background: #e6efff;
    color: #07101f;
}

.course-player-rate {
    padding: 0 8px;
}

.course-player-rate option {
    color: #101828;
    background: #fff;
}

.course-player-control:hover,
.course-player-control:focus-visible,
.course-player-rate:hover,
.course-player-rate:focus-visible {
    border-color: rgba(255, 255, 255, 0.86);
    outline: 2px solid rgba(171, 204, 255, 0.65);
    outline-offset: 2px;
}

.course-player-control--primary:hover,
.course-player-control--primary:focus-visible {
    background: #fff;
    border-color: #fff;
}

.course-player-security-notice {
    z-index: 14;
    right: 16px;
    bottom: 92px;
    left: 16px;
    margin-right: 0;
    max-width: 560px;
}

.course-learning-workspace {
    grid-template-columns: minmax(0, 1.72fr) minmax(310px, 0.78fr);
    gap: 20px;
    margin-top: 20px;
}

.course-transcript-panel {
    border-radius: 20px;
    box-shadow: 0 12px 26px rgba(10, 18, 35, 0.06);
}

.course-transcript-panel__header {
    padding: 14px 18px;
    background: var(--surface-soft, #faf9f6);
}

.course-transcript-panel__body {
    max-height: 480px;
    padding: 18px;
    font-size: 14px;
    line-height: 1.8;
    user-select: none;
}

.course-learning-workspace:fullscreen {
    grid-template-columns: minmax(0, 1.72fr) minmax(330px, 0.78fr);
    padding: 28px;
    background: #070c15;
}

.course-learning-workspace:fullscreen .course-transcript-panel {
    border-color: rgba(255, 255, 255, 0.18);
    background: #111a29;
    color: #f5f8ff;
}

.course-learning-workspace:fullscreen .course-transcript-panel__header {
    border-color: rgba(255, 255, 255, 0.14);
    background: #142036;
}

.course-learning-workspace:fullscreen .course-transcript-panel__body,
.course-learning-workspace:fullscreen .course-transcript-panel__empty {
    color: rgba(245, 248, 255, 0.88);
}

.course-protected-video-shell:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
    background: #000;
}

.course-protected-video-shell:fullscreen .course-r2-native-video {
    width: 100vw;
    height: 100vh;
}

@media (max-width: 860px) {
    .course-learning-workspace {
        grid-template-columns: 1fr;
    }

    .course-transcript-panel__body {
        max-height: 340px;
    }

    .course-learning-workspace:fullscreen {
        grid-template-columns: 1fr;
        overflow: auto;
        align-items: start;
    }

    .course-learning-workspace:fullscreen .course-transcript-panel {
        height: auto;
        min-height: 260px;
    }
}

@media (max-width: 640px) {
    .course-protected-video-shell {
        border-radius: 14px;
    }

    .course-player-ui {
        gap: 8px;
        padding: 10px;
        opacity: 1;
        transform: none;
    }

    .course-player-control-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .course-player-control-group,
    .course-player-control-group--view {
        width: 100%;
        justify-content: flex-start;
    }

    .course-player-volume {
        width: 70px;
    }

    .course-player-control {
        min-height: 32px;
        padding: 0 9px;
        font-size: 11px;
    }

    .course-player-security-notice {
        right: 10px;
        bottom: 126px;
        left: 10px;
        font-size: 11px;
    }

    .course-video-watermark {
        max-width: 82%;
        font-size: 9px;
    }
}


/* R2 player stability V3: reliable transition between native video full
   screen and workspace Focus study mode. */
.course-learning-workspace:fullscreen,
.course-learning-workspace.course-learning-workspace--focus-active {
    box-sizing: border-box;
    display: grid;
    width: 100vw;
    min-width: 0;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.course-learning-workspace:fullscreen .course-protected-video-card,
.course-learning-workspace.course-learning-workspace--focus-active .course-protected-video-card {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-items: center;
}

.course-learning-workspace:fullscreen .course-protected-video-shell,
.course-learning-workspace.course-learning-workspace--focus-active .course-protected-video-shell {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 56px);
    aspect-ratio: 16 / 9;
}

.course-learning-workspace:fullscreen .course-player-start-gate,
.course-learning-workspace.course-learning-workspace--focus-active .course-player-start-gate {
    min-height: min(56.25vw, calc(100vh - 56px));
}

@media (max-width: 860px) {
    .course-learning-workspace:fullscreen,
    .course-learning-workspace.course-learning-workspace--focus-active {
        overflow: auto;
        max-height: none;
    }

    .course-learning-workspace:fullscreen .course-protected-video-card,
    .course-learning-workspace.course-learning-workspace--focus-active .course-protected-video-card {
        height: auto;
    }
}

/* R2 course player V4: controls are unavailable until the learner explicitly
   starts the protected session. The first pass locks skipping and completion. */
.course-protected-video-shell:not(.is-player-started) .course-player-ui,
.course-protected-video-shell:not(.is-player-started) .course-video-watermark,
.course-protected-video-shell:not(.is-player-started) .course-player-security-notice:not(.is-error) {
    display: none !important;
    pointer-events: none !important;
}

.course-player-control[disabled],
.course-player-rate[disabled],
.course-player-seek[disabled] {
    cursor: not-allowed;
    opacity: 0.42;
}

.course-player-control[disabled]:hover,
.course-player-control[disabled]:focus-visible,
.course-player-rate[disabled]:hover,
.course-player-rate[disabled]:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(5, 13, 28, 0.76);
    outline: none;
}

.course-lesson-completion-actions {
    align-items: center;
}

.course-lesson-completion-actions .button[disabled] {
    cursor: not-allowed;
    opacity: 0.62;
    filter: saturate(0.6);
}

.course-completion-lock {
    max-width: 40rem;
    margin: 0;
    color: var(--muted, #667085);
    font-size: 0.9rem;
    line-height: 1.55;
}

.course-completion-lock.is-unlocked {
    color: #0f6b46;
    font-weight: 700;
}

html[data-theme="dark"] .course-completion-lock.is-unlocked {
    color: #8ee4b5;
}

/* ==========================================================================
   39. Synced transcript workspace V5
   VTT/SRT cues stay readable, follow playback and only become jump targets
   after the learner's protected first viewing is complete.
   ========================================================================== */
.course-learning-workspace {
    grid-template-columns: minmax(0, 1.72fr) minmax(320px, 0.82fr);
    gap: 20px;
    padding: 18px;
    border: 1px solid rgba(18, 35, 61, 0.10);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(248, 250, 253, 0.96), rgba(255, 255, 255, 0.96));
}

.course-protected-video-shell {
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(11, 23, 43, 0.15);
}

.course-transcript-panel {
    border-radius: 18px;
    border-color: rgba(18, 35, 61, 0.13);
    box-shadow: 0 12px 28px rgba(11, 23, 43, 0.07);
}

.course-transcript-panel__header {
    padding: 15px 16px 13px;
    background: rgba(250, 251, 253, 0.9);
}

.course-transcript-panel__header > div {
    display: grid;
    gap: 3px;
}

.course-transcript-panel__header > div > span {
    font-weight: 850;
    color: #101828;
}

.course-transcript-panel__header > div > small {
    max-width: none;
    color: #667085;
    font-size: 0.73rem;
    font-weight: 650;
}

.course-transcript-panel__status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid rgba(17, 116, 78, 0.24);
    border-radius: 999px;
    color: #0f6b46;
    background: rgba(18, 183, 106, 0.08);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.course-transcript-panel__hint {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(18, 35, 61, 0.09);
    color: #667085;
    background: rgba(249, 250, 251, 0.72);
    font-size: 0.78rem;
    line-height: 1.45;
}

.course-transcript-panel__body--timed {
    display: grid;
    align-content: start;
    gap: 4px;
    max-height: clamp(330px, 34vw, 510px);
    padding: 10px;
    white-space: normal;
}

.course-transcript-cue {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #344054;
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.course-transcript-cue time {
    padding-top: 0.12rem;
    color: #667085;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.course-transcript-cue:hover,
.course-transcript-cue:focus-visible {
    border-color: rgba(37, 99, 235, 0.24);
    color: #102a56;
    background: rgba(37, 99, 235, 0.07);
    outline: none;
}

.course-transcript-cue.is-active {
    border-color: rgba(37, 99, 235, 0.38);
    color: #102a56;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.13), rgba(37, 99, 235, 0.045));
    box-shadow: inset 3px 0 0 #2563eb;
}

.course-transcript-cue.is-locked {
    cursor: default;
}

.course-transcript-cue.is-locked:hover,
.course-transcript-cue.is-locked:focus-visible {
    border-color: transparent;
    color: #344054;
    background: transparent;
    outline: none;
}

.course-learning-workspace:fullscreen {
    grid-template-columns: minmax(0, 1.9fr) minmax(350px, 0.78fr);
    gap: 22px;
    padding: 22px;
    background: #07111f;
}

.course-learning-workspace:fullscreen .course-transcript-panel {
    height: calc(100vh - 44px);
    border-color: rgba(203, 213, 225, 0.18);
    background: #101a2a;
    box-shadow: none;
}

.course-learning-workspace:fullscreen .course-transcript-panel__header,
.course-learning-workspace:fullscreen .course-transcript-panel__hint {
    border-color: rgba(203, 213, 225, 0.13);
    color: #e5edf8;
    background: rgba(255, 255, 255, 0.025);
}

.course-learning-workspace:fullscreen .course-transcript-panel__header > div > span,
.course-learning-workspace:fullscreen .course-transcript-cue {
    color: #e5edf8;
}

.course-learning-workspace:fullscreen .course-transcript-panel__header > div > small,
.course-learning-workspace:fullscreen .course-transcript-cue time,
.course-learning-workspace:fullscreen .course-transcript-panel__hint {
    color: #aab8ca;
}

.course-learning-workspace:fullscreen .course-transcript-cue:hover,
.course-learning-workspace:fullscreen .course-transcript-cue:focus-visible {
    color: #ffffff;
    border-color: rgba(147, 197, 253, 0.34);
    background: rgba(96, 165, 250, 0.12);
}

.course-learning-workspace:fullscreen .course-transcript-cue.is-active {
    color: #ffffff;
    border-color: rgba(96, 165, 250, 0.48);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.24), rgba(59, 130, 246, 0.06));
    box-shadow: inset 3px 0 0 #93c5fd;
}

@media (max-width: 1050px) {
    .course-learning-workspace {
        padding: 14px;
        border-radius: 18px;
    }

    .course-transcript-panel__body--timed {
        max-height: 360px;
    }
}

@media (max-width: 640px) {
    .course-learning-workspace {
        gap: 14px;
        padding: 10px;
        border-radius: 16px;
    }

    .course-transcript-cue {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 9px;
        font-size: 0.84rem;
    }
}


/* ========================================================================== 
   46. Public Course Sales Page V2
   Scope: course listing and public sales page only. Desktop-first conversion
   layout with responsive spacing and readable curriculum hierarchy.
   ========================================================================== */

.course-sales-v2-wrapper {
    width: min(calc(100% - 48px), 1240px);
}

.course-sales-v2-hero {
    padding-block: clamp(64px, 8vw, 112px) clamp(54px, 6vw, 82px);
    background:
        radial-gradient(circle at 12% 12%, rgba(16, 16, 16, 0.045), transparent 33rem),
        linear-gradient(180deg, #ffffff 0%, #fbfbf9 100%);
}

.course-sales-v2-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(360px, 0.68fr);
    align-items: center;
    gap: clamp(36px, 6vw, 92px);
}

.course-sales-v2-copy h1 {
    max-width: 14ch;
    font-size: clamp(44px, 5.1vw, 74px);
    letter-spacing: -0.057em;
}

.course-sales-v2-copy .lead {
    max-width: 60ch;
    margin-top: 22px;
    font-size: clamp(17px, 1.38vw, 20px);
}

.course-sales-v2-badges {
    margin-bottom: 22px;
}

.course-sales-v2-copy .eyebrow {
    margin-bottom: 15px;
}

.course-sales-v2-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    max-width: 760px;
    margin-top: 34px;
    border: 1px solid var(--gb-line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--gb-paper);
}

.course-sales-v2-proof-grid > div {
    min-height: 104px;
    padding: 17px 16px;
    border-left: 1px solid var(--gb-line);
}

.course-sales-v2-proof-grid > div:first-child {
    border-left: 0;
}

.course-sales-v2-proof-grid strong,
.course-sales-v2-proof-grid span {
    display: block;
}

.course-sales-v2-proof-grid strong {
    color: var(--gb-text);
    font-size: clamp(18px, 1.7vw, 24px);
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.course-sales-v2-proof-grid span {
    margin-top: 7px;
    color: var(--gb-text-secondary);
    font-size: 12px;
    line-height: 1.38;
}

.course-sales-v2-purchase-card {
    position: relative;
    padding: clamp(25px, 3.1vw, 38px);
    border: 1px solid var(--gb-ink);
    border-radius: 20px;
    box-shadow: 0 26px 68px rgba(10, 10, 10, 0.1);
}

.course-sales-v2-purchase-card::before {
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--gb-ink);
    content: "";
}

.course-sales-v2-price {
    display: block;
    margin-top: 12px;
    color: var(--gb-text);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 750;
    letter-spacing: -0.065em;
    line-height: 0.98;
}

.course-sales-v2-duration {
    margin-top: 13px;
    color: var(--gb-text-secondary);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}

.course-sales-v2-purchase-list {
    display: grid;
    gap: 10px;
    margin: 24px 0;
    padding: 19px 0;
    border-top: 1px solid var(--gb-line);
    border-bottom: 1px solid var(--gb-line);
}

.course-sales-v2-purchase-list span {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    color: var(--gb-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.course-sales-v2-purchase-list span::before {
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--gb-ink);
    content: "";
}

.course-sales-v2-actions,
.course-sales-v2-actions form {
    width: 100%;
    margin: 0;
}

.course-sales-v2-actions .button,
.course-sales-v2-checkout-form .button {
    width: 100%;
    justify-content: center;
}

.course-sales-v2-checkout-form {
    display: grid;
    gap: 12px;
}

.course-sales-v2-checkout-form .course-launch-code-field {
    margin: 0;
}

.course-sales-v2-trailer-section {
    padding-block: 0 clamp(58px, 7vw, 94px);
}

.course-sales-v2-trailer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(290px, 0.7fr);
    align-items: stretch;
    gap: clamp(22px, 3.4vw, 44px);
}

.course-sales-v2-section-heading {
    max-width: 720px;
    margin-bottom: 32px;
}

.course-sales-v2-section-heading--compact {
    margin-bottom: 22px;
}

.course-sales-v2-section-heading h2 {
    max-width: 18ch;
    font-size: clamp(32px, 3.4vw, 48px);
}

.course-sales-v2-section-heading p:not(.eyebrow) {
    max-width: 68ch;
    margin-top: 14px;
    color: var(--gb-text-secondary);
    line-height: 1.65;
}

.course-sales-v2-trailer-shell {
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(10, 10, 10, 0.12);
}

.course-sales-v2-trailer-note {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3vw, 36px);
}

.course-sales-v2-trailer-note h3 {
    max-width: 16ch;
    font-size: clamp(23px, 2.1vw, 31px);
}

.course-sales-v2-note-list {
    display: grid;
    gap: 9px;
    margin: 23px 0 0;
    padding: 18px 0;
    border-top: 1px solid var(--gb-line);
    border-bottom: 1px solid var(--gb-line);
    list-style: none;
}

.course-sales-v2-note-list li {
    color: var(--gb-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.course-sales-v2-included-mini {
    display: grid;
    gap: 13px;
    margin-top: 20px;
}

.course-sales-v2-included-mini div {
    padding-top: 13px;
    border-top: 1px solid var(--gb-line);
}

.course-sales-v2-included-mini strong,
.course-sales-v2-included-mini span {
    display: block;
}

.course-sales-v2-included-mini strong {
    font-size: 13px;
    line-height: 1.35;
}

.course-sales-v2-included-mini span {
    margin-top: 5px;
    color: var(--gb-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.course-sales-v2-preview-section,
.course-sales-v2-overview-section,
.course-sales-v2-included-section,
.course-sales-v2-checkout-section,
.course-sales-v2-final-section {
    padding-block: clamp(58px, 7vw, 96px);
}

.course-sales-v2-tint-section,
.course-sales-v2-curriculum-section,
.course-sales-v2-faq-section {
    padding-block: clamp(62px, 7vw, 100px);
    background: var(--gb-paper-soft);
    border-top: 1px solid var(--gb-line);
    border-bottom: 1px solid var(--gb-line);
}

.course-sales-v2-overview-grid,
.course-sales-v2-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: stretch;
}

.course-sales-v2-description-card,
.course-sales-v2-snapshot-card,
.course-sales-v2-requirements-card,
.course-sales-v2-notice-card {
    min-height: 100%;
    padding: clamp(25px, 3.2vw, 42px);
    border-radius: 18px;
}

.course-sales-v2-description-card h2,
.course-sales-v2-snapshot-card h2,
.course-sales-v2-requirements-card h2,
.course-sales-v2-notice-card h2 {
    max-width: 18ch;
    font-size: clamp(30px, 3.2vw, 45px);
}

.course-sales-v2-body-copy {
    max-width: 66ch;
    margin-top: 20px;
    color: var(--gb-text-secondary);
    line-height: 1.75;
}

.course-sales-v2-definition-list {
    margin-top: 24px;
}

.course-sales-v2-definition-list li {
    gap: 24px;
    padding: 15px 0;
}

.course-sales-v2-definition-list strong {
    max-width: 62%;
    text-align: right;
}

.course-sales-v2-block-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.course-sales-v2-block-grid--included {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-sales-v2-block-card {
    min-height: 198px;
    padding: 25px;
    border-radius: 16px;
}

.course-sales-v2-block-card h3 {
    font-size: 20px;
}

.course-sales-v2-block-card p {
    margin-top: 12px;
    color: var(--gb-text-secondary);
    line-height: 1.62;
}

.course-sales-v2-included-card {
    min-height: 164px;
    border-top: 3px solid var(--gb-ink);
}

.course-sales-v2-section-heading--curriculum {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
    column-gap: clamp(30px, 5vw, 86px);
    max-width: none;
    margin-bottom: 36px;
}

.course-sales-v2-section-heading--curriculum .eyebrow,
.course-sales-v2-section-heading--curriculum h2 {
    grid-column: 1;
}

.course-sales-v2-section-heading--curriculum p:not(.eyebrow) {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: end;
    margin: 0;
    padding-bottom: 4px;
}

.course-sales-v2-outline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 28px);
}

.course-sales-v2-module-card {
    padding: clamp(23px, 2.7vw, 34px);
    border-radius: 18px;
}

.course-sales-v2-module-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--gb-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
}

.course-sales-v2-module-head small {
    color: var(--gb-text-secondary);
    font-family: inherit;
    font-size: inherit;
}

.course-sales-v2-module-card h3 {
    font-size: clamp(22px, 2.2vw, 30px);
}

.course-sales-v2-module-card > p {
    min-height: 3.25em;
    margin-top: 10px;
    color: var(--gb-text-secondary);
    font-size: 14px;
    line-height: 1.58;
}

.course-sales-v2-lesson-list {
    display: grid;
    gap: 0;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: lesson;
}

.course-sales-v2-lesson-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--gb-line);
    counter-increment: lesson;
}

.course-sales-v2-lesson-list li > span {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 8px;
    color: var(--gb-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.course-sales-v2-lesson-list li > span::before {
    color: var(--gb-text-muted);
    font-size: 11px;
    font-weight: 700;
    content: counter(lesson, decimal-leading-zero);
}

.course-sales-v2-lesson-list li small {
    color: var(--gb-text-secondary);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.course-sales-v2-module-assignment-list {
    display: grid;
    gap: 0;
    margin-top: 20px;
}

.course-sales-v2-module-assignment-list > div {
    padding: 12px 0;
    border-top: 1px solid var(--gb-line);
}

.course-sales-v2-module-assignment-list strong,
.course-sales-v2-module-assignment-list span {
    display: block;
}

.course-sales-v2-module-assignment-list span {
    margin-top: 5px;
    color: var(--gb-text-secondary);
    font-size: 12px;
}

.course-sales-v2-requirement-list {
    display: grid;
    gap: 0;
    margin-top: 24px;
}

.course-sales-v2-requirement-list > div {
    padding: 15px 0;
    border-top: 1px solid var(--gb-line);
}

.course-sales-v2-requirement-list > div:first-child {
    padding-top: 0;
    border-top: 0;
}

.course-sales-v2-requirement-list strong,
.course-sales-v2-requirement-list span {
    display: block;
}

.course-sales-v2-requirement-list span {
    margin-top: 6px;
    color: var(--gb-text-secondary);
    line-height: 1.55;
}

.course-sales-v2-faq-list {
    max-width: 940px;
}

.course-sales-v2-faq-list .course-sales-faq-item {
    padding: 21px 24px;
    border-radius: 14px;
}

.course-sales-v2-final-section {
    padding-top: 0;
}

.course-sales-v2-final-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 0.42fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--gb-ink);
    border-radius: 20px;
}

.course-sales-v2-final-card h2 {
    max-width: 18ch;
    font-size: clamp(32px, 3.4vw, 50px);
}

.course-sales-v2-final-card p:not(.eyebrow) {
    max-width: 58ch;
    margin-top: 15px;
    color: var(--gb-text-secondary);
    line-height: 1.65;
}

.course-board-v2-hero {
    padding-bottom: clamp(46px, 5vw, 72px);
}

.course-board-v2-hero-grid {
    align-items: center;
    gap: clamp(30px, 5vw, 70px);
}

.course-board-v2-panel {
    padding: 28px;
}

.course-board-v2-panel h2 {
    margin: 5px 0 8px;
    font-size: clamp(42px, 4vw, 60px);
}

.course-board-v2-section {
    padding-block: clamp(58px, 7vw, 92px);
}

.course-board-v2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.course-board-v2-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 28px;
}

.course-board-v2-card h2 {
    margin-top: 18px;
    font-size: clamp(24px, 2.2vw, 32px);
}

.course-board-v2-card > .muted {
    min-height: 4.8em;
    margin-top: 11px;
    line-height: 1.62;
}

.course-board-v2-definition-list {
    margin-top: 22px;
}

.course-board-v2-card .start-actions {
    margin-top: auto;
    padding-top: 22px;
}

html[data-theme="dark"] .course-sales-v2-hero {
    background: var(--gb-paper);
}

html[data-theme="dark"] .course-sales-v2-purchase-list span,
html[data-theme="dark"] .course-sales-v2-proof-grid span,
html[data-theme="dark"] .course-sales-v2-body-copy,
html[data-theme="dark"] .course-sales-v2-section-heading p:not(.eyebrow),
html[data-theme="dark"] .course-sales-v2-trailer-note li,
html[data-theme="dark"] .course-sales-v2-included-mini span,
html[data-theme="dark"] .course-sales-v2-block-card p,
html[data-theme="dark"] .course-sales-v2-module-card > p,
html[data-theme="dark"] .course-sales-v2-requirement-list span,
html[data-theme="dark"] .course-sales-v2-final-card p:not(.eyebrow) {
    color: var(--gb-text-secondary) !important;
}

@media (max-width: 1040px) {
    .course-sales-v2-hero-grid,
    .course-sales-v2-trailer-grid,
    .course-sales-v2-overview-grid,
    .course-sales-v2-checkout-grid,
    .course-sales-v2-final-card {
        grid-template-columns: 1fr;
    }

    .course-sales-v2-copy h1 {
        max-width: 16ch;
    }

    .course-sales-v2-block-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-sales-v2-section-heading--curriculum {
        grid-template-columns: 1fr;
    }

    .course-sales-v2-section-heading--curriculum p:not(.eyebrow) {
        grid-row: auto;
        grid-column: 1;
        margin-top: 15px;
    }
}

@media (max-width: 720px) {
    .course-sales-v2-wrapper {
        width: min(calc(100% - 32px), 1240px);
    }

    .course-sales-v2-proof-grid,
    .course-sales-v2-outline-grid,
    .course-sales-v2-block-grid,
    .course-sales-v2-block-grid--included,
    .course-board-v2-grid {
        grid-template-columns: 1fr;
    }

    .course-sales-v2-proof-grid > div {
        min-height: 0;
        border-top: 1px solid var(--gb-line);
        border-left: 0;
    }

    .course-sales-v2-proof-grid > div:first-child {
        border-top: 0;
    }

    .course-sales-v2-copy h1 {
        max-width: none;
    }

    .course-sales-v2-module-card > p,
    .course-board-v2-card > .muted {
        min-height: 0;
    }
}

@media (max-width: 520px) {
    .course-sales-v2-hero,
    .course-sales-v2-preview-section,
    .course-sales-v2-overview-section,
    .course-sales-v2-included-section,
    .course-sales-v2-checkout-section,
    .course-sales-v2-tint-section,
    .course-sales-v2-curriculum-section,
    .course-sales-v2-faq-section {
        padding-block: 48px;
    }

    .course-sales-v2-purchase-card,
    .course-sales-v2-description-card,
    .course-sales-v2-snapshot-card,
    .course-sales-v2-requirements-card,
    .course-sales-v2-notice-card,
    .course-sales-v2-module-card,
    .course-sales-v2-final-card {
        padding: 22px;
        border-radius: 15px;
    }

    .course-sales-v2-proof-grid {
        margin-top: 26px;
    }

    .course-sales-v2-lesson-list li {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .course-sales-v2-lesson-list li small {
        padding-left: 35px;
    }
}

/* Learner Course Workspace V7: single active lesson, path map, support tabs. */
.course-workspace-page{padding:42px 0 88px;background:linear-gradient(180deg,#fbfbfa 0,#fff 32rem)}
.course-workspace-wrapper{width:min(calc(100% - 40px),1360px)}
.course-workspace-header{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.7fr);gap:28px;align-items:end;margin-bottom:28px;padding:34px;border:1px solid var(--gb-line);border-radius:24px;background:var(--gb-paper);box-shadow:var(--gb-shadow)}
.course-workspace-header__copy{max-width:790px}.course-workspace-header__copy h1{margin:8px 0 14px;font-size:clamp(34px,4vw,56px)}.course-workspace-header__copy>p{margin:0;color:var(--gb-text-secondary);max-width:720px}.course-workspace-badges{display:flex;flex-wrap:wrap;gap:8px}
.course-workspace-progress-card{padding:22px;border-radius:18px;border:1px solid var(--gb-line);background:var(--gb-paper-soft)}.course-workspace-progress-card__top,.course-workspace-progress-card__meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.course-workspace-progress-card__top span{color:var(--gb-text-secondary);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.course-workspace-progress-card__top strong{font-size:34px;line-height:1}.course-workspace-progress-bar{height:8px;overflow:hidden;border-radius:999px;background:var(--gb-paper-muted);margin:18px 0 12px}.course-workspace-progress-bar span{display:block;height:100%;min-width:4px;border-radius:inherit;background:var(--gb-ink)}.course-workspace-progress-card__meta{color:var(--gb-text-secondary);font-size:14px}
.course-workspace-layout{display:grid;grid-template-columns:minmax(245px,.55fr) minmax(0,1.7fr);gap:22px;align-items:start}.course-path-panel{position:sticky;top:94px;overflow:hidden;border:1px solid var(--gb-line);border-radius:20px;background:var(--gb-paper);box-shadow:var(--gb-shadow)}.course-path-panel__heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--gb-line)}.course-path-panel__heading .eyebrow{margin-bottom:5px}.course-path-panel__heading h2{font-size:18px}.course-path-mobile-toggle{display:none;border:1px solid var(--gb-line-strong);background:var(--gb-paper);border-radius:9px;padding:8px 10px;font-size:13px;font-weight:700}.course-path-panel__scroll{max-height:calc(100vh - 186px);overflow:auto;padding:8px}.course-path-module{border-bottom:1px solid var(--gb-line)}.course-path-module:last-child{border-bottom:0}.course-path-module summary{display:grid;grid-template-columns:28px minmax(0,1fr) 20px;gap:10px;align-items:center;list-style:none;padding:14px 10px;cursor:pointer}.course-path-module summary::-webkit-details-marker{display:none}.course-path-module__node{display:inline-grid;place-items:center;width:27px;height:27px;border:1px solid var(--gb-line-strong);border-radius:50%;font-size:12px;font-weight:800}.course-path-module summary strong{display:block;font-size:14px;line-height:1.35}.course-path-module summary small{display:block;color:var(--gb-text-muted);font-size:12px;margin-top:2px}.course-path-module__chevron{color:var(--gb-text-muted);font-size:18px;transition:transform .18s ease}.course-path-module[open] .course-path-module__chevron{transform:rotate(180deg)}.course-path-lessons{display:grid;gap:2px;margin:0 0 12px 20px;padding:0 0 0 18px;border-left:1px solid var(--gb-line);list-style:none}.course-path-lessons li{position:relative}.course-path-lessons li::before{content:'';position:absolute;width:8px;height:8px;left:-23px;top:17px;border:2px solid var(--gb-line-strong);border-radius:50%;background:var(--gb-paper)}.course-path-lessons li.is-complete::before{border-color:var(--gb-success);background:var(--gb-success)}.course-path-lessons li.is-current::before{width:11px;height:11px;left:-24px;top:15px;border-color:var(--gb-ink);background:var(--gb-ink);box-shadow:0 0 0 4px #ecece8}.course-path-lessons a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding:10px;border-radius:10px;color:inherit}.course-path-lessons a:hover{background:var(--gb-paper-soft)}.course-path-lessons .is-current a{background:var(--gb-ink);color:var(--gb-inverse)}.course-path-lesson__state{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:11px;font-weight:800}.course-path-lesson__copy{min-width:0}.course-path-lesson__copy strong{display:block;font-size:13px;line-height:1.35}.course-path-lesson__copy small{display:block;color:var(--gb-text-muted);font-size:11px;margin-top:3px}.course-path-lessons .is-current small{color:rgba(255,255,255,.7)}
.course-active-lesson{min-width:0;padding:28px;border:1px solid var(--gb-line);border-radius:22px;background:var(--gb-paper);box-shadow:var(--gb-shadow)}.course-active-lesson__breadcrumb{display:flex;flex-wrap:wrap;gap:7px;color:var(--gb-text-muted);font-size:13px;font-weight:700}.course-active-lesson__heading{display:flex;align-items:start;justify-content:space-between;gap:22px;margin:12px 0 22px}.course-active-lesson__heading h2{font-size:clamp(26px,3vw,40px);margin-bottom:8px}.course-active-lesson__heading p{margin:0;color:var(--gb-text-secondary);max-width:900px}.course-learning-workspace--single{grid-template-columns:minmax(0,1.6fr) minmax(280px,.72fr);gap:16px;padding:14px;border:1px solid var(--gb-line);border-radius:20px;background:#fbfbfb}.course-learning-workspace--single .course-protected-video-card{min-width:0}.course-workspace-sidepanel{overflow:hidden;min-height:100%;border:1px solid var(--gb-line);border-radius:16px;background:var(--gb-paper)}.course-workspace-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--gb-line)}.course-workspace-tabs button{border:0;border-right:1px solid var(--gb-line);background:var(--gb-paper);padding:13px 8px;color:var(--gb-text-secondary);font-size:12px;font-weight:800}.course-workspace-tabs button:last-child{border-right:0}.course-workspace-tabs button[aria-selected="true"]{color:var(--gb-text);background:var(--gb-paper-soft);box-shadow:inset 0 -2px var(--gb-ink)}.course-workspace-tab-panel{height:calc(100% - 46px)}.course-workspace-tab-panel[hidden]{display:none!important}.course-workspace-sidepanel .course-transcript-panel{height:100%;border:0;border-radius:0;box-shadow:none}.course-workspace-sidepanel .course-transcript-panel__body{max-height:500px}.course-workspace-panel__heading{padding:18px 18px 0}.course-workspace-panel__heading .eyebrow{margin-bottom:5px}.course-workspace-panel__heading h3{font-size:18px}.course-workspace-panel__heading p{margin:7px 0 0;color:var(--gb-text-secondary);font-size:14px;line-height:1.5}.course-note-form{display:grid;gap:12px;padding:18px}.course-note-form textarea{resize:vertical;min-height:240px}.course-note-form__actions{display:grid;gap:9px;color:var(--gb-text-muted);font-size:12px}.course-workspace-support-list{display:grid;gap:0;padding:0 18px 18px}.course-workspace-support-list>div{padding:15px 0;border-bottom:1px solid var(--gb-line)}.course-workspace-support-list>div:last-child{border-bottom:0}.course-workspace-support-list strong{display:block;font-size:14px}.course-workspace-support-list p{margin:6px 0 12px;color:var(--gb-text-secondary);font-size:13px}.course-workspace-resource-link{display:block;margin-top:10px;color:var(--gb-text);font-weight:700;font-size:13px}.course-workspace-resource-link small{display:block;color:var(--gb-text-muted);font-weight:400;margin-top:2px}.course-active-lesson__footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding-top:18px}.course-active-lesson__footer .course-video-access-note{margin:0}.course-lesson-completion-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px}.course-lesson-completion-actions .course-completion-lock{margin:0}.course-active-lesson__navigation{display:flex;gap:8px;justify-content:flex-end}.course-workspace-lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.course-workspace-lower-grid .card{padding:26px}.course-workspace-lower-grid h2{font-size:25px;margin-top:5px}.course-review-form{display:grid;gap:12px;margin-top:16px}.course-review-form label{display:grid;gap:6px;font-weight:700;font-size:14px}.course-review-form textarea{resize:vertical}.course-workspace-review-status{margin-top:16px;color:var(--gb-text-secondary)}.course-workspace-resource-only{display:grid;gap:12px}.course-workspace-empty{padding:34px}.course-sales-review-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.course-sales-review-card{display:grid;gap:12px}.course-sales-review-card p{margin:0;color:var(--gb-text-secondary)}.course-sales-review-card small{color:var(--gb-text-muted)}.course-sales-review-card__stars{color:#8a6815;letter-spacing:.08em;font-size:17px}.course-review-moderation-card{padding:26px}
@media(max-width:1100px){.course-workspace-layout{grid-template-columns:245px minmax(0,1fr)}.course-learning-workspace--single{grid-template-columns:minmax(0,1fr)}.course-workspace-sidepanel .course-transcript-panel__body{max-height:320px}}
@media(max-width:820px){.course-workspace-page{padding:24px 0 58px}.course-workspace-wrapper{width:min(calc(100% - 24px),1360px)}.course-workspace-header{grid-template-columns:1fr;gap:20px;padding:24px;border-radius:18px}.course-workspace-header__copy h1{font-size:35px}.course-workspace-layout{grid-template-columns:1fr}.course-path-panel{position:relative;top:0}.course-path-panel__heading{padding:14px 16px}.course-path-mobile-toggle{display:inline-flex}.course-path-panel__scroll{display:none;max-height:min(62vh,540px);padding:8px}.course-path-panel.is-open .course-path-panel__scroll{display:block}.course-active-lesson{padding:18px;border-radius:18px}.course-active-lesson__heading{display:grid;gap:10px;margin-bottom:18px}.course-active-lesson__heading h2{font-size:29px}.course-learning-workspace--single{padding:8px;border-radius:16px}.course-workspace-lower-grid{grid-template-columns:1fr}.course-active-lesson__footer{grid-template-columns:1fr}.course-active-lesson__navigation{justify-content:space-between}.course-sales-review-grid{grid-template-columns:1fr}}
@media(max-width:560px){.course-workspace-header{padding:18px}.course-workspace-header__copy h1{font-size:30px}.course-workspace-progress-card{padding:17px}.course-active-lesson{padding:14px}.course-active-lesson__heading h2{font-size:25px}.course-workspace-tabs button{padding:12px 3px;font-size:11px}.course-workspace-sidepanel .course-transcript-panel__body{max-height:380px}.course-workspace-lower-grid .card{padding:20px}.course-active-lesson__navigation .button{flex:1;text-align:center}}

/* ========================================================================== 
   48. Course Sales Final Polish
   Scope: buyer-facing course access card only.
   Keeps the access card premium without the heavy generic card hover shadow.
   ========================================================================== */
.course-sales-v2-purchase-card {
    border-color: var(--gb-line-strong);
    box-shadow: 0 8px 22px rgba(10, 10, 10, 0.045);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .course-sales-v2-purchase-card.card:hover {
        transform: translateY(-1px);
        border-color: var(--gb-line-strong);
        box-shadow: 0 13px 30px rgba(10, 10, 10, 0.065);
    }
}

html[data-theme="dark"] .course-sales-v2-purchase-card {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="dark"] .course-sales-v2-purchase-card.card:hover {
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
    }
}

/* Course instructor profile */
.course-sales-instructor-section{padding-top:18px}.course-sales-instructor-card{display:grid;grid-template-columns:180px minmax(0,1.35fr) minmax(220px,.55fr);gap:30px;align-items:center;padding:30px;background:linear-gradient(145deg,#fff 0%,#fbfbf9 100%);box-shadow:0 14px 38px rgba(22,22,19,.07)}.course-sales-instructor-card__portrait{width:180px;height:180px;margin:0;overflow:hidden;border-radius:22px;background:#e4e2df;border:1px solid var(--gb-line)}.course-sales-instructor-card__portrait img{width:100%;height:100%;object-fit:cover}.course-sales-instructor-card__copy h2{margin:5px 0 6px;font-size:clamp(28px,3vw,40px)}.course-sales-instructor-card__copy>p:last-of-type{margin:16px 0 0;color:var(--gb-text-secondary);line-height:1.65}.course-sales-instructor-card__headline{margin:0;font-size:16px;font-weight:800}.course-sales-instructor-card__meta{margin:7px 0 0;color:var(--gb-text-muted);font-size:14px}.course-sales-instructor-card__tags,.course-workspace-instructor-card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.course-sales-instructor-card__tags span,.course-workspace-instructor-card__tags span{border:1px solid var(--gb-line);border-radius:999px;padding:6px 9px;color:var(--gb-text-secondary);font-size:12px;font-weight:700;background:var(--gb-paper)}.course-sales-instructor-card__support{padding:20px;border:1px solid var(--gb-line);border-radius:16px;background:var(--gb-paper-soft)}.course-sales-instructor-card__support .eyebrow{margin-bottom:9px}.course-sales-instructor-card__support strong{display:block;font-size:17px}.course-sales-instructor-card__support p:last-child{margin:9px 0 0;color:var(--gb-text-secondary);font-size:14px;line-height:1.6}
.course-workspace-instructor-inline{display:flex;align-items:center;gap:10px;margin-top:18px}.course-workspace-instructor-inline img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid var(--gb-line)}.course-workspace-instructor-inline span{display:grid;gap:2px}.course-workspace-instructor-inline strong{font-size:13px}.course-workspace-instructor-inline small{font-size:12px;color:var(--gb-text-muted)}.course-workspace-instructor-inline .inline-link{margin-left:auto;font-size:13px}.course-workspace-instructor-card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;padding:16px 0 18px;border-bottom:1px solid var(--gb-line)}.course-workspace-instructor-card>img{width:58px;height:58px;border-radius:15px;object-fit:cover;border:1px solid var(--gb-line)}.course-workspace-instructor-card__eyebrow{display:block;margin-bottom:4px;color:var(--gb-text-muted);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.course-workspace-instructor-card strong{display:block;font-size:15px}.course-workspace-instructor-card p{margin:4px 0;color:var(--gb-text-secondary);font-size:13px;line-height:1.45}.course-workspace-instructor-card small{color:var(--gb-text-muted);font-size:12px}.course-workspace-instructor-card__tags{grid-column:1/-1;margin-top:0}.course-instructor-admin-card{padding:30px}.course-instructor-admin-card .shortlist-header{align-items:center;margin-bottom:22px}.course-instructor-admin-card .shortlist-header>img{width:78px;height:78px;object-fit:cover;border-radius:18px;border:1px solid var(--gb-line)}.course-support-admin-settings{padding-top:6px}
@media(max-width:980px){.course-sales-instructor-card{grid-template-columns:140px minmax(0,1fr);gap:24px}.course-sales-instructor-card__portrait{width:140px;height:140px}.course-sales-instructor-card__support{grid-column:1/-1}.course-workspace-instructor-inline{align-items:flex-start}.course-workspace-instructor-inline .inline-link{margin:5px 0 0 auto}}
@media(max-width:620px){.course-sales-instructor-card{grid-template-columns:1fr;padding:22px;gap:18px}.course-sales-instructor-card__portrait{width:96px;height:96px;border-radius:18px}.course-sales-instructor-card__copy h2{font-size:30px}.course-workspace-instructor-inline{display:grid;grid-template-columns:38px minmax(0,1fr)}.course-workspace-instructor-inline .inline-link{grid-column:1/-1;margin:2px 0 0}.course-instructor-admin-card{padding:20px}.course-instructor-admin-card .shortlist-header>img{width:60px;height:60px}}

/* --------------------------------------------------------------------------
   30. Homepage hero V10 — product-first trust story
   Scope: homepage hero and its immediate three-stage bridge only.
   -------------------------------------------------------------------------- */
.home-hero-v10 {
    position: relative;
    overflow: clip;
    padding-top: clamp(74px, 7vw, 108px);
    padding-bottom: clamp(54px, 5vw, 76px);
}

.home-hero-v10::before {
    position: absolute;
    z-index: -1;
    width: min(54vw, 760px);
    height: min(54vw, 760px);
    top: -235px;
    right: -245px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(70, 54, 171, 0.11) 0%, rgba(70, 54, 171, 0.035) 43%, rgba(70, 54, 171, 0) 73%);
    content: "";
    pointer-events: none;
}

.home-hero-v10-grid {
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.92fr);
    align-items: center;
    gap: clamp(46px, 6vw, 82px);
}

.home-hero-v10-copy {
    max-width: 620px;
}

.home-hero-v10-copy h1 {
    max-width: 12.5ch;
    margin-bottom: 0;
    font-size: clamp(48px, 4.45vw, 66px);
    line-height: 1.01;
    letter-spacing: -0.061em;
}

.home-hero-v10-copy .lead {
    max-width: 590px;
    margin-top: 22px;
    color: var(--gb-text-secondary);
    font-size: clamp(17px, 1.45vw, 20px);
    line-height: 1.58;
}

.home-hero-v10-actions {
    margin-top: 28px;
}

.home-hero-v10-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.home-hero-v10-proof li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-width: 0;
}

.home-hero-v10-proof-mark {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gb-line-strong);
    border-radius: 50%;
    color: var(--gb-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.home-hero-v10-proof strong,
.home-hero-v10-proof small {
    display: block;
}

.home-hero-v10-proof strong {
    color: var(--gb-text);
    font-size: 12px;
    line-height: 1.3;
}

.home-hero-v10-proof small {
    margin-top: 4px;
    color: var(--gb-text-secondary);
    font-size: 11px;
    line-height: 1.42;
}

.home-hero-v10-showcase {
    position: relative;
    display: grid;
    justify-items: center;
    min-height: 0;
}

.home-hero-v10-record {
    position: relative;
    width: min(100%, 584px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(26, 26, 23, 0.88);
    border-radius: 26px;
    background: #191918;
    box-shadow: 0 28px 58px rgba(17, 17, 16, 0.14), 0 5px 14px rgba(17, 17, 16, 0.08);
}

.home-hero-v10-record::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.home-hero-v10-record img {
    display: block;
    width: 100%;
    height: auto;
}

.home-hero-v10-record-caption {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 17px;
    padding: 10px 14px;
    border: 1px solid var(--gb-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--gb-paper) 92%, transparent);
    box-shadow: 0 8px 24px rgba(16, 16, 14, 0.06);
    color: var(--gb-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.home-hero-v10-record-caption i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gb-text);
    opacity: 0.58;
}

.home-path-section {
    padding-top: 18px;
    padding-bottom: clamp(64px, 7vw, 96px);
}

.home-path-heading {
    display: grid;
    max-width: 720px;
    gap: 10px;
    margin-bottom: 28px;
}

.home-path-heading h2 {
    max-width: 15ch;
    margin: 0;
    color: var(--gb-text);
    font-size: clamp(30px, 3.15vw, 45px);
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.home-path-heading > p:last-child {
    max-width: 630px;
    margin: 0;
    color: var(--gb-text-secondary);
    line-height: 1.6;
}

.home-path-grid {
    gap: 16px;
}

.home-path-card {
    position: relative;
    min-height: 198px;
    padding: 24px;
}

.home-path-card .card-symbol {
    width: 36px;
    height: 36px;
    margin-bottom: 22px;
}

.home-path-card .card-symbol::after {
    inset: 10px;
}

.home-path-number {
    position: absolute;
    top: 24px;
    right: 24px;
    margin: 0;
    color: var(--gb-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.home-path-card h3 {
    margin: 0;
    font-size: 21px;
    letter-spacing: -0.03em;
}

.home-path-card p:last-child {
    max-width: 34ch;
}

@media (max-width: 1120px) {
    .home-hero-v10-grid {
        grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
        gap: 42px;
    }

    .home-hero-v10-proof {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 12px;
    }
}

@media (max-width: 960px) {
    .home-hero-v10 {
        padding-top: 66px;
        padding-bottom: 52px;
    }

    .home-hero-v10-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .home-hero-v10-copy h1 {
        max-width: 13ch;
    }

    .home-hero-v10-showcase {
        justify-items: start;
    }

    .home-hero-v10-record-caption {
        margin-left: 22px;
    }
}

@media (max-width: 720px) {
    .home-hero-v10 {
        padding-top: 48px;
        padding-bottom: 44px;
    }

    .home-hero-v10::before {
        width: 125vw;
        height: 125vw;
        top: -180px;
        right: -48vw;
    }

    .home-hero-v10-copy h1 {
        max-width: 12ch;
        font-size: clamp(41px, 11vw, 52px);
    }

    .home-hero-v10-copy .lead {
        font-size: 16px;
        line-height: 1.58;
    }

    .home-hero-v10-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
    }

    .home-hero-v10-actions .button {
        width: 100%;
    }

    .home-hero-v10-proof {
        grid-template-columns: 1fr;
        margin-top: 28px;
    }

    .home-hero-v10-record {
        width: 100%;
        border-radius: 20px;
    }

    .home-hero-v10-record-caption {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
        margin-left: 0;
        padding: 10px 12px;
        font-size: 8px;
    }

    .home-path-section {
        padding-top: 10px;
    }

    .home-path-heading {
        margin-bottom: 22px;
    }

    .home-path-card {
        min-height: 0;
    }
}

@media (max-width: 390px) {
    .home-hero-v10-record-caption {
        border-radius: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

html[data-theme="dark"] .home-hero-v10-record-caption {
    border-color: #373735;
    background: rgba(24, 24, 23, 0.92);
}

/* --------------------------------------------------------------------------
   31. Homepage V11 — major product-story redesign
   Scope: app/Views/web/home.php only. Replaces generic card rhythm with a
   clearer evidence → review → approval journey. No routes, scripts, data, or
   media assets are changed.
   -------------------------------------------------------------------------- */
.home-v11-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(78px, 8vw, 126px) 0 clamp(76px, 8vw, 116px);
    background:
        radial-gradient(circle at 89% 16%, rgba(74, 58, 177, 0.11), transparent 23%),
        linear-gradient(180deg, #fff 0%, #fbfbfa 100%);
}

.home-v11-hero::before,
.home-v11-hero::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.home-v11-hero::before {
    width: min(55vw, 780px);
    height: min(55vw, 780px);
    top: -360px;
    right: -270px;
    border: 1px solid rgba(11, 11, 10, 0.05);
    border-radius: 50%;
}

.home-v11-hero::after {
    width: 45%;
    height: 1px;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, var(--gb-line));
}

.home-v11-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.84fr);
    align-items: center;
    gap: clamp(52px, 7vw, 104px);
}

.home-v11-hero-copy {
    max-width: 655px;
}

.home-v11-hero-copy h1 {
    max-width: 11.6ch;
    margin: 0;
    font-size: clamp(50px, 5vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.home-v11-hero-copy .lead {
    max-width: 610px;
    margin-top: 25px;
    color: var(--gb-text-secondary);
    font-size: clamp(17px, 1.45vw, 20px);
    line-height: 1.62;
}

.home-v11-hero-actions {
    margin-top: 30px;
}

.home-v11-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.home-v11-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gb-text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.home-v11-hero-points span {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gb-line-strong);
    border-radius: 50%;
    color: var(--gb-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8px;
    font-weight: 800;
}

.home-v11-hero-points strong {
    font-weight: 700;
}

.home-v11-hero-visual {
    display: grid;
    justify-items: center;
}

.home-v11-record {
    position: relative;
    width: min(100%, 542px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(20, 20, 18, 0.86);
    border-radius: 26px;
    background: #1a1a19;
    box-shadow: 0 24px 54px rgba(12, 12, 10, 0.12), 0 5px 14px rgba(12, 12, 10, 0.06);
}

.home-v11-record::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.home-v11-record img {
    display: block;
    width: 100%;
    height: auto;
}

.home-v11-record-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    color: var(--gb-text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.home-v11-record-note-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gb-success);
}

.home-v11-context-section {
    padding-top: clamp(76px, 9vw, 132px);
    padding-bottom: clamp(76px, 9vw, 130px);
    border-bottom: 1px solid var(--gb-line);
}

.home-v11-section-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.62fr);
    gap: clamp(42px, 8vw, 132px);
    align-items: end;
    margin-bottom: clamp(34px, 4vw, 52px);
}

.home-v11-section-intro h2,
.home-v11-flow-heading h2,
.home-v11-use-panel h2,
.home-v11-cta-panel h2 {
    margin-top: 9px;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.home-v11-context-intro h2 {
    max-width: 13ch;
}

.home-v11-section-intro > p {
    max-width: 43ch;
    margin: 0 0 4px;
    color: var(--gb-text-secondary);
    font-size: 17px;
    line-height: 1.68;
}

.home-v11-contrast {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 16px;
}

.home-v11-contrast-card {
    min-height: 320px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 22px;
}

.home-v11-contrast-card--plain {
    border: 1px solid var(--gb-line);
    background: var(--gb-paper);
}

.home-v11-contrast-card--record {
    position: relative;
    overflow: hidden;
    border: 1px solid #1b1b1a;
    background: #171716;
    color: #fff;
}

.home-v11-contrast-card--record::after {
    position: absolute;
    width: 300px;
    height: 300px;
    right: -142px;
    bottom: -166px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.home-v11-card-label,
.home-v11-flow-kicker {
    margin: 0;
    color: var(--gb-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-v11-contrast-card--record .home-v11-card-label,
.home-v11-contrast-card--record .home-v11-text-link {
    color: rgba(255, 255, 255, 0.66);
}

.home-v11-contrast-card h3 {
    max-width: 17ch;
    margin: 14px 0 24px;
    color: inherit;
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.06;
    letter-spacing: -0.05em;
}

.home-v11-contrast-card ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-v11-contrast-card li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
    color: var(--gb-text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.home-v11-contrast-card li::before {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
}

.home-v11-contrast-card--record li {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.78);
}

.home-v11-text-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    gap: 8px;
    margin-top: 31px;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    font-size: 13px;
    font-weight: 800;
}

.home-v11-flow-section {
    padding: clamp(80px, 9vw, 132px) 0;
    background: var(--gb-paper-soft);
}

.home-v11-flow-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(44px, 8vw, 148px);
    align-items: start;
}

.home-v11-flow-heading {
    position: sticky;
    top: 114px;
}

.home-v11-flow-heading h2 {
    max-width: 11ch;
}

.home-v11-flow-heading > p:not(.eyebrow) {
    max-width: 37ch;
    margin: 19px 0 27px;
    color: var(--gb-text-secondary);
    line-height: 1.65;
}

.home-v11-flow-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--gb-line-strong);
}

.home-v11-flow-list li {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 21px;
    padding: 28px 0 31px;
    border-bottom: 1px solid var(--gb-line);
}

.home-v11-flow-number {
    color: var(--gb-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.home-v11-flow-list h3 {
    max-width: 28ch;
    margin: 9px 0 10px;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.13;
    letter-spacing: -0.035em;
}

.home-v11-flow-list p:last-child {
    max-width: 58ch;
    color: var(--gb-text-secondary);
    font-size: 15px;
    line-height: 1.62;
}

.home-v11-use-section {
    padding: clamp(70px, 8vw, 112px) 0;
}

.home-v11-use-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(44px, 8vw, 132px);
    align-items: start;
}

.home-v11-use-panel {
    padding: clamp(30px, 4vw, 48px);
    border: 1px solid #1d1d1b;
    border-radius: 22px;
    background: #1a1a19;
    color: #fff;
}

.home-v11-use-panel .eyebrow,
.home-v11-use-panel p {
    color: rgba(255, 255, 255, 0.64);
}

.home-v11-use-panel h2 {
    max-width: 12ch;
    margin-top: 11px;
    color: #fff;
}

.home-v11-use-panel > p:last-child {
    max-width: 43ch;
    margin-top: 20px;
    line-height: 1.66;
}

.home-v11-use-list {
    border-top: 1px solid var(--gb-line-strong);
}

.home-v11-use-list article {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 18px;
    padding: 27px 0;
    border-bottom: 1px solid var(--gb-line);
}

.home-v11-use-list > article > span {
    color: var(--gb-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.home-v11-use-list h3 {
    margin: 0 0 7px;
    font-size: 21px;
    letter-spacing: -0.03em;
}

.home-v11-use-list p {
    max-width: 43ch;
    color: var(--gb-text-secondary);
    font-size: 15px;
    line-height: 1.58;
}

.home-v11-cta-section {
    padding: 0 0 clamp(76px, 9vw, 124px);
}

.home-v11-cta-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.7fr);
    gap: clamp(40px, 8vw, 110px);
    align-items: center;
    padding: clamp(36px, 5vw, 64px);
    border: 1px solid #1d1d1b;
    border-radius: 24px;
    background: #171716;
    color: #fff;
}

.home-v11-cta-panel .eyebrow,
.home-v11-cta-copy > p {
    color: rgba(255, 255, 255, 0.65);
}

.home-v11-cta-panel h2 {
    max-width: 12ch;
    margin-top: 10px;
    color: #fff;
}

.home-v11-cta-copy > p {
    max-width: 48ch;
    line-height: 1.68;
}

.home-v11-cta-actions {
    margin-top: 25px;
}

.home-v11-cta-panel .button-primary {
    border-color: #fff;
    background: #fff;
    color: #111;
}

.home-v11-cta-panel .button-primary:hover {
    background: #ecece8;
}

.home-v11-cta-panel .button-ghost {
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
}

.home-v11-cta-panel .button-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 980px) {
    .home-v11-hero-grid,
    .home-v11-section-intro,
    .home-v11-flow-layout,
    .home-v11-use-grid,
    .home-v11-cta-panel {
        grid-template-columns: 1fr;
    }

    .home-v11-hero-grid {
        gap: 46px;
    }

    .home-v11-hero-visual {
        justify-items: start;
    }

    .home-v11-flow-heading {
        position: static;
    }

    .home-v11-section-intro > p {
        margin: 0;
    }
}

@media (max-width: 680px) {
    .home-v11-hero {
        padding-top: 52px;
        padding-bottom: 64px;
    }

    .home-v11-hero-grid {
        gap: 35px;
    }

    .home-v11-hero-copy h1 {
        max-width: 11.4ch;
        font-size: clamp(43px, 12vw, 56px);
    }

    .home-v11-hero-copy .lead {
        margin-top: 19px;
        font-size: 16px;
    }

    .home-v11-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 25px;
    }

    .home-v11-hero-actions .button {
        width: 100%;
    }

    .home-v11-hero-points {
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
        margin-top: 28px;
    }

    .home-v11-record {
        width: 100%;
        border-radius: 19px;
    }

    .home-v11-record-note {
        font-size: 11px;
    }

    .home-v11-context-section,
    .home-v11-flow-section,
    .home-v11-use-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .home-v11-section-intro {
        gap: 17px;
        margin-bottom: 28px;
    }

    .home-v11-section-intro h2,
    .home-v11-flow-heading h2,
    .home-v11-use-panel h2,
    .home-v11-cta-panel h2 {
        font-size: clamp(33px, 10vw, 44px);
    }

    .home-v11-contrast {
        grid-template-columns: 1fr;
    }

    .home-v11-contrast-card {
        min-height: 0;
        padding: 27px 23px;
        border-radius: 18px;
    }

    .home-v11-contrast-card h3 {
        margin-bottom: 20px;
        font-size: 31px;
    }

    .home-v11-flow-list li {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
        padding: 23px 0 25px;
    }

    .home-v11-flow-list h3 {
        font-size: 23px;
    }

    .home-v11-use-panel,
    .home-v11-cta-panel {
        padding: 28px 23px;
        border-radius: 18px;
    }

    .home-v11-use-list article {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 11px;
        padding: 22px 0;
    }

    .home-v11-cta-section {
        padding-bottom: 62px;
    }

    .home-v11-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-v11-cta-actions .button {
        width: 100%;
    }
}

html[data-theme="dark"] .home-v11-hero {
    background: radial-gradient(circle at 89% 16%, rgba(116, 100, 236, 0.17), transparent 24%), #141414;
}

html[data-theme="dark"] .home-v11-hero::before {
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .home-v11-context-section,
html[data-theme="dark"] .home-v11-use-section {
    border-color: #353532;
}

html[data-theme="dark"] .home-v11-contrast-card--plain {
    border-color: #3b3b38;
    background: #191918;
}

html[data-theme="dark"] .home-v11-flow-section {
    background: #161615;
}

/* --------------------------------------------------------------------------
   32. Homepage V12 — founder + services carousel
   Scope: homepage hero only. Uses one supplied founder photograph plus two
   native CSS service visuals. No external image provider, route, or data call.
   -------------------------------------------------------------------------- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.home-v12-hero {
    padding-bottom: clamp(70px, 7vw, 106px);
}

.home-v12-hero-grid {
    grid-template-columns: minmax(0, 0.96fr) minmax(420px, 0.92fr);
    gap: clamp(48px, 6vw, 94px);
}

.home-v12-hero-copy h1 {
    max-width: 10.6ch;
}

.home-v12-carousel {
    position: relative;
    width: min(100%, 562px);
    margin: 0 auto;
    outline: none;
}

.home-v12-carousel:focus-visible .home-v12-carousel-viewport {
    box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.13), 0 24px 54px rgba(12, 12, 10, 0.13);
}

.home-v12-carousel-viewport {
    position: relative;
    min-height: 530px;
    overflow: hidden;
    border: 1px solid rgba(20, 20, 18, 0.84);
    border-radius: 26px;
    background: #171716;
    box-shadow: 0 24px 54px rgba(12, 12, 10, 0.13), 0 5px 14px rgba(12, 12, 10, 0.06);
}

.home-v12-carousel-viewport::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.home-v12-carousel-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    align-content: stretch;
    min-height: 100%;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.025);
    transition: opacity 420ms ease, transform 620ms cubic-bezier(.2,.7,.2,1);
    visibility: hidden;
}

.home-v12-carousel-slide.is-active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    visibility: visible;
}

.home-v12-carousel-slide--photo > img {
    width: 100%;
    height: 100%;
    min-height: 530px;
    object-fit: cover;
    object-position: 50% 50%;
}

.home-v12-photo-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 88px 32px 30px;
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.15) 23%, rgba(5, 5, 5, 0.88) 100%);
}

.home-v12-slide-label {
    margin: 0 0 11px;
    color: rgba(255, 255, 255, 0.7);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-v12-photo-overlay h2,
.home-v12-service-copy h2 {
    margin: 0;
    letter-spacing: -.05em;
}

.home-v12-photo-overlay h2 {
    max-width: 17ch;
    font-size: clamp(29px, 3vw, 38px);
    line-height: 1.04;
}

.home-v12-photo-overlay > p:not(.home-v12-slide-label) {
    max-width: 52ch;
    margin: 14px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.55;
}

.home-v12-photo-overlay > span {
    display: block;
    margin-top: 17px;
    color: rgba(255,255,255,.65);
    font-size: 12px;
    font-weight: 700;
}

.home-v12-carousel-slide--review,
.home-v12-carousel-slide--learning {
    grid-template-rows: minmax(0, 1fr) auto;
    color: #fff;
    background: radial-gradient(circle at 88% 6%, rgba(115, 96, 245, .28), transparent 34%), #181817;
}

.home-v12-service-visual {
    position: relative;
    min-height: 312px;
    margin: 23px 23px 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 19px;
    background: linear-gradient(145deg, #21211f, #131312);
}

.home-v12-service-visual::before {
    position: absolute;
    width: 220px;
    height: 220px;
    top: -145px;
    right: -120px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    content: "";
}

.home-v12-ui-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.82);
    font-size: 11px;
    font-weight: 800;
}

.home-v12-ui-brand {
    letter-spacing: -.015em;
}

.home-v12-ui-status,
.home-v12-review-ready {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    padding: 5px 8px;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.home-v12-review-layout {
    display: grid;
    grid-template-columns: 1.15fr .9fr;
    gap: 10px;
    padding: 15px;
}

.home-v12-review-profile,
.home-v12-review-evidence,
.home-v12-review-checklist,
.home-v12-review-context,
.home-v12-review-ready,
.home-v12-learning-player,
.home-v12-learning-support,
.home-v12-learning-progress {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.04);
}

.home-v12-review-profile {
    display: flex;
    min-height: 86px;
    align-items: center;
    gap: 12px;
    padding: 13px;
}

.home-v12-ui-avatar {
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    border-radius: 13px;
    background: linear-gradient(145deg, #3b3b39, #2a2a28);
}

.home-v12-review-profile div {
    display: grid;
    width: 100%;
    gap: 8px;
}

.home-v12-review-profile i,
.home-v12-review-checklist i,
.home-v12-review-context i,
.home-v12-learning-support i {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.17);
}

.home-v12-review-profile i:nth-child(1) { width: 86%; }
.home-v12-review-profile i:nth-child(2) { width: 61%; }
.home-v12-review-profile i:nth-child(3) { width: 72%; }

.home-v12-review-evidence,
.home-v12-review-context {
    padding: 12px;
}

.home-v12-review-evidence p,
.home-v12-review-checklist p,
.home-v12-review-context p,
.home-v12-learning-support p {
    margin: 0;
    color: rgba(255,255,255,.57);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-v12-review-evidence strong {
    display: block;
    margin-top: 7px;
    font-size: 31px;
    line-height: 1;
    letter-spacing: -.055em;
}

.home-v12-review-evidence span {
    color: rgba(255,255,255,.58);
    font-size: 9px;
}

.home-v12-review-checklist {
    display: grid;
    gap: 10px;
    min-height: 104px;
    padding: 12px;
}

.home-v12-review-checklist i:nth-of-type(1) { width: 87%; }
.home-v12-review-checklist i:nth-of-type(2) { width: 71%; }
.home-v12-review-checklist i:nth-of-type(3) { width: 80%; }
.home-v12-review-checklist i:nth-of-type(4) { width: 55%; }

.home-v12-review-context {
    display: grid;
    gap: 9px;
}

.home-v12-review-context i:nth-of-type(1) { width: 76%; }
.home-v12-review-context i:nth-of-type(2) { width: 54%; }

.home-v12-review-ready {
    font-size: 7px;
}

.home-v12-service-copy {
    padding: 25px 29px 30px;
}

.home-v12-service-copy .home-v12-slide-label {
    color: rgba(255,255,255,.58);
}

.home-v12-service-copy h2 {
    max-width: 17ch;
    color: #fff;
    font-size: clamp(27px, 2.8vw, 36px);
    line-height: 1.05;
}

.home-v12-service-copy > p:not(.home-v12-slide-label) {
    max-width: 49ch;
    margin: 13px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.57;
}

.home-v12-service-copy a {
    display: inline-flex;
    gap: 8px;
    margin-top: 18px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.55);
    padding-bottom: 3px;
    font-size: 12px;
    font-weight: 800;
}

.home-v12-learning-layout {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 124px;
    gap: 10px;
    padding: 15px;
}

.home-v12-learning-sidebar {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 7px;
    min-height: 207px;
    padding: 11px 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 13px;
    background: rgba(255,255,255,.04);
}

.home-v12-learning-sidebar i {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,.17);
}

.home-v12-learning-course-dot {
    width: 13px;
    height: 13px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 50%;
    background: #1b1b1a;
}

.home-v12-learning-course-dot.is-done { border-color: #61bf8e; background: #61bf8e; }
.home-v12-learning-course-dot.is-current { border: 3px solid #fff; background: #151514; }

.home-v12-learning-player {
    display: grid;
    align-content: center;
    min-height: 207px;
    padding: 19px;
    background: radial-gradient(circle at 70% 15%, rgba(89, 72, 218, .50), transparent 39%), linear-gradient(145deg, #17162f, #112a2a);
}

.home-v12-learning-player span {
    color: rgba(255,255,255,.6);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-v12-learning-player strong {
    max-width: 12ch;
    margin-top: 11px;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -.055em;
}

.home-v12-learning-player i {
    width: 74%;
    height: 8px;
    margin-top: 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.7);
}

.home-v12-learning-support {
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 207px;
    padding: 12px;
}

.home-v12-learning-support strong {
    font-size: 16px;
    line-height: 1.18;
    letter-spacing: -.035em;
}

.home-v12-learning-support i:nth-of-type(1) { width: 83%; }
.home-v12-learning-support i:nth-of-type(2) { width: 62%; }

.home-v12-learning-progress {
    grid-column: 2 / span 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
}

.home-v12-learning-progress span {
    color: rgba(255,255,255,.62);
    font-size: 10px;
    font-weight: 700;
}

.home-v12-learning-progress strong {
    font-size: 20px;
    letter-spacing: -.05em;
}

.home-v12-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}

.home-v12-carousel-dots,
.home-v12-carousel-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-v12-carousel-dots button,
.home-v12-carousel-controls button {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.home-v12-carousel-dots button {
    width: 24px;
    height: 3px;
    border: 0;
    border-radius: 999px;
    background: var(--gb-line-strong);
    transition: width 200ms ease, background 200ms ease;
}

.home-v12-carousel-dots button.is-active {
    width: 42px;
    background: var(--gb-ink);
}

.home-v12-carousel-controls button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--gb-line-strong);
    border-radius: 50%;
    color: var(--gb-text);
    background: var(--gb-paper);
    font-size: 17px;
    line-height: 1;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.home-v12-carousel-controls button:hover,
.home-v12-carousel-controls button:focus-visible {
    border-color: var(--gb-ink);
    background: var(--gb-ink);
    color: #fff;
    outline: none;
}

@media (max-width: 980px) {
    .home-v12-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-v12-carousel {
        margin: 0;
    }
}

@media (max-width: 680px) {
    .home-v12-carousel {
        width: 100%;
    }

    .home-v12-carousel-viewport,
    .home-v12-carousel-slide--photo > img {
        min-height: 470px;
    }

    .home-v12-photo-overlay {
        padding: 88px 22px 24px;
    }

    .home-v12-photo-overlay h2,
    .home-v12-service-copy h2 {
        font-size: 29px;
    }

    .home-v12-service-visual {
        min-height: 275px;
        margin: 16px 16px 0;
        border-radius: 15px;
    }

    .home-v12-service-copy {
        padding: 21px 21px 24px;
    }

    .home-v12-learning-layout {
        grid-template-columns: 38px minmax(0, 1fr) 97px;
        gap: 7px;
        padding: 11px;
    }

    .home-v12-learning-sidebar,
    .home-v12-learning-player,
    .home-v12-learning-support {
        min-height: 185px;
    }

    .home-v12-learning-player {
        padding: 14px;
    }

    .home-v12-learning-player strong {
        font-size: 20px;
    }

    .home-v12-learning-support {
        padding: 9px;
    }

    .home-v12-learning-support strong {
        font-size: 13px;
    }

    .home-v12-carousel-footer {
        margin-top: 12px;
    }
}

html[data-theme="dark"] .home-v12-carousel-controls button {
    border-color: #464642;
    background: #1a1a19;
    color: #fff;
}

html[data-theme="dark"] .home-v12-carousel-dots button.is-active {
    background: #fff;
}


/* --------------------------------------------------------------------------
   33. Homepage V13 — product-only hero carousel
   Visual-only product slides. No founder photography, slide copy, dots, or
   arrow controls. Existing home copy, routes, and all product flows remain
   untouched. Keyboard Left/Right navigation remains available through the
   existing carousel script for accessibility.
   -------------------------------------------------------------------------- */
.home-v13-hero {
    position: relative;
    overflow: clip;
    padding-top: clamp(84px, 9vw, 132px);
    padding-bottom: clamp(84px, 8vw, 126px);
    background:
        radial-gradient(circle at 92% 20%, rgba(126, 95, 255, .11), transparent 26%),
        radial-gradient(circle at 70% 86%, rgba(36, 186, 164, .055), transparent 25%),
        var(--gb-paper);
}

.home-v13-hero::before {
    position: absolute;
    width: min(54vw, 760px);
    height: min(54vw, 760px);
    top: -440px;
    right: -260px;
    border: 1px solid rgba(28, 28, 25, .055);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.home-v13-hero-grid {
    grid-template-columns: minmax(0, .95fr) minmax(400px, .84fr);
    align-items: center;
    gap: clamp(46px, 7vw, 108px);
}

.home-v13-hero-copy {
    position: relative;
    z-index: 1;
}

.home-v13-hero-copy h1 {
    max-width: 10.9ch;
}

.home-v13-carousel {
    position: relative;
    z-index: 1;
    width: min(100%, 548px);
    margin: 0 auto;
    outline: none;
}

.home-v13-carousel:focus-visible .home-v13-carousel-viewport {
    outline: 3px solid rgba(20, 20, 18, .2);
    outline-offset: 6px;
}

.home-v13-carousel-viewport {
    position: relative;
    aspect-ratio: 9 / 8;
    min-height: 470px;
    overflow: hidden;
    border: 1px solid rgba(24, 24, 22, .16);
    border-radius: 30px;
    background: #151514;
    box-shadow: 0 26px 60px rgba(24, 24, 20, .10), 0 4px 13px rgba(24, 24, 20, .06);
}

.home-v13-carousel-viewport::before {
    position: absolute;
    z-index: 3;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.home-v13-carousel-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: scale(1.015);
    transition: opacity 560ms ease, transform 800ms cubic-bezier(.2,.7,.2,1);
    visibility: hidden;
}

.home-v13-carousel-slide.is-active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    visibility: visible;
}

.home-v13-carousel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 980px) {
    .home-v13-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-v13-carousel {
        margin: 0;
    }
}

@media (max-width: 680px) {
    .home-v13-hero {
        padding-top: 62px;
        padding-bottom: 66px;
    }

    .home-v13-carousel {
        width: 100%;
    }

    .home-v13-carousel-viewport {
        min-height: 0;
        border-radius: 23px;
        box-shadow: 0 18px 40px rgba(24, 24, 20, .10), 0 3px 9px rgba(24, 24, 20, .05);
    }
}

html[data-theme="dark"] .home-v13-hero {
    background:
        radial-gradient(circle at 92% 20%, rgba(126, 95, 255, .17), transparent 27%),
        radial-gradient(circle at 70% 86%, rgba(36, 186, 164, .09), transparent 25%),
        var(--gb-paper);
}

html[data-theme="dark"] .home-v13-hero::before {
    border-color: rgba(255,255,255,.07);
}

html[data-theme="dark"] .home-v13-carousel-viewport {
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .28), 0 4px 13px rgba(0, 0, 0, .16);
}

/* ========================================================================
   GRAPHICBIDU MASTER RECOVERY + COURSE STUDIO V1
   Restores the view layer introduced by the current candidate, pricing,
   mentor, course workspace and admin content templates.
   ======================================================================== */

/* Shared candidate dashboard frame */
.candidate-dashboard-page { padding: 36px 0 72px; }
.candidate-dashboard-frame { display: grid; grid-template-columns: minmax(210px, 244px) minmax(0, 1fr); gap: 28px; align-items: start; }
.candidate-dashboard-content { min-width: 0; }
.dashboard-app-nav { position: sticky; top: 96px; border: 1px solid var(--line, #e5e7eb); background: var(--surface, #fff); border-radius: 18px; padding: 14px; box-shadow: 0 10px 28px rgba(15, 23, 42, .055); }
.dashboard-app-nav-head { padding: 10px 10px 14px; border-bottom: 1px solid var(--line, #e5e7eb); margin-bottom: 8px; }
.dashboard-app-nav-head strong { display: block; font-size: 1rem; color: var(--ink, #111827); }
.dashboard-app-nav-kicker { display: block; margin-bottom: 5px; font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted, #64748b); }
.dashboard-app-nav-primary, .dashboard-app-nav-secondary { display: grid; gap: 4px; }
.dashboard-app-nav-secondary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line, #e5e7eb); }
.dashboard-app-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--muted-strong, #475569); font-weight: 700; font-size: .91rem; text-decoration: none; transition: color .18s ease, background .18s ease; }
.dashboard-app-link:hover, .dashboard-app-link[aria-current="page"] { color: #111827; background: #f6f7f9; }
.dashboard-app-link[aria-current="page"] { box-shadow: inset 3px 0 0 #111827; }
.dashboard-app-link-dot, .dashboard-app-mobile-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 999px; background: #d1d5db; }
.dashboard-app-link[aria-current="page"] .dashboard-app-link-dot { background: #111827; }
.dashboard-app-nav-more { margin: 8px 10px 0; color: var(--muted, #64748b); font-size: .78rem; }
.dashboard-app-mobile-nav { display: none; }
.candidate-page-intro { max-width: 900px; margin-bottom: 24px; }
.candidate-page-intro .eyebrow, .candidate-section-intro .eyebrow { margin-bottom: 8px; }
.candidate-page-intro h1 { max-width: 980px; margin: 0; font-size: clamp(2rem, 4vw, 4.15rem); line-height: 1.04; letter-spacing: -.06em; }
.candidate-page-intro > p { max-width: 760px; margin: 16px 0 0; font-size: 1.02rem; line-height: 1.68; color: var(--muted-strong, #475569); }
.candidate-readiness-card, .candidate-surface, .candidate-quiet-surface { border: 1px solid var(--line, #e5e7eb); background: var(--surface, #fff); border-radius: 18px; box-shadow: 0 12px 30px rgba(15,23,42,.045); }
.candidate-readiness-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 20px; margin: 20px 0 24px; }
.candidate-readiness-card strong { font-size: 1rem; color: var(--ink, #111827); }
.candidate-readiness-card p { margin: 5px 0 0; color: var(--muted-strong, #475569); }
.candidate-progress-track { width: min(290px, 100%); height: 10px; overflow: hidden; background: #eef0f3; border-radius: 999px; }
.candidate-progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #111827, #4b5563); }
.candidate-surface, .candidate-quiet-surface { padding: clamp(20px, 3vw, 34px); }
.candidate-quiet-surface { background: #fafafa; box-shadow: none; }
.candidate-surface-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.candidate-surface-heading h2, .candidate-surface-heading h3 { margin: 0; color: var(--ink, #111827); }
.candidate-surface-heading p { margin: 7px 0 0; color: var(--muted-strong, #475569); line-height: 1.6; }
.candidate-dashboard-grid { display: grid; gap: 20px; }
.candidate-dashboard-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.candidate-action-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line, #e5e7eb); }
.candidate-check, .candidate-checklist-inline, .candidate-guidance-list, .candidate-fact-list { display: grid; gap: 10px; }
.candidate-check, .candidate-guidance-list, .candidate-fact-list { margin: 0; padding: 0; list-style: none; }
.candidate-check li, .candidate-guidance-list li, .candidate-fact-list li, .candidate-checklist-inline > div { position: relative; padding-left: 22px; color: var(--muted-strong, #475569); line-height: 1.55; }
.candidate-check li::before, .candidate-guidance-list li::before, .candidate-fact-list li::before, .candidate-checklist-inline > div::before { content: '✓'; position: absolute; left: 0; top: 0; font-weight: 900; color: #166534; }
.candidate-action-number { display: inline-flex; width: 29px; height: 29px; align-items: center; justify-content: center; border-radius: 999px; background: #111827; color: #fff; font-size: .75rem; font-weight: 800; }

/* Candidate forms / verification / profile */
.candidate-profile-surface { padding: 0; overflow: hidden; }
.candidate-form-section { border-top: 1px solid var(--line, #e5e7eb); }
.candidate-form-section:first-child { border-top: 0; }
.candidate-form-section > summary { display: flex; align-items: center; gap: 11px; cursor: pointer; list-style: none; padding: 20px 24px; color: #111827; font-weight: 800; }
.candidate-form-section > summary::-webkit-details-marker { display: none; }
.candidate-form-section-body { padding: 0 24px 24px; }
.candidate-profile-form, .candidate-apply-form { display: grid; gap: 16px; }
.candidate-profile-form label, .candidate-apply-form label { display: grid; gap: 7px; font-size: .9rem; font-weight: 800; color: #1f2937; }
.candidate-profile-form input, .candidate-profile-form textarea, .candidate-profile-form select, .candidate-apply-form input, .candidate-apply-form textarea, .candidate-apply-form select { min-width: 0; width: 100%; border: 1px solid #d9dde3; border-radius: 11px; background: #fff; padding: 12px 13px; font: inherit; color: #111827; }
.candidate-profile-form textarea, .candidate-apply-form textarea { min-height: 120px; resize: vertical; }
.candidate-form-save-row, .candidate-apply-actions, .candidate-apply-action-buttons, .candidate-surface-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.candidate-consent-row { display: flex !important; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fbfbfb; }
.candidate-consent-row input { width: 18px !important; height: 18px; margin-top: 1px; flex: 0 0 18px; }
.candidate-apply-summary, .candidate-apply-package, .candidate-apply-note, .candidate-apply-documents { padding: 16px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fafafa; }
.candidate-apply-note--visible { border-color: #bbf7d0; background: #f0fdf4; color: #14532d; }
.candidate-apply-checklist { display: grid; gap: 10px; margin: 18px 0; }
.candidate-apply-standards-link { font-weight: 800; }
.candidate-fact-list strong { color: #111827; }

/* Candidate learning and payment pages */
.candidate-course-summary-grid, .candidate-payment-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.candidate-mini-stat { border: 1px solid #e5e7eb; border-radius: 14px; padding: 15px; background: #fafafa; }
.candidate-mini-stat span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #64748b; }
.candidate-mini-stat strong { display: block; margin-top: 7px; font-size: 1.55rem; color: #111827; }
.candidate-course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.candidate-course-card, .candidate-course-continue-card { display: flex; flex-direction: column; gap: 17px; min-height: 100%; padding: 22px; border: 1px solid #e5e7eb; border-radius: 17px; background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.04); }
.candidate-course-card--completed { border-color: #bbf7d0; }
.candidate-course-card-top, .candidate-course-card-actions, .candidate-course-card-meta, .candidate-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.candidate-course-card h2, .candidate-course-continue-copy h2 { margin: 0; font-size: 1.25rem; line-height: 1.24; }
.candidate-course-card p, .candidate-course-continue-copy p { margin: 0; color: #475569; line-height: 1.58; }
.candidate-course-card-meta { color: #64748b; font-size: .86rem; }
.candidate-course-continue-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.candidate-course-continue-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #111827; color: #fff; font-weight: 800; }
.candidate-course-continue-progress { grid-column: 1 / -1; }
.candidate-list-section { margin-top: 30px; }
.candidate-list-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.candidate-list-section-heading h2 { margin: 0; font-size: 1.45rem; }
.candidate-empty-state, .candidate-empty-inline { padding: 20px; border: 1px dashed #cbd5e1; border-radius: 14px; color: #64748b; background: #fafcff; }
.candidate-payment-records { display: grid; gap: 10px; }
.candidate-payment-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; }
.candidate-payment-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #111827; color: #fff; font-weight: 900; }
.candidate-payment-row-title { display: block; color: #111827; font-weight: 800; }
.candidate-payment-row-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; color: #64748b; font-size: .85rem; }
.candidate-payment-row-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Pricing page recovery */
.pricing-v9-hero, .mentor-v9-hero { padding: 56px 0 30px; }
.pricing-v9-hero-grid, .mentor-v9-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 32px; align-items: end; }
.pricing-v9-hero h1, .mentor-v9-headline { margin: 0; max-width: 900px; font-size: clamp(2.4rem, 5.5vw, 5.35rem); line-height: .99; letter-spacing: -.065em; color: #111827; }
.pricing-v9-hero p, .mentor-v9-hero p { max-width: 730px; margin: 17px 0 0; font-size: 1.05rem; line-height: 1.65; color: #475569; }
.pricing-v9-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pricing-v9-section { padding: 34px 0; }
.pricing-v9-section--recessed { margin: 16px 0; padding: 44px 0; background: #f7f7f6; border-top: 1px solid #ececeb; border-bottom: 1px solid #ececeb; }
.pricing-v9-section-heading { max-width: 760px; margin-bottom: 20px; }
.pricing-v9-section-heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.045em; }
.pricing-v9-section-heading p { margin: 9px 0 0; color: #475569; line-height: 1.6; }
.pricing-v9-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pricing-v9-card { display: flex; flex-direction: column; min-height: 100%; padding: 24px; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.04); }
.pricing-v9-card--featured { border-color: #111827; box-shadow: 0 18px 42px rgba(15,23,42,.13); }
.pricing-v9-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pricing-v9-card h3 { margin: 0; font-size: 1.32rem; }
.pricing-v9-price-copy { margin: 16px 0; color: #475569; }
.pricing-v9-price-copy--numeric { display: block; margin-bottom: 4px; color: #111827; font-size: 2.2rem; font-weight: 900; letter-spacing: -.05em; }
.pricing-v9-list, .pricing-v9-clarity-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pricing-v9-list li, .pricing-v9-clarity-list li { position: relative; padding-left: 20px; color: #475569; line-height: 1.48; }
.pricing-v9-list li::before, .pricing-v9-clarity-list li::before { content: '•'; position: absolute; left: 3px; color: #111827; font-weight: 900; }
.pricing-v9-index { display: inline-flex; align-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: .75rem; font-weight: 900; }
.pricing-v9-assurance { margin-top: auto; padding-top: 17px; color: #64748b; font-size: .86rem; }
.pricing-v9-clarity-grid, .pricing-v9-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.pricing-v9-faqs { display: grid; gap: 12px; }
.pricing-v9-faqs details { border: 1px solid #e5e7eb; border-radius: 13px; background: #fff; padding: 15px 17px; }
.pricing-v9-faqs summary { cursor: pointer; color: #111827; font-weight: 800; }
.pricing-v9-faqs p { margin: 11px 0 0; color: #475569; line-height: 1.6; }

/* Mentor directory recovery */
.mentor-v9-section { padding: 36px 0; }
.mentor-v9-section--guide { margin: 20px 0; padding: 46px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; background: #fafafa; }
.mentor-v9-section-heading { max-width: 760px; margin-bottom: 20px; }
.mentor-v9-section-heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.65rem); letter-spacing: -.045em; }
.mentor-v9-section-heading p { margin: 9px 0 0; color: #475569; line-height: 1.6; }
.mentor-v9-filter-shell { border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px; background: #fafafa; }
.mentor-v9-filter-form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) auto; gap: 10px; align-items: end; }
.mentor-v9-filter-form label { display: grid; gap: 6px; color: #334155; font-size: .8rem; font-weight: 800; }
.mentor-v9-filter-form input, .mentor-v9-filter-form select { width: 100%; min-width: 0; border: 1px solid #d9dde3; border-radius: 10px; padding: 10px 11px; background: #fff; font: inherit; }
.mentor-v9-filter-actions { display: flex; gap: 8px; align-items: center; }
.mentor-v9-results-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin: 26px 0 14px; }
.mentor-v9-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mentor-v9-card, .mentor-v9-availability-card, .mentor-v9-empty { border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.04); }
.mentor-v9-card { display: flex; flex-direction: column; gap: 16px; padding: 21px; }
.mentor-v9-card-top { display: flex; gap: 13px; align-items: flex-start; }
.mentor-v9-card-top img { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; background: #eef2f7; }
.mentor-v9-card-top h3 { margin: 0; font-size: 1.16rem; }
.mentor-v9-card-top p { margin: 5px 0 0; color: #64748b; line-height: 1.45; }
.mentor-v9-expertise { display: flex; gap: 7px; flex-wrap: wrap; }
.mentor-v9-expertise span { padding: 6px 8px; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: .75rem; font-weight: 800; }
.mentor-v9-availability-card { padding: 18px; }
.mentor-v9-process-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.mentor-v9-empty { padding: 28px; }
.mentor-v9-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }

/* Course workspace interaction safety + focus mode */
.course-protected-video-card, .course-protected-video-shell, .course-player-start-gate, .course-workspace-tabs, .course-workspace-tabs button, .course-workspace-tab-panel, .course-note-form, .course-workspace-support-list { pointer-events: auto; }
.course-protected-video-card [hidden] { display: none !important; }
.course-protected-video-shell.is-player-started .course-player-start-gate { display: none; }
.course-protected-video-shell.is-player-started .course-protected-video-host { display: block; }
.course-protected-video-host { position: relative; min-height: 280px; overflow: hidden; border-radius: inherit; background: #060a14; }
.course-r2-native-video { display: block; width: 100%; min-height: 280px; max-height: 68vh; background: #060a14; object-fit: contain; }
.course-workspace-tab-panel[hidden] { display: none !important; }
.course-workspace-tabs button { cursor: pointer; }
.course-workspace-tabs button[aria-selected="true"] { color: #111827; box-shadow: inset 0 -2px 0 #111827; }
.course-transcript-cue { cursor: pointer; }
.course-transcript-cue[disabled] { cursor: default; }
.course-transcript-cue.is-active { border-color: #111827; background: #f5f5f5; }
.course-learning-workspace--focus-active { position: fixed; z-index: 1200; inset: 0; width: 100vw; max-width: none; margin: 0; padding: clamp(16px, 3vw, 42px); overflow: auto; background: #0b1020; }
.course-learning-workspace--focus-active .course-protected-video-card, .course-learning-workspace--focus-active .course-workspace-sidepanel { box-shadow: 0 22px 62px rgba(0,0,0,.35); }
.course-learning-workspace--focus-active .course-workspace-sidepanel { background: #fff; }
body.course-focus-active { overflow: hidden; }

/* Course Studio admin UI */
.course-studio-nav { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 24px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 14px; background: #fafafa; }
.course-studio-nav a { padding: 9px 11px; border-radius: 9px; color: #334155; font-size: .88rem; font-weight: 800; text-decoration: none; }
.course-studio-nav a:hover, .course-studio-nav a[aria-current="page"] { background: #111827; color: #fff; }
.admin-r2-upload-tool { grid-column: 1 / -1; display: grid; gap: 11px; padding: 15px; border: 1px dashed #94a3b8; border-radius: 13px; background: #f8fafc; }
.admin-r2-upload-tool__head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.admin-r2-upload-tool strong { color: #111827; }
.admin-r2-upload-tool p { margin: 4px 0 0; color: #64748b; font-size: .86rem; line-height: 1.45; }
.admin-r2-upload-tool__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.admin-r2-upload-tool__status { min-height: 1.2em; color: #475569; font-size: .84rem; }
.admin-r2-upload-tool.is-error { border-color: #fecaca; background: #fff7f7; }
.admin-r2-upload-tool.is-success { border-color: #bbf7d0; background: #f0fdf4; }

@media (max-width: 1040px) {
  .candidate-dashboard-frame { grid-template-columns: 1fr; }
  .dashboard-app-nav { position: static; display: none; }
  .dashboard-app-mobile-nav { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: thin; }
  .dashboard-app-mobile-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid #e5e7eb; border-radius: 999px; color: #475569; font-size: .84rem; font-weight: 800; text-decoration: none; }
  .dashboard-app-mobile-link[aria-current="page"] { color: #fff; border-color: #111827; background: #111827; }
  .candidate-course-summary-grid, .candidate-payment-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pricing-v9-grid, .mentor-v9-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mentor-v9-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .candidate-dashboard-page { padding: 22px 0 46px; }
  .candidate-page-intro h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .candidate-readiness-card, .candidate-dashboard-grid--two, .candidate-course-grid, .candidate-course-summary-grid, .candidate-payment-summary-grid, .pricing-v9-hero-grid, .pricing-v9-grid, .pricing-v9-clarity-grid, .pricing-v9-faq-grid, .mentor-v9-hero-grid, .mentor-v9-grid, .mentor-v9-process-grid, .mentor-v9-filter-form { grid-template-columns: 1fr; }
  .candidate-readiness-card { align-items: stretch; }
  .candidate-payment-row { grid-template-columns: auto minmax(0,1fr); }
  .candidate-payment-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .candidate-course-continue-card { grid-template-columns: 1fr; }
  .candidate-course-continue-mark { width: 46px; height: 46px; }
  .candidate-surface, .candidate-quiet-surface { padding: 18px; }
  .candidate-form-section > summary { padding: 17px 18px; }
  .candidate-form-section-body { padding: 0 18px 18px; }
  .pricing-v9-hero, .mentor-v9-hero { padding-top: 32px; }
  .pricing-v9-hero h1, .mentor-v9-headline { font-size: clamp(2.2rem, 11vw, 3.5rem); }
  .mentor-v9-filter-actions { grid-column: 1 / -1; }
  .course-learning-workspace--focus-active { padding: 10px; }
  .course-r2-native-video, .course-protected-video-host { min-height: 210px; }
  .admin-r2-upload-tool__head { display: grid; }
}
/* Completes targeted current-template class coverage. */
.candidate-list-section--completed { padding-top: 24px; border-top: 1px solid #e5e7eb; }
.candidate-payment-list { display: grid; gap: 10px; }
.candidate-payment-row-main { min-width: 0; }
.dashboard-app-link--secondary { font-size: .85rem; color: #64748b; }
.mentor-v9-filter-section { padding: 0 0 20px; }

/* ========================================================================
   GRAPHICBIDU DASHBOARD + COURSE STUDIO V2
   Repairs the remaining legacy dashboard layout collision and gives admin a
   real private-media health layer. No public video URLs are introduced.
   ======================================================================== */

/* The home dashboard previously rendered the workspace navigation as a normal
   block above the hero. The navigation therefore consumed an empty full row and
   pushed the entire dashboard story down. The home page now uses the same
   two-column workspace frame as Profile, Verification, Learning and Payments. */
.candidate-dashboard-page--home {
    padding-top: 36px;
}

.candidate-dashboard-home {
    display: grid;
    min-width: 0;
    gap: 28px;
}

.candidate-dashboard-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(310px, .82fr);
    gap: clamp(22px, 3.5vw, 42px);
    align-items: stretch;
    padding: clamp(26px, 3.4vw, 42px);
}

.candidate-dashboard-home-hero__copy {
    align-self: center;
    min-width: 0;
}

.candidate-dashboard-home-hero__copy h1 {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(38px, 4.35vw, 62px);
    letter-spacing: -.065em;
    line-height: .98;
}

.candidate-dashboard-home-hero__copy > p:not(.eyebrow) {
    max-width: 60ch;
    margin: 18px 0 0;
    color: var(--gb-text-secondary);
    font-size: 16px;
    line-height: 1.68;
}

.candidate-dashboard-home-hero__actions,
.candidate-dashboard-home-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.candidate-dashboard-home-hero__next {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 23px;
    border: 1px solid var(--gb-line);
    border-radius: 17px;
    background: var(--gb-paper-soft);
}

.candidate-dashboard-home-hero__next .panel-label {
    margin-bottom: 12px;
}

.candidate-dashboard-home-hero__next h2 {
    max-width: 16ch;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.03;
}

.candidate-dashboard-home-hero__next > p:not(.panel-label) {
    margin: 12px 0 0;
    color: var(--gb-text-secondary);
    line-height: 1.6;
}

.candidate-dashboard-home-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: auto 0 0;
    padding: 21px 0 0;
}

.candidate-dashboard-home-metrics div {
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--gb-line);
    border-radius: 12px;
    background: var(--gb-paper);
}

.candidate-dashboard-home-metrics dt {
    color: var(--gb-text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.candidate-dashboard-home-metrics dd {
    margin: 7px 0 0;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.candidate-dashboard-home-section {
    padding-top: 14px;
}

.candidate-dashboard-home-section--soft {
    margin-inline: -2px;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid var(--gb-line);
    border-radius: 20px;
    background: var(--gb-paper-soft);
}

.candidate-dashboard-home-section__heading {
    max-width: 720px;
    margin-bottom: 22px;
}

.candidate-dashboard-home-section__heading .eyebrow {
    margin-bottom: 10px;
}

.candidate-dashboard-home-section__heading h2 {
    max-width: 20ch;
    font-size: clamp(29px, 3.2vw, 42px);
}

.candidate-dashboard-home-card-grid,
.candidate-dashboard-home-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.candidate-dashboard-home-card {
    display: flex;
    min-height: 246px;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px;
    border: 1px solid var(--gb-line);
    border-top: 3px solid var(--gb-ink);
    border-radius: 17px;
    background: var(--gb-paper);
}

.candidate-dashboard-home-card > span:first-child {
    display: inline-grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    background: var(--gb-ink);
    color: var(--gb-inverse);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
}

.candidate-dashboard-home-card h3 {
    margin: 17px 0 0;
    font-size: 22px;
}

.candidate-dashboard-home-card p {
    margin: 10px 0 0;
    color: var(--gb-text-secondary);
    line-height: 1.65;
}

.candidate-dashboard-home-card > .button,
.candidate-dashboard-home-card > .candidate-dashboard-home-card__actions {
    margin-top: auto;
    padding-top: 20px;
}

.candidate-dashboard-home-card > .button {
    width: 100%;
    text-align: center;
}

.candidate-dashboard-home-card--support {
    min-height: 215px;
    border-top-color: var(--gb-line-strong);
}

.candidate-dashboard-home-card--support h3 {
    margin-top: 0;
}

.candidate-dashboard-home-card__actions .button {
    min-width: 0;
}

.candidate-dashboard-home-summary-grid {
    margin-top: 4px;
}

.candidate-dashboard-home-summary-card {
    min-height: 100%;
}

.candidate-dashboard-home-summary-card h2 {
    margin-top: 3px;
    font-size: 27px;
}

.candidate-dashboard-home-summary-card > p:not(.eyebrow) {
    margin-top: 14px;
    color: var(--gb-text-secondary);
    line-height: 1.65;
}

.candidate-dashboard-home-summary-card ul {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding-left: 20px;
    color: var(--gb-text-secondary);
}

.candidate-dashboard-home-summary-card dl {
    display: grid;
    margin: 16px 0 0;
    border-top: 1px solid var(--gb-line);
}

.candidate-dashboard-home-summary-card dl div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gb-line);
}

.candidate-dashboard-home-summary-card dt {
    color: var(--gb-text-secondary);
}

.candidate-dashboard-home-summary-card dd {
    max-width: 22ch;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--gb-text);
    font-weight: 800;
    text-align: right;
}

.candidate-dashboard-home-summary-card > .button {
    margin-top: 20px;
}

/* Admin only: private R2 health is deliberately factual. It reports whether
   an object is present, never shows its URL or stream token. */
.admin-course-media-health {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 24px;
    padding: 22px 24px;
    border: 1px solid var(--gb-line);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--gb-paper) 0%, var(--gb-paper-soft) 100%);
}

.admin-course-media-health h2 {
    margin-top: 4px;
    font-size: 27px;
}

.admin-course-media-health > div > p:not(.eyebrow),
.admin-course-media-health__actions > p {
    margin: 8px 0 0;
    color: var(--gb-text-secondary);
    font-size: 14px;
    line-height: 1.58;
}

.admin-course-media-health__actions {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.admin-course-media-health.is-success {
    border-color: #9ed5b0;
    background: #f3fbf5;
}

.admin-course-media-health.is-error {
    border-color: #efc5bf;
    background: #fff8f7;
}

.course-content-lesson-editor__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.course-content-lesson-editor__media-status {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 4px 8px;
    border: 1px solid var(--gb-line);
    border-radius: 999px;
    color: var(--gb-text-muted);
    background: var(--gb-paper-soft);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.course-content-lesson-editor__media-status.is-ready {
    border-color: #9fd8b1;
    color: #136738;
    background: #f0fbf3;
}

.course-content-lesson-editor__media-status.is-missing {
    border-color: #efc5bf;
    color: #a12d21;
    background: #fff7f6;
}

.course-content-lesson-editor__media-status.is-unknown {
    border-color: #e3d3a6;
    color: #755714;
    background: #fffaf0;
}

@media (max-width: 900px) {
    .candidate-dashboard-home-hero,
    .admin-course-media-health {
        grid-template-columns: 1fr;
    }

    .candidate-dashboard-home-hero__next {
        min-height: auto;
    }
}

@media (max-width: 680px) {
    .candidate-dashboard-page--home {
        padding-top: 22px;
    }

    .candidate-dashboard-home {
        gap: 20px;
    }

    .candidate-dashboard-home-hero {
        padding: 21px;
    }

    .candidate-dashboard-home-hero__copy h1 {
        font-size: clamp(36px, 12vw, 48px);
    }

    .candidate-dashboard-home-metrics,
    .candidate-dashboard-home-card-grid,
    .candidate-dashboard-home-summary-grid {
        grid-template-columns: 1fr;
    }

    .candidate-dashboard-home-section--soft {
        padding: 21px;
    }

    .candidate-dashboard-home-card {
        min-height: 0;
        padding: 21px;
    }

    .candidate-dashboard-home-card > .button,
    .candidate-dashboard-home-card > .candidate-dashboard-home-card__actions {
        width: 100%;
    }

    .candidate-dashboard-home-card__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .candidate-dashboard-home-card__actions .button {
        width: 100%;
        text-align: center;
    }

    .admin-course-media-health {
        padding: 19px;
    }

    .course-content-lesson-editor__actions {
        display: grid;
        justify-items: end;
    }
}

/* ========================================================================
   STABILITY + CANDIDATE WORKSPACE V3
   Scoped repairs only. These rules sit after legacy patches so page-specific
   layouts cannot fall back to raw, overlapping, or click-blocking states.
   ======================================================================== */

/* Protected player: the status message must never cover or intercept Play. */
.course-protected-video-shell .course-player-security-notice {
    top: 54px;
    right: 18px;
    bottom: auto;
    left: 18px;
    z-index: 22;
    max-width: none;
    margin: 0;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.course-protected-video-shell .course-player-loading {
    position: absolute;
    z-index: 21;
    top: 50%;
    left: 50%;
    max-width: min(84%, 30rem);
    transform: translate(-50%, -50%);
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    color: #fff;
    background: rgba(4, 8, 18, .82);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
}

.course-protected-video-shell .course-player-ui {
    z-index: 25;
    pointer-events: auto;
}

.course-protected-video-shell .course-video-watermark {
    z-index: 23;
}

.course-transcript-panel__body--timed {
    scroll-behavior: smooth;
}

.course-transcript-cue {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    margin: 0 0 6px;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: inherit;
    background: transparent;
    text-align: left;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.course-transcript-cue time {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.course-transcript-cue.is-active,
.course-transcript-cue[aria-current="true"] {
    border-color: #111827;
    color: #111827;
    background: #eef2ff;
    box-shadow: inset 3px 0 0 #111827;
}

.course-transcript-cue.is-active time,
.course-transcript-cue[aria-current="true"] time {
    color: #111827;
}

/* Candidate workspace shell shared by Home, Profile, Verification, Learning and Billing. */
.candidate-dashboard-page {
    padding: 38px 0 76px;
    background: linear-gradient(180deg, #fff 0%, #fbfbfa 100%);
}

.candidate-dashboard-page .wrapper {
    max-width: 1240px;
}

.candidate-dashboard-frame {
    display: grid;
    grid-template-columns: 214px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 42px);
    align-items: start;
}

.candidate-dashboard-content {
    min-width: 0;
}

.dashboard-app-nav {
    position: sticky;
    top: 90px;
    overflow: hidden;
    border: 1px solid #e4e5e8;
    border-radius: 16px;
    padding: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.dashboard-app-nav-head {
    margin: 0;
    padding: 10px 10px 11px;
    border-bottom: 1px solid #e6e7ea;
}

.dashboard-app-nav-head strong {
    color: #151923;
    font-size: .89rem;
    font-weight: 850;
}

.dashboard-app-nav-primary,
.dashboard-app-nav-secondary {
    gap: 3px;
}

.dashboard-app-link {
    min-height: 40px;
    padding: 10px;
    border-radius: 9px;
    color: #5e6470;
    font-size: .87rem;
    font-weight: 760;
}

.dashboard-app-link:hover,
.dashboard-app-link:focus-visible,
.dashboard-app-link.is-active,
.dashboard-app-link[aria-current="page"] {
    color: #111827;
    background: #f5f5f4;
    outline: none;
}

.dashboard-app-link.is-active,
.dashboard-app-link[aria-current="page"] {
    box-shadow: none;
}

.dashboard-app-link-dot {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
    background: #d8dce4;
}

.dashboard-app-link.is-active .dashboard-app-link-dot,
.dashboard-app-link[aria-current="page"] .dashboard-app-link-dot {
    background: #111827;
}

.dashboard-app-nav-more {
    margin: 8px 10px 4px;
    color: #667085;
}

.dashboard-app-nav-more summary {
    cursor: pointer;
    font-size: .76rem;
    font-weight: 700;
}

.dashboard-app-nav-secondary {
    margin-top: 8px;
    padding-top: 8px;
}

.candidate-page-intro {
    max-width: 900px;
    margin: 0 0 26px;
}

.candidate-page-intro h1 {
    max-width: 14ch;
    margin: 0;
    color: #10131a;
    font-size: clamp(2.35rem, 4.5vw, 4.55rem);
    letter-spacing: -.065em;
    line-height: 1.01;
}

.candidate-page-intro > p:not(.eyebrow),
.candidate-page-intro .lead {
    max-width: 700px;
    margin: 16px 0 0;
    color: #5c6575;
    font-size: 1rem;
    line-height: 1.68;
}

.candidate-surface,
.candidate-readiness-card,
.candidate-form-section,
.candidate-course-card,
.candidate-payment-records,
.candidate-empty-state {
    border-color: #e2e3e7;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
}

.candidate-surface,
.candidate-readiness-card,
.candidate-form-section,
.candidate-course-card,
.candidate-payment-records {
    background: #fff;
}

.candidate-dashboard-grid,
.candidate-dashboard-grid--two,
.candidate-course-summary-grid,
.candidate-payment-summary-grid {
    gap: 18px;
}

.candidate-dashboard-grid--two,
.candidate-course-summary-grid,
.candidate-payment-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.candidate-readiness-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 20px 22px;
}

.candidate-readiness-card .candidate-progress-track {
    margin-top: 10px;
}

.candidate-form-section {
    overflow: hidden;
}

.candidate-form-section > summary,
.candidate-form-section > .candidate-form-section-body {
    padding-inline: 22px;
}

.candidate-form-section-body {
    padding-block: 20px 24px;
}

.candidate-form-save-row,
.candidate-surface-actions,
.candidate-apply-action-buttons,
.candidate-course-card-actions,
.candidate-payment-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.candidate-course-card,
.candidate-payment-row {
    min-width: 0;
}

.candidate-course-card p,
.candidate-payment-row p,
.candidate-fact-list dd,
.candidate-payment-row-meta,
.candidate-apply-note {
    overflow-wrap: anywhere;
}

/* V3 home uses its own classes so old dashboard hero rules cannot create blank rows. */
.candidate-v3-home {
    display: grid;
    gap: 30px;
}

.candidate-v3-home__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(300px, .74fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: stretch;
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid #e2e3e7;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .05);
}

.candidate-v3-home__intro h1 {
    max-width: 11ch;
    margin: 0;
    color: #10131a;
    font-size: clamp(2.65rem, 5vw, 4.45rem);
    letter-spacing: -.07em;
    line-height: .98;
}

.candidate-v3-home__intro .lead {
    max-width: 59ch;
    margin: 17px 0 0;
    color: #596273;
    line-height: 1.68;
}

.candidate-v3-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.candidate-v3-next-step {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 23px;
    border: 1px solid #e1e3e8;
    border-radius: 16px;
    background: #fbfbfa;
}

.candidate-v3-next-step h2 {
    max-width: 16ch;
    margin: 6px 0 0;
    color: #111827;
    font-size: clamp(1.55rem, 2.4vw, 2.05rem);
    letter-spacing: -.045em;
    line-height: 1.06;
}

.candidate-v3-next-step > p:not(.panel-label) {
    margin: 12px 0 0;
    color: #667085;
    line-height: 1.58;
}

.candidate-v3-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: auto 0 0;
    padding-top: 20px;
}

.candidate-v3-metrics div {
    min-width: 0;
    padding: 11px;
    border: 1px solid #e1e3e8;
    border-radius: 11px;
    background: #fff;
}

.candidate-v3-metrics dt {
    color: #6b7280;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.candidate-v3-metrics dd {
    margin: 7px 0 0;
    color: #111827;
    font-size: .95rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.candidate-v3-section {
    display: grid;
    gap: 18px;
}

.candidate-v3-section--muted {
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid #e2e3e7;
    border-radius: 20px;
    background: #fafaf9;
}

.candidate-v3-section__head h2 {
    max-width: 18ch;
    margin: 4px 0 0;
    color: #111827;
    font-size: clamp(1.85rem, 3vw, 2.72rem);
    letter-spacing: -.055em;
    line-height: 1.04;
}

.candidate-v3-action-grid,
.candidate-v3-support-grid,
.candidate-v3-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.candidate-v3-action-card,
.candidate-v3-support-grid > article,
.candidate-v3-summary-card {
    display: flex;
    min-width: 0;
    min-height: 228px;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    border: 1px solid #e1e3e8;
    border-top: 3px solid #111827;
    border-radius: 16px;
    background: #fff;
}

.candidate-v3-action-card > span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #111827;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .63rem;
    font-weight: 850;
}

.candidate-v3-action-card h3,
.candidate-v3-support-grid h3,
.candidate-v3-summary-card h2 {
    margin: 17px 0 0;
    color: #111827;
    font-size: 1.3rem;
    letter-spacing: -.03em;
}

.candidate-v3-action-card p,
.candidate-v3-support-grid p,
.candidate-v3-summary-card > p:not(.eyebrow) {
    margin: 10px 0 0;
    color: #626b78;
    line-height: 1.62;
}

.candidate-v3-action-card > .button,
.candidate-v3-support-grid > article > .button,
.candidate-v3-support-grid .candidate-v3-inline-actions,
.candidate-v3-summary-card > .button {
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
}

.candidate-v3-action-card > .button,
.candidate-v3-support-grid > article > .button,
.candidate-v3-summary-card > .button {
    text-align: center;
}

.candidate-v3-support-grid > article {
    min-height: 198px;
    border-top-color: #576173;
}

.candidate-v3-support-grid h3 {
    margin-top: 0;
}

.candidate-v3-support-grid .candidate-v3-inline-actions {
    display: flex;
    gap: 10px;
}

.candidate-v3-summary-card {
    min-height: 100%;
}

.candidate-v3-summary-card ul {
    display: grid;
    gap: 9px;
    margin: 16px 0 0;
    padding-left: 20px;
    color: #626b78;
}

.candidate-v3-summary-card dl {
    display: grid;
    width: 100%;
    margin: 16px 0 0;
    border-top: 1px solid #e4e5e8;
}

.candidate-v3-summary-card dl div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #e4e5e8;
}

.candidate-v3-summary-card dt { color: #667085; }
.candidate-v3-summary-card dd { margin: 0; color: #111827; font-weight: 800; text-align: right; overflow-wrap: anywhere; }

/* Pricing: the assurance information must be a real visual component, not a loose text column. */
.pricing-v9-hero {
    padding: 72px 0 42px;
}

.pricing-v9-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(310px, .72fr);
    gap: clamp(32px, 6vw, 84px);
    align-items: center;
}

.pricing-v9-hero h1 {
    max-width: 10.5ch;
    font-size: clamp(3rem, 5.7vw, 5.15rem);
    line-height: .98;
}

.pricing-v9-hero .lead {
    max-width: 59ch;
}

.pricing-v9-assurance {
    display: grid;
    gap: 17px;
    margin: 0;
    padding: 26px;
    border: 1px solid #dde0e7;
    border-radius: 18px;
    color: #475569;
    background: #fbfbfa;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .045);
}

.pricing-v9-assurance .panel-label { margin: 0; }
.pricing-v9-assurance strong { color: #111827; font-size: 1.05rem; }
.pricing-v9-assurance p { margin: 8px 0 0; color: #5d6675; font-size: .96rem; line-height: 1.6; }
.pricing-v9-assurance dl { display: grid; gap: 0; margin: 0; border-top: 1px solid #e3e5e9; }
.pricing-v9-assurance dl div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e3e5e9; }
.pricing-v9-assurance dt { color: #667085; font-size: .88rem; }
.pricing-v9-assurance dd { margin: 0; color: #111827; font-size: .88rem; font-weight: 800; text-align: right; }

.pricing-v9-section { padding: 44px 0; }
.pricing-v9-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); gap: 24px; max-width: none; align-items: end; margin-bottom: 24px; }
.pricing-v9-section-heading > p { margin: 0; }
.pricing-v9-grid { gap: 20px; }
.pricing-v9-card { min-height: 100%; padding: 26px; border-radius: 17px; }
.pricing-v9-card .button { width: 100%; margin-top: auto; text-align: center; }
.pricing-v9-card--featured { border-width: 2px; box-shadow: 0 20px 42px rgba(15,23,42,.1); }
.pricing-v9-section--recessed { margin: 14px 0; padding: 54px 0; }
.pricing-v9-clarity-grid { align-items: start; }

@media (max-width: 980px) {
    .candidate-dashboard-frame,
    .candidate-v3-home__intro,
    .pricing-v9-hero-grid,
    .pricing-v9-section-heading { grid-template-columns: 1fr; }
    .dashboard-app-nav { position: static; }
}

@media (max-width: 720px) {
    .candidate-dashboard-page { padding: 22px 0 48px; }
    .candidate-dashboard-frame { gap: 16px; }
    .dashboard-app-nav { display: none; }
    .dashboard-app-mobile-nav { display: flex; }
    .candidate-v3-home__intro { padding: 22px; }
    .candidate-v3-home__intro h1 { font-size: clamp(2.35rem, 12vw, 3.3rem); }
    .candidate-v3-metrics,
    .candidate-v3-action-grid,
    .candidate-v3-support-grid,
    .candidate-v3-summary-grid,
    .candidate-dashboard-grid--two,
    .candidate-course-summary-grid,
    .candidate-payment-summary-grid,
    .pricing-v9-grid,
    .pricing-v9-clarity-grid,
    .pricing-v9-faq-grid { grid-template-columns: 1fr; }
    .candidate-v3-action-card,
    .candidate-v3-support-grid > article { min-height: 0; padding: 21px; }
    .candidate-v3-support-grid .candidate-v3-inline-actions { display: grid; grid-template-columns: 1fr; }
    .candidate-v3-support-grid .candidate-v3-inline-actions .button { width: 100%; text-align: center; }
    .candidate-readiness-card { grid-template-columns: 1fr; padding: 18px; }
    .candidate-form-section > summary,
    .candidate-form-section > .candidate-form-section-body { padding-inline: 16px; }
    .pricing-v9-hero { padding: 42px 0 24px; }
    .pricing-v9-hero h1 { font-size: clamp(2.65rem, 13vw, 3.65rem); }
    .pricing-v9-assurance { padding: 21px; }
    .pricing-v9-section-heading { gap: 12px; }
    .course-protected-video-shell .course-player-security-notice { top: 46px; right: 10px; left: 10px; font-size: .7rem; }
    .course-protected-video-shell .course-player-loading { max-width: calc(100% - 24px); font-size: .72rem; }
}

/* ========================================================================== 
   53. Candidate workspace consistency + profile editor repair V4
   ========================================================================== */
.candidate-dashboard-page,
.candidate-legacy-page { padding: clamp(34px, 4.2vw, 58px) 0 clamp(70px, 8vw, 104px); }

.candidate-dashboard-page .button,
.candidate-legacy-page .button,
.candidate-dashboard-page button.button,
.candidate-legacy-page button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    line-height: 1.18;
    text-align: center;
}
.candidate-dashboard-page .button-primary,
.candidate-legacy-page .button-primary { color: #fff; }

.candidate-page-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: clamp(24px, 4vw, 46px);
    align-items: end;
    max-width: none;
    margin: 0 0 30px;
}
.candidate-page-intro > div,
.candidate-page-intro > aside { min-width: 0; }
.candidate-page-intro h1 { max-width: 13.5ch; font-size: clamp(2.55rem, 4.7vw, 4.6rem); line-height: .98; }
.candidate-page-intro--profile h1 { max-width: 12.25ch; }
.candidate-page-intro--split h1 { max-width: 13ch; }

.candidate-readiness-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-self: stretch;
    padding: 22px;
}
.candidate-readiness-card .panel-label,
.candidate-readiness-card > p:last-child,
.candidate-readiness-card .candidate-progress-track,
.candidate-readiness-card > .button,
.candidate-readiness-card > .status-pill { grid-column: 1 / -1; }
.candidate-readiness-card > strong { margin: 0; font-size: 1.22rem; text-align: right; }
.candidate-readiness-card > p:last-child { margin: 0; }
.candidate-readiness-card > .button { width: 100%; margin-top: 2px; }

.candidate-action-strip--profile {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    border: 0;
}
.candidate-action-strip--profile .candidate-check {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    min-height: 90px;
    padding: 14px;
    border: 1px solid #e1e3e8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}
.candidate-action-strip--profile .candidate-check > span {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid #d7dae2;
    border-radius: 999px;
    color: #576173;
    background: #f8f9fb;
    font-size: .7rem;
    font-weight: 850;
}
.candidate-action-strip--profile .candidate-check.is-done > span { border-color: #b7e6c8; color: #0f6b46; background: #edf9f1; }
.candidate-action-strip--profile .candidate-check p { margin: 2px 0 0; color: #344054; font-size: .81rem; font-weight: 760; line-height: 1.35; }

.candidate-profile-surface--editor { overflow: hidden; padding: 0; }
.candidate-profile-surface--editor > .candidate-surface-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .58fr);
    gap: 24px;
    align-items: start;
    margin: 0;
    padding: 26px 28px;
    border-bottom: 1px solid #e4e5e8;
    background: linear-gradient(145deg, #ffffff 0%, #fbfbfb 100%);
}
.candidate-profile-surface--editor > .candidate-surface-heading h2 { max-width: 18ch; margin-top: 5px; font-size: clamp(1.65rem, 2.65vw, 2.45rem); line-height: 1.04; letter-spacing: -.045em; }
.candidate-profile-surface--editor > .candidate-surface-heading > p { max-width: 34ch; margin: 6px 0 0; justify-self: end; }
.candidate-profile-form { gap: 0; }
.candidate-profile-form .candidate-form-section { margin: 0; border-top: 1px solid #e4e5e8; }
.candidate-profile-form .candidate-form-section:first-child { border-top: 0; }
.candidate-profile-form .candidate-form-section > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .75fr) 20px;
    gap: 14px;
    align-items: center;
    min-height: 78px;
    padding: 20px 28px;
}
.candidate-profile-form .candidate-form-section > summary::after { color: #667085; content: '+'; font-size: 1.25rem; font-weight: 500; text-align: right; }
.candidate-profile-form .candidate-form-section[open] > summary::after { content: '−'; }
.candidate-profile-form .candidate-form-section > summary > span { display: inline-flex; align-items: center; gap: 10px; color: #151923; font-weight: 820; }
.candidate-profile-form .candidate-form-section > summary > span b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 999px; color: #fff; background: #111827; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .68rem; }
.candidate-profile-form .candidate-form-section > summary > small { color: #667085; font-size: .8rem; font-weight: 650; line-height: 1.45; }
.candidate-profile-form .candidate-form-section-body { padding: 0 28px 28px; }
.candidate-profile-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.candidate-profile-form .form-grid .full-width { grid-column: 1 / -1; }
.candidate-profile-form .checkbox-grid { gap: 10px; }
.candidate-form-save-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin: 0; padding: 24px 28px 28px; border-top: 1px solid #e4e5e8; background: #fbfbfa; }
.candidate-form-save-row p { max-width: 62ch; margin: 0; color: #667085; line-height: 1.58; }
.candidate-form-save-row > .button { min-width: 220px; }

.dashboard-app-nav { width: 100%; min-width: 0; align-self: start; }
.dashboard-app-nav-more { display: block; width: auto; margin: 8px 4px 4px; }
.dashboard-app-nav-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 7px 6px; border-radius: 8px; list-style: none; }
.dashboard-app-nav-more summary::-webkit-details-marker { display: none; }
.dashboard-app-nav-more summary::after { content: '+'; font-size: 1rem; line-height: 1; }
.dashboard-app-nav-more[open] summary { color: #111827; background: #f6f7f9; }
.dashboard-app-nav-more[open] summary::after { content: '−'; }
.dashboard-app-nav-secondary { display: grid; width: 100%; margin: 6px 0 0; padding: 7px 0 0; border-top: 1px solid #e6e7ea; }
.dashboard-app-nav-secondary .dashboard-app-link { width: 100%; }

.dashboard-shell > .wrapper { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: clamp(24px, 3vw, 42px); align-items: start; }
.dashboard-shell > .wrapper > .dashboard-app-nav { grid-column: 1; grid-row: 1; }
.dashboard-shell > .wrapper > .two-column { grid-column: 2; min-width: 0; }
.dashboard-shell > .wrapper > .two-column > * { min-width: 0; }
.candidate-legacy-page .candidate-dashboard-content { display: grid; gap: 24px; }
.candidate-portfolio-guidance { display: grid; gap: 22px; }

.verification-page-intro,
.course-dashboard-intro,
.payments-page-intro { margin-bottom: 30px; }
.verification-journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; }
.verification-journey-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; min-height: 94px; padding: 14px; border: 1px solid #e1e3e8; border-radius: 14px; background: #fff; }
.verification-journey-step > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 999px; color: #667085; background: #f3f4f6; font-size: .7rem; font-weight: 850; }
.verification-journey-step strong { display: block; color: #111827; font-size: .86rem; line-height: 1.3; }
.verification-journey-step p { margin: 5px 0 0; color: #667085; font-size: .76rem; line-height: 1.4; }
.verification-journey-step.is-current { border-color: #111827; box-shadow: inset 0 3px 0 #111827; }
.verification-journey-step.is-current > span { color: #fff; background: #111827; }
.verification-journey-step.is-done > span { color: #0f6b46; background: #edf9f1; }

.candidate-course-continue-card,
.candidate-course-card,
.candidate-payment-records,
.candidate-surface { box-shadow: 0 12px 30px rgba(15, 23, 42, .045); }
.candidate-course-card-actions .button,
.candidate-payment-row-actions .button,
.candidate-surface-actions .button { min-width: 140px; }
.candidate-course-continue-progress .button { width: 100%; margin-top: 12px; }

@media (max-width: 1020px) {
    .candidate-action-strip--profile,
    .verification-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .candidate-profile-surface--editor > .candidate-surface-heading,
    .candidate-profile-form .candidate-form-section > summary { grid-template-columns: 1fr; }
    .candidate-profile-surface--editor > .candidate-surface-heading > p { justify-self: start; }
    .candidate-profile-form .candidate-form-section > summary::after { display: none; }
}
@media (max-width: 760px) {
    .candidate-page-intro { grid-template-columns: 1fr; gap: 20px; }
    .candidate-page-intro h1 { max-width: 12.5ch; font-size: clamp(2.35rem, 12vw, 3.35rem); }
    .candidate-action-strip--profile,
    .verification-journey { grid-template-columns: 1fr; }
    .candidate-action-strip--profile .candidate-check,
    .verification-journey-step { min-height: 0; }
    .candidate-profile-surface--editor > .candidate-surface-heading,
    .candidate-profile-form .candidate-form-section > summary,
    .candidate-profile-form .candidate-form-section-body,
    .candidate-form-save-row { padding-right: 18px; padding-left: 18px; }
    .candidate-profile-form .form-grid { grid-template-columns: 1fr; }
    .candidate-form-save-row { grid-template-columns: 1fr; }
    .candidate-form-save-row > .button { width: 100%; min-width: 0; }
    .dashboard-shell > .wrapper { display: block; }
    .dashboard-shell > .wrapper > .dashboard-app-nav { display: none; }
}


/* V5: final candidate-workspace rhythm and public course thumbnails */
.candidate-dashboard-page .button,
.candidate-dashboard-page .button-primary,
.candidate-dashboard-page .button-ghost,
.candidate-dashboard-page .candidate-v3-inline-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    text-align: center;
    line-height: 1.2;
}

.dashboard-app-nav-more { overflow: hidden; }
.dashboard-app-nav-more summary { width: 100%; color: #667085; }
.dashboard-app-nav-more[open] { padding-bottom: 4px; }
.dashboard-app-nav-secondary { max-height: 360px; overflow: auto; overscroll-behavior: contain; }

/* Profile page: calmer five-step strip and a better-aligned editor header. */
.candidate-page-intro--profile h1 {
    max-width: 14.5ch;
    font-size: clamp(2.35rem, 4.25vw, 4.25rem);
    line-height: 1;
}
.candidate-action-strip--profile { gap: 12px; margin-bottom: 22px; }
.candidate-action-strip--profile .candidate-check { min-height: 82px; padding: 13px 14px; }
.candidate-action-strip--profile .candidate-check p { margin-top: 0; font-size: .79rem; line-height: 1.38; }
.candidate-profile-surface--editor > .candidate-surface-heading {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr);
    gap: 28px;
    padding: 24px 28px;
}
.candidate-profile-surface--editor > .candidate-surface-heading h2 {
    max-width: 20ch;
    font-size: clamp(1.55rem, 2.35vw, 2.2rem);
}
.candidate-profile-surface--editor > .candidate-surface-heading > p { max-width: 36ch; align-self: center; }
.candidate-profile-form .candidate-form-section > summary { min-height: 72px; padding: 17px 28px; }
.candidate-profile-form .candidate-form-section-body { padding-bottom: 24px; }
.candidate-form-save-row { padding: 22px 28px 24px; }

/* Billing card: remove the collision between “All clear” and explanatory copy. */
.payments-page-intro .candidate-readiness-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 11px;
    padding: 24px;
}
.payments-page-intro .candidate-readiness-card .panel-label,
.payments-page-intro .candidate-readiness-card > p:last-child,
.payments-page-intro .candidate-readiness-card > .button { width: auto; margin: 0; }
.payments-page-intro .candidate-readiness-card > strong {
    margin: 0;
    color: #111827;
    font-size: 1.32rem;
    line-height: 1.16;
    text-align: left;
}
.payments-page-intro .candidate-readiness-card > p:last-child { color: #596273; line-height: 1.55; }
.payments-page-intro .candidate-readiness-card > .button { width: 100%; margin-top: 4px; }

/* Consistent vertical rhythm for verification, learning and payments. */
.verification-page-intro,
.course-dashboard-intro,
.payments-page-intro { margin-bottom: 28px; }
.verification-journey { margin-bottom: 20px; }
.candidate-course-continue-card { align-items: center; }
.candidate-course-continue-progress .button,
.candidate-course-card-actions .button,
.candidate-surface-actions .button { justify-content: center; }

/* Public courses now lead with course artwork. */
.course-board-v2-grid { align-items: stretch; }
.course-board-v2-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    padding: 0;
}
.course-board-v2-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid #e3e5e9;
    background: #0f172a;
}
.course-board-v2-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease;
}
.course-board-v2-card:hover .course-board-v2-media img { transform: scale(1.02); }
.course-board-v2-media--fallback {
    display: grid;
    place-items: center;
    color: #fff;
    background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.18), transparent 34%), linear-gradient(135deg, #111827 0%, #374151 100%);
}
.course-board-v2-media--fallback span {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px;
    font-weight: 900;
}
.course-board-v2-card-body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    padding: 23px 24px 24px;
}
.course-board-v2-card-body > h2 { margin-top: 17px; }
.course-board-v2-card-body > .muted { min-height: 105px; }
.course-board-v2-card-body .course-board-v2-definition-list { margin-top: auto; }
.course-board-v2-card-body .start-actions { margin-top: 20px; }
.course-board-v2-card-body .start-actions .button {
    width: auto;
    min-width: 168px;
    justify-content: center;
}

/* Admin upload control for future course thumbnails. */
.course-thumbnail-admin-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 30px;
    align-items: center;
    padding: 28px;
}
.course-thumbnail-admin-copy h2 { max-width: 20ch; margin: 8px 0 0; }
.course-thumbnail-admin-copy > .muted { max-width: 62ch; margin-top: 10px; }
.course-thumbnail-upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 22px;
}
.course-thumbnail-upload-form label { display: grid; gap: 8px; min-width: 0; color: #111827; font-weight: 760; }
.course-thumbnail-upload-form input[type="file"] { width: 100%; }
.course-thumbnail-admin-preview {
    overflow: hidden;
    border: 1px solid #e1e3e8;
    border-radius: 14px;
    background: #f8fafc;
}
.course-thumbnail-admin-preview img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.course-thumbnail-admin-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    color: #fff;
    background: #111827;
    font-size: 2rem;
    font-weight: 900;
}
.course-thumbnail-admin-preview > .muted { padding: 16px; }

@media (max-width: 1020px) {
    .candidate-action-strip--profile,
    .verification-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .course-thumbnail-admin-card { grid-template-columns: 1fr; }
    .course-thumbnail-admin-preview { max-width: 520px; }
}
@media (max-width: 760px) {
    .candidate-page-intro--profile h1 { max-width: 12.5ch; font-size: clamp(2.25rem, 11vw, 3.15rem); }
    .candidate-action-strip--profile,
    .verification-journey { grid-template-columns: 1fr; }
    .candidate-action-strip--profile .candidate-check,
    .verification-journey-step { min-height: 0; }
    .candidate-profile-surface--editor > .candidate-surface-heading,
    .candidate-profile-form .candidate-form-section > summary,
    .candidate-form-save-row { padding-right: 18px; padding-left: 18px; }
    .candidate-profile-form .candidate-form-section-body { padding-right: 18px; padding-bottom: 20px; padding-left: 18px; }
    .course-board-v2-card-body { padding: 20px; }
    .course-board-v2-card-body > .muted { min-height: 0; }
    .course-board-v2-card-body .start-actions .button,
    .course-thumbnail-upload-form .button { width: 100%; }
    .course-thumbnail-upload-form { grid-template-columns: 1fr; }
}



/* ========================================================================
   V6 – auth visibility + candidate workspace finish
   These final, page-scoped rules intentionally override older workspace passes.
   ======================================================================== */

/* Auth: every password form uses the same visible SVG eye and remains keyboard-focusable. */
.launch-password-toggle { z-index: 2; cursor: pointer; color: #4b5563; }
.launch-password-toggle .launch-password-eye { display: block !important; width: 20px; height: 20px; fill: currentColor; pointer-events: none; }
.launch-password-toggle .launch-password-eye--hide { display: none !important; }
.launch-password-toggle.is-visible .launch-password-eye--show { display: none !important; }
.launch-password-toggle.is-visible .launch-password-eye--hide { display: block !important; }
.launch-password-toggle:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }

/* Dashboard: every card action is truly centered, including the two-action cards. */
.candidate-v3-action-card > .button,
.candidate-v3-support-grid > article > .button { display: flex !important; width: 100%; align-items: center; justify-content: center; text-align: center; }
.candidate-v3-support-grid .candidate-v3-inline-actions { display: grid !important; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto !important; padding-top: 20px; }
.candidate-v3-support-grid .candidate-v3-inline-actions .button { display: flex !important; width: 100%; min-width: 0; align-items: center; justify-content: center; text-align: center; }

/* Verification overview: record facts need a proper card rhythm, not unstyled definition rows. */
.verification-record-surface--overview { display: flex; min-height: 100%; flex-direction: column; padding: 28px; }
.verification-record-surface--overview .candidate-surface-heading { margin-bottom: 18px; }
.verification-record-surface--overview .candidate-surface-heading h2 { max-width: 15ch; font-size: clamp(1.65rem, 2.25vw, 2.2rem); letter-spacing: -.045em; line-height: 1.08; }
.verification-record-surface--overview .candidate-fact-list,
.verification-apply-package .candidate-fact-list { display: grid; gap: 0; width: 100%; margin: auto 0 0; padding: 0; border-top: 1px solid #e4e6eb; }
.verification-record-surface--overview .candidate-fact-list > div,
.verification-apply-package .candidate-fact-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid #e4e6eb; }
.verification-record-surface--overview .candidate-fact-list dt,
.verification-apply-package .candidate-fact-list dt { color: #667085; font-size: .85rem; line-height: 1.4; }
.verification-record-surface--overview .candidate-fact-list dd,
.verification-apply-package .candidate-fact-list dd { margin: 0; color: #111827; font-size: .9rem; font-weight: 800; line-height: 1.45; text-align: right; }

/* Verification application: stable two-column form/summary layout and readable accordions. */
.verification-apply-intro { display: grid; max-width: none; grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; }
.verification-state-card--apply,
.verification-state-card--overview { display: flex !important; min-height: 0; flex-direction: column; align-items: stretch !important; justify-content: flex-start; gap: 12px; margin: 0; padding: 24px; }
.verification-state-card--apply > *,
.verification-state-card--overview > * { grid-column: auto !important; align-self: stretch; }
.verification-state-card--apply > strong,
.verification-state-card--overview > strong { margin: 0 !important; font-size: 1.32rem; line-height: 1.16; text-align: left !important; }
.verification-state-card--apply > p:last-child,
.verification-state-card--overview > p:last-child { margin: 0 !important; line-height: 1.58; }
.verification-state-card--apply > .button,
.verification-state-card--overview > .button { width: 100% !important; margin-top: 4px !important; }
.verification-apply-layout--stable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .38fr); gap: 24px; align-items: start; }
.verification-apply-layout--stable > .candidate-apply-form { display: grid; gap: 16px; }
.verification-apply-layout--stable .candidate-form-section { overflow: hidden; margin: 0; border: 1px solid #e1e3e8; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .04); }
.verification-apply-layout--stable .candidate-form-section > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 78px; padding: 18px 22px; border: 0; color: #111827; }
.verification-apply-layout--stable .candidate-form-section > summary > span { display: inline-flex; min-width: 0; align-items: center; gap: 10px; }
.verification-apply-layout--stable .candidate-form-section > summary > span b { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 999px; color: #fff; background: #111827; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .68rem; }
.verification-apply-layout--stable .candidate-form-section > summary > span strong { overflow-wrap: anywhere; font-size: 1rem; line-height: 1.35; }
.verification-apply-layout--stable .candidate-form-section > summary > small { color: #667085; font-size: .8rem; font-weight: 700; text-align: right; }
.verification-apply-layout--stable .candidate-form-section > .candidate-form-section-body { padding: 0 22px 24px; border-top: 1px solid #e8e9ec; }
.verification-apply-layout--stable .candidate-section-intro { max-width: 74ch; margin: 18px 0; color: #5d6675; line-height: 1.65; }
.verification-apply-sidebar { position: sticky; top: 92px; display: grid; gap: 16px; }
.verification-apply-summary,
.verification-apply-package { padding: 21px; border: 1px solid #e1e3e8; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .04); }
.verification-apply-summary .candidate-checklist-inline { margin: 0; }
.verification-apply-package > .eyebrow { margin-bottom: 14px; }
.verification-apply-package > .button { display: flex; width: 100%; justify-content: center; margin-top: 18px; }
.verification-apply-actions { margin-top: 4px; }
.verification-apply-actions .button { display: flex; min-width: 180px; justify-content: center; }

/* Payments: keep every element in the billing-state card in its own line. */
.candidate-billing-state-card { display: flex !important; min-height: 0; flex-direction: column; align-items: stretch !important; justify-content: flex-start; gap: 11px; margin: 0 !important; padding: 24px !important; }
.candidate-billing-state-card > * { grid-column: auto !important; align-self: stretch; }
.candidate-billing-state-card > strong { margin: 0 !important; color: #111827; font-size: 1.32rem !important; line-height: 1.16; text-align: left !important; }
.candidate-billing-state-card > p:last-child { margin: 0 !important; color: #596273; line-height: 1.58; }
.candidate-billing-state-card > .button { display: flex; width: 100% !important; justify-content: center; margin-top: 4px !important; }

@media (max-width: 1020px) {
    .verification-apply-intro,
    .verification-apply-layout--stable { grid-template-columns: 1fr; }
    .verification-apply-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .candidate-v3-support-grid .candidate-v3-inline-actions { grid-template-columns: 1fr; }
    .verification-apply-layout--stable .candidate-form-section > summary { grid-template-columns: 1fr; }
    .verification-apply-layout--stable .candidate-form-section > summary > small { text-align: left; }
    .verification-apply-sidebar { grid-template-columns: 1fr; }
    .verification-record-surface--overview .candidate-fact-list > div,
    .verification-apply-package .candidate-fact-list > div { grid-template-columns: 1fr; gap: 5px; }
    .verification-record-surface--overview .candidate-fact-list dd,
    .verification-apply-package .candidate-fact-list dd { text-align: left; }
}