/* vedo.build, the company site. The app's look: white, Outfit, Loquora blue #0060DE for every action, solid fills
   (no outlines), soft grey cards, the real app's screens. */
@font-face { font-family: "Outfit"; font-weight: 300; font-display: swap; src: url("/assets/fonts/Outfit-Light.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Outfit-Regular.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Outfit-Medium.woff2") format("woff2"); }
@font-face { font-family: "Outfit Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 98.5%; ascent-override: 101.5%; descent-override: 26.4%; }

:root {
  --ink: #111316;
  --ink-2: #5B6470;
  --ink-3: #8A919A;
  --card: #F2F4F7;
  --card-2: #E9EDF2;
  --accent: #0060DE;
  --accent-press: #0050B8;
  --accent-soft: #EAF2FF;
  --alert: #E1292F;
  --success: #268356;
  --warning: #F5A524;
  --night: #0E1013;
  --nav-h: 76px;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 9vw, 128px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: #FFFFFF; color: var(--ink); overflow-x: hidden;
  font-family: "Outfit", "Outfit Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 20; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: #FFFFFF; }

/* Top bar */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
.nav .wrap { display: flex; align-items: center; height: var(--nav-h); gap: 32px; }
.nav { transition: background-color 0.3s ease; }
/* Home: the menu lies on the film, white, until src/media.js marks it solid past the film */
.home .nav:not(.solid) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.home .nav:not(.solid) .logo img { filter: brightness(0) invert(1); }
.home .nav:not(.solid) ul a { color: rgba(255, 255, 255, 0.8); }
.home .nav:not(.solid) ul a:hover { color: #FFFFFF; }
.home .nav:not(.solid) .actions .btn.soft, .home .nav:not(.solid) .menu summary { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.home .nav:not(.solid) .actions .btn.soft:hover { background: rgba(255, 255, 255, 0.26); }
.nav .logo img { height: 28px; width: auto; }
.nav ul { display: flex; gap: 28px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav ul a { text-decoration: none; font-size: 16px; color: var(--ink-2); }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--ink); }
.nav ul a[aria-current="page"] { font-weight: 400; }
.nav .actions { display: flex; gap: 10px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 20px; height: 20px; }
.menu .close { display: none; }
.menu[open] .open { display: none; }
.menu[open] .close { display: block; }
.menu nav { position: absolute; right: 0; top: 54px; width: min(280px, calc(100vw - 32px)); padding: 10px; border-radius: 24px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(17, 19, 22, 0.08), 0 24px 48px -16px rgba(17, 19, 22, 0.28); }
.menu nav a { display: block; padding: 12px 14px; border-radius: 14px; text-decoration: none; font-size: 17px; }
.menu nav a:hover { background: var(--card); }
.menu nav .btn { display: flex; margin-top: 8px; }

/* Buttons: solid fills only */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.btn.primary { background: var(--accent); color: #FFFFFF; }
.btn.primary:hover { background: var(--accent-press); }
.btn.soft { background: var(--card); color: var(--ink); }
.btn.soft:hover { background: var(--card-2); }
.btn.white { background: #FFFFFF; color: var(--accent); }
.btn.white:hover { background: var(--accent-soft); }
.btn.glass { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.btn.glass:hover { background: rgba(255, 255, 255, 0.24); }
.btn.small { height: 44px; padding: 0 18px; font-size: 15px; }
.btn svg { width: 18px; height: 18px; }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* Type */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 500; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
h1, h2, h3 { font-weight: 300; margin: 0; }
h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font-size: 22px; line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.sub { margin: 18px 0 0; max-width: 620px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-2); }
.head { margin-bottom: clamp(36px, 5vw, 64px); }
.head.center { text-align: center; }
.head.center .sub { margin-left: auto; margin-right: auto; }
.section { padding: var(--section) 0 0; }
main > section:last-of-type { padding-bottom: var(--section); }

/* Hero: the film fills the first screen, the headline sits on it with the whole film evenly dimmed (no gradient, no blur), and the daily log floats on it
   and writes itself as the film plays (src/media.js). On the home page (body.home) the menu lies over the film until
   you scroll past it. On smaller or short screens the headline, the film and the log stack, still on dark. */
.hero { position: relative; background: var(--night); color: #FFFFFF; margin-top: calc(-1 * var(--nav-h)); }
.hero-film-bg { position: relative; }
.hero-film-bg .screen { border-radius: 0; background: #1B1D20; }
/* The film has a dark line along its top edge: grow it a little from the bottom so the line is cut off. */
.hero-film-bg .screen .poster, .hero-film-bg .screen video { transform: scale(1.012); transform-origin: 50% 100%; }
.shade { position: absolute; inset: 0; pointer-events: none; }
.hero .eyebrow { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.hero .eyebrow .dot { background: var(--accent); }
.hero h1 { margin: 22px 0 0; font-size: clamp(44px, 6vw, 88px); line-height: 0.96; letter-spacing: -0.04em; color: #FFFFFF; text-wrap: balance; }
.hero h1 .type b { font-weight: inherit; white-space: nowrap; }
.hero h1 .type { color: var(--accent); }
.hero h1 .type i { font-style: normal; }
/* The caret takes no room, so the headline doesn't move while it types. */
.caret { position: relative; display: inline-block; width: 0; height: 0.78em; vertical-align: -0.05em; }
.caret::after { content: ""; position: absolute; left: 0.06em; top: 0; width: 0.055em; height: 100%; border-radius: 2px; background: var(--accent); }
.hero p.lead { margin: 22px 0 0; max-width: 540px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; font-weight: 400; color: #FFFFFF; }
.hero .ctas { margin-top: 30px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Vedo's viewfinder corners around the film */
.viewfinder { position: absolute; inset: 14px; pointer-events: none; }
.viewfinder i { position: absolute; width: clamp(34px, 4vw, 60px); height: clamp(34px, 4vw, 60px); border: 0 solid rgba(255, 255, 255, 0.8); }
.viewfinder i:nth-child(1) { left: 0; top: 0; border-width: 3px 0 0 3px; border-top-left-radius: 20px; }
.viewfinder i:nth-child(2) { right: 0; top: 0; border-width: 3px 3px 0 0; border-top-right-radius: 20px; }
.viewfinder i:nth-child(3) { right: 0; bottom: 0; border-width: 0 3px 3px 0; border-bottom-right-radius: 20px; }
.viewfinder i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 3px 3px; border-bottom-left-radius: 20px; }
/* Stacked: the headline on dark, the film edge to edge, the log under it */
.hero { display: flex; flex-direction: column; padding-bottom: clamp(36px, 6vw, 64px); }
.hero-over { display: contents; }
.hero-copy, .hero .log { box-sizing: border-box; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.hero-copy { order: 1; padding: calc(var(--nav-h) + clamp(20px, 4vw, 44px)) 0 clamp(28px, 4vw, 44px); }
.hero-film-bg { order: 2; }
.hero .log { order: 3; position: relative; z-index: 1; max-width: 560px; margin-top: 20px; border-radius: 28px; background: #FFFFFF; color: var(--ink); }
.log-hint { margin: 8px 8px 2px; font-size: 13px; color: var(--ink-3); }
/* Large screens: the film behind everything, the headline bottom left, the log floating bottom right */
@media (min-width: 1100px) and (min-height: 620px) {
  .hero { display: block; height: 100svh; min-height: 640px; max-height: 1200px; padding: 0; overflow: hidden; }
  .hero-film-bg { position: absolute; inset: 0; }
  .hero-film-bg .screen { position: absolute; inset: 0; aspect-ratio: auto; }
  /* frame from the left, so the film's recording chips aren't cut off */
  .hero-film-bg .screen .poster, .hero-film-bg .screen video { object-position: 12% 50%; }
  /* the film a little darker, evenly, so the words read and the film still shows */
  .shade { background: rgba(10, 12, 15, 0.45); }
  .viewfinder { inset: calc(var(--nav-h) + 12px) 22px 22px; }
  .hero-over { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: end; height: 100%; padding-bottom: clamp(110px, 16vh, 190px); }
  .hero-copy, .hero .log { width: auto; max-width: none; margin: 0; }
  .hero-copy { max-width: 640px; padding: 0; }
  .hero h1 { max-width: 7.4em; font-size: clamp(60px, 5.8vw, 96px); }
  /* The log starts short and grows upward as Vedo writes each line, so it stays off the film until the end. */
  .hero .log li { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease; }
  .hero .log li:has(.row.w) { max-height: 120px; opacity: 1; }
  .hero .log { background: #FFFFFF; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); }
  .hero .vbtn { right: 22px; bottom: 22px; }
}
@media (max-width: 720px) {
  .hero-film-bg .screen { aspect-ratio: 4 / 5; }
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 1; width: auto; margin: calc(var(--nav-h) + 14px) auto 0 var(--gutter); height: 30px; font-size: 13px; }
  .hero h1 { order: 2; margin: 16px var(--gutter) 0; width: auto; }
  .hero .ctas { order: 3; margin: 20px var(--gutter); width: auto; }
  .hero-film-bg { order: 4; }
  .hero p.lead { order: 5; margin: 24px var(--gutter) 0; width: auto; }
  .viewfinder { display: none; }
  .hero .log { order: 6; }
}

.log { display: flex; flex-direction: column; min-width: 0; padding: 18px 12px 10px; }
.log-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 8px; }
.log-head b { display: block; font-size: 19px; font-weight: 400; letter-spacing: -0.01em; }
.log-head div span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.state { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: #FFF4DB; color: #8A5A00; font-size: 13px; font-weight: 500; }
.state i { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.state .is-ready, .log.ready .state .is-writing { display: none; }
.log.ready .state .is-ready { display: inline; }
.log.ready .state { background: #E3F3EA; color: #1C6442; }
.log.ready .state i { background: var(--success); }
.bar { height: 3px; margin: 12px 8px 4px; border-radius: 3px; background: var(--card); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--p, 1)); transform-origin: 0 50%; }
.log ol { display: grid; margin: 0; padding: 0; list-style: none; }
.row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: 14px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 0.3s ease;
}
.row:hover { background: var(--card); }
.row.now { background: var(--accent-soft); }
.row .tile { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: var(--card); color: var(--ink-3); transition: background-color 0.3s ease, color 0.3s ease; }
.row .tile svg { width: 17px; height: 17px; }
.row.w .tile { background: var(--accent); color: #FFFFFF; }
.row.w.alert .tile { background: var(--alert); }
.row.w.ok .tile { background: var(--success); }
/* A line not yet written is two grey bars, like the app's loading state; its words sit underneath, unseen. */
.row .body { flex: 1; min-width: 0; display: grid; }
.row .body > * { grid-area: 1 / 1; }
.row .txt b { display: block; font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.row .txt span { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.row .sk { display: grid; align-content: start; gap: 8px; padding-top: 4px; transition: opacity 0.2s ease; }
.row .sk i { display: block; width: 74%; height: 9px; border-radius: 5px; background: var(--card-2); }
.row .sk i + i { width: 46%; }
li:nth-child(2) .row .sk i:first-child { width: 94%; }
li:nth-child(4) .row .sk i:first-child { width: 86%; }
li:nth-child(5) .row .sk i + i { width: 34%; }
.row:not(.w) .txt { opacity: 0; }
.row.w .sk { opacity: 0; }

/* Video panels (src/media.js): a still frame until the video plays. A white video in a .blend panel is multiplied
   onto the grey, so the cards in it sit on the panel. */
.vid { position: relative; aspect-ratio: 16 / 9; border-radius: 32px; overflow: hidden; background: var(--card); isolation: isolate; }
.vid .poster, .vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid video { opacity: 0; transition: opacity 0.4s ease; }
.vid.live video { opacity: 1; }
/* Once the video shows, the frame under it goes, or a multiplied video would show both. */
.vid.live .poster { visibility: hidden; transition: visibility 0s linear 0.4s; }
.vid.blend .poster, .vid.blend video { mix-blend-mode: multiply; }
/* A video with a tall cut for phones (VIDEOS' small): 4:5 there. */
/* Its pause button goes bottom left there, off the phone's send button in the chat cut. */
@media (max-width: 720px) { .vid.has-small { aspect-ratio: 4 / 5; } .vid.has-small .vbtn { right: auto; left: 10px; } }
.vbtn {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: #FFFFFF; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(17, 19, 22, 0.1), 0 8px 20px -8px rgba(17, 19, 22, 0.35);
}
.vbtn svg { width: 18px; height: 18px; }
.vbtn .i-pause, .vbtn .i-again, .vbtn span, .vid.playing .vbtn .i-play, .vid.ended .vbtn .i-play { display: none; }
.vid.playing .vbtn .i-pause, .vid.ended .vbtn .i-again { display: block; }
.vid.ended .vbtn { padding: 0 16px 0 12px; }
.vid.ended .vbtn span { display: inline; }

/* How it works: a video for each step. On large screens the steps pin and change as you scroll (src/media.js). */
.head.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; }
.head.split .sub { margin: 0; }
.scrolly .tabs { display: none; }
.scrolly .step + .step { margin-top: clamp(64px, 8vw, 104px); }
.step .copy { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 40px; align-items: start; margin-top: 28px; }
.step .title { display: flex; align-items: center; gap: 14px; }
.step .num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-size: 15px; font-weight: 500; }
.step h3 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; line-height: 1.12; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.step .ticks { margin: 0; gap: 10px; }
.step .ticks li { font-size: 15px; }
.tabs button {
  position: relative; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 10px; border: 0; border-radius: 16px; overflow: hidden;
  background: var(--card); color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 400; cursor: pointer;
}
.tabs button b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF; font-size: 13px; font-weight: 500; }
.tabs button:hover { background: var(--card-2); }
.tabs button.on { background: var(--accent-soft); color: var(--accent); }
.tabs button.on b { background: var(--accent); color: #FFFFFF; }
.tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.scrolly.pinned { height: 400vh; }
.scrolly.pinned .pin { position: sticky; top: var(--nav, 76px); height: calc(100vh - var(--nav, 76px)); padding: 16px 0 32px; }
.scrolly.pinned .pin > .wrap { display: flex; flex-direction: column; height: 100%; }
.scrolly.pinned .tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.scrolly.pinned .stage { position: relative; flex: 1; min-height: 0; }
.scrolly.pinned .step { position: absolute; inset: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) var(--copy, auto); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.scrolly.pinned .step.on { opacity: 1; pointer-events: auto; }
.scrolly.pinned .media { container-type: size; min-height: 0; display: grid; place-items: center; }
.scrolly.pinned .media .vid { width: min(100cqw, 177.7cqh); }
.scrolly.pinned .copy { transform: translateY(14px); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.scrolly.pinned .step.on .copy { transform: none; }

/* What a miss costs: night while the film shows the misses, day once they are caught (src/media.js). By day the
   film is multiplied onto the grey like the other white videos; by night it is shown as it is. */
.cost { padding: clamp(28px, 5vw, 64px); border-radius: 40px; background: var(--card); transition: background-color 0.7s ease; }
.cost.night { background: var(--night); }
.cost-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 24px 56px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.cost h2 { margin-top: 20px; font-size: clamp(34px, 4vw, 54px); transition: color 0.7s ease; }
.cost h2 span { display: block; color: var(--accent); transition: color 0.7s ease; }
.cost-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); transition: color 0.7s ease; }
.cost.night h2 { color: #FFFFFF; }
.cost.night h2 span { color: #FF5A5F; }
.cost.night .cost-head p { color: rgba(255, 255, 255, 0.66); }
.cost-tag { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 500; transition: background-color 0.7s ease, color 0.7s ease; }
.cost-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cost-tag .late, .cost.night .cost-tag .early { display: none; }
.cost.night .cost-tag .late { display: inline; }
.cost.night .cost-tag { background: rgba(225, 41, 47, 0.18); color: #FF6B6F; }
.cost .vid { isolation: auto; border-radius: 24px; background: transparent; }
.cost:not(.night) .vid .poster, .cost:not(.night) .vid video { mix-blend-mode: multiply; }
.source { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); transition: color 0.7s ease; }
.cost.night .source { color: rgba(255, 255, 255, 0.45); }

/* Things you can ask Vedo, as the super's own chat bubbles (the app's VBubble: 22 pt corners, an 8 pt tail) */
.asks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.asks li { padding: 12px 18px 13px; border-radius: 22px 22px 8px 22px; background: var(--card); font-size: 17px; line-height: 1.3; color: var(--ink); }

/* One walk, everyone's paperwork */
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.roles .item { padding: 28px; border-radius: 28px; background: var(--card); }
.roles .icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--accent); color: #FFFFFF; }
.roles .icon svg { width: 22px; height: 22px; }
.roles h3 { margin-top: 22px; font-size: 20px; }
.roles p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* Page hero (inner pages) */
.page-hero { padding: clamp(40px, 6vw, 88px) 0 0; }
.page-hero h1 { margin-top: 20px; max-width: 900px; font-size: clamp(42px, 5.6vw, 76px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.page-hero .sub { max-width: 680px; }
.page-hero + .section { padding-top: clamp(48px, 6vw, 80px); }

/* Phones */
.phone {
  width: 272px; aspect-ratio: 640 / 1392; border-radius: 44px; overflow: hidden; background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(17, 19, 22, 0.06), 0 30px 60px -18px rgba(17, 19, 22, 0.28);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }

/* Feature rows: text beside a screen on a soft panel */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.feature + .feature { margin-top: var(--section); }
.feature.flip .panel { order: -1; }
.feature .panel { display: flex; justify-content: center; align-items: center; padding: 56px 24px; border-radius: 40px; background: var(--card); }
.feature .panel.blue { background: var(--accent-soft); }
.feature .kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 15px; font-weight: 500; }
.feature .kicker svg { width: 18px; height: 18px; }
.feature h2 { margin-top: 14px; font-size: clamp(32px, 3.8vw, 50px); }
.feature p { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 520px; }
/* A feature with a video across the page: the heading and text side by side above it */
.feature.wide { display: block; }
.feature.wide .top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.feature.wide .top p { margin-top: 0; }
.hero-film { margin-top: clamp(36px, 5vw, 56px); }
.ticks { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--ink); }
.ticks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 0; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8.5'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Provinces */
.canada { border-radius: 40px; background: var(--card); padding: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.canada h2 { font-size: clamp(32px, 3.8vw, 50px); }
.canada .sub { font-size: 18px; }
.provinces { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.provinces li { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 8px; border-radius: 999px; background: #FFFFFF; font-size: 15px; }
.provinces li b { display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }

/* Facts row */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.facts .item { padding: 28px 32px; border-radius: 28px; background: var(--card); }
.facts b { display: block; font-size: 18px; font-weight: 400; }
.facts span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* Call to action band */
.band { position: relative; overflow: hidden; border-radius: 40px; background: var(--accent); color: #FFFFFF; padding: clamp(44px, 6vw, 88px) clamp(28px, 6vw, 88px); }
.band h2 { max-width: 680px; }
.band p { margin: 18px 0 0; max-width: 560px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.band .mark { position: absolute; right: clamp(-60px, -2vw, 0px); bottom: -70px; width: clamp(220px, 30vw, 380px); opacity: 0.14; pointer-events: none; }

/* Founders */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.person { padding: 32px; border-radius: 32px; background: var(--card); }
.person .avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-size: 28px; font-weight: 400; }
.person h3 { margin-top: 24px; }
.person .role { margin-top: 4px; font-size: 15px; color: var(--accent); font-weight: 400; }
.person p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.prose { max-width: 720px; }
.prose p { margin: 0 0 20px; font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.prose p:first-child { color: var(--ink); font-size: clamp(21px, 2vw, 26px); line-height: 1.45; }

/* Pricing */
.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.price .main { padding: clamp(32px, 4vw, 56px); border-radius: 40px; background: var(--accent); color: #FFFFFF; display: flex; flex-direction: column; }
.price .main h2 { font-size: clamp(32px, 3.6vw, 48px); }
.price .main p { margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.price .main .ctas { margin-top: auto; padding-top: 40px; }
.price .list { padding: clamp(32px, 4vw, 56px); border-radius: 40px; background: var(--card); }
.price .list h3 { font-size: 20px; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.contact .demo { padding: clamp(32px, 4vw, 48px); border-radius: 40px; background: var(--accent); color: #FFFFFF; }
.contact .demo h2, .contact .join h2 { font-size: clamp(30px, 3.2vw, 42px); }
.contact .demo p { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.contact .demo .ctas { margin-top: 32px; }
.contact .join { padding: clamp(32px, 4vw, 48px); border-radius: 40px; background: var(--card); scroll-margin-top: 96px; }
.contact .join > p { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.field input, .field select {
  width: 100%; height: 52px; padding: 0 18px; border: 0; border-radius: 16px; background: #FFFFFF; color: var(--ink);
  font: inherit; font-size: 16px; font-weight: 400; appearance: none; -webkit-appearance: none;
}
.field select { background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; padding-right: 44px; }
.field input::placeholder { color: var(--ink-3); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
form .note { font-size: 14px; color: var(--ink-3); }
form .note a { color: var(--ink-2); }
.status { grid-column: 1 / -1; margin: 0; padding: 14px 18px; border-radius: 16px; font-size: 16px; line-height: 1.45; }
.status[hidden] { display: none; }
.status.ok { background: #E3F3EA; color: #1C6442; }
.status.err { background: #FDE8E8; color: #B01E23; }
.done { margin-top: 28px; padding: 28px; border-radius: 24px; background: #FFFFFF; }
.done[hidden] { display: none; }
.done b { display: block; font-size: 20px; font-weight: 400; }
.done span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* Plain text pages */
.legal { max-width: 720px; }
.legal h2 { margin: 44px 0 0; font-size: 24px; letter-spacing: -0.01em; font-weight: 400; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.legal ul { padding-left: 20px; }

/* Blog: the list of posts, and a post */
.page-hero + .section.list { padding-top: clamp(29px, 3.6vw, 48px); }
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.post-card { display: flex; flex-direction: column; border-radius: 32px; background: var(--card); overflow: hidden; text-decoration: none; }
.post-card:hover { background: var(--card-2); }
.post-card .art { aspect-ratio: 4 / 3; background: var(--card-2); }
.post-card .art img { width: 100%; height: 100%; object-fit: cover; }
.post-card .art.blank { display: grid; place-items: center; background: var(--accent); }
.post-card .art.blank img { width: 20%; height: auto; }
.post-card .text { flex: 1; padding: 26px 32px 30px; }
.post-card h2, .post-card h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; font-weight: 300; letter-spacing: -0.02em; text-wrap: balance; }
/* /blog before the first post */
.soon { padding: clamp(36px, 5vw, 72px); border-radius: 40px; background: var(--card); }
.soon .tile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: var(--accent); color: #FFFFFF; }
.soon .tile svg { width: 24px; height: 24px; }
.soon h2 { margin-top: 26px; font-size: clamp(30px, 3.2vw, 42px); }
.soon p { margin: 14px 0 0; max-width: 560px; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
/* Under a post: more posts */
.more .head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); }
.more h2 { font-size: clamp(30px, 3.2vw, 42px); }
a.eyebrow { text-decoration: none; }
.post .page-hero h1 { max-width: 860px; font-size: clamp(38px, 4.8vw, 64px); line-height: 1.04; }
.byline { margin: 22px 0 0; font-size: 15px; color: var(--ink-3); }
.cover { margin-top: clamp(36px, 5vw, 56px); }
.cover img { width: 100%; height: auto; border-radius: 40px; background: var(--card); }
/* A post reads down the middle: the title and the text in one column, the cover and wide pictures across the page */
.post-head, .article { max-width: 720px; margin-left: auto; margin-right: auto; }
.article > :first-child { margin-top: 0; }
.article p, .article li { font-size: 19px; line-height: 1.65; color: var(--ink-2); }
.article p { margin: 0 0 22px; }
.article h2 { margin: 52px 0 16px; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em; }
.article h3 { margin: 40px 0 12px; }
.article h4 { margin: 32px 0 10px; font-size: 18px; font-weight: 500; }
.article a { color: var(--accent); }
.article strong { font-weight: 500; color: var(--ink); }
.article ul, .article ol { margin: 0 0 22px; padding-left: 24px; }
.article li + li { margin-top: 8px; }
.article li p { margin: 0; }
.article figure { margin: 36px 0; }
.article figure img { width: 100%; height: auto; border-radius: 24px; background: var(--card); }
.article figure.small { max-width: 360px; }
.article figure.wide { --w: calc(min(100vw, var(--max)) - 2 * var(--gutter)); width: var(--w); max-width: none; margin-left: calc((100% - var(--w)) / 2); }
.article figure.pair > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.article figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.article blockquote { margin: 32px 0; padding: 24px 28px; border-radius: 24px; background: var(--accent-soft); color: var(--ink); font-size: 19px; line-height: 1.6; }
.article blockquote p { margin: 0; color: var(--ink); }
.article blockquote p + p { margin-top: 12px; }
.article hr { height: 1px; margin: 48px 0; border: 0; background: var(--card-2); }
.article code { padding: 2px 6px; border-radius: 6px; background: var(--card); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; }
.article pre { margin: 0 0 22px; padding: 20px 24px; border-radius: 20px; background: var(--card); overflow-x: auto; }
.article pre code { padding: 0; background: none; }
.article table { display: block; overflow-x: auto; margin: 0 0 22px; border-collapse: collapse; font-size: 16px; }
.article th, .article td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--card-2); }
.article th { font-weight: 500; }

/* Footer */
.foot { background: var(--card); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; padding-top: 56px; padding-bottom: 48px; }
.foot .logo img { height: 26px; width: auto; }
.foot .tag { margin: 16px 0 0; max-width: 320px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.foot ul { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 48px; margin: 0; padding: 0; list-style: none; }
.foot ul a { text-decoration: none; font-size: 15px; color: var(--ink-2); }
.foot ul a:hover { color: var(--ink); }
.foot .small { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 28px; font-size: 14px; color: var(--ink-3); }

/* Analytics banner */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 16px; max-width: 520px;
  padding: 14px 14px 14px 20px; border-radius: 24px; background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(17, 19, 22, 0.08), 0 24px 48px -16px rgba(17, 19, 22, 0.28); }
.consent p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.consent a { color: var(--ink); }
.consent-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 520px) {
  .consent { right: 16px; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .consent-actions .btn { flex: 1; }
}

/* Claude and ChatGPT (/connectors): the address on blue beside things to ask, then each app's steps */
.connect { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px; }
.connect .main { padding: clamp(32px, 4vw, 56px); border-radius: 40px; background: var(--accent); color: #FFFFFF; display: flex; flex-direction: column; }
.connect .main h2 { font-size: clamp(32px, 3.6vw, 48px); }
.connect .main p { margin: 16px 0 40px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.connect .address { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 8px 8px 8px 24px; border-radius: 999px; background: #FFFFFF; }
.connect .address code { flex: 1; min-width: 0; font-family: inherit; font-size: clamp(18px, 2vw, 24px); font-weight: 400; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.connect .address .btn { flex: none; min-width: 92px; }
.connect .list { padding: clamp(32px, 4vw, 56px); border-radius: 40px; background: var(--card); }
.connect .list h3 { font-size: 20px; }
.connect .asks { margin-top: 24px; }
.connect .asks li { background: #FFFFFF; font-size: 16px; }
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.how .app { padding: clamp(28px, 3.4vw, 44px); border-radius: 32px; background: var(--card); }
.how h3 { font-size: 24px; }
.how ol { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: step; }
.how li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink); counter-increment: step; }
.how li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-size: 14px; font-weight: 500; line-height: 1; }
.how li b { font-weight: 400; overflow-wrap: anywhere; }
.how .note { margin: 24px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* 404 */
.lost { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 1060px) {
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .nav ul, .nav .actions { display: none; }
  .menu { display: block; margin-left: auto; }
  .feature { grid-template-columns: 1fr; }
  .feature.flip .panel { order: 0; }
  .canada, .price, .contact, .connect, .how { grid-template-columns: 1fr; }
  .people, .facts { grid-template-columns: 1fr; }
  .head.split, .cost-head, .feature.wide .top { grid-template-columns: minmax(0, 1fr); }
  .step .copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .step .title { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .feature .panel { padding: 40px 16px; border-radius: 32px; }
  .feature .phone { width: 236px; border-radius: 36px; }
  .foot .wrap { grid-template-columns: 1fr; }
  .band .mark { display: none; }
  form { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .article p, .article li { font-size: 18px; }
  .vid { border-radius: 24px; }
  .cost .vid { border-radius: 18px; }
  .step .copy { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
}
@media (max-width: 520px) {
  :root { --nav-h: 64px; }
  .hero .ctas .btn { flex: 1 1 0; padding: 0 14px; font-size: 15px; }
  .nav .logo img { height: 24px; }
  .ctas .btn { flex: 1 1 100%; }
  .band, .canada, .contact .demo, .contact .join, .price .main, .price .list, .connect .main, .connect .list, .cover img, .soon, .cost { border-radius: 32px; }
  .how .app { border-radius: 28px; }
  .connect .address { flex-direction: column; align-items: stretch; padding: 18px; border-radius: 24px; text-align: center; }
  .connect .address .btn { height: 48px; }
  .post-card { border-radius: 28px; }
  .post-card .text { padding: 22px 24px 26px; }
  .provinces li { height: 40px; font-size: 14px; }
  .roles { grid-template-columns: minmax(0, 1fr); }
  .vbtn { right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .caret::after { animation: blink 1.1s steps(1) infinite; }
  .hero h1 .type i { opacity: 0; transition: opacity 0.12s linear; }
  .hero h1 .type i.on { opacity: 1; }
  .viewfinder i { animation: lock 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
  .viewfinder i:nth-child(1) { --dx: -26px; --dy: -26px; }
  .viewfinder i:nth-child(2) { --dx: 26px; --dy: -26px; }
  .viewfinder i:nth-child(3) { --dx: 26px; --dy: 26px; }
  .viewfinder i:nth-child(4) { --dx: -26px; --dy: 26px; }
  @keyframes lock { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } to { opacity: 1; transform: none; } }
  @keyframes blink { 50% { opacity: 0; } }
  .log:not(.ready) .state i { animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.25; } }
  /* A line is written from left to right. */
  .row.w .txt { animation: write 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }