/* dontbemichael.com, design system v2 (Studio).
   Spec: agentvivekkumar/dontbemichael, branding/DESIGN.md. The --dbm-* tokens are the
   light :root block of branding/colors/colors.css; change them there first (spec section 14).
   Any edit here bumps the ?v= query in public/index.html, download.html and 404.html. */
:root {
  --dbm-bg: #F7F7FB;
  --dbm-floor: #E9E7F7;
  --dbm-card: #FFFFFF;
  --dbm-card-2: #FAFAFD;
  --dbm-rail: #F8F7FC;
  --dbm-chrome: #F1F0F8;
  --dbm-ink: #1E1B2E;
  --dbm-ink-2: #4A4660;
  --dbm-ink-3: #6C6884;
  --dbm-ink-4: #B4B1C6;
  --dbm-line: #E8E6F2;
  --dbm-line-2: #DAD7EA;
  --dbm-line-input: #8F8AA6;
  --dbm-neutral-soft: #F0EFF5;
  --dbm-coral: #FF5A5F;  --dbm-coral-soft: #FFECEC;  --dbm-coral-text: #C8303A;
  --dbm-green: #1FB872;  --dbm-green-soft: #E3F7EC;  --dbm-green-text: #157D4D;
  --dbm-blue: #4C6FFF;  --dbm-blue-soft: #E8EDFF;  --dbm-blue-text: #3553E8;
  --dbm-violet: #8B5CF6;  --dbm-violet-soft: #F0EAFE;  --dbm-violet-text: #7043E6;
  --dbm-amber: #F2A93B;  --dbm-amber-soft: #FFF4DF;  --dbm-amber-text: #8F5C07;
  --dbm-indigo: #6C5CE7;  --dbm-indigo-soft: #EEEBFD;  --dbm-indigo-text: #4338CA;
  --dbm-coral-strong: #D4363D;
  --dbm-on-coral: #FFFFFF;
  --dbm-act-request: #5B55C9;
  --dbm-dept-front-desk-l: #FFE4EC;  --dbm-dept-front-desk-m: #F7C3D2;  --dbm-dept-front-desk-d: #EBA6BA;  --dbm-dept-front-desk-acc: #E25A83;
  --dbm-dept-support-l: #DDEEFF;  --dbm-dept-support-m: #B4D5F8;  --dbm-dept-support-d: #93BEEE;  --dbm-dept-support-acc: #3D8BE6;
  --dbm-dept-sales-l: #FFF3CC;  --dbm-dept-sales-m: #F8DF95;  --dbm-dept-sales-d: #EDCB6E;  --dbm-dept-sales-acc: #D29B0B;
  --dbm-dept-finance-l: #D8F5E8;  --dbm-dept-finance-m: #AEE6CD;  --dbm-dept-finance-d: #8DD5B5;  --dbm-dept-finance-acc: #1FA872;
  --dbm-dept-marketing-l: #FFE6D8;  --dbm-dept-marketing-m: #F9C8AE;  --dbm-dept-marketing-d: #EEB090;  --dbm-dept-marketing-acc: #E57B45;
  --dbm-dept-people-l: #EFE6FC;  --dbm-dept-people-m: #D6C5F4;  --dbm-dept-people-d: #C1AAEA;  --dbm-dept-people-acc: #8A63E0;
  --dbm-dept-it-l: #E0E6F7;  --dbm-dept-it-m: #BAC5E8;  --dbm-dept-it-d: #9DABDA;  --dbm-dept-it-acc: #5468C4;
  --dbm-dept-operations-l: #D5F3F4;  --dbm-dept-operations-m: #A9E3E5;  --dbm-dept-operations-d: #86D2D5;  --dbm-dept-operations-acc: #169BA3;
  --dbm-dept-team-l: #EDEBF6;  --dbm-dept-team-m: #D8D5EA;  --dbm-dept-team-d: #C4C0DE;  --dbm-dept-team-acc: #6C6884;
  --dbm-shadow-sm: 0 1px 2px rgba(30,27,46,.05);
  --dbm-shadow-md: 0 1px 2px rgba(30,27,46,.05), 0 6px 18px rgba(62,52,140,.08);
  --dbm-shadow-lg: 0 1px 2px rgba(30,27,46,.05), 0 10px 30px rgba(62,52,140,.10);
  --dbm-shadow-hub: 0 1px 2px rgba(30,27,46,.05), 0 10px 26px rgba(92,76,220,.14);
  --dbm-shadow-coral: 0 4px 14px rgba(212,54,61,.30);
  --dbm-r-xs: 3px;
  --dbm-r-sm: 6px;
  --dbm-r-md: 9px;
  --dbm-r-lg: 12px;
  --dbm-r-xl: 14px;
  --dbm-r-2xl: 16px;
  --dbm-r-pill: 999px;
  --dbm-font-ui: 'Sora', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', 'SF Arabic', 'Noto Sans Arabic', sans-serif;
  --dbm-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* page only */
  --ease: cubic-bezier(.2,.7,.2,1);
  --bump: cubic-bezier(.3,1.6,.5,1);
  --gutter: 24px;
  --section: 96px;
  /* site only, not in the kit (spec 14): the primary button's hover, a step up from ink */
  --btn-primary-hover: #2E2A44;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--dbm-bg); color: var(--dbm-ink);
  font-family: var(--dbm-font-ui); font-size: 17px; line-height: 27px; letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
.mono { font-family: var(--dbm-font-mono); letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--dbm-indigo); outline-offset: 3px; border-radius: var(--dbm-r-xs); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--dbm-ink); color: #fff; padding: 12px 16px; border-radius: var(--dbm-r-md); font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { max-width: calc(1200px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-family: var(--dbm-font-mono); font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dbm-ink-3);
}
.h2 { font-size: 40px; line-height: 46px; letter-spacing: -0.03em; text-wrap: balance; }
.h3 { font-size: 22px; line-height: 30px; letter-spacing: -0.03em; }
.lead { font-size: 20px; line-height: 30px; letter-spacing: -0.03em; color: var(--dbm-ink-2); text-wrap: balance; }
.small { font-size: 14px; line-height: 20px; letter-spacing: -0.01em; }
.section { padding-top: var(--section); }
.head { max-width: 720px; }
.head .eyebrow { margin-bottom: 12px; }
.head .lead { margin-top: 12px; }

/* icons */
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-20 { width: 20px; height: 20px; stroke-width: 1.75; }

/* buttons, web scale (9.2) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--dbm-r-md);
  font: 600 14px/20px var(--dbm-font-ui); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer; transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.btn-primary { background: var(--dbm-ink); color: #fff; }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-secondary { background: var(--dbm-card); color: var(--dbm-ink); box-shadow: inset 0 0 0 1px var(--dbm-line-2); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--dbm-line-input); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* nav (9.1) */
.nav {
  position: sticky; top: 0; z-index: 40; height: 72px;
  background: rgba(247,247,251,.85); border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--dbm-line); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
.lockup { display: block; flex: none; }
.lockup img { height: 32px; width: auto; }
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: 24px; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.nav-links a { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--dbm-ink-2); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--dbm-ink); }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary {
  list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--dbm-r-md); background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line-2); color: var(--dbm-ink);
}
.menu summary::-webkit-details-marker { display: none; }
.menu-sheet {
  position: absolute; right: 0; top: 52px; width: min(300px, calc(100vw + -32px));
  background: var(--dbm-card); border-radius: var(--dbm-r-xl); box-shadow: var(--dbm-shadow-lg), 0 0 0 1px var(--dbm-line);
  padding: 8px; display: grid; gap: 2px;
}
.menu-sheet a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--dbm-r-md); text-decoration: none; font-size: 16px; font-weight: 500; color: var(--dbm-ink); }
.menu-sheet a:not(.btn):hover { background: var(--dbm-neutral-soft); }
.menu-sheet .btn { margin-top: 6px; }

/* hero (9.3) */
.hero { padding-top: 64px; text-align: center; }
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 {
  font-size: 64px; line-height: 68px; letter-spacing: -0.03em; margin: 0 auto; max-width: 1000px;
}
.hero h1 span { display: block; }
.hero .lead { margin: 24px auto 0; max-width: 780px; }
.hero .btns { justify-content: center; margin-top: 32px; }
.hero-meta { text-wrap: balance; margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--dbm-ink-3); letter-spacing: -0.01em; }

.studio { position: relative; margin-top: 32px; }
/* The live studio (assets/studio-lab.html) runs only when the page script turns it on
   (.live on <html>): it skips it under reduced motion (spec 11.3), and without JS the
   still shows instead. The lab renders at a fixed 1200 x 900 and is scaled to fit. */
.studio-view { display: none; position: relative; overflow: hidden; aspect-ratio: 1200 / 680; }
.studio-live { display: block; border: 0; background: var(--dbm-bg);
  position: absolute; left: 0; top: 0; width: 1200px; height: 900px; transform-origin: 0 0;
  transform: translate(calc(var(--ox, 0) * var(--s, 1) * -1px), calc(var(--oy, 0) * var(--s, 1) * -1px)) scale(var(--s, 1));
}
/* A picture of the office, not a control: no clicks or keys reach the lab (its H key opens dev controls). */
.studio-live { pointer-events: none; }
.studio-still { position: relative; overflow: hidden; aspect-ratio: 950 / 640; max-width: 950px; margin: 0 auto; }
/* the stage of the reference home screen, without the top bar, the Needs you column and the bottom bar */
.studio-still img { position: absolute; max-width: none; height: auto; width: 151.58%; left: -6.32%; top: -8.91%; }
/* As a poster in the live view, frame what the lab shows: x 0 to 1040 and y 57 to 646 of the
   1440 x 900 screenshot on a 1200 / 680 box, and x 40 to 1000, y 62 to 642 on the phone's 960 / 580. */
