/*
 * Shift Design System — Tables
 * Clean, readable data tables
 *
 * Requires: shift-core.css (tokens)
 */

/* ============================================
   TABLES - Clean and Readable
   ============================================ */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table th {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-bottom: 2px solid var(--border-default);
}

.table td {
    padding: var(--spacing-4);
    font-size: var(--font-sm);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}

.table tr {
    transition: background var(--duration-fast) var(--easing-default);
}

.table tbody tr:hover td {
    background: var(--neutral-50);
}

.table .numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
 /*
 * Shift Design System — Form Controls
 * Inputs, selects, textareas, labels, and form groups
 *
 * Requires: shift-core.css (tokens)
 */

/* ============================================
   INPUTS - Default Sunken Style
   White background with subtle inset shadow for
   inputs placed directly on the page/canvas
   ============================================ */

.input {
    display: block;
    width: 100%;
    height: var(--input-height-md);
    padding: 0 var(--spacing-5);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    color: var(--control-text);
    font-family: inherit;
    font-size: var(--font-base);
    box-shadow: var(--shadow-inset);
    transition:
        background var(--duration-fast) var(--easing-default),
        border-color var(--duration-fast) var(--easing-default),
        box-shadow var(--duration-fast) var(--easing-default);
}

.input::placeholder {
    color: var(--control-placeholder);
}

.input:hover:not(:disabled):not(:focus) {
    border-color: var(--neutral-300);
}

.input:focus {
    background: var(--bg-surface);
    outline: none;
    border-color: var(--accent-400);
    /* box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.08),
        0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent); */
}

.input.has-error {
    background: var(--control-error-bg);
    border-color: var(--status-danger-border);
}

.input.has-error:focus {
    box-shadow:
        var(--shadow-inset),
        0 0 0 3px color-mix(in srgb, var(--danger-500) 20%, transparent);
}

.input:disabled {
    background: var(--control-disabled-bg);
    color: var(--control-disabled-text);
    border-color: var(--neutral-200);
    box-shadow: none;
    cursor: not-allowed;
}

/* ============================================
   INPUTS IN CARDS - Sunken Style
   White background with inset shadow,
   clean border on focus
   ============================================ */

.card .input {
    border: 1px solid var(--border-card-input);
    background: var(--bg-surface);
    box-shadow: var(--shadow-inset-strong);
}

.card .input:hover:not(:disabled):not(:focus) {
    box-shadow: var(--shadow-inset-strong);
}

.card .input:focus {
    background: var(--bg-surface);
    /* box-shadow: none; */
    border-color: var(--accent-primary);
}

.card .input.has-error {
    background: var(--control-error-bg);
}

.card .input.has-error:focus {
    box-shadow: var(--control-error-ring);
}

.card .input:disabled {
    background: var(--control-disabled-bg);
    box-shadow: none;
}

.input-sm {
    height: var(--input-height-sm);
    padding: 0 var(--spacing-4);
    font-size: var(--font-sm);
    border-radius: var(--radius-lg);
}

.input-lg {
    height: var(--input-height-lg);
    padding: 0 var(--spacing-6);
    font-size: var(--font-lg);
    border-radius: var(--radius-2xl);
}

textarea.input {
    height: auto;
    min-height: 7rem;
    padding: var(--spacing-4) var(--spacing-5);
    resize: vertical;
    line-height: var(--leading-relaxed);
}

/* Select */
select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23635d56' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-4) center;
    padding-right: var(--spacing-12);
    cursor: pointer;
}

/* ============================================
   LABELS & HELPER TEXT
   ============================================ */

/* Labels - Friendly */
.label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.label-optional {
    font-weight: var(--font-regular);
    color: var(--text-tertiary);
    margin-left: var(--spacing-1);
}

.helper-text {
    margin-top: var(--spacing-2);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.error-text {
    margin-top: var(--spacing-2);
    font-size: var(--font-sm);
    color: var(--status-danger-text);
}

/* ============================================
   FORM GROUPS - Clean spacing
   ============================================ */

.form-group {
    margin-bottom: var(--spacing-6);
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ============================================
   TOGGLE SWITCH - Playful
   ============================================ */

.toggle-switch {
    position: relative;
    width: 56px;
    height: 32px;
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-normal) var(--easing-bounce);
}

.toggle-switch.is-on {
    background: var(--accent-primary);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: var(--bg-surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-normal) var(--easing-bounce);
}

.toggle-switch.is-on::after {
    transform: translateX(24px);
}

.toggle-switch:hover {
    background: var(--neutral-400);
}

.toggle-switch.is-on:hover {
    background: var(--accent-700);
}

.toggle-switch:active::after {
    width: 28px;
}

/* ============================================
   CHIP/PILL SELECTION
   ============================================ */

.chip {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-bounce);
}

.chip:hover {
    border-color: var(--neutral-300);
    background: var(--bg-muted);
    color: var(--text-primary);
}

.chip.selected {
    background: var(--accent-50);
    border-color: var(--accent-primary);
    color: var(--accent-700);
}

/* ============================================
   FORM ROW - Inline layout for paired controls
   ============================================ */

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============================================
   CHECKBOX GROUP - Styled checkbox with label
   ============================================ */

.checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.checkbox-group input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--accent-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.checkbox-group label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 0;
    cursor: pointer;
}

/* ============================================
   PASSWORD TOGGLE - Show/hide password wrapper
   ============================================ */

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper .input {
    padding-right: var(--spacing-12);
}

.password-toggle {
    position: absolute;
    right: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--spacing-1);
    cursor: pointer;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--duration-fast);
}

.password-toggle:hover {
    color: var(--text-secondary);
}

.password-toggle svg {
    width: 18px;
    height: 18px;
}
 /*
 * Shift Design System — Cards
 * Use sparingly - only for truly grouped content
 *
 * Requires: shift-core.css (tokens)
 */

/* ============================================
   CARDS - Use Sparingly!
   Only for truly grouped content
   ============================================ */

.card {
    position: relative;
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-md);
}

/* Danger zone modifier - see danger-zone.css for full styling */
.card.danger-zone {
    background: var(--status-danger-bg);
}

.card.above_mask {
    position: relative;
    z-index: 1000;
}

/* Make room for the close button so titles don't flow behind it */
.card.above_mask > .card-header {
    padding-right: 36px;
}

.card.is-interactive {
    cursor: pointer;
    transition: all var(--duration-normal) var(--easing-bounce);
}

.card.is-interactive:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.card.is-selected {
    box-shadow: 0 0 0 3px var(--accent-primary), var(--shadow-md);
}

.card-sm {
    padding: var(--spacing-4);
    border-radius: var(--radius-xl);
}

.card-lg {
    padding: var(--spacing-8);
    border-radius: var(--radius-3xl);
}

/* Card with subtle border (optional) */
.card-bordered {
    border: 2px solid var(--border-subtle);
    box-shadow: none;
}

.card-bordered:hover {
    border-color: var(--border-default);
}

.card-header {
    margin-bottom: var(--spacing-4);
}

.card-title {
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.card-description {
    margin-top: var(--spacing-3);
    font-size: var(--font-base);
    color: var(--text-secondary);
}

.card-footer {
    margin-top: var(--spacing-5);
    padding-top: var(--spacing-5);
    border-top: 2px solid var(--border-subtle);
}

.card-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* "publicly visible" badge — top-right corner of card */
.card-public-badge {
    position: absolute;
    top: var(--spacing-8);
    right: var(--spacing-6);
    font-size: var(--font-sm);
    color: var(--accent-300);
    line-height: 1;
}

.card-close {
    position: absolute;
    top: var(--spacing-5);
    right: var(--spacing-5);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--control-close-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--easing-default);
}

.card-close:hover {
    background: var(--control-close-bg-hover);
    color: var(--text-primary);
}

/* X icon via pseudo-elements (no SVG needed) */
.card-close::before,
.card-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
/* Tertiary buttons stand out more on cards */
.card .btn-tertiary {
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-card-subtle);
}

.card .btn-tertiary:hover:not(:disabled) {
    box-shadow: var(--shadow-accent);
}

.card-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.card-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
 /*
 * Shift Design System — Buttons
 * Friendly, pill-shaped, bouncy buttons
 *
 * Requires: shift-core.css (tokens)
 */

/* ============================================
   BUTTONS - Friendly and Bouncy
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    height: var(--button-height-md);
    padding: 0 var(--spacing-6);
    border: none;
    border-radius: var(--radius-full);  /* Pill shaped! */
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-bounce);
    transform: translateY(0);
    position: relative;
    overflow: hidden;
}

.btn:hover:not(:disabled) {
    /* transform: translateY(-3px); */
}

.btn:active:not(:disabled) {
    transform: translateY(-1px) scale(0.98);
}

.btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--accent-primary);
    outline-offset: var(--focus-ring-offset);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-heavy {
    font-weight: var(--font-bold);
}

.btn-xs {
    height: var(--button-height-xs);
    padding: 0 var(--spacing-3);
    font-size: var(--font-xs);
}

