/* =============================================================================
   SlideMagic design system — light / modern refresh (2026)
   -----------------------------------------------------------------------------
   - Tokens (:root) and .sm-* components are GLOBAL but inert: they only take
     effect on elements that opt in via an sm- class.
   - The light theme + restyled shared chrome (nav / footer) apply ONLY inside
     the `.sm-site` scope, so legacy dark pages (app / admin) are untouched
     until they are converted page by page.
   - Font (Inter) is loaded in views/partials/top.ejs.
   ========================================================================== */

:root {
    /* Brand — SlideMagic blue, extended into a ramp */
    --sm-brand-50:  #EAF6FC;
    --sm-brand-100: #CDEAF7;
    --sm-brand-300: #6FC0E8;
    --sm-brand-500: #2DA2DF;   /* the classic SlideMagic blue — accent */
    --sm-brand-600: #1689C6;
    --sm-brand-700: #0F6E9F;   /* interactive / filled buttons (AA on white) */
    --sm-brand-800: #0B567C;   /* text on light-blue fills */

    /* Neutrals — cool slate */
    --sm-slate-50:  #F8FAFC;
    --sm-slate-100: #F1F5F9;
    --sm-slate-200: #E2E8F0;
    --sm-slate-300: #CBD5E1;
    --sm-slate-400: #94A3B8;
    --sm-slate-500: #64748B;
    --sm-slate-600: #475569;
    --sm-slate-700: #334155;
    --sm-slate-800: #1E293B;
    --sm-slate-900: #0F172A;

    /* Semantic */
    --sm-success: #16A34A;
    --sm-warning: #D97706;
    --sm-danger:  #DC2626;

    /* Roles */
    --sm-bg:            #FFFFFF;
    --sm-bg-subtle:     var(--sm-slate-50);
    --sm-surface:       #FFFFFF;
    --sm-border:        var(--sm-slate-200);
    --sm-text:          var(--sm-slate-600);
    --sm-heading:       var(--sm-slate-900);
    --sm-muted:         var(--sm-slate-400);
    --sm-accent:        var(--sm-brand-500);
    --sm-primary:       var(--sm-brand-700);
    --sm-primary-hover: var(--sm-brand-800);

    /* Shape */
    --sm-radius-sm:   6px;
    --sm-radius:      10px;
    --sm-radius-lg:   16px;
    --sm-radius-pill: 999px;

    /* Elevation */
    --sm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --sm-shadow:    0 4px 14px rgba(15, 23, 42, .08);
    --sm-shadow-lg: 0 18px 44px rgba(15, 23, 42, .14);

    /* Type + layout */
    --sm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --sm-maxw: 1200px;
}

/* =============================================================================
   Scoped base — applies only on converted (.sm-site) pages
   ========================================================================== */

