/* =========================================================================
   Marketing Layer — public pages only
   -------------------------------------------------------------------------
   Loaded via {% block extra_css %} on landing and auth pages, so the console
   never pays for CSS it does not use. Depends on style.css (tokens) and
   elevation.css (depth, glass, motion) being loaded first.

   Contents:
     1. marketing shell + header
     2. hero
     3. section furniture
     4. feature / step / pricing cards
     5. logo strip, stats band, CTA band
     6. footer
     7. auth pages (login, register, password reset, verify)
     8. responsive
   ========================================================================= */

/* =========================================================================
   1. SHELL + HEADER
   ========================================================================= */

/* Marketing pages opt out of the app's flex body so sections can run full
   bleed and paint their own backgrounds edge to edge. */
.marketing {
    display: block;
    width: 100%;
    overflow-x: hidden;
}

.mk-wrap {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--sp-6);
}

/* --- Sticky glass header ------------------------------------------------- */
.mk-header {
    position: sticky;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid transparent;
    transition:
        background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

/* The header starts transparent over the hero and only frosts once the page
   scrolls, so the hero is never cropped by a bar at first paint. .is-stuck is
   applied by the scroll listener in base.html. */
.mk-header.is-stuck {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom-color: var(--border);
    box-shadow: 0 8px 32px -20px rgba(0, 0, 0, .9);
}

.mk-header-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    height: 68px;
}

.mk-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-strong);
}

.mk-brand:hover {
    color: var(--text-strong);
}

.mk-brand .brand-mark {
    width: 34px;
    height: 34px;
}

.mk-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-left: auto;
}

.mk-nav-link {
    position: relative;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-muted);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.mk-nav-link:hover {
    color: var(--text-strong);
    background: var(--surface-hover);
}

.mk-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* Mobile menu button — hidden until the nav collapses at 900px. */
.mk-burger {
    display: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-hover);
    color: var(--text);
    cursor: pointer;
}

.mk-burger svg {
    width: 20px;
    height: 20px;
}

/* =========================================================================
   2. HERO
   ========================================================================= */
.mk-hero {
    position: relative;
    padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    text-align: center;
}

/* Floating orbs behind the hero copy. Purely decorative and pointer-inert;
   they drift slowly so the section is never fully static. */
.mk-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
    animation: mk-drift 18s ease-in-out infinite alternate;
}

.mk-orb-1 {
    width: 30rem;
    height: 30rem;
    top: -6rem;
    left: -8rem;
    background: radial-gradient(circle, var(--brand-500), transparent 70%);
}

.mk-orb-2 {
    width: 26rem;
    height: 26rem;
    top: 2rem;
    right: -7rem;
    background: radial-gradient(circle, var(--info), transparent 70%);
    animation-duration: 22s;
    animation-direction: alternate-reverse;
}

@keyframes mk-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(2rem, 2.5rem, 0) scale(1.12); }
}

.mk-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    margin-inline: auto;
}

/* --- Eyebrow pill -------------------------------------------------------- */
.mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-full);
    background: var(--accent-soft);
    box-shadow: var(--edge-top);
    color: var(--on-accent-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mk-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: mk-pulse 2.4s ease-in-out infinite;
}

@keyframes mk-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.75); }
}

/* --- Headline ------------------------------------------------------------ */
.mk-title {
    font-size: var(--fs-d1);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -.035em;
    color: var(--text-strong);
    text-wrap: balance;
}

/* The gradient sits on the text itself. -webkit-text-fill-color is what
   actually clips it in WebKit/Blink; `color: transparent` covers Firefox. */
.mk-title-accent {
    background: linear-gradient(120deg, var(--brand-400), var(--brand-600) 45%, var(--info));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.mk-lead {
    max-width: 40rem;
    margin: var(--sp-6) auto 0;
    font-size: var(--fs-lead);
    line-height: 1.65;
    color: var(--text-muted);
    text-wrap: pretty;
}

.mk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
}