.btn-sm {
    height: var(--button-height-sm);
    padding: 0 var(--spacing-4);
    font-size: var(--font-sm);
}

.btn-lg {
    height: var(--button-height-lg);
    padding: 0 var(--spacing-8);
    font-size: var(--font-base);
}

.btn-xl {
    height: var(--button-height-xl);
    padding: 0 var(--spacing-10);
    font-size: var(--font-lg);
}

.btn-xxl {
    height: var(--button-height-xxl);
    padding: 0 var(--spacing-12);
    font-size: var(--font-xl);
}

.btn-primary {
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
    background: var(--action-primary-bg-hover);
    /* box-shadow: var(--shadow-md), var(--shadow-accent); */
}

.btn-primary:active:not(:disabled) {
    background: var(--action-primary-bg-active);
    box-shadow: var(--shadow-xs);
}

.btn-secondary {
    background: var(--action-secondary-bg);
    color: var(--action-secondary-text);
    border: none;
    box-shadow: 0 0 28px var(--action-secondary-glow) inset;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--action-secondary-bg-hover);
}

.btn-secondary:active:not(:disabled) {
    background: var(--action-secondary-bg-active);
}

.btn-tertiary {
    background: var(--bg-surface);
    color: var(--action-tertiary-text);
    box-shadow: var(--shadow-sm);
}

.btn-tertiary:hover:not(:disabled) {
    box-shadow: var(--shadow-accent-sm);
}

.btn-tertiary:active:not(:disabled) {
    box-shadow: var(--shadow-xs);
}

.btn-danger {
    background: var(--action-danger-bg);
    color: var(--action-danger-text);
}

.btn-danger:hover:not(:disabled) {
    background: var(--action-danger-bg-hover);
    box-shadow: var(--shadow-md);
}

/* Fun button with gradient */
.btn-fun {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--delight-500) 100%);
    color: var(--accent-contrast);
    box-shadow: var(--shadow-md);
}

.btn-fun:hover:not(:disabled) {
    box-shadow: var(--shadow-lg), var(--shadow-delight);
}
  .brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    position: relative;
    z-index: 1;
}

.brand-logo {
    width: 3rem;
    height: 3rem;
    background: var(--accent-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-contrast);
    font-weight: var(--font-extrabold);
    font-size: var(--font-xl);
    box-shadow: var(--shadow-md), var(--shadow-accent);
}

.brand-name {
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
} /*
 * Shift Design System — Badges
 * Pill-shaped status indicators
 *
 * Requires: shift-core.css (tokens)
 */

/* ============================================
   BADGES - Pill Shaped, Fun
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
}

.badge-default {
    background: var(--neutral-100);
    color: var(--text-secondary);
}

.badge-accent {
    background: var(--accent-100);
    color: var(--accent-700);
}

.badge-success {
    background: var(--success-100);
    color: var(--success-700);
}

.badge-warning {
    background: var(--warning-100);
    color: var(--warning-700);
}

.badge-danger {
    background: var(--danger-100);
    color: var(--danger-700);
}

.badge-info {
    background: var(--info-100);
    color: var(--info-700);
}

.badge-delight {
    background: var(--delight-100);
    color: var(--delight-700);
}
 /*
 * Shift Design System — Alerts
 * Friendly, left-bordered status containers
 *
 * Requires: shift-core.css (tokens)
 */

/* ============================================
   ALERTS - Friendly and Clear
   ============================================ */

.alert {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-xl);
    border-left: 4px solid;
}

.alert-success {
    background: var(--status-success-bg);
    border-left-color: var(--success-500);
    color: var(--status-success-text);
}

.alert-warning {
    background: var(--status-warning-bg);
    border-left-color: var(--warning-500);
    color: var(--status-warning-text);
}

.alert-danger {
    background: var(--status-danger-bg);
    border-left-color: var(--danger-500);
    color: var(--status-danger-text);
}

.alert-info {
    background: var(--status-info-bg);
    border-left-color: var(--info-500);
    color: var(--status-info-text);
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-1);
}

.alert-description {
    font-size: var(--font-sm);
}
 /*
 * Shift Design System — Popups/Modals
 * Standard popup container, mask, and modal styling
 *
 * Requires: shift-core.css (tokens)
 *
 * Structure:
 *   <div class="popup">
 *       <div class="mask" onclick="$$(this).stop()"></div>
 *       <div class="modal">
 *           <div class="modal-header">...</div>
 *           <div class="modal-content">...</div>
 *       </div>
 *   </div>
 */

.popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.popup .mask {
    position: fixed;
    inset: 0;
    background: var(--overlay-medium);
    z-index: -1;
    cursor: pointer;
}

.popup .modal {
    background: var(--bg-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    min-width: 300px;
    max-width: 500px;
    width: 100%;
    overflow: hidden;
    animation: bounce-in 0.3s var(--easing-bounce);
}

/* Modal Header */
.popup .modal-header {
    display: flex;
    align-items: center;
    height: var(--button-height-lg);
    padding: 0 var(--spacing-4);
    background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
}

.popup .modal-header h4 {
    margin: 0;
    flex: 1;
    text-align: center;
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: white;
}

.popup .modal-header .modal-icon {
    flex-shrink: 0;
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal Close Button */
.popup .modal-close {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    line-height: 1;
    transition: all var(--duration-fast) var(--easing-default);
}



/* Modal Content */
.popup .modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    padding: var(--spacing-6);
}

.popup .modal-content p {
    text-align: center;
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* Modal Actions */
.popup .modal-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
}

.popup .modal-actions .btn {
    width: 100%;
}

.popup .auth-alt-buttons {
    width: 100%;
}

/* Tighter status message spacing inside popups */
.popup .auth-status-message {
    margin-top: 0;
}

/* Size Variants */
.popup .modal-sm {
    max-width: 360px;
}

.popup .modal-lg {
    max-width: 600px;
}

/* Animated border (for special emphasis) */
.popup .modal.animated-border {
    border: 3px solid var(--accent-primary);
    animation: bounce-in 0.3s var(--easing-bounce), pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        border-color: var(--accent-primary);
        box-shadow: var(--shadow-xl), 0 0 0 0 color-mix(in srgb, var(--accent-primary) 40%, transparent);
    }
    50% {
        border-color: var(--accent-400);
        box-shadow: var(--shadow-xl), 0 0 0 8px transparent;
    }
}
 /*
 * Products Table — Clean row-based list for savings products
 */

/* Extra top breathing room above filters */
.products-filter-bar {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
}

.products-filter-group {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.products-filter {
    background: var(--neutral-0);
    color: var(--text-primary);
    box-shadow: none;
}

.products-filter:hover:not(.selected) {
    background: var(--neutral-300);
}

.products-filter.selected {
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
}

/* Table container — card shell kept but visually hidden for easy re-enabling */
.products-table {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

/* Shared grid base — display, padding, alignment */
.products-table-header,
.products-table-row {
    display: grid;
    align-items: center;
    padding: var(--spacing-3) 0 var(--spacing-3) var(--spacing-2);
    text-align: left;
}

/* Shared 7-column grid — product rows show type in col 3, offer rows show channels */
.products-table-header,
.product-row-clickable,
.offer-row,
.skeleton-row {
    grid-template-columns: 6fr 25fr 10fr 7fr 5fr 8fr 50px;
}

/* Header — faint, understated */
.products-table-header {
    font-size: var(--font-xs);
    font-weight: var(--font-regular);
    opacity: 0.3;
    letter-spacing: var(--tracking-wide);
    padding: var(--spacing-3) var(--spacing-4) 0;
    border-bottom: none;
}

/* Rows */
.products-table-row {
    font-size: var(--font-base);
    color: var(--text-primary);
    transition: background var(--duration-fast) var(--easing-default);
}

.product-expandable {
    border-bottom: 1px solid var(--border-subtle);
}

.product-row-clickable:hover,
.offer-row:hover {
    background: var(--neutral-50);
}

/* Rate column */
.product-rate {
    font-weight: var(--font-bold);
    color: var(--accent-600);
    font-size: var(--font-xl);
}

/* Possibly-closed label — visible text above the rate */
.product-rate {
    position: relative;
}

.rate-closed-label {
    display: block;
    font-size: var(--font-xs);
    font-weight: var(--font-medium);
    color: var(--warning-600);
    line-height: 1;
    margin-bottom: 2px;
}

/* Faded rate when possibly withdrawn */
.rate-struck {
    opacity: 0.5;
}

/* Provider name */
.product-provider-name {
    font-weight: var(--font-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--accent-600);
}

/* Product type column */
.product-type-col {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-sm);
}

/* Numeric alignment */
.products-table-header .numeric,
.products-table-row .numeric {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* Deposits column */
.product-deposits {
    white-space: nowrap;
}

/* Max deposit — faint secondary text */
.product-max-deposit {
    font-weight: var(--font-regular);
    opacity: 0.25;
}

/* View column alignment */
.product-view {
    text-align: right;
}

/* --- Emoji Indicator System --- */

/* Interest column */
.product-interest {
    white-space: nowrap;
    font-size: var(--font-sm);
}

.interest-label {
    color: var(--text-secondary);
    font-size: var(--font-xs);
    letter-spacing: 0.01em;
}

/* Eligibility & channels — inline emoji row */
.product-eligibility,
.product-channels {
    display: flex;
    gap: 2px;
    align-items: center;
}

/* Base emoji indicator */
.indicator-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    line-height: 1;
    transition: opacity 0.15s ease;
}

/* Dim — not applicable */
.indicator-dim {
    opacity: 0.08;
    filter: grayscale(100%);
}

/* Eligible / partial — applicable but not exclusive */
.indicator-eligible,
.indicator-partial {
    opacity: 0.45;
}

/* Only / full — exclusive or complete */
.indicator-only,
.indicator-full {
    opacity: 1;
}

/* --- End Emoji Indicator System --- */

/* Provider back button */
.provider-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--easing-default);
    text-decoration: none;
}

