/* Syngularity (the build-and-run page). Light theme only, like syngularity.ai. Same type as syngularity.ai: Instrument Serif italic for headlines (self-hosted),
   the system sans for text, a mono for labels and numbers. White page, ink #111, no accent colour: the lava is the colour.
   Spacing on an 8px grid. Shapes: interactive things (buttons, radio pills) are full pills; surfaces and fields are 20px / 14px. */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); }

:root {
  --paper: #fff; --raise: #f3f3f4; --ink: #111; --ink-2: #55555b; --line: #e3e3e6;
  --on-ink: #fff; --focus: #111;
  --serif: "Instrument Serif", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-surface: 20px; --r-field: 14px;
  --max: 1180px; --gut: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font: 400 17px/1.55 var(--sans);
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h2 { font: italic 400 clamp(42px, 5.6vw, 76px)/1.02 var(--serif); letter-spacing: -.01em; padding-bottom: .06em;
  text-wrap: balance; max-width: 16ch; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
p { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 3; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 12px; }

/* buttons: one shape (pill), two weights */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: inherit; font-size: 16px; font-weight: 540; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .18s var(--ease), background-color .18s, color .18s, opacity .18s; }
.btn:hover { opacity: .86; }
.btn:active { transform: scale(.98); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { opacity: 1; background: var(--ink); color: var(--paper); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.link { font-weight: 540; text-decoration: underline; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }

/* top bar: one line, 64px */
.top { position: sticky; top: 0; z-index: 2; height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gut); background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.mark { font: 500 15px/1 var(--mono); letter-spacing: 5px; text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.top nav a:not(.btn) { text-decoration: none; color: var(--ink-2); padding: 12px 0; }
.top nav a:not(.btn):hover { color: var(--ink); }
@media (max-width: 720px) { .top nav a:not(.btn) { display: none; } }

/* hero: the lamp, its headline (in the SVG / canvas), one line under it, two buttons. Fits the first screen. */
.hero { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 8px 16px 48px; text-align: center; }
.lampbox { --B: min(100vw - 32px, calc((100vh - 250px) / 1.16), 660px); position: relative; width: var(--B);
  height: calc(var(--B) * 1.16); touch-action: pan-y; color: var(--ink); }
@supports (height: 100dvh) { .lampbox { --B: min(100vw - 32px, calc((100dvh - 250px) / 1.16), 660px); } }
.lampbox > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lampbox.gl > svg { visibility: hidden; }
.lampbox > .lamp-toggle { z-index: 1; inset: auto 0 22% auto; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; opacity: .55;
  -webkit-tap-highlight-color: transparent; transition: opacity .18s, background-color .18s; }
.lampbox > .lamp-toggle[hidden] { display: none; }
.lamp-toggle:hover, .lamp-toggle:focus-visible { opacity: 1; background: var(--raise); }
.lamp-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.lamp-toggle .i-play, .lamp-toggle[aria-pressed=true] .i-pause { display: none; }
.lamp-toggle[aria-pressed=true] .i-play { display: inline; }
.lede { max-width: 34ch; margin-top: 8px; font-size: clamp(18px, 1.6vw, 20px); color: var(--ink-2); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

section:not(.hero) { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 11vw, 144px) var(--gut) 0; }

/* manifesto: type is the picture */
.manifesto p { font: italic 400 clamp(32px, 4.2vw, 56px)/1.1 var(--serif); letter-spacing: -.005em; max-width: 22ch; }
.manifesto span { color: var(--ink-2); }

/* departments: an uneven bento, six cells, two of them ink */
.depts h2 { margin-bottom: 40px; }
.bento { display: grid; gap: 12px; grid-template-columns: repeat(6, 1fr); }
.cell { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  min-height: 240px; padding: 28px; border-radius: var(--r-surface); background: var(--raise); }
.cell p { color: var(--ink-2); max-width: 40ch; }
.cell .gets { position: absolute; top: 24px; left: 28px; right: 28px; font: 400 13px/1.4 var(--mono);
  color: var(--ink-2); }
@media (max-width: 560px) { .cell .gets { position: static; margin-bottom: 28px; } }
.c-research { grid-column: span 2; }
.c-product { grid-column: span 4; grid-row: span 2; min-height: 492px; background: var(--ink); color: var(--paper); }
.c-product p { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.c-site { grid-column: span 2; }
.c-social { grid-column: span 3; }
.c-sales { grid-column: span 3; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.c-ops { grid-column: span 6; min-height: 0; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; }
.c-ops p { max-width: 52ch; }
.drops { position: absolute; bottom: -12%; right: -6%; width: min(46%, 300px); height: auto; color: var(--paper); opacity: .96; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .c-research, .c-site, .c-social, .c-sales { grid-column: span 1; }
  .c-product, .c-ops { grid-column: span 2; }
  .c-product { grid-row: auto; min-height: 400px; }
  .c-ops { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .cell, .c-product, .c-ops { grid-column: span 1; min-height: 0; padding: 24px; }
  .c-product { min-height: 360px; }
}

/* how it works: four verbs on one rail */
.how h2 { margin-bottom: 48px; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  counter-reset: s; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; position: relative; padding-top: 28px; }
.steps li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink); }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-2); }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 0; border-top: 0; border-left: 1px solid var(--line); margin-left: 4px; }
  .steps li { padding: 0 0 32px 28px; }
  .steps li::before { top: 8px; left: -5px; }
}

/* control: rules on the left, a sample of the morning report on the right */
.control { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.control h2 { margin-bottom: 32px; }
.rules { list-style: none; padding: 0; display: grid; gap: 0; }
.rules li { max-width: 46ch; font-size: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.rules li:last-child { border-bottom: 1px solid var(--line); }
.rules strong { color: var(--ink); font-weight: 580; }
.report { border-radius: var(--r-surface); background: var(--raise); padding: 12px; }
.report figcaption { font: 400 13px/1 var(--mono); color: var(--ink-2); padding: 12px 16px 14px; }
.report-body { border-radius: 14px; background: var(--paper); padding: 24px; display: grid; gap: 14px; font-size: 16px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 32px -18px color-mix(in srgb, var(--ink) 30%, transparent); }
.report-h { font-weight: 580; font-size: 18px; }
.report-ask { padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .control { grid-template-columns: 1fr; } }

/* proof */
.proof h2 { max-width: 20ch; margin-bottom: 20px; }
.proof p { max-width: 60ch; color: var(--ink-2); font-size: 19px; margin-bottom: 20px; }

/* pricing: two plans, the first one weighted */
.pricing h2 { margin-bottom: 40px; }
.plans { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.plan { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--r-surface);
  box-shadow: inset 0 0 0 1px var(--line); }
.plan-main { background: var(--raise); box-shadow: none; }
.price { display: flex; align-items: baseline; gap: 8px; }
.amt { font: italic 400 clamp(64px, 6.4vw, 88px)/1 var(--serif); letter-spacing: -.01em; }
.amt-sm { font-size: clamp(48px, 4.6vw, 60px); padding: 6px 0 8px; }
.per { color: var(--ink-2); }
.for { font-size: 19px; font-weight: 520; }
.plan ul { list-style: none; padding: 0; display: grid; gap: 10px; color: var(--ink-2); margin-bottom: 12px; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--ink); }
.plan .btn { align-self: flex-start; margin-top: auto; }
.fine { font-size: 14px; color: var(--ink-2); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* faq: heading left, answers right */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; }
.qa details { border-bottom: 1px solid var(--line); }
.qa details:first-child { border-top: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0;
  font-size: 19px; font-weight: 540; letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-weight: 300; font-size: 24px; line-height: 1; transition: transform .2s var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--ink-2); }
.qa details p { padding: 0 0 24px; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 24px; } }