/* Marketing CTAs are larger than the console's default button. */
.mk-hero-actions .btn-primary,
.mk-hero-actions .btn-secondary,
.btn-lg {
    padding: .8125rem var(--sp-6);
    border-radius: var(--r-lg);
    font-size: var(--fs-md);
    font-weight: 600;
}

.mk-hero-note {
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-subtle);
}

/* --- Hero product frame -------------------------------------------------
   A faux app window under the fold-line. Tilted back on the X axis so it
   reads as a screen sitting in space rather than a flat screenshot. */
.mk-hero-frame {
    position: relative;
    z-index: 1;
    max-width: 62rem;
    margin: clamp(3rem, 6vw, 4.5rem) auto 0;
    perspective: 1600px;
}

.mk-frame {
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--d-4), var(--edge-top-strong);
    overflow: hidden;
    transform: rotateX(7deg) scale(.98);
    transform-origin: 50% 0;
    transition: transform var(--dur-slow) var(--ease-out);
}

.mk-hero-frame:hover .mk-frame {
    transform: rotateX(0deg) scale(1);
}

/* Window chrome */
.mk-frame-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
}

.mk-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-strong);
}

.mk-dot:nth-child(1) { background: #ff5f57; }
.mk-dot:nth-child(2) { background: #febc2e; }
.mk-dot:nth-child(3) { background: #28c840; }

.mk-frame-title {
    margin-left: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.mk-frame-body {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    min-height: 20rem;
}

.mk-frame-rail {
    padding: var(--sp-4);
    background: var(--surface-sunken);
    border-right: 1px solid var(--border);
}

.mk-frame-row {
    height: 9px;
    margin-bottom: var(--sp-3);
    border-radius: var(--r-full);
    background: var(--surface-active);
}

.mk-frame-row.is-active {
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-line);
}

.mk-frame-main {
    padding: var(--sp-5);
}

.mk-frame-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.mk-frame-card {
    height: 4.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface-raised);
    box-shadow: var(--d-1), var(--edge-top);
}

/* Faux bar chart. Each bar's height is set inline via --h so the markup stays
   declarative and no extra classes are needed per bar. */
.mk-frame-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
    height: 8rem;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface-raised);
    box-shadow: var(--edge-top);
}

.mk-bar {
    flex: 1;
    height: var(--h, 40%);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
    opacity: .85;
    animation: mk-grow .9s var(--ease-out) backwards;
}

@keyframes mk-grow {
    from { height: 0; opacity: 0; }
}

/* =========================================================================
   3. SECTION FURNITURE
   ========================================================================= */
.mk-section {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.mk-section-alt {
    background: var(--surface-sunken);
    border-block: 1px solid var(--border);
}

.mk-section-head {
    max-width: 44rem;
    margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
    text-align: center;
}

.mk-kicker {
    display: block;
    margin-bottom: var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.mk-h2 {
    font-size: var(--fs-d2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.028em;
    color: var(--text-strong);
    text-wrap: balance;
}

.mk-sub {
    margin-top: var(--sp-4);
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* --- Segmented control (billing toggle) ---------------------------------
   Labels wrapping hidden radios, so the control is keyboard-operable and
   announced as a choice. .is-on is set by the toggle script. */
.seg {
    display: inline-flex;
    gap: var(--sp-1);
    margin-top: var(--sp-6);
    padding: var(--sp-1);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-sunken);
    box-shadow: var(--edge-top);
}

.seg-opt {
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-full);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--dur) var(--ease),
        color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.seg-opt:hover {
    color: var(--text-strong);
}

.seg-opt.is-on {
    background: var(--surface-raised);
    box-shadow: var(--d-1), var(--edge-top-strong);
    color: var(--text-strong);
}

/* Keyboard focus has to come off the hidden radio, since the label itself is
   never the focus target. */
.seg-opt:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Chip ---------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface-hover);
    box-shadow: var(--edge-top);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* =========================================================================
   4. CARD GRIDS
   ========================================================================= */
.mk-grid {
    display: grid;
    gap: var(--sp-5);
}

.mk-grid-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.mk-grid-4 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.mk-grid-2 { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }

/* --- Feature card -------------------------------------------------------- */
.mk-card {
    position: relative;
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--d-2), var(--edge-top);
    overflow: hidden;
    transition:
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease);
}

