/* Vidd AI homepage v2 (design C, "After hours"): the page at /.
   Part 1 is the structure the scripts rely on (modes, layouts, the jobs' seats, canvas and flat phones).
   Part 2 is the look, ported from our own draft C (options/c-after-hours/style.css).
   Tokens, type, buttons and the base header come from /site/css/base.css. */

/* ======================================================================
   Part 1: Structure
   ====================================================================== */
:root { --nav-h: 72px; }
@media (max-width: 767px) { :root { --nav-h: 64px; } }
/* The size rule (one of the mode rules): on the phone layout the jobs play only where a phone of at least 170px fits
   a screen with the header (--nav-h), a label row, a caption box and 48px of air (pose.js phoneWidth,
   PHONE_LAYOUT_MARGIN); anything shorter is the plain list. The early head script's 172 is these three together. */
:root { --cap-h: 84px; --label-h: 40px; }
.nav { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav[data-tone="dark"] { background: #14120e; }
.nav[data-tone="dark"] .nav-links a { color: rgba(255, 253, 246, .86); }
.night { position: relative; background: #14120e; color: var(--paper); }
/* Anchors land below the solid header (base.css covers only main > section[id]; these sit inside the night or are aliases). */
#hero, #jobs, #trust, .anchor { scroll-margin-top: var(--nav-h); }
.anchor { display: block; height: 0; }
/* A sticky layer, a screen tall, that takes no room: the glow at z 1 BEHIND the words (the hero copy and the jobs sit
   at z 2). It is screen blended, so it only lightens what is behind it (the video, the night). It is two static
   gradient layers, cobalt (work) and sun (home), that never repaint: only their opacity changes, on the compositor
   (the phone layout's At home pill turns it sun, below); the glow's own strength (.28) stays on the blended layer. At
   rest it is cobalt. The colours are given in oklab (a colour mixed with itself), as the old single colour-mix
   gradient was, so each end looks exactly as before. The layers ADD (plus-lighter) inside the glow, its own group
   (isolation: isolate says so outright; its opacity and blend make it one anyway): a cross fade at full strength,
   and neither layer ever adds onto the night or the video behind the glow. No script writes it. */
#stage-glow { --glow-shape: 40% 50% at 72% 55%; position: sticky; top: 0; height: 100lvh; margin-bottom: -100lvh; pointer-events: none; z-index: 1; isolation: isolate; mix-blend-mode: screen; opacity: .28; }
#stage-glow > div { position: absolute; inset: 0; will-change: opacity; mix-blend-mode: plus-lighter; }
#stage-glow > .glow-cobalt { background: radial-gradient(var(--glow-shape), color-mix(in oklab, #1f49ff, #1f49ff) 0%, transparent 70%); }
#stage-glow > .glow-sun { background: radial-gradient(var(--glow-shape), color-mix(in oklab, #ffc931, #ffc931) 0%, transparent 70%); opacity: 0; }
@media (max-width: 980px) {
  html[data-side="home"] #stage-glow > .glow-cobalt { opacity: 0; }
  html[data-side="home"] #stage-glow > .glow-sun { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) { #stage-glow > div { transition: opacity .6s ease; } }
/* hero */
.hero-slot { position: relative; justify-self: stretch; align-self: start; }
.hero-still { display: block; width: 100%; height: auto; }
.hero-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.hero-answer { display: flex; gap: 10px; }
/* JS off: the See it ask button needs the script, so the demo is not shown. */
.no-js .hero-demo { display: none; }
/* site.js late or failed (the head script, after 4 s): every reveal block shows at once, so nothing stays invisible. */
html.rv-off .rv { opacity: 1; transform: none; }
/* jobs: default = the plain list (no JS, reduced motion, too short, a late script). With JS (html.jobs-ready) the
   jobs play: tap a job and its phone shows what it asks, with the button in the answer under it; press it, done. The
   list stays for screen readers only (the phones' pictures and the canvas say nothing to them). */
.job-shot { display: block; width: min(260px, 70vw); height: auto; margin: 14px 0 0; border-radius: 22px; }
.jc-play, #stage-glow { display: none; }
html.jobs-ready #stage-glow { display: block; }
html.jobs-ready .job-shot { display: none; }
html.jobs-ready .jc-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The play area: a side per group (Work, At home), each with its seat (the phone), its label, its job buttons and
   its answer. Desktop shows both side by side; the phone layout shows the side the Work / At home pills pick
   (html[data-side], page.js), both in one grid cell, so a switch never moves the page. The phone's width follows the
   screen's height, so the whole section stays about a screen tall. */
html.jobs-ready .jc-play { display: grid; position: relative; margin-top: 10px; }
.jc-side { display: grid; justify-items: center; align-content: start; row-gap: 12px; min-width: 0; }
.jc-seat { position: relative; width: var(--phone-w); aspect-ratio: 74 / 154; }
@media (min-width: 981px) {
  :root { --phone-w: clamp(170px, calc((100svh - var(--nav-h)) * .26), 260px); }
  html.jobs-ready .jc-play { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 72px); }
}
@media (max-width: 980px) {
  :root { --phone-w: clamp(140px, min(48vw, calc((100svh - var(--nav-h)) * .245)), 300px); }
  html.jobs-ready .jc-grid { margin-top: 20px; }
  html.jobs-ready .jc-side { grid-area: 1 / 1; }
  html:not([data-side="home"]) .jc-side[data-side="home"], html[data-side="home"] .jc-side[data-side="work"] { visibility: hidden; }
}
/* The 3D phones: one canvas round the seats (home3d sets its box: the seats plus 24px on every side, room for the
   turn, on whole pixels, pose.js seatCanvasBox), so the page's own scroll moves the phones with their seats and JS
   draws only for a wipe, a turn and a resize. Above the seats (z 1), and it never takes a tap or a touch. It fades in
   on the first drawn frame (html.phone3d-seen) and then stays. */
#phone3d { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; display: block; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
html[data-mode="3d"].phone3d-seen #phone3d { opacity: 1; }
html:not([data-mode="3d"]) #phone3d { display: none; }
/* Phone layout, 3D: until the 3D phone has drawn once, the Work seat shows a still of our phone on job 1's ask (where
   the phone layout starts; rendered with the same camera, pose and quality as the 3D phone at its seat), so the seat
   is never empty while 3D loads. Its box is --seat-frame times the seat (the picture has that much room round the
   phone), so the phone lands on the seat. The canvas fades in over it for .4s, then the still hides for good. Lazy
   and display none elsewhere, so only phones in 3D fetch it. Flat and static modes have their own pictures. */
:root { --seat-frame: 1.06; }
.seat-still { display: none; }
@media (max-width: 980px) {
  html[data-mode="3d"] .seat-still { display: block; position: absolute; left: 50%; top: 50%; width: calc(100% * var(--seat-frame)); height: calc(100% * var(--seat-frame)); max-width: none; translate: -50% -50%; pointer-events: none; }
  html[data-mode="3d"].phone3d-seen .seat-still { visibility: hidden; transition: visibility 0s linear .4s; }
}
/* flat mode phones (pictures, CSS frame in our phone shape) */
.flat-phone { display: none; }
html[data-mode="flat"] .flat-phone { display: grid; width: 100%; aspect-ratio: 74 / 154; border-radius: 15% / 7.2%; background: #1a1916; padding: 4.3% 4.3%; box-shadow: 0 0 0 1.5px #8e8b85, 0 30px 80px -20px rgba(0,0,0,.6); }
html[data-mode="flat"] .flat-phone > img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; border-radius: 11% / 5.2%; }
/* a new picture wipes up from the bottom, as the 3D phone's does; no class = a cut (the first picture, a fall back) */
html[data-mode="flat"] .flat-phone > img.in-up { animation: wipeUp .6s cubic-bezier(.2,.75,.12,1) both; }
@keyframes wipeUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { html[data-mode="flat"] .flat-phone > img.in-up { animation: none; } }
#debug { position: fixed; left: 8px; bottom: 8px; z-index: 99; font: 500 12px/1.4 "IBM Plex Mono", monospace; background: rgba(0,0,0,.72); color: #7fe0a3; padding: 6px 8px; border-radius: 6px; pointer-events: none; }

/* ======================================================================
   Part 2: The look (ported from draft C)
   ====================================================================== */
:root {
  --night: #0D0B08;
  --hair: rgba(255, 255, 255, .08);
  --hair-2: rgba(255, 255, 255, .14);
  --od-1: rgba(255, 253, 246, .94);
  --od-2: rgba(255, 253, 246, .72);
  --od-3: rgba(255, 253, 246, .52);
  --od-4: rgba(255, 253, 246, .3);
  --bub-dark: #27241F;
  --done: #7FE0A3;
  /* the hero still is our phone (74 x 154) drawn at 1 / 1.12 of the picture height: height = width x 2.3308 */
  --hero-ratio: 2.3308;
  --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---------- Shared small pieces (the demos, the people and the business door use them) ---------- */
.sep-hide { display: none; }

.tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 9px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  font-variation-settings: "opsz" 96;
}
.tile-sun { background: var(--sun); color: var(--ink); }
.tile-cobalt { background: var(--cobalt); color: #fff; }
.tile-ink { background: var(--ink); color: var(--sun); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.tile-neo { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--sun); }
.tile-v { background: var(--ink) url("/site/media/viddai-mark.svg") 50% 58% / 60% auto no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }

.ex-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--stone);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.ex-tag-dark { color: var(--sun); background: rgba(255, 201, 49, .1); border-color: rgba(255, 201, 49, .3); }

.bub {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.38;
  text-wrap: pretty;
}
.bub.me { align-self: flex-end; margin-left: auto; background: var(--cobalt); color: #fff; border-bottom-right-radius: 6px; }
.bub.ai { align-self: flex-start; background: var(--paper-2); color: var(--ink); border-bottom-left-radius: 6px; }

/* Buttons inside the demos. Real buttons, 44px tall, the person presses them. */
.b {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s, color .2s, box-shadow .25s var(--ease);
}
.b-pri { background: var(--cobalt); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 8px 18px -10px rgba(31, 73, 255, .9); }
.b-pri:hover { background: var(--cobalt-deep); }
.b-sec { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.b-sec:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
/* a thumb press, when you press (nothing on this page presses itself; page.js tap) */
.b.is-tapping { transform: scale(.95); }
.b.is-tapping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: tapRing .6s ease-out both;
  pointer-events: none;
}
@keyframes tapRing {
  from { box-shadow: 0 0 0 0 rgba(255, 201, 49, .75); }
  to { box-shadow: 0 0 0 14px rgba(255, 201, 49, 0); }
}
/* the choice, once made, fills the card (the other choices step aside) */
.is-chosen .b:not(.is-picked) { display: none; }
.b.is-picked {
  background: var(--sun);
  color: var(--ink);
  box-shadow: none;
  cursor: default;
}
.is-chosen .b.is-picked { grid-column: 1 / -1; width: 100%; }
.b.is-picked::before {
  content: "";
  width: 14px; height: 14px;
  margin-right: 8px;
  background: currentColor;
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

/* ---------- The night and its stage ---------- */
/* The glow and the stage paint a full screen below their own place (their negative margin), so at the
   end of the night they would paint over the light section after it; the night clips them at its edge.
   overflow: clip is not a scroll container, so sticky still works inside. */
.night { overflow: clip; }
/* The words sit above the glow (z 2) and below the canvas (z 3). The hero is NOT its own stacking
   context, so its video and poster stay under the glow while its copy and buttons rise above it. */
.jobs-c > .wrap { position: relative; z-index: 2; }

/* ---------- Header: dark over the night, paper once the page turns light ---------- */
.nav { transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.nav[data-tone="dark"] { box-shadow: 0 1px 0 var(--hair); }
.nav[data-tone="light"] { box-shadow: 0 1px 0 rgba(20, 18, 14, .06); }
.nav-logo img { height: 30px; width: auto; }
.nav .logo-on-light { display: none; }
.nav[data-tone="light"] .logo-on-dark { display: none; }
.nav[data-tone="light"] .logo-on-light { display: block; }
.nav[data-tone="dark"] .nav-links a:hover { background: rgba(255, 255, 255, .09); color: var(--paper); }
.nav[data-tone="dark"] .nav-menu { background: rgba(255, 255, 255, .06); color: var(--paper); border-color: rgba(255, 255, 255, .26); }
.nav[data-tone="dark"] :focus-visible { outline-color: var(--sun); }

/* ---------- 1. Hero: after hours ---------- */
.hero-c {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(620px, calc(100svh - var(--nav-h)));
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
/* no z-index here: the media stays under the glow, and the pause button inside can sit above the copy */
.hc-media { position: absolute; inset: 0; }
.hc-media > img,
.hc-media > video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 8% 50%;
}
/* the poster shows until the video really plays, then the video fades in (site.js adds is-ready) */
.hc-media > video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hc-media > video.is-ready { opacity: 1; }
/* the bottom fade ends in solid ink, so the night runs into the jobs without a seam */
.hc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 18, 14, .5) 0%, rgba(20, 18, 14, 0) 14%, rgba(20, 18, 14, 0) 64%, rgba(20, 18, 14, .85) 86%, var(--ink) 98%),
    linear-gradient(90deg, rgba(9, 8, 6, .9) 0%, rgba(9, 8, 6, .78) 24%, rgba(9, 8, 6, .42) 42%, rgba(9, 8, 6, .1) 58%, rgba(9, 8, 6, 0) 70%);
}
/* a round button with a drawn pause (or play) glyph; its words stay for screen readers */
.hc-pause {
  position: absolute;
  z-index: 3;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(18px, 3vh, 30px);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(13, 11, 8, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: transparent;
  font-size: 0;
  cursor: pointer;
}
.hc-pause::before { content: ""; width: 11px; height: 12px; border-left: 3px solid var(--paper); border-right: 3px solid var(--paper); box-sizing: border-box; }
.hc-pause[aria-pressed="true"]::before { width: 0; height: 0; margin-left: 3px; border-right: 0; border-left: 11px solid var(--paper); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hc-pause:focus-visible { outline-color: var(--sun); }

.hc-grid {
  position: relative;
  z-index: 2;
  width: min(100%, 1440px);
  padding: 32px clamp(20px, 3.4vw, 56px) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) auto minmax(0, .5fr);
  gap: clamp(32px, 3.4vw, 56px);
  align-items: center;
}
.hc-copy { max-width: 720px; }
.hero-c .kicker { color: var(--od-2); }
.hero-c h1 {
  margin-top: 24px;
  max-width: 12em;
  color: var(--paper);
  font-size: clamp(40px, min(4vw, 6.8vh), 58px);
  line-height: 1;
  letter-spacing: -.038em;
}
.hero-c h1 .accent { color: var(--paper); }
/* the family signature: a sun swipe under the last word, paper text */
.hero-c .mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
  color: var(--paper);
}
.hero-c .mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.07em; right: -.05em;
  bottom: .04em;
  height: .34em;
  border-radius: .14em .34em .2em .4em;
  background: var(--sun);
  transform: rotate(-1.4deg);
  transform-origin: left center;
  box-shadow: 0 0 36px rgba(255, 201, 49, .28);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-c .mark::before { animation: markSwipe .8s var(--ease) .5s both; }
}
@keyframes markSwipe { from { transform: rotate(-1.4deg) scaleX(0); } to { transform: rotate(-1.4deg) scaleX(1); } }
.hero-c .lede { margin-top: 26px; max-width: 31em; color: var(--od-2); }
.hc-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.hero-c .btn-ghost,
.hero-answer .btn-ghost {
  color: var(--paper);
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .24);
}
.hero-c .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); transform: translateY(-1px); }
.hc-note { margin-top: 18px; max-width: 30em; font-size: 14.5px; line-height: 1.45; color: var(--od-3); }
.ai-label { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--od-3); }
.hero-c :focus-visible { outline-color: var(--sun); }

