/* "Fold my site into a box": the printable cube page, and the sheet itself (laid out in millimetres so it prints at real size). */
:root { --pink: #ffe8e7; --ink: #181b2e; --orange: #fe5621; --paper: #fffdf8; --peach: #ffb890; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--pink); color: var(--ink); font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.pb-skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.pb-skip:focus { left: 12px; }
a { color: inherit; }

/* top bar, like the site's: back left, logo centre, one action right */
.pb-nav { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1240px; margin: 0 auto; padding: 18px max(20px, env(safe-area-inset-left, 0px)); font: 500 15px/1 Outfit, sans-serif; }
.pb-nav-back { text-decoration: none; padding: 10px 0; justify-self: start; } .pb-nav-back:hover { color: var(--orange); }
.pb-nav-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 17px; }
.pb-nav-logo svg { width: 20px; height: 20px; }
.pb-nav-dl { justify-self: end; text-decoration: none; padding: 11px 18px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 14px; transition: background .15s ease; }
.pb-nav-dl:hover { background: var(--orange); }
.pb-nav a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 8px; }

main { display: block; }
.pb-eyebrow { margin: 0 0 12px; font: 600 12px/1 Outfit, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); }

/* hero: big type left, the box folding itself on a dark card right */
.pb-hero { max-width: 1240px; margin: 0 auto; padding: clamp(18px, 4vw, 48px) max(20px, env(safe-area-inset-left, 0px)) clamp(48px, 7vw, 96px); display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.pb-hero h1 { margin: 0; font: 600 clamp(48px, 8.6vw, 112px)/.96 Outfit, sans-serif; letter-spacing: -.035em; }
.pb-lead { margin: 22px 0 0; max-width: 33em; font: 400 clamp(16px, 1.5vw, 19px)/1.6 Outfit, sans-serif; opacity: .82; }
.pb-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.pb-btn { appearance: none; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 500 15px/1 Outfit, sans-serif; padding: 15px 24px; border-radius: 99px; cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.pb-btn:hover { background: var(--ink); color: #fff; }
.pb-btn:active { transform: scale(.97); }
.pb-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.pb-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.pb-primary:hover { background: var(--ink); border-color: var(--ink); }
.pb-facts { margin: 34px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 30px; font: 400 15px/1 Outfit, sans-serif; opacity: .75; }
.pb-facts b { font-weight: 600; font-size: 22px; color: var(--ink); margin-right: 4px; letter-spacing: -.02em; }
.pb-cube-card { position: relative; border-radius: clamp(22px, 3vw, 34px); background: var(--ink); padding: clamp(18px, 3vw, 34px) clamp(10px, 2vw, 24px) clamp(34px, 4vw, 46px); overflow: hidden; box-shadow: 0 40px 70px -40px rgba(24,27,46,.55); }
.pb-cube-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 60% 55%, rgba(254,86,33,.22), transparent 70%); pointer-events: none; }
.pb-cube-card .ks-pp-stage { --S: clamp(84px, calc((100vw - 96px) / 4.7), 124px); position: relative; }
@media (min-width: 900px) { .pb-hero { grid-template-columns: minmax(0, 6.2fr) minmax(0, 5fr); } .pb-cube-card .ks-pp-stage { --S: clamp(108px, 11vw, 156px); } }

/* section headings */
.pb-sec-head { max-width: 1240px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left, 0px)); }
.pb-sec-head h2 { margin: 0; font: 600 clamp(34px, 5vw, 60px)/1 Outfit, sans-serif; letter-spacing: -.03em; }
.pb-sec-lead { margin: 14px 0 0; max-width: 40em; font: 400 17px/1.55 Outfit, sans-serif; opacity: .75; }

