/* Yoohoo north star, v2. Light and bright on the Yoohoo brand: cool paper, cobalt and ink fields, devices large and cropped. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque-Variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --paper: #f6f7fc; --raised: #ffffff; --line: #dfe3f0;
  --ink: #0f1633; --muted: #5a6380;
  --cobalt: #2448f0; --cobalt-deep: #1a37c4; --cobalt-wash: #e9edfe;
  --bubblegum: #ff8ac2; --lemon: #ffe24a; --fynbos: #1d6e4f;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px; --gut: max(20px, env(safe-area-inset-left, 0px));
  --r-lg: 32px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* Type */
h1, h2, h3 { font-family: var(--display); font-weight: 800; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(46px, 6.4vw, 88px); line-height: .94; letter-spacing: -.035em; }
h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: .98; letter-spacing: -.03em; }
h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -.02em; }
.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--muted); max-width: 34em; margin: 0; }
.kicker { font: 600 16px var(--text); color: var(--ink); margin: 0 0 20px; }
.fine { color: var(--muted); font-size: 14px; margin: 16px 0 0; }
.fine a { color: var(--muted); }

/* Buttons: every button a pill */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 999px; font: 600 17px var(--text); text-decoration: none; white-space: nowrap; transition: transform .15s ease, background .15s ease; }
.btn.primary { background: var(--cobalt); color: #fff; }
.btn.primary:hover { background: var(--cobalt-deep); }
.btn:active { transform: scale(.98); }
.more { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.more::after { content: "→"; transition: transform .15s ease; }
.tile:hover .more::after { transform: translateX(4px); }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--paper); }
[id], h2 { scroll-margin-top: 88px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--paper); }
.top .wrap { height: 72px; display: flex; align-items: center; gap: 32px; }
.wm { height: 26px; width: auto; color: var(--ink); display: block; }
.wm-link { display: flex; align-items: center; min-height: 44px; }
.nav { display: flex; gap: 32px; font-weight: 500; font-size: 16px; }
.nav a { text-decoration: none; color: var(--ink); opacity: .72; min-height: 44px; display: flex; align-items: center; }
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav a[aria-current] { font-weight: 700; }
.top .btn { margin-left: auto; height: 44px; padding: 0 20px; font-size: 16px; }
.menu { display: none; }

/* Hero */
.hero { padding-block: 56px 0; }
.hero h1 { max-width: 15em; }
.hero .lede { margin-top: 28px; }
.hero .acts { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.p-hero { padding-block: 56px 0; }
.p-hero .lede { margin-top: 24px; }

/* Stage: the brand field with the product on it */
.stage { position: relative; margin-top: 48px; border-radius: var(--r-lg); background: var(--cobalt); overflow: hidden; height: 760px; isolation: isolate; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 70% 0%, rgba(255,255,255,.16), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(10,20,90,.35), transparent 70%); }
.stage.s-ink { background: var(--ink); }
.stage.s-ink::before { background: radial-gradient(60% 70% at 72% 0%, rgba(36,72,240,.42), transparent 70%); }
.stage.s-wash { background: var(--cobalt-wash); }
.stage.s-wash::before { background: radial-gradient(60% 70% at 70% 0%, rgba(255,255,255,.7), transparent 70%); }
/* The laptop is shown large and cropped by the stage, so its screen reads at close to full size; the phone stands in front */
.stage .mac { position: absolute; left: 1%; top: 64px; width: 128%; max-width: none; filter: drop-shadow(0 40px 50px rgba(8,16,70,.38)); }
.stage .phone { position: absolute; right: 5%; top: 64px; width: 32%; max-width: 384px; filter: drop-shadow(0 30px 40px rgba(8,16,70,.45)); }
.stage.phone-left .mac { left: 24%; }
.stage.phone-left .phone { right: auto; left: 5%; }
.stage.solo { height: 720px; }
.stage.solo .phone { right: auto; left: 50%; transform: translateX(-50%); top: 72px; width: 400px; }
.float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(8,16,70,.22); font-size: 15px; line-height: 1.3; color: var(--ink); }
.float b { display: block; font: 800 20px/1.1 var(--display); letter-spacing: -.01em; }
.float small { color: var(--muted); font-size: 14px; }
.float img { width: 40px; height: 40px; border-radius: 12px; }
.stage .float { right: 6%; top: 48px; }
.stage.solo .float { right: auto; left: calc(50% + 220px); top: 200px; }