.live .studio-view .studio-still img { width: 138.46%; left: 0; top: -9.67%; }
@media (max-width: 640px) { .live .studio-view .studio-still img { width: 150%; left: -4.17%; top: -10.69%; } }
.live .studio-view { display: block; }
.live .studio-still { display: none; }
/* the poster: the still inside the live view until the lab's load event, then it fades out */
.live .studio-view .studio-still { display: block; position: absolute; inset: 0; z-index: 1; max-width: none; aspect-ratio: auto; margin: 0; background: var(--dbm-bg); transition: opacity 320ms var(--ease), visibility 0s linear 320ms; }
.studio-view.is-ready .studio-still { opacity: 0; visibility: hidden; }
.studio-cap { margin-top: 8px; font-size: 14px; line-height: 20px; letter-spacing: -0.01em; color: var(--dbm-ink-3); text-align: center; text-wrap: balance; }
.studio-cap .live-dot { display: none; margin-right: 8px; vertical-align: 1px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dbm-green); box-shadow: 0 0 0 3px var(--dbm-green-soft); flex: none; animation: pulse 1.6s ease-in-out infinite; }
.studio-cap .live-label, .live .studio-cap .still-label { display: none; }
.live .studio-cap .live-dot { display: inline-block; }
.live .studio-cap .live-label { display: inline; }

/* story */
.story .head { margin-bottom: 48px; }
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--section); }
.beat-text { max-width: 460px; }
.beat-num { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.beat-num b {
  font: 600 12px/16px var(--dbm-font-mono); letter-spacing: 0; color: var(--dbm-ink);
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line-2);
}
.beat-num .mono { font-size: 12px; line-height: 16px; color: var(--dbm-ink-3); }
.beat-text p { margin-top: 12px; color: var(--dbm-ink-2); }
.beat-vis { margin-top: 32px; }

/* the visual panel: a floor tinted ground, like the app's canvases */
.vis {
  position: relative; border-radius: var(--dbm-r-2xl);
  background: color-mix(in srgb, var(--dbm-floor) 55%, var(--dbm-bg));
  display: grid; place-items: center; padding: 40px 24px; overflow: hidden;
}
.scene { width: 100%; max-width: 372px; zoom: 1.2; font-size: 12px; line-height: 16.5px; letter-spacing: 0; color: var(--dbm-ink); }
/* The Sending cards (spec 9.11) are the app at app scale too: same zoom and type reset as .scene,
   declared here so the .scene media queries below also set their zoom. */
.send-cards { max-width: 372px; zoom: 1.2; font-size: 12px; line-height: 16.5px; letter-spacing: 0; color: var(--dbm-ink); }

.story-stage { display: none; }
.stage-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 6px; }
.stage-dots i { width: 18px; height: 3px; border-radius: var(--dbm-r-pill); background: var(--dbm-line-2); transition: background-color 200ms var(--ease); }
.stage-dots i.on { background: var(--dbm-ink); }

@media (min-width: 980px) {
  .beat { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
  .beat-vis { margin-top: 0; }
  .vis { min-height: 520px; }
  .scene { zoom: 1.4; }
  .send-cards { zoom: 1.4; }

  .has-stage .story-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
  .has-stage .beats { gap: 0; }
  .has-stage .beat { display: flex; align-items: center; min-height: 78vh; }
  .has-stage .beat:first-child { min-height: 64vh; align-items: flex-start; padding-top: 12vh; }
  .has-stage .beat:last-child { min-height: 66vh; }
  .has-stage .beat .beat-vis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the beats you are not reading step down a text color, never below 4.5:1 (spec 12) */
  .has-stage .beat-text .h3, .has-stage .beat-text p { transition: color 320ms var(--ease); }
  .has-stage .beat:not(.is-active) .beat-text .h3 { color: var(--dbm-ink-2); }
  .has-stage .beat:not(.is-active) .beat-text p { color: var(--dbm-ink-3); }
  .has-stage .story-stage {
    --stage-h: min(600px, calc(100vh + -150px));
    display: block; position: sticky; align-self: start;
    top: calc((100vh + var(--stage-h) * -1) / 2 + 30px); height: var(--stage-h);
  }
  .has-stage .story-stage .vis { position: absolute; inset: 0; min-height: 0; padding-bottom: 48px; }
  .stage-panel { position: absolute; inset: 0; border-radius: var(--dbm-r-2xl); background: color-mix(in srgb, var(--dbm-floor) 55%, var(--dbm-bg)); }
  .story-stage .vis { background: transparent; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms; }
  .story-stage .vis.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s; }
}
@media (min-width: 980px) and (max-height: 760px) { .scene, .send-cards { zoom: 1.25; } }
@media (min-width: 481px) and (max-width: 979px) { .scene, .send-cards { zoom: 1.3; } }

/* app components, drawn at app scale (DESIGN.md 7.x) */
.card {
  background: var(--dbm-card); border-radius: var(--dbm-r-xl);
  box-shadow: var(--dbm-shadow-md), 0 0 0 1px var(--dbm-line);
}
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-ui { font-size: 13px; line-height: 18px; letter-spacing: -0.01em; }
.t-meta { font-size: 11px; line-height: 15px; }
.ink-3 { color: var(--dbm-ink-3); }

/* avatars */
.av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 11px/1 var(--dbm-font-ui); letter-spacing: 0; }
.av-20 { width: 20px; height: 20px; font-size: 10px; }
.av-16 { width: 16px; height: 16px; font-size: 9px; }
.d-support { background: var(--dbm-dept-support-l); color: var(--dbm-dept-support-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-support-m); }
.d-front { background: var(--dbm-dept-front-desk-l); color: var(--dbm-dept-front-desk-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-front-desk-m); }
.d-sales { background: var(--dbm-dept-sales-l); color: var(--dbm-dept-sales-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-sales-m); }
.d-finance { background: var(--dbm-dept-finance-l); color: var(--dbm-dept-finance-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-finance-m); }
.d-michael { background: var(--dbm-ink); color: #fff; }

/* status pill (7.13) */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--dbm-r-pill); font: 600 10px/13px var(--dbm-font-ui); letter-spacing: 0; white-space: nowrap; flex: none; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.p-working { color: var(--dbm-blue-text); background: var(--dbm-blue-soft); }
.p-idle { color: var(--dbm-ink-3); background: var(--dbm-neutral-soft); }
.p-done { color: var(--dbm-green-text); background: var(--dbm-green-soft); }
.p-question { color: var(--dbm-violet-text); background: var(--dbm-violet-soft); }
.p-question::before { display: none; }

/* pod label card (7.14) */
.pod { position: relative; padding: 12px 10px 0 9px; background: rgba(255,255,255,.96); }
.pod-tabs { position: absolute; top: -9px; left: 9px; display: flex; align-items: center; gap: 4px; }
.dept-tab { background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line-2); border-radius: var(--dbm-r-sm); padding: 1px 6px; font: 600 10px/13px var(--dbm-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--dbm-ink-2); }
.sticky { width: 17px; height: 17px; display: grid; place-items: center; background: #FFE58A; color: #6B5200; font: 600 10px/1 var(--dbm-font-mono); transform: rotate(-5deg); border-radius: 2px 2px 6px 2px; box-shadow: 0 1px 2px rgba(143,92,7,.18); }
.pod-person { padding-bottom: 10px; }
.pod-person + .pod-person { border-top: 1px dashed var(--dbm-line-2); padding-top: 10px; }
.pod-name { font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: -0.01em; }
.pod-role { font-size: 10px; line-height: 13px; color: var(--dbm-ink-3); }
.pod-cap { margin-top: 7px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-2); }
.pod-bar { height: 3px; border-radius: var(--dbm-r-pill); background: var(--dbm-line); margin-top: 8px; overflow: hidden; }
.pod-bar i { display: block; height: 100%; width: 42%; background: var(--dbm-blue); border-radius: var(--dbm-r-pill); }
.pod-person.is-idle .pod-name, .pod-person.is-idle .pod-cap { color: var(--dbm-ink-3); }

/* mailbox tag (7.18), as the app draws it beside each post */
.mtag { display: inline-flex; align-items: baseline; gap: 6px; height: 24px; padding: 4px 9px 0; background: var(--dbm-card); border-radius: var(--dbm-r-md); box-shadow: var(--dbm-shadow-md), 0 0 0 1px var(--dbm-line); border-top: 2.5px solid var(--acc); white-space: nowrap; }
.mtag b { font: 600 11px/15px var(--dbm-font-mono); letter-spacing: 0; color: var(--dbm-ink); }
.mtag span { font-size: 10px; line-height: 13px; color: var(--dbm-ink-3); }

/* quiet chip (7.14a) */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: var(--dbm-r-pill); background: rgba(255,255,255,.92); box-shadow: var(--dbm-shadow-sm), 0 0 0 1px var(--dbm-line); font-size: 11px; line-height: 15px; font-weight: 600; color: var(--dbm-ink-2); white-space: nowrap; flex: none; }

/* person chip in department colors (Needs you card) */
.pchip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 3px; border-radius: var(--dbm-r-pill); font-size: 11px; line-height: 15px; font-weight: 600; }
.pchip.d-support { color: var(--dbm-ink); }
.pchip.d-support .av { background: #fff; color: var(--dbm-dept-support-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-support-m); }
.pchip.d-finance { color: var(--dbm-ink); }
.pchip.d-finance .av { background: #fff; color: var(--dbm-dept-finance-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-finance-m); }

/* Needs you button (7.5) */
.needs { display: inline-flex; align-items: center; gap: 8px; padding: 6px 7px 6px 14px; border-radius: var(--dbm-r-pill); background: var(--dbm-coral-strong); color: var(--dbm-on-coral); box-shadow: var(--dbm-shadow-coral); font: 600 13px/18px var(--dbm-font-ui); letter-spacing: -0.01em; white-space: nowrap; flex: none; }
.needs .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.needs .count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--dbm-r-pill); background: #fff; color: var(--dbm-coral-strong); font: 600 12px/20px var(--dbm-font-mono); text-align: center; }
.needs-quiet { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--dbm-r-pill); background: var(--dbm-card); box-shadow: 0 0 0 1px var(--dbm-line); color: var(--dbm-ink-3); font: 500 13px/18px var(--dbm-font-ui); letter-spacing: -0.01em; white-space: nowrap; }

