/* =============================================
   Backup Sorcery — the deck pages (presentation, partners)
   Slides are 1920x1080 boxes, scaled to fit the viewport by js/deck.js (--deck-scale).
   The slides keep one fixed look in light and dark mode; the control around them uses the
   site tokens from css/style.css. Loaded together with css/style.css only.
   ============================================= */

.deck {
    --deck-navy:  #102434;
    --deck-blue:  #246A94;
    --deck-light: #F4F7F9;
    --deck-alt:   #E6EFF5;
    --deck-ice:   #8CC4E2;
    --deck-body:  #3E5466;
    --deck-muted: #5E7385;
    --deck-line:  #D6E3EC;
    --deck-pale:  #C9DCE8;
    --deck-dim:   #7E97A8;
}

html.deck-js {
    scroll-snap-type: y mandatory;
    scroll-behavior: auto;
    scroll-padding-top: 0;
}

.deck-body {
    background: var(--bg);
    line-height: 1.4;
}

/* --- Pages: one slide per viewport --- */
.deck-page {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.slide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 1080px;
    transform: translate(-50%, -50%) scale(var(--deck-scale, 1));
    transform-origin: center center;
    overflow: hidden;
    background: var(--deck-light);
    color: var(--deck-navy);
    font-family: var(--font-body);
    font-size: 28px;
    line-height: 1.4;
    text-align: left;
}

/* Without JS: unscaled slides in a horizontally scrollable page (700 px and up; a phone gets the flow layout). */
@media (min-width: 700px) {
    html:not(.deck-js) .deck-page {
        width: 1920px;
        height: 1080px;
    }
    html:not(.deck-js) .slide {
        left: 0;
        top: 0;
        transform: none;
    }
}

.slide-body {
    position: absolute;
    inset: 0;
    padding: 128px 128px 160px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.slide a { color: inherit; }

/* --- Slide themes --- */
.slide--ondisk, .slide--speed, .slide--partneronly { background: var(--deck-alt); }
.slide--cover, .slide--next { background: var(--deck-navy); }
/* Closing slide of the public deck: the only inverted one. White on #246A94 is 5.89:1. */
.slide--cta { background: var(--deck-blue); color: #fff; }
.slide--divider { background: var(--deck-blue); color: var(--deck-light); }

.slide--problem .slide-body { gap: 56px; }
.slide--trust .slide-body { gap: 32px; }
.slide--partneronly .slide-body,
.slide--deal .slide-body { gap: 40px; }

/* --- Footer --- */
.slide-foot {
    position: absolute;
    left: 128px;
    right: 128px;
    bottom: 64px;
    display: flex;
    justify-content: space-between;
    gap: 64px;
    font-size: 24px;
    line-height: 1.2;
    color: var(--deck-muted);
}
.slide--next .slide-foot { color: var(--deck-dim); }
.slide--cta .slide-foot { color: #E3EFF6; } /* 5.03:1 on #246A94 */
.slide--divider .slide-foot { color: #D3E7F3; }
.slide-foot-num { text-align: right; }

/* Public deck: a small, quiet Download pill next to the URL. Not on the cover or the closing slide. */
.slide-foot-pill {
    align-self: center;
    margin-right: auto;
    padding: 6px 22px;
    border: 2px solid var(--deck-blue);
    border-radius: 999px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--deck-blue) !important;
    text-decoration: none;
}
.slide-foot-pill:hover { background: var(--deck-blue); color: #fff !important; }
.slide-foot-pill:focus-visible { outline: 3px solid var(--deck-navy); outline-offset: 4px; }

/* The generation date shows in print only, next to the URL. */
.deck-gen { display: none; }
.deck-gen:empty { display: none; }

/* On screen the control's counter is the slide number. */
.slide-foot-num { visibility: hidden; }

/* --- Type --- */
/* css/style.css has a centred section .eyebrow: the deck one is left-aligned, hence the .slide prefix. */
.slide .eyebrow {
    display: block;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: left;
    color: var(--deck-blue);
    line-height: 1.4;
}
.slide .eyebrow--wide { letter-spacing: 4px; }
.slide .eyebrow--ice { color: var(--deck-ice); }
.slide .eyebrow--pale { color: #D3E7F3; }

.slide h2 {
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
}
.slide h2.h2--sm { font-size: 64px; }
.slide h3 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
}
.slide-head { display: flex; flex-direction: column; gap: 16px; }

.statement {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.3;
}
.statement .accent { color: var(--deck-blue); }
.statement--sm { font-size: 32px; font-weight: 400; line-height: 1.4; }

.caveat { font-size: 24px; line-height: 1.5; color: var(--deck-muted); }
.note { font-size: 26px; line-height: 1.5; color: var(--deck-muted); }

.step {
    font-family: var(--font-mono);
    font-size: 44px;
    line-height: 1.2;
    color: var(--deck-blue);
}

/* --- Cards --- */
.cards { display: grid; gap: 32px; list-style: none; }
.cards--2 { grid-template-columns: 1fr 1fr; }
.cards--3 { grid-template-columns: 1fr 1fr 1fr; }
.cards--4 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; }

.card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #FFFFFF;
    padding: 40px;
    border: 1px solid var(--deck-line);
    border-radius: 16px;
}
.card p { font-size: 28px; line-height: 1.45; color: var(--deck-body); }

.card--figure { border: 0; border-top: 6px solid var(--deck-blue); }
.card--figure .figure {
    font-size: 96px;
    font-weight: 600;
    line-height: 1;
    color: var(--deck-navy);
}

.card--plain { border: 0; }
.card--plain p { font-size: 26px; }

.card--icon { gap: 10px; padding: 28px 32px; }
.card--icon p { font-size: 24px; line-height: 1.4; }
.card--icon .deck-icon { color: var(--deck-blue); }

.card--mini { gap: 8px; padding: 28px 32px; border: 0; border-radius: 12px; }
.card--mini h3 { font-size: 28px; }
.card--mini p { font-size: 24px; line-height: 1.4; }

.card--dark { background: var(--deck-navy); border: 0; }
.card--dark h3 { color: var(--deck-light); }
.card--dark p { color: var(--deck-pale); }

.card--list { gap: 20px; padding: 44px; }
.card--list .list-label {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--deck-muted);
}
.card--list ul { padding-left: 1.3em; list-style: disc; font-size: 30px; line-height: 1.6; color: var(--deck-body); }
.card--list.card--dark .list-label { color: var(--deck-ice); }
.card--list.card--dark ul { font-size: 28px; line-height: 1.5; color: #E3EFF6; }
.card--list-lg h3 { font-size: 36px; }
.card--list-lg ul { font-size: 28px; line-height: 1.55; }

/* --- Slide specifics --- */
.checks {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 64px;
}
.checks li { display: flex; gap: 20px; align-items: flex-start; }
.checks p { font-size: 30px; line-height: 1.4; }
.deck-icon { flex: none; color: var(--deck-blue); }
.checks .deck-icon { margin-top: 2px; }

.slide--ondisk .slide-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.ondisk-text { display: flex; flex-direction: column; gap: 32px; }
.lede { font-size: 30px; line-height: 1.45; color: var(--deck-body); }
.tree-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--deck-navy);
    padding: 48px;
    border-radius: 16px;
}
.tree {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 26px;
    line-height: 1.6;
    white-space: pre;
    color: var(--deck-pale);
}
.tree-hl { color: var(--deck-ice); }
.tree-note { font-size: 24px; color: var(--deck-dim); }