/* join */
.join { text-align: left; padding-bottom: clamp(80px, 10vw, 128px) !important; }
.join h2 { margin-bottom: 16px; }
.join > p { color: var(--ink-2); max-width: 52ch; margin-bottom: 32px; font-size: 19px; }
.form { display: grid; gap: 20px; max-width: 560px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; min-width: 0; }
.field > label, legend { font-size: 15px; font-weight: 540; }
.opt { font-weight: 400; color: var(--ink-2); }
input[type=email], textarea { width: 100%; font: inherit; color: var(--ink); background: var(--raise);
  border: 1px solid transparent; border-radius: var(--r-field); padding: 13px 16px; transition: border-color .15s; }
input[type=email] { min-height: 52px; }
textarea { resize: vertical; min-height: 96px; }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .8; }
input[type=email]:hover, textarea:hover { border-color: var(--line); }
input[type=email]:focus-visible, textarea:focus-visible { outline: none; border-color: var(--ink); border-radius: var(--r-field); }
input[aria-invalid=true] { border-color: #c4291c; }
.err { font-size: 14px; color: #c4291c; min-height: 0; }
.plan-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-pick legend { margin-bottom: 8px; width: 100%; }
.plan-pick label { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-weight: 500; }
.plan-pick input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.plan-pick label:has(:checked) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.plan-pick label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.plan-pick input:focus-visible { outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.form .btn[aria-busy=true] { opacity: .6; cursor: progress; }
.status { font-weight: 540; }
.status:empty { display: none; }
.form.done .field, .form.done .btn, .form.done .fine { display: none; }

.foot { max-width: var(--max); margin: 0 auto; padding: 32px var(--gut) 40px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; font-size: 15px; color: var(--ink-2); }
.foot .mark { color: var(--ink); }
.foot nav { display: flex; gap: 24px; margin-left: auto; }
.foot nav a, .foot p a { padding: 12px 0; }
.foot .social { width: 100%; display: flex; gap: 4px; margin: 4px 0 0 -12px; }
.foot .social a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink-2); transition: color .18s; }
.foot .social a:hover { color: var(--ink); }
.foot .social svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 560px) { .foot nav { margin-left: 0; } }