/* the hero phone: right of the copy, sized so the whole phone and its button fit the first screen.
   The picture box has a fixed height, so the layout (and the 3D phone that starts from it) never
   depends on the picture having loaded. */
.hero-c { --hero-w: min(360px, 26vw, calc((100svh - var(--nav-h) - 140px) / var(--hero-ratio))); }
.hero-c .hero-slot { align-self: center; width: var(--hero-w); }
.hero-c .hero-still { width: var(--hero-w); height: calc(var(--hero-w) * var(--hero-ratio)); object-fit: contain; }
.hero-demo .btn { --h: 44px; }

/* ---------- 2. Give it a job: the night continues ---------- */
.jobs-c {
  --jobs-top: clamp(64px, 8vw, 112px);
  position: relative;
  padding: var(--jobs-top) 0 clamp(48px, 5vw, 72px);
  background: var(--ink);
  color: var(--paper);
}
.jobs-c .kicker { color: var(--od-3); }
.jobs-c h2 { color: var(--paper); }
.jobs-c .lede { color: var(--od-2); }
.jobs-c :focus-visible { outline-color: var(--sun); }
.jc-head {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 18px clamp(32px, 6vw, 96px);
  align-items: end;
}
.jc-head .kicker { grid-column: 1 / -1; }
.jc-head h2 { max-width: 15em; }
.jc-grid { margin-top: clamp(28px, 3vw, 44px); }