.provider-back-btn:hover {
    background: rgba(0, 0, 0, 0.2);
    color: inherit;
    text-decoration: none;
}

/* Provider page header card */
.provider-header-card {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4) calc(var(--spacing-5) + var(--spacing-2));
    border-radius: var(--radius-lg);
    min-height: 70px;
    display: flex;
    align-items: center;
    background-color: white;
}

.provider-card-content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--spacing-4);
}

.provider-card-title-group {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-3);
    flex-shrink: 0;
}

.provider-card-name {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    margin: 0;
    letter-spacing: -0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.provider-type-label {
    font-size: var(--font-sm);
    opacity: 0.5;
    white-space: nowrap;
    flex-shrink: 0;
}

.provider-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-sm);
    opacity: 0.95;
    flex-shrink: 0;
}

.provider-type-tag {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.1);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.provider-detail-separator {
    opacity: 0.6;
}

.provider-website-link {
    color: inherit;
    text-decoration: none;
    font-weight: var(--font-medium);
    cursor: pointer;
    border-bottom: 1px solid currentColor;
    transition: opacity var(--duration-fast) var(--easing-default);
    white-space: nowrap;
}

.provider-website-link:hover {
    opacity: 0.85;
}

.provider-website-button {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-default);
    background: rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.provider-website-button:hover {
    color: inherit;
    text-decoration: none;
}

/* Clickable product/offer rows */
.product-row-clickable,
.offer-row {
    cursor: pointer;
}

.product-expand-btn {
    background: none;
    border: none;
    padding: var(--spacing-1);
    color: var(--text-secondary);
    transition: transform var(--duration-fast) var(--easing-default);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.product-expand-btn.expanded {
    transform: rotate(180deg);
}

.product-expand-btn:hover {
    color: var(--text-primary);
}


/* Expanded state — light accent background edge-to-edge with card */
.product-expandable.expanded {
    background: var(--accent-50);
    margin-left: calc(-1 * var(--spacing-6));
    margin-right: calc(-1 * var(--spacing-6));
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
    border-bottom-color: transparent;
}

.product-expandable.expanded .product-row-clickable:hover,
.product-expandable.expanded .offer-row:hover {
    background: transparent;
}

/* When expanded: hide rate, product type, interest, eligibility, channels, deposits */
.product-expandable.expanded .product-col-collapse {
    display: none;
}

.product-col-expand {
    display: none;
}

.product-expandable.expanded .product-col-expand {
    display: inline;
}

.product-expandable.expanded .product-row-clickable {
    padding-bottom: var(--spacing-1);
}

/* Provider name spans across all collapsed columns when expanded */
.product-expandable.expanded .product-provider-name {
    grid-column: 1 / -2;
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    white-space: nowrap;
    overflow: hidden;
}

/* "View provider" link — faint like deposit text, underlined */
.product-view-provider {
    font-size: var(--font-sm);
    color: var(--text-primary);
    opacity: 0.25;
    text-decoration: underline;
    cursor: pointer;
    margin-left: var(--spacing-3);
}

.product-view-provider:hover {
    opacity: 0.5;
}

/* Expanded offers container */
.product-offers-container {
    min-height: 56px;
}

.product-offers-container .offer-row {
    border-bottom: 1px solid var(--border-subtle);
}

.product-offers-container .offer-row:last-child {
    border-bottom: none;
}

.offer-product-name {
    font-weight: var(--font-medium);
    color: var(--accent-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Offers list card */
.products-card .product-expandable:last-child {
    border-bottom: none;
}

/* Provider section headings (Personal Accounts, Business Accounts, etc.) */
.provider-section-title {
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
}

.provider-section-title:first-child {
    margin-top: 0;
}

/* Provider page cards */
.provider-card {
    padding-bottom: var(--spacing-3);
}

.provider-card + .provider-card {
    margin-top: var(--spacing-4);
}

.provider-card .card-title-emoji {
    font-size: 0.8em;
    margin: 0 0 0 var(--spacing-3);
    transform: translateY(-1px);
    display: inline-block;
}

.provider-card .card-title-customer {
    font-size: 0.9em;
    font-weight: var(--font-medium);
}

.provider-card .card-header {
    padding-left: var(--spacing-2);
}

/* Provider offer rows — standard offer-row grid, with subtle dividers */
.provider-card .offer-row {
    border-bottom: 1px solid var(--border-subtle);
}

.provider-card .offer-row:last-child {
    border-bottom: none;
}

/* Skeleton loading rows */
.skeleton-row {
    min-height: 56px;
}

.skeleton-block {
    display: inline-block;
    height: 16px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Responsive breakpoints: progressively drop columns --- */
/* Col 3 = product type (product) / channels (offer) — same slot, different content */

/* 1020px: drop deposits */
@media (max-width: 1020px) {
    .products-table-header,
    .product-row-clickable,
    .offer-row,
    .skeleton-row {
        grid-template-columns: 6fr 25fr 10fr 7fr 5fr 50px;
    }
    .product-deposits,
    .skeleton-row > :nth-child(6) { display: none !important; }
}

/* 900px: drop eligibility */
@media (max-width: 900px) {
    .products-table-header,
    .product-row-clickable,
    .skeleton-row {
        grid-template-columns: 6fr 25fr 10fr 7fr 36px;
    }
    .offer-row {
        grid-template-columns: 6fr 25fr 10fr 7fr 60px;
    }
    .product-type-col { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
    .product-eligibility,
    .skeleton-row > :nth-child(5) { display: none !important; }
}

/* 800px: drop interest */
@media (max-width: 800px) {
    .products-table-header,
    .product-row-clickable,
    .skeleton-row {
        grid-template-columns: 6fr 25fr 10fr 36px;
    }
    .offer-row {
        grid-template-columns: 6fr 25fr 10fr 60px;
    }
    .product-type-col { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
    .product-interest,
    .skeleton-row > :nth-child(4) { display: none !important; }
}

/* 700px: compact mobile */
@media (max-width: 700px) {
    .products-table-header { display: none; }

    .product-row-clickable,
    .skeleton-row {
        grid-template-columns: auto 1fr auto 25px;
        padding: var(--spacing-3) var(--spacing-2);
        gap: 0 var(--spacing-3);
    }

    .offer-row {
        grid-template-columns: auto 1fr auto 60px;
        padding: var(--spacing-2) var(--spacing-2);
        gap: 0 var(--spacing-3);
    }

    .product-type-col,
    .product-channels { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }

    .product-rate { font-size: var(--font-base); }
    .product-type-col,
    .product-channels { font-size: var(--font-xs); }

    .rate-closed-label { font-size: 0.625rem; }
}

/* 500px: hide channels on offer rows */
@media (max-width: 500px) {
    .offer-row {
        grid-template-columns: auto 1fr 60px;
    }
    .offer-row .product-channels { display: none !important; }
}
 /*
 * Shift Design System — Nav Overlay
 * Fixed nav bar for overlay flows (sign-in, popups, etc.)
 *
 * Requires: shift-core.css (tokens, shimmer keyframes)
 */

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4.5rem;
    z-index: 101;
    background: linear-gradient(90deg,
        var(--menu-bg) 25%,
        var(--menu-bg-scrolled) 50%,
        var(--menu-bg) 75%
    );
    background-size: 200% 100%;
    background-position: -150% 0;
    display: flex;
    align-items: center;
}

.nav-overlay .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-overlay .title {
    font-size: var(--font-xl);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    transition: opacity var(--duration-fast) var(--easing-default);
}

.nav-overlay .close {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--easing-default),
                color var(--duration-fast) var(--easing-default);
    flex-shrink: 0;
}

.nav-overlay .close:hover {
    background: var(--neutral-200);
    color: var(--text-primary);
}

/* Busy state — gradient slides left-to-right */
.nav-overlay.is-busy {
    animation: nav-shimmer 3s linear infinite;
}

@keyframes nav-shimmer {
    0% { background-position: -150% 0; }
    100% { background-position: -550% 0; }
}

@media (max-width: 600px) {
    .nav-overlay .inner {
        padding: 0 var(--spacing-4);
    }
}
 .mask {
    position: fixed;
    inset: 0;
    background: var(--overlay-medium);
    z-index: 900;
    cursor: pointer;
}

 /* Legal page — markdown content styling */

.legal-content {
    padding: var(--spacing-8) var(--spacing-2);
    text-align: left;
    color: var(--text-primary);
    line-height: 1.7;
}

.legal-content h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-2) 0;
    color: var(--text-primary);
}

.legal-content h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: var(--spacing-6) 0 var(--spacing-2) 0;
    color: var(--text-primary);
}

.legal-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: var(--spacing-4) 0 var(--spacing-2) 0;
    color: var(--text-primary);
}