/* reveal on scroll (site.js adds .in); without JS, or with reduced motion, everything is simply there */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .bento .reveal:nth-child(2) { transition-delay: .06s; } .js .bento .reveal:nth-child(3) { transition-delay: .12s; }
  .js .steps .reveal:nth-child(2) { transition-delay: .08s; } .js .steps .reveal:nth-child(3) { transition-delay: .16s; }
  .js .steps .reveal:nth-child(4) { transition-delay: .24s; }
  .lede, .ctas { animation: rise .9s var(--ease) both; animation-delay: .25s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
}
.v { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* text pages (privacy, 404) */
.doc { max-width: 680px; margin: 0 auto; padding: clamp(40px, 8vw, 96px) var(--gut) 96px; }
.doc h1 { font: italic 400 clamp(48px, 7vw, 76px)/1.02 var(--serif); margin-bottom: 16px; }
.doc h2 { font-size: 32px; margin: 40px 0 10px; max-width: none; }
.doc p, .doc ul { margin: 0 0 14px; color: var(--ink-2); }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--ink); font-weight: 580; }
.doc .meta { font-size: 15px; margin-bottom: 32px; }

/* sample "start here" card */
.report-k { font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.report-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.report-meta span { padding: 4px 10px; border-radius: 999px; background: var(--raise); font-variant-numeric: tabular-nums; }
.report-ask { display: flex; justify-content: flex-end; gap: 8px; }
.fake-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 540; }
.fake-main { background: var(--ink); color: var(--paper); box-shadow: none; }

/* compare: the failure, then the answer */
.compare h2 { margin-bottom: 16px; }
.compare-lede { max-width: 56ch; color: var(--ink-2); font-size: 19px; margin-bottom: 40px; }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.pairs > div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.pairs dt { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink-2) 60%, transparent); }
.pairs dd { margin: 0; font-weight: 520; }
@media (max-width: 860px) { .pairs { grid-template-columns: 1fr; } .pairs > div { grid-template-columns: 1fr; gap: 6px; } }