/* Proof band: one result, big, and the price as one meta line */
.proof { padding-block: 88px 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.proof .big { font: 800 clamp(64px, 9vw, 128px)/.9 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proof .big span { color: var(--muted); font-weight: 600; }
.proof p { margin: 16px 0 0; font-size: 19px; line-height: 1.45; max-width: 26em; }
.proof .meta { color: var(--muted); font-size: 17px; margin: 0; padding-bottom: 8px; }
.proof .meta b { color: var(--ink); }

/* Section rhythm */
.sec { padding-block: 104px 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 48px; }
.sec-head .lede { justify-self: start; max-width: 40em; }
.sec-head.solo { grid-template-columns: 1fr; }

/* Bento tiles: each a field with a cropped device */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.tile { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 600px; padding: 40px 40px 0; display: flex; flex-direction: column; isolation: isolate; text-decoration: none; color: var(--ink); }
.tile p { margin: 12px 0 0; font-size: 17px; line-height: 1.5; max-width: 26em; }
.tile .more { margin-top: 8px; }
.tile .dev { position: absolute; left: 50%; transform: translateX(-50%); bottom: -38%; width: 300px; filter: drop-shadow(0 24px 34px rgba(15,22,51,.28)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tile:hover .dev { transform: translateX(-50%) translateY(-8px); }
.s7 { grid-column: span 7; } .s5 { grid-column: span 5; } .s12 { grid-column: span 12; }
.tile.s7 { padding-right: 50%; }
.tile.s7 .dev { left: auto; right: 8%; transform: none; bottom: -30%; }
.tile.s7:hover .dev { transform: translateY(-8px); }
.tile.s12 { padding-right: 52%; min-height: 440px; }
.tile.s12 .dev { left: 75%; right: auto; transform: translateX(-50%); bottom: auto; top: 56px; width: 380px; }
.tile.s12:hover .dev { transform: translateX(-50%) translateY(-8px); }
.t-cobalt { background: var(--cobalt); color: #fff; } .t-cobalt h3 { color: #fff; } .t-cobalt p { color: rgba(255,255,255,.84); }
.t-ink { background: var(--ink); color: #fff; } .t-ink h3 { color: #fff; } .t-ink p { color: rgba(241,243,255,.78); }
.t-wash { background: var(--cobalt-wash); }
.t-raised { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
/* A tile that shows the owner's side: the admin panel sits under the headline and runs off the tile's foot */
.tile:has(.adm), .tile.s7:has(.adm) { height: 600px; padding-right: 40px; }
.tile.s7:has(.adm) h3 { max-width: 18em; }
.tile .adm { display: block; width: 440px; max-width: 100%; height: auto; margin-top: 32px; border-radius: 18px; box-shadow: 0 24px 48px -12px rgba(15,22,51,.30), 0 2px 6px rgba(15,22,51,.08); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tile:hover .adm { transform: translateY(-6px); }

/* Split: words on one side, a big device on a field on the other */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip .panel { order: -1; }
.split h2 { font-size: clamp(34px, 3.8vw, 52px); }
.split .lede { margin-top: 20px; }
.split .line { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 17px; }
.split .line + .line { margin-top: 0; }
.panel { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 640px; isolation: isolate; }
.panel .dev { position: absolute; left: 50%; transform: translateX(-50%); top: 56px; width: 330px; filter: drop-shadow(0 26px 36px rgba(15,22,51,.26)); }
.panel .float { left: 24px; top: 24px; }
.panel:has(.float) .dev { top: 112px; }
.p-cobalt { background: var(--cobalt); } .p-wash { background: var(--cobalt-wash); } .p-ink { background: var(--ink); }

/* A run of times: one customer's story, left to right */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.timeline > div { position: relative; padding: 28px 28px 0 0; }
.timeline > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.timeline time { display: block; font: 800 clamp(34px, 3.6vw, 48px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.timeline b { display: block; margin-top: 14px; font-weight: 600; font-size: 17px; }
.timeline p { margin: 6px 0 0; color: var(--muted); font-size: 16px; }
.timeline .paid time { color: var(--fynbos); }

/* One plain sentence, set large */
.say { font: 800 clamp(28px, 3vw, 40px)/1.12 var(--display); letter-spacing: -.02em; max-width: 24em; margin: 0; text-wrap: balance; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 40px; margin: 40px 0 0; padding: 32px 0 0; list-style: none; border-top: 1px solid var(--line); }
.rules li { font-size: 16px; color: var(--muted); }

/* Messages, word for word: real bubbles on the chat wallpaper */
.words { border-radius: var(--r-lg); background: #efeae2 url("img/doodle.svg") 0 0 / 300px; padding: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
.words.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.words figure { margin: 0; display: grid; gap: 8px; align-content: start; }
.words figcaption { font: 600 14px var(--text); color: #54656f; margin: 0 0 4px 4px; }
.words figcaption span { font-weight: 400; display: block; }
.bub { position: relative; justify-self: start; max-width: 100%; background: #fff; border-radius: 18px; border-top-left-radius: 0; padding: 9px 11px 8px 12px; font: 400 14px/1.4 -apple-system, "SF Pro Text", system-ui, sans-serif; color: #111b21; box-shadow: 0 1px .5px rgba(11,20,26,.13); letter-spacing: -.2px; margin-left: 8px; }
.bub::before { content: ""; position: absolute; top: 0; left: -7.5px; width: 8px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M8 0H1.2C.2 0-.3 1.2.4 1.9L8 9.6z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat; }
.bub.out { justify-self: end; background: #d9fdd3; border-top-left-radius: 18px; border-top-right-radius: 0; margin-left: 0; margin-right: 8px; }
.bub.out::before { left: auto; right: -7.5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M0 0h6.8c1 0 1.5 1.2.8 1.9L0 9.6z' fill='%23d9fdd3'/%3E%3C/svg%3E"); }
.bub a { color: #027eb5; text-decoration: none; }
.bub .tm { float: right; margin: 8px -2px -4px 10px; font-size: 11px; color: #667781; }
.sys { justify-self: center; padding: 5px 12px; border-radius: 10px; background: #fff4cc; font: 400 13px -apple-system, system-ui, sans-serif; color: #54656f; text-align: center; }

/* Admin on the MacBook; on a phone, a crisp crop of the key panel */
.desk { border-radius: var(--r-lg); background: linear-gradient(180deg, var(--cobalt-wash), var(--paper)); padding: 72px 40px 32px; overflow: hidden; }
.desk .mac { width: min(1120px, 100%); margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(15,22,51,.16)); }
.desk::after { content: ""; display: block; width: min(980px, 88%); height: 24px; margin: -6px auto 0; background: radial-gradient(50% 50% at 50% 50%, rgba(15,22,51,.18), transparent 70%); }
.shot { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -24px rgba(15,22,51,.25); }
.shot img { width: 100%; }
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
.caps b { display: block; font: 800 22px/1.15 var(--display); }
.caps p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }

/* Date strip: a plan's payments on the calendar, ruled like the timeline */
.dates { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.dates > div { padding: 28px 28px 0 0; display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.dates > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.dates time { font: 800 clamp(30px, 3vw, 40px)/1 var(--display); letter-spacing: -.02em; }
.dates b { display: block; margin-top: 14px; font: 700 20px/1.2 var(--text); font-variant-numeric: tabular-nums; }
.dates p { margin: 6px 0 0; color: var(--muted); font-size: 16px; }
.dates .done time { color: var(--muted); }
.dates .next time { color: var(--cobalt); }

/* A number beat */
.beat { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: end; border-top: 2px solid var(--ink); padding-top: 32px; }
.beat .n { font: 800 clamp(64px, 9vw, 128px)/.9 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.beat .n small { font-size: .4em; color: var(--muted); letter-spacing: -.01em; }
.beat p { margin: 0; font-size: 19px; line-height: 1.45; color: var(--muted); max-width: 28em; }
.beat p b { color: var(--ink); }

/* Two columns split by a rule */
.pair { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.pair > div { padding: 32px 48px 0 0; }
.pair > div + div { padding-left: 48px; border-left: 1px solid var(--line); }
.pair .tag { display: block; font: 600 15px var(--text); color: var(--muted); margin-bottom: 12px; }
.pair h3 { font-size: clamp(24px, 2.2vw, 30px); }
.pair p { margin: 14px 0 0; color: var(--muted); font-size: 17px; max-width: 30em; }
.pair ul { margin: 20px 0 0; padding: 0; list-style: none; }
.pair li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; }

/* Merchant voice, set on the page */
.voice { display: grid; gap: 28px; border-top: 2px solid var(--ink); padding-top: 32px; }
.voice .ex { margin: 0; }
.voice blockquote { margin: 0; max-width: 30em; font: 800 clamp(30px, 3.6vw, 50px)/1.06 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.voice cite { display: flex; gap: 14px; align-items: center; font: 500 17px var(--text); font-style: normal; }
.voice cite span { color: var(--muted); }
.voice cite img { width: 52px; height: 52px; border-radius: 14px; }

/* Pricing */
.price { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 48rem; }
.fees { width: 100%; border-collapse: collapse; font-size: 17px; }
.fees th, .fees td { text-align: left; padding: 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fees td:nth-child(n+2), .fees th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 24px; }
.fees thead th { font-size: 14px; color: var(--muted); font-weight: 600; padding-top: 0; }
.fees td small { display: block; color: var(--muted); font-size: 15px; margin-top: 4px; }

/* Start */
.start { border-radius: var(--r-lg); background: var(--cobalt); color: #fff; padding: 88px 80px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; margin-top: 104px; }
.start h2 { color: #fff; }
.start ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.start li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.22); font-size: 18px; }
.start li::before { content: counter(s); font: 800 28px/1 var(--display); color: var(--lemon); }
.start li b { display: block; font-weight: 600; }
.start li span { color: rgba(255,255,255,.8); font-size: 16px; }
.start .btn.primary { background: #fff; color: var(--cobalt); }
.start .cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 32px; }
.start .alt { color: #fff; font-weight: 600; font-size: 17px; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }

/* The character: the smile marks money coming in; the peeker looks over the closing block */
.float .smile { width: 40px; height: 40px; border-radius: 9px; flex: none; }
@media (max-width: 640px) { .start .peek .look { transform: translate(-3px, 3px); } }
.start { position: relative; }
.start .peek { position: absolute; right: 80px; bottom: 100%; width: 104px; height: auto; display: block; z-index: -1; }
.motion .start .peek { transform: translateY(100%); transition: transform .6s cubic-bezier(.34, 1.3, .5, 1); }
.motion .start.peeked .peek { transform: none; }
.lost { padding-block: 96px 48px; min-height: calc(100svh - 64px); box-sizing: border-box; }
/* The way home is the 404's only job in the first screenful: the footer starts below it */
.lost h1 { margin-bottom: 24px; }
.lost .ledge { border-bottom: 2px solid var(--ink); max-width: 12em; font-size: clamp(46px, 6.4vw, 88px); }
.lost .peek { width: 104px; height: auto; display: block; margin-left: 0; }
.lost p { margin: 24px 0 0; font-size: 19px; }
.lost p a { min-height: 44px; display: inline-flex; align-items: center; }
.lost a { color: var(--ink); text-underline-offset: 4px; }

/* Privacy: one readable column */
.doc > * { max-width: 40rem; }
.doc { padding-block: 96px 48px; font-size: 18px; line-height: 1.6; }
.doc h1 { margin: 0; }
.doc .date { color: var(--muted); margin: 16px 0 0; }
.doc h2 { font: 700 24px/1.25 var(--display); letter-spacing: -.01em; margin: 48px 0 12px; }
.doc p, .doc ul { margin: 0 0 16px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--cobalt); text-underline-offset: 3px; }
.foot .credit a { color: inherit; text-underline-offset: 3px; }

/* Footer */
.foot { padding-block: 80px 48px; color: var(--muted); font-size: 15px; }
.foot .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: last baseline; }
.foot .credit { order: -1; }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; }
.foot nav a { text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.foot a:hover { color: var(--ink); }
.foot p { margin: 16px 0 0; }

.yh-wave { transform-box: fill-box; transform-origin: 50% 100%; }
.is-waving .yh-wave { animation: yh-wave 2.6s cubic-bezier(.34, 1.4, .5, 1) 1; animation-delay: calc(var(--i) * 90ms); }
@keyframes yh-wave { 0% { transform: translateY(0) scale(1); } 9% { transform: translateY(-22%) scale(1.16); } 18% { transform: translateY(0) scale(1.04, .94); } 24%, 100% { transform: translateY(0) scale(1); } }

/* Tablet */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu { display: block; }
  .menu summary { list-style: none; height: 44px; width: 44px; border-radius: 22px; display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--raised); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] .sheet { display: grid; }
  .sheet { display: none; position: absolute; left: var(--gut); right: 20px; top: 68px; background: var(--raised); border-radius: 20px; box-shadow: 0 20px 50px rgba(15,22,51,.18); padding: 8px 20px 20px; }
  .sheet a { text-decoration: none; font: 500 20px var(--text); padding: 12px 0; min-height: 48px; border-bottom: 1px solid var(--line); }
  .sheet a[aria-current] { font-weight: 800; }
  .sheet a.btn { border: 0; margin-top: 16px; font: 600 17px var(--text); padding: 0 24px; }
  .split, .split.flip { grid-template-columns: 1fr; gap: 36px; }
  /* On a phone the heading introduces the person before the phone shows them */
  .split.flip .panel { order: 1; }
  .words { grid-template-columns: 1fr 1fr; }
  .timeline, .dates { grid-template-columns: 1fr 1fr; }
  .timeline > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .rules { grid-template-columns: 1fr 1fr; }
  .tile.s12 { padding-right: 40px; min-height: 640px; }
  .tile.s12 .dev { right: auto; left: 50%; transform: translateX(-50%); bottom: -40%; }
  .tile.s12:hover .dev { transform: translateX(-50%) translateY(-8px); }
}

/* Phone */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .top .wrap { height: 64px; gap: 8px; }
  .wm { height: 22px; }
  .top .btn { height: 44px; padding: 0 16px; font-size: 15px; margin-left: auto; }
  h1 { font-size: 40px; }
  h2 { font-size: 34px; }
  .hero, .p-hero { padding-block: 20px 0; }
  .hero .lede, .p-hero .lede { margin-top: 12px; font-size: 17px; line-height: 1.45; }
  .kicker { margin-bottom: 12px; font-size: 15px; }
  .stage { margin: 20px 0 0; height: 540px; border-radius: 24px; }
  .stage .mac { display: none; }
  .stage .phone, .stage.solo .phone, .stage.phone-left .phone { right: auto; left: 50%; transform: translateX(-50%); top: 32px; width: 78%; max-width: 320px; }
  .stage .float, .stage.solo .float { right: auto; left: 16px; top: 16px; }
  .stage.solo { height: 560px; }
  .proof { padding-block: 64px 0; grid-template-columns: 1fr; gap: 16px; }
  .proof .big { font-size: 64px; }
  .sec { padding-block: 72px 0; }
  .sec-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .sec-head .lede { justify-self: start; }
  .bento { gap: 16px; }
  .s7, .s5, .s12 { grid-column: span 12; }
  .tile, .tile.s7, .tile.s12 { min-height: 620px; padding: 28px 24px 0; border-radius: 24px; }
  .tile .dev, .tile.s7 .dev, .tile.s12 .dev { left: 50%; right: auto; transform: translateX(-50%); width: 300px; bottom: auto; top: 260px; }
  .tile.s12 { min-height: 620px; }
  .tile:hover .dev, .tile.s7:hover .dev, .tile.s12:hover .dev { transform: translateX(-50%); }
  .panel { height: 560px; border-radius: 24px; }
  .panel .dev { width: 300px; top: 32px; }
  .panel:has(.float) .dev { top: 100px; }
  .panel .float { left: 16px; top: 16px; }
  .timeline { grid-template-columns: 1fr; }
  .timeline > div, .timeline > div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 96px 1fr; gap: 0 12px; }
  .timeline time { font-size: 28px; grid-row: span 2; }
  .timeline b { margin-top: 0; }
  .rules { grid-template-columns: 1fr; gap: 16px; }
  .words, .words.two { grid-template-columns: 1fr; padding: 24px 16px; border-radius: 24px; }
  .desk { padding: 0; background: none; border-radius: 0; }
  .desk::after { display: none; }
  .caps { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .dates { grid-template-columns: 1fr; }
  .dates > div, .dates > div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: baseline; }
  .dates b { margin-top: 0; grid-row: 1; grid-column: 2; }
  .dates p { grid-column: 1 / -1; }
  .beat { grid-template-columns: 1fr; gap: 16px; }
  .beat .n { font-size: 64px; }
  .pair { grid-template-columns: 1fr; }
  .pair > div, .pair > div + div { padding: 24px 0; border-left: 0; }
  .pair > div + div { border-top: 1px solid var(--line); }
  .voice { grid-template-columns: 1fr; gap: 28px; }
  .price { grid-template-columns: 1fr; gap: 32px; }
  .start { padding: 40px 24px; grid-template-columns: 1fr; gap: 24px; border-radius: 24px; margin-top: 72px; }
  .start .btn.primary { width: 100%; }
  .start .peek { right: 24px; width: 80px; }
  .lost { padding-block: 64px 32px; }
  .doc { padding-block: 56px 32px; font-size: 17px; }
  .doc h2 { font-size: 21px; margin-top: 40px; }
  .lost .peek { width: 80px; margin-left: 0; }
  .start .cta { flex-direction: column; align-items: stretch; gap: 8px; }
  .start .alt { justify-content: center; }
  .foot .wrap { grid-template-columns: 1fr; }
  .foot .credit { order: 0; }
  .foot nav { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 0 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.foot p.ex { margin-top: 6px; font-size: 13px; }
.words + .more-msgs, .more-msgs { margin-top: 20px; }
.more-msgs summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--cobalt); }
.more-msgs summary::-webkit-details-marker { display: none; }
.more-msgs summary::after { content: "+"; font: 700 20px var(--text); }
.more-msgs[open] summary::after { content: "−"; }
.more-msgs .words { margin-top: 12px; }

/* Example-shop label, set quietly by the first Mzansi Linen figure on a page */
.ex { font: 600 13px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
/* The limits, under the proof */
.proof .limits { margin: 0; padding-bottom: 8px; font: 800 clamp(22px, 2.2vw, 28px)/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); max-width: 18em; text-wrap: balance; }
/* Questions */
.faq { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 48rem; border-top: 2px solid var(--ink); }
.faq > div { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq dt { font: 800 22px/1.2 var(--display); letter-spacing: -.01em; }
.faq dd { margin: 8px 0 0; color: var(--muted); font-size: 17px; max-width: 32em; }
.split.after { margin-top: 72px; }
@media (max-width: 1080px) { .dates { grid-template-columns: 1fr 1fr; } .dates > div:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 760px) {
  .faq { grid-template-columns: 1fr; }
  .faq dt { font-size: 20px; }
  .proof .limits { font-size: 20px; }
  .split.after { margin-top: 48px; }
  .dates { grid-template-columns: 1fr; }
  .dates > div:nth-child(3) { padding-left: 0; }
}

.foot p.ex { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
/* Short people loops (cinemagraphs) */
.loop { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--line); }
.loop video, .loop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.loop img { position: absolute; inset: 0; }
.loop:not(.still) img { display: none; }
.loop.still video { display: none; }
.loop.still img { position: static; }

/* Iteration 4 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tile .lbl { font: 600 15px var(--text); opacity: .72; margin-bottom: 12px; }
.tile h3 { max-width: 15em; }
.aside { margin: 32px 0 0; color: var(--muted); font-size: 16px; }
.phone-only { display: none; }
/* People loops: a rounded 16:9 band; phones crop to 4:5 around --focus; the card sits in a corner on desktop, under the frame on phones */
figure.loop { margin: 0; position: relative; background: none; border-radius: 0; overflow: visible; }
figure.loop .frame { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--line); }
figure.loop .frame video, figure.loop .frame img { object-position: var(--focus, 60% 55%); }
figure.loop.wide { margin-top: 48px; }
figure.loop.band { margin-bottom: 40px; }
figure.loop .float { position: absolute; }
figure.loop[data-card="ll"] .float { left: 24px; bottom: 32px; }
figure.loop[data-card="lr"] .float { right: 24px; bottom: 32px; }
figure.loop .float { box-shadow: 0 8px 24px rgba(8,16,70,.18); }
figure.loop[data-card="ul"] .float { left: 24px; top: 24px; }
figure.loop[data-card="ur"] .float { right: 24px; top: 24px; }
.foot p { white-space: nowrap; }
.beat .sub { display: block; margin-top: 16px; color: var(--muted); }
.ruled { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ruled li { padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 18px; max-width: 46em; }
.ruled li b { font-weight: 700; }
.fine a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 760px) {
  .phone-only { display: block; margin-top: 20px; }
  .tile, .tile.s7, .tile.s12 { min-height: 540px; }
  .tile .dev, .tile.s7 .dev, .tile.s12 .dev { top: 190px; }
  .tile:has(.adm), .tile.s7:has(.adm) { height: auto; min-height: 0; padding: 28px 24px 0; }
  .tile .adm, .tile.s7 .adm { width: calc(100% + 24px); max-width: none; margin: 24px 0 -16px; align-self: flex-start; }
  .tile:hover .adm { transform: none; }
  figure.loop .frame { aspect-ratio: 4 / 5; border-radius: 24px; }
  figure.loop .float { position: static; margin-top: 12px; display: inline-flex; box-shadow: none; background: none; padding: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .foot p { white-space: normal; }
}
@media (min-width: 361px) and (max-width: 760px) { .foot p { white-space: nowrap; font-size: 14px; } }

/* The laptop stops behind the phone, so no slivers of its right column show past it */
.stage:not(.phone-left):not(.solo) .mac { clip-path: inset(0 43.75% 0 0); }
@media (max-width: 760px) { .stage .phone, .stage.solo .phone, .stage.phone-left .phone { width: 86%; max-width: 340px; } }

/* Motion: laptop shots with covers lifted on scroll (rows, bars, the counting figure) */
.layered { display: block; container-type: inline-size; }
.layered .mac-img { display: block; width: 100%; height: auto; }
.layered .cv { position: absolute; display: none; pointer-events: none; }
html.motion .layered .cv { display: block; }
.layered .cv.fig { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
html.motion .layered.go .cv.row { animation: cv-fade .45s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.25s + var(--k) * .11s); }
html.motion .layered.go .cv.bar { transform-origin: right; animation: cv-shrink .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.45s + var(--k) * .11s); }
html.motion .layered.go .cv.fig { animation: cv-fade .3s ease forwards; animation-delay: 1.5s; }
@keyframes cv-fade { to { opacity: 0; } }
@keyframes cv-shrink { to { transform: scaleX(0); } }
@media (max-width: 760px) { .layered .cv { display: none !important; } }

/* People loops: desktop 16:9 file vs phone portrait file */
.loop video.v-mob { display: none; }
@media (max-width: 760px) { .loop video.v-desk { display: none; } .loop video.v-mob { display: block; } }
.loop picture { display: contents; }
/* Animated phones: the head script's html.motion picks the still before first paint (see build.py anim) */
html.motion img.anim-end, html:not(.motion) img.anim-first { display: none; }

/* People slots: 4:5 frames, 16:9 kept on phones, card under the frame, and a heading paired with a portrait photo */
figure.loop.r45 .frame { aspect-ratio: 4 / 5; }
figure.loop.cb .float { position: static; margin-top: 12px; display: inline-flex; box-shadow: none; }
.hp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: start; margin-bottom: 48px; }
.hp .sec-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 0; }
.hp .sec-head .lede { justify-self: start; }
@media (max-width: 760px) {
  figure.loop.k16 .frame { aspect-ratio: 16 / 9; }
  .hp { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
}
/* data-at: the card waits off the frame until its moment in the clip */
figure.loop[data-at]:not(.still) .float { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
figure.loop[data-at].card-in .float { opacity: 1; transform: none; }
/* Portrait clips keep the card on the frame on phones too */
@media (max-width: 760px) {
  figure.loop.r45:not(.cb):not(.pc) .float { position: absolute; padding: 10px 14px 10px 12px; border-radius: 16px; box-shadow: 0 16px 40px rgba(8,16,70,.22); background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  figure.loop.r45:not(.cb):not(.pc) .float b { font-size: 17px; }
  figure.loop.r45:not(.cb):not(.pc) .float small { font-size: 13px; }
  figure.loop.r45[data-card="ll"]:not(.cb) .float { left: 12px; bottom: 12px; }
  figure.loop.r45[data-card="ur"]:not(.cb) .float { right: 12px; top: 12px; }
}
/* A phone sits in the flow of its stage or panel, which ends 24 px under the last bubble (--end: where the chat ends, as a share of the bezel's height; the bezel is 2.0444× as tall as it is wide) */
.stage:has(.phone) { height: auto; padding-top: 64px; }
.stage .phone { position: relative; display: block; top: auto; transform: none; margin: 0 5% calc(var(--tail, 24px) - (1 - var(--end, 1)) * min(32%, 384px) * 2.0444) auto; }
.stage.phone-left .phone { left: auto; margin-left: 5%; margin-right: auto; }
.stage.solo .phone { left: auto; transform: none; margin: 8px auto calc(var(--tail, 24px) - (1 - var(--end, 1)) * 384px * 2.0444); }
.panel { height: auto; }
.panel .dev { position: relative; display: block; left: auto; top: auto; transform: none; margin: 56px auto calc(var(--tail, 24px) - (1 - var(--end, 1)) * 330px * 2.0444); }
@media (max-width: 760px) {
  .stage:has(.phone) { height: auto; padding-top: 32px; }
  .stage .phone, .stage.solo .phone, .stage.phone-left .phone { left: auto; transform: none; width: 86%; max-width: 340px; margin: 0 auto calc(var(--tail, 24px) - (1 - var(--end, 1)) * min(86%, 340px) * 2.0444); }
  .panel .dev { width: 300px; margin: 32px auto calc(var(--tail, 24px) - (1 - var(--end, 1)) * 300px * 2.0444); }
}
/* The home screen's close-up at its native width, centred in the desk */
.desk.narrow { padding-bottom: 48px; }
.desk.narrow::after { display: none; }
.desk.narrow .shot { max-width: 470px; margin: 0 auto; }
@media (max-width: 760px) { .desk.narrow { padding: 0; } }
/* A big figure's label sits under it, so the figure never runs off a phone */
.beat .n small { display: block; margin-top: .35em; font-weight: 600; white-space: normal; }
/* A page whose hero is the laptop alone */
.desk.lead { margin-top: 48px; }
@media (max-width: 760px) { .desk.lead { margin-top: 24px; } }
/* Lay-bye's hero: the dates down the left, Pieter's phone beside them */
.split.lead { margin-top: 48px; align-items: start; }
.dates.col { grid-template-columns: 1fr; }
.dates.col > div, .dates.col > div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: baseline; }
.dates.col b { margin-top: 0; grid-row: 1; grid-column: 2; }
.dates.col p { grid-column: 1 / -1; }
.split .settings { max-width: 420px; justify-self: end; width: 100%; }
@media (max-width: 760px) { .split.lead { margin-top: 24px; } .split .settings { justify-self: stretch; max-width: none; } }
/* One type scale: display (h1 and the big figures), H2, H3, lead, body 17, meta 14. Artefacts (bubbles, laptop overlays) keep their own. */
:root { --lead: clamp(18px, 1.6vw, 22px); --h3: clamp(26px, 2.6vw, 34px); }
main .fine, main small, .float small { font-size: 14px; }
main th, .tile .lbl { font: 600 14px var(--text); }
.timeline p, .dates p, .ruled li, .split .line, .pair p, .pair li, .rules li, .fees, .voice cite, .caps p { font-size: 17px; }
main b, .line b, .timeline b, .voice cite { font-weight: 600; }
.lede, .beat p, .proof p, .beat .sub { font-size: var(--lead); }
.beat .n small { font: 400 var(--lead)/1.3 var(--text); color: var(--muted); letter-spacing: 0; }
.dates b, .float b, .faq dt, .proof .limits, .caps b { font: 800 var(--lead)/1.2 var(--display); letter-spacing: -.01em; }
.timeline time, .dates time, .voice blockquote, .tile h3, .say { font-size: var(--h3); }
.split h2 { font-size: clamp(36px, 4.6vw, 64px); }
.big, .beat .n { font-size: clamp(46px, 6.4vw, 88px); }
.big span { font-weight: 800; }
.proof .big { font-size: clamp(46px, 6.4vw, 88px); }
.beat p { font-size: 17px; }
.fees td small, figure.loop.r45:not(.cb):not(.pc) .float small { font-size: 14px; }
figure.loop.r45:not(.cb):not(.pc) .float b { font-size: var(--lead); }
.start li { font-size: 17px; }
.start li span { font-size: 17px; }
.ruled li b { font-weight: 600; }
.proof .big span { font-weight: 800; }
@media (max-width: 760px) { .split h2 { font-size: 34px; } }
/* Phones: Get paid leads; the other three show their figure and first row, then run off the tile */
@media (max-width: 760px) {
  .bento .tile:has(.adm) { height: 420px; }
  .bento .tile:has(.adm):first-child { height: 560px; }
}
/* A phone keeps its bezel's shape before it loads, so a panel never collapses around an unloaded image */
.stage .phone, .panel .dev { aspect-ratio: 1350 / 2760; height: auto; }
/* A phone in the flow takes no offset left over from the absolutely placed layout, so it sits exactly where --end expects */
.stage .phone, .stage.solo .phone, .stage.phone-left .phone { top: auto; }
@media (max-width: 760px) { .stage .phone, .stage.solo .phone, .stage.phone-left .phone { top: auto; } }
/* The hidden laptop's picture makes no line box above the phone on phones */
.stage picture { display: contents; }
.stage source { display: none; }
/* A section that is words alone keeps a readable measure on the margin */
.col-text { max-width: 44rem; }
.col-text .lede { margin-top: 20px; }
.col-text .fine { margin-top: 16px; }
/* Tiles show their whole panel, which ends on a row of its own; one ground for all four */
.bento .tile:has(.adm), .bento .tile.s7:has(.adm), .bento .tile:has(.adm):first-child { height: auto; min-height: 0; padding-bottom: 40px; }
.tile .adm, .tile.s7 .adm { box-shadow: 0 0 0 1px rgba(15,22,51,.08), 0 8px 24px -12px rgba(15,22,51,.18); margin-bottom: 0; }
@media (max-width: 760px) {
  .bento .tile:has(.adm), .bento .tile.s7:has(.adm), .bento .tile:has(.adm):first-child { padding-bottom: 24px; }
  .tile .adm, .tile.s7 .adm { width: 100%; margin: 24px 0 0; }
}
/* Type scale: display, H2, H3, lead, body (with its bold), meta. Seven size/weight pairs at most on any page */
main small, main .lbl, .tile .lbl, main th, .words figcaption, .words figcaption span, main .fine, .float small, figure.loop.r45:not(.cb):not(.pc) .float small { font-size: 14px; font-weight: 500; }
.faq dt { font: 800 var(--h3)/1.1 var(--display); letter-spacing: -.02em; }
.float b, figure.loop.r45:not(.cb):not(.pc) .float b, .dates b, .caps b, .proof .limits { font: 600 17px/1.3 var(--text); letter-spacing: 0; }
.fees thead th { font-weight: 500; }
@media (max-width: 760px) {
  /* On a phone the big figures are display size, and the lead is the body size */
  .big, .beat .n, .proof .big { font-size: 40px; }
  .lede, .beat p, .proof p, .beat .sub, .beat .n small { font-size: 17px; }
}
/* A page whose hero is one phone gives it room: larger, on the cobalt field */
@media (min-width: 761px) {
  .stage.solo .phone { width: 440px; max-width: 440px; margin: 8px auto calc(var(--tail, 24px) - (1 - var(--end, 1)) * 440px * 2.0444); }
}
/* Round 3. Tiles: no ground; each screenshot sits on the page under its headline, tiles parted by a rule */
.bento .tile:has(.adm), .bento .tile.s7:has(.adm), .bento .tile:has(.adm):first-child { background: none; border-radius: 0; padding: 32px 0 0; border-top: 1px solid var(--line); overflow: visible; }
.tile .adm, .tile.s7 .adm { align-self: flex-start; }
@media (max-width: 760px) { .bento .tile:has(.adm), .bento .tile.s7:has(.adm), .bento .tile:has(.adm):first-child { padding: 24px 0 0; } }
/* A split whose heading is long takes half the row */
.split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Message captions: the title, then the condition beneath it in grey */
.words figcaption { font: 600 17px/1.3 var(--text); color: var(--ink); }
.words figcaption span { font: 500 14px/1.4 var(--text); color: var(--muted); margin-top: 2px; }
/* A figure with its supporting line under it, on one left edge */
.beat.stack { grid-template-columns: 1fr; gap: 12px; }
.after-desk { margin: 20px 0 0; font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 44rem; }
/* The deliveries stats close-up under the hero is a figure, not a card */
.p-hero > .shot.phone-only { box-shadow: none; border-radius: 0; background: none; }
/* The board's last column ends inside the stage */
.stage.phone-left .mac { left: 12%; }
@media (max-width: 760px) {
  /* Lay-bye: Pieter's phone straight after the lede, the dates under it */
  .split.lead .panel { order: -1; }
  .dates.col time { font: 600 17px/1.3 var(--text); letter-spacing: 0; }
}

/* Home: what it is first, then the four jobs (people where we have them), then the morning view */
.s6 { grid-column: span 6; }
.bento .job { min-width: 0; background: none; border-radius: 0; padding: 32px 0 0; border-top: 1px solid var(--line); overflow: visible; min-height: 0; height: auto; }
.bento .job p { margin-top: 8px; color: var(--muted); }
.bento .job figure.loop, .bento .job .adm { margin-top: 24px; }
.bento .job .adm { width: 100%; max-width: 100%; height: auto; margin-bottom: 0; }
.bento .job .cap { display: block; margin-top: 12px; color: var(--muted); }
.jobs { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 64px; column-gap: 40px; }
#dashboard .lede { margin-top: 16px; }
.desk.narrow.morning { margin-top: 32px; }
.desk.narrow.morning .shot { max-width: 400px; }
#dashboard figure.loop.wide { margin-top: 48px; }
@media (max-width: 760px) {
  .s6 { grid-column: 1 / -1; }
  .jobs { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .bento .job { padding-top: 24px; }
  .desk.narrow.morning { margin-top: 24px; }
  .desk.narrow.morning .shot { max-width: 300px; margin: 0; }
}

/* Taste round 1 on the claims sweep */
#dashboard .desk.narrow { background: none; padding: 0; border-radius: 0; }
#dashboard .desk.narrow .shot { margin: 0; }
.bento .job .more { display: flex; width: fit-content; margin-top: 16px; font: 600 17px var(--text); color: var(--cobalt); }
.words .bub { font-weight: 500; }
.words .bub .tm { display: none; }
.sheet a:last-of-type:not(.btn), .sheet a:has(+ a.btn) { border-bottom: 0; }
@media (max-width: 600px) {
  .split.even { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split.even .panel { order: 1; }
}
@media (max-width: 760px) { figure.loop .float { display: flex; width: fit-content; } }
.timeline b { margin-top: 16px; }
@media (max-width: 760px) { .timeline b { margin-top: 0; } }

/* Taste round 2 on the claims sweep */
.menu .i-close { display: none; }
.menu[open] .i-open { display: none; }
.menu[open] .i-close { display: block; }
.stage.phone-left .mac { clip-path: inset(0 0 0 22.5%); }
.panel.wide-art { margin-top: 48px; }
.sec-head.after-tl { margin-top: 56px; }
.p-cobalt { background: var(--cobalt); }
.panel.hero-dev .dev { width: 380px; }
#dashboard .desk.narrow .shot { max-width: none; width: 100%; }
#dashboard .desk.narrow { overflow: visible; }
.start li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 20px; }
.foot nav a, .foot p a, .doc a { min-height: 44px; display: inline-flex; align-items: center; }
.bento.jobs .job p { min-height: 3em; }
@media (max-width: 760px) {
  h2, .split h2 { font-size: 28px; }
  .shot { border-radius: 24px; }
  .panel.hero-dev .dev { width: 320px; }
  .foot nav { grid-auto-flow: row; grid-template-rows: none; }
  .bento.jobs .job p { min-height: 0; }
}
.hero .lede { margin-top: 32px; }
@media (max-width: 760px) {
  .hp { gap: 32px; }
  .split, .split.flip { gap: 32px; }
  .hero .lede, .p-hero .lede { margin-top: 12px; }
}

/* Taste round 3 on the claims sweep */
.tile .adm { box-shadow: 0 0 0 1px var(--line), 0 24px 48px -12px rgba(15,22,51,.30), 0 2px 6px rgba(15,22,51,.08); }
.bento .job h3, .faq dt { font: 700 20px/1.3 var(--display); letter-spacing: -.01em; }
.doc p a, .foot p a { display: inline; min-height: 0; padding: 12px 0; margin: -12px 0; }
.clip-after { margin-top: 48px; max-width: 400px; }
@media (max-width: 760px) {
  .shot, .p-hero > .shot.phone-only, .desk .mac, .desk .mac-img { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -12px rgba(15,22,51,.30), 0 2px 6px rgba(15,22,51,.08); }
  .desk .mac, .desk .mac-img { filter: none; }
  .clip-after { margin-top: 32px; max-width: none; }
}

/* Team clip beside the FAQ on desktop; above it on phones */
.qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.qa .faq { grid-column: 1; grid-row: 1; }
.qa figure.loop { grid-column: 2; grid-row: 1; }
@media (max-width: 760px) {
  .qa { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .qa .faq, .qa figure.loop { grid-column: 1; grid-row: auto; }
}

/* Photo heroes: full bleed under the header. The photo or its clip under a halftone and grain screen, a fade for the copy,
   and a whole device: Apple's bezel over the live chat, or the owner's laptop. Copy and device on the page grid. */
.ph-hero { --edge: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); --w: 384px; --s: .8533; position: relative; isolation: isolate; overflow: hidden; height: calc(100svh - 72px); min-height: 620px; color: #fff; background: #1a2140; }
.ph-hero .ph { position: absolute; inset: 0; isolation: isolate; }
.ph-hero .frame-clip { position: absolute; inset: 0; overflow: hidden; z-index: -3; }
.ph-hero video, .ph-hero .frame-clip img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus, 50% 50%); filter: contrast(1.06) saturate(1.06); }
.ph-hero .frame-clip::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(rgba(10,14,34,.55) .75px, transparent 1.25px); background-size: 3px 3px; mix-blend-mode: multiply; opacity: .14; }
.ph-hero .frame-clip::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ph-hero .shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(10,14,34,.78) 0%, rgba(10,14,34,.42) 30%, rgba(10,14,34,0) 58%); }
.ph-hero .copy { position: absolute; left: var(--edge); right: calc(var(--edge) + var(--w) + 48px); bottom: 56px; z-index: 1; }
.ph-hero.has-mac .copy { right: calc(48px + min(50vw, 720px) + 48px); }
.ph-hero h1 { color: #fff; font-size: clamp(46px, 6.4vw, 92px); line-height: .94; max-width: 13em; text-shadow: 0 2px 24px rgba(10,14,34,.25); }
.ph-hero .lede { color: rgba(255,255,255,.86); margin-top: 18px; }
/* The phone: the chat runs live in the iframe; the device stops 20 px under the last message, cut by the hero's foot */
.ph-hero .dev { position: absolute; right: var(--edge); bottom: -1px; z-index: 2; width: var(--w); height: calc(var(--end) * var(--w) * 2.0444 + 24px); overflow: hidden; filter: drop-shadow(0 30px 50px rgba(8,16,70,.38)); }
.ph-hero .dev .scale { position: absolute; left: 0; top: 0; width: 450px; height: 920px; transform: scale(var(--s)); transform-origin: 0 0; }
.ph-hero .dev iframe { position: absolute; left: 24px; top: 23px; width: 402px; height: 874px; border: 0; border-radius: 56px; background: #efe9e1; pointer-events: none; }
.ph-hero .dev .bezel { position: absolute; inset: 0; width: 450px; height: 920px; max-width: none; pointer-events: none; }
/* The laptop: lower right, its base cut by the hero's foot */
.ph-hero .hmac { position: absolute; right: var(--edge); bottom: 0; z-index: 2; width: min(46vw, 600px); height: calc(min(46vw, 600px) * .4663); overflow: hidden; filter: drop-shadow(0 30px 50px rgba(8,16,70,.38)); }
.ph-hero .hmac img { width: 100%; height: auto; }
.sec > .stage:first-child, .sec > .split.lead:first-child { margin-top: 0; }
@media (max-width: 760px) {
  /* On a phone the H1 and lede sit on the photo's fade, so they're in the first frame; the device follows under the photo */
  .ph-hero { --w: 300px; --s: .6667; display: grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; overflow: visible; background: none; }
  .ph-hero .ph { position: relative; inset: auto; grid-area: 1 / 1; min-height: 55svh; }
  .ph-hero .shade { background: linear-gradient(to top, rgba(10,14,34,.84) 0%, rgba(10,14,34,.55) 38%, rgba(10,14,34,0) 70%); }
    .ph-hero .copy, .ph-hero.has-mac .copy { position: relative; grid-area: 1 / 1; align-self: end; left: auto; right: auto; bottom: auto; padding: 140px var(--gut) 24px; }
  .ph-hero h1 { font-size: 34px; line-height: 1.02; }
  .ph-hero .lede { font-size: 17px; margin-top: 12px; }
  .ph-hero .dev { position: relative; grid-area: 2 / 1; right: auto; bottom: auto; margin: 24px auto 0; }
  .ph-hero .hmac { position: relative; grid-area: 2 / 1; right: auto; bottom: auto; width: min(calc(100% - 40px), 350px); height: auto; margin: 24px auto 0; border-radius: 18px; filter: none; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -12px rgba(15,22,51,.30); }
  .ph-hero + .sec { padding-top: 32px; }
}

/* The hero device is the widest device on its page: later phones stop at the hero phone's width, and Lay-bye's lower board at the hero laptop's */
@media (min-width: 761px) {
  .stage.solo .phone { width: 384px; max-width: 384px; margin: 8px auto calc(var(--tail, 24px) - (1 - var(--end, 1)) * 384px * 2.0444); }
  .split h2.fit { font-size: 48px; }
}
@media (max-width: 760px) {
  .stage .phone, .stage.solo .phone, .stage.phone-left .phone { max-width: 300px; margin: 0 auto calc(var(--tail, 24px) - (1 - var(--end, 1)) * min(86%, 300px) * 2.0444); }
  .panel.hero-dev .dev { width: 300px; margin-bottom: calc(var(--tail, 24px) - (1 - var(--end, 1)) * 300px * 2.0444); }
}
.desk.small .mac { width: min(600px, 100%); }
.desk.cap .shot { max-width: 720px; margin: 0 auto; }
/* Home's stage: the laptop sits further left and the phone nearer the edge, so the leak figure and its line end clear of the phone */
@media (min-width: 761px) {
  .stage:not(.phone-left):not(.solo) .mac { left: -2%; }
  .stage:not(.phone-left):not(.solo) .phone { margin-right: 3%; right: 0; }
}

/* Each phone hero has its own stage on desktop. Home: the phone in the right third. Get paid: in from the right edge.
   Deliveries: on the left third, cut by the left edge, the copy beside it. Reorders: cut by the right edge and higher, fading at its foot. */
@media (min-width: 761px) {
  .ph-hero.st-inset .dev { right: max(24px, calc(var(--edge) - 48px)); }
  .ph-hero.st-inset .copy { right: calc(max(24px, calc(var(--edge) - 48px)) + var(--w) + 48px); }
  .ph-hero.st-left .dev { right: auto; left: var(--edge); }
  .ph-hero.st-left .copy { left: calc(var(--edge) + var(--w) + 48px); right: var(--edge); }
  .ph-hero.st-high .dev { right: -16px; bottom: auto; top: 160px; height: calc(var(--end) * var(--w) * 2.0444 + 84px); -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent); mask-image: linear-gradient(#000 calc(100% - 64px), transparent); }
  .ph-hero.st-high .copy { right: calc(var(--w) - 16px + 48px); }
}

/* Round 3. Home: a slimmer phone nearer the edge, so the H1 sets in four lines. Lay-bye: the whole laptop, its foot clear of the fold */
@media (min-width: 761px) {
  .ph-hero.st-index { --w: 330px; --s: .7333; }
  .ph-hero.st-index .dev { right: 48px; }
  .ph-hero.st-index .copy { right: calc(48px + var(--w) + 48px); }
  .ph-hero.has-mac .hmac { right: 48px; bottom: 24px; width: min(50vw, 720px); height: auto; overflow: visible; }
  .panel.wide-dev .dev { width: 360px; margin-bottom: calc(var(--tail, 24px) - (1 - var(--end, 1)) * 360px * 2.0444); }
}
/* One ground for every phone panel and stage */
:root { --ground: #eceef3; }
.panel, .p-cobalt, .p-wash, .p-ink, .stage, .stage.s-ink, .stage.s-wash { background: var(--ground); }
.stage::before { display: none; }
@media (max-width: 760px) { .desk-only { display: none; } }
/* Get paid's four-up: the bubbles set in body type, so the page keeps six levels */
.words .bub { font: 400 17px/1.45 var(--text); letter-spacing: 0; }
/* Spacing on one scale: 8, 16, 24, 48, 96 */
.sec { padding-block: 96px 0; }
.start { margin-top: 96px; }
.sec-head { margin-bottom: 48px; }
.sec-head.after-tl, .split.after-tl { margin-top: 48px; }
.split { gap: 48px; }
.words { padding: 48px; gap: 24px; }
.timeline > div { padding: 24px 24px 0 0; } .timeline > div + div { padding-left: 24px; }
.dates > div { padding: 24px 24px 0 0; } .dates > div + div { padding-left: 24px; }
.jobs { row-gap: 48px; }
.foot { padding-block: 96px 48px; }
.ph-hero .lede { margin-top: 16px; }
@media (max-width: 760px) {
  h2, .split h2 { font-size: 26px; }
  .sec { padding-block: 48px 0; }
  .start { margin-top: 48px; }
  .sec-head { margin-bottom: 24px; }
  .sec-head.after-tl, .split.after-tl { margin-top: 48px; }
  .split, .split.flip, .split.even { gap: 24px; }
  .words, .words.two { padding: 24px 16px; gap: 24px; }
  .timeline > div, .timeline > div + div { padding: 16px 0; }
  .dates > div, .dates > div + div, .dates.col > div, .dates.col > div + div { padding: 16px 0; }
  .ph-hero + .sec { padding-top: 48px; }
  .foot { padding-block: 48px 48px; }
}

/* Early access: two fields and one button, thumb-sized, the right keyboard for each */
.ea { padding-block: 88px 0; }
.ea > * { max-width: 34rem; }
.ea form { display: grid; gap: 8px; margin-top: 48px; }
.ea form > label:not(:first-child) { margin-top: 16px; }
.ea form > .btn { margin-top: 24px; }
.ea label { font: 600 17px var(--text); }
.ea input { height: 56px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--raised); font: 400 17px var(--text); color: var(--ink); width: 100%; }
.ea input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-wash); }
.ea .btn { height: 56px; width: 100%; border: 0; cursor: pointer; }
.ea .btn[disabled] { opacity: .6; }
.ea .msg { margin: 0; font-size: 17px; }
.ea .msg.err { color: #a3241b; }
.ea .done h2 { margin: 0; }
.ea .done p { margin: 16px 0 0; color: var(--muted); font-size: 17px; }
@media (max-width: 760px) { .ea { padding-block: 48px 0; } .ea form { margin-top: 24px; } }
.ea [hidden] { display: none !important; }
.ea .done { margin-top: 48px; }
@media (max-width: 760px) { .ea .done { margin-top: 24px; } }
/* Lay-bye on wide screens: the 720px laptop runs off the right edge, so the H1 sets in three lines beside it */
@media (min-width: 1081px) {
  .ph-hero.has-mac .hmac { right: -160px; }
  .ph-hero.has-mac .copy { right: calc(720px - 160px + 48px); }
}
.ph-hero .lede { text-wrap: pretty; }
.ea input[aria-invalid="true"] { border-color: #a3241b; }
.ea .ferr { margin: 0; font-size: 14px; color: #a3241b; }
.ea .msg a { color: inherit; }

/* Round 4 */
/* Get paid and Deliveries: the hero phone at 420px, so the 420px phones beside their headings never outgrow it */
@media (min-width: 761px) {
  .ph-hero.st-inset, .ph-hero.st-left { --w: 420px; --s: .9333; }
  .panel.wide-dev .dev { width: 420px; margin-top: 48px; margin-bottom: calc(var(--tail, 24px) - (1 - var(--end, 1)) * 420px * 2.0444); }
  .faq { max-width: none; }
  .faq > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: baseline; }
  .faq dd { margin: 0; }
  .desk.cap { background: none; padding: 0; } .desk.cap::after { display: none; }
  .desk.cap .shot { max-width: 480px; margin: 0; }
}
@media (min-width: 1081px) { .words.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .words.three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  /* The hero device rises 120px into the photo's foot, so its first bubble is in the first frame; the copy sits clear above it */
  .ph-hero .copy, .ph-hero.has-mac .copy { padding-bottom: 144px; }
  .ph-hero .dev, .ph-hero .hmac { margin-top: -96px; }
  /* Lay-bye: the heading, then the dates, then Pieter's phone */
  .split.lead .panel { order: 0; }
}
/* Type: body 17, meta 14, everywhere */
body { font-size: 17px; }
.aside, .pair li, .rules li, .caps p, .proof p, .lost p, .ruled li, .split .line, .faq dd, .tile p, .bento .job p, .beat p { font-size: 17px; }
.foot, .foot p, .ex, .pair .tag, .fine, main small { font-size: 14px; }
.faq dt { font: 600 17px/1.4 var(--text); letter-spacing: 0; }
.bento .job h3 { font: 800 var(--h3)/1.05 var(--display); letter-spacing: -.02em; }
.start li::before { font: 800 var(--h3)/1 var(--display); }
@media (max-width: 760px) { body { font-size: 17px; } .foot, .foot p { font-size: 14px; } }
/* Spacing on 8, 16, 24, 40, 48, 88 */
.sec { padding-block: 88px 0; }
.start { margin-top: 88px; }
.foot { padding-block: 88px 48px; }
.desk { padding: 48px 40px 40px; }
.stage:has(.phone) { padding-top: 48px; }
.panel .dev { margin-top: 48px; }
.split .lede { margin-top: 16px; }
.bento .job { padding-top: 24px; }
.start li { padding: 16px 0; }
.start .cta { margin-top: 24px; }
@media (min-width: 761px) { .ph-hero .copy { bottom: 48px; } }
@media (max-width: 760px) {
  .start { margin-top: 88px; }
  .desk { padding: 0; }
  .stage:has(.phone) { padding-top: 40px; }
  .panel .dev { margin-top: 40px; }
}
@media (max-width: 760px) {
  .ph-hero .lede { text-wrap: wrap; }
}
/* Short phones (Safari's 548px frame): a little less photo above the copy, so the device's first bubble is in frame */
@media (max-width: 760px) and (max-height: 600px) {
  .ph-hero .copy, .ph-hero.has-mac .copy { padding: 124px var(--gut) 128px; }
  .ph-hero .dev, .ph-hero .hmac { margin-top: -104px; }
}
@media (max-width: 760px) and (max-height: 600px) {
  /* Home's four-line H1: a slimmer phone (no later phone on the page to outgrow) */
  .ph-hero.st-index { --w: 270px; --s: .6; }
  .ph-hero.st-index .copy { padding-top: 104px; }
}
@media (max-width: 760px) and (max-height: 600px) {
  /* ... and the clip scaled from its foot, so Zola's face sits above the H1 */
  .ph-hero.st-index .frame-clip video, .ph-hero.st-index .frame-clip img { transform: scale(1.25); transform-origin: 50% 100%; }
}

/* A phone that stands on the page (not in a tinted panel) never ends in a hard slice: room under the last bubble, then a fade */
.stage:has(.phone) { --tail: 96px; -webkit-mask-image: linear-gradient(#000 calc(100% - 80px), transparent); mask-image: linear-gradient(#000 calc(100% - 80px), transparent); }
@media (max-width: 760px) {
  .ph-hero .dev { height: calc(var(--end) * var(--w) * 2.0444 + 96px); -webkit-mask-image: linear-gradient(#000 calc(100% - 80px), transparent); mask-image: linear-gradient(#000 calc(100% - 80px), transparent); }
}
/* Phones in a panel end the same way: room under the last bubble, then the phone and the panel fade out together */
.panel:has(.dev), .panel:has(.phone) { --tail: 96px; -webkit-mask-image: linear-gradient(#000 calc(100% - 80px), transparent); mask-image: linear-gradient(#000 calc(100% - 80px), transparent); }
/* The narrowest phones (320 px): the header's logo, button and menu fit on one row */
@media (max-width: 350px) { .top .wrap { gap: 8px; } .top .btn { padding: 0 12px; font-size: 14px; } .wm { height: 20px; } }

/* No flash on first play: the clip is invisible until its first frame plays, over the poster image */
.ph-hero .frame-clip video { opacity: 0; transition: opacity .2s; }
.ph-hero .frame-clip video.on { opacity: 1; }
.loop:not(.still) img { display: block; }
.loop:not(.still) video { position: relative; z-index: 1; opacity: 0; transition: opacity .2s; }
.loop:not(.still) video.on { opacity: 1; }