/* Needs you card (spec 7.8, "Ask me card"), open */
.ask { padding: 14px 14px 12px; box-shadow: var(--dbm-shadow-md), 0 0 0 1px var(--dbm-line-2); }
.ask-title { font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: -0.01em; }
.ask-q { margin-top: 10px; font-size: 12.5px; line-height: 18px; }
.ask-q strong { font-weight: 600; }
.ask-answer { display: flex; gap: 8px; margin-top: 12px; align-items: stretch; }
.ask-input { flex: 1; min-width: 0; min-height: 32px; padding: 7px 10px; border-radius: var(--dbm-r-md); box-shadow: inset 0 0 0 1px var(--dbm-line-input); background: var(--dbm-card); font-size: 12px; line-height: 17px; color: var(--dbm-ink); }
.ask-input .caret { display: inline-block; width: 1px; height: 13px; background: var(--dbm-ink); vertical-align: -2px; margin-left: 1px; }
.abtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: var(--dbm-r-md); font: 600 12px/1 var(--dbm-font-ui); letter-spacing: -0.01em; flex: none; }
.abtn-primary { background: var(--dbm-ink); color: #fff; }
.ask-hold { margin-top: 10px; display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.ask-hold .i { width: 12px; height: 12px; }
.ask-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dbm-line); font-size: 11px; line-height: 15px; font-weight: 600; color: var(--dbm-indigo-text); }

/* message and email cards */
.msg { padding: 12px; }
.msg-body { margin-top: 8px; font-size: 12px; line-height: 17px; color: var(--dbm-ink); }
.msg-subj { margin-top: 8px; font-size: 12.5px; line-height: 17px; font-weight: 600; letter-spacing: -0.01em; }
.msg-subj + .msg-body { margin-top: 3px; color: var(--dbm-ink-2); }
.msg-time { font: 500 11px/15px var(--dbm-font-mono); color: var(--dbm-ink-3); flex: none; }
.ibox { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--dbm-neutral-soft); color: var(--dbm-ink-2); flex: none; }
.ibox .i { width: 13px; height: 13px; }
.sent { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 15px; font-weight: 600; color: var(--dbm-green-text); }
.sent .i { width: 13px; height: 13px; stroke-width: 2.2; }

/* access rows (7.12) */
.group { padding: 12px; }
.micro { font: 600 10px/13px var(--dbm-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--dbm-ink-3); }
.micro .mono { text-transform: none; letter-spacing: 0; }
.sw { width: 26px; height: 15px; border-radius: var(--dbm-r-pill); background: var(--dbm-green); position: relative; flex: none; }
.sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(30,27,46,.2); }
.job { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; }
.job-name { font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: -0.01em; }
.job-when { font: 400 11px/15px var(--dbm-font-mono); color: var(--dbm-ink-2); }
.job-prov { font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.never { margin-top: 8px; display: grid; gap: 2px; }
.never div { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--dbm-r-sm); font-size: 12px; line-height: 16px; color: var(--dbm-ink-2); }
.never .i { width: 13px; height: 13px; color: var(--dbm-ink-3); }
.never .hit { background: var(--dbm-violet-soft); color: var(--dbm-ink); font-weight: 600; }
.never .hit .i { color: var(--dbm-violet-text); }

/* tokens on paths (3.3, 8.6) */
.token { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 12px/1 var(--dbm-font-ui); box-shadow: 0 2px 6px rgba(30,27,46,.18), 0 0 0 2px #fff; }
.token .i { width: 12px; height: 12px; stroke-width: 2.2; }
.tk-mail { background: var(--dbm-dept-support-acc); }
.tk-q { background: var(--dbm-violet); }
.tk-you { background: var(--dbm-coral); }

/* scene layouts */
.s1 .drop { position: relative; height: 54px; margin-left: 64px; }
.s1 .drop::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px dashed var(--dbm-dept-support-acc); opacity: .6; }
.s1 .drop .token { position: absolute; left: -11px; top: 16px; }
.tags { display: grid; gap: 6px; justify-items: start; }
.tags .mtag:nth-child(2) { margin-left: 22px; }
.tags .mtag:nth-child(3) { margin-left: 44px; }
.tags .mtag:nth-child(4) { margin-left: 66px; }
/* the mailboxes not in play step down a text color, not an opacity, so they stay 4.5:1 (spec 12) */
.tags .mtag:not(.on) { box-shadow: 0 0 0 1px var(--dbm-line); }
.tags .mtag:not(.on) b { color: var(--dbm-ink-3); font-weight: 500; }
.tags .mtag.on { box-shadow: var(--dbm-shadow-md), 0 0 0 1px var(--dbm-line), 0 0 0 4px rgba(61,139,230,.16); }

.stack { display: grid; gap: 14px; }
.wire { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 22px; }
.wire svg.arc { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 40px; overflow: visible; pointer-events: none; }
.wire .lane { position: absolute; left: 21%; right: 21%; top: 0; height: 40px; pointer-events: none; }
.wire .lane-you { right: 39%; }
.wire .lane { container-type: inline-size; }
.wire .lane .token { position: absolute; left: 0; top: 3px; transform: translateX(calc(50cqw + -50%)); }