/* ---------------------------------------------------------------- graphics */
.ok { color: #1a7f37; } .bad { color: #c4291c; }
/* small lava lamps (status key + phone): SVG goo, CSS motion; paused off screen (site.js adds .run) and under reduced motion */
.lamp-s { width: 56px; height: 56px; color: var(--ink); overflow: visible; }
.lamp-s circle { transform-box: view-box; transform-origin: 30px 30px; }
.lamp-s .d3 { opacity: 0; }
.calm .d1 { animation: orbit 9s linear infinite; --r: 11px; } .calm .d2 { animation: orbit 12s linear infinite reverse; --r: 10px; animation-delay: -4s; }
.calm .c { animation: breathe 6s ease-in-out infinite; }
.pulse .c { animation: pulse 1.6s ease-in-out infinite; } .pulse .d1 { animation: orbit 7s linear infinite; --r: 11px; }
.pulse .d2 { animation: orbit 9s linear infinite reverse; --r: 12px; animation-delay: -3s; }
.split .c { r: 8px; } .split .d3 { opacity: 1; }
.split .d1 { animation: orbit 5s linear infinite; --r: 21px; } .split .d2 { animation: orbit 6.5s linear infinite reverse; --r: 21px; animation-delay: -2s; }
.split .d3 { animation: orbit 8s linear infinite; --r: 20px; animation-delay: -5s; }
@keyframes orbit { from { transform: rotate(0) translateX(var(--r)) rotate(0); } to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); } }
@keyframes breathe { 50% { transform: scale(1.06); } }
@keyframes pulse { 0%, 100% { transform: scale(.94); } 45% { transform: scale(1.14); } }
.js .lamp-s *, .js .g-brain li, .js .traveler { animation-play-state: paused; }
.js .run .lamp-s *, .js .run .g-brain li, .js .run .traveler { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .lamp-s *, .spark path { animation: none !important; } }

/* the home screen section */
.moving { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: clamp(40px, 7vw, 112px); align-items: center; }
.moving h2 { margin-bottom: 32px; max-width: 13ch; }
.callouts { list-style: none; padding: 0; display: grid; gap: 14px; max-width: 48ch; }
.callouts li { font-size: 20px; }
.callouts strong { color: var(--ink); font-weight: 600; }
.lamps { display: grid; grid-template-columns: repeat(3, minmax(0, 104px)); gap: 8px 16px; margin-top: 18px; }
.lamps > span { display: grid; justify-items: center; gap: 4px; }
.lamps em { font: 400 12px/1.25 var(--mono); font-style: normal; color: var(--ink-2); text-align: center; }
.phone { justify-self: center; width: min(100%, 340px); }
.screen { aspect-ratio: 9 / 17; border-radius: 44px; padding: 22px 20px 16px; background: var(--paper); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 0 0 9px var(--ink), 0 0 0 10px color-mix(in srgb, var(--ink) 30%, transparent), 0 40px 80px -30px color-mix(in srgb, var(--ink) 45%, transparent);
  font-size: 13px; overflow: hidden; }
