/* =========================================================
   TARGET CONNECT KEY USER GROUP — TALK DECK
   Static. No build step. No dependencies.
   Brand tokens mirror sunderland-hub.css on purpose.
   ========================================================= */

:root {
    /* --- Brand --- */
    --primary-blue: #0069fa;
    --primary-glow: rgba(0, 105, 250, 0.15);
    --sunderland-orange: #ff7533;
    --sunderland-pink: #e11d48;
    --accent-green: #cfff75;
    --accent-cyan: #42abe8;

    --bg-base: #f0f4f8;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-faint: #94a3b8;

    --glass: rgba(255, 255, 255, 0.68);
    --glass-line: rgba(255, 255, 255, 0.85);
    --hairline: #e2e8f0;

    --ink: #0b1220;
    --code-bg: #0d1526;

    /* Fluid type — everything scales to the projector */
    --u: clamp(9px, 0.83vw, 19px);

    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    font-family: var(--sans);
    color: var(--text-main);
    background-color: var(--bg-base);
    background-image:
        radial-gradient(at 8% 6%,   rgba(0, 105, 250, 0.13) 0px, transparent 42%),
        radial-gradient(at 92% 8%,  rgba(225, 29, 72, 0.09)  0px, transparent 40%),
        radial-gradient(at 50% 96%, rgba(255, 117, 51, 0.12) 0px, transparent 48%);
    background-size: 160% 160%;
    animation: mesh 22s ease-in-out infinite;
    -webkit-font-smoothing: antialiased;
}

@keyframes mesh {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* Decorative brand spark, bottom-right, behind everything */
body::after {
    content: "";
    position: fixed;
    right: -6vmin; bottom: -8vmin;
    width: 34vmin; height: 34vmin;
    background: url('../images/icons/orange-spark.png') no-repeat center / contain;
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
    animation: sparkdrift 30s ease-in-out infinite;
}

@keyframes sparkdrift {
    0%, 100% { transform: rotate(0deg)   scale(1); }
    50%      { transform: rotate(14deg)  scale(1.06); }
}

/* =========================================================
   CHROME — logo, progress, timer
   ========================================================= */

.chrome {
    position: fixed;
    inset: 0 0 auto 0;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 1.6);
    padding: calc(var(--u) * 1.5) calc(var(--u) * 2.4);
    z-index: 60;
    pointer-events: none;
}

.chrome-logo {
    width: calc(var(--u) * 5.6);
    flex: none;
    opacity: 0.78;
}
.chrome-logo svg,
.chrome-logo img { width: 100%; height: auto; display: block; }

.chrome-event {
    font-size: calc(var(--u) * 0.82);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

.progress {
    display: flex;
    gap: calc(var(--u) * 0.42);
    margin-left: auto;
    align-items: center;
}

.progress-seg {
    width: calc(var(--u) * 1.5);
    height: calc(var(--u) * 0.28);
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.14);
    transition: all 0.5s var(--ease);
}
.progress-seg.done { background: rgba(15, 23, 42, 0.34); }
.progress-seg.now  { background: var(--primary-blue); width: calc(var(--u) * 3.4); }

.timer {
    font-family: var(--mono);
    font-size: calc(var(--u) * 1.05);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--glass-line);
    padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8);
    border-radius: 99px;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: calc(var(--u) * 5);
    text-align: center;
}
.timer.running { color: var(--text-main); }
.timer.warn    { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.timer.danger  { color: #fff; background: var(--sunderland-pink); border-color: transparent; animation: pulse 1.6s ease-in-out infinite; }
.timer.hidden  { opacity: 0; }

@keyframes pulse { 50% { opacity: 0.72; } }

/* =========================================================
   SLIDES
   ========================================================= */

.deck { position: relative; height: 100%; z-index: 1; }

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--u) * 6) calc(var(--u) * 5.5) calc(var(--u) * 4.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--u) * 1.6));
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), visibility 0.55s;
}
.slide.active { opacity: 1; visibility: visible; transform: none; }
.slide.past   { transform: translateY(calc(var(--u) * -1.6)); }

.slide-inner {
    width: 100%;
    max-width: calc(var(--u) * 92);
    margin: 0 auto;
}
.slide[data-type="build"] .slide-inner { max-width: none; height: 100%; }

/* --- Shared typographic furniture --- */

.kicker {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 0.6);
    font-size: calc(var(--u) * 0.86);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: calc(var(--u) * 1.6);
}
.kicker::before {
    content: "";
    width: calc(var(--u) * 2.2);
    height: 2px;
    background: var(--sunderland-orange);
}

h1.headline {
    font-size: calc(var(--u) * 5.4);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.035em;
    margin: 0 0 calc(var(--u) * 1.8);
    text-wrap: balance;
}
h1.headline em { font-style: normal; color: var(--primary-blue); }

.sub {
    font-size: calc(var(--u) * 1.75);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-muted);
    margin: 0 0 calc(var(--u) * 2.2);
    max-width: 34ch;
    text-wrap: balance;
}

.footnote {
    font-size: calc(var(--u) * 1.05);
    font-weight: 600;
    color: var(--text-faint);
    border-left: 3px solid var(--accent-green);
    padding-left: calc(var(--u) * 1);
    max-width: 52ch;
}

.hl {
    background: var(--accent-green);
    padding: 0 calc(var(--u) * 0.4);
    border-radius: calc(var(--u) * 0.25);
    box-shadow: 0 calc(var(--u) * 0.3) calc(var(--u) * 1.2) rgba(207, 255, 117, 0.5);
}

/* --- type: statement --- */
.slide[data-type="statement"] h1.headline { font-size: calc(var(--u) * 8); }
.slide[data-variant="close"] h1.headline  { font-size: calc(var(--u) * 6.4); }

/* --- type: argument --- */
.arg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 1.8);
    margin-bottom: calc(var(--u) * 2.2);
}