.legal-content p {
    margin: 0 0 var(--spacing-3) 0;
    color: var(--text-secondary);
}

.legal-content em {
    color: var(--text-tertiary);
    font-style: italic;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 var(--spacing-3) 0;
    padding-left: var(--spacing-6);
    color: var(--text-secondary);
}

.legal-content li {
    margin-bottom: var(--spacing-1);
}

.legal-content a {
    color: var(--accent-500);
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--accent-400);
}
 /*
 * Shift Design System — Card Banner
 * Gradient banner that sits at the top of a card
 * Contains title, description, and filter controls
 *
 * Requires: shift-core.css (tokens)
 *
 * Usage: Place inside a .card with no top padding:
 *   .card { padding-top: 0; }  or use .card-banner-card helper
 */

/* Helper: removes top padding so banner bleeds to card edge */
.card.card-banner-card {
    padding-top: 0;
    overflow: hidden;
}

/* ============================================
   BANNER CONTAINER
   ============================================ */

.card-banner {
    position: relative;
    padding: var(--spacing-6) var(--spacing-8) var(--spacing-6);
    margin: 0 calc(-1 * var(--spacing-6));
    color: #ffffff;
}

/* First child: also pull up into card top padding */
.card-banner-card > [widget]:first-child > .card-banner,
.card-banner-card > .card-banner:first-child {
    margin-top: 0;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

/* ============================================
   TITLE & DESCRIPTION
   ============================================ */

.card-banner__title {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: inherit;
    margin: 0;
    padding-right: var(--spacing-8);
}

.card-banner__title-suffix {
    font-size: 0.5em;
    opacity: 0.8;
    margin-left: var(--spacing-2);
}

.card-banner__description {
    font-size: var(--font-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.78);
    margin: var(--spacing-3) 0 0;
}

/* ============================================
   CLOSE BUTTON (top-right)
   ============================================ */

.card-banner__close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--easing-default);
    padding: 0;
}

.card-banner__close:hover {
    background: rgba(255, 255, 255, 0.30);
    color: #ffffff;
}

.card-banner__close::before,
.card-banner__close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.card-banner__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.card-banner__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ============================================
   CONTROLS ROW
   ============================================ */

.card-banner__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-top: var(--spacing-5);
}

.card-banner__controls-left,
.card-banner__controls-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

/* ============================================
   BANNER FILTER BUTTONS (pill-shaped chips)
   Translucent white on gradient backgrounds
   ============================================ */

.card-banner__btn {
    display: inline-flex;
    align-items: center;
    height: var(--button-height-sm);
    padding: 0 var(--spacing-4);
    border: none;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-default);
    white-space: nowrap;
}

.card-banner__btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.card-banner__btn.is-active {
    background: rgba(255, 255, 255, 0.92);
    color: rgba(0, 0, 0, 0.75);
}

.card-banner__btn.is-active:hover {
    background: #ffffff;
    color: rgba(0, 0, 0, 0.85);
}

/* ============================================
   BANNER SELECT (dropdown on gradient bg)
   ============================================ */

.card-banner__select {
    appearance: none;
    height: var(--button-height-sm);
    padding: 0 var(--spacing-6) 0 var(--spacing-4);
    border: 1.5px solid rgba(255, 255, 255, 0.30);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all var(--duration-fast) var(--easing-default);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.card-banner__select:hover {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

.card-banner__select:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.card-banner__select option {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* ============================================
   BANNER TOGGLE (small toggle switch)
   ============================================ */

.card-banner__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.card-banner__toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-full);
    transition: all var(--duration-normal) var(--easing-bounce);
}

.card-banner__toggle.is-on .card-banner__toggle-track {
    background: rgba(255, 255, 255, 0.85);
}

.card-banner__toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xs);
    transition: all var(--duration-normal) var(--easing-bounce);
}

.card-banner__toggle.is-on .card-banner__toggle-track::after {
    transform: translateX(16px);
    background: rgba(0, 0, 0, 0.5);
}
 /*
 * Playful Design System v2 - Core
 * "Delightfully Simple" - More playful, less busy
 *
 * Key Philosophy Changes from v1:
 * - Forms don't need cards - let them breathe on the page
 * - Use whitespace and typography for hierarchy, not borders
 * - Add personality through illustrations and micro-animations
 * - Warmer, softer colors with playful gradients
 * - More conversational, fun microcopy encouraged
 * - Subtle decorative elements (blobs, gradients, doodles)
 *
 * Component stylesheets (import alongside this file):
 *   buttons.css  — .btn and variants
 *   forms.css    — .input, .label, .form-group, .toggle-switch, .chip
 *   cards.css    — .card and variants
 *   badges.css   — .badge and variants
 *   alerts.css   — .alert and variants
 *   tables.css   — .table
 */

/* ============================================
   CORE TOKENS
   ============================================ */