/* Work / At home: jump links in one pill; the group being shown is filled with sun */
.jc-pills {
  display: flex;
  width: max-content;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: rgba(28, 25, 20, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.jc-pills a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  color: var(--od-2);
  text-decoration: none;
  transition: background-color .3s, color .3s;
}
.jc-pills a:hover { color: var(--paper); }
/* page.js says which side is lit (html[data-side]): the phone layout's switch */
html.jobs-ready[data-side="work"] .jc-pills a[href="#jobs-work"],
html.jobs-ready[data-side="home"] .jc-pills a[href="#jobs-life"] { background: var(--sun); color: var(--ink); }
#jobs-work, #jobs-life { scroll-margin-top: calc(var(--nav-h) + 96px); }
/* The plain list (static, JS off, reduced motion): the LIFE / "And at home" divider sits right above the home list, so
   the At home pill lands with the whole divider below the header: its height (141px of padding, rule and LIFE, plus its
   one line, .98 of --jt-size; measured from 320 to 2560 px wide), the Examples tag under it (36px, .jl-ex below) and a
   little room. */
html:not(.jobs-ready) #jobs-life { scroll-margin-top: calc(var(--nav-h) + 141px + .98 * var(--jt-size) + 36px + 16px); }

/* the rows: contiguous (no margins), spacing inside */
ol.jobs { list-style: none; padding: 0; }
.job { position: relative; padding: 40px 0; border-top: 1px solid var(--hair); }
.job-num { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--sun); }
.job-title {
  margin-top: 10px;
  color: var(--paper);
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
/* each line: the label in a narrow column, the words beside it (they wrap in their own column);
   the "You text" line puts the quote on its own line under the label */
.job > p:not(.job-num) { display: flex; align-items: baseline; column-gap: 14px; margin-top: 12px; max-width: 36em; font-size: 15.5px; line-height: 1.45; color: var(--od-2); }
.job > p:not(.job-num) > .lbl { flex: none; width: 68px; }
.job > p:has(> q) { flex-wrap: wrap; }
.job > p > q { flex: 1 1 100%; }
.lbl {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--od-3);
}
.job q {
  display: block;
  margin-top: 8px;
  max-width: 26em;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--od-1);
  quotes: "\201C" "\201D";
  font-variation-settings: "opsz" 36;
}
.job q::before, .job q::after { color: var(--sun); }
.job > p:nth-of-type(4) .lbl { color: var(--sun); }
.job > p:nth-of-type(5) .lbl { color: var(--done); }
.job-shot { box-shadow: 0 0 0 1px var(--hair-2), 0 24px 60px -30px rgba(0, 0, 0, .7); }

/* the turn from work to home (its line's size is a property, so the plain list's At home landing above can use it) */
.jc-list { --jt-size: clamp(44px, 4.6vw, 70px); }
.jobs-turn { padding: 72px 0 32px; border-top: 1px solid var(--hair); }
.jobs-turn .kicker { color: var(--sun); }
/* The plain list's rows show amounts ($1,850, $86 ...) before any picture's Example tag (each row's is inside its done
   picture, under the words on a phone), so each list opens with an Examples tag: 20px tall, 16px above the first row
   (the home list's is counted in #jobs-life's scroll margin above). */
.jl-ex { display: flex; height: 20px; margin: 22px 0 16px; }
.jobs-turn + .jl-ex { margin-top: 0; }
.jt-line {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--jt-size);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--paper);
  font-variation-settings: "opsz" 96;
}

/* ---------- 2a. Tap to play: the job buttons and the answer under each phone ---------- */
/* Desktop: WORK / AT HOME over each side's buttons (the pills are the phone layout's switch, so they hide here). */
.jc-label { margin-top: 6px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; color: var(--sun); }
/* The buttons are a grid of two equal columns as wide as the answer under them, so both sides make the same rows (six a
   side: three) whatever their labels say, and the two answers start at one height (David 10/1). A label must fit its
   column on one line (the e2e checks it); a row that wraps by label length would give one side more rows than the other. */