.arg-card {
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-radius: calc(var(--u) * 1.2);
    padding: calc(var(--u) * 2);
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(15, 23, 42, 0.06);
}
.arg-card .arg-icon {
    display: inline-grid;
    place-items: center;
    width: calc(var(--u) * 2.1);
    height: calc(var(--u) * 2.1);
    border-radius: 50%;
    font-size: calc(var(--u) * 1.1);
    font-weight: 900;
    margin-bottom: calc(var(--u) * 0.9);
}
.arg-card[data-tone="bad"]  .arg-icon { background: #fee2e2; color: #b91c1c; }
.arg-card[data-tone="good"] .arg-icon { background: var(--accent-green); color: #14532d; }
.arg-card[data-tone="good"] { border-color: rgba(0, 105, 250, 0.28); }

.arg-card h3 {
    font-size: calc(var(--u) * 1.45);
    font-weight: 800;
    margin: 0 0 calc(var(--u) * 0.7);
    letter-spacing: -0.02em;
}
.arg-card p {
    font-size: calc(var(--u) * 1.08);
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}
.arg-card em { font-style: normal; color: var(--text-main); font-weight: 700; }

.pull {
    font-size: calc(var(--u) * 2);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
    max-width: 40ch;
    text-wrap: balance;
}
.pull::before { content: "“"; color: var(--sunderland-orange); }
.pull::after  { content: "”"; color: var(--sunderland-orange); }

/* --- type: grid --- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--u) * 1.6);
    margin-bottom: calc(var(--u) * 2.4);
}
.stat-card {
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-radius: calc(var(--u) * 1.2);
    padding: calc(var(--u) * 1.9);
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(15, 23, 42, 0.06);
}
.stat-card .stat-num {
    font-size: calc(var(--u) * 4.6);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--primary-blue);
    display: block;
    margin-bottom: calc(var(--u) * 0.5);
}
.stat-card .stat-lab {
    font-size: calc(var(--u) * 0.85);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-main);
    display: block;
    margin-bottom: calc(var(--u) * 0.8);
}
.stat-card p {
    font-size: calc(var(--u) * 1);
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

/* --- type: list --- */
.num-list { display: grid; gap: calc(var(--u) * 1.3); }
.num-item {
    display: grid;
    grid-template-columns: calc(var(--u) * 5) 1fr;
    gap: calc(var(--u) * 1.6);
    align-items: start;
    padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6);
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-radius: calc(var(--u) * 1.1);
}
.num-item .n {
    font-family: var(--mono);
    font-size: calc(var(--u) * 2.4);
    font-weight: 700;
    color: var(--sunderland-orange);
    line-height: 1;
}
.num-item h3 {
    font-size: calc(var(--u) * 1.5);
    font-weight: 800;
    margin: 0 0 calc(var(--u) * 0.35);
    letter-spacing: -0.02em;
}
.num-item p {
    font-size: calc(var(--u) * 1.05);
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
    line-height: 1.45;
}

/* =========================================================
   THE BUILD SCREEN
   ========================================================= */

.build-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: calc(var(--u) * 1.2);
    height: 100%;
}

/* --- rail: the four switches + the current question --- */
.build-rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: calc(var(--u) * 2.4);
    align-items: center;
}

.switches { display: flex; gap: calc(var(--u) * 0.7); }

.switch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--u) * 0.45);
    padding: calc(var(--u) * 0.85) calc(var(--u) * 1.3);
    min-width: calc(var(--u) * 8.4);
    border-radius: calc(var(--u) * 0.85);
    border: 1.5px solid var(--hairline);
    background: rgba(255, 255, 255, 0.55);
    font-family: var(--sans);
    font-size: calc(var(--u) * 1.15);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-faint);
    cursor: pointer;
    transition: all 0.4s var(--ease);
}
.switch:hover { border-color: #cbd5e1; transform: translateY(-2px); }

.switch .led {
    width: 100%;
    height: calc(var(--u) * 0.34);
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.1);
    transition: all 0.45s var(--ease);
}

.switch.on {
    color: var(--text-main);
    border-color: var(--primary-blue);
    background: #fff;
    box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.6) var(--primary-glow);
}
.switch.on .led { background: var(--primary-blue); }

.switch.current {
    transform: translateY(calc(var(--u) * -0.3)) scale(1.04);
    box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2.2) rgba(0, 105, 250, 0.28);
}
.switch.current .led { background: var(--sunderland-orange); }

.rail-copy { min-width: 0; }
.rail-q {
    font-size: calc(var(--u) * 2.5);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0;
}
.rail-a {
    font-size: calc(var(--u) * 1.12);
    font-weight: 600;
    color: var(--text-muted);
    margin: calc(var(--u) * 0.3) 0 0;
}
.rail-copy.swap { animation: swapin 0.5s var(--ease); }
@keyframes swapin {
    from { opacity: 0; transform: translateX(calc(var(--u) * -1)); }
    to   { opacity: 1; transform: none; }
}

/* --- panes --- */
.build-panes {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: calc(var(--u) * 1.3);
    min-height: 0;
}

.pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: calc(var(--u) * 1.1);
    overflow: hidden;
    box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3.5) rgba(15, 23, 42, 0.1);
}

.pane-head {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.7);
    padding: calc(var(--u) * 0.75) calc(var(--u) * 1.1);
    font-family: var(--mono);
    font-size: calc(var(--u) * 0.82);
    font-weight: 600;
    flex: none;
}

/* Code pane */
.pane-code { background: var(--code-bg); }
.pane-code .pane-head {
    background: rgba(255, 255, 255, 0.05);
    color: #64748b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pane-code .file-name { color: #cbd5e1; font-weight: 700; white-space: nowrap; flex: none; }
.pane-code .file-note {
    color: #475569;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.btn-real {
    margin-left: auto;
    font-family: var(--sans);
    font-size: calc(var(--u) * 0.78);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-green);
    background: rgba(207, 255, 117, 0.12);
    border: 1px solid rgba(207, 255, 117, 0.3);
    padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8);
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-real:hover { background: rgba(207, 255, 117, 0.24); }

.code-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2);
    font-family: var(--mono);
    font-size: calc(var(--u) * 0.95);
    line-height: 1.62;
    color: #cbd5e1;
    tab-size: 2;
}
.code-body::-webkit-scrollbar { width: 8px; }
.code-body::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 99px; }

.code-line { display: block; white-space: pre; }
.code-line.blank { height: 0.6em; }
.code-line.enter { animation: linein 0.5s var(--ease) backwards; }
@keyframes linein {
    from { opacity: 0; transform: translateX(calc(var(--u) * -0.8)); }
    to   { opacity: 1; transform: none; }
}