.sm-site {
    background: var(--sm-bg);
    color: var(--sm-text);
    font-family: var(--sm-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sm-site img { max-width: 100%; }

.sm-site a,
.sm-site a:visited {
    color: var(--sm-brand-700);
    font-weight: 500;
    text-decoration: none;
}

.sm-site a:hover { color: var(--sm-brand-800); }

/* =============================================================================
   Layout
   ========================================================================== */

.sm-container {
    width: 100%;
    max-width: var(--sm-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.sm-section { padding: 72px 0; }
.sm-section--tight { padding: 48px 0; }
.sm-section--alt { background: var(--sm-bg-subtle); }

.sm-section-head {
    max-width: 680px;
    margin: 0 auto 44px;
    text-align: center;
}

/* =============================================================================
   Typography
   ========================================================================== */

.sm-eyebrow {
    margin: 0 0 14px;
    color: var(--sm-accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
}

.sm-display {
    margin: 0 0 18px;
    color: var(--sm-heading);
    font-size: clamp(2.3rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.sm-h2 {
    margin: 0 0 16px;
    color: var(--sm-heading);
    font-size: clamp(1.75rem, 3.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sm-h3 {
    margin: 0 0 8px;
    color: var(--sm-heading);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}

.sm-lead {
    margin: 0;
    color: var(--sm-slate-600);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.6;
}

/* =============================================================================
   Buttons
   ========================================================================== */

.sm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--sm-radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .04s ease;
}

.sm-btn:active { transform: translateY(1px); }
.sm-btn--lg { font-size: 16px; padding: 14px 26px; }

.sm-btn--primary,
.sm-site a.sm-btn--primary { background: var(--sm-primary); color: #fff; }
.sm-btn--primary:hover,
.sm-site a.sm-btn--primary:hover { background: var(--sm-primary-hover); color: #fff; }

.sm-btn--secondary,
.sm-site a.sm-btn--secondary { background: #fff; color: var(--sm-heading); border-color: var(--sm-slate-300); }
.sm-btn--secondary:hover,
.sm-site a.sm-btn--secondary:hover { background: var(--sm-slate-50); border-color: var(--sm-slate-400); color: var(--sm-heading); }

.sm-btn--ghost,
.sm-site a.sm-btn--ghost { background: transparent; color: var(--sm-primary); }
.sm-btn--ghost:hover,
.sm-site a.sm-btn--ghost:hover { background: var(--sm-brand-50); color: var(--sm-primary-hover); }

.sm-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* =============================================================================
   Badges + checklists
   ========================================================================== */

.sm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--sm-radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--sm-brand-50);
    color: var(--sm-brand-800);
}

.sm-check { list-style: none; margin: 22px 0 0; padding: 0; }

.sm-check li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 14px;
    color: var(--sm-slate-600);
}

.sm-check li strong { color: var(--sm-heading); font-weight: 600; }

.sm-check li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    width: 21px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    border-radius: 50%;
    background: var(--sm-brand-50);
    color: var(--sm-brand-700);
    font-size: 12px;
    font-weight: 700;
}

/* =============================================================================
   Screenshot frame (faux app window)
   ========================================================================== */

/* Screenshots are transparent WebP that already carry their own rounded window
   and soft drop shadow — so the wrapper adds nothing and the shadow lands
   straight on the page. (tilted-thumbs.webp is opaque; it just sits flat.) */
.sm-shot { display: block; }

.sm-shot img { display: block; width: 100%; height: auto; }

.sm-shot-bar {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 11px 14px;
    background: var(--sm-slate-800);
}

.sm-shot-bar span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sm-slate-500);
}

/* =============================================================================
   Feature cards (3-up value props)
   ========================================================================== */

.sm-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.sm-feature {
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-lg);
    padding: 28px 26px;
    box-shadow: var(--sm-shadow-sm);
}

.sm-feature-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--sm-brand-50);
    color: var(--sm-brand-700);
    font-size: 20px;
}

.sm-feature p { margin: 0; }

/* =============================================================================
   Alternating split rows (text + screenshot)
   ========================================================================== */

.sm-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.sm-split + .sm-split { margin-top: 96px; }
.sm-split-text { order: 1; }
.sm-split-media { order: 2; }
.sm-split--reverse .sm-split-text { order: 2; }
.sm-split--reverse .sm-split-media { order: 1; }

/* =============================================================================
   Hero
   ========================================================================== */

.sm-hero {
    background: var(--sm-bg-subtle);
    border-bottom: 1px solid var(--sm-border);
    padding: 80px 0 88px;
}

.sm-hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}

.sm-hero-text { max-width: 560px; }
.sm-hero-text .sm-btn-row { margin-top: 28px; }

.sm-hero-note {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--sm-muted);
}

/* =============================================================================
   Closing CTA band
   ========================================================================== */

.sm-cta {
    background: var(--sm-slate-900);
    text-align: center;
    padding: 80px 0;
}

.sm-cta .sm-h2 { color: #fff; }
.sm-cta .sm-lead { color: var(--sm-slate-300); margin-bottom: 28px; }
.sm-cta .sm-btn-row { justify-content: center; }

/* =============================================================================
   Shared chrome overrides — nav (scoped to .sm-site only)
   ========================================================================== */

.sm-site .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--sm-border);
    padding: 12px 24px;
}

.sm-site .nav-logo img { padding-right: 0; }
.sm-site .nav-logo .nav-logo-light { width: 150px; }

.sm-site .nav-links li {
    color: var(--sm-slate-600);
    font-weight: 500;
}

.sm-site .nav-links li:hover { color: var(--sm-brand-700); }

.sm-site .nav-links ul { gap: 28px; justify-content: flex-end; }

@media (min-width: 750px) {
    .sm-site .nav { grid-template-columns: 150px 1fr auto 2rem; }
}

.sm-site #joinButton {
    color: #fff;
    background: var(--sm-primary);
    padding: 9px 18px;
    border-radius: var(--sm-radius);
}