.jc-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: stretch; gap: 6px; width: min(100%, 440px); }
.jc-pick {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: rgba(255, 253, 246, .05);
  color: var(--od-2);
  font: 500 13.5px/1.2 var(--body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.jc-pick:hover { color: var(--paper); border-color: var(--od-4); }
.jc-pick[aria-pressed="true"] { background: var(--sun); border-color: transparent; color: var(--ink); }
/* The answer: what the chosen job asks and its button; once pressed, its done line in their place (data-state,
   page.js). Tall enough for most, so a pick seldom moves what is under it. The Example tag floats in its corner. */
.jc-answer { width: min(100%, 440px); min-height: 112px; padding: 12px 14px 14px; border: 1px solid var(--hair-2); border-radius: 18px; background: rgba(255, 253, 246, .04); }
.jc-answer > .ex-tag { float: right; margin: 0 0 4px 10px; }
.jc-ans[hidden] { display: none; }
.jc-ask, .jc-nothing, .jc-done { font-size: 14px; line-height: 1.4; color: var(--od-1); }
.jc-nothing + .jc-done { margin-top: 6px; }
.jc-ans .lbl { margin-right: 8px; }
.jc-ask .lbl, .jc-nothing .lbl { color: var(--sun); }
.jc-done .lbl { color: var(--done); }
.jc-ans[data-state="asks"] .jc-done, .jc-ans[data-state="done"] .jc-ask, .jc-ans[data-state="done"] .jc-go { display: none; }
.jc-go { --h: 40px; display: flex; width: max-content; margin-top: 10px; padding: 0 18px; font-size: 14.5px; }
@media (min-width: 981px) { html.jobs-ready .jc-pills { display: none; } }
/* Phone layout: no label (the pills say the side); the buttons are one row the visitor swipes (snapping on this row
   only), out to the screen's edges. */
@media (max-width: 980px) {
  .jc-label { display: none; }
  html.jobs-ready .jc-pills { margin-inline: auto; padding: 3px; }
  .jc-picks { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(var(--gutter) * -1); padding: 3px var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .jc-pick { flex: none; scroll-snap-align: start; }
}

/* the flat phone fills its seat exactly */
html[data-mode="flat"] .flat-phone { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
html[data-mode="flat"] .flat-phone > img { min-height: 0; }

/* ---------- 2b. House rules: the promise at the end of the night ---------- */
/* Its own section after the night, so the pinned phone has let go before it. flow-root keeps the panel's top margin
   inside the section (dark), instead of passing it out between the night and the section. */
.trust-c { display: flow-root; background: #14120e; color: var(--paper); padding: 0 0 calc(var(--section-y) * .5); }
.trust-c .kicker { color: var(--od-3); }
.hr-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 28px clamp(32px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(28px, 2.6vw, 36px);
  padding: clamp(28px, 4.4vw, 64px);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 110% at 100% 0%, rgba(255, 201, 49, .13), transparent 62%),
    rgba(255, 255, 255, .025);
}
.hr-line {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--paper);
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.hr-sun { color: var(--sun); }
.hr-steps { list-style: none; padding: 0; }
.hr-steps li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 17.5px;
  color: var(--od-1);
}
.hr-steps li:last-child { border-bottom: 0; }
.hr-ico { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(255, 201, 49, .12); color: var(--sun); }
.hr-ctas { grid-column: 1 / -1; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hr-link { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
/* on the night a cobalt ring hardly shows: sun, as in the hero and the jobs */
.hr-link:focus-visible, .hr-ctas .btn:focus-visible { outline-color: var(--sun); }

/* ---------- The night ends: the morning band ---------- */
.dawn {
  position: relative;
  z-index: 0;
  height: 160px;
  /* fades out at the foot, so the page's own paper (with its faint grain) takes over without an edge */
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  background:
    radial-gradient(60% 75% at 50% 100%, rgba(255, 216, 120, .62) 0%, rgba(255, 201, 49, .2) 42%, rgba(255, 201, 49, 0) 70%),
    linear-gradient(180deg,
      var(--ink) 0%,
      #16171B 16%,
      #22252E 30%,
      #3F404B 43%,
      #7D7069 56%,
      #C4A57E 69%,
      #EBD8B4 82%,
      #FAF1DE 92%,
      var(--paper) 100%);
}

/* ---------- Light sections: shared head ---------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px clamp(32px, 6vw, 96px);
  align-items: end;
}
.sec-head h2 { margin-top: 18px; }

/* ---------- 3. Three people: film stills with the phone on top ---------- */
/* the light arrives with content: the People heading starts inside the last warm band of the dawn */
.people-c { position: relative; z-index: 1; margin-top: -46px; padding: 0 0 calc(var(--section-y) * .55); }
.person { margin-top: clamp(48px, 6.5vw, 104px); }
.still {
  position: relative;
  aspect-ratio: 2.15 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #CDBE9F;
  box-shadow: 0 2px 6px rgba(20, 18, 14, .06), 0 44px 80px -50px rgba(20, 18, 14, .6);
}
.still picture { position: absolute; inset: 0; }
.still img { width: 100%; height: 100%; object-fit: cover; }
.p-denise .still img { object-position: 50% 30%; }
.p-rafael .still img { object-position: 50% 32%; }
.p-kate .still img { object-position: 50% 34%; }
/* The AI generated label: the only one on each card (David 10/1: none above the pictures). Extremely small, but readable on
   any photo: 10 px, near white on a dark fill that is .78 opaque, so the worst case (a white photo under it) is still above
   9:1 contrast. A tight pill; on a narrow phone the words wrap to two lines and the corners stay rounded. */
.still-label {
  position: absolute;
  left: 12px; top: 12px;
  max-width: calc(100% - 24px);
  padding: 3px 8px 4px;
  border-radius: 11px;
  background: rgba(20, 18, 14, .78);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  color: #FFFDF6;
}
.still-note {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(20px, 3vw, 44px);
  width: min(392px, 38%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-rafael .still-note, .p-kate .still-note { right: auto; left: clamp(20px, 3vw, 44px); }
.sn-cap {
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(20, 18, 14, .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.sn-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px 15px;
  border-radius: 22px;
  background: rgba(255, 253, 246, .84);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 24px 50px -24px rgba(20, 18, 14, .6), inset 0 1px 0 rgba(255, 255, 255, .8);
  color: var(--ink);
}
.sn-card .tile { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
.sn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.sn-top b { font-weight: 600; }
.sn-text { font-size: 15.5px; line-height: 1.42; }
.sn-en { font-size: 13px; line-height: 1.4; color: var(--stone); }

.person-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px clamp(32px, 5vw, 72px);
  padding: 30px 6px 0;
}
.person-name { font-size: clamp(36px, 3.6vw, 52px); line-height: 1; letter-spacing: -.035em; }
.pn-rest {
  display: block;
  margin-top: 12px;
  max-width: 24em;
  font-family: var(--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--stone);
  font-variation-settings: normal;
}
/* role on one line, the assistant on the next; the dots stay for screen readers only */
.pn-role, .pn-asst { display: block; }
.pn-asst { margin-top: 2px; color: var(--ink-2); font-weight: 500; }
.sr-sep {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.person-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 20px clamp(24px, 3vw, 44px); }
.person-lines > div { padding-top: 14px; border-top: 2px solid var(--ink); }
.person-lines dt { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.person-lines dd { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }

/* ---------- 4. Your language: the English arrives as subtitles ---------- */
.lang-c { padding: calc(var(--section-y) * .5) 0; }
.lang-panel {
  padding: clamp(28px, 5vw, 76px);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(255, 201, 49, .2), transparent 62%),
    var(--paper-2);
}
.lang-accent { color: var(--cobalt); }
/* reading order at every width: Rafael, Jensen with Mandar / Editar, the English email, then Jensen's reply.
   On computers the email sits to the right, between the two, with an arrow out and an arrow back. */
.lang-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  grid-template-areas: "a m" "b m";
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: 18px;
  align-items: center;
  margin-top: clamp(36px, 5vw, 64px);
}
.lang-talk-a { grid-area: a; }
.lang-talk-b { grid-area: b; }
/* the email sits on the seam between Jensen's two messages: out from Mandar, back into the reply */
.lang-mail-col { grid-area: 1 / 2 / 2 / 3; align-self: end; transform: translateY(50%); }
.lang-talk {
  position: relative;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(20, 18, 14, .06);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.lang-talk-b { padding-block: clamp(18px, 2.4vw, 28px); }
.lang-ex { position: absolute; top: 20px; right: 20px; }
.lang-back {
  position: absolute;
  z-index: 2;
  right: calc(clamp(40px, 5vw, 80px) / -2 - 20px);
  top: 50%;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  transform: translateY(-50%);
  box-shadow: 0 10px 22px -12px rgba(150, 110, 0, .8);
}
.lt-line + .lt-line { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.lt-who { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.lt-who b { font-weight: 600; }
.lt-who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 24%; }
.lt-who .tile { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
/* the AI generated label by Rafael (spec: the label sits by Rafael in the language section), small */
.lt-ailabel { margin: 4px 0 6px; font-size: 12px; line-height: 1.35; color: var(--stone); }
.lt-pt {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.24;
  letter-spacing: -.016em;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
}
.lt-you .lt-pt { color: var(--cobalt); }
/* subtitles break at the clause, like film subtitles (the phone only breaks are hidden on wider screens) */
.lt-sub { margin-top: 10px; line-height: 2; text-wrap: balance; }
@media (min-width: 768px) { .lt-sub .br-ph { display: none; } }
.lt-sub span {
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14.5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lt-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.lt-btns .b { min-width: 112px; }
.lt-sub-btns { flex-basis: 100%; margin-top: 0; }
.lt-sub-btns span { font-size: 12.5px; }
.lang-mail-col { position: relative; }
.lang-arrow {
  position: absolute;
  z-index: 2;
  left: calc(clamp(40px, 5vw, 80px) / -2 - 22px);
  top: calc(50% - 74px);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  transform: translateY(-50%);
  box-shadow: 0 10px 24px -10px rgba(31, 73, 255, .9);
}
.lang-mail {
  position: relative;
  padding: 18px 24px 26px;
  border: 1px solid rgba(20, 18, 14, .06);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
.lm-top { display: flex; align-items: center; gap: 10px; min-height: 30px; margin-bottom: 6px; }
.lm-dots {
  display: block;
  width: 44px; height: 10px;
  margin-right: auto;
  background:
    radial-gradient(circle at 5px 5px, #E8DFCB 4px, transparent 4.5px),
    radial-gradient(circle at 20px 5px, #E8DFCB 4px, transparent 4.5px),
    radial-gradient(circle at 35px 5px, #E8DFCB 4px, transparent 4.5px);
}
.lm-row { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--stone); }
.lm-body { margin-top: 18px; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.lm-sign { margin-top: 14px; font-weight: 600; }
/* The two buttons are the visitor's (nothing here moves before a tap). Mandar: a green "Sent" mark with a check on the email,
   and Jensen's next message slides in under his question. Editar: the email opens for editing, with a blinking cursor at the
   end of its body, and Jensen asks what to change. Tapping the other button switches between the two (page.js sets
   data-state on #langDemo and is-sent / is-editing on the email). */
.lm-stamp {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px 0 10px;
  border-radius: 999px;
  background: #13803B;   /* a deeper green than --success: white 14 px words on it stay above 4.5:1 */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(.7);
  transform-origin: 100% 50%;
  transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.lang-mail.is-sent .lm-stamp { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.lang-mail.is-sent { box-shadow: 0 0 0 3px rgba(19, 128, 59, .28), var(--shadow-card); }
/* the editing look: a cobalt ring on the card, the body in an outlined field, a cursor at the end of its words */
.lang-mail.is-editing { box-shadow: 0 0 0 3px rgba(31, 73, 255, .34), var(--shadow-card); }
.lang-mail.is-editing .lm-body { outline: 2px solid rgba(31, 73, 255, .4); outline-offset: 9px; border-radius: 3px; }
.lm-caret {
  display: none;
  width: 2px;
  height: 1.2em;
  margin-left: 3px;
  vertical-align: text-bottom;
  border-radius: 1px;
  background: var(--cobalt);
}
.lang-mail.is-editing .lm-caret { display: inline-block; }
.b-sec.is-active { box-shadow: inset 0 0 0 2px var(--ink); cursor: default; }
/* Jensen's next message: not there until a tap. Without scripts (html.no-js) the reply to Mandar simply shows. On computers
   its place is kept (nothing moves when it arrives); on phones it is not there at all, so no gap waits at the bottom. */
html.js .lang-stage:not([data-state]) .lang-talk-b { visibility: hidden; opacity: 0; }
.lang-talk-b .lt-line + .lt-line { margin-top: 0; padding-top: 0; border-top: 0; }
@keyframes lt-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lm-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.js .lang-stage[data-state] .lang-talk-b { animation: lt-rise .5s var(--ease) both; }
  .lang-talk-b .lt-line.is-new { animation: lt-rise .45s var(--ease) both; }
  .lang-mail.is-editing .lm-caret { animation: lm-blink 1.06s steps(1) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-stamp { transition: none; }
}
.lang-foot {
  margin-top: clamp(32px, 4vw, 52px);
  text-align: center;
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -.01em;
  color: var(--ink-2);
  font-variation-settings: "opsz" 36;
}

/* ---------- 5. Hear it for yourself ---------- */
.call-c { padding: calc(var(--section-y) * .5) 0; }
.call-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 7vw, 108px) clamp(22px, 5vw, 80px);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  text-align: center;
  background:
    radial-gradient(55% 70% at 50% 0%, rgba(255, 201, 49, .34), transparent 70%),
    var(--paper-2);
}
.call-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: clamp(100px, 11vw, 150px);
  width: 1100px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle, transparent 0 64px, rgba(20, 18, 14, .06) 64px 65.5px);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 64%);
  mask-image: radial-gradient(circle, #000 20%, transparent 64%);
}
.call-rings { position: relative; width: 92px; height: 92px; margin: 0 auto 30px; }
.call-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ink) url("/site/media/viddai-mark.svg") 50% 56% / 46% auto no-repeat;
  box-shadow: 0 0 0 8px rgba(255, 201, 49, .25), 0 20px 40px -18px rgba(20, 18, 14, .8);
}
.call-live {
  position: absolute;
  right: 2px; bottom: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--success);
  border: 3px solid var(--paper-2);
}
.call-stage h2 { max-width: 12em; margin: 18px auto 0; font-size: clamp(40px, 5.4vw, 78px); }
.call-accent { color: var(--cobalt); }
.call-stage .lede { margin: 22px auto 0; max-width: 32em; }
.call-stage .btn { margin-top: 34px; max-width: 100%; }
.call-stage .btn-sun { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 30px -14px rgba(150, 110, 0, .7); }
.call-stage .btn-sun .ico { background: var(--ink); color: var(--sun); }

/* ======================================================================
   6. The business door · Enzo runs six specialists
   ====================================================================== */
.biz-c { padding: calc(var(--section-y) * .5) 0; }
.org {
  position: relative;
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(32px, 4vw, 60px) clamp(18px, 3vw, 48px) clamp(28px, 3.5vw, 52px);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.org-lead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 18px 22px;
  border-radius: 26px;
  background: radial-gradient(90% 140% at 100% 0%, rgba(255, 201, 49, .22), transparent 60%), var(--ink);
  color: var(--paper);
  box-shadow: 0 30px 60px -34px rgba(20, 18, 14, .85);
}
.org-lead::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 2px; height: 40px;
  background: rgba(20, 18, 14, .16);
  transform: translateX(-50%);
}
.org-name { flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.org-name b { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; font-variation-settings: "opsz" 96; }
.org-role { font-size: 14px; color: var(--stone); }
.org-lead .org-name b { font-size: 28px; }
.org-lead .org-role { color: var(--od-2); font-size: 15px; }
.atile {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  font-variation-settings: "opsz" 96;
}
.atile i {
  position: absolute;
  right: -7px; bottom: -7px;
  width: 25px; height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(20, 18, 14, .18);
}
.atile i svg { width: 13px; height: 13px; }
.atile-cobalt { background: var(--cobalt); color: #fff; }
.atile-sun { background: var(--sun); color: var(--ink); }
.atile-lead { width: 66px; height: 66px; border-radius: 19px; font-size: 32px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--sun), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.duty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: #17733A;
  background: rgba(27, 158, 75, .1);
}
.duty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(27, 158, 75, .18); }
.duty-dark { color: #7FE0A3; background: rgba(127, 224, 163, .1); }
.org-team {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 80px;
  padding: 0;
  list-style: none;
}
.org-team::before {
  content: "";
  position: absolute;
  top: -40px;
  left: calc(100% / 12); right: calc(100% / 12);
  height: 2px;
  background: rgba(20, 18, 14, .16);
}
.org-team li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 10px 18px;
  border: 1px solid rgba(20, 18, 14, .06);
  border-radius: 22px;
  background: #fff;
  text-align: center;
  box-shadow: 0 1px 2px rgba(20, 18, 14, .04), 0 22px 48px -34px rgba(20, 18, 14, .45);
}
.org-team li::before {
  content: "";
  position: absolute;
  bottom: 100%; left: 50%;
  width: 2px; height: 41px;
  background: rgba(20, 18, 14, .16);
  transform: translateX(-50%);
}
.org-team .org-name { align-items: center; }
.biz-cta { display: flex; justify-content: center; margin-top: 32px; }
.btn .ico-ink { background: var(--ink); color: #fff; }

/* ======================================================================
   7. How it works · a timeline, then "it learns you"
   ====================================================================== */
.how-c { padding: calc(var(--section-y) * .6) 0 calc(var(--section-y) * .5); }
.how-head h2 { margin-top: 18px; max-width: 13em; }
.how-accent { color: var(--cobalt); }
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(44px, 5vw, 76px);
  padding: 0;
  list-style: none;
}
.steps::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 13px;
  height: 2px;
  background: linear-gradient(90deg, var(--sun) 0%, var(--sun) 66%, var(--cobalt) 100%);
}
.step { position: relative; padding-top: 54px; }
.step::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 24px; height: 24px;
  border: 2.5px solid var(--sun);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 6px var(--paper);
}
.step-4::before { border-color: var(--cobalt); background: var(--cobalt); }
.st-n { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.step h3 { margin-top: 10px; font-size: clamp(23px, 2.1vw, 30px); }
.step p:last-child { margin-top: 10px; max-width: 22em; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }

.learns {
  margin-top: clamp(44px, 5vw, 72px);
  padding: clamp(24px, 3.6vw, 52px);
  border-radius: var(--radius-lg);
  color: var(--paper);
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(31, 73, 255, .3), transparent 62%),
    radial-gradient(50% 80% at 0% 100%, rgba(255, 201, 49, .12), transparent 62%),
    var(--ink);
}
.learns-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.learns-cap { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.025em; font-variation-settings: "opsz" 96; }
.learns-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.lc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--hair);
  border-radius: 24px;
  background: rgba(255, 255, 255, .04);
}
.lc-later { border-color: rgba(255, 201, 49, .3); background: rgba(255, 201, 49, .06); }
.lc-when { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--od-3); }
.lc-later .lc-when { color: var(--sun); }
.learns .bub { max-width: 90%; font-size: 15px; }
.learns .bub.ai { background: var(--bub-dark); color: var(--od-1); }
.lc-ask .b { margin-top: 12px; }
.learns :focus-visible { outline-color: var(--sun); }
.how-cta { display: flex; justify-content: center; margin-top: 36px; }

/* ======================================================================
   8. David
   ====================================================================== */
.david-c { padding: calc(var(--section-y) * .6) 0 calc(var(--section-y) * .45); }
/* David's photo is the tall one (4:5, him holding his phone) on every screen (David 10/1; there is no wide one any more).
   On computers it is the narrower column, about 500 px wide and 630 tall at 1440, with the words beside it, centred on
   it; below 981 px the photo stacks above the words (the 980 and 767 blocks), as in draft C. */
.dv-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(48px, 8vw, 128px);
  align-items: center;
}
/* The figure is a grid: the picture in the first row, the photo note (the figure's caption) in the row under it. The Neo
   card sits in the picture's cell: an absolutely placed grid child takes its grid area as its box, so the card is placed
   from the picture's corner and the note under the picture never moves it. (All four lines are named: an "auto" end line
   of an absolutely placed child is the figure's own edge, which would take the note's row in.) */
.dv-photo { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.dv-photo > img { grid-area: 1 / 1; }
.dv-photo > .neo-card { grid-area: 1 / 1 / 2 / 2; }
.dv-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(20, 18, 14, .06), 0 44px 80px -48px rgba(20, 18, 14, .6);
}
/* as wide as its words (justify-self), so it sits at the picture's lower left and its box stays clear of the card */
/* The card hangs off the picture's lower right corner, over his jacket (his hand and phone are at the left and stay in
   view), so it overlaps the photo's corner and the note sits at the left, clear of it. Its width is its words' 340 px
   but never reaches nearer than 150 px to the picture's left edge, which is where the note ends (13 px words, 124 px
   wide): that holds on a narrow computer too. Phones: the 767 block. */
.neo-card {
  --over: clamp(20px, 3.6vw, 56px);   /* how far it hangs off the picture's right edge */
  position: absolute;
  right: calc(var(--over) * -1);
  bottom: -56px;
  width: min(340px, calc(100% + var(--over) - 150px));
  padding: 16px 18px 18px;
  border: 1px solid rgba(20, 18, 14, .06);
  border-radius: 22px;
  background: rgba(255, 253, 246, .9);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 30px 60px -30px rgba(20, 18, 14, .65), inset 0 1px 0 #fff;
}
.neo-top { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.neo-top b { font-weight: 600; }
.neo-top .tile { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.neo-top .ex-tag { margin-left: auto; }
.neo-text { margin-top: 10px; font-size: 15.5px; line-height: 1.45; }
.dv-copy h2 { margin-top: 18px; }
.dv-body { margin-top: 24px; max-width: 30em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--ink-2); }
.dv-neo { margin: 30px 0 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--sun); }
.dv-neo p {
  max-width: 26em;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.34;
  letter-spacing: -.014em;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
}

/* ======================================================================
   9. Questions (more.css does the accordion)
   ====================================================================== */
#faq { padding-block: calc(var(--section-y) * .5) calc(var(--section-y) * .45); }
#faq .faq-title { font-size: clamp(44px, 5.4vw, 80px); letter-spacing: -.04em; }
#faq .faq-a a { color: var(--cobalt); text-underline-offset: 3px; }

/* ---------- The day ends: the dusk band, then night again for the final call ---------- */
.dusk {
  height: 150px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  background:
    radial-gradient(70% 40% at 50% 36%, rgba(255, 196, 90, .26) 0%, rgba(255, 196, 90, 0) 72%),
    linear-gradient(180deg,
      var(--paper) 0%,
      #FAF1DE 8%,
      #F3E4C6 16%,
      #E3C9A0 28%,
      #A88C73 44%,
      #5C5460 60%,
      #2A2B34 76%,
      #16161A 88%,
      var(--night) 100%);
}

/* ======================================================================
   10. Final call · night again
   ====================================================================== */
#final.fin {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(120px, 15vw, 220px) 0 clamp(100px, 11vw, 170px);
  background: var(--night);
  color: var(--paper);
}
.fin-media { position: absolute; inset: 0; z-index: -1; }
.fin-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; opacity: .66; }
.fin-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 11, 8, .96) 0%, rgba(13, 11, 8, .84) 36%, rgba(13, 11, 8, .25) 68%, rgba(13, 11, 8, .35) 100%),
    linear-gradient(180deg, var(--night) 0%, rgba(13, 11, 8, 0) 26%, rgba(13, 11, 8, 0) 72%, var(--night) 100%);
}
/* the headline keeps clear of Denise: it breaks before it reaches her */
#final h2 { max-width: 8.6em; font-size: clamp(44px, 6.4vw, 98px); line-height: .98; }
.fin-l1, .fin-l2 { display: block; text-wrap: balance; }
.fin-ailabel {
  position: absolute;
  right: var(--gutter);
  bottom: 22px;
  max-width: calc(100% - var(--gutter) * 2);
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
  color: var(--od-3);
}
.fin-l2 { color: var(--sun); }
.fin-sub { margin-top: 26px; max-width: 28em; font-size: var(--fs-lede); color: var(--od-2); }
.fin-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 38px; }
.fin-note { max-width: 20em; font-size: 15px; line-height: 1.5; color: var(--od-3); }
.fin-alt {
  display: inline-block;
  margin-top: 32px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 201, 49, .75);
  text-underline-offset: 5px;
  transition: color .2s;
}
.fin-alt svg { display: inline-block; margin-left: 6px; vertical-align: -3px; transition: transform .3s var(--ease); }
.fin-alt:hover { color: var(--sun); }
.fin-alt:hover svg { transform: translateX(3px); }