/* Naive but effective syntax colouring */
.t-tag  { color: #7dd3fc; }
.t-attr { color: #cfff75; }
.t-str  { color: #fdba74; }
.t-key  { color: #7dd3fc; }
.t-num  { color: #f9a8d4; }
.t-com  { color: #64748b; font-style: italic; }
.t-kw   { color: #c4b5fd; }
.t-fn   { color: #fcd34d; }

/* the JSON value the presenter can edit live */
.editable {
    color: #f9a8d4;
    background: rgba(249, 168, 212, 0.1);
    border-bottom: 1.5px dashed rgba(249, 168, 212, 0.5);
    padding: 0 3px;
    border-radius: 3px;
    outline: none;
    cursor: text;
}
.editable:focus { background: rgba(249, 168, 212, 0.22); }

/* Preview pane */
.pane-preview { background: #fff; border: 1px solid var(--glass-line); }
.pane-preview .pane-head {
    background: #f1f5f9;
    border-bottom: 1px solid var(--hairline);
    color: var(--text-faint);
}
.dots { display: flex; gap: calc(var(--u) * 0.3); margin-right: calc(var(--u) * 0.5); }
.dots i { width: calc(var(--u) * 0.55); height: calc(var(--u) * 0.55); border-radius: 50%; background: #cbd5e1; }
.url-bar {
    flex: 1;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 99px;
    padding: calc(var(--u) * 0.2) calc(var(--u) * 0.8);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-dot {
    display: none;
    align-items: center;
    gap: calc(var(--u) * 0.35);
    font-family: var(--sans);
    font-weight: 800;
    font-size: calc(var(--u) * 0.75);
    letter-spacing: 0.1em;
    color: #166534;
    background: #dcfce7;
    padding: calc(var(--u) * 0.2) calc(var(--u) * 0.7);
    border-radius: 99px;
    flex: none;
}
.live-dot.show { display: flex; }
.live-dot.cached { color: #92400e; background: #fef3c7; }
.live-dot i {
    width: calc(var(--u) * 0.45); height: calc(var(--u) * 0.45);
    border-radius: 50%; background: currentColor;
    animation: pulse 1.4s ease-in-out infinite;
}

.preview-frame { flex: 1; min-height: 0; position: relative; background: #fff; }
.preview-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- brand strip: "one file, thirty tools" --- */
.brand-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--u) * 1.6);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s var(--ease), opacity 0.5s var(--ease);
}
.brand-strip.show { max-height: calc(var(--u) * 7); opacity: 1; }

.swatches { display: flex; align-items: center; gap: calc(var(--u) * 0.55); }
.swatch-label {
    font-size: calc(var(--u) * 0.8);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-right: calc(var(--u) * 0.4);
    white-space: nowrap;
}
.swatch {
    width: calc(var(--u) * 1.9);
    height: calc(var(--u) * 1.9);
    border-radius: calc(var(--u) * 0.55);
    border: 2px solid #fff;
    box-shadow: 0 calc(var(--u) * 0.25) calc(var(--u) * 0.9) rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: transform 0.25s var(--ease);
    padding: 0;
}
.swatch:hover  { transform: scale(1.16) rotate(-4deg); }
.swatch.active { transform: scale(1.2); box-shadow: 0 0 0 3px var(--bg-base), 0 0 0 5px currentColor; }

.mini-tools { display: flex; gap: calc(var(--u) * 0.7); min-width: 0; }
.mini {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: calc(var(--u) * 0.7);
    padding: calc(var(--u) * 0.6);
    box-shadow: 0 calc(var(--u) * 0.3) calc(var(--u) * 1) rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.mini .mini-bar {
    height: calc(var(--u) * 1.5);
    border-radius: calc(var(--u) * 0.35);
    background: var(--demo-accent, var(--primary-blue));
    margin-bottom: calc(var(--u) * 0.45);
    transition: background 0.55s var(--ease);
    display: flex;
    align-items: center;
    padding: 0 calc(var(--u) * 0.5);
}
.mini .mini-bar span {
    font-size: calc(var(--u) * 0.62);
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}
.mini .mini-rows { display: grid; gap: calc(var(--u) * 0.3); }
.mini .mini-rows i { height: calc(var(--u) * 0.3); border-radius: 99px; background: #e2e8f0; display: block; }
.mini .mini-rows i:nth-child(2) { width: 72%; }
.mini .mini-pill {
    margin-top: calc(var(--u) * 0.45);
    height: calc(var(--u) * 0.75);
    width: 46%;
    border-radius: 99px;
    background: var(--demo-accent, var(--primary-blue));
    opacity: 0.18;
    transition: background 0.55s var(--ease);
}

/* =========================================================
   SPEAKER NOTES
   ========================================================= */

.notes {
    position: fixed;
    left: calc(var(--u) * 2);
    bottom: calc(var(--u) * 2);
    width: calc(var(--u) * 40);
    max-height: 76vh;
    background: rgba(11, 18, 32, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #e2e8f0;
    border-radius: calc(var(--u) * 1);
    padding: calc(var(--u) * 1.5);
    z-index: 80;
    box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--u) * 1.5));
    transition: all 0.35s var(--ease);
    overflow: auto;
}
.notes.show { opacity: 1; visibility: visible; transform: none; }

.notes-head {
    display: flex;
    align-items: baseline;
    gap: calc(var(--u) * 0.7);
    margin-bottom: calc(var(--u) * 0.9);
    padding-bottom: calc(var(--u) * 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.notes-cue {
    font-family: var(--mono);
    font-size: calc(var(--u) * 1.1);
    font-weight: 700;
    color: var(--accent-green);
}
.notes-title {
    font-size: calc(var(--u) * 0.8);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}
.notes-layer {
    margin-left: auto;
    font-size: calc(var(--u) * 0.78);
    font-weight: 800;
    color: var(--sunderland-orange);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The three lines to actually say, at a glance. Detail lives underneath. */
.notes-beats {
    margin: 0 0 calc(var(--u) * 1);
    padding: calc(var(--u) * 0.8) calc(var(--u) * 0.9) calc(var(--u) * 0.8) calc(var(--u) * 2.2);
    display: grid;
    gap: calc(var(--u) * 0.45);
    background: rgba(255, 255, 255, 0.05);
    border-radius: calc(var(--u) * 0.6);
    counter-reset: beat;
    list-style: none;
}
.notes-beats:empty { display: none; }
.notes-beats li {
    position: relative;
    font-size: calc(var(--u) * 1);
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}
.notes-beats li::before {
    counter-increment: beat;
    content: counter(beat);
    position: absolute;
    left: calc(var(--u) * -1.3);
    top: 0.1em;
    font-family: var(--mono);
    font-size: 0.8em;
    font-weight: 700;
    color: var(--sunderland-orange);
}
.notes-beats em { font-style: normal; color: var(--accent-green); }

.notes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * 0.7); }
.notes li {
    font-size: calc(var(--u) * 0.95);
    line-height: 1.5;
    padding-left: calc(var(--u) * 0.9);
    border-left: 2px solid rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
}
.notes li.shout {
    border-left-color: var(--sunderland-orange);
    color: #fff;
    font-weight: 600;
}
.notes li.quote { border-left-color: var(--accent-green); color: #e2e8f0; font-style: italic; }
.notes li.todo  { border-left-color: var(--sunderland-pink); color: #fecdd3; font-weight: 700; }

.notes-next {
    margin-top: calc(var(--u) * 1);
    padding-top: calc(var(--u) * 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: calc(var(--u) * 0.82);
    color: #64748b;
}
.notes-next b { color: #94a3b8; font-weight: 700; }

/* =========================================================
   OVERLAYS — real file viewer, overview, help
   ========================================================= */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(11, 18, 32, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: calc(var(--u) * 4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease);
}
.overlay.show { opacity: 1; visibility: visible; }

.overlay-card {
    background: var(--code-bg);
    border-radius: calc(var(--u) * 1.1);
    width: 100%;
    max-width: calc(var(--u) * 78);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(0, 0, 0, 0.45);
}
.overlay-head {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.8);
    padding: calc(var(--u) * 1) calc(var(--u) * 1.3);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--mono);
    font-size: calc(var(--u) * 0.9);
    color: #cbd5e1;
    font-weight: 700;
}
.overlay-head .muted { color: #475569; font-weight: 400; font-style: italic; }
.overlay-close {
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #94a3b8;
    width: calc(var(--u) * 1.9);
    height: calc(var(--u) * 1.9);
    border-radius: 50%;
    cursor: pointer;
    font-size: calc(var(--u) * 1);
    line-height: 1;
}
.overlay-close:hover { color: #fff; border-color: #fff; }

.overlay-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: calc(var(--u) * 1.2);
    font-family: var(--mono);
    font-size: calc(var(--u) * 0.72);
    line-height: 1.55;
    color: #94a3b8;
    white-space: pre;
    counter-reset: ln;
}
.overlay-body .ln { display: block; }
.overlay-body .ln::before {
    counter-increment: ln;
    content: counter(ln);
    display: inline-block;
    width: 4ch;
    margin-right: 1.5ch;
    color: #334155;
    text-align: right;
}
.overlay-body .ln.hit { background: rgba(0, 105, 250, 0.16); color: #e2e8f0; }

/* Overview grid */
.ov-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--u) * 1.2);
    width: 100%;
    max-width: calc(var(--u) * 80);
}
.ov-item {
    background: var(--glass);
    border: 1.5px solid var(--glass-line);
    border-radius: calc(var(--u) * 0.9);
    padding: calc(var(--u) * 1.2);
    cursor: pointer;
    text-align: left;
    font-family: var(--sans);
    transition: all 0.25s var(--ease);
}
.ov-item:hover { transform: translateY(-3px); border-color: var(--primary-blue); }
.ov-item.now   { border-color: var(--primary-blue); box-shadow: 0 0 0 3px var(--primary-glow); }
.ov-item .ov-cue {
    font-family: var(--mono);
    font-size: calc(var(--u) * 0.85);
    font-weight: 700;
    color: var(--sunderland-orange);
    display: block;
}
.ov-item .ov-name {
    font-size: calc(var(--u) * 1.05);
    font-weight: 800;
    color: var(--text-main);
    display: block;
    margin-top: calc(var(--u) * 0.3);
    letter-spacing: -0.01em;
}

/* Help */
.help-card {
    background: rgba(11, 18, 32, 0.96);
    color: #cbd5e1;
    border-radius: calc(var(--u) * 1);
    padding: calc(var(--u) * 2);
    max-width: calc(var(--u) * 34);
}
.help-card h3 { margin: 0 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.4); color: #fff; }
.help-card dl { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 0.6) calc(var(--u) * 1.2); margin: 0; font-size: calc(var(--u) * 0.95); }
.help-card dt {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--accent-green);
    background: rgba(255, 255, 255, 0.06);
    padding: 0 calc(var(--u) * 0.5);
    border-radius: calc(var(--u) * 0.3);
    justify-self: start;
}
.help-card dd { margin: 0; color: #94a3b8; }

/* Boot / error */
.boot {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 100;
    background: var(--bg-base);
    text-align: center;
    padding: calc(var(--u) * 4);
    transition: opacity 0.4s ease, visibility 0.4s;
}
.boot.gone { opacity: 0; visibility: hidden; }
.boot h2 { font-size: calc(var(--u) * 2); margin: 0 0 calc(var(--u) * 1); font-weight: 900; letter-spacing: -0.02em; }
.boot p  { color: var(--text-muted); font-size: calc(var(--u) * 1.1); max-width: 54ch; margin: 0 auto calc(var(--u) * 0.8); line-height: 1.5; }
.boot code {
    font-family: var(--mono);
    background: var(--ink);
    color: var(--accent-green);
    padding: calc(var(--u) * 0.3) calc(var(--u) * 0.7);
    border-radius: calc(var(--u) * 0.4);
    font-size: calc(var(--u) * 0.95);
    display: inline-block;
    margin-top: calc(var(--u) * 0.6);
}

/* Hint on the title slide only */
.hint {
    position: fixed;
    bottom: calc(var(--u) * 2);
    left: 50%;
    transform: translateX(-50%);
    font-size: calc(var(--u) * 0.85);
    font-weight: 600;
    color: var(--text-faint);
    z-index: 55;
    transition: opacity 0.4s ease;
    letter-spacing: 0.04em;
}
.hint.gone { opacity: 0; }
.hint kbd {
    font-family: var(--mono);
    background: rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: calc(var(--u) * 0.3);
    padding: 1px calc(var(--u) * 0.4);
    font-size: 0.92em;
}

/* =========================================================
   GUIDE BUTTON (chrome)
   ========================================================= */
.chrome-guide {
    font-family: var(--sans);
    font-size: calc(var(--u) * 0.82);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--primary-blue);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--glass-line);
    padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9);
    border-radius: 99px;
    pointer-events: auto;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.chrome-guide:hover { background: #fff; transform: translateY(-1px); }

/* =========================================================
   type: lead
   ========================================================= */
.slide[data-type="lead"] h1.headline { font-size: calc(var(--u) * 4.4); max-width: 24ch; }
.lead-body { display: grid; gap: calc(var(--u) * 1.1); max-width: 42ch; margin-top: calc(var(--u) * 1.8); }
.lead-body p {
    font-size: calc(var(--u) * 1.4);
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
    padding-left: calc(var(--u) * 1.1);
    border-left: 3px solid var(--sunderland-orange);
}
.lead-body p:first-child { color: var(--text-main); font-weight: 600; }

/* =========================================================
   type: ecosystem
   ========================================================= */
.slide[data-type="ecosystem"] .slide-inner { max-width: calc(var(--u) * 88); }
.eco-note {
    font-size: calc(var(--u) * 1.15);
    font-weight: 500;
    color: var(--text-muted);
    max-width: 52ch;
    margin: calc(var(--u) * -0.6) 0 calc(var(--u) * 1.8);
    line-height: 1.45;
    min-height: calc(var(--u) * 3.4);
}
.eco-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--u) * 1.2);
}
.eco-tool {
    border-radius: calc(var(--u) * 0.9);
    overflow: hidden;
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(15, 23, 42, 0.12);
    transition: all 0.6s var(--ease);
    display: flex;
    flex-direction: column;
    min-height: calc(var(--u) * 15);
}
.eco-tool .et-bar {
    padding: calc(var(--u) * 0.8) calc(var(--u) * 1);
    font-weight: 800;
    font-size: calc(var(--u) * 1.05);
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 0.5);
    transition: all 0.6s var(--ease);
}
.eco-tool .et-body { padding: calc(var(--u) * 1); flex: 1; transition: all 0.6s var(--ease); }
.eco-tool .et-tag { font-size: calc(var(--u) * 0.85); margin: 0 0 calc(var(--u) * 0.9); transition: all 0.6s var(--ease); }
.eco-tool .et-row { height: calc(var(--u) * 0.55); border-radius: 99px; margin-bottom: calc(var(--u) * 0.5); opacity: 0.55; transition: all 0.6s var(--ease); }
.eco-tool .et-row.short { width: 62%; }
.eco-tool .et-btn {
    margin-top: calc(var(--u) * 1);
    padding: calc(var(--u) * 0.5) calc(var(--u) * 1);
    font-weight: 800;
    font-size: calc(var(--u) * 0.82);
    display: inline-block;
    transition: all 0.6s var(--ease);
}

/* --- Clashing states: four tools that share nothing --- */
.eco-tool.clash-a { font-family: 'Comic Sans MS', 'Poppins', cursive; border: 3px solid #ff2d95; border-radius: calc(var(--u) * 2); }
.eco-tool.clash-a .et-bar { background: #ff2d95; color: #fffb00; }
.eco-tool.clash-a .et-body { background: #fff0f8; }
.eco-tool.clash-a .et-row { background: #ff2d95; }
.eco-tool.clash-a .et-btn { background: #fffb00; color: #ff2d95; border-radius: 99px; }

.eco-tool.clash-b { font-family: var(--mono); border-radius: 0; }
.eco-tool.clash-b .et-bar { background: #0b0f0a; color: #39ff14; border-bottom: 1px solid #39ff14; }
.eco-tool.clash-b .et-body { background: #0b0f0a; }
.eco-tool.clash-b .et-tag { color: #39ff14; }
.eco-tool.clash-b .et-row { background: #39ff14; }
.eco-tool.clash-b .et-btn { background: transparent; color: #39ff14; border: 1px solid #39ff14; }

.eco-tool.clash-c { font-family: Georgia, 'Times New Roman', serif; border-radius: 0; border: 1px solid #1e293b; }
.eco-tool.clash-c .et-bar { background: #14233b; color: #c9a24b; }
.eco-tool.clash-c .et-body { background: #f4f1ea; }
.eco-tool.clash-c .et-tag { color: #14233b; font-style: italic; }
.eco-tool.clash-c .et-row { background: #14233b; }
.eco-tool.clash-c .et-btn { background: #c9a24b; color: #14233b; }

.eco-tool.clash-d { font-family: 'Times New Roman', serif; border-radius: calc(var(--u) * 0.4); }
.eco-tool.clash-d .et-bar { background: #ffd9b3; color: #7a3e00; }
.eco-tool.clash-d .et-body { background: #fff7ee; }
.eco-tool.clash-d .et-tag { color: #a56a2b; }
.eco-tool.clash-d .et-row { background: #e8a866; }
.eco-tool.clash-d .et-btn { background: #7a3e00; color: #ffd9b3; }

/* --- Unified: every tool snaps to the brand --- */
.eco-grid.unified .eco-tool {
    font-family: var(--sans) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: calc(var(--u) * 0.9) !important;
    box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 3.5) var(--primary-glow);
}
.eco-grid.unified .eco-tool .et-bar { background: var(--primary-blue) !important; color: #fff !important; border: none !important; }
.eco-grid.unified .eco-tool .et-body { background: #fff !important; }
.eco-grid.unified .eco-tool .et-tag { color: var(--text-muted) !important; font-style: normal !important; }
.eco-grid.unified .eco-tool .et-row { background: #e2e8f0 !important; }
.eco-grid.unified .eco-tool .et-btn { background: var(--accent-green) !important; color: #14532d !important; border: none !important; border-radius: 99px !important; }

.eco-hint {
    margin-top: calc(var(--u) * 1.6);
    font-size: calc(var(--u) * 0.9);
    font-weight: 700;
    color: var(--text-faint);
    letter-spacing: 0.04em;
    transition: opacity 0.4s ease;
}
.eco-hint.gone { opacity: 0; }

/* =========================================================
   type: recap — wraps up the four-switch section
   ========================================================= */
.recap-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--u) * 1.4);
    margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 2.4);
}
.recap-card {
    font-family: var(--sans);
    text-align: left;
    cursor: pointer;
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-top: 5px solid var(--rc-accent, var(--primary-blue));
    border-radius: calc(var(--u) * 1.1);
    padding: calc(var(--u) * 1.9) calc(var(--u) * 1.6);
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(15, 23, 42, 0.06);
    opacity: 0;
    transform: translateY(calc(var(--u) * 1.2));
    animation: capIn 0.5s var(--ease) forwards;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.recap-card[data-accent="blue"]   { --rc-accent: var(--primary-blue); }
.recap-card[data-accent="orange"] { --rc-accent: var(--sunderland-orange); }
.recap-card[data-accent="green"]  { --rc-accent: #7bb800; }
.recap-card[data-accent="pink"]   { --rc-accent: var(--sunderland-pink); }
.slide.active .recap-card:nth-child(1) { animation-delay: 0.08s; }
.slide.active .recap-card:nth-child(2) { animation-delay: 0.2s; }
.slide.active .recap-card:nth-child(3) { animation-delay: 0.32s; }
.slide.active .recap-card:nth-child(4) { animation-delay: 0.44s; }
.recap-card:hover,
.recap-card.active {
    transform: translateY(calc(var(--u) * -0.5));
    box-shadow: 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(15, 23, 42, 0.14);
    background: #fff;
}
.recap-card.active { box-shadow: 0 0 0 2px var(--rc-accent), 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(15, 23, 42, 0.14); }
.rc-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: calc(var(--u) * 0.92);
    font-weight: 700;
    color: var(--rc-accent, var(--primary-blue));
    margin-bottom: calc(var(--u) * 0.9);
}
.rc-word {
    display: block;
    font-size: calc(var(--u) * 2.3);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: calc(var(--u) * 0.4);
}
.rc-note {
    display: block;
    font-size: calc(var(--u) * 1.02);
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.4;
}

/* the panel that expands into the space below on hover */
.recap-detail {
    --rd-accent: var(--primary-blue);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin 0.4s var(--ease);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: calc(var(--u) * 2);
    align-items: center;
}
.recap-detail[data-accent="blue"]   { --rd-accent: var(--primary-blue); }
.recap-detail[data-accent="orange"] { --rd-accent: var(--sunderland-orange); }
.recap-detail[data-accent="green"]  { --rd-accent: #7bb800; }
.recap-detail[data-accent="pink"]   { --rd-accent: var(--sunderland-pink); }
.recap-detail.show {
    max-height: calc(var(--u) * 20);
    opacity: 1;
    margin-top: calc(var(--u) * 0.5);
}
.rd-code {
    background: var(--code-bg);
    border-radius: calc(var(--u) * 0.9);
    border-left: 5px solid var(--rd-accent);
    padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5);
    font-family: var(--mono);
    font-size: calc(var(--u) * 1.05);
    line-height: 1.7;
    color: #cbd5e1;
    overflow: auto;
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(15, 23, 42, 0.12);
}
.rd-cap {
    font-size: calc(var(--u) * 1.5);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0;
    border-left: 4px solid var(--rd-accent);
    padding-left: calc(var(--u) * 1.1);
}
.recap-hint {
    font-size: calc(var(--u) * 0.95);
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: 0.02em;
    margin: calc(var(--u) * 1.6) 0 0;
    transition: opacity 0.3s ease;
}
.recap-hint::before { content: "↑ "; }
.recap-hint.gone { opacity: 0; }

/* =========================================================
   type: capabilities
   ========================================================= */
.slide[data-type="capabilities"] h1.headline { font-size: calc(var(--u) * 5.2); }
.cap-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--u) * 1.8);
    margin: calc(var(--u) * 1.4) 0 calc(var(--u) * 2.6);
    max-width: calc(var(--u) * 70);
}
.cap {
    background: var(--glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-radius: calc(var(--u) * 1.3);
    padding: calc(var(--u) * 2.4) calc(var(--u) * 2.2);
    box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(15, 23, 42, 0.06);
    position: relative;
    opacity: 0;
    transform: translateY(calc(var(--u) * 1.2));
    animation: capIn 0.5s var(--ease) forwards;
}
.slide.active .cap:nth-child(1) { animation-delay: 0.1s; }
.slide.active .cap:nth-child(2) { animation-delay: 0.25s; }
.slide.active .cap:nth-child(3) { animation-delay: 0.4s; }
@keyframes capIn { to { opacity: 1; transform: none; } }
.cap .cap-icon {
    display: inline-grid;
    place-items: center;
    width: calc(var(--u) * 3.4);
    height: calc(var(--u) * 3.4);
    border-radius: calc(var(--u) * 0.9);
    background: #fee2e2;
    color: #b91c1c;
    font-family: var(--mono);
    font-size: calc(var(--u) * 1.8);
    font-weight: 700;
    margin-bottom: calc(var(--u) * 1.3);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
.cap .cap-label { display: block; font-size: calc(var(--u) * 2.1); font-weight: 900; letter-spacing: -0.03em; margin-bottom: calc(var(--u) * 0.5); }
.cap .cap-note { display: block; font-size: calc(var(--u) * 1.15); color: var(--text-muted); font-weight: 500; line-height: 1.4; }
.cap-punch {
    font-size: calc(var(--u) * 2.8);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--primary-blue);
    margin: 0;
    opacity: 0;
    animation: capIn 0.6s var(--ease) 0.6s forwards;
}

/* =========================================================
   type: showcase
   ========================================================= */
.slide[data-type="showcase"] .slide-inner { max-width: none; height: 100%; }
.show-stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: calc(var(--u) * 1.1); height: 100%; }
.show-head { display: flex; align-items: baseline; gap: calc(var(--u) * 1.4); flex-wrap: wrap; }
.show-head .show-name { font-size: calc(var(--u) * 2.6); font-weight: 900; letter-spacing: -0.03em; margin: 0; }
.show-head .show-blurb { font-size: calc(var(--u) * 1.15); font-weight: 500; color: var(--text-muted); margin: 0; flex: 1; min-width: 40ch; line-height: 1.4; }
.show-concept {
    display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5);
    font-size: calc(var(--u) * 0.82); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--primary-blue);
}
.show-concept::before { content: ""; width: calc(var(--u) * 1.6); height: 2px; background: var(--sunderland-orange); }

.show-frames {
    display: grid; gap: calc(var(--u) * 1.4); min-height: 0;
    align-content: center; justify-items: center;
}
.show-frames[data-count="1"] { grid-template-columns: minmax(0, calc(var(--u) * 66)); justify-content: center; }
.show-frames[data-count="1"][data-wide="1"] { grid-template-columns: minmax(0, 1fr); width: 100%; }
.show-frames[data-count="2"] { grid-template-columns: 1fr 1fr; width: 100%; }
.show-frames[data-stack="1"] { grid-template-columns: minmax(0, calc(var(--u) * 52)); width: 100%; justify-content: center; }
.show-frames[data-stack="1"] .show-frame { width: 100%; }

/* Fill mode: a page that sizes itself (e.g. the SharePoint mock) takes the whole area */
.show-frames[data-fill="1"] { align-content: stretch; height: 100%; }
.show-frames[data-fill="1"] .show-frame { height: 100%; max-height: 100%; }
.show-frames[data-fill="1"] .show-frame iframe { height: 100%; }

/* The tool draws its own cards; let the deck's gradient show through behind it. */
.show-frame {
    position: relative; width: 100%; max-height: 100%; min-height: 0;
    background: transparent;
}
.show-frame iframe { display: block; width: 100%; height: calc(var(--u) * 26); border: 0; background: transparent; }

/* screenshot fallback + branded card, revealed only if the iframe never loads */
.show-frame .frame-fallback {
    position: absolute; inset: 0; display: none;
    place-items: center; text-align: center; padding: calc(var(--u) * 2);
    border-radius: calc(var(--u) * 1.1);
    border: 1px solid var(--glass-line);
    box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 4) rgba(15, 23, 42, 0.12);
    background:
        radial-gradient(at 20% 10%, var(--primary-glow) 0, transparent 45%),
        radial-gradient(at 85% 90%, var(--sunderland-orange-glow) 0, transparent 45%),
        #fff;
}
.show-frame.failed .frame-fallback { display: grid; }
.show-frame.failed iframe { visibility: hidden; }
.frame-fallback img { max-width: 100%; max-height: 100%; border-radius: calc(var(--u) * 0.6); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0,0,0,0.12); }
.frame-fallback .fb-card .fb-name { font-size: calc(var(--u) * 1.8); font-weight: 900; letter-spacing: -0.02em; }
.frame-fallback .fb-card .fb-url { font-family: var(--mono); font-size: calc(var(--u) * 0.9); color: var(--text-muted); margin-top: calc(var(--u) * 0.5); }
.frame-fallback .fb-card .fb-tag { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 0.85); font-weight: 700; color: var(--primary-blue); }

.show-caption { font-size: calc(var(--u) * 1.3); font-weight: 700; letter-spacing: -0.01em; margin: 0; line-height: 1.35; }
.show-caption em { font-style: normal; color: var(--primary-blue); }
.show-caption.tagline {
    font-size: calc(var(--u) * 1.65); font-weight: 800;
    text-align: center; text-wrap: balance; max-width: none;
}
.show-caption.tagline::before { content: "“"; color: var(--sunderland-orange); }
.show-caption.tagline::after { content: "”"; color: var(--sunderland-orange); }

/* =========================================================
   type: livebuild
   ========================================================= */
.slide[data-type="livebuild"] .slide-inner { max-width: none; height: 100%; }
.lb-stage { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.2); min-height: 0; height: 100%; }
.lb-left { display: flex; flex-direction: column; min-height: 0; gap: calc(var(--u) * 0.9); }
.lb-prompt {
    background: var(--code-bg); color: #e2e8f0;
    border-radius: calc(var(--u) * 0.9); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
    font-size: calc(var(--u) * 1.02); line-height: 1.5; font-weight: 500;
    border-left: 3px solid var(--accent-green);
}
.lb-prompt .lb-plabel { display: block; font-family: var(--mono); font-size: calc(var(--u) * 0.72); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-green); margin-bottom: calc(var(--u) * 0.5); font-weight: 700; }
.lb-input {
    flex: 1; min-height: calc(var(--u) * 6);
    width: 100%; box-sizing: border-box; resize: none;
    font-family: var(--mono); font-size: calc(var(--u) * 0.9); line-height: 1.5;
    padding: calc(var(--u) * 1); border-radius: calc(var(--u) * 0.8);
    border: 1.5px solid var(--hairline); background: #fff; color: var(--text-main);
    outline: none; transition: border-color 0.2s;
}
.lb-input:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 4px var(--primary-glow); }
.lb-actions { display: flex; gap: calc(var(--u) * 0.7); }
.lb-run, .lb-clear {
    font-family: var(--sans); font-weight: 800; font-size: calc(var(--u) * 1);
    padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4); border-radius: 99px; cursor: pointer; border: none;
    transition: all 0.2s;
}
.lb-run { background: var(--primary-blue); color: #fff; }
.lb-run:hover { background: #0056cc; transform: translateY(-2px); }
.lb-clear { background: #fff; border: 1.5px solid var(--hairline); color: var(--text-muted); }
.lb-clear:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
/* Deliberately discreet — a safety net, not a headline feature. */
.lb-planb {
    margin-left: auto;
    align-self: center;
    background: none; border: none; cursor: pointer;
    font-family: var(--mono); font-size: calc(var(--u) * 0.78); font-weight: 600;
    letter-spacing: 0.08em; color: var(--text-faint);
    padding: calc(var(--u) * 0.4) calc(var(--u) * 0.6); border-radius: 99px;
    transition: color 0.2s, background 0.2s;
}
.lb-planb:hover { color: var(--text-muted); background: rgba(15, 23, 42, 0.04); }
.lb-help { font-size: calc(var(--u) * 0.92); color: var(--text-faint); font-weight: 500; margin: 0; line-height: 1.4; }

/* =========================================================
   type: close (with QR)
   ========================================================= */
.slide[data-variant="close"] h1.headline,
.slide[data-type="close"] h1.headline { font-size: calc(var(--u) * 6); }
.close-stage { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 3.5); align-items: center; }
.close-text { min-width: 0; }
.close-qr { text-align: center; }
.close-qr .qr {
    width: calc(var(--u) * 17); height: calc(var(--u) * 17);
    background: #fff; padding: calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1.1);
    box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 4) rgba(15, 23, 42, 0.14);
    display: grid; place-items: center;
}
.close-qr .qr svg { width: 100%; height: 100%; display: block; }
.close-qr .qr-cap { font-size: calc(var(--u) * 0.92); font-weight: 600; color: var(--text-muted); margin: calc(var(--u) * 1) auto 0; max-width: 26ch; line-height: 1.4; }

.close-contact {
    margin-top: calc(var(--u) * 2.4);
    padding-top: calc(var(--u) * 1.4);
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 0.15);
}
.close-contact .cc-name { font-size: calc(var(--u) * 1.35); font-weight: 800; letter-spacing: -0.02em; }
.close-contact .cc-org { font-size: calc(var(--u) * 1); font-weight: 500; color: var(--text-muted); }
.close-contact .cc-email { font-size: calc(var(--u) * 1); font-weight: 700; color: var(--primary-blue); text-decoration: none; margin-top: calc(var(--u) * 0.25); }
.close-contact .cc-email:hover { text-decoration: underline; }

/* =========================================================
   MOBILE HUB — the phone landing when someone scans the QR
   ========================================================= */
.mhub { position: fixed; inset: 0; z-index: 200; display: none; overflow: auto;
    background:
        radial-gradient(at 12% 8%, rgba(0,105,250,0.14) 0, transparent 45%),
        radial-gradient(at 88% 92%, rgba(255,117,51,0.14) 0, transparent 45%),
        var(--bg-base);
}
body.show-hub .mhub { display: block; }
body.show-hub .chrome, body.show-hub .deck, body.show-hub .hint { display: none; }
.mhub-inner { min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 34px 26px; max-width: 460px; margin: 0 auto; }
.mhub-logo { width: 150px; opacity: 0.85; }
.mhub-logo img, .mhub-logo svg { width: 100%; height: auto; display: block; }
.mhub-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary-blue); }
.mhub h1 { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin: 0; }
.mhub h1 em { font-style: normal; color: var(--primary-blue); }
.mhub p.mhub-lead { font-size: 17px; color: var(--text-muted); font-weight: 500; line-height: 1.5; margin: 0; }
.mhub-btn {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--sans); font-size: 19px; font-weight: 800; text-align: left;
    padding: 20px 22px; border-radius: 16px; cursor: pointer; text-decoration: none;
    border: none; width: 100%; box-sizing: border-box; transition: transform 0.15s ease;
}
.mhub-btn:active { transform: scale(0.98); }
.mhub-btn .mb-emoji { font-size: 26px; flex: none; }
.mhub-btn .mb-sub { display: block; font-size: 13.5px; font-weight: 500; opacity: 0.82; margin-top: 3px; }
.mhub-btn.primary { background: var(--primary-blue); color: #fff; box-shadow: 0 10px 26px var(--primary-glow); }
.mhub-btn.ghost { background: #fff; color: var(--text-main); border: 1.5px solid var(--hairline); }
.mhub-foot { font-size: 13px; color: var(--text-faint); text-align: center; margin-top: 6px; }

/* =========================================================
   MOBILE — flick-through talk view (body.mobile-talk)
   Slides stop stacking on top of each other and scroll instead.
   ========================================================= */
@media (max-width: 820px) {
    body.mobile-talk { overflow-y: auto; height: auto; }
    body.mobile-talk .chrome { position: sticky; padding: 12px 16px; background: rgba(248,250,252,0.9); backdrop-filter: blur(10px); }
    body.mobile-talk .progress, body.mobile-talk .timer { display: none; }
    body.mobile-talk .deck { height: auto; }
    body.mobile-talk .slide {
        position: relative; inset: auto; opacity: 1; visibility: visible; transform: none;
        min-height: auto; padding: 40px 22px; border-bottom: 1px solid var(--hairline);
    }
    body.mobile-talk .slide.past { transform: none; }
    body.mobile-talk .slide-inner { max-width: 100% !important; height: auto !important; }

    /* Interactive slides get a fixed, sensible height on a phone */
    body.mobile-talk .build-stage,
    body.mobile-talk .show-stage,
    body.mobile-talk .lb-stage { height: auto; }
    body.mobile-talk .build-panes,
    body.mobile-talk .lb-stage { grid-template-columns: 1fr; }
    body.mobile-talk .show-frames[data-count="2"] { grid-template-columns: 1fr; }
    body.mobile-talk .preview-frame,
    body.mobile-talk .code-body { height: 62vw; min-height: 240px; }
    body.mobile-talk .show-frame iframe { height: auto; min-height: 260px; }
    /* The SharePoint mock is a fixed desktop layout — give it room on a phone. */
    body.mobile-talk .show-frames[data-fill="1"] .show-frame,
    body.mobile-talk .show-frames[data-fill="1"] .show-frame iframe { height: 68vh; min-height: 460px; }
    body.mobile-talk .eco-grid,
    body.mobile-talk .cap-row,
    body.mobile-talk .stat-grid,
    body.mobile-talk .arg-grid,
    body.mobile-talk .close-stage { grid-template-columns: 1fr; }
    body.mobile-talk .brand-strip { display: none; }
    body.mobile-talk h1.headline { font-size: 34px !important; }
    body.mobile-talk .mobile-return {
        position: fixed; right: 14px; bottom: 14px; z-index: 70;
        background: var(--primary-blue); color: #fff; border: none;
        font-family: var(--sans); font-weight: 800; font-size: 14px;
        padding: 12px 18px; border-radius: 99px; box-shadow: 0 8px 20px var(--primary-glow); cursor: pointer;
    }
}
.mobile-return { display: none; }
body.mobile-talk .mobile-return { display: block; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}