.s5 .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* motion, only when allowed */
@keyframes pulse { 50% { opacity: .35; } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes dropin { 0% { transform: translateY(-26px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes travel { 0% { transform: translate(-50%, 18px); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(calc(50cqw + -50%), 0); } 86% { opacity: 1; } 100% { transform: translate(calc(100cqw + -50%), 18px); opacity: 0; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .needs .dot { animation: pulse 1.6s ease-in-out infinite; }
  .ask-input .caret { animation: caret 1s steps(1) infinite; }
  .vis.is-on .s1 .drop .token { animation: dropin 1.4s var(--ease) both; }
  .vis.is-on .wire .lane .token { animation: travel 2.2s var(--ease) 200ms both; }
  .vis.is-on .needs { animation: bump 700ms var(--bump) 2.3s both; }
  .vis.is-on .s5 .needs-quiet { animation: rise 320ms var(--ease) 500ms both; }
}

/* everything else */
.handled { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0; }
.handled li { background: var(--dbm-card); border-radius: var(--dbm-r-xl); box-shadow: var(--dbm-shadow-md), 0 0 0 1px var(--dbm-line); padding: 20px; }
.handled .ic { width: 36px; height: 36px; border-radius: var(--dbm-r-md); background: var(--dbm-neutral-soft); color: var(--dbm-ink); display: grid; place-items: center; margin-bottom: 16px; }
.handled h3 { font-size: 22px; line-height: 30px; letter-spacing: -0.03em; }
.handled p { margin-top: 6px; color: var(--dbm-ink-2); }
.handled .states { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.handled .states + p { margin-top: 12px; }
.p-waiting { color: var(--dbm-amber-text); background: var(--dbm-amber-soft); }

/* Sending switch (spec 9.11): the app's three Sending choices at the end of the story.
   Without JS the switch is hidden, the approval card shows and the list names all three. */
.send { margin-top: 64px; display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; }
.send-head > p { margin-top: 8px; color: var(--dbm-ink-2); }
.send-lines { margin-top: 16px; display: grid; gap: 8px; padding: 0; list-style: none; }
.send-lines li { font-size: 14px; line-height: 21px; letter-spacing: -0.01em; color: var(--dbm-ink-2); }
.send-lines li b { color: var(--dbm-ink); font-weight: 600; }
/* A note on all three choices: the list's size, a step below the intro. */
.send-head > p.send-twice { margin-top: 14px; font-size: 14px; line-height: 21px; letter-spacing: -0.01em; color: var(--dbm-ink-2); }
.send-live { margin-top: 14px; font: 500 14px/20px var(--dbm-font-ui); letter-spacing: -0.01em; color: var(--dbm-ink-3); }
.send:not(.has-send-switch) .send-live { display: none; }
.send-card { padding: 16px; }
.appr-head { display: flex; align-items: center; gap: 8px; }
.appr-head b { font-weight: 600; font-size: 13px; line-height: 18px; }
.appr-meta { margin-top: 8px; display: grid; gap: 2px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.appr-meta b { font-weight: 500; color: var(--dbm-ink-2); }
.appr-field { margin-top: 10px; padding: 8px 10px; border-radius: var(--dbm-r-md); box-shadow: inset 0 0 0 1px var(--dbm-line-input); background: var(--dbm-card); font-size: 12.5px; line-height: 18px; }
.appr-field.subj { font-weight: 600; }
.ask-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.abtn-secondary { background: var(--dbm-card); color: var(--dbm-ink); box-shadow: inset 0 0 0 1px var(--dbm-line-2); }
.send-foot { margin-top: 10px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.draft-tag { display: inline-flex; padding: 2px 7px; border-radius: var(--dbm-r-pill); background: var(--dbm-neutral-soft); font: 600 10px/13px var(--dbm-font-ui); color: var(--dbm-ink-2); }

/* Setup inset (spec 9.12): setup's last step, quiet and not clickable */
.inset { margin-top: 24px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--dbm-r-xl); background: var(--dbm-card-2); box-shadow: inset 0 0 0 1px var(--dbm-line); }
.inset .hello-av { width: 40px; height: 40px; }
.inset .hello-av span { width: 28px; height: 28px; font-size: 12px; }
.inset-t { font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: -0.01em; }
.inset-items { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; line-height: 19px; letter-spacing: -0.01em; color: var(--dbm-ink-2); }
.inset-items span { display: inline-flex; align-items: center; gap: 6px; }
.inset-foot { margin-top: 4px; font-size: 12px; line-height: 17px; letter-spacing: -0.01em; color: var(--dbm-ink-3); }

/* open source */
.oss { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.oss .btns { margin-top: 32px; }
.oss-people { margin-top: 12px; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; }
.oss-people a { color: var(--dbm-ink); font-weight: 600; text-underline-offset: 3px; }
.facts { margin: 0; padding: 8px 24px; }
.facts div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--dbm-line); align-items: baseline; }
.facts div:first-child { border-top: 0; }
.facts dt { font: 600 12px/16px var(--dbm-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dbm-ink-3); }
.facts dd { margin: 0; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; }
.facts dd .mono { font-weight: 600; }

/* FAQ */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--dbm-line-2); }
.faq details { border-bottom: 1px solid var(--dbm-line-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { color: var(--dbm-ink-3); transition: transform 200ms var(--ease); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq details p { padding: 0 40px 20px 0; color: var(--dbm-ink-2); }

/* closing */
.closing { text-align: center; padding-bottom: var(--section); }
.closing .mark { width: 48px; height: 48px; margin: 0 auto 24px; }
.closing .lead { margin: 12px auto 0; max-width: 560px; }
.closing .btns { justify-content: center; margin-top: 32px; }

/* footer (9.6) */
.foot { background: var(--dbm-chrome); padding: 64px 0 32px; }
.foot-top { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; }
.foot-tag { margin-top: 12px; color: var(--dbm-ink-2); max-width: 340px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-cols h3 { font-family: var(--dbm-font-mono); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--dbm-ink-3); margin-bottom: 12px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-cols a { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; line-height: 20px; color: var(--dbm-ink-2); text-decoration: none; letter-spacing: -0.01em; }
.foot-cols a:hover { color: var(--dbm-ink); }
.legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--dbm-line-2); color: var(--dbm-ink-3); }

/* department strip */
.depts { margin-top: 40px; text-align: center; }
.depts ul { list-style: none; margin: 12px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; }
.depts li { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--dbm-r-pill); background: var(--dbm-card); box-shadow: var(--dbm-shadow-sm), 0 0 0 1px var(--dbm-line); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--dbm-ink-2); white-space: nowrap; }
.depts li i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* setup: the onboarding picker (7.25) */
.setup .head { margin-bottom: 40px; }
.setup-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; }
.wiz { padding: 24px; border-radius: var(--dbm-r-2xl); }
.wiz-title { font-size: 22px; line-height: 30px; letter-spacing: -0.03em; }
.hello { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; }
.hello-av { width: 52px; height: 52px; flex: none; border-radius: var(--dbm-r-md); background: var(--dbm-indigo-soft); box-shadow: inset 0 0 0 1.5px var(--dbm-indigo); display: grid; place-items: center; }
.hello-av span { width: 36px; height: 36px; border-radius: 50%; background: var(--dbm-ink); color: #fff; display: grid; place-items: center; font: 700 15px/1 var(--dbm-font-ui); }
.hello p { font-size: 14px; line-height: 21px; letter-spacing: -0.01em; color: var(--dbm-ink-2); }
.hello p b { display: block; color: var(--dbm-ink); font-weight: 600; }
.wiz-label { margin-top: 24px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
.packs { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; min-height: 60px; padding: 11px 12px;
  border: 0; border-radius: var(--dbm-r-lg); background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line-2);
  font: inherit; color: var(--dbm-ink); cursor: pointer; transition: background-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.pack:hover { box-shadow: inset 0 0 0 1px var(--dbm-line-input); }
.pack[aria-pressed="true"] { background: var(--dbm-indigo-soft); box-shadow: inset 0 0 0 1.5px var(--dbm-indigo); }
.pack-ic { width: 28px; height: 28px; flex: none; border-radius: var(--dbm-r-sm); background: var(--dbm-neutral-soft); color: var(--dbm-ink-2); display: grid; place-items: center; }
.pack[aria-pressed="true"] .pack-ic { background: var(--dbm-card); color: var(--dbm-indigo-text); }
.pack-q { font: 600 14px/1 var(--dbm-font-ui); }
.pack-t { min-width: 0; }
.pack-t b { display: block; font-size: 14px; line-height: 19px; font-weight: 600; letter-spacing: -0.01em; }
.pack-t small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 17px; color: var(--dbm-ink-3); letter-spacing: 0; }
.wiz-intro { margin-top: 6px; font-size: 14px; line-height: 21px; letter-spacing: -0.01em; color: var(--dbm-ink-2); }
.team { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--dbm-line); }
.tm { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dbm-line); }
.tm.is-off .tm-head b, .tm.is-off .tm-role, .tm.is-off .tm-sum { color: var(--dbm-ink-3); }
.tm.is-off .av { opacity: .55; }
.cbx, .cbx-lock { width: 18px; height: 18px; flex: none; margin-top: 9px; border-radius: var(--dbm-r-xs); display: grid; place-items: center; }
.cbx { box-shadow: inset 0 0 0 1.5px var(--dbm-line-input); background: var(--dbm-card); }
.cbx.on { background: var(--dbm-ink); box-shadow: none; }
.cbx.on::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.cbx-lock { color: var(--dbm-ink-3); }
.cbx-lock .i { width: 14px; height: 14px; }
.av-36 { width: 36px; height: 36px; font-size: 14px; }
.d-marketing { background: var(--dbm-dept-marketing-l); color: var(--dbm-dept-marketing-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-marketing-m); }
.d-people { background: var(--dbm-dept-people-l); color: var(--dbm-dept-people-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-people-m); }
.d-it { background: var(--dbm-dept-it-l); color: var(--dbm-dept-it-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-it-m); }
.d-ops { background: var(--dbm-dept-operations-l); color: var(--dbm-dept-operations-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-operations-m); }
.tm-main { min-width: 0; flex: 1; }
.tm-head { font-size: 15px; line-height: 21px; letter-spacing: -0.02em; }
.tm-head b { font-weight: 600; }
.tm-role { color: var(--dbm-ink-3); font-size: 14px; letter-spacing: -0.01em; margin-left: 4px; }
.tag { display: inline-block; vertical-align: 1px; margin-left: 8px; padding: 1px 8px; border-radius: var(--dbm-r-pill); font: 600 11px/16px var(--dbm-font-ui); letter-spacing: 0; white-space: nowrap; }
.tag-green { background: var(--dbm-green-soft); color: var(--dbm-green-text); }
.tag-indigo { background: var(--dbm-indigo-soft); color: var(--dbm-indigo-text); }
.tm-sum { margin-top: 2px; font-size: 13px; line-height: 19px; letter-spacing: -0.01em; color: var(--dbm-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Pete's summary is never clamped, so its privacy clause shows whatever font the phone falls back to (spec 9.15). */
.tm-pete .tm-sum { display: block; }
.wiz-foot { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--dbm-ink-3); letter-spacing: -0.01em; }
.wiz-foot .mono { color: var(--dbm-ink); font-weight: 600; }
@media (min-width: 1100px) { .setup-grid > .wiz:first-child { position: sticky; top: 96px; } }
@media (max-width: 1099px) { .setup-grid { grid-template-columns: 1fr; } }
@media (min-width: 640px) and (max-width: 1099px) { .packs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) {
  .wiz { padding: 18px 16px; }
  .setup .head { margin-bottom: 32px; }
  .depts li { height: 30px; font-size: 13px; padding: 0 10px; }
}
@media (max-width: 400px) { .packs { grid-template-columns: 1fr; } .pack { min-height: 52px; } }

/* responsive */
/* Everything else has six items (spec 9.5): 3 across from 980 px, two columns below that,
   one column on phones. The Sending block and the setup inset stack below 980 px too. */
@media (max-width: 979px) {
  .handled { grid-template-columns: 1fr 1fr; }
  .send { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .inset { align-items: flex-start; }
  .oss, .faq { grid-template-columns: 1fr; gap: 32px; }
  .foot-top { grid-template-columns: 1fr; }
}
/* Five nav links and "Download for Windows" need about 935 px in Sora, so the menu takes over below 961 (ship D5). */
@media (max-width: 960px) {
  .nav nav, .nav-links, .nav .btn-nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 640px) {
  /* keep in step with fit() in index.html: the phone crop is 960 wide from x 120, y 110 */
  .studio-view { aspect-ratio: 960 / 580; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; --section: 64px; }
  body { font-size: 16px; line-height: 25px; }
  .hero { padding-top: 48px; }
  .hero h1 { font-size: 40px; line-height: 44px; text-wrap: balance; }
  .lead { font-size: 18px; line-height: 28px; }
  .h2 { font-size: 30px; line-height: 36px; }
  .h3 { font-size: 20px; line-height: 28px; }
  .hero .btns .btn, .closing .btns .btn, .oss .btns .btn { flex: 1 1 100%; }
  .vis { padding: 32px 16px; }
  .scene, .send-cards { zoom: 1; }
  .story .head { margin-bottom: 40px; }
  .handled { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .handled li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; padding: 16px; }
  .handled h3 { font-size: 20px; line-height: 28px; }
  /* 44px touch targets on the phone layout (spec 12) */
  .foot-cols ul { gap: 0; }
  .foot-cols a { min-height: 44px; }
  .handled .ic { grid-row: span 2; margin-bottom: 0; }
  .handled .states { grid-column: 2; }
  .handled p { grid-column: 2; margin-top: 2px; }
  .hero-meta .opt { display: none; }
  .facts { padding: 4px 16px; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .faq details p { padding-right: 0; }
}

/* download page */
.page { padding: 64px 0 var(--section); }
.page .col { max-width: 760px; }
.page h1 { font-size: 40px; line-height: 46px; letter-spacing: -0.03em; text-wrap: balance; }
.page .head .lead { margin-top: 12px; }
.dl { margin-top: 32px; padding: 24px; display: grid; gap: 12px; justify-items: start; }
.dl-meta { font-size: 14px; line-height: 20px; color: var(--dbm-ink-3); letter-spacing: -0.01em; }
.dl-meta a { color: var(--dbm-indigo-text); }
.dl-status { min-height: 0; font-size: 14px; line-height: 20px; letter-spacing: -0.01em; color: var(--dbm-green-text); font-weight: 600; }
.dl-status:empty { display: none; }
.need { margin-top: 20px; color: var(--dbm-ink-2); }
.need + .need { margin-top: 8px; }
.need b { color: var(--dbm-ink); font-weight: 600; }
.need a, .help a { color: var(--dbm-indigo-text); }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 20px; transition: box-shadow 200ms var(--ease); }
.step.next { box-shadow: var(--dbm-shadow-md), 0 0 0 1px var(--dbm-ink), 0 0 0 4px rgba(30,27,46,.08); }
.step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--dbm-ink); color: #fff; font: 600 13px/1 var(--dbm-font-mono); }
.step h3 { font-size: 22px; line-height: 30px; letter-spacing: -0.03em; }
.step p { margin-top: 4px; color: var(--dbm-ink-2); }
.normal { margin-top: 16px; display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: center; padding: 16px; border-radius: var(--dbm-r-lg); background: var(--dbm-card-2); box-shadow: inset 0 0 0 1px var(--dbm-line); }
.normal-t { display: flex; gap: 10px; align-items: flex-start; }
.normal-t .i { margin-top: 5px; color: var(--dbm-indigo-text); }
.normal-t b { display: block; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.02em; }
.normal-t p { margin-top: 2px; }
.macdlg { margin: 0; text-align: center; }
.macdlg .box { padding: 16px 14px 12px; border-radius: var(--dbm-r-lg); background: var(--dbm-card); box-shadow: var(--dbm-shadow-lg), 0 0 0 1px var(--dbm-line); }
.macdlg .box > b { display: block; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: -0.01em; }
.macdlg .row { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.macdlg .row span { height: 28px; display: grid; place-items: center; border-radius: var(--dbm-r-sm); font-size: 12px; font-weight: 500; letter-spacing: 0; background: var(--dbm-neutral-soft); color: var(--dbm-ink-2); }
.macdlg .row .hi { background: var(--dbm-card); color: var(--dbm-ink); box-shadow: 0 0 0 1px var(--dbm-line-2), 0 0 0 3px var(--dbm-indigo); font-weight: 600; }
.macdlg figcaption { margin-top: 8px; }
.help { margin-top: 32px; color: var(--dbm-ink-2); }
.nowrap { white-space: nowrap; }

/* Mac / Windows switch (spec 9.8): native buttons with aria-pressed, shown by the page script.
   The home page's Sending switch (spec 9.11) reuses it with three segments (.is-3). */
.plat-switch { margin-top: 32px; display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: var(--dbm-r-pill); background: var(--dbm-neutral-soft); box-shadow: inset 0 0 0 1px var(--dbm-line); }
.plat-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--dbm-r-pill); background: transparent; color: var(--dbm-ink-2); font: 600 14px/20px var(--dbm-font-ui); letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; }
.plat-switch button[aria-pressed="true"] { background: var(--dbm-card); color: var(--dbm-ink); box-shadow: var(--dbm-shadow-sm), 0 0 0 1px var(--dbm-line); }
.plat-switch button:focus-visible { outline: 3px solid var(--dbm-indigo); outline-offset: 2px; }
/* The Sending switch (.is-3) sits closer to its heading than the /download switch. */
.plat-switch.is-3 { margin-top: 20px; }
/* One section per platform. Without JS both show, each with its own heading; with the
   switch the heading moves to screen readers, since the switch already names the platform. */
.plat { margin-top: 32px; }
.plat-h { font-size: 22px; line-height: 30px; letter-spacing: -0.03em; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.has-switch .plat-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.has-switch .plat { margin-top: 20px; }
.plat .dl { margin-top: 0; }
/* Without JS both platforms' steps show, so each list gets a visible heading. */
.steps-h { margin-top: 40px; }
.steps-h + .steps { margin-top: 0; }
.has-switch .steps-h + .steps { margin-top: 40px; }
.newin { margin-top: 24px; }
.newin ul { margin: 8px 0 0; padding-left: 20px; color: var(--dbm-ink-2); }
/* Windows dialog drawing (spec 9.10), a sibling of the Mac one */
.windlg .box { text-align: left; padding: 14px 14px 12px; }
.windlg .box > b { font-size: 14px; }
.windlg .sm { display: block; margin-top: 6px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.windlg .lnk { display: inline-block; margin-top: 8px; padding: 1px 4px; border-radius: var(--dbm-r-xs); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--dbm-indigo-text); box-shadow: 0 0 0 2px var(--dbm-indigo); }
@media (max-width: 640px) { .normal { grid-template-columns: 1fr; } .macdlg { max-width: 280px; } }
/* Phones: under 420 px the switch drops its icons so its halves stay equal and roomy. */
@media (max-width: 419px) { .plat-switch .i { display: none; } }
@media (max-width: 480px) {
  .page { padding-top: 40px; }
  .page h1 { font-size: 30px; line-height: 36px; }
  .dl { padding: 18px 16px; }
  .dl .btn { width: 100%; }
  .plat-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .plat-switch button { padding: 0 10px; }
  .plat-switch.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plat-switch.is-3 button { padding: 0 6px; white-space: normal; text-align: center; font-size: 13px; line-height: 16px; }
  .ask-actions .abtn { flex: 1 1 auto; min-height: 44px; }

  .step { grid-template-columns: 1fr; gap: 12px; padding: 20px 16px; }
  .step h3 { font-size: 20px; line-height: 28px; }
}

/* not found */
.lost { text-align: center; padding: 96px 0 var(--section); }
.lost .mark { width: 48px; height: 48px; margin: 0 auto 24px; }
.lost h1 { font-size: 64px; line-height: 68px; letter-spacing: -0.03em; font-family: var(--dbm-font-mono); font-weight: 600; }
.lost .lead { margin: 12px auto 0; max-width: 520px; }
.lost .btns { justify-content: center; margin-top: 32px; }
@media (max-width: 480px) { .lost { padding-top: 64px; } .lost h1 { font-size: 40px; line-height: 44px; } }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; color: var(--dbm-ink-3); }
.foot-links > * { display: inline-flex; align-items: center; min-height: 44px; }
.foot-links a { color: var(--dbm-ink-2); }


/* The board (web spec 9.13): the app's Tasks view (spec 7.20) as a read only picture. Wide: five
   columns in the app's order. Under 980 px it leads with what an owner checks first: Blocked,
   Waiting and Done with their cards, then To do and Doing as count rows. */
#board .head { max-width: 760px; }
.tasks { margin-top: 40px; letter-spacing: 0; border-radius: var(--dbm-r-2xl); background: var(--dbm-card-2); box-shadow: var(--dbm-shadow-lg), 0 0 0 1px var(--dbm-line); padding: 18px 18px 20px; }
.tasks-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tasks-title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.02em; margin-right: 4px; }
.tasks-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.cnt { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--dbm-r-pill); font: 600 11px/15px var(--dbm-font-ui); background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line); color: var(--dbm-ink-2); }
.cnt b, .tcol-head b { font: 500 11px/15px var(--dbm-font-mono); color: var(--dbm-ink-3); }
.cnt::before, .tcol-head::before, .reads b::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--k); flex: none; }
.cnt.k-block { background: var(--dbm-coral-soft); color: var(--dbm-coral-text); box-shadow: none; }
.cnt.k-done { background: var(--dbm-green-soft); color: var(--dbm-green-text); box-shadow: none; }
.tasks-lock { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.tasks-lock .i { width: 14px; height: 14px; stroke-width: 1.5; }
.k-todo { --k: var(--dbm-ink-4); } .k-doing { --k: var(--dbm-blue); } .k-wait { --k: var(--dbm-amber); } .k-block { --k: var(--dbm-coral); } .k-done { --k: var(--dbm-green); }
.tcols { margin-top: 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tcol { border-radius: var(--dbm-r-xl); background: color-mix(in srgb, var(--dbm-floor) 45%, var(--dbm-card)); padding: 10px; min-width: 0; }
.tcol.k-block { background: color-mix(in srgb, var(--dbm-coral-soft) 80%, var(--dbm-card)); }
.tcol-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px 8px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tcol.k-block .tcol-head { color: var(--dbm-coral-text); }
.tcard { position: relative; background: var(--dbm-card); border-radius: var(--dbm-r-lg); box-shadow: var(--dbm-shadow-sm), 0 0 0 1px var(--dbm-line); padding: 12px; }
.tcard + .tcard { margin-top: 8px; }
.tid { font: 500 11px/15px var(--dbm-font-mono); color: var(--dbm-ink-3); }
.ttl { margin-top: 3px; font-size: 13px; line-height: 17px; font-weight: 600; letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.who { margin-top: 6px; display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.why { margin-top: 7px; display: inline-block; padding: 2px 7px; border-radius: var(--dbm-r-sm); font: 600 10px/13px var(--dbm-font-ui); background: var(--dbm-amber-soft); color: var(--dbm-amber-text); }
.why.is-you { background: var(--dbm-coral-soft); color: var(--dbm-coral-text); }
.tq { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--dbm-coral-strong); color: var(--dbm-on-coral); display: grid; place-items: center; font: 700 11px/1 var(--dbm-font-ui); }
.tcard .tick { position: absolute; top: 9px; right: 9px; width: 14px; height: 14px; color: var(--dbm-green); stroke-width: 1.5; }
.tcard.is-done .ttl { color: var(--dbm-ink-2); }
.res { margin-top: 6px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-2); }
.tdue { margin-top: 6px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-2); }
/* The To do row has no cards below 980 px, so its next step time shows under the count there (ship D6). */
.tdue-row { display: none; }
.more { margin: 8px 4px 0; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.reads { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; }
.reads li { color: var(--dbm-ink-2); }
.reads b { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--dbm-ink); font-weight: 600; }
@media (max-width: 979px) {
  .tdue-row { display: block; margin: 2px 0 0; padding-left: 16px; } /* under the label: head padding, marker, gap */
  .tcols { grid-template-columns: 1fr 1fr; }
  .tcol.k-block { order: 1; } .tcol.k-wait { order: 2; } .tcol.k-done { order: 3; }
  .tcol.k-todo, .tcol.k-doing { order: 4; padding: 8px 10px; }
  .tcol.k-todo .tcol-head, .tcol.k-doing .tcol-head { padding-bottom: 0; }
  .tcol.k-todo .tcard, .tcol.k-doing .tcard { display: none; }
  .tcol.k-done { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
  .tcol.k-done .tcol-head, .tcol.k-done .more { grid-column: 1 / -1; }
  .tcol.k-done .tcard + .tcard, .tcol.k-done .more { margin-top: 0; }
  .reads { grid-template-columns: 1fr; gap: 12px; }
  .reads li { max-width: 60ch; }
}
@media (max-width: 479px) {
  .tasks { padding: 14px 12px 16px; }
  .tcols { grid-template-columns: 1fr; gap: 10px; }
  .tcol.k-done { grid-template-columns: 1fr; }
  .tasks-lock { margin-left: 0; width: 100%; }
}
/* End of the board */
/* File tabs (web spec 9.14): the app's file tab (spec 7.2) opened from a file chip on an Ask me card (spec 7.8),
   as a read only picture. Wide: the file on the left, the question beside it. Under 980 px the question comes
   first, then the file, and the tab bar sheds tabs (Pulse, Who talks to whom and the Markdown tab, then Needs you under
   600 px, then Tasks under 480 px) so the open file's name never cuts off. Under 400 px the table steps down to
   11 / 16. Wide, the question sits in a 320 px column; stacked, it is capped at the app's 520 px right column. */
#files .head { max-width: 760px; }
.fwin { margin-top: 40px; border-radius: var(--dbm-r-2xl); background: var(--dbm-card-2); box-shadow: var(--dbm-shadow-lg), 0 0 0 1px var(--dbm-line); padding: 16px 18px 18px; letter-spacing: 0; }
.fwin-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vtabs { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; }
.vtab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--dbm-r-md); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--dbm-ink-2); white-space: nowrap; flex: none; }
.vtab .i { width: 14px; height: 14px; stroke-width: 1.5; flex: none; }
.vtab-file { padding-right: 4px; min-width: 72px; flex: 0 1 auto; }
.vtab-file .vtab-name { overflow: hidden; text-overflow: ellipsis; max-width: 160px; min-width: 0; }
.vtab-x { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--dbm-r-sm); flex: none; }
.vtab.is-on { background: var(--dbm-ink); color: #fff; }
.vtabs-sep { width: 1px; height: 18px; background: var(--dbm-line-2); margin: 0 6px; flex: none; }
.fwin-top .needs { margin-left: auto; }
.fwin-body { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.fview { padding: 14px 16px 6px; min-width: 0; }
.fview-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--dbm-line); }
.fview-name { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; }
.fview-place { font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.fview-acts { margin-left: auto; display: flex; gap: 6px; flex: none; }
.fview-acts .abtn { height: 28px; padding: 0 10px; font-size: 12px; }
.ftable { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 18px; }
.ftable th { text-align: left; font-weight: 600; color: var(--dbm-ink-2); padding: 8px 10px; border-bottom: 1px solid var(--dbm-line-2); background: var(--dbm-card); }
.ftable td { padding: 7px 10px; border-bottom: 1px solid var(--dbm-line); color: var(--dbm-ink); white-space: nowrap; }
.ftable tr:last-child td { border-bottom: 0; }
.ftable .num { text-align: right; }
.ftable td.num { font-family: var(--dbm-font-mono); }
.ftable .mono { color: var(--dbm-ink-2); }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--dbm-r-sm); background: var(--dbm-neutral-soft); vertical-align: middle; white-space: nowrap; }
.fchip .i { width: 14px; height: 14px; stroke-width: 1.5; color: var(--dbm-ink-3); }
.fchip-name { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--dbm-ink); }
.fchip-act { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--dbm-indigo-text); }
.fnotes { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; }
.fnotes li { color: var(--dbm-ink-2); }
.fnotes b { display: block; margin-bottom: 4px; color: var(--dbm-ink); font-weight: 600; }
@media (max-width: 979px) {
  .fwin-body { grid-template-columns: 1fr; }
  .fwin .ask { order: -1; max-width: 520px; }
  .vtab-wide { display: none; }
  .fnotes { grid-template-columns: 1fr; gap: 12px; }
  .fnotes li { max-width: 60ch; }
}
@media (max-width: 599px) {
  .fwin-top .needs { display: none; }
}
@media (max-width: 479px) {
  .fwin { padding: 12px 12px 14px; }
  .vtab-mid { display: none; }
  .vtabs-sep { margin-left: 4px; }
  .fview { padding: 12px 10px 4px; }
  .fview-head { flex-wrap: wrap; row-gap: 8px; }
  .fview-head .grow { flex-basis: 100%; }
  .fview-acts { margin-left: 0; }
  .ftable th, .ftable td { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 399px) {
  .fwin { padding: 10px 8px 12px; }
  .fview { padding: 10px 6px 2px; }
  .ftable { font-size: 11px; line-height: 16px; }
  .ftable td:nth-child(2) { white-space: normal; }
  .vtab { padding: 7px 9px; }
  .vtab-file { padding-right: 2px; }
  .ftable th, .ftable td { padding-left: 4px; padding-right: 4px; }
}
/* End of the file tabs */
/* Pulse (web spec 9.17): the app's Pulse view (spec 7.27) as a read only picture for This week.
   Its own pl- block (eng D2): same values as the board's frame and cards, no board class reused.
   Twelve tiles, four a row; two a row under 1100; compact two a row under 760. Coral is never used. */
.pl-frame { margin-top: 40px; letter-spacing: 0; border-radius: var(--dbm-r-2xl); background: var(--dbm-card-2); box-shadow: var(--dbm-shadow-lg), 0 0 0 1px var(--dbm-line); padding: 18px 18px 20px; }
.pl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.02em; }
/* The select's chevron is drawn in --dbm-ink-2 (#4A4660): a data URI can't read a token, so change both together. */
.pl-sel { font: 500 12px/16px var(--dbm-font-ui); padding: 4px 22px 4px 8px; border-radius: var(--dbm-r-sm); background: var(--dbm-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4660' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 5px center / 12px; box-shadow: inset 0 0 0 1px var(--dbm-line-input); color: var(--dbm-ink); }
.pl-cmp { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/16px var(--dbm-font-ui); color: var(--dbm-ink-2); }
.pl-sw { position: relative; width: 24px; height: 14px; border-radius: var(--dbm-r-pill); background: var(--dbm-ink-4); }
.pl-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--dbm-card); }
.pl-since { margin-left: auto; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.pl-sub { margin: 16px 0 8px; font-size: 12px; line-height: 16px; font-weight: 600; }
.pl-rec { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--dbm-r-lg); background: var(--dbm-amber-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dbm-amber) 40%, transparent); }
.pl-rec-main { flex: 1; min-width: 0; }
.pl-rec > .av { align-self: flex-start; }
.pl-rec-t { font-size: 13px; line-height: 18px; font-weight: 600; text-wrap: pretty; }
.pl-rec-e { font-size: 12px; line-height: 16px; color: var(--dbm-amber-text); text-wrap: pretty; }
.pl-save { flex: none; padding: 3px 8px; border-radius: var(--dbm-r-pill); font: 600 11px/15px var(--dbm-font-ui); background: var(--dbm-green-soft); color: var(--dbm-green-text); }
.pl-acts { display: flex; flex: none; gap: 8px; }
.pl-bt { flex: none; padding: 6px 12px; border-radius: var(--dbm-r-md); font: 600 12px/16px var(--dbm-font-ui); background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line-2); color: var(--dbm-ink-2); }
.pl-bt-p { background: var(--dbm-ink); box-shadow: none; color: #fff; }
.pl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pl-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: var(--dbm-r-lg); background: var(--dbm-card); box-shadow: var(--dbm-shadow-sm), 0 0 0 1px var(--dbm-line); }
.pl-held { background: var(--dbm-amber-soft); box-shadow: var(--dbm-shadow-sm), 0 0 0 1px color-mix(in srgb, var(--dbm-amber) 40%, transparent); }
.pl-ti { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--dbm-r-sm); background: var(--dbm-card-2); box-shadow: inset 0 0 0 1px var(--dbm-line); color: var(--dbm-ink-2); }
.pl-ti .i { width: 18px; height: 18px; }
.pl-num { font: 600 28px/32px var(--dbm-font-mono); letter-spacing: -0.02em; }
.pl-num-24 { font-size: 24px; line-height: 28px; }
.pl-of { margin-inline-start: 6px; font: 400 12px/16px var(--dbm-font-ui); letter-spacing: 0; color: var(--dbm-ink-3); }
.pl-lbl { font-size: 12px; line-height: 16px; color: var(--dbm-ink-2); text-wrap: pretty; }
.pl-cap { font: 600 10px/14px var(--dbm-font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--dbm-ink-3); }
.pl-bar { display: flex; gap: 2px; height: 8px; margin-top: auto; border-radius: var(--dbm-r-pill); overflow: hidden; }
.pl-bar span { display: block; height: 100%; }
.pl-leg { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.pl-leg i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; vertical-align: 0; box-shadow: inset 0 0 0 1px var(--dbm-line); }
.pl-leg b { margin-left: 3px; font: 500 11px/15px var(--dbm-font-mono); color: var(--dbm-ink-2); }
.pl-foot { margin-top: auto; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); text-wrap: pretty; }
.pl-held .pl-ti { background: var(--dbm-card); color: var(--dbm-amber-text); }
.pl-held-link { margin-top: auto; font: 600 12px/16px var(--dbm-font-ui); color: var(--dbm-amber-text); text-wrap: pretty; }
.pl-use { margin-top: auto; }
.pl-use-row { display: flex; justify-content: space-between; font: 600 10px/14px var(--dbm-font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--dbm-ink-3); }
.pl-use-row span + span { font: 600 12px/14px var(--dbm-font-mono); text-transform: none; letter-spacing: 0; color: var(--dbm-ink); }
.pl-spent .pl-lbl { font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.pl-use-bar { height: 8px; border-radius: var(--dbm-r-pill); background: var(--dbm-neutral-soft); overflow: hidden; }
.pl-use-bar span { display: block; height: 100%; background: var(--dbm-ink-2); }
.pl-use .pl-foot { margin-top: 4px; }
.pl-taw { padding: 12px 14px; border-radius: var(--dbm-r-lg); background: var(--dbm-card); box-shadow: var(--dbm-shadow-sm), 0 0 0 1px var(--dbm-line); }
.pl-taw-h { margin-bottom: 8px; font-size: 13px; line-height: 18px; color: var(--dbm-ink-2); }
.pl-taw-h b { color: var(--dbm-ink); }
.pl-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px 60px; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--dbm-line); }
.pl-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-who p { font-size: 13px; line-height: 16px; font-weight: 600; }
.pl-who small { display: block; font-size: 10px; line-height: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pl-track { position: relative; height: 10px; border-radius: var(--dbm-r-pill); background: var(--dbm-neutral-soft); }
.pl-track span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--dbm-r-pill); }
.pl-avg { position: absolute; top: -5px; bottom: -5px; border-left: 1px dashed var(--dbm-ink-3); }
.pl-call { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 1px 6px; border-radius: var(--dbm-r-pill); font: normal 600 10px/13px var(--dbm-font-ui); white-space: nowrap; background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line-2); color: var(--dbm-ink); }
.pl-call-q { background: var(--dbm-neutral-soft); box-shadow: none; color: var(--dbm-ink-3); }
@media (min-width: 480px) {
  .pl-row:has(.pl-call-q) .pl-who .av { opacity: .7; }
  .pl-row:has(.pl-call-q) .pl-who p { color: color-mix(in srgb, var(--dbm-ink) 70%, var(--dbm-card)); }
}
@media (min-width: 760px) {
  .pl-row:has(.pl-call-q) .pl-hrs { opacity: .7; color: var(--dbm-ink); }
}
.pl-tc { display: contents; }
.pl-hrs, .pl-cost { font: 500 12px/16px var(--dbm-font-mono); text-align: right; color: var(--dbm-ink-2); }
.pl-cost { font-weight: 600; color: var(--dbm-ink); }
.pl-reads { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; }
.pl-reads li { color: var(--dbm-ink-2); }
.pl-reads b { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--dbm-ink); font-weight: 600; }
.pl-reads b::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--k); }
.pl-k-save { --k: var(--dbm-amber); }
.pl-k-cmp { --k: var(--dbm-ink-4); }
.pl-k-cost { --k: var(--dbm-ink-2); }
@media (max-width: 1099px) {
  .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 979px) {
  .pl-reads { grid-template-columns: 1fr; gap: 12px; }
  .pl-reads li { max-width: 60ch; }
}
@media (max-width: 759px) {
  .pl-since { display: none; }
  .pl-rec { flex-wrap: wrap; gap: 10px; }
  .pl-rec-main { flex-basis: calc(100% - 46px); }
  .pl-save { margin-right: auto; }
  .pl-grid { gap: 8px; }
  .pl-tile { gap: 4px; padding: 10px 12px; }
  .pl-tile .pl-ti, .pl-tile .pl-leg { display: none; }
  .pl-num { font-size: 22px; line-height: 26px; }
  .pl-lbl { font-size: 11px; line-height: 15px; }
  .pl-spent, .pl-yt { grid-column: 1 / -1; }
  .pl-row { grid-template-columns: 96px minmax(0, 1fr) 58px; }
  .pl-who small, .pl-who .pl-fd { display: none; }
  .pl-tc { display: flex; flex-direction: column; align-items: flex-end; }
  .pl-hrs { font-size: 11px; line-height: 14px; color: var(--dbm-ink-3); }
}
@media (max-width: 479px) {
  .pl-frame { padding: 12px; }
  .pl-call { display: none; }
}
/* Company foundations on Pulse (spec 7.27, web 9.17): the strip at the top of Recommendations and the count on Team at work. */
.pl-fnd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 12px; border-radius: var(--dbm-r-lg); background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line); }
.pl-fnd-l { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--dbm-ink-3); }
.pl-fnd-i { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dbm-ink-3); font: 700 9px/1 var(--dbm-font-ui); }
.pl-fpill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--dbm-r-pill); background: var(--dbm-neutral-soft); font-size: 12px; line-height: 16px; font-weight: 600; }
.pl-fpill-n { font: 600 11px/1 var(--dbm-font-mono); color: var(--dbm-ink-2); }
.pl-fpill-bar { position: relative; width: 42px; height: 4px; border-radius: 2px; background: var(--dbm-line-2); overflow: hidden; }
.pl-fpill-bar span { position: absolute; inset: 0 auto 0 0; background: var(--dbm-indigo); }
.pl-fd { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--dbm-ink-3); }
.pl-ring { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--dbm-indigo); }
/* End of Pulse */