/* A soft accent wash that fades in from the top-left on hover. Kept on a
   pseudo-element so it composites without touching the card's own background. */
.mk-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(24rem 16rem at 0% 0%, var(--accent-soft), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease);
    pointer-events: none;
}

.mk-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--d-3), var(--edge-top-strong);
    border-color: var(--accent-line);
}

.mk-card:hover::before {
    opacity: 1;
}

.mk-card > * {
    position: relative;
}

.mk-card-ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--sp-5);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    background: var(--accent-soft);
    box-shadow: var(--edge-top);
    color: var(--accent);
}

.mk-card-ic svg {
    width: 22px;
    height: 22px;
}

.mk-card h3 {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-lg);
    font-weight: 650;
    letter-spacing: -.015em;
}

.mk-card p {
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--text-muted);
}

/* --- Numbered step card -------------------------------------------------- */
.mk-step {
    position: relative;
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--d-2), var(--edge-top);
}

/* Oversized ghost numeral in the corner. */
.mk-step-n {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-5);
    font-size: 3rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--accent);
    opacity: .16;
}

.mk-step h3 {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-lg);
}

.mk-step p {
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--text-muted);
}

/* --- Pricing ------------------------------------------------------------- */
.mk-price-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--d-2), var(--edge-top);
    transition:
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease);
}

.mk-price-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--d-3), var(--edge-top-strong);
}

/* The featured plan is lifted and ringed rather than recoloured, so the
   comparison stays honest and the eye still lands on it first. */
.mk-price-card.is-featured {
    border-color: var(--accent);
    box-shadow: var(--glow-accent-lg), var(--d-3), var(--edge-top-strong);
}

@media (min-width: 901px) {
    .mk-price-card.is-featured {
        transform: scale(1.035);
    }

    .mk-price-card.is-featured:hover {
        transform: scale(1.035) translate3d(0, -4px, 0);
    }
}

.mk-price-tag {
    position: absolute;
    top: calc(var(--sp-4) * -1);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--sp-1) var(--sp-4);
    border-radius: var(--r-full);
    background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
    box-shadow: var(--glow-accent), var(--edge-top-strong);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mk-price-card { position: relative; }

.mk-plan-name {
    font-size: var(--fs-md);
    font-weight: 650;
    color: var(--text-strong);
}

.mk-plan-price {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 var(--sp-2);
}

.mk-plan-amount {
    font-size: 2.75rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--text-strong);
}

.mk-plan-period {
    font-size: var(--fs-base);
    color: var(--text-subtle);
}

.mk-plan-desc {
    margin-bottom: var(--sp-5);
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.mk-plan-features {
    list-style: none;
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    padding: var(--sp-5) 0 0;
    border-top: 1px solid var(--border);
}

.mk-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.mk-plan-features svg {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: var(--success);
}

/* Pushes the CTA to the card's bottom edge so buttons line up across plans
   whose feature lists differ in length. */
.mk-plan-cta {
    margin-top: auto;
    width: 100%;
    justify-content: center;
}

/* =========================================================================
   5. BANDS
   ========================================================================= */

/* --- Logo strip ---------------------------------------------------------- */
.mk-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    padding: var(--sp-8) 0;
}

.mk-logo {
    font-size: var(--fs-lg);
    font-weight: 650;
    letter-spacing: -.02em;
    color: var(--text-subtle);
    opacity: .65;
    filter: grayscale(1);
    transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.mk-logo:hover {
    opacity: 1;
    filter: grayscale(0);
}

/* --- Stats band ---------------------------------------------------------- */
.mk-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--sp-5);
    padding: var(--sp-8);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--d-3), var(--edge-top);
}

.mk-stat {
    text-align: center;
}

.mk-stat-v {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--text-strong);
}