/* the sheet, laid on a desk */
.pb-sheet-sec { background: linear-gradient(180deg, #fff5f3, #fbdedb); padding: clamp(56px, 8vw, 104px) 0; }
.pb-legend { max-width: 1240px; margin: 26px auto 0; padding: 0 max(20px, env(safe-area-inset-left, 0px)); list-style: none; display: flex; flex-wrap: wrap; gap: 12px 34px; font: 400 15px/1 Outfit, sans-serif; }
.pb-legend li { display: inline-flex; align-items: center; gap: 12px; } .pb-legend svg { width: 54px; height: 14px; flex: none; }
.pb-legend b { font-weight: 600; }
.pb-desk { max-width: 1240px; margin: 34px auto 0; padding: 0 max(20px, env(safe-area-inset-left, 0px)); }
.pb-frame { position: relative; width: 100%; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 2px 0 rgba(24,27,46,.04), 0 40px 70px -36px rgba(24,27,46,.55), 0 0 0 1px rgba(24,27,46,.05); }
.pb-sheet { position: relative; width: 297mm; height: 210mm; transform-origin: 0 0; background: #fff; }
.pb-sheet .lines { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; }
.lines .cut { stroke: #181b2e; stroke-width: .35; fill: none; }
.lines .fold { stroke: #181b2e; stroke-width: .3; stroke-dasharray: 1.6 1.2; opacity: .75; }
.lines .tab { fill: #f1ece3; stroke: #181b2e; stroke-width: .35; }

.face { position: absolute; width: 58mm; height: 58mm; padding: 5.5mm; overflow: hidden; display: flex; flex-direction: column; gap: 1.6mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.face.pink { background: var(--pink); } .face.paper { background: var(--paper); } .face.ink { background: var(--ink); color: var(--pink); }
.eyebrow { margin: 0 0 1.5mm; font: 600 6.2pt/1 Outfit, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.face ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2.2mm; }
.face li { font: 500 10.5pt/1.1 Outfit, sans-serif; }
.face li small { display: block; margin-top: .6mm; font: 400 6.4pt/1.2 Outfit, sans-serif; opacity: .65; }
.f-front { display: flex; flex-direction: column; height: 100%; }
.f-front .spark { width: 10mm; height: 10mm; }
.f-front h2 { margin: auto 0 0; font: 600 19pt/1 Outfit, sans-serif; letter-spacing: -.02em; }
.f-front .role { margin: 1.2mm 0 0; font: 400 9.5pt/1.2 Outfit, sans-serif; opacity: .8; }
.f-front .url { margin: 3mm 0 0; font: 500 7pt/1 Outfit, sans-serif; letter-spacing: .06em; color: var(--orange); }
.face .line { margin: 0 0 2.2mm; font: 400 7.4pt/1.3 Outfit, sans-serif; word-break: break-word; }
.face.ink .eyebrow { color: var(--peach); }
.qr { width: 38mm; height: 38mm; margin: 1.5mm auto 0; padding: 2mm; background: #fff; border-radius: 1mm; } .qr svg { width: 100%; height: 100%; display: block; }
.scan { margin: 1.5mm 0 0; text-align: center; font: 600 6.4pt/1 Outfit, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.f-Bo { align-items: center; justify-content: center; }
.art { margin: 0; font: 400 3.05pt/1.18 ui-monospace, Consolas, monospace; white-space: pre; color: var(--ink); }
.toronto { margin: 2mm 0 0; font: 500 5pt/1 ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }

/* steps */
.pb-steps-sec { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) 0; }
.pb-steps { margin: 40px 0 0; padding: 0 max(20px, env(safe-area-inset-left, 0px)); list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.pb-steps li { position: relative; background: #fff; border-radius: 26px; padding: 26px 24px 28px; box-shadow: 0 30px 50px -36px rgba(24,27,46,.4); display: flex; flex-direction: column; gap: 8px; min-height: 250px; }
@media (max-width: 640px) { .pb-steps li { min-height: 0; } }
.pb-ico { width: 54px; height: 54px; border-radius: 18px; background: var(--pink); color: var(--ink); display: grid; place-items: center; } .pb-ico svg { width: 30px; height: 30px; }
.pb-num { position: absolute; right: 22px; top: 18px; font: 600 54px/1 Outfit, sans-serif; letter-spacing: -.04em; color: var(--orange); opacity: .22; }
.pb-steps h3 { margin: 18px 0 0; font: 600 26px/1.1 Outfit, sans-serif; letter-spacing: -.02em; }
.pb-steps p { margin: 0; font: 400 15.5px/1.55 Outfit, sans-serif; opacity: .78; }

/* closing band */
.pb-end { position: relative; background: var(--ink); color: var(--pink); overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 0; }
.pb-end-in { max-width: 1240px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left, 0px)) 80px; display: grid; gap: 32px; align-items: end; }
.pb-end h2 { margin: 0; font: 600 clamp(40px, 6vw, 76px)/1 Outfit, sans-serif; letter-spacing: -.03em; }
.pb-end p { margin: 14px 0 0; font: 400 18px/1.5 Outfit, sans-serif; opacity: .8; }
.pb-end .pb-btn { border-color: var(--pink); color: var(--pink); } .pb-end .pb-btn:hover { background: var(--pink); color: var(--ink); }
.pb-end .pb-primary { background: var(--orange); border-color: var(--orange); color: #fff; } .pb-end .pb-primary:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.pb-art { margin: 0; font: 400 clamp(6px, .75vw, 9px)/1.18 ui-monospace, Consolas, monospace; white-space: pre; color: var(--pink); opacity: .8; justify-self: end; align-self: end; }
.pb-ground { height: 1px; background: rgba(255,232,231,.3); margin-top: -81px; position: relative; }
@media (min-width: 900px) { .pb-end-in { grid-template-columns: 1fr auto; } }
@media (max-width: 899px) { .pb-art { justify-self: start; } }

@page { size: A4 landscape; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  .pb-nav, .pb-hero, .pb-steps-sec, .pb-end, .pb-sec-head, .pb-legend, .pb-skip { display: none !important; }
  .pb-sheet-sec { background: none; padding: 0; } .pb-desk { max-width: none; padding: 0; margin: 0; }
  .pb-frame { box-shadow: none; border-radius: 0; overflow: visible; width: 297mm !important; height: 210mm !important; }
  .pb-sheet { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) { .pb-btn, .pb-nav-dl { transition: none; } }

/* site navigation clearance */
.pb-hero { padding-top: clamp(104px, 11vw, 150px); }
body.body-7 { background: var(--pink); }
/* the site's base styles give paragraphs a dark colour: let them inherit from their own panel instead */
main p, .face p, .pp-in p, .pp-in li, .pb-end p { color: inherit; }