/* Setup foundations inset (web spec 9.18): a second Setup inset with a read only foundation card (spec 7.27a).
   Its own fd- block: the inset keeps .inset's fill and line; the card takes the Ask me card's values and waits, never Blocked. */
.fd-inset { margin-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 380px); gap: 16px 20px; }
.fd-text { min-width: 0; }
.fd-card { min-width: 0; padding: 14px 14px 12px; border-radius: var(--dbm-r-lg); background: var(--dbm-card); box-shadow: var(--dbm-shadow-md), 0 0 0 1px var(--dbm-line-2); }
.fd-title { font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: -0.01em; }
.fd-who { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fd-meta { font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.fd-ev { margin-top: 10px; font-size: 12.5px; line-height: 18px; }
.fd-ev b { font-weight: 600; }
.fd-label { margin-top: 12px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.fd-box { margin-top: 4px; height: 48px; border-radius: var(--dbm-r-md); background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line-input); }
.fd-hint { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.fd-hint-t { flex: 1; min-width: 160px; }
.fd-add { color: var(--dbm-indigo-text); }
.fd-acts { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fd-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--dbm-r-md); background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line-2); font: 600 12px/1 var(--dbm-font-ui); letter-spacing: -0.01em; color: var(--dbm-ink); }
.fd-btn.fd-btn-p { background: var(--dbm-ink); color: #fff; box-shadow: none; }
.fd-later { margin-left: auto; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--dbm-ink-2); }
.fd-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dbm-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
@media (max-width: 979px) {
  .fd-inset { grid-template-columns: auto minmax(0, 1fr); }
  .fd-card { grid-column: 1 / -1; max-width: 420px; }
}
/* End of the foundations inset */

/* Privacy section (spec 9.15): the trust layer switch and Settings, Research & privacy as a read only
   picture. Without JS the switch is hidden and all three outcomes show under their labels. */
.hero-privacy { margin-top: 20px; }
.hero-privacy a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--dbm-r-pill); background: var(--dbm-indigo-soft); color: var(--dbm-indigo-text); font: 600 14px/20px var(--dbm-font-ui); letter-spacing: -0.01em; text-decoration: none; text-wrap: balance; }
.hero-privacy a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-privacy .i { width: 16px; height: 16px; flex: none; }
.d-research { background: var(--dbm-dept-team-l); color: var(--dbm-dept-team-acc); box-shadow: inset 0 0 0 1px var(--dbm-dept-team-m); }
.av.d-research .i { width: 62%; height: 62%; }
.pv-top { max-width: 800px; }
.pv-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--dbm-r-pill); background: var(--dbm-indigo-soft); color: var(--dbm-indigo-text); font: 700 15px/20px var(--dbm-font-ui); letter-spacing: -0.01em; }
.pv-badge .i { width: 18px; height: 18px; }
.pv-top .h2 { margin-top: 16px; }
.pv-hl { color: var(--dbm-indigo-text); }
.pv-grid { margin-top: 48px; display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; }
.pv-intro { margin-top: 8px; color: var(--dbm-ink-2); }
.pv-live { margin-top: 12px; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--dbm-ink); }
.pv-cards { margin-top: 24px; max-width: 372px; zoom: 1.2; display: grid; gap: 12px; font-size: 12px; line-height: 16.5px; color: var(--dbm-ink); }
.pv-state { display: grid; gap: 12px; }
.pv-label { margin-bottom: -4px; }
.has-pv-switch .pv-label { display: none; }
.pv-msg { padding: 14px; }
.pv-from { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv-from b { font-weight: 600; font-size: 13px; line-height: 18px; }
.pv-to { flex: 1; min-width: 0; font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); }
.pv-check { background: var(--dbm-indigo-soft); color: var(--dbm-indigo-text); }
.pv-check .i { width: 12px; height: 12px; }
.pv-text { margin-top: 8px; font-size: 12.5px; line-height: 18px; }
.pv-text + .pv-text { margin-top: 4px; }
.pv-text b { font-weight: 600; }
.pv-asked { margin-top: 8px; padding: 8px 10px; border-radius: var(--dbm-r-md); background: var(--dbm-neutral-soft); font-size: 12.5px; line-height: 18px; font-weight: 600; }
.pv-none { font-size: 12.5px; line-height: 18px; color: var(--dbm-ink-2); padding: 0 2px; }
.pv-tag { margin-top: 8px; padding: 6px 8px; border-radius: var(--dbm-r-md); background: var(--dbm-neutral-soft); font-size: 11px; line-height: 15px; color: var(--dbm-ink-2); }
.pv-cut { margin-top: 6px; font-size: 12px; line-height: 17px; color: var(--dbm-ink-3); }
.pv-cut span { font-weight: 600; color: var(--dbm-ink-2); }
.pv-set { padding: 16px; max-width: 372px; zoom: 1.2; font-size: 12px; line-height: 16.5px; color: var(--dbm-ink); }
.pv-on { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.pv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dbm-green); flex: none; }
.pv-set-h { margin-top: 16px; display: flex; justify-content: space-between; gap: 8px; }
.pv-set-h .mono { white-space: nowrap; }
.pv-rows { margin-top: 6px; padding: 0; list-style: none; }
.pv-rows li { display: flex; align-items: center; gap: 8px; min-height: 36px; border-top: 1px solid var(--dbm-line); }
.pv-rows li:first-child { border-top: 0; }
.pv-rows li > span:first-child { flex: 1; min-width: 0; }
.pv-seg { display: inline-grid; grid-auto-flow: column; padding: 2px; border-radius: 8px; background: var(--dbm-neutral-soft); flex: none; }
.pv-seg i { font-style: normal; padding: 2px 8px; border-radius: 6px; font: 600 10.5px/15px var(--dbm-font-ui); color: var(--dbm-ink-3); }
.pv-seg i.pv-sel { background: var(--dbm-card); color: var(--dbm-ink); box-shadow: 0 0 0 1px var(--dbm-line); }
.pv-always { font-size: 11px; line-height: 15px; color: var(--dbm-ink-3); flex: none; }
.pv-more { display: none; min-height: 44px; align-items: center; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--dbm-indigo-text); }
.pv-reads { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; }
.pv-reads li { color: var(--dbm-ink-2); }
.pv-reads b { display: block; margin-bottom: 4px; color: var(--dbm-ink); font-weight: 600; }
/* The app pictures take the story's app scale (.scene, .send-cards) at one zoom for both, since they sit
   side by side: 1.2 on desktop (the question column is narrower than the Sending block's), 1.3 on tablets,
   1 on phones. Short desktop screens keep 1.2, under the story's 1.25. */