.sm-site #joinButton:hover { color: #fff; background: var(--sm-primary-hover); }

.sm-site .search {
    background: var(--sm-slate-100);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    color: var(--sm-slate-500);
    height: 42px;
}

.sm-site .search-box {
    background: transparent;
    color: var(--sm-slate-800);
}

.sm-site .search-box::placeholder { color: var(--sm-slate-400); }
.sm-site .nav-menu { color: var(--sm-slate-700); }

/* mobile drawer */
.sm-site .menu {
    top: 0;
    z-index: 60;
    background: #fff;
    box-shadow: -10px 0 30px rgba(15, 23, 42, .15);
}
.sm-site .menu-items { color: var(--sm-slate-700); }
.sm-site .menu-items li:hover,
.sm-site .menu-items li:active { background: var(--sm-slate-100); color: var(--sm-brand-700); }
.sm-site .menu-x { color: var(--sm-slate-500); }
.sm-site .menu .line { border-top-color: var(--sm-border); }

/* theme-aware logo: dark pages show the white logo, .sm-site shows the colour one */
.nav-logo .nav-logo-light { display: none; }
.sm-site .nav-logo .nav-logo-dark { display: none; }
.sm-site .nav-logo .nav-logo-light { display: block; }

/* =============================================================================
   Shared chrome overrides — footer (scoped)
   ========================================================================== */

.sm-footer {
    background: var(--sm-bg);
    border-top: 1px solid var(--sm-border);
    padding: 32px 0;
}

.sm-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    font-size: 13px;
    color: var(--sm-muted);
}

.sm-site .sm-footer .footer-link { color: var(--sm-slate-500); margin: 0; }
.sm-site .sm-footer .footer-link:hover { color: var(--sm-brand-700); }
.sm-site .sm-footer .footer-text { margin: 0; color: var(--sm-muted); }

/* =============================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
    .sm-hero { padding: 56px 0 60px; }
    .sm-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .sm-hero-text { max-width: none; }

    .sm-section { padding: 56px 0; }

    .sm-split { grid-template-columns: 1fr; gap: 28px; }
    .sm-split + .sm-split { margin-top: 64px; }
    .sm-split-text,
    .sm-split--reverse .sm-split-text { order: 1; }
    .sm-split-media,
    .sm-split--reverse .sm-split-media { order: 2; }
}

/* =============================================================================
   Simple page header (about / contact / legal)
   ========================================================================== */

.sm-page-head {
    background: var(--sm-bg-subtle);
    border-bottom: 1px solid var(--sm-border);
    padding: 72px 0;
    text-align: center;
}

.sm-page-head .sm-lead { max-width: 620px; margin: 14px auto 0; }

/* =============================================================================
   Founder card + social (about)
   ========================================================================== */

.sm-founder {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
}

.sm-avatar {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sm-brand-50);
    color: var(--sm-brand-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

.sm-founder-name { color: var(--sm-heading); font-size: 1.15rem; font-weight: 600; }
.sm-founder-role { font-size: 14px; color: var(--sm-muted); }

.sm-social { display: inline-flex; gap: 14px; margin-top: 6px; font-size: 20px; }
.sm-social i { color: var(--sm-slate-400); cursor: pointer; transition: color .15s ease; }
.sm-social i:hover { color: var(--sm-brand-700); }

.sm-prose p { margin: 0 0 16px; }
.sm-prose p:last-child { margin-bottom: 0; }

/* =============================================================================
   Contact cards
   ========================================================================== */

.sm-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 820px;
    margin: 0 auto;
}

.sm-contact-card { text-align: center; }
.sm-contact-card .sm-feature-ico { margin-left: auto; margin-right: auto; }
.sm-contact-card a { font-weight: 600; }
.sm-contact-card .sm-social { justify-content: center; }

/* =============================================================================
   Pricing plans
   ========================================================================== */

.sm-pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto;
}

.sm-pricing--duo { grid-template-columns: repeat(2, 1fr); max-width: 760px; }

.sm-plan {
    display: flex;
    flex-direction: column;
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-lg);
    padding: 30px 26px;
    box-shadow: var(--sm-shadow-sm);
}

.sm-plan--featured {
    border: 2px solid var(--sm-brand-500);
    box-shadow: var(--sm-shadow);
    position: relative;
}

.sm-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sm-brand-600);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: var(--sm-radius-pill);
    white-space: nowrap;
}