:root {
    /* Typography - Font Family (System fonts for best cross-platform rendering) */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: 'Fira Code', JetBrains Mono, Consolas, monospace;

    /* Typography - Font Size (Generous, readable) */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: clamp(1.75rem, 1.5rem + 1vw, 2rem);
    --font-4xl: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
    --font-5xl: clamp(2.5rem, 2rem + 2vw, 3.25rem);

    /* Typography - Font Weight */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Typography - Line Height */
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Typography - Letter Spacing */
    --tracking-tighter: -0.02em;
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.01em;
    --tracking-wider: 0.03em;

    /* Colors - Super Warm Neutrals (cream/ivory base) */
    --neutral-0: #ffffff;
    --neutral-50: #fefdfb;      /* Warm cream white */
    --neutral-100: #faf8f5;     /* Soft ivory */
    --neutral-150: #f5f2ed;
    --neutral-200: #ebe7e0;
    --neutral-300: #ddd7cd;
    --neutral-400: #b5ada1;     /* Warm taupe */
    --neutral-500: #8a8279;
    --neutral-600: #635d56;
    --neutral-700: #4a453f;
    --neutral-800: #302c28;
    --neutral-900: #1f1c19;
    --neutral-950: #0f0d0b;

    /* Colors - Delight (Peachy coral - super friendly!) */
    --delight-50: #fff5f0;
    --delight-100: #ffe8dd;
    --delight-200: #ffd0bb;
    --delight-300: #ffb08e;
    --delight-400: #ff8b5a;
    --delight-500: #ff6b35;     /* Primary delight - vibrant but soft */
    --delight-600: #e85a2a;
    --delight-700: #c4461f;

    /* Colors - Soft Status Colors (pastel-ish, friendly) */
    --success-50: #f0fdf6;
    --success-100: #dcfce9;
    --success-200: #bbf7d4;
    --success-500: #22c55e;     /* Fresh green */
    --success-600: #16a34a;
    --success-700: #15803d;

    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-500: #f59e0b;     /* Warm amber */
    --warning-600: #d97706;
    --warning-700: #b45309;

    --danger-50: #fff1f2;
    --danger-100: #ffe4e6;
    --danger-200: #fecdd3;
    --danger-500: #f472b6;      /* Soft pink instead of red - less scary! */
    --danger-600: #db2777;
    --danger-700: #be185d;

    --info-50: #f0f9ff;
    --info-100: #e0f2fe;
    --info-200: #bae6fd;
    --info-500: #0ea5e9;        /* Sky blue */
    --info-600: #0284c7;
    --info-700: #0369a1;

    /* Spacing */
    --spacing-0: 0;
    --spacing-px: 1px;
    --spacing-0\.5: 0.125rem;
    --spacing-1: 0.25rem;
    --spacing-1\.5: 0.375rem;
    --spacing-2: 0.5rem;
    --spacing-2\.5: 0.625rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;

    /* Radius - Super Round and Friendly */
    --radius-none: 0;
    --radius-sm: 0.5rem;        /* 8px */
    --radius-md: 0.875rem;      /* 14px */
    --radius-lg: 1.125rem;      /* 18px */
    --radius-xl: 1.5rem;        /* 24px */
    --radius-2xl: 2rem;         /* 32px */
    --radius-3xl: 2.5rem;       /* 40px - for big cards/modals */
    --radius-full: 9999px;

    /* Shadows - Soft, diffused, friendly */
    --shadow-none: none;
    --shadow-xs: 0 0 3px 0 rgb(31 28 25 / 0.04);
    --shadow-sm: 0 0 8px -2px rgb(31 28 25 / 0.08);
    --shadow-md: 0 0 20px -4px rgb(31 28 25 / 0.1);
    --shadow-lg: 0 0 25px -5px rgb(31 28 25 / 0.11);
    --shadow-xl: 0 0 40px -8px rgb(31 28 25 / 0.12);
    --shadow-xxl: 0 0 60px -12px rgb(31 28 25 / 0.15);

    /* Inset shadows (for inputs on page/card surfaces) */
    --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-inset-strong: inset 0 1px 5px rgba(0, 0, 0, 0.08);

    /* Playful colored shadows */
    --shadow-delight: 0 8px 24px -6px var(--delight-400);
    --shadow-soft: 0 4px 20px 0 rgb(31 28 25 / 0.06);
    --shadow-accent: 0 8px 24px -6px rgba(107, 77, 154, 0.4);
    --shadow-accent-sm: 0 2px 12px -2px rgba(107, 77, 154, 0.25);

    /* Motion - Bouncy and Fun */
    --duration-instant: 50ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;

    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-out: cubic-bezier(0, 0, 0.2, 1);
    --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --easing-playful: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Focus */
    --focus-ring-width: 3px;
    --focus-ring-offset: 3px;

    /* ============================================
       DEFAULT ACCENT (Shift Brand - Warm Slate)
       ============================================ */

    /* --accent-50: #f8f7f6;
    --accent-100: #f0edea;
    --accent-200: #e0dbd5;
    --accent-300: #c5bcb1;
    --accent-400: #a69a8b;
    --accent-500: #8a7c6a;
    --accent-600: #6b5d4d;
    --accent-700: #574c40;
    --accent-800: #483f36;
    --accent-900: #3d362f; */

    /* Slate Indigo - Muted & professional */
    --accent-50: #f4f4f6;
    --accent-100: #e9e9ec;
    --accent-200: #d2d2db;
    --accent-300: #aeaec1;
    --accent-400: #79799f;
    --accent-500: #5c5c85;
    --accent-600: #49496a;   /* Primary */
    --accent-700: #3e3e5b;
    --accent-800: #303045;
    --accent-900: #242433;

    /* ============================================
       SEMANTIC TOKENS
       ============================================ */

    /* Background - Warmer page background */
    --bg-page: var(--neutral-50);
    --bg-surface: var(--neutral-0);
    --bg-surface-raised: var(--neutral-0);
    --bg-muted: var(--neutral-100);
    --bg-subtle: var(--neutral-50);
    --bg-inverse: var(--neutral-900);
    --bg-gradient-warm: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
    --bg-gradient-playful: linear-gradient(135deg, var(--accent-50) 0%, var(--delight-50) 100%);

    /* Text */
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-tertiary: var(--neutral-400);
    --text-inverse: var(--neutral-0);
    --text-link: var(--accent-600);
    --text-link-hover: var(--accent-700);

    /* Border - Softer, less prominent */
    --border-default: var(--neutral-200);
    --border-subtle: var(--neutral-150);
    --border-strong: var(--neutral-300);
    --border-focus: var(--accent-500);

    /* Icon */
    --icon-default: var(--neutral-500);
    --icon-muted: var(--neutral-400);
    --icon-emphasis: var(--neutral-700);

    /* Accent (Semantic) */
    --accent-primary: var(--accent-600);
    --accent-hover: var(--accent-700);
    --accent-active: var(--accent-800);
    --accent-muted: var(--accent-100);
    --accent-subtle: var(--accent-50);
    --accent-contrast: var(--neutral-0);


    /* Status Colors */
    --status-success-bg: var(--success-50);
    --status-success-bg-strong: var(--success-100);
    --status-success-text: var(--success-700);
    --status-success-icon: var(--success-500);
    --status-success-border: var(--success-200);

    --status-warning-bg: var(--warning-50);
    --status-warning-bg-strong: var(--warning-100);
    --status-warning-text: var(--warning-700);
    --status-warning-icon: var(--warning-500);
    --status-warning-border: var(--warning-200);

    --status-danger-bg: var(--danger-50);
    --status-danger-bg-strong: var(--danger-100);
    --status-danger-text: var(--danger-700);
    --status-danger-icon: var(--danger-500);
    --status-danger-border: var(--danger-200);

    --status-info-bg: var(--info-50);
    --status-info-bg-strong: var(--info-100);
    --status-info-text: var(--info-700);
    --status-info-icon: var(--info-500);
    --status-info-border: var(--info-200);

    /* Controls (Inputs) - Flat Design */
    --control-bg: var(--bg-muted);
    --control-bg-hover: var(--neutral-150);
    --control-bg-focus: var(--bg-surface);
    --control-bg-disabled: var(--neutral-100);
    --control-error-bg: var(--status-danger-bg);
    --control-placeholder: var(--neutral-400);
    --control-text: var(--neutral-900);
    --control-text-disabled: var(--neutral-400);
    --control-focus-ring: inset 0 0 0 2px var(--accent-300);
    --control-error-ring: inset 0 0 0 2px var(--status-danger-border);

    /* Actions (Buttons) */
    --action-primary-bg: var(--accent-primary);
    --action-primary-bg-hover: var(--accent-hover);
    --action-primary-bg-active: var(--accent-active);
    --action-primary-text: var(--accent-contrast);

    --action-secondary-bg: #e7e6ea;
    --action-secondary-bg-hover: #d8d6de;
    --action-secondary-bg-active: #cbc8d3;
    --action-secondary-glow: #d8d5e4;
    --action-secondary-text: var(--neutral-700);
    --action-secondary-border: var(--neutral-250, #e0dcd5);

    /* Close button (card/modal dismiss) */
    --control-close-bg: #e7e6ea;
    --control-close-bg-hover: #e0dde8;

    /* Card-context borders (transparent overlays on white surfaces) */
    --border-card-input: rgba(40, 40, 40, 0.13);
    --border-card-subtle: rgba(187, 187, 187, 0.23);

    --action-tertiary-bg: transparent;
    --action-tertiary-bg-hover: var(--neutral-100);
    --action-tertiary-bg-active: var(--neutral-150);
    --action-tertiary-text: var(--neutral-600);

    --action-danger-bg: var(--danger-600);
    --action-danger-bg-hover: var(--danger-700);
    --action-danger-bg-active: var(--danger-700);
    --action-danger-text: var(--neutral-0);

    /* Navigation */
    --nav-bg: var(--neutral-0);
    --nav-item-bg: transparent;
    --nav-item-bg-hover: var(--neutral-100);
    --nav-item-bg-active: var(--accent-50);
    --nav-item-text: var(--neutral-600);
    --nav-item-text-hover: var(--neutral-900);
    --nav-item-text-active: var(--accent-700);

    /* Component Sizing */
    --button-height-xs: 1.75rem;
    --button-height-sm: 2.25rem;
    --button-height-md: 2.75rem;
    --button-height-lg: 3.25rem;
    --button-height-xl: 3.5rem;
    --button-height-xxl: 4rem;

    --input-height-sm: 2.5rem;
    --input-height-md: 3rem;
    --input-height-lg: 3.5rem;

    /* ============================================
       THEME TOKENS (formerly in _default-theme.css)
       ============================================ */

    /* Canvas */
    --canvas-bg: #f7f7f7;

    /* Sidebar */
    --sidebar-bg: linear-gradient(
        180deg,
        var(--accent-500) 0%,
        var(--accent-600) 50%,
        var(--accent-800) 100%
    );
    --sidebar-text: rgba(255, 255, 255, 0.92);
    --sidebar-text-muted: rgba(255, 255, 255, 0.62);
    --sidebar-item-hover: rgba(255, 255, 255, 0.12);
    --sidebar-item-active-bg: rgba(255, 255, 255, 0.20);
    --sidebar-item-active-text: #ffffff;
    --sidebar-separator: rgba(255, 255, 255, 0.12);
    --sidebar-logo-bg: rgba(255, 255, 255, 0.22);
    --sidebar-logo-text: #ffffff;
    --sidebar-shadow: var(--shadow-accent);

    /* Cards & Tables */
    --card-bg: #ffffff;
    /* --card-shadow: 0 0 1px #bbb;
    --card-shadow-hover: 0 8px 28px -6px rgba(90, 90, 180, 0.16),
                         0 2px 6px 0 rgba(90, 90, 180, 0.06); */
    --table-bg: #ffffff;
    --table-header-border: rgba(90, 90, 180, 0.10);
    --table-row-border: rgba(90, 90, 180, 0.06);
    --table-row-hover: rgba(90, 90, 180, 0.03);

    /* Dividers */
    --divider-color: rgba(90, 90, 180, 0.08);
    --divider-strong: rgba(90, 90, 180, 0.14);

    /* Focus & Interactive */
    --interactive-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 35%, transparent);
    --interactive-hover-lift: translateY(-3px);
    --interactive-hover-tint: color-mix(in srgb, var(--accent-primary) 4%, transparent);

    /* Header */
    --header-bg: #ffffff;
    --header-border: rgba(90, 90, 180, 0.08);

    /* Glass morphism */
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-bg-strong: rgba(255, 255, 255, 0.8);
    --glass-blur: blur(10px);

    /* Overlays */
    --overlay-light: rgba(0, 0, 0, 0.15);
    --overlay-medium: rgba(0, 0, 0, 0.5);

    /* Menu bar */
    --menu-bg: #f3f3f5;
    --menu-bg-scrolled: #e0dfe9;
    --menu-link-bg-hover: #d2cfdd;
}