.callout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    background: var(--deck-navy);
    padding: 36px 44px;
    border-radius: 16px;
}
.callout > div { display: flex; flex-direction: column; gap: 12px; }
.callout h3 { font-size: 36px; color: var(--deck-light); }
.callout p { font-size: 24px; line-height: 1.5; color: var(--deck-pale); }
.callout .deck-icon { color: var(--deck-ice); }

.coming { grid-auto-rows: 1fr; }
.coming .card { flex-direction: row; align-items: center; gap: 32px; padding: 44px; }
.coming-item { font-size: 36px; font-weight: 600; line-height: 1.25; }

.steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.step-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 32px;
    border-top: 2px solid var(--deck-ice);
}
.step-col .step { color: var(--deck-ice); }
.step-col h3 { color: var(--deck-light); }
.step-col p:last-child { font-size: 26px; line-height: 1.45; color: var(--deck-pale); }
.signoff { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.signoff-name { font-size: 36px; font-weight: 600; color: var(--deck-light); }
.signoff-line { font-size: 28px; color: var(--deck-pale); }

/* --- Cover, call to action, divider --- */
.slide--cover .slide-body { justify-content: space-between; }
.cover-glow {
    position: absolute;
    top: 0;
    left: 1240px;
    width: 680px;
    height: 1080px;
    background: linear-gradient(160deg, #1b3a52 0%, #102434 70%);
}
.slide--cover .eyebrow, .cover-title, .cover-meta { position: relative; z-index: 1; }
.cover-title { display: flex; flex-direction: column; gap: 32px; max-width: 1300px; }
.slide--cover h1 { font-size: 120px; font-weight: 600; line-height: 1.05; color: var(--deck-light); }
.cover-naming { font-size: 44px; line-height: 1.3; color: var(--deck-pale); }
.cover-sub { font-size: 32px; line-height: 1.4; color: var(--deck-ice); }
.cover-meta { display: flex; gap: 64px; }
.cover-meta > div { display: flex; flex-direction: column; gap: 4px; }
.cover-meta-label { font-size: 24px; color: var(--deck-ice); }
.cover-meta-value { font-size: 32px; font-weight: 600; color: var(--deck-light); }
.cover-conf {
    position: absolute;
    left: 128px;
    bottom: 64px;
    width: 1664px;
    font-size: 24px;
    color: var(--deck-dim);
}

.slide--cta .slide-body { flex-direction: row; align-items: center; gap: 64px; }
.cta-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.slide--cta .eyebrow { color: #fff; }
.slide--cta h2 { font-size: 96px; line-height: 1.05; color: #fff; }
.cta-line { font-size: 40px; line-height: 1.35; color: #fff; max-width: 940px; }
.cta-facts { font-size: 28px; color: #E3EFF6; }
.cta-facts span { white-space: nowrap; }
.cta-alt { font-size: 30px; }
.cta-alt a { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.slide--cta a:focus-visible { outline: 4px solid #fff; outline-offset: 6px; }
.cta-shot {
    flex: none;
    width: 660px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 36, 52, 0.45);
    line-height: 0;
}
.cta-shot img { display: block; width: 100%; height: auto; }
.deck-btn {
    display: inline-block;
    padding: 28px 56px;
    border-radius: 12px;
    background: var(--deck-ice);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--deck-navy) !important;
    text-decoration: none;
}
/* Inverted on the closing slide: #F4F7F9 button, #246A94 text (5.48:1), 5.48:1 against the slide. */
.slide--cta .deck-btn { background: var(--deck-light); color: var(--deck-blue) !important; }

.slide--divider .slide-body { justify-content: center; gap: 40px; }
.slide--next h2 { color: var(--deck-light); }
.slide--divider h2 { font-size: 120px; line-height: 1.05; max-width: 1500px; color: var(--deck-light); }
.divider-sub { font-size: 44px; line-height: 1.35; color: #E3EFF6; max-width: 1400px; }

/* --- The fixed control --- */
.deck-controls {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 14px;
    background: rgba(26, 31, 46, 0.94);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1;
}
.deck-logo { display: flex; align-items: center; margin-right: 6px; }
.deck-logo img { width: 90px; height: auto; }
.deck-count { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.deck-ctl {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}
.deck-ctl--text { font-size: 14px; font-weight: 600; color: var(--bg); background: var(--accent); border-color: var(--accent); }
.deck-ctl:hover:not(:disabled) { border-color: var(--accent); }
.deck-ctl--text:hover:not(:disabled) { background: var(--accent-hover); }
.deck-ctl:disabled { opacity: 0.35; cursor: default; }
.deck-ctl:focus-visible, .deck-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.deck-ctl[hidden] { display: none; }

@media (max-width: 480px) {
    .deck-controls { padding-left: 10px; gap: 4px; }
    .deck-logo img { width: 64px; }
    .deck-ctl-long { display: none; }
}

/* --- Phones (under 700 px): no 1920x1080 boxes, no scaling, no snapping. ---
   Every slide is a section in normal flow, separated by its own background colour; type in rem,
   one column, the 16 px side gutter. Desktop, tablet and print are untouched. */
@media screen and (max-width: 699px) {
    html.deck-js { scroll-snap-type: none; }

    .deck-page {
        height: auto;
        overflow: visible;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    .slide {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        transform: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        line-height: 1.5;
    }
    .slide--cover, .slide--cta, .slide--divider { min-height: 70vh; min-height: 70svh; }

    .slide-body {
        position: static;
        flex: 1 1 auto;
        min-width: 0;
        padding: 3rem 16px 2rem;
        gap: 1.5rem;
    }
    .slide--problem .slide-body,
    .slide--trust .slide-body,
    .slide--partneronly .slide-body,
    .slide--deal .slide-body { gap: 1.5rem; }

    /* Footer: back in the flow, at the bottom of its section. */
    .slide-foot {
        position: static;
        flex: none;
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
        padding: 0 16px 1.25rem;
        font-size: 0.75rem;
    }
    .slide-foot-num { display: none; }
    .deck-page:last-child .slide-foot { padding-bottom: 4.5rem; }

    /* Type */
    .slide .eyebrow { font-size: 0.75rem; letter-spacing: 2px; }
    .slide .eyebrow--wide { letter-spacing: 2px; }
    .slide h2, .slide h2.h2--sm { font-size: 1.6rem; line-height: 1.2; }
    .slide h3 { font-size: 1.125rem; line-height: 1.3; }
    .slide-head { gap: 0.75rem; }
    .statement { font-size: 1.25rem; line-height: 1.4; }
    .statement--sm { font-size: 1rem; }
    .caveat { font-size: 0.875rem; }
    .note { font-size: 0.9375rem; }
    .lede { font-size: 1rem; line-height: 1.5; }
    .step { font-size: 1.5rem; }

    /* One column everywhere */
    .cards, .cards--2, .cards--3, .cards--4, .checks, .steps { grid-template-columns: 1fr; gap: 1rem; }
    .slide--ondisk .slide-body { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; }
    .ondisk-text { gap: 1rem; }

    /* Cards */
    .card, .card--list, .card--plain, .coming .card { padding: 1.25rem; gap: 0.5rem; }
    .card--icon, .card--mini { padding: 1.25rem; }
    .card p, .card--plain p, .card--icon p, .card--mini p { font-size: 1rem; line-height: 1.5; }
    .card--mini h3 { font-size: 1.125rem; }
    .card--figure .figure { font-size: 2.4rem; }
    .card--list ul, .card--list.card--dark ul, .card--list-lg ul { font-size: 1rem; line-height: 1.5; }
    .card--list .list-label { font-size: 0.875rem; }
    .card--list-lg h3 { font-size: 1.25rem; }
    .coming { grid-auto-rows: auto; }
    .coming-item { font-size: 1.125rem; }

    .deck-icon { width: 32px; height: 32px; }
    .checks li { gap: 1rem; }
    .checks p { font-size: 1rem; line-height: 1.5; }

    /* The folder tree scrolls inside its own block, never the page. */
    .tree-box { min-width: 0; padding: 1.25rem; gap: 0.75rem; }
    .tree { font-size: 0.875rem; overflow-x: auto; }
    .tree-note { font-size: 0.875rem; }

    .callout { flex-direction: column; gap: 1rem; padding: 1.25rem; }
    .callout h3 { font-size: 1.125rem; }
    .callout p { font-size: 1rem; line-height: 1.5; }

    .step-col { padding-top: 1rem; gap: 0.5rem; }
    .step-col p:last-child { font-size: 1rem; }
    .signoff-name { font-size: 1.25rem; }
    .signoff-line { font-size: 1rem; overflow-wrap: anywhere; }

    /* Cover, call to action, divider: the gradient panel becomes a band in the flow. */
    .slide--cover .slide-body { justify-content: flex-start; gap: 2rem; }
    .cover-glow {
        position: static;
        display: block;
        flex: none;
        width: 100%;
        height: 4rem;
        background: linear-gradient(160deg, #1b3a52 0%, #102434 70%);
    }
    .cover-title { gap: 1rem; max-width: none; }
    .slide--cover h1 { font-size: 2.4rem; line-height: 1.1; }
    .cover-naming { font-size: 1.25rem; }
    .cover-sub { font-size: 1.0625rem; }
    .cover-meta { flex-wrap: wrap; gap: 1rem 2rem; }
    .cover-meta-label { font-size: 0.875rem; }
    .cover-meta-value { font-size: 1.0625rem; }
    .cover-conf { position: static; width: auto; font-size: 0.875rem; margin-top: auto; }

    .slide--cta .slide-body { flex-direction: column; align-items: stretch; gap: 1.75rem; }
    .cta-main { gap: 1.25rem; }
    .slide--cta h2 { font-size: 2rem; }
    .cta-line { font-size: 1.125rem; max-width: none; }
    .deck-btn { padding: 1rem 1.5rem; border-radius: 10px; font-size: 1.0625rem; }
    .cta-facts { font-size: 0.875rem; }
    .cta-alt { font-size: 1rem; }
    .cta-shot { width: 100%; border-radius: 10px; }
    .slide-foot-pill { padding: 0.5rem 1rem; font-size: 0.875rem; }

    .slide--divider .slide-body { gap: 1rem; }
    .slide--divider h2 { font-size: 2rem; max-width: none; }
    .divider-sub { font-size: 1.125rem; max-width: none; }
}

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

/* --- Print / Save as PDF: one 1920x1080 slide per page, backgrounds on, no control --- */
@page { size: 1920px 1080px; margin: 0; }

@media print {
    html, body { width: 1920px; background: #fff; }
    html.deck-js { scroll-snap-type: none; }
    .deck-controls { display: none !important; }
    .deck-page {
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        break-after: page;
        page-break-after: always;
        break-inside: avoid;
    }
    .deck-page:last-child { break-after: auto; page-break-after: auto; }
    .slide, .slide * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    html.deck-js .slide, html:not(.deck-js) .slide {
        left: 0;
        top: 0;
        transform: none;
    }
    .deck-gen:not(:empty) { display: inline; }
    .deck-gen:not(:empty)::before { content: ' · '; }
    .slide-foot-num { visibility: visible; }
    .slide-foot-pill { display: none; }
}