.sm-plan-name {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sm-brand-700);
}

.sm-plan-state { color: var(--sm-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }

.sm-plan-price {
    color: var(--sm-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.sm-plan-price small {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--sm-muted);
}

.sm-plan .sm-check { flex: 1 1 auto; margin-top: 22px; margin-bottom: 26px; }
.sm-plan .sm-btn { width: 100%; }
.sm-plan-current {
    text-align: center;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sm-success);
}

.sm-fineprint {
    max-width: 760px;
    margin: 60px auto 0;
    display: grid;
    gap: 22px;
}

.sm-fineprint h3 { margin: 0 0 4px; }
.sm-fineprint p { margin: 0; font-size: 14px; color: var(--sm-slate-500); }

.sm-footnote {
    max-width: 640px;
    margin: 44px auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sm-muted);
}

.sm-student-cta {
    max-width: 760px;
    margin: 28px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 18px 24px;
    background: var(--sm-brand-50);
    border: 1px solid var(--sm-brand-100);
    border-radius: var(--sm-radius-lg);
}

.sm-student-cta-text { color: var(--sm-slate-700); font-size: 15px; }
.sm-student-cta-text strong { color: var(--sm-brand-800); font-weight: 600; }
.sm-student-cta-text em { font-style: normal; color: var(--sm-muted); }
.sm-student-cta .sm-btn { flex: none; }

/* =============================================================================
   Legal documents (reformat-only — text is never touched)
   ========================================================================== */

.sm-legal {
    max-width: 760px;
    margin: 0 auto;
    color: var(--sm-slate-700);
    font-size: 15px;
    line-height: 1.75;
}

.sm-legal p { margin: 0 0 14px; }
.sm-legal ol,
.sm-legal ul { margin: 0 0 18px; padding-left: 26px; }
.sm-legal li { margin-bottom: 8px; }
.sm-legal strong { color: var(--sm-heading); font-weight: 600; }
.sm-legal u { text-decoration: underline; }
.sm-legal a { color: var(--sm-brand-700); }
.sm-legal a:hover { text-decoration: underline; }