/* ============================================
   BASE STYLES
   ============================================ */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--canvas-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    user-select: none;
}

/* Soft glowing gradient background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(
            ellipse 120% 60% at 20% 95%,
            rgba(230, 210, 235, 0.45) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 100% 50% at 80% 95%,
            rgba(255, 220, 210, 0.40) 0%,
            transparent 55%
        ),
        radial-gradient(
            ellipse 80% 40% at 50% 95%,
            rgba(255, 200, 220, 0.35) 0%,
            transparent 50%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(250, 245, 250, 0.4) 70%,
            rgba(245, 240, 248, 0.6) 100%
        );
}

/* ============================================
   SCROLLBAR - Always visible, custom styled
   ============================================ */

html {
    overflow-y: scroll;
    scrollbar-color: var(--neutral-300) transparent;
    scrollbar-width: thin;
}

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-400);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Subtle wallpaper pattern - playful silhouettes */
/* body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23435862' fill-rule='evenodd'%3E%3Ccircle cx='20' cy='20' r='8'/%3E%3Crect x='70' y='10' width='16' height='16' rx='4'/%3E%3Ccircle cx='100' cy='50' r='6'/%3E%3Cpath d='M30 60 L38 75 L22 75 Z'/%3E%3Crect x='55' y='55' width='12' height='12' rx='6'/%3E%3Ccircle cx='20' cy='95' r='5'/%3E%3Cpath d='M80 85 a10 10 0 1 1 0 20 a10 10 0 1 1 0 -20 M80 90 a5 5 0 1 0 0 10 a5 5 0 1 0 0 -10'/%3E%3Crect x='100' y='90' width='10' height='10' rx='2'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 120px 120px;
} */

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

h1 {
    font-size: var(--font-4xl);
    font-weight: var(--font-extrabold);
    letter-spacing: var(--tracking-tighter);
}

h2 {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
}

h3 {
    font-size: var(--font-2xl);
}

h4 {
    font-size: var(--font-xl);
}

h5 {
    font-size: var(--font-lg);
}

h6 {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
}

p {
    margin: 0;
    /* max-width: 60ch; */
}

a {
    color: var(--text-link);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--easing-default);
}

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

/* ============================================
   AVATARS - Round and Bouncy
   ============================================ */

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-100) 0%, var(--accent-200) 100%);
    color: var(--accent-700);
    font-weight: var(--font-bold);
    overflow: hidden;
    transition: transform var(--duration-fast) var(--easing-bounce);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar:hover {
    transform: scale(1.08);
}

.avatar-xs { width: 1.75rem; height: 1.75rem; font-size: var(--font-xs); }
.avatar-sm { width: 2.25rem; height: 2.25rem; font-size: var(--font-xs); }
.avatar-md { width: 2.75rem; height: 2.75rem; font-size: var(--font-sm); }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: var(--font-base); }
.avatar-xl { width: 5rem; height: 5rem; font-size: var(--font-xl); }

.avatar-ring {
    box-shadow: 0 0 0 3px var(--bg-surface), 0 0 0 5px var(--accent-400);
}

/* ============================================
   NAVIGATION - Clean and Simple
   ============================================ */

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    background: var(--nav-item-bg);
    color: var(--nav-item-text);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all var(--duration-fast) var(--easing-default);
}

.nav-item:hover {
    background: var(--nav-item-bg-hover);
    color: var(--nav-item-text-hover);
    text-decoration: none;
}

.nav-item.is-active {
    background: var(--nav-item-bg-active);
    color: var(--nav-item-text-active);
    font-weight: var(--font-semibold);
}

/* ============================================
   DIVIDERS
   ============================================ */

.divider {
    border: none;
    border-top: 2px solid var(--divider-color);
    margin: var(--spacing-6) 0;
}

.divider-subtle {
    border-top-width: 1px;
}

/* Divider with text */
.divider-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    color: var(--text-tertiary);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
}

.divider-text::before,
.divider-text::after {
    content: '';
    flex: 1;
    border-top: 2px solid var(--divider-color);
}

/* ============================================
   DECORATIVE ELEMENTS
   Playful accents for pages
   ============================================ */

/* Floating gradient blob */
.deco-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
}

.deco-blob-accent {
    background: var(--accent-200);
}

.deco-blob-delight {
    background: var(--delight-200);
}

/* Subtle pattern background */
.bg-dots {
    background-image: radial-gradient(var(--neutral-200) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Gradient text */
.text-gradient {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--delight-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   ANIMATIONS - Playful
   ============================================ */

@keyframes bounce-in {
    0% { transform: scale(0.9); opacity: 0; }
    60% { transform: scale(1.03); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fade-up {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-bounce-in { animation: bounce-in 0.4s var(--easing-bounce) forwards; }
.animate-fade-up { animation: fade-up 0.3s var(--easing-out) forwards; }
.animate-wiggle { animation: wiggle 0.5s var(--easing-bounce); }
.animate-pulse { animation: pulse-soft 2s var(--easing-in-out) infinite; }
.animate-float { animation: float 3s var(--easing-in-out) infinite; }
.shake { animation: shake 0.4s var(--easing-default); }

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--neutral-100) 25%,
        var(--neutral-200) 50%,
        var(--neutral-100) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-inverse { color: var(--text-inverse); }
.text-accent { color: var(--accent-primary); }
.text-success { color: var(--status-success-text); }
.text-warning { color: var(--status-warning-text); }
.text-danger { color: var(--status-danger-text); }
.text-delight { color: var(--delight-600); }

/* Font Sizes */
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-3xl { font-size: var(--font-3xl); }

/* Font Weights */
.font-regular { font-weight: var(--font-regular); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }

/* Background Colors */
.bg-page { background: var(--bg-page); }
.bg-surface { background: var(--bg-surface); }
.bg-muted { background: var(--bg-muted); }
.bg-subtle { background: var(--bg-subtle); }
.bg-inverse { background: var(--bg-inverse); }
.bg-accent { background: var(--accent-muted); }
.bg-delight { background: var(--delight-50); }

/* Border Radius */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-soft { box-shadow: var(--shadow-soft); }

/* Layout Containers */
.page { max-width: 1000px; margin: 0 auto; padding: var(--spacing-8); }
.page-narrow { max-width: 600px; margin: 0 auto; padding: var(--spacing-8); }
.page-wide { max-width: 1200px; margin: 0 auto; padding: var(--spacing-8); }

/* Spacing Sections */
.section { margin-bottom: var(--spacing-12); }
.group { margin-bottom: var(--spacing-8); }

/* Flex Layouts */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4); }
.stack { display: flex; flex-direction: column; gap: var(--spacing-4); }
.stack-narrow { max-width: 500px; }

/* Grid Layouts */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-6); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-6); }

/* Light Label */
.label-light {
    font-size: var(--font-xs);
    font-family: var(--font-mono);
    color: var(--text-tertiary);
}

/* ============================================
   SIDEBAR LAYOUT
   ============================================ */

.sidebar-layout__main {
    background: var(--canvas-bg);
}

.sidebar-layout__sidebar {
    background: var(--sidebar-bg);
    border-right: none;
    box-shadow: var(--sidebar-shadow);
}

.sidebar-title {
    color: var(--sidebar-text);
}