.mk-stat-l {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- Closing CTA --------------------------------------------------------- */
.mk-cta {
    position: relative;
    padding: clamp(3rem, 6vw, 4.5rem) var(--sp-6);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(40rem 20rem at 50% 0%, var(--accent-soft), transparent 70%),
        var(--surface);
    box-shadow: var(--d-3), var(--edge-top);
    text-align: center;
    overflow: hidden;
}

.mk-cta h2 {
    font-size: var(--fs-d2);
    font-weight: 700;
    letter-spacing: -.028em;
    text-wrap: balance;
}

.mk-cta p {
    max-width: 34rem;
    margin: var(--sp-4) auto 0;
    font-size: var(--fs-md);
    color: var(--text-muted);
}

.mk-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
}

/* =========================================================================
   6. FOOTER
   ========================================================================= */
.mk-footer {
    padding: clamp(3rem, 5vw, 4rem) 0 var(--sp-8);
    border-top: 1px solid var(--border);
    background: var(--surface-sunken);
}

.mk-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--sp-8);
    padding-bottom: var(--sp-8);
}

.mk-footer-about p {
    max-width: 22rem;
    margin-top: var(--sp-4);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--text-muted);
}

.mk-footer-col h4 {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.mk-footer-col ul {
    list-style: none;
    display: grid;
    gap: var(--sp-3);
}

.mk-footer-col a {
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.mk-footer-col a:hover {
    color: var(--text-strong);
}

.mk-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--text-subtle);
}

.mk-social {
    display: flex;
    gap: var(--sp-2);
}

.mk-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-hover);
    color: var(--text-muted);
    transition:
        color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        transform var(--dur) var(--ease-out);
}

.mk-social a:hover {
    color: var(--accent);
    border-color: var(--accent-line);
    transform: translate3d(0, -2px, 0);
}

.mk-social svg {
    width: 17px;
    height: 17px;
}

/* =========================================================================
   7. AUTH PAGES
   -------------------------------------------------------------------------
   A split layout: a marketing-styled aside on the left carrying the value
   proposition, and the form on the right. Below 900px the aside is dropped
   entirely — on a phone it would push the form below the fold.
   ========================================================================= */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    width: 100%;
}

.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    border-right: 1px solid var(--border);
    background:
        radial-gradient(40rem 30rem at 20% 10%, var(--accent-soft), transparent 65%),
        var(--surface-sunken);
    overflow: hidden;
}

.auth-aside-inner {
    position: relative;
    z-index: 1;
    max-width: 30rem;
}

.auth-aside .mk-brand {
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.auth-aside h2 {
    font-size: var(--fs-d3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.028em;
    text-wrap: balance;
}

.auth-aside p {
    margin-top: var(--sp-4);
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--text-muted);
}

.auth-points {
    list-style: none;
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
}

.auth-points li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.auth-points svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--accent);
}

.auth-quote {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--d-2), var(--edge-top);
}

.auth-quote p {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text);
}

.auth-quote footer {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-subtle);
}

/* --- Form side ----------------------------------------------------------- */
.auth-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}

/* Shown only when the aside is hidden, so the page still carries the brand
   on small screens. */
.auth-card .mk-brand {
    display: none;
    margin-bottom: var(--sp-8);
}

.auth-head {
    margin-bottom: var(--sp-8);
}

.auth-head h1 {
    font-size: var(--fs-d3);
    font-weight: 700;
    letter-spacing: -.028em;
}

.auth-head p {
    margin-top: var(--sp-3);
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.auth-form {
    display: grid;
    gap: var(--sp-5);
}

.auth-form .form-group {
    display: grid;
    gap: var(--sp-2);
}

.auth-form label {
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--text);
}

.auth-form input:not([type="checkbox"]):not([type="radio"]),
.auth-form select {
    width: 100%;
}

.auth-form .btn-primary {
    width: 100%;
    justify-content: center;
    padding: .75rem var(--sp-5);
    font-size: var(--fs-md);
}

.auth-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}

.auth-alt {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--fs-base);
    color: var(--text-muted);
    text-align: center;
}