.sm-legal .legacy-title {
    margin: 52px 0 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--sm-border);
    color: var(--sm-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sm-legal > .legacy-title:first-child { margin-top: 0; }

@media (max-width: 820px) {
    .sm-pricing,
    .sm-pricing--duo { grid-template-columns: 1fr; max-width: 420px; }
}

/* =============================================================================
   Cookie-consent banner — harmonised with the design system
   (colours come from the palette in views/partials/cookie-consent.ejs)
   ========================================================================== */

.cc-window { font-family: var(--sm-font) !important; }
.cc-window .cc-message { font-size: 14px !important; line-height: 1.6 !important; }
.cc-window .cc-btn {
    border-radius: var(--sm-radius) !important;
    font-weight: 600 !important;
    padding: 9px 22px !important;
    transition: opacity .15s ease !important;
}
.cc-window .cc-btn:hover { opacity: .9 !important; }
.cc-window .cc-link { color: var(--sm-brand-300) !important; opacity: 1 !important; }

/* =============================================================================
   App / admin shell — light theme for the legacy logged-in pages.
   These re-skin the shared dark classes from main.css; they only take effect
   on pages that opt in with class="sm-site". Marketing pages don't use these
   legacy classes (.web/.footer/table/.adminInputButton/…) so the rules are
   inert there. No markup is restructured — forms, tables and JS are untouched.
   ========================================================================== */

.sm-site h1,
.sm-site h2,
.sm-site h3 { color: var(--sm-heading); }

.sm-site .centeredMain { color: var(--sm-text); }
.sm-site .buttonClarification { color: var(--sm-muted); }
.sm-site .line { border-top-color: var(--sm-border); }

/* legacy footer (admin/app pages wrap the footer partial in .footer) */
.sm-site .footer {
    background: var(--sm-bg);
    border-top: 1px solid var(--sm-border);
    color: var(--sm-muted);
}
.sm-site .footer .footer-link { color: var(--sm-slate-500); }
.sm-site .footer .footer-link:hover { color: var(--sm-brand-700); }
.sm-site .footer .footer-text { color: var(--sm-muted); }

/* data tables */
.sm-site th {
    background: var(--sm-slate-100);
    color: var(--sm-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--sm-border);
}
.sm-site td { color: var(--sm-text); }
.sm-site td,
.sm-site tr:nth-child(even) td,
.sm-site tr:nth-child(odd) td {
    background: var(--sm-surface);
    border-bottom: 1px solid var(--sm-border);
}
.sm-site .tableInput { color: var(--sm-heading); }
.sm-site .tableIcon { color: var(--sm-slate-400); }
.sm-site .tableIcon:hover { color: var(--sm-brand-700); }
.sm-site .strongLink { color: var(--sm-heading); }
.sm-site .dimmedLink { color: var(--sm-muted); }

/* pagination */
.sm-site .paginationBar { background: var(--sm-slate-100); border-radius: var(--sm-radius); }
.sm-site .paginationLink {
    background: var(--sm-surface);
    color: var(--sm-slate-600);
    border: 1px solid var(--sm-border);
}
.sm-site .paginationLink:hover { background: var(--sm-brand-600); color: #fff; }
.sm-site .paginationLinkSelected { background: var(--sm-brand-700); color: #fff; }

/* legacy buttons */
.sm-site .adminInputButton,
.sm-site .inputButton,
.sm-site .big-button,
.sm-site .smaller-button {
    background: var(--sm-primary);
    color: #fff;
    border-radius: var(--sm-radius);
    font-weight: 600;
}
.sm-site .adminInputButton {
    width: auto;
    min-width: 96px;
    height: 36px;
    padding: 0 16px;
    white-space: nowrap;
}
.sm-site .inputButton {
    width: auto;
    min-width: 110px;
    height: auto;
    padding: 9px 18px;
    white-space: nowrap;
}
.sm-site .adminInputButton:hover,
.sm-site .inputButton:hover,
.sm-site .big-button:hover,
.sm-site .big-button:active,
.sm-site .smaller-button:hover,
.sm-site .smaller-button:active {
    background: var(--sm-primary-hover);
    color: #fff;
}

/* legacy inputs */
.sm-site .inputFromTo,
.sm-site .inputBox,
.sm-site .input-select {
    background: var(--sm-surface);
    border: 1px solid var(--sm-slate-300);
    border-radius: var(--sm-radius-sm);
    color: var(--sm-heading);
    box-shadow: var(--sm-shadow-sm);
}
.sm-site .inputFromTo:focus,
.sm-site .inputBox:focus,
.sm-site .input-select:focus { border-color: var(--sm-brand-500); outline: none; }

.sm-site .inputLink { color: var(--sm-brand-700); }
.sm-site .inputLink:hover { color: var(--sm-brand-800); }

/* =============================================================================
   Customer account dashboard (download history + quick actions)
   ========================================================================== */

.sm-site .dashboard-element {
    background: var(--sm-surface);
    color: var(--sm-text);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-lg);
    box-shadow: var(--sm-shadow-sm);
}
.sm-site .dashboard-title { color: var(--sm-heading); font-weight: 600; }
.sm-site .dashboard-container { color: var(--sm-text); }

.sm-site .dashboard-button {
    background: var(--sm-primary);
    color: #fff;
    border-radius: var(--sm-radius);
    font-weight: 600;
    height: auto;
    padding: 10px 18px;
}
.sm-site .dashboard-button:hover,
.sm-site .dashboard-button:active { background: var(--sm-primary-hover); color: #fff; }

.sm-site .get-download-link { background: var(--sm-primary); color: #fff; border-radius: var(--sm-radius); }
.sm-site .get-download-link:hover { background: var(--sm-primary-hover); color: #fff; }

.sm-site .dashboard-thumbs a {
    border-radius: var(--sm-radius);
    border: 1px solid var(--sm-border);
    box-shadow: var(--sm-shadow-sm);
    transition: box-shadow .15s ease, transform .05s ease;
}
.sm-site .dashboard-thumbs a:hover { box-shadow: var(--sm-shadow); transform: translateY(-2px); }

/* =============================================================================
   Customer account page (profile form, billing, subscription)
   ========================================================================== */

.sm-site .account-container {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
    color: var(--sm-text);
}
.sm-site .legacy-title-center { text-align: center; }
.sm-site .tag-description { color: var(--sm-text); }
.sm-site .account-container .inputBox,
.sm-site .account-container .input-select { margin-top: 10px; margin-bottom: 10px; }

/* legacy containers used by account / auth / checkout pages (kill dark backdrops) */
.sm-site .login,
.sm-site .legacy { background: var(--sm-bg-subtle); }
.sm-site .checkout-container { color: var(--sm-text); }
.sm-site .legacy-text,
.sm-site .message-text { color: var(--sm-text); }
.sm-site .account-container .legacy-title,
.sm-site .legacy-container .legacy-title,
.sm-site .checkout-container .legacy-title { color: var(--sm-heading); }
.sm-site .legacy-highlight {
    background: var(--sm-brand-50);
    color: var(--sm-brand-800);
    border-radius: var(--sm-radius);
}
.sm-site .checkout-table,
.sm-site .receipt-table { background: var(--sm-surface); }
.sm-site .checkout-table-container { border-color: var(--sm-border); }
.sm-site .receipt-label,
.sm-site .receipt-bottom-comment { color: var(--sm-muted); }

/* status / notice pages — message.ejs (paddle resume, order results, generic notices) and 404.
   The legacy containers were fixed ~350-375px columns, which collapse into a tall, skinny ribbon
   of text on a large monitor. Present the notice as a centered card with a readable max-width. */
.sm-site .message-container {
    width: 100%;            /* was a fixed 375px — the cause of the skinny ribbon */
    height: 100%;
    padding: 48px 24px;
    box-sizing: border-box;
}
.sm-site .message-container > div {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-lg);
    box-shadow: var(--sm-shadow);
    padding: 40px 40px 32px;
}
.sm-site .message-text {
    font-size: 20px;
    line-height: 1.55;
    padding: 0 0 28px;      /* was 40px on every side */
}

.sm-site .e404 {
    background: var(--sm-bg-subtle);   /* drop the dark gradient + test-pattern backdrop */
    min-height: 60vh;
}
.sm-site .e404-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 40px 24px;
    color: var(--sm-heading);
}

/* short notice pages worth vertically centering (cancel.ejs, close.ejs). The .login area is tall,
   so center the account-container as a card within it. Scoped to .sm-notice-page so the shared
   .account-container (student application forms) keeps its normal top-aligned flow. */
.sm-site .login.sm-notice-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    box-sizing: border-box;
}
.sm-site .login.sm-notice-page > .account-container {
    width: 100%;
    max-width: 520px;
    height: auto;            /* override legacy height/min-height:100% so the card is content-sized */
    min-height: 0;
    margin: 0;
    padding: 40px;
    box-sizing: border-box;
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-lg);
    box-shadow: var(--sm-shadow);
}

/* =============================================================================
   Template browse / view (slides, slide, story — slide.css / story.css)
   ========================================================================== */

.sm-site .story-element {
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-lg);
}
.sm-site .story-text-container { background: transparent; }
.sm-site .story-thumbs-image,
.sm-site .slide-title-tile,
.sm-site .story-title-block {
    background: var(--sm-slate-100);
    color: var(--sm-heading);
    border-radius: var(--sm-radius);
}
.sm-site .story-title,
.sm-site .slideTitle { color: var(--sm-heading); }
.sm-site .slide-description { color: var(--sm-text); }
.sm-site .slide-tag { color: var(--sm-slate-500); }
.sm-site .slide-tag:hover { color: var(--sm-brand-700); }
.sm-site .slideTextInput,
.sm-site .slide-size-input {
    background: var(--sm-surface);
    color: var(--sm-heading);
    border: 1px solid var(--sm-slate-300);
    border-radius: var(--sm-radius-sm);
    box-shadow: var(--sm-shadow-sm);
}