@media (min-width: 481px) and (max-width: 979px) { .pv-cards, .pv-set { zoom: 1.3; } }
@media (max-width: 480px) { .pv-cards, .pv-set { zoom: 1; } }
@media (max-width: 979px) {
  .pv-grid { grid-template-columns: 1fr; }
  .pv-reads { grid-template-columns: 1fr; gap: 12px; }
  .pv-reads li { max-width: 60ch; }
}
@media (max-width: 479px) {
  .pv-rows li.pv-priv { display: none; }
  .pv-more { display: inline-flex; }
  .pv-seg i { padding: 2px 6px; }
}
.tag-research { background: var(--dbm-neutral-soft); color: var(--dbm-ink-2); }
.av-36.d-research .i { width: 20px; height: 20px; }
/* End of the privacy section */

/* Security page (spec 9.16): one column to read, no cards, no hero. */
.sec { max-width: calc(72ch + var(--gutter) * 2); }
.sec h1 { margin-top: 16px; font-size: 48px; line-height: 54px; letter-spacing: -0.03em; }
.sec .lead { margin-top: 16px; }
.sec-back { margin-top: 16px; font-weight: 600; }
.sec-back a { color: var(--dbm-indigo-text); text-underline-offset: 3px; }
.sec section { margin-top: 56px; }
.sec h2 { font-size: 28px; line-height: 36px; letter-spacing: -0.03em; }
.sec h3 { margin-top: 24px; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; }
.sec section p, .sec section ul { margin-top: 10px; color: var(--dbm-ink-2); }
.sec section ul { padding-left: 20px; display: grid; gap: 6px; }
.sec section a:not(.btn) { color: var(--dbm-ink); text-underline-offset: 3px; }
.sec .btns { margin-top: 24px; }
.sec-scroll { margin-top: 16px; overflow-x: auto; }
.sec-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.sec-table th, .sec-table td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--dbm-line); }
.sec-table thead th { border-top: 0; font: 600 11px/15px var(--dbm-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--dbm-ink-3); }
.sec-table tbody th { font-weight: 600; color: var(--dbm-ink); }
.sec-table td { color: var(--dbm-ink-2); }
@media (max-width: 480px) {
  .sec h1 { font-size: 36px; line-height: 42px; }
  .sec-table { font-size: 13px; line-height: 18px; }
  .sec-table th, .sec-table td { padding-right: 6px; }
  .sec-table th:last-child, .sec-table td:last-child { padding-right: 0; }
}
/* End of the security page */