.sidebar-logo {
    background: var(--sidebar-logo-bg);
    color: var(--sidebar-logo-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-section-title {
    color: var(--sidebar-text-muted);
}

.sidebar-layout__sidebar .nav-item {
    color: var(--sidebar-text);
}

.sidebar-layout__sidebar .nav-item:hover {
    background: var(--sidebar-item-hover);
    color: var(--sidebar-item-active-text);
}

.sidebar-layout__sidebar .nav-item.is-active {
    background: var(--sidebar-item-active-bg);
    color: var(--sidebar-item-active-text);
}

.sidebar-layout__sidebar-footer {
    border-top-color: var(--sidebar-separator);
}

.user-menu:hover {
    background: var(--sidebar-item-hover);
}

.user-name {
    color: var(--sidebar-text);
}

.user-email {
    color: var(--sidebar-text-muted);
}

/* Header */
.sidebar-layout__header {
    background: var(--header-bg);
    border-bottom-color: var(--header-border);
}

/* Cards */
.card,
.stat-card,
/* .activity-wrapper {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    border: none;
} */

.card.is-interactive:hover,
/* .stat-card:hover {
    box-shadow: var(--card-shadow-hover);
} */

/* Tables */
.table th {
    border-bottom-color: var(--table-header-border);
}

.table td {
    border-bottom-color: var(--table-row-border);
}

.table tbody tr:hover td {
    background: var(--table-row-hover);
}

/* Focus Ring (Buttons / Interactive) */
.btn:focus-visible {
    outline: none;
    box-shadow: var(--interactive-focus-ring);
}

.card.is-interactive:focus-visible,
.toggle-switch:focus-visible,
.chip:focus-visible {
    outline: none;
    box-shadow: var(--interactive-focus-ring);
}

.activity-header {
    border-bottom-color: var(--divider-color);
}

/* Task/Schedule Items */
.task-item {
    box-shadow: var(--shadow-sm);
}

.task-item:hover {
    box-shadow: var(--shadow-md);
}

.schedule-item {
    box-shadow: var(--shadow-sm);
}

/* Integration Rows */
.integration-row {
    background: var(--control-bg);
}

.integration-row:hover {
    background: var(--control-bg-hover);
}

.integration-row.connected {
    background: var(--accent-subtle);
}

/* Auth / Wizard Left Panel */
.split-panel-layout__left {
    background: linear-gradient(
        135deg,
        var(--accent-500) 0%,
        var(--accent-600) 40%,
        var(--accent-800) 100%
    );
}

.split-panel-layout__left .brand-name,
.split-panel-layout__left .hero-content h1,
.split-panel-layout__left .step-title {
    color: #ffffff;
}

.split-panel-layout__left .hero-content p,
.split-panel-layout__left .step-description,
.split-panel-layout__left .step-label {
    color: rgba(255, 255, 255, 0.78);
}

.split-panel-layout__left .support-info {
    color: rgba(255, 255, 255, 0.6);
}

.split-panel-layout__left .support-info a {
    color: rgba(255, 255, 255, 0.9);
}

.split-panel-layout__left .testimonial {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
}

.split-panel-layout__left .testimonial-quote {
    color: rgba(255, 255, 255, 0.92);
}

.split-panel-layout__left .testimonial-name {
    color: #ffffff;
}

.split-panel-layout__left .testimonial-role {
    color: rgba(255, 255, 255, 0.7);
}

.split-panel-layout__left .hero-illustration {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
}

.split-panel-layout__left .icon-bubble {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.split-panel-layout__left .step-segment {
    background: rgba(255, 255, 255, 0.22);
}

.split-panel-layout__left .step-segment.completed,
.split-panel-layout__left .step-segment.active {
    background: #ffffff;
}

.split-panel-layout__left::before {
    background: rgba(255, 255, 255, 0.1);
}

.split-panel-layout__left::after {
    background: var(--accent-200);
    opacity: 0.15;
}
 /*
 * Shift Design System — Mobile Overrides
 * Phone-only adaptations (≤600px) for the frontend app.
 *
 * Cards become full-width, flush surfaces separated by dividers
 * instead of floating with shadows. The page reads as a single
 * continuous white surface — closer to a native mobile feel.
 *
 * Requires: shift-core.css, layouts.css, cards.css
 */

@media (max-width: 600px) {

    /* 1. Remove outer padding — cards go edge-to-edge */
    .showcase-layout.showcase-layout,
    .page-wide {
        padding: 0;
    }

    /* 2. Cards: halve inner padding, no rounding (flush to edges) */
    .showcase-layout .card,
    .page-wide .card {
        border-radius: 0;
        padding: var(--spacing-3);
        margin-bottom: var(--spacing-4);
    }

    /* Banner: halve padding, adjust negative margin to match card padding, remove top rounding */
    .showcase-layout .card-banner,
    .page-wide .card-banner,
    .card-banner-card > [widget]:first-child > .card-banner,
    .card-banner-card > .card-banner:first-child {
        padding: var(--spacing-4) var(--spacing-4) var(--spacing-4);
        margin-left: calc(-1 * var(--spacing-3));
        margin-right: calc(-1 * var(--spacing-3));
        border-radius: 0;
    }

    /* Product rows: tighter side padding */
    .showcase-layout .products-table-row,
    .page-wide .products-table-row {
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
    }

    .showcase-layout .card-header {
        margin-bottom: var(--spacing-2);
    }

    /* Page header becomes a visible gradient card on mobile */
    .showcase-header.card {
        background: linear-gradient(135deg, var(--accent-500), var(--accent-900));
        box-shadow: var(--shadow-md);
        color: white;
        padding-top: var(--spacing-3);
        padding-bottom: var(--spacing-3);
    }

    .showcase-header .showcase-header-title,
    .showcase-header .showcase-header-description {
        color: white;
    }

    /* 3. Edit mode cards: full-width flush on mobile */
    .showcase-layout .card.above_mask {
    }

    /* 4. Footer: stack vertically on mobile */
    .site-footer__inner {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    /* 5. Hide helper class on mobile */
    .mobile-hide {
        display: none;
    }
}
 #Main {
    margin-top: 4.5rem;
    min-height: calc(100vh - 4rem);
}

#Menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4.5rem;
    z-index: 100;
}

.menu {
    height: 100%;
    background: var(--menu-bg);
    transition: background var(--duration-normal) var(--easing-default), backdrop-filter var(--duration-normal) var(--easing-default);


    &.scrolled {
        background: var(--menu-bg-scrolled);
    }

    .inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-8);
        position: relative;
        gap: 40px;

        .menu-left {
            display: flex;
            align-items: center;
            gap: var(--spacing-8);
        }

        .menu-logo {
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .menu-left-nav {
            display: flex;
            align-items: center;
        }

        .menu-logo svg {
            height: 3.5rem;
            width: auto;
        }

        .menu-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Nav aligned to green line (card content alignment) */
        .menu-nav-aligned {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            max-width: calc(100% - var(--spacing-6) * 2);
            padding-left: calc(var(--spacing-8) + var(--spacing-6));
            display: flex;
            align-items: center;
            box-sizing: border-box;
        }

        .menu-right {
            display: flex;
            align-items: center;
            gap: var(--spacing-4);
            margin-left: auto;
        }

        .product-type-filters {
            display: flex;
            align-items: center;
            gap: var(--spacing-2);
        }

        .nav-link {
            padding: var(--spacing-2) var(--spacing-5);
            border-radius: var(--radius-full);
            font-size: var(--font-sm);
            font-weight: var(--font-semibold);
            background: var(--bg-surface);
            color: var(--neutral-700);
            cursor: pointer;
            user-select: none;
            transition: background-color var(--duration-normal) var(--easing-default), color var(--duration-normal) var(--easing-default);
            text-decoration: none;

            &:hover {
                background: var(--menu-link-bg-hover);
                text-decoration: none;
            }

            &.selected {
                background: var(--accent-primary);
                color: var(--accent-contrast);
            }

            &.disabled {
                opacity: 0.3;
                pointer-events: none;
                cursor: default;
            }
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: var(--spacing-4);
        }

        .profile {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .avatar {
                width: 2.5rem;
                height: 2.5rem;
                border-radius: var(--radius-full);
                overflow: hidden;
                cursor: pointer;
                transition: transform var(--duration-fast) var(--easing-default), box-shadow var(--duration-fast) var(--easing-default);
                border: 2px solid var(--accent-200);

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                &:hover {
                    transform: scale(1.05);
                    box-shadow: 0 0 0 3px var(--accent-100);
                }
            }
        }
    }

    &.scrolled .nav-link:not(.selected) {
        background: var(--menu-bg);
    }
}

/* Wide screens: float logo outside the content column */
@media (min-width: 1300px) {
    .menu .inner .menu-left {
        position: fixed;
        left: var(--spacing-6);
        top: 0;
        height: 4.5rem;
        z-index: 101;
    }
}

/* User Menu Modal */
.usermenu {
    position: fixed;
    top: -16px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 5.5rem 20px 0 0;

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: -2000px;
        background: var(--overlay-light);
        z-index: 999;
    }

    .modal {
        background: var(--bg-surface);
        padding: var(--spacing-1\.5) 0 0;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        width: 280px;
        min-height: 45px;
        position: relative;
        z-index: 1001;
        overflow: hidden;

        .user {
            display: grid;
            grid-template-columns: 36px 1fr;
            align-items: center;
            gap: var(--spacing-3);
            padding: var(--spacing-2) var(--spacing-5);
            cursor: pointer;
            transition: background-color var(--duration-fast) var(--easing-default);

            .thumb {
                width: 36px;
                height: 36px;
                border-radius: var(--radius-full);
            }

            .plus-avatar,
            .minus-avatar {
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--accent-50);
                color: var(--accent-400);
                font-size: var(--font-xl);
                font-weight: 300;
            }

            .minus-avatar {
                background: none;
                filter: grayscale(0.6);
                opacity: 0.5;
            }

            .username {
                font-size: 0.9375rem;
                font-weight: var(--font-medium);
                color: var(--accent-800);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                .address {
                    display: block;
                    font-size: var(--font-xs);
                    font-weight: var(--font-regular);
                    color: var(--accent-400);
                    margin-top: 2px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    max-width: 180px;
                }
            }

            &:hover {
                background-color: var(--accent-100);
            }

            &.placeholder {
                cursor: default;
                &:hover { background-color: transparent; }
                .username { min-height: 1.2em; }
            }

            &.selected {
                background-color: transparent;
                cursor: default;

                &:hover {
                    background-color: transparent;
                }
            }

            &.add-account {
                padding-bottom: var(--spacing-3);

                .username {
                    font-weight: var(--font-regular);
                    color: var(--accent-600);
                }
            }

            &.logout {
                padding-top: var(--spacing-2);
                background-color: var(--accent-50);

                &:hover {
                    background-color: var(--accent-100);
                }

                .username {
                    font-weight: var(--font-regular);
                    color: var(--accent-600);
                }

                &:last-child {
                    padding-bottom: 0.7rem;
                }
            }

            
        }

        .loading {
            padding: var(--spacing-4) var(--spacing-5);
            color: var(--accent-600);
            font-size: 0.9375rem;
            opacity: 0.5;
            cursor: default;
        }
    }
}