/* slide-search gallery: subtle off-white backdrop (matches the login / page-head / alt-section
   background) so the slide thumbnails stand out, lifted by their drop shadow */
.sm-site .thumbs { background: var(--sm-bg-subtle); }
.sm-site .thumbs a {
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow);
    transition: box-shadow .15s ease, transform .05s ease;
}
.sm-site .thumbs a:hover { box-shadow: var(--sm-shadow-lg); transform: translateY(-2px); }

/* single-slide view (slide.ejs): same subtle backdrop + lifted slides as the search gallery */
.sm-site .slideMain { background: var(--sm-bg-subtle); }
.sm-site .slideThumbImage,
.sm-site .slideThumbs a {
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow);
}
.sm-site .slideThumbs a { transition: box-shadow .15s ease, transform .05s ease; }
.sm-site .slideThumbs a:hover { box-shadow: var(--sm-shadow-lg); transform: translateY(-2px); }

/* =============================================================================
   Account / settings page — modern sectioned layout (label-left → stacked)
   ========================================================================== */

.sm-acct { grid-area: mainArea; padding: 40px 0 72px; }
.sm-acct .sm-container { max-width: 920px; }
.sm-acct .sm-container.sm-acct-narrow { max-width: 560px; }   /* focused single-column forms (signup) */
.sm-acct-head h1 { margin: 0; text-wrap: balance; }   /* even out 2-line titles instead of orphaning the last word */
.sm-acct-sub { margin: 6px 0 0; color: var(--sm-muted); }