.foot.foot-dark { margin-top: 0; border-top: 1px solid var(--hair); background: var(--night); color: var(--od-3); }
.foot-dark nav a { color: var(--od-2); }
.foot-dark nav a:hover { color: var(--paper); }
.foot-dark :focus-visible { outline-color: var(--sun); }

/* ---------- Wide tablets (draft C: the business door's team grid) ---------- */
@media (max-width: 1180px) {
  .org-team { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .org-team::before, .org-team li::before, .org-lead::after { display: none; }
  .org-team { margin-top: 28px; }
}

/* ---------- Computers ---------- */
@media (min-width: 981px) {
  /* static list: words left, the done screen right */
  /* six rows of words, then a flexible row that takes the rest of the picture's height, so the
     words stay together instead of spreading out beside the tall picture */
  html:not(.jobs-ready) .job { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: repeat(6, auto) 1fr; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  html:not(.jobs-ready) .job > * { grid-column: 1; }
  html:not(.jobs-ready) .job-shot { grid-column: 2; grid-row: 1 / -1; margin: 0; }
}

/* ---------- Tablets and phones ---------- */
@media (max-width: 980px) {
  .hero-c { display: block; min-height: 0; }
  .hc-media { inset: 0 0 auto 0; height: min(62svh, 620px); }
  .hc-media > img, .hc-media > video { object-position: 74% 50%; }
  .hc-media::after {
    background:
      linear-gradient(180deg, rgba(9, 8, 6, .45) 0%, rgba(9, 8, 6, 0) 18%, rgba(9, 8, 6, .08) 40%, rgba(20, 18, 14, .78) 74%, var(--ink) 100%),
      linear-gradient(90deg, rgba(9, 8, 6, .5) 0%, rgba(9, 8, 6, 0) 64%);
  }
  .hc-pause { top: auto; bottom: 12px; }
  .hc-grid { display: block; padding: min(34svh, 290px) var(--gutter) 48px; }
  .hc-copy { max-width: 620px; }
  /* the hero phone: centred under the copy; the slot, the still and See it ask share one width */
  .hero-c { --hero-w: min(62vw, 300px); }
  .hero-c .hero-slot { width: var(--hero-w); margin: 48px auto 0; }
  .hero-c .hero-still { margin-inline: auto; }

  .jc-head { grid-template-columns: 1fr; }
  .hr-panel { grid-template-columns: 1fr; }
  /* No backdrop blur on phones (a blur re-samples what is behind it on every scrolled frame): the pill is solid, the
     colour its .88 fill over a blur of the night made at rest (measured), so it looks as it did. */
  .jc-pills { --pill-fill: rgb(27, 24, 20); background: var(--pill-fill); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.jobs-ready .jc-pills a { height: 40px; padding: 0 18px; font-size: 14.5px; }
  /* the glow sits behind the phone, centred */
  #stage-glow { --glow-shape: 60% 34% at 50% 46%; }

  /* the light sections */
  .sec-head { grid-template-columns: 1fr; }
  .still { aspect-ratio: 16 / 10; }
  .still-note { width: min(380px, 56%); }
  .person-copy { grid-template-columns: 1fr; }

  /* the chat, the email and Jensen's reply stay close together (44 px between them), so a tap on Mandar or Editar shows its
     reaction without a long scroll; the reply is not there at all until the visitor's tap (page.js scrolls it into view) */
  .lang-stage { grid-template-columns: 1fr; grid-template-areas: "a" "m" "b"; row-gap: 44px; }
  .lang-mail-col { grid-area: m; align-self: auto; transform: none; }
  .lang-arrow { left: 50%; top: -40px; width: 36px; height: 36px; transform: translateX(-50%) rotate(90deg); }
  .lang-back { right: auto; left: 50%; top: -39px; width: 34px; height: 34px; transform: translateX(-50%) rotate(-90deg); }
  html.js .lang-stage:not([data-state]) .lang-talk-b { display: none; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps::before { display: none; }
  .step { padding-top: 0; padding-left: 40px; }
  .step::before { top: 0; }

  .dv-grid { grid-template-columns: 1fr; gap: 72px; }
  /* the tall photo on tablets, the width draft C gave it (520 px, so about 650 tall); phones are narrower anyway */
  .dv-photo { width: min(100%, 520px); }
}
@media (max-width: 767px) {
  .nav-logo img { height: 28px; }
  .nav-cta { --h: 44px; }
  .nav-menu { height: 44px; }
  .hc-media { height: min(56svh, 480px); }
  .hc-grid { padding-top: min(27svh, 220px); padding-bottom: 40px; }
  .hero-c .kicker { font-size: 10.5px; letter-spacing: .12em; }
  .hero-c h1 { margin-top: 16px; font-size: clamp(34px, 10.2vw, 46px); line-height: 1.01; }
  .hero-c .lede { margin-top: 18px; font-size: 16.5px; }
  .hc-ctas { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; }
  .hc-ctas .btn { width: 100%; }
  .hc-note { font-size: 14px; }
  .jobs-c { padding: 48px 0 40px; }
  .job-title { font-size: 28px; }
  .jc-list { --jt-size: 46px; }
  .hr-line { font-size: 34px; }
  .hr-steps li { font-size: 16.5px; }
  /* draft C's call button is full width on phones; the link wraps under it */
  .hr-ctas, .hr-ctas .btn { width: 100%; }
  .dawn { height: 110px; }
  .people-c { margin-top: -30px; }

  .person { margin-top: 56px; }
  .still { aspect-ratio: 4 / 5; border-radius: 26px; }
  .p-denise .still img, .p-rafael .still img, .p-kate .still img { object-position: 50% 30%; }
  .still-note, .p-rafael .still-note, .p-kate .still-note { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .sn-card { padding: 12px 14px 13px; border-radius: 20px; }
  .sn-card .tile { width: 34px; height: 34px; font-size: 16px; }
  .sn-text { font-size: 15px; }
  .person-copy { padding: 22px 2px 0; gap: 18px; }
  .person-name { font-size: 38px; }
  .person-lines { grid-template-columns: 1fr; gap: 16px; }
  .person-lines dd { font-size: 16.5px; }

  .lang-panel { padding: 26px 16px 30px; border-radius: 28px; margin-inline: calc(var(--gutter) * -.5); }
  .lang-talk { padding: 20px 16px 22px; border-radius: 24px; }
  .lang-ex { top: 16px; right: 14px; }
  .lt-pt { font-size: 19.5px; }
  .lt-sub { line-height: 1.85; }
  .lt-sub span { padding: 3px 8px; font-size: 13.5px; }
  .lang-mail { padding: 16px 18px 22px; }
  .lang-foot { font-size: 17px; }

  .call-stage { padding: 48px 20px 44px; border-radius: 28px; }
  .call-stage h2 { font-size: 40px; }
  .call-stage .btn { width: 100%; }

  .org { padding: 22px 12px 18px; border-radius: 28px; }
  .org-lead { padding: 14px 16px; gap: 14px; border-radius: 22px; }
  .atile-lead { width: 56px; height: 56px; font-size: 28px; }
  .org-lead .org-name b { font-size: 24px; }
  /* the six specialists as one compact list under Enzo */
  .org-team { grid-template-columns: 1fr; gap: 0; margin-top: 12px; padding: 4px 14px; border: 1px solid rgba(20, 18, 14, .06); border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(20, 18, 14, .04), 0 22px 48px -34px rgba(20, 18, 14, .45); }
  .org-team li { flex-direction: row; align-items: center; gap: 16px; padding: 12px 2px; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; }
  .org-team li + li { border-top: 1px solid var(--line); }
  .org-team .atile { width: 46px; height: 46px; border-radius: 14px; font-size: 21px; }
  .org-team .atile i { width: 21px; height: 21px; right: -6px; bottom: -6px; }
  .org-team .atile i svg { width: 11px; height: 11px; }
  .org-team .org-name { align-items: flex-start; }
  .org-name b { font-size: 17.5px; }
  .org-role { font-size: 13.5px; }
  .org-team .duty { width: 26px; padding: 0; justify-content: center; background: none; }
  .org-team .duty-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .biz-cta .btn { width: 100%; }

  .steps { grid-template-columns: 1fr; row-gap: 0; margin-top: 36px; }
  .steps::before { display: block; left: 11px; right: auto; top: 6px; bottom: 30px; width: 2px; height: auto; background: linear-gradient(180deg, var(--sun), var(--sun) 70%, var(--cobalt)); }
  .step { padding: 0 0 30px 48px; }
  .step h3 { margin-top: 6px; font-size: 24px; }
  .step p:last-child { font-size: 16px; }
  .learns { padding: 22px 14px 16px; border-radius: 28px; }
  .learns-cols { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .lc { padding: 16px 14px; border-radius: 20px; }
  .learns .bub { font-size: 14.5px; }
  .how-cta .btn { width: 100%; }

  .dv-grid { gap: 40px; }
  /* the same tall photo, with rounder corners and the card inside it at the bottom */
  .dv-photo img { border-radius: 26px; }
  .neo-card { right: 10px; left: 10px; bottom: 10px; width: auto; }
  .dv-neo { padding-left: 18px; }

  .dusk { height: 100px; }

  #final.fin { padding: 96px 0 84px; }
  .fin-media img { object-position: 76% 50%; opacity: .5; }
  .fin-media::after { background: linear-gradient(180deg, var(--night) 0%, rgba(13, 11, 8, .55) 30%, rgba(13, 11, 8, .82) 60%, var(--night) 100%); }
  #final h2 { font-size: clamp(40px, 11.4vw, 52px); }
  .fin-cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .fin-cta .btn { width: 100%; }

  /* 44px tap targets in the footer (draft C; the header's are above) */
  .foot nav { row-gap: 0; column-gap: 18px; }
  .foot nav a { display: inline-block; min-height: 44px; padding-block: 11px; }
}
@media (max-width: 360px) {
  .hero-c h1 { font-size: 32px; }
  .org-team { grid-template-columns: 1fr; }
}