/* Mobile nav - hidden by default */
.menu-center-mobile,
.product-mobile-dropdown,
.mobile-nav-overlay {
    display: none;
}

/* Shared mobile dropdown pill style */
.menu-center-mobile,
.product-mobile-dropdown {
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--neutral-700);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--duration-normal) var(--easing-default);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;

    &:hover {
        background: var(--menu-link-bg-hover);
    }

    .mobile-nav-arrow,
    .product-mobile-arrow {
        transition: transform var(--duration-normal) var(--easing-default);
    }
}

.menu.scrolled .menu-center-mobile,
.menu.scrolled .product-mobile-dropdown {
    background: var(--menu-bg);
}

/* Shared overlay styles */
.mobile-nav-overlay {
    position: fixed;
    top: 4.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: var(--menu-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mobile-nav-panel {
    padding: var(--spacing-2) 0;
}

.mobile-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5) var(--spacing-6);
    color: var(--neutral-700);
    font-size: var(--font-lg);
    font-weight: var(--font-medium);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--duration-fast) var(--easing-default);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    border-bottom: 1px solid var(--neutral-200);

    &:last-child {
        border-bottom: none;
    }

    &:hover {
        background: var(--accent-50);
        text-decoration: none;
    }

    &.selected {
        color: var(--accent-primary);

        svg {
            color: var(--accent-primary);
        }
    }

    &.disabled {
        opacity: 0.3;
        pointer-events: none;
    }

    svg {
        color: var(--neutral-300);
        flex-shrink: 0;
    }
}

/* Customer type: dropdown at 1100px */
@media (max-width: 1100px) {
    .menu .inner .menu-left-nav {
        display: none;
    }

    .menu .inner {
        gap: var(--spacing-4);
    }

    .menu-center-mobile {
        display: flex;
    }

    .menu.mobile-nav-open .mobile-nav-arrow {
        transform: rotate(180deg);
    }

    .menu.mobile-nav-open .mobile-nav-overlay[data-type="customer"] {
        display: block;
    }
}

/* Product type: dropdown at 800px */
@media (max-width: 800px) {
    .menu .inner .product-type-filters {
        display: none;
    }

    .product-mobile-dropdown {
        display: flex;
    }

    .menu.product-nav-open .product-mobile-arrow {
        transform: rotate(180deg);
    }

    .menu.product-nav-open .mobile-nav-overlay[data-type="product"] {
        display: block;
    }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .menu .inner {
        padding: 0 var(--spacing-4);

        .product-type-filters .nav-link {
            padding: var(--spacing-2) var(--spacing-3);
            font-size: var(--font-xs);
        }
    }

    .usermenu {
        padding: 5.5rem 10px 0 0;

        .modal {
            width: 260px;
        }
    }
}

@media (max-width: 600px) {
    .menu .inner .menu-center {
        display: none;
    }

    .usermenu {
        top: 4.5rem;
        padding: 0;
        justify-content: stretch;
        align-items: stretch;

        .mask {
            display: none;
        }

        .modal {
            width: 100%;
            border-radius: 0;
            box-shadow: none;
            padding: var(--spacing-2) 0 0;

            .user {
                grid-template-columns: 44px 1fr;
                gap: var(--spacing-4);
                padding: var(--spacing-4) var(--spacing-6);
                border-bottom: 1px solid var(--neutral-200);

                .thumb {
                    width: 44px;
                    height: 44px;
                }

                .username {
                    font-size: var(--font-lg);

                    .address {
                        font-size: var(--font-sm);
                        max-width: none;
                    }
                }

                &.add-account {
                    padding-bottom: var(--spacing-4);
                }

                &.logout {
                    background-color: transparent;
                    padding-top: var(--spacing-4);

                    &:hover {
                        background-color: var(--accent-50);
                    }

                    &:last-child {
                        padding-bottom: var(--spacing-4);
                    }
                }
            }
        }
    }
}
 /* ============================================================
   Shift Design System — Layouts

   High-level page layout patterns. Each layout defines only
   the structural grid/flow and its permanent child regions.
   Components, content styling, and decoration live elsewhere.
   ============================================================ */


/* ----------------------------------------------------------
   Showcase Layout
   Single centered column for component galleries and demos.
   ---------------------------------------------------------- */

.showcase-layout {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-8);
}


/* ----------------------------------------------------------
   Sidebar Layout
   App shell with a fixed sidebar, header bar, and scrollable
   main content area. Collapses to header + main on mobile.
   ---------------------------------------------------------- */

.sidebar-layout {
    display: grid;
    grid-template-areas:
        "sidebar header"
        "sidebar main";
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

@media (max-width: 900px) {
    .sidebar-layout {
        grid-template-areas:
            "header"
            "main";
        grid-template-columns: 1fr;
    }

    .sidebar-layout > .sidebar-layout__sidebar {
        display: none;
    }
}

.sidebar-layout__sidebar {
    grid-area: sidebar;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
}

.sidebar-layout__sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-8);
}

.sidebar-layout__sidebar-nav {
    flex: 1;
}

.sidebar-layout__sidebar-footer {
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border-subtle);
}

.sidebar-layout__header {
    grid-area: header;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--spacing-5) var(--spacing-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-layout__main {
    grid-area: main;
    background: var(--bg-page);
    padding: var(--spacing-8);
    overflow-y: auto;
}


/* ----------------------------------------------------------
   Split-Panel Layout
   Two equal-width panels side by side (e.g. auth, onboarding).
   Left panel collapses on mobile, right panel fills the screen.
   ---------------------------------------------------------- */

.split-panel-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

@media (max-width: 900px) {
    .split-panel-layout {
        grid-template-columns: 1fr;
    }

    .split-panel-layout > .split-panel-layout__left {
        display: none;
    }
}

.split-panel-layout__left {
    padding: var(--spacing-12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.split-panel-layout__right {
    background: var(--bg-surface);
    padding: var(--spacing-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* ----------------------------------------------------------
   Centered Layout
   Full-height centered single column for landing/auth pages.
   ---------------------------------------------------------- */

.centered-layout {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-8);
    padding-bottom: 15vh;
}

.centered-layout--raised {
    justify-content: flex-start;
    padding-top: 20vh;
}

.centered-layout__content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-8);
}

.centered-layout__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    width: 100%;
    max-width: 280px;
}

/* ----------------------------------------------------------
   Shift Logo
   Reusable brand logo with accent dot on the "i".
   Size variants: --sm (menu), default (forms), --lg (landing)
   ---------------------------------------------------------- */

.shift-logo {
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    color: var(--neutral-900);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--easing-default);
}

.shift-logo:hover {
    text-decoration: none;
    opacity: 0.8;
}

.shift-logo .accent-dot {
    position: relative;
}

.shift-logo .accent-dot::before {
    content: '';
    position: absolute;
    top: 0.34em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.22em;
    height: 0.22em;
    background: var(--accent-primary);
    border-radius: 50%;
}

/* Size variants */
.shift-logo--sm {
    font-size: 1.5rem;
}

.shift-logo--menu {
    font-size: 1.75rem;
}

.shift-logo--md {
    font-size: clamp(2rem, 4vw, 2.5rem);
}

.shift-logo--lg {
    font-size: clamp(2.75rem, 6vw, 3.5rem);
}

/* ----------------------------------------------------------
   Site Footer
   Always sits just below the viewport — scroll to reveal.
   ---------------------------------------------------------- */

.site-footer {
    position: relative;
    z-index: 1;
    padding: var(--spacing-12) var(--spacing-8);
}

.site-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-footer__links {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.site-footer__links a {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    text-decoration: none;
    transition: color var(--duration-fast) var(--easing-default);
}

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

.site-footer__separator {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--neutral-300);
}

.site-footer__company {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}


/* Legacy alias for centered-layout */
.centered-layout__heading {
    font-family: var(--font-sans);
    font-size: clamp(2.75rem, 6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
    color: var(--neutral-900);
}

.centered-layout__heading .accent-dot {
    position: relative;
}

.centered-layout__heading .accent-dot::before {
    content: '';
    position: absolute;
    top: 0.34em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.22em;
    height: 0.22em;
    background: var(--accent-primary);
    border-radius: 50%;
}

.centered-layout__tagline {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--neutral-500);
    margin: 0;
    max-width: 400px;
    line-height: 1.65;
    letter-spacing: 0;
}

@media (max-width: 600px) {
    .centered-layout__heading {
        font-size: 2.5rem;
    }

    .centered-layout__tagline {
        font-size: 1rem;
    }
}