.sm-acct-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px 0;
    border-top: 1px solid var(--sm-border);
}
.sm-acct-section-head h3 { margin: 0 0 4px; }
.sm-acct-section-head p { margin: 0; font-size: 14px; color: var(--sm-muted); }

@media (min-width: 800px) {
    .sm-acct-section { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; }
}

.sm-acct-card {
    background: var(--sm-surface);
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-lg);
    padding: 22px 24px;
}
.sm-acct-card > p { margin: 0; color: var(--sm-text); }

.sm-field { margin-bottom: 18px; }
.sm-field:last-child { margin-bottom: 0; }
.sm-field > label { display: block; font-size: 14px; font-weight: 500; color: var(--sm-heading); margin-bottom: 6px; }
.sm-field-optional { color: var(--sm-muted); font-weight: 400; }
.sm-field .inputBox,
.sm-field .input-select { margin: 0; width: 100%; font-size: 15px; padding: 10px 12px; }
.sm-field-note { margin: 7px 0 0; font-size: 13px; color: var(--sm-muted); line-height: 1.5; }

.sm-field-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
.sm-field-grid:last-child { margin-bottom: 0; }
.sm-field-grid .sm-field { margin-bottom: 0; }
@media (min-width: 520px) { .sm-field-grid { grid-template-columns: 1fr 1fr; } }

.sm-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sm-border);
}
.sm-pref-row:first-child { padding-top: 0; }
.sm-pref-row:last-child { padding-bottom: 0; border-bottom: none; }
.sm-pref-label { font-size: 15px; color: var(--sm-text); }

.sm-seg { display: inline-flex; flex: none; border: 1px solid var(--sm-slate-300); border-radius: var(--sm-radius); overflow: hidden; }
.sm-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sm-seg label {
    padding: 7px 18px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--sm-slate-600);
    background: #fff;
    cursor: pointer;
    border-right: 1px solid var(--sm-slate-300);
    transition: background .12s ease, color .12s ease;
}
.sm-seg label:last-of-type { border-right: none; }
.sm-seg input:checked + label { background: var(--sm-primary); color: #fff; }

.sm-acct-saverow { display: flex; justify-content: flex-end; margin-top: 24px; }

.sm-acct-plan { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sm-acct-plan-info { color: var(--sm-text); display: flex; align-items: center; gap: 10px; }

.sm-acct-invoices { margin-top: 14px; }
.sm-acct-invoice { padding: 8px 0; color: var(--sm-brand-700); cursor: pointer; border-bottom: 1px solid var(--sm-border); }
.sm-acct-invoice:hover { color: var(--sm-brand-800); }

.sm-acct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-bottom: 1px solid var(--sm-border);
}
.sm-acct-row:first-child { padding-top: 0; }
.sm-acct-row:last-child { padding-bottom: 0; border-bottom: none; }
.sm-acct-row-title { font-weight: 600; color: var(--sm-heading); }
.sm-field-req { color: var(--sm-danger); font-weight: 400; }

/* sticky save bar — slides up only when the account form has unsaved changes */
.sm-savebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    padding: 12px 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--sm-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
    transform: translateY(110%);
    transition: transform .22s ease;
    visibility: hidden;
}
.sm-savebar.is-visible { transform: translateY(0); visibility: visible; }
.sm-savebar .sm-container { max-width: 920px; }
.sm-savebar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sm-savebar-text { font-size: 14px; font-weight: 500; color: var(--sm-heading); }
.sm-savebar-actions { display: flex; gap: 10px; }

.sm-btn--danger,
.sm-site a.sm-btn--danger { background: #fff; color: var(--sm-danger); border-color: var(--sm-slate-300); }
.sm-btn--danger:hover { background: var(--sm-danger); color: #fff; border-color: var(--sm-danger); }