/* ═══════════════════════════════════════════════════════════════ Smart Access Control Presentation — resolution-aware canvas Layout is authored in rem units. presentation.js sets the root () font-size per resolution, so the entire design scales proportionally: • 1080p (default) → 1920×1080 canvas, 1rem = 16px • 720p (?res=720p) → 1280×720 canvas, 1rem ≈ 10.67px (exact 2/3 ratio) Stage dimensions and root font-size are injected by presentation.js. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Colors */ --bg: #04080F; --surface: #0C1520; --surface2: #101E2E; --border: #162236; --teal: #00C4A0; --teal-d: rgba(0, 196, 160, .14); --amber: #F59E0B; --amber-d: rgba(245, 158, 11, .14); --red: #EF4444; --red-d: rgba(239, 68, 68, .12); --blue: #3B82F6; --blue-d: rgba(59, 130, 246, .12); --purple: #8B5CF6; --purple-d: rgba(139, 92, 246, .12); --green: #22C55E; --text: #EEF4FB; --muted: #A4B8CE; /* secondary copy — lifted for presentation legibility */ --soft: #7B93AD; /* tertiary copy / fine print */ --dim: #56708C; /* labels, slide numbers — subtle but readable */ /* Fonts */ --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --font-mono: 'DM Mono', monospace; /* Typography scale — rem units relative to #stage font-size. 1rem = 18px at 1080p, 12px at 720p. */ --text-2xs: 0.83rem; --text-xs: 0.89rem; --text-sm: 0.94rem; --text-base-sm: 0.97rem; --text-base: 1.06rem; --text-md: 1.17rem; --text-lg: 1.22rem; --text-xl: 1.28rem; --text-2xl: 1.33rem; --text-3xl: 1.44rem; --text-4xl: 1.5rem; --text-5xl: 1.61rem; --text-6xl: 1.72rem; --text-7xl: 1.94rem; --text-8xl: 3.22rem; --text-9xl: 3.5rem; --text-10xl: 3.67rem; --text-11xl: 4.44rem; --text-12xl: 5.78rem; --text-13xl: 8.61rem; /* Canvas — overridden per-resolution by presentation.js */ --stage-width: 1920px; --stage-height: 1080px; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; font-family: var(--font-body); color: var(--text); } .load-error { padding: 2rem; font-size: 1.125rem; color: var(--muted); text-align: center; } .load-error code { font-family: var(--font-mono); color: var(--teal); } /* ── STAGE ── */ #stage { position: absolute; width: var(--stage-width); height: var(--stage-height); transform-origin: top left; background: var(--bg); overflow: hidden; font-size: 1rem; /* inherits the root size set per-resolution by presentation.js */ } #stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(0, 196, 160, .07) 1px, transparent 1px); background-size: 3rem 3rem; } /* ── SLIDES ── */ .slide { position: absolute; inset: 0; padding: 3.33rem 4.78rem; opacity: 0; pointer-events: none; z-index: 1; transition: opacity .55s cubic-bezier(.4, 0, .2, 1), transform .55s cubic-bezier(.4, 0, .2, 1); transform: translateY(14px); } .slide.active { opacity: 1; pointer-events: all; transform: translateY(0); } .slide.exit { opacity: 0; transform: translateY(-14px); } /* ── ANIMATE-IN ── */ .ai { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; } .slide.active .ai { opacity: 1; transform: translateY(0); } .d1 { transition-delay: .07s !important; } .d2 { transition-delay: .14s !important; } .d3 { transition-delay: .21s !important; } .d4 { transition-delay: .28s !important; } .d5 { transition-delay: .35s !important; } .d6 { transition-delay: .42s !important; } .d7 { transition-delay: .50s !important; } .d8 { transition-delay: .58s !important; } .d9 { transition-delay: .66s !important; } .d10 { transition-delay: .74s !important; } /* ── TEXT UTILITIES ── */ .text-teal { color: var(--teal); } .text-amber { color: var(--amber); } .text-red { color: var(--red); } .text-blue { color: var(--blue); } .text-purple { color: var(--purple); } .text-green { color: var(--green); } .text-muted { color: var(--muted); } .text-dim { color: var(--dim); } .text-body { color: var(--text); } /* ── COMMON COMPONENTS ── */ .tag { display: inline-flex; align-items: center; gap: 0.33rem; font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .1em; text-transform: uppercase; padding: 0.33rem 0.72rem; border-radius: 3px; margin-bottom: 0.78rem; } .tg-t { background: var(--teal-d); color: var(--teal); border: 1px solid rgba(0, 196, 160, .25); } .tg-a { background: var(--amber-d); color: var(--amber); border: 1px solid rgba(245, 158, 11, .25); } .tg-r { background: var(--red-d); color: var(--red); border: 1px solid rgba(239, 68, 68, .25); } .tg-b { background: var(--blue-d); color: var(--blue); border: 1px solid rgba(59, 130, 246, .25); } .tg-p { background: var(--purple-d); color: var(--purple); border: 1px solid rgba(139, 92, 246, .25); } .slide-heading { font-family: var(--font-display); font-size: var(--text-11xl); font-weight: 800; line-height: 1.2; letter-spacing: -1.5px; margin-bottom: 0; } .slide-heading--compact { font-size: var(--text-10xl); margin-bottom: 0.22rem; } .slide-heading .accent { color: var(--teal); } .slide-subtitle { font-size: var(--text-4xl); font-weight: 300; color: var(--muted); margin-bottom: 1.67rem; letter-spacing: .02em; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1.22rem 1.44rem; } .card-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-bottom: 0.39rem; color: var(--text); } .card-body { font-size: var(--text-lg); font-weight: 400; color: var(--muted); line-height: 1.6; } .chip { display: inline-block; font-size: var(--text-sm); font-family: var(--font-mono); padding: 0.17rem 0.5rem; border-radius: 20px; margin: 0.11rem; } .c-t { background: var(--teal-d); color: var(--teal); } .c-a { background: var(--amber-d); color: var(--amber); } .c-b { background: var(--blue-d); color: var(--blue); } .c-p { background: var(--purple-d); color: var(--purple); } .c-r { background: var(--red-d); color: var(--red); } .c-g { background: rgba(34, 197, 94, .12); color: var(--green); } .slide-number { position: absolute; bottom: 2.11rem; right: 3.44rem; font-family: var(--font-mono); font-size: var(--text-base-sm); color: var(--dim); letter-spacing: .1em; } .section-label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 0.78rem; padding-bottom: 0.44rem; border-bottom: 1px solid var(--border); } .note-box { margin-top: 0.67rem; padding: 0.56rem 0.78rem; background: var(--surface); border-radius: 4px; } .note-box--ble { background: rgba(0, 196, 160, .05); } .note-box__label { font-size: var(--text-xs); color: var(--dim); font-family: var(--font-mono); margin-bottom: 0.28rem; } .note-box__text { font-size: var(--text-base); color: var(--muted); font-weight: 300; line-height: 1.6; } .note-box__text em { color: var(--text); font-style: normal; } /* ── NAVIGATION (fixed to viewport — stays a constant on-screen size) ── */ #pgbar { position: fixed; top: 0; left: 0; height: 2px; background: var(--teal); z-index: 100; transition: width .5s ease; } #ctr { position: fixed; top: 18px; right: 22px; font-family: var(--font-mono); font-size: 16px; color: var(--dim); z-index: 100; letter-spacing: .08em; } #nav-dots { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 100; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); cursor: pointer; border: none; transition: background .3s, width .3s; outline: none; } .dot.on { background: var(--teal); width: 20px; border-radius: 3px; } #np, #nn { position: fixed; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(12, 21, 32, .85); border: 1px solid var(--border); color: var(--muted); cursor: pointer; z-index: 100; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: color .2s, background .2s; } #np { left: 16px; } #nn { right: 16px; } #np:hover, #nn:hover { background: var(--surface2); color: var(--teal); } /* ── MOBILE / TOUCH ── */ @media (hover: none) and (pointer: coarse) { html, body { overscroll-behavior: none; touch-action: manipulation; } #np, #nn { width: 48px; height: 48px; font-size: 22px; } #np { left: 10px; } #nn { right: 10px; } #ctr { top: 14px; right: 16px; font-size: 14px; } #nav-dots { bottom: 18px; gap: 8px; } .dot { width: 8px; height: 8px; } .dot.on { width: 24px; } } /* ════════════════════════════════════ SLIDE 1 — TITLE ════════════════════════════════════ */ #s1 { padding: 0; display: flex; } .s1-left { width: 62rem; padding: 3.5rem 4.5rem; display: flex; flex-direction: column; justify-content: center; } .s1-right { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; } .s1-title { font-family: var(--font-display); line-height: 1.1; letter-spacing: -2px; margin-bottom: 0.5rem; } .s1-title__line1, .s1-title__line2 { font-size: 4.9rem; font-weight: 800; } .s1-title__line1 { color: var(--text); } .s1-title__line2 { color: var(--teal); } .s1-title__line3 { font-size: var(--text-8xl); font-weight: 700; color: var(--text); } .s1-title__line4 { font-size: var(--text-6xl); font-weight: 300; color: var(--muted); margin-top: 0.56rem; letter-spacing: .02em; } .s1-chips { margin: 1.11rem 0; display: flex; flex-wrap: wrap; gap: 0.33rem; } .s1-divider { width: 4rem; height: 1px; background: var(--border); margin: 1rem 0; } .s1-team { font-size: var(--text-base); color: var(--muted); line-height: 1.9; font-weight: 300; } .s1-team .sep { color: var(--dim); } .s1-graphic { width: 42rem; height: 42rem; } @keyframes node-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } } /* ════════════════════════════════════ SLIDE 2 — PROBLEM ════════════════════════════════════ */ #s2 .layout { display: flex; gap: 2rem; height: 43.33rem; } #s2 .layout-left { flex: 1.3; display: flex; flex-direction: column; gap: 0.78rem; } #s2 .layout-right { flex: 1; display: flex; flex-direction: column; gap: 0.78rem; } .problem-card { flex: 1; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; padding: 1.1rem 1.4rem; display: flex; gap: 1.25rem; align-items: center; } .problem-card__icon { width: 3.4rem; height: 3.4rem; min-width: 3.4rem; background: var(--red-d); border: 1px solid rgba(239, 68, 68, .32); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: var(--red); } .problem-card__icon svg { width: 1.8rem; height: 1.8rem; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } .stat-box { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1.11rem 1.44rem; display: flex; flex-direction: column; justify-content: center; } .stat-box__value { font-family: var(--font-display); font-size: var(--text-8xl); font-weight: 800; line-height: 1.2; margin-bottom: 0.1rem; } .stat-box__desc { font-size: var(--text-md); color: var(--muted); font-weight: 400; line-height: 1.55; } /* ════════════════════════════════════ SLIDE 3 — SOLUTION ════════════════════════════════════ */ #s3 { display: flex; flex-direction: column; } #s3 .layout { display: flex; gap: 1.33rem; flex: 1; min-height: 0; } /* Coherent column card shared by all three sections */ .sol-col { flex: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.55rem 1.66rem; } .sol-col--flagship { flex: 1.18; background: linear-gradient(160deg, rgba(0, 196, 160, .09), rgba(0, 196, 160, .02)); border-color: rgba(0, 196, 160, .4); box-shadow: inset 0 0 0 1px rgba(0, 196, 160, .08), 0 0 36px rgba(0, 196, 160, .06); } .sol-col__head { display: flex; align-items: center; justify-content: space-between; gap: 0.78rem; margin-bottom: 1.1rem; padding-bottom: 0.72rem; border-bottom: 1px solid var(--border); } .sol-col__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.01em; } .sol-col__count { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); white-space: nowrap; } .badge-flagship { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); background: rgba(0, 196, 160, .16); border: 1px solid rgba(0, 196, 160, .4); padding: 0.28rem 0.66rem; border-radius: 999px; white-space: nowrap; } .method-list { display: flex; flex-direction: column; flex: 1; justify-content: space-around; } .method-row { display: flex; align-items: flex-start; gap: 0.78rem; } .method-dot { width: 0.55rem; height: 0.55rem; min-width: 0.55rem; border-radius: 50%; background: var(--teal); margin-top: 0.5rem; box-shadow: 0 0 0 4px rgba(0, 196, 160, .12); } .method-name { font-size: var(--text-xl); font-weight: 600; color: var(--text); margin-bottom: 0.22rem; } .method-desc { font-size: var(--text-base); color: var(--muted); font-weight: 400; line-height: 1.45; } /* Flagship inner content */ .ble-head { margin-bottom: 0.4rem; } .ble-title { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: 800; color: var(--teal); line-height: 1.2; } .ble-sub { font-size: var(--text-md); color: var(--muted); font-weight: 400; margin-top: 0.33rem; } .ble-steps { display: flex; flex-direction: column; flex: 1; justify-content: space-between; margin-top: 1rem; list-style: none; padding: 0; } .ble-step { display: flex; align-items: center; gap: 0.78rem; font-size: var(--text-lg); font-weight: 500; color: var(--text); } .ble-step__num { width: 1.9rem; height: 1.9rem; min-width: 1.9rem; border-radius: 50%; background: rgba(0, 196, 160, .2); border: 1px solid rgba(0, 196, 160, .45); color: var(--teal); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; } .integration-list { display: flex; flex-direction: column; flex: 1; justify-content: space-around; } .integration-row { display: flex; align-items: center; gap: 0.78rem; } .integration-dot { width: 0.5rem; height: 0.5rem; min-width: 0.5rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); } .integration-name { font-size: var(--text-lg); font-weight: 500; color: var(--text); } /* Unified bottom value strip */ .solution-footer { display: flex; align-items: stretch; gap: 1.55rem; margin-top: 1.33rem; padding: 1rem 1.66rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } .sf-item { flex: 1; display: flex; flex-direction: column; gap: 0.28rem; justify-content: center; } .sf-label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; } .sf-text { font-size: var(--text-md); color: var(--muted); font-weight: 400; } .sf-text em { color: var(--text); font-style: normal; font-weight: 600; } .sf-divider { width: 1px; background: var(--border); } /* ════════════════════════════════════ SLIDE 4 — IOT LAYERS ════════════════════════════════════ */ #s4 .layout { display: flex; gap: 2.44rem; height: 43.89rem; } #s4 .layout-left { flex: 1.5; display: flex; flex-direction: column; gap: 0.89rem; } #s4 .layout-right { flex: 1; display: flex; align-items: center; justify-content: center; } .iot-layer { flex: 1; border-radius: 6px; overflow: hidden; display: flex; align-items: stretch; border: 1px solid var(--border); } .iot-layer__num { width: 3rem; min-width: 3rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-base); font-weight: 500; } .iot-layer__body { flex: 1; background: var(--surface); padding: 0.95rem 1.33rem; display: flex; flex-direction: column; justify-content: center; } .iot-layer__name { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; margin-bottom: 0.33rem; } .iot-layer__desc { font-size: var(--text-md); color: var(--muted); margin-bottom: 0.66rem; font-weight: 400; line-height: 1.4; } .iot-layer__chips { display: flex; flex-wrap: wrap; gap: 0.28rem; } .iot-layer--L1 .iot-layer__num { background: rgba(0, 196, 160, .1); color: var(--teal); } .iot-layer--L1 { border-left: 3px solid var(--teal); } .iot-layer--L2 .iot-layer__num { background: rgba(59, 130, 246, .1); color: var(--blue); } .iot-layer--L2 { border-left: 3px solid var(--blue); } .iot-layer--L3 .iot-layer__num { background: rgba(139, 92, 246, .1); color: var(--purple); } .iot-layer--L3 { border-left: 3px solid var(--purple); } .iot-layer--L4 .iot-layer__num { background: rgba(245, 158, 11, .1); color: var(--amber); } .iot-layer--L4 { border-left: 3px solid var(--amber); } .s4-graphic { width: 100%; max-width: 36rem; height: 43rem; } /* ════════════════════════════════════ SLIDE 5 — BUSINESS MODEL ════════════════════════════════════ */ #s5 { display: flex; flex-direction: column; } .model-cards { display: flex; gap: 1rem; flex: 1.25; min-height: 0; } .model-card { flex: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .model-card__stripe { height: 0.34rem; } .model-card__stripe--teal { background: var(--teal); } .model-card__stripe--blue { background: var(--blue); } .model-card__stripe--purple { background: var(--purple); } .model-card__stripe--amber { background: var(--amber); } .model-card__body { padding: 1.55rem 1.55rem; flex: 1; display: flex; flex-direction: column; } .model-card__name { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; margin-bottom: 0.28rem; } .model-card__type { font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em; } .model-card__items { font-size: var(--text-md); color: var(--muted); font-weight: 400; line-height: 1.4; list-style: none; padding: 0; margin-top: 1.22rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 0.66rem; } .model-card__items li { padding-left: 1.1rem; position: relative; } .model-card__items li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.44rem; height: 0.44rem; border-radius: 50%; background: var(--soft); } .model-cards .model-card:nth-child(1) .model-card__items li::before { background: var(--teal); } .model-cards .model-card:nth-child(2) .model-card__items li::before { background: var(--blue); } .model-cards .model-card:nth-child(3) .model-card__items li::before { background: var(--purple); } .model-cards .model-card:nth-child(4) .model-card__items li::before { background: var(--amber); } .tiers { flex: 1; display: flex; flex-direction: column; margin-top: 1.1rem; min-height: 0; } .tiers__heading { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--soft); margin-bottom: 0.66rem; } .tiers__row { display: flex; gap: 0.89rem; flex: 1; min-height: 0; } .tier { flex: 1; padding: 1.22rem 1.55rem; background: var(--surface2); border-radius: 10px; border: 1px solid var(--border); border-top: 4px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; } .tier--teal { border-top-color: var(--teal); } .tier--blue { border-top-color: var(--blue); } .tier--purple { border-top-color: var(--purple); } .tier__name { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; line-height: 1.2; } .tier--teal .tier__name { color: var(--teal); } .tier--blue .tier__name { color: var(--blue); } .tier--purple .tier__name { color: var(--purple); } .tier__desc { font-size: var(--text-md); color: var(--muted); font-weight: 400; line-height: 1.5; } .cost-bar { flex: 0.55; padding: 1.1rem 1.66rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; border-left: 4px solid var(--red); margin-top: 1.1rem; display: flex; align-items: center; gap: 1.66rem; min-height: 0; } .cost-bar__label { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.05; color: var(--text); white-space: nowrap; } .cost-bar__items { font-size: var(--text-md); color: var(--muted); font-weight: 400; display: flex; flex-wrap: wrap; gap: 0.66rem 0.78rem; } .cost-bar__items span { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 0.44rem 1.1rem; } /* ════════════════════════════════════ SLIDE 6 — BUSINESS CANVAS ════════════════════════════════════ */ #s6 { display: flex; flex-direction: column; } #s6 .canvas { display: flex; flex-direction: column; gap: 0.78rem; margin-top: 0.44rem; flex: 1; min-height: 0; } #s6 .canvas-top { display: flex; gap: 0.78rem; flex: 1; min-height: 0; } #s6 .canvas-bottom { display: flex; gap: 0.78rem; flex: 0 0 11.5rem; } .canvas-box { flex: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: 8px; padding: 1rem 1.22rem; overflow: hidden; } /* Color-code every block by its label colour — coherent canvas */ .canvas-box:has(.text-teal) { border-top-color: var(--teal); } .canvas-box:has(.text-blue) { border-top-color: var(--blue); } .canvas-box:has(.text-purple) { border-top-color: var(--purple); } .canvas-box:has(.text-amber) { border-top-color: var(--amber); } .canvas-box:has(.text-green) { border-top-color: var(--green); } .canvas-box:has(.text-red) { border-top-color: var(--red); } .canvas-stack { flex: 1; display: flex; flex-direction: column; gap: 0.78rem; min-height: 0; } /* Value Proposition is the heart of the canvas — give it width + emphasis */ .canvas-box--vp { flex: 1.7; background: linear-gradient(160deg, rgba(139, 92, 246, .14), rgba(139, 92, 246, .03)); border-color: rgba(139, 92, 246, .4); border-top-width: 3px; } .canvas-box__label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 0.66rem; padding-bottom: 0.44rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .canvas-box--vp .canvas-box__label { font-size: var(--text-base); } .canvas-box__content { font-size: var(--text-md); color: var(--muted); line-height: 1.7; font-weight: 400; flex: 1; display: flex; flex-direction: column; justify-content: center; } .canvas-box--vp .canvas-box__content { color: var(--text); font-size: var(--text-lg); line-height: 1.9; } .canvas-box__content li { list-style: none; padding-left: 1rem; position: relative; } .canvas-box__content li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.36rem; height: 0.36rem; border-radius: 50%; background: var(--soft); } .canvas-box--vp .canvas-box__content li::before { background: var(--purple); } /* Wide bottom blocks (Cost Structure / Revenue Streams) keep the exact same header + bulleted-list interface as every other block; the list simply flows into columns to fill their extra width. */ .canvas-box--wide .canvas-box__content { flex: 0 1 auto; display: block; column-count: 2; column-gap: 2.5rem; margin-block: auto; } .canvas-box--wide .canvas-box__content li { break-inside: avoid; } /* ════════════════════════════════════ SLIDE 7 — THANK YOU ════════════════════════════════════ */ #s7 { padding: 0; display: flex; overflow: hidden; } #s7-visual { width: 50rem; position: relative; overflow: hidden; } #s7-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; } #s7-content { flex: 1; padding: 4.44rem 4.78rem; display: flex; flex-direction: column; justify-content: center; } .ty-label { font-family: var(--font-mono); font-size: var(--text-base-sm); text-transform: uppercase; letter-spacing: .18em; color: var(--dim); margin-bottom: 1rem; } .ty-heading { font-family: var(--font-display); font-size: var(--text-13xl); font-weight: 800; line-height: 1.0; letter-spacing: -4px; } .ty-heading--white { color: var(--text); } .ty-heading--teal { color: var(--teal); } .ty-bar { width: 4rem; height: 2px; background: var(--teal); margin: 1.44rem 0; } .ty-subtitle { font-size: var(--text-4xl); color: var(--muted); font-weight: 300; line-height: 1.6; margin-bottom: 1.56rem; } .ty-question { font-family: var(--font-display); font-size: var(--text-7xl); font-weight: 700; color: var(--teal); }