.phone figcaption { margin-top: 26px; text-align: center; font: 400 12px/1 var(--mono); color: var(--ink-2); }
.ph-top { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.ph-mark { font: 500 11px/1 var(--mono); letter-spacing: 3px; }
.ph-biz { font-weight: 600; }
.ph-biz::after { content: " ▾"; color: var(--ink-2); }
.ph-lamp { width: 96px; height: 96px; align-self: center; margin: 6px 0 2px; }
.ph-num { display: flex; align-items: baseline; gap: 8px; }
.ph-big { font: 500 38px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ph-unit { font: 400 12px/1 var(--mono); color: var(--ink-2); }
.ph-delta { font: 400 13px/1 var(--mono); color: #1a7f37; }
.ph-delta::after { content: " ▲"; }
.spark { width: 100%; height: 44px; overflow: visible; }
.spark path { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .phone .spark path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
  .js .phone.in .spark path { stroke-dashoffset: 0; }
}
.ph-card { display: grid; gap: 5px; padding: 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); margin-top: 4px; }
.ph-k { font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ph-card b { font-size: 15px; font-weight: 600; }
.ph-meta { font: 400 12px/1.3 var(--mono); color: var(--ink-2); }
.ph-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.ph-btns i { font-style: normal; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.ph-btns i.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.ph-study { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.ph-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink-2); }
.ph-next { font-size: 12px; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.ph-run { display: flex; gap: 12px; font: 400 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
.ph-run b { color: var(--ink); font-weight: 500; }
.ph-tabs { margin-top: auto; display: flex; justify-content: space-between; padding: 12px 6px 0; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
.ph-tabs b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .moving { grid-template-columns: 1fr; } .phone { width: min(100%, 320px); } }

/* bento micro-graphics */
.cell .g { margin-bottom: auto; padding-top: 34px; }
.drops12 { display: grid; grid-template-columns: repeat(6, 12px); gap: 7px; }
.drops12 i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.drops12 i:nth-child(-n+9) { background: var(--ink); }
.g-cap { display: block; margin-top: 10px; font: 400 12px/1.3 var(--mono); color: var(--ink-2); }
.g-brain { list-style: none; padding: 0; display: grid; gap: 10px; max-width: 460px; position: relative; z-index: 1; }
.g-brain li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 9%, transparent); font-size: 15px; color: var(--paper); }
.g-brain em { flex: none; font: 400 11px/1 var(--mono); font-style: normal; color: color-mix(in srgb, var(--paper) 62%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .js .g-brain li { animation: finding 12s var(--ease) infinite both; }
  .js .g-brain li:nth-child(2) { animation-delay: 1.2s; } .js .g-brain li:nth-child(3) { animation-delay: 2.4s; }
  .js .g-brain li:nth-child(4) { animation-delay: 3.6s; }
  @keyframes finding { 0% { opacity: 0; transform: translateY(8px); } 8%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
}
.c-product .drops { opacity: .9; }
.g-checks { list-style: none; padding: 0; display: grid; gap: 8px; font: 400 13px/1.2 var(--mono); }
.g-checks li::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 11px; }
.g-ledger { display: grid; gap: 6px; max-width: 260px; font: 400 13px/1.2 var(--mono); }
.g-ledger div { display: flex; justify-content: space-between; gap: 16px; }
.g-ledger dt { color: var(--ink-2); } .g-ledger dd { margin: 0; font-variant-numeric: tabular-nums; }
.g-ledger .fee { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 600; }
.g-ledger .fee dt { color: var(--ink); }
.g-formats { display: flex; align-items: flex-end; gap: 10px; }
.g-formats span { display: grid; place-items: end start; padding: 6px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--ink);
  font: 400 10px/1 var(--mono); color: var(--ink-2); }
.f916 { width: 54px; height: 96px; } .f11 { width: 76px; height: 76px; } .f45 { width: 68px; height: 85px; }
.c-ops { align-items: center; }
.g-source { display: grid; justify-items: end; gap: 6px; padding-top: 0 !important; margin: 0 !important; }
.src-n { font: italic 400 48px/1 var(--serif); }
.src-tag { font: 400 12px/1 var(--mono); color: var(--ink-2); padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 860px) { .g-source { justify-items: start; } }

/* the mission path: a drop travels the rail as the section scrolls by */
.steps { position: relative; }
.traveler { position: absolute; top: -8px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); z-index: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .traveler { animation: travel linear both; animation-timeline: view(); animation-range: entry 40% cover 60%; }
    @keyframes travel { from { left: 0; } to { left: calc(75% + 0px); } }
  }
}
@media (max-width: 860px) { .traveler { display: none; } }

/* the approval sheet */
.hold { display: grid; gap: 8px; font-size: 15px; }
.hold-bar { display: block; height: 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; margin-bottom: 6px; }
.hold-bar i { display: block; height: 100%; background: var(--ink); border-radius: 999px; }
.hold-row { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-2); }
.hold-row b { color: var(--ink); font: 500 14px/1.4 var(--mono); }