/* --- Divider ------------------------------------------------------------- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin: var(--sp-6) 0;
    color: var(--text-subtle);
    font-size: var(--fs-sm);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* --- Google sign-in ------------------------------------------------------
   Google's own button is layered transparently over ours: GIS will not take a
   restyled button, so the branded one takes the click while ours is what shows.
   Both are the same box, which keeps the click target honest. */
.google-wrap {
    position: relative;
    width: 100%;
    height: 44px;
}

.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    width: 100%;
    height: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    box-shadow: var(--d-1), var(--edge-top);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 550;
    cursor: pointer;
    transition:
        background var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

/* The visible button never receives the pointer, so its hover has to be driven
   by the wrapper the overlay sits in. */
.google-wrap:hover .btn-google {
    background: var(--surface-hover);
    border-color: var(--text-subtle);
    box-shadow: var(--d-2), var(--edge-top-strong);
}

.google-gis {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    overflow: hidden;
}

/* --- Form errors --------------------------------------------------------- */
.form-error,
.non-field-errors {
    font-size: var(--fs-sm);
    color: var(--danger);
}

.non-field-errors {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--danger);
    border-radius: var(--r-md);
    background: var(--danger-soft);
}

.non-field-errors ul {
    list-style: none;
}

.form-help {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

/* --- Password reveal -----------------------------------------------------
   The toggle is injected by the script in auth_base.html, which wraps each
   password field in .pw-wrap. Doing it there rather than in forms.py means
   the three loop-rendered forms get it without their widgets changing. */
.pw-wrap {
    position: relative;
}

/* Room for the button, so a long value never runs underneath it. */
.pw-wrap input {
    padding-right: 2.75rem;
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: var(--sp-2);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    box-shadow: none;
    color: var(--text-subtle);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.pw-toggle:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.pw-toggle svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Exactly one of the two icons shows; .is-on means the password is visible. */
.pw-toggle .pw-ic-off {
    display: none;
}

.pw-toggle.is-on .pw-ic-off {
    display: block;
}

.pw-toggle.is-on .pw-ic-on {
    display: none;
}

/* --- Resend row (OTP pages) ---------------------------------------------- */
.auth-resend {
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: center;
}

.auth-resend form {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: center;
}

.auth-resend .btn-ghost {
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-sm);
}

.auth-resend .btn-ghost:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* --- OTP / verification code input --------------------------------------
   Monospaced and widely tracked so a 6-digit code reads as discrete glyphs.
   The OTP forms render through Django's field loop, so this targets the code
   field by name rather than needing a class on the widget. */
.otp-input,
.auth-form input[name="code"] {
    width: 100%;
    padding: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .5em;
    text-align: center;
    text-indent: .5em;
}

/* =========================================================================
   8. RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
    .mk-nav {
        display: none;
    }

    .mk-burger {
        display: grid;
    }

    /* Open state: the nav becomes a frosted sheet under the header. */
    .mk-header.is-open .mk-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-1);
        margin: 0;
        padding: var(--sp-4);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--d-3);
    }

    .mk-header.is-open .mk-nav-link {
        padding: var(--sp-3);
    }

    .mk-frame-body {
        grid-template-columns: 1fr;
    }

    .mk-frame-rail {
        display: none;
    }

    /* The tilt is dropped on small screens: at narrow widths the perspective
       distortion costs more legibility than the depth is worth. */
    .mk-frame {
        transform: none;
    }

    /* Auth: drop the marketing aside, keep the form full-width. */
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-aside {
        display: none;
    }

    .auth-card .mk-brand {
        display: inline-flex;
    }
}

@media (max-width: 600px) {
    .mk-wrap {
        padding-inline: var(--sp-4);
    }

    .mk-hero-actions .btn-primary,
    .mk-hero-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .mk-footer-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }

    .mk-footer-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mk-orb,
    .mk-eyebrow-dot,
    .mk-bar {
        animation: none;
    }

    .mk-frame,
    .mk-hero-frame:hover .mk-frame {
        transform: none;
    }

    .mk-card:hover,
    .mk-price-card:hover,
    .mk-social a:hover {
        transform: none;
    }
}