/* Home four questions (web spec 9.19 to 9.21): the check points, job cards, flow line, trust cards,
   the Needs you row and the picture headings of the fourth question. Own hm- classes only. */
.hm-points { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; color: var(--dbm-ink-2); font-size: 16px; line-height: 25px; }
.hm-points li { position: relative; padding-left: 32px; }
.hm-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--dbm-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.hm-points b { display: block; color: var(--dbm-ink); font-weight: 600; }
.hm-jobs { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-job { padding: 20px; }
.hm-job .h3 { margin-top: 14px; font-size: 19px; line-height: 26px; }
.hm-job p { margin-top: 6px; font-size: 15px; line-height: 23px; color: var(--dbm-ink-2); }
.hm-flow { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; font-size: 14px; line-height: 20px; color: var(--dbm-ink-2); }
.hm-flow li { padding: 6px 12px; border-radius: var(--dbm-r-pill); background: var(--dbm-card); box-shadow: inset 0 0 0 1px var(--dbm-line-2); }
.hm-flow li + li::before { content: "\2192"; margin: 0 8px 0 -14px; padding-right: 6px; color: var(--dbm-ink-3); }
.hm-flow li + li { margin-left: 12px; }
.hm-flow .hm-you { background: var(--dbm-coral-soft); box-shadow: none; color: var(--dbm-coral-text); font-weight: 600; }
.hm-more { margin-top: 24px; font-size: 15px; font-weight: 600; }
.hm-more a { display: inline-flex; align-items: center; gap: 4px; color: var(--dbm-indigo-text); text-decoration: none; }
.hm-more a:hover { text-decoration: underline; }
.hm-trust { margin-top: 32px; padding: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-radius: var(--dbm-r-2xl); }
.hm-trust .h3 { margin-top: 14px; font-size: 18px; line-height: 24px; }
.hm-trust p { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--dbm-ink-2); }
.hm-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--dbm-ink); }
.hm-ic-keep { background: var(--dbm-indigo-soft); color: var(--dbm-indigo-text); }
.hm-ic-you { background: var(--dbm-neutral-soft); }
.hm-ic-rogue { background: var(--dbm-green-soft); color: var(--dbm-green-text); }
.hm-needs { margin-top: 32px; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hm-needs p { font-size: 16px; line-height: 24px; color: var(--dbm-ink-2); }
.hm-needs p b { color: var(--dbm-ink); font-weight: 600; }
.hm-vis { margin-top: 48px; }
.hm-vis-h { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 18px; }
.hm-vis-h span { display: block; margin-top: 4px; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--dbm-ink-2); }
.hm-vis .tasks, .hm-vis .pl-frame { margin-top: 0; }
@media (max-width: 979px) {
  .hm-points, .hm-jobs, .hm-trust { grid-template-columns: 1fr; }
  .hm-trust { padding: 28px; gap: 24px; }
}
/* End of the home questions */

/* Customer band (web spec 9.23): businesses already running the app, under the hero. Each logo fits a
   120 x 48 box with its shape kept. Own cust- classes only. */
.cust { text-align: center; }
.cust-list { list-style: none; margin: 24px auto 0; padding: 0; max-width: 960px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cust-list > li { min-width: 0; max-width: 100%; }
.cust-card { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px 14px 14px; color: var(--dbm-ink); text-align: left; text-decoration: none; }
.cust-card:hover { box-shadow: var(--dbm-shadow-lg), 0 0 0 1px var(--dbm-line-2); }
.cust-card img { flex: none; max-width: 120px; max-height: 48px; }
.cust-txt { display: flex; flex-direction: column; min-width: 0; }
.cust-txt b { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cust-kind { font-size: 13px; line-height: 18px; letter-spacing: -0.01em; color: var(--dbm-ink-3); }
.cust-go { flex: none; width: 16px; height: 16px; margin-left: 6px; color: var(--dbm-ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .cust-card { transition: box-shadow 120ms var(--ease); }
}
/* End of the customer band */

/* How it works page (web spec 9.22): the page's own top. */
.hiw-top { padding-top: 56px; }
.hiw-top h1 { margin-top: 10px; }
/* End of the How it works top */