/* A hosted, dependency-free sales deck. Every illustration is HTML, CSS or SVG. */
:root { --paper:#f7f7f4; --ink:#242724; --muted:#6b706a; --line:#dedfd9; --white:#fff; --green:#41694d; --green-soft:#edf3ed; --amber:#906c30; --red:#a44e46; --shadow:0 16px 44px rgb(28 35 28 / 7%); --ease:cubic-bezier(.22,.72,.22,1); --header:64px; --footer:76px; }
*,*::before,*::after { box-sizing:border-box; }
html { background:var(--paper); overscroll-behavior-x:none; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; } a { color:inherit; text-decoration:none; } button { font:inherit; color:inherit; cursor:pointer; } img,svg { display:block; max-width:100%; } button,a,summary { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none!important; } :focus-visible { outline:2px solid var(--ink); outline-offset:4px; } h1:focus,h2:focus { outline:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:8px; left:12px; z-index:30; padding:10px 16px; background:var(--ink); color:#fff; transform:translateY(-160%); } .skip-link:focus { transform:none; }
.presentation-header { height:var(--header); padding:0 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); position:relative; z-index:10; background:var(--paper); }
.brand { display:inline-flex; align-items:center; gap:9px; flex-shrink:0; } .brand span { font-size:14px; font-weight:750; letter-spacing:.08em; }
.header-caption { color:var(--muted); font-size:11px; } .header-caption span { padding:0 9px; }
.header-actions { display:flex; align-items:center; gap:18px; font-size:12px; }
.back-link { color:var(--muted); min-height:44px; display:flex; align-items:center; }
.download-menu { position:relative; } .download-menu summary { display:flex; align-items:center; gap:14px; cursor:pointer; min-height:40px; padding:0 13px; border:1px solid var(--line); border-radius:7px; list-style:none; font-weight:500; } .download-menu summary::-webkit-details-marker { display:none; }
.download-options { position:absolute; top:48px; right:0; width:240px; padding:6px; background:white; box-shadow:var(--shadow); border:1px solid var(--line); border-radius:10px; }
.download-options a { display:flex; align-items:center; justify-content:space-between; padding:13px 10px; border-radius:5px; } .download-options a:hover { background:var(--paper); } .download-options a span { color:var(--muted); font-size:10px; }
.icon-button { display:grid; place-items:center; width:36px; height:40px; border:0; background:transparent; } .icon-button svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.4; }
.deck-ready { height:100vh; height:100dvh; overflow:hidden; overscroll-behavior-x:none; }
.deck-stage { position:relative; outline:none; }
.slide { padding:40px 64px; border-bottom:1px solid var(--line); }
.slide-inner { width:min(1140px,100%); margin:auto; display:flex; flex-direction:column; gap:28px; }
.deck-ready .deck-stage { height:calc(100vh - var(--header) - var(--footer)); height:calc(100dvh - var(--header) - var(--footer)); overflow:hidden; touch-action:pan-y pinch-zoom; overscroll-behavior-x:none; }
.deck-ready .slide { position:absolute; inset:0; border:0; overflow-x:hidden; overflow-y:auto; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .38s var(--ease),visibility .38s; }
.deck-ready .slide.is-active { opacity:1; visibility:visible; pointer-events:auto; }
.deck-ready .slide-inner { min-height:calc(100% - 1px); justify-content:center; }
.eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
h1 { font-size:clamp(78px,8.2vw,122px); font-weight:600; letter-spacing:-.075em; line-height:1; } h1>span { color:#848b80; }
h2 { font-size:clamp(42px,4.45vw,64px); font-weight:550; line-height:1.06; letter-spacing:-.055em; text-wrap:balance; max-width:1040px; }
.takeaway { border-top:1px solid var(--line); padding-top:20px; color:var(--muted); font-size:15px; line-height:1.5; } .takeaway strong { color:var(--ink); font-weight:500; }
.quiet-label { display:block; color:var(--muted); font-size:11px; line-height:1.6; }
.positive { color:var(--green); } .pending { color:var(--amber); } .risk { color:var(--red); }
.example-label { color:var(--muted); font-size:10px; white-space:nowrap; }
.mobile-break { display:none; }
/* 01: the document appears, then its six connected inputs. */
.opening-layout { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:12px; }
.opening-subhead { margin:24px 0 22px; font-size:clamp(20px,2.1vw,28px); line-height:1.4; letter-spacing:-.025em; }
.hub-visual { position:relative; width:100%; aspect-ratio:600/420; }
.hub-orbit { position:absolute; left:50%; top:50%; border:1px solid #e7e8e1; border-radius:50%; transform:translate(-50%,-50%); } .orbit-outer { width:70%; aspect-ratio:1; } .orbit-inner { width:52%; aspect-ratio:1; }
.hub-lines { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#cbd0c6; stroke-width:1.5; }
.hub-document { position:absolute; top:20%; left:33%; width:34%; padding:22px 18px 16px; background:white; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.document-brand { display:flex; gap:7px; align-items:center; font-size:8px; letter-spacing:.07em; font-weight:700; margin-bottom:20px; }
.hub-document>small { color:var(--muted); font-size:8px; } .hub-document>strong { display:block; font-size:21px; font-weight:600; letter-spacing:-.035em; }
.paper-lines { display:grid; gap:10px; margin:16px 0; } .paper-lines i { height:4px; background:#edefe9; border-radius:2px; } .paper-lines i:nth-child(2) { width:80%; } .paper-lines i:nth-child(3) { width:65%; }
.document-total { padding-top:12px; border-top:1px solid var(--line); } .document-total span { display:block; font-size:8px; color:var(--muted); } .document-total b { font-size:12px; font-weight:600; }
.hub-node { position:absolute; min-width:95px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 3px 10px rgb(24 30 24 / 3%); font-size:11px; text-align:center; }
.node-1 { left:2%; top:13%; } .node-2 { left:0; top:45%; } .node-3 { left:3%; top:76%; } .node-4 { right:2%; top:13%; } .node-5 { right:0; top:45%; } .node-6 { right:3%; top:76%; }
/* 02: layers unfold below the customer-facing PDF. */
.hidden-visual { width:min(780px,100%); align-self:center; }
.pdf-cap { display:flex; align-items:center; gap:18px; width:68%; margin:auto; padding:20px 24px; border:1px solid var(--line); background:#fff; border-radius:12px; box-shadow:var(--shadow); }
.file-icon { display:grid; place-items:center; width:40px; height:48px; background:var(--paper); border:1px solid var(--line); border-radius:5px; font-size:10px; font-weight:650; }
.pdf-cap strong { font-size:17px; font-weight:550; } .pdf-cap small { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.pdf-page { margin-left:auto; width:34px; display:grid; gap:5px; } .pdf-page i { height:3px; background:#e5e7df; } .pdf-page i:last-child { width:65%; }
.surface-line { display:flex; align-items:center; gap:12px; margin:15px 0; color:var(--muted); font-size:9px; letter-spacing:.04em; } .surface-line i { flex:1; border-top:1px dashed #c8ccc1; }
.hidden-layers { display:grid; gap:8px; }
.hidden-layer { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:10px 20px; border:1px solid var(--line); border-radius:8px; background:#f0f1eb; font-size:12px; width:calc(76% + var(--i)*8%); margin:auto; } .hidden-layer span+span { border-left:1px solid #d5d8ce; padding-left:20px; }
@media (min-width:1001px) and (max-height:850px) { .hidden-slide .slide-inner { gap:22px; } .hidden-slide .pdf-cap { padding-block:16px; } .hidden-slide .hidden-layer { padding-block:8px; } }
/* 03: six tools settle into a fragmented network. */
.scattered-visual { position:relative; height:290px; }
.messy-lines { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#cbd0c5; stroke-width:1.2; stroke-dasharray:5 5; }
.tool-card { position:absolute; display:grid; gap:5px; padding:18px 20px; width:23%; border:1px solid var(--line); border-radius:10px; background:white; box-shadow:var(--shadow); transform:rotate(var(--angle)); }
.tool-card strong { font-size:14px; font-weight:550; } .tool-card small { font-size:10px; color:var(--muted); } .tool-symbol { font:10px/1.4 ui-monospace,monospace; color:var(--muted); margin-bottom:5px; }
.tool-1 { top:4%; left:1%; --angle:-3deg; } .tool-2 { top:1%; left:36%; --angle:2deg; } .tool-3 { top:7%; right:1%; --angle:-2deg; } .tool-4 { bottom:4%; left:8%; --angle:2deg; } .tool-5 { bottom:1%; left:42%; --angle:-2deg; } .tool-6 { bottom:5%; right:0; --angle:3deg; }
/* 04: a single thread traverses the full opportunity lifecycle. */
.opportunity-visual { padding:24px 0; }
.opportunity-id { display:flex; align-items:center; gap:12px; font-size:11px; margin-bottom:40px; } .opportunity-id>strong { font:11px ui-monospace,monospace; } .opportunity-id>span:nth-child(3) { color:var(--muted); }
.connected-dot { width:6px; height:6px; display:inline-block; flex-shrink:0; background:#7c8575; border-radius:50%; }
.opportunity-thread { flex:1; border-top:1px solid var(--line); margin-left:10px; }
.opportunity-flow { position:relative; display:grid; grid-template-columns:repeat(8,1fr); gap:12px; padding:0; margin:0; list-style:none; }
.opportunity-flow::before,.opportunity-flow::after { content:""; position:absolute; top:22px; left:22px; right:calc(12.5% - 22px); height:1px; background:#d3d7cc; } .opportunity-flow::after { background:#596750; transform-origin:left; }
.opportunity-flow li { z-index:1; position:relative; }
.step-icon { display:grid; place-items:center; width:45px; height:45px; margin-bottom:17px; border:1px solid var(--line); border-radius:50%; background:var(--paper); font:10px ui-monospace,monospace; color:var(--muted); }
.opportunity-flow strong { font-size:12px; font-weight:550; } .outcome-icon { border-color:#b7c8b5; background:var(--green-soft); }
.connected-record { display:flex; justify-content:space-between; gap:15px; margin-top:34px; padding:13px 16px; background:#edeFE8; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:10px; }
/* 05: an intentionally conceptual command centre, with only five metrics. */
.command-centre { background:white; border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); padding:22px; }
.command-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; } .command-top>div { display:flex; align-items:center; gap:10px; } .command-top strong { font-size:12px; font-weight:550; }
.mini-logo { display:grid; place-items:center; width:25px; height:25px; background:var(--ink); color:white; border-radius:6px; font-size:12px; font-weight:650; }
.metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.metric { display:flex; flex-direction:column; padding:18px 16px; background:var(--paper); border:1px solid var(--line); border-radius:9px; min-width:0; }
.metric>span { font-size:11px; color:var(--muted); } .metric>strong { display:block; font-size:clamp(24px,2.6vw,36px); letter-spacing:-.05em; line-height:1.2; font-weight:550; margin:13px 0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.metric>small { font-size:10px; margin-top:auto; } .metric-spark { display:flex; align-items:end; gap:4px; height:20px; } .metric-spark i { flex:1; height:45%; background:#a9b1a1; border-radius:2px; } .metric-spark i:nth-child(2n) { height:70%; } .metric-spark i:nth-child(3n) { height:90%; } .metric-spark i:last-child { height:100%; }
.metric-baseline { height:3px; background:#e0e4d9; margin-top:14px; } .metric-baseline i { display:block; height:100%; width:72%; background:#828f77; }
.command-bottom { display:flex; align-items:center; gap:9px; margin-top:20px; font-size:10px; color:var(--muted); } .command-bottom svg { width:80px; margin-left:auto; stroke:#98a28f; fill:none; stroke-width:1.5; }
/* 06: commercial memory is connected, reusable and owned by the company. */
.memory-blocks { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:18px; }
.memory-card { position:relative; background:white; border:1px solid var(--line); border-radius:12px; padding:22px; box-shadow:0 6px 24px rgb(30 35 30 / 3%); }
.memory-icon { display:block; width:28px; height:28px; margin-bottom:15px; } .memory-icon svg { fill:none; stroke:#717d65; stroke-width:1.3; stroke-linejoin:round; }
.memory-card h3 { font-size:21px; font-weight:550; letter-spacing:-.035em; } .memory-card p { color:var(--muted); font-size:11px; line-height:1.8; margin-top:8px; }
.memory-preview { height:26px; display:flex; gap:7px; margin-top:15px; align-items:center; } .memory-preview>i { background:#e7eadf; width:23px; height:23px; border-radius:50%; } .memory-preview>span { width:34%; height:4px; border-radius:3px; background:#e7eadf; }
.catalogue-preview i { border-radius:4px; width:31%; height:20px; border:1px solid #dce1d3; background:#f4f5f0; } .supplier-preview>span { width:auto; height:auto; color:var(--muted); background:var(--paper); border:1px solid var(--line); padding:4px 8px; font-size:9px; } .supplier-preview i { width:35%; height:4px; margin-left:auto; }
.memory-route { display:flex; align-items:center; justify-content:center; gap:28px; padding:0; margin:24px 0 0; list-style:none; font-size:11px; } .memory-route li+li::before { content:"→"; color:#a3aa9b; margin-right:28px; } .route-output { font-weight:600; }
/* 07: data blocks assemble a branded customer offer; cost stays private. */
.builder-visual { display:grid; grid-template-columns:1fr 80px 1fr; gap:12px; width:min(910px,100%); align-self:center; align-items:center; }
.visual-overline { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:13px; }
.input-blocks { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .input-blocks>span { padding:11px 14px; background:white; border:1px solid var(--line); border-radius:7px; font-size:11px; }
.cost-boundary { display:flex; align-items:center; gap:8px; margin-top:19px; font-size:11px; color:var(--muted); } .cost-boundary svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.2; } .cost-boundary strong { color:var(--ink); font-weight:550; }
.assembly-arrow { display:flex; align-items:center; color:#89957f; font-size:24px; } .assembly-arrow span { height:1px; background:#b5c0aa; flex:1; }
.offer-document { padding:20px 22px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:var(--shadow); }
.offer-header { display:flex; justify-content:space-between; gap:10px; align-items:center; } .offer-header>span { display:flex; align-items:center; gap:7px; font-size:8px; font-weight:700; letter-spacing:.07em; } .offer-header small { color:var(--muted); font-size:8px; }
.offer-customer { display:flex; justify-content:space-between; gap:10px; align-items:end; margin:17px 0 14px; } .offer-customer strong { font-size:23px; font-weight:550; letter-spacing:-.04em; } .offer-customer span { color:var(--muted); font-size:8px; }
.offer-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; border-top:1px solid #edefe8; font-size:10px; } .offer-row i { width:50px; height:4px; background:#e6e9df; }
.offer-terms { display:flex; gap:14px; color:var(--muted); font-size:8px; margin:10px 0 15px; } .offer-price { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:13px; border-top:1px solid var(--line); font-size:9px; color:var(--muted); } .offer-price strong { color:var(--ink); font-weight:550; } .offer-price b { color:var(--ink); font-size:14px; font-weight:550; }
/* 08: each negotiation revision enters in sequence, ending in won. */
.filename { color:#80877a; font-size:.87em; }
.revision-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; font:10px ui-monospace,monospace; color:var(--muted); margin-bottom:20px; }
.revision-cards { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:15px; list-style:none; padding:0 0 48px; margin:0; }
.revision-cards::before { content:""; position:absolute; top:85px; width:100%; border-top:1px solid #cfd5c6; }
.revision-cards li { position:relative; display:flex; flex-direction:column; gap:18px; padding:22px 19px; border:1px solid var(--line); border-radius:10px; background:white; box-shadow:var(--shadow); transform:translateY(calc(var(--i)*12px)); min-width:0; }
.revision-number { font:11px ui-monospace,monospace; color:var(--muted); } .revision-cards strong { font-size:clamp(18px,1.7vw,24px); font-weight:550; letter-spacing:-.04em; white-space:nowrap; } .revision-note { font-size:10px; color:var(--muted); } .revision-bar { height:3px; width:calc(100% - var(--i)*12%); background:#d7dfcf; border-radius:2px; }
.revision-cards .revision-won { border-color:#b8cbb6; background:var(--green-soft); } .revision-won strong,.revision-won .revision-number { color:var(--green); } .revision-won .revision-bar { background:#709064; width:100%; }
/* 09: the approval route advances through company roles. */
.workflow-visual { padding:10px 0; }
.role-flow { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin:0; padding:0; list-style:none; }
.role-flow li { display:flex; align-items:center; flex-direction:column; position:relative; text-align:center; }
.role-flow li+li::before { content:"→"; position:absolute; left:-25px; top:16px; font-size:20px; color:#a5ae9b; }
.role-avatar { width:56px; height:56px; display:grid; place-items:center; border:1px solid var(--line); background:white; border-radius:15px; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:15px; }
.role-avatar.review-avatar { color:var(--amber); background:#f4f0e7; border-color:#ded0b5; } .customer-avatar { border-radius:50%; }
.role-flow strong { font-size:13px; font-weight:550; } .role-flow small { font-size:10px; margin-top:5px; color:var(--muted); } .role-flow .pending { color:var(--amber); }
.permission-panel { display:flex; align-items:center; gap:24px; padding:17px 20px; margin-top:32px; background:white; border:1px solid var(--line); border-radius:10px; }
.permission-panel>div { display:flex; align-items:center; gap:9px; font-size:11px; flex-shrink:0; } .permission-panel svg { width:20px; fill:none; stroke:#78866c; stroke-width:1.2; }
.permission-panel ul { display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0 0 0 auto; list-style:none; } .permission-panel li { padding:5px 10px; border:1px solid var(--line); background:var(--paper); border-radius:5px; font-size:10px; }
/* 10: restrained, meaningful charts reveal commercial intelligence. */
.pro-badge { color:var(--ink); border:1px solid #c9cec1; border-radius:4px; padding:4px 7px; font-size:9px; letter-spacing:.08em; background:#ecefe6; }
.analytics-example { display:block; text-align:right; margin-bottom:9px; }
.insight-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.insight-card { padding:21px; border:1px solid var(--line); border-radius:11px; background:white; min-width:0; }
.insight-card h3 { font-size:19px; line-height:1.25; letter-spacing:-.03em; font-weight:550; margin-bottom:23px; }
.product-bars { display:grid; gap:11px; } .product-bars>div { display:grid; gap:5px; } .product-bars span { font-size:9px; color:var(--muted); } .product-bars i { display:block; height:7px; width:var(--bar); border-radius:2px; background:#858a85; transform-origin:left; } .product-bars>div:nth-child(2) i { background:#a6aaa5; } .product-bars>div:nth-child(3) i { background:#c6c9c3; }
.loss-chart { padding-top:26px; } .loss-split { display:flex; gap:3px; height:29px; border-radius:4px; overflow:hidden; } .loss-split i { width:50%; background:#a86c61; } .loss-split i:nth-child(2) { width:30%; background:#bf958c; } .loss-split i:nth-child(3) { width:20%; background:#ddc6c0; } .loss-labels { display:flex; justify-content:space-between; margin-top:12px; color:var(--muted); font-size:9px; }
.ring-chart { position:relative; width:110px; margin:auto; padding-bottom:21px; } .ring-chart svg { width:110px; transform:rotate(-90deg); } .ring-chart circle { fill:none; stroke-width:9; } .ring-track { stroke:#dcc3bd; } .ring-won { stroke:#63816a; stroke-dasharray:68 100; stroke-linecap:round; }
.ring-chart>strong { position:absolute; top:33px; width:100%; text-align:center; font-size:24px; font-weight:550; letter-spacing:-.04em; } .ring-chart>strong span { font-size:11px; } .ring-chart>div { position:absolute; bottom:0; display:flex; gap:20px; justify-content:center; width:100%; font-size:9px; }
.margin-chart { margin-top:25px; } .margin-chart svg { width:100%; height:87px; fill:none; } .chart-grid { stroke:#edefe9; stroke-width:1; } .margin-line { stroke:#a7655b; stroke-width:2.3; } .margin-chart circle { fill:#a7655b; } .margin-chart>div { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; margin-top:8px; }
/* 11: separate signals become one connected story, then a clear invitation. */
.closing-signals { display:grid; grid-template-columns:repeat(4,1fr); padding-block:8px 15px; position:relative; }
.closing-signals article { border-left:1px solid var(--line); padding:8px 22px; } .closing-signals article:first-child { border-left:0; padding-left:0; } .closing-signals article:last-child { padding-right:0; }
.closing-signals article>span { display:block; font-size:9px; color:var(--muted); letter-spacing:.07em; text-transform:uppercase; margin-bottom:14px; }
.closing-signals p { color:var(--muted); font-size:15px; line-height:1.6; letter-spacing:-.015em; } .closing-signals strong { color:var(--ink); font-weight:550; }
.closing-cta { border-top:1px solid var(--line); padding-top:24px; display:grid; grid-template-columns:1fr auto; gap:12px 20px; align-items:center; }
.closing-cta>p { font-size:30px; font-weight:550; letter-spacing:-.04em; line-height:1.2; } .closing-cta .quiet-label { grid-column:2; text-align:right; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:15px 22px; min-height:50px; border-radius:8px; background:var(--ink); color:white; font-size:13px; font-weight:550; transition:background .2s; } .primary-button:hover { background:#41483b; }
/* Persistent controls, unobtrusive notes and shareable slide addresses. */
.deck-controls { position:relative; height:var(--footer); padding:0 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--paper); border-top:1px solid var(--line); z-index:12; }
.progress-track { position:absolute; height:2px; top:-1px; left:0; right:0; } .progress-track>span { display:block; height:100%; background:#78846e; width:9.09%; transition:width .45s var(--ease); }
.deck-position { display:flex; align-items:center; gap:18px; min-width:0; } #slide-count { font:11px ui-monospace,monospace; white-space:nowrap; } #slide-topic { color:var(--muted); font-size:10px; }
.slide-dots { display:flex; align-items:center; gap:1px; } .slide-dots button { position:relative; width:25px; height:30px; padding:0; border:0; background:transparent; } .slide-dots button::after { content:""; display:block; width:4px; height:4px; margin:auto; border-radius:50%; background:#b9beb1; transition:width .25s,background .25s; } .slide-dots button[aria-current]::after { width:16px; border-radius:3px; background:var(--ink); }
.control-actions { display:flex; align-items:center; gap:22px; } .notes-button { padding:8px 0; min-height:44px; background:none; border:0; color:var(--muted); font-size:11px; white-space:nowrap; } .notes-button[aria-expanded="true"] { color:var(--ink); }
.slide-navigation { display:flex; align-items:center; gap:7px; } .slide-arrow { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:8px; background:white; font-size:19px; } .slide-arrow:hover:not(:disabled) { background:#e9ece3; } .slide-arrow:disabled { opacity:.38; cursor:default; }
.notes-panel { position:fixed; right:24px; bottom:calc(var(--footer) + 14px); width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - var(--header) - var(--footer) - 28px); overflow:auto; padding:18px 22px 20px; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 20px 80px rgb(25 30 25 / 16%); z-index:15; }
.notes-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; } .notes-top button { width:36px; height:36px; border:0; background:var(--paper); border-radius:6px; font-size:23px; }
#notes-title { display:block; font-size:16px; font-weight:550; letter-spacing:-.02em; } #notes-copy { margin-top:12px; color:var(--muted); font-size:13px; line-height:1.65; } .notes-hint { display:block; margin-top:17px; font-size:10px; color:var(--muted); }
.download-status { position:fixed; z-index:25; bottom:calc(var(--footer) + 14px); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:14px 20px; color:#fff; background:var(--ink); border-radius:9px; box-shadow:var(--shadow); font-size:12px; }
.no-script-note { padding:18px; text-align:center; font-size:12px; } html:not(.exports-ready) [data-deck-download] { pointer-events:none; }
/* Motion runs only on the current slide, and replays on a return visit. */
.deck-ready .is-active .slide-heading,.deck-ready .is-active .opening-copy { animation:fade-up .65s .04s var(--ease) both; }
.deck-ready .is-active .takeaway { animation:fade-up .65s .18s var(--ease) both; }
.deck-ready .is-active .draw-line { stroke-dasharray:1; animation:line-draw 1.8s .3s var(--ease) both; }
.deck-ready .is-active .hub-node { animation:fade-up .65s calc(.35s + var(--i)*.14s) var(--ease) both; }
.deck-ready .is-active .hub-document { animation:soft-scale .8s .1s var(--ease) both; }
.deck-ready .is-active .pdf-cap { animation:fade-up .7s .15s var(--ease) both; }
.deck-ready .is-active .hidden-layer { animation:unfold-layer .9s calc(.3s + var(--i)*.16s) var(--ease) both; }
.deck-ready .is-active .tool-card { animation:scatter-in .8s calc(.18s + var(--i)*.12s) var(--ease) both; }
.deck-ready .is-active .opportunity-flow::after { animation:progress-flow 2.5s .25s var(--ease) both; }
.deck-ready .is-active .opportunity-flow li { animation:fade-up .65s calc(.2s + var(--i)*.2s) var(--ease) both; }
.deck-ready .is-active .connected-record { animation:fade-up .7s 1.1s var(--ease) both; }
.deck-ready .is-active .metric { animation:fade-up .65s calc(.12s + var(--i)*.1s) var(--ease) both; }
.deck-ready .is-active .memory-card { animation:fade-up .8s calc(.15s + var(--i)*.18s) var(--ease) both; }
.deck-ready .is-active .memory-route { animation:fade-up .7s .8s var(--ease) both; }
.deck-ready .is-active .input-blocks>span { animation:fade-up .6s calc(.1s + var(--i)*.06s) var(--ease) both; }
.deck-ready .is-active .assemble-part { animation:assemble .7s calc(.45s + var(--i)*.2s) var(--ease) both; }
.deck-ready .is-active .revision-cards li { animation:revision-in .8s calc(.15s + var(--i)*.4s) var(--ease) both; }
.deck-ready .is-active .role-flow li { animation:fade-up .65s calc(.1s + var(--i)*.28s) var(--ease) both; }
.deck-ready .is-active .permission-panel { animation:fade-up .65s .8s var(--ease) both; }
.deck-ready .is-active .insight-card { animation:fade-up .65s calc(.1s + var(--i)*.1s) var(--ease) both; }
.deck-ready .is-active .product-bars i { animation:progress-flow 1.3s .6s var(--ease) both; }
.deck-ready .is-active .ring-won { animation:ring-draw 1.5s .5s var(--ease) both; }
.deck-ready .is-active .loss-split { animation:progress-flow 1.4s .5s var(--ease) both; transform-origin:left; }
.deck-ready .is-active .closing-signals article { animation:fade-up .8s calc(.15s + var(--i)*.16s) var(--ease) both; }
.deck-ready .is-active .closing-cta { animation:fade-up .8s .7s var(--ease) both; }
@keyframes fade-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes soft-scale { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@keyframes line-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes unfold-layer { from { opacity:0; transform:translateY(-18px) scaleY(.7); } to { opacity:1; transform:none; } }
@keyframes scatter-in { from { opacity:0; transform:translateY(14px) rotate(0); } to { opacity:1; transform:translateY(0) rotate(var(--angle)); } }
@keyframes progress-flow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes assemble { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }
@keyframes revision-in { from { opacity:0; transform:translateY(calc(var(--i)*12px + 18px)); } to { opacity:1; transform:translateY(calc(var(--i)*12px)); } }
@keyframes ring-draw { from { stroke-dasharray:0 100; } to { stroke-dasharray:68 100; } }
/* Tablet retains the wide conceptual visuals with more breathing room. */
@media (max-width:1000px) {
  .presentation-header,.deck-controls { padding-inline:24px; } .header-caption { display:none; } .slide { padding:32px; } .slide-inner { gap:26px; } h2 { font-size:46px; } #slide-topic { display:none; }
  .metrics { gap:9px; } .metric { padding:16px 11px; } .metric>strong { font-size:27px; } .memory-card { padding:18px; } .memory-card p { font-size:10px; } .role-flow strong { font-size:11px; } .permission-panel { flex-direction:column; gap:12px; } .permission-panel ul { margin:0; justify-content:center; }
  .insight-card { padding:17px; } .insight-card h3 { font-size:17px; } .closing-signals article { padding-inline:17px; } .closing-signals p { font-size:13px; } .closing-cta>p { font-size:25px; }
}
@media (min-width:601px) and (max-width:850px) {
  .slide { padding:36px 32px; } .slide-inner { gap:40px; } .opening-layout { grid-template-columns:1fr; gap:10px; } .opening-copy { text-align:center; } .opening-copy .eyebrow { justify-content:center; } h1 { font-size:95px; } .opening-subhead { font-size:25px; margin:20px 0 14px; } .hub-visual { max-width:570px; margin:auto; }
  .scattered-visual { height:330px; } .tool-card { width:29%; padding:17px; } .tool-2 { left:35%; } .tool-4 { left:1%; } .tool-5 { left:35%; }
  .opportunity-flow { grid-template-columns:repeat(4,1fr); row-gap:26px; } .opportunity-flow::before,.opportunity-flow::after { right:calc(25% - 22px); } .connected-record { margin-top:24px; }
  .metrics { grid-template-columns:repeat(6,1fr); } .metric { grid-column:span 2; padding:20px; } .metric:nth-child(1),.metric:nth-child(2) { grid-column:span 3; } .metric>strong { font-size:36px; }
  .memory-card p { font-size:11px; } .memory-blocks { grid-template-columns:repeat(3,1fr); gap:12px; } .memory-route { gap:17px; } .memory-route li+li::before { margin-right:17px; }
  .builder-visual { grid-template-columns:1fr 35px 1.1fr; } .offer-document { padding:18px; } .offer-customer { flex-direction:column; align-items:start; gap:4px; } .offer-price { flex-direction:column; align-items:start; } .revision-cards { gap:9px; } .revision-cards li { padding:20px 10px; } .revision-cards strong { font-size:17px; } .revision-note { font-size:9px; }
  .insight-grid { grid-template-columns:1fr 1fr; gap:16px; } .insight-card { padding:22px; } .insight-card h3 { font-size:22px; } .desktop-break { display:none; } .closing-signals { grid-template-columns:1fr 1fr; row-gap:28px; } .closing-signals article:nth-child(3) { border-left:0; padding-left:0; } .closing-signals p { font-size:17px; }
}
/* Mobile diagrams change their geometry rather than shrinking desktop text. */
@media (max-width:600px) {
  :root { --header:60px; --footer:74px; } .presentation-header { padding-inline:16px; gap:8px; } .brand span { font-size:11px; } .brand img { width:22px; height:22px; } .header-actions { gap:8px; font-size:10px; } .back-link { display:none; } .download-menu summary { min-height:36px; padding-inline:9px; gap:8px; } .icon-button { width:28px; }
  .slide { padding:26px 22px; } .slide-inner { gap:24px; } h2 { font-size:clamp(31px,8.2vw,43px); line-height:1.09; letter-spacing:-.05em; } .eyebrow { font-size:8px; margin-bottom:12px; gap:7px; } .desktop-break { display:none; } .takeaway { font-size:12px; padding-top:17px; } .quiet-label { font-size:10px; } .example-label { font-size:8px; }
  .opening-layout { grid-template-columns:1fr; gap:18px; } h1 { font-size:78px; } .opening-subhead { font-size:21px; margin:15px 0 13px; } .hub-visual { max-width:420px; margin:auto; } .hub-document { top:18%; padding:12px 10px; border-radius:8px; } .document-brand { font-size:5px; gap:3px; margin-bottom:10px; } .document-brand img { width:15px; height:15px; } .hub-document>small { font-size:6px; } .hub-document>strong { font-size:15px; } .paper-lines { gap:6px; margin:10px 0; } .paper-lines i { height:3px; } .document-total { padding-top:8px; } .document-total span { font-size:6px; } .document-total b { font-size:9px; } .hub-node { min-width:66px; font-size:8px; padding:8px 9px; border-radius:6px; }
  .pdf-cap { width:89%; padding:17px 15px; gap:12px; } .pdf-cap strong { font-size:15px; } .pdf-cap small { font-size:9px; } .pdf-page { width:20px; } .file-icon { width:30px; height:38px; font-size:8px; } .hidden-layer { padding:12px; font-size:10px; width:calc(82% + var(--i)*6%); gap:8px; } .hidden-layer span+span { padding-left:12px; } .surface-line { font-size:8px; margin:18px 0; gap:8px; }
  .scattered-visual { height:310px; } .tool-card { width:45%; padding:14px 12px; gap:3px; } .tool-card strong { font-size:11px; line-height:1.35; } .tool-card small { font-size:8px; line-height:1.4; } .tool-symbol { font-size:8px; margin-bottom:3px; } .tool-1 { top:2%; left:0; } .tool-2 { top:2%; right:0; left:auto; } .tool-3 { top:37%; left:1%; right:auto; } .tool-4 { top:37%; right:1%; left:auto; bottom:auto; } .tool-5 { bottom:2%; left:1%; } .tool-6 { bottom:2%; right:0; }
  .opportunity-visual { padding:0; } .opportunity-id { margin-bottom:23px; font-size:9px; gap:9px; } .opportunity-id>strong { font-size:9px; } .opportunity-thread { display:none; } .opportunity-flow { grid-template-columns:1fr 1fr; gap:10px; } .opportunity-flow::before,.opportunity-flow::after { display:none; } .opportunity-flow li { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--line); border-radius:7px; background:#fff; } .step-icon { width:27px; height:27px; font-size:8px; margin:0; flex-shrink:0; } .opportunity-flow strong { font-size:9px; } .connected-record { display:grid; grid-template-columns:1fr 1fr; padding:12px; gap:8px; margin-top:17px; font-size:8px; }
  .command-centre { padding:16px; border-radius:11px; } .command-top { margin-bottom:16px; } .command-top strong { font-size:10px; } .mini-logo { width:22px; height:22px; font-size:10px; } .metrics { grid-template-columns:1fr 1fr; gap:8px; } .metric { padding:13px 12px; } .metric:first-child { grid-column:1/-1; display:grid; grid-template-columns:1fr auto; gap:0 20px; align-items:center; } .metric:first-child>strong { grid-column:2; grid-row:1/3; margin:0; } .metric:first-child .metric-spark { width:80px; height:13px; margin-top:6px; } .metric>span { font-size:9px; } .metric>strong { font-size:26px; margin:9px 0; } .metric>small { font-size:8px; } .metric-baseline { margin-top:2px; } .command-bottom { font-size:8px; margin-top:15px; } .command-bottom svg { display:none; }
  .memory-blocks { grid-template-columns:1fr; gap:10px; } .memory-card { padding:14px 14px 14px 53px; border-radius:9px; } .memory-icon { position:absolute; width:22px; height:22px; left:15px; top:18px; margin:0; } .memory-card h3 { font-size:17px; } .memory-card p { font-size:10px; line-height:1.7; margin-top:5px; } .memory-preview { display:none; } .memory-route { display:grid; grid-template-columns:1fr 1fr; gap:7px 10px; margin-top:14px; font-size:9px; } .memory-route li { padding:7px 0; } .memory-route li+li::before { margin-right:8px; }
  .builder-visual { grid-template-columns:1fr; gap:12px; } .visual-overline { font-size:8px; margin-bottom:9px; } .input-blocks { grid-template-columns:repeat(4,1fr); gap:5px; } .input-blocks>span { padding:8px 4px; font-size:8px; text-align:center; } .cost-boundary { font-size:9px; margin-top:10px; } .cost-boundary svg { width:13px; } .assembly-arrow { display:none; } .offer-document { padding:15px 17px; border-radius:9px; } .offer-header>span { font-size:7px; } .offer-header small { font-size:7px; } .offer-header img { width:17px; height:17px; } .offer-customer { margin:12px 0 9px; } .offer-customer strong { font-size:20px; } .offer-customer span { font-size:7px; } .offer-row { padding:8px 0; font-size:9px; } .offer-terms { font-size:7px; margin:7px 0 10px; } .offer-price { font-size:8px; padding-top:10px; } .offer-price b { font-size:12px; }
  .filename { font-size:.81em; } .revision-caption { font-size:8px; margin-bottom:15px; flex-wrap:wrap; gap:5px; } .revision-cards { grid-template-columns:1fr; gap:8px; padding:0; } .revision-cards::before { display:none; } .revision-cards li { display:grid; grid-template-columns:28px 1fr; gap:3px 12px; padding:12px 15px; transform:none; box-shadow:0 3px 12px rgb(25 30 25 / 3%); } .revision-number { grid-row:1/3; align-self:center; font-size:10px; } .revision-cards strong { font-size:18px; } .revision-note { font-size:9px; } .revision-bar { display:none; }
  .workflow-visual { display:grid; grid-template-columns:1.2fr 1fr; gap:13px; padding:0; } .role-flow { grid-template-columns:1fr; gap:15px; } .role-flow li { display:grid; grid-template-columns:30px 1fr; gap:2px 9px; text-align:left; align-items:center; } .role-avatar { grid-row:1/3; width:30px; height:30px; border-radius:8px; margin:0; font-size:8px; } .role-flow strong { font-size:10px; line-height:1.3; } .role-flow small { font-size:8px; margin:0; } .role-flow li+li::before { left:12px; top:-15px; content:"↓"; font-size:10px; } .permission-panel { flex-direction:column; align-items:stretch; justify-content:center; padding:13px 10px; margin:0; gap:14px; } .permission-panel>div { font-size:9px; gap:6px; line-height:1.4; } .permission-panel svg { width:16px; flex-shrink:0; } .permission-panel ul { display:grid; gap:6px; margin:0; justify-content:stretch; } .permission-panel li { font-size:8px; padding:6px; }
  .pro-badge { font-size:7px; padding:3px 5px; } .analytics-slide .eyebrow>span:last-child { font-size:7px; letter-spacing:.06em; } .analytics-example { font-size:7px; margin-bottom:8px; } .insight-grid { grid-template-columns:1fr 1fr; gap:9px; } .insight-card { padding:13px; } .insight-card h3 { font-size:14px; margin-bottom:15px; } .product-bars { gap:7px; } .product-bars span { font-size:7px; } .product-bars i { height:5px; } .loss-chart { padding-top:12px; } .loss-split { height:22px; } .loss-labels { font-size:7px; margin-top:9px; } .ring-chart { width:85px; padding-bottom:16px; } .ring-chart svg { width:85px; } .ring-chart>strong { top:25px; font-size:19px; } .ring-chart>strong span { font-size:9px; } .ring-chart>div { font-size:7px; gap:12px; } .margin-chart { margin-top:15px; } .margin-chart svg { height:66px; } .margin-chart>div { font-size:7px; margin-top:6px; }
  .closing-signals { grid-template-columns:1fr 1fr; gap:21px 15px; padding:0; } .closing-signals article { padding:0; border:0; } .closing-signals article>span { font-size:7px; margin-bottom:8px; } .closing-signals p { font-size:12px; line-height:1.6; } .closing-cta { grid-template-columns:1fr; padding-top:21px; gap:17px; } .closing-cta>p { font-size:27px; } .closing-cta .quiet-label { grid-column:1; text-align:left; font-size:9px; } .primary-button { font-size:12px; padding:14px 20px; justify-self:start; }
  .deck-controls { padding-inline:18px; gap:12px; } .slide-dots { display:none; } .control-actions { gap:20px; } .notes-button { font-size:10px; } .slide-arrow { width:39px; height:40px; font-size:18px; } #slide-count { font-size:10px; } .notes-panel { right:16px; padding:15px 18px; } #notes-copy { font-size:12px; }
  .deck-ready .is-active .revision-cards li { animation-name:fade-up; }
}
@media (max-width:350px) {
  .slide { padding:18px 18px; } .slide-inner { gap:16px; } h1 { font-size:68px; } .opening-subhead { font-size:19px; } .opening-copy>.quiet-label { font-size:9px; } .opening-layout { gap:14px; } .hub-document { padding:10px 8px; } .hub-node { min-width:61px; font-size:7px; } .document-brand { font-size:4px; } .hub-document>strong { font-size:13px; } .document-total b { font-size:8px; }
  .scattered-visual { height:290px; } .tool-card { padding:12px 10px; } .tool-card strong { font-size:10px; } .metric>strong { font-size:23px; } .command-centre { padding:13px; } .command-top { gap:7px; } .command-top>div { gap:7px; } .command-top strong { font-size:9px; } .command-top .example-label { font-size:7px; }
  .insight-card { padding:11px; } .insight-card h3 { font-size:13px; } .analytics-slide .eyebrow>span:last-child { letter-spacing:0; } .control-actions { gap:13px; } .slide-navigation { gap:5px; } .slide-arrow { width:36px; } .closing-cta>p { font-size:25px; }
  .metric { padding-block:10px; } .revision-cards li { padding-block:10px; }
}
@media (max-height:700px) and (min-width:1001px) {
  .slide { padding-block:25px; } .slide-inner { gap:20px; } h2 { font-size:49px; } .hub-visual { max-height:330px; } .opening-layout { grid-template-columns:1fr 1fr; } .scattered-visual { height:245px; } .takeaway { padding-top:15px; font-size:13px; } .memory-card { padding:16px 22px; } .memory-preview { display:none; } .insight-card h3 { margin-bottom:12px; } .insight-card { padding:17px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* Print is a complete eleven-page fallback, independent of the active slide. */
@page { size:1280px 720px; margin:0; }
@media print {
  :root { --header:0px; --footer:0px; } html,body,.deck-ready { height:auto!important; overflow:visible!important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .presentation-header,.deck-controls,.notes-panel,.download-status,.skip-link,.no-script-note,.sr-only { display:none!important; }
  .deck-stage,.deck-ready .deck-stage { height:auto; overflow:visible; }
  .slide,.deck-ready .slide { position:relative!important; inset:auto; opacity:1!important; visibility:visible!important; pointer-events:auto; overflow:visible; width:1280px; height:720px; padding:54px 70px; break-after:page; page-break-after:always; }
  .slide:last-child { break-after:auto; page-break-after:auto; } .slide-inner { width:1140px; min-height:100%; justify-content:center; gap:28px; } h2 { font-size:58px; } h1 { font-size:110px; } *,*::before,*::after { animation:none!important; transition:none!important; }
  .slide::after { content:"QUOTRICS · Your pre-sales operating system     /     " attr(data-page) " of 11"; position:absolute; left:70px; bottom:22px; font:10px ui-monospace,monospace; color:var(--muted); } .closing-cta .primary-button { color:var(--ink); background:transparent; border:1px solid var(--line); }
}