/* it. — a design of its own.
   Headings are set in Inter Display Bold, the type of the mark, and end in the mark's round green dot
   (the Dot font replaces only the full stop). The big moments, the first line, the closing line and
   the numbers, are set in It Pixel: letters built from small app icons. Your agent speaks in mono.
   Paper and ink, a few dark bands, and one green that only ever means your agent is there. */
@font-face { font-family: "Dot"; src: url(/fonts/dot.woff2) format("woff2"); unicode-range: U+2E; font-display: block; }
@font-face { font-family: "Head"; src: url(/fonts/display-700.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Logo"; src: url(/fonts/display-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "It Pixel"; src: url(/fonts/it-pixel.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "Text"; src: url(/fonts/inter-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Mono"; src: url(/fonts/mono-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --paper: #ecebe4; --paper-2: #e4e2d9; --card: #fbfaf6; --ink: #0b0b0c; --ink-2: #4a4944; --ink-3: #64625b; --rule: rgba(11,11,12,.1);
  --live: #34d399; --live-ink: #047857; --night: #0b0b0c;
  --disp: Dot, Head, "Inter Display", Inter, system-ui, sans-serif; --pix: "It Pixel", Head, sans-serif; --mono: Mono, ui-monospace, Menlo, monospace; --text: Text, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(18px, 3.2vw, 56px); --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--text); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--live-ink); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; z-index: 60; left: 12px; top: -60px; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 12px; }
h2 { font: 700 clamp(34px, 3.9vw, 64px)/1.02 var(--disp); letter-spacing: -.04em; }
.lede { margin-top: 18px; max-width: 52ch; font: 400 18px/1.55 var(--text); color: var(--ink-2); letter-spacing: -.005em; }
/* the name, in a sentence, set in its own type so it never reads as a pronoun */
b.it { font: 700 1em/1 var(--disp); letter-spacing: -.02em; }
.sec { padding: clamp(64px, 11vh, 130px) var(--pad); border-top: 1px solid var(--rule); }

/* ---------- the bar ---------- */
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 68px; display: flex; align-items: center; gap: 28px; padding: 0 var(--pad); transition: background .3s, box-shadow .3s; }
.bar.solid { background: rgba(236,235,228,.97); box-shadow: 0 1px 0 var(--rule); }
/* the mark, exactly as on itcan.do: "it" in Inter Display Bold, and the round green dot */
.mark { font: 700 30px/1 Logo, "Inter Display", Inter, sans-serif; letter-spacing: -.05em; white-space: nowrap; text-decoration: none; color: var(--ink); }
.mark .dot { display: inline-block; width: .2em; height: .2em; margin-left: .045em; border-radius: 50%; background: #34d399; }
.mark.big { font-size: 64px; }
.links { margin-left: auto; display: flex; gap: 24px; font: 400 14px var(--mono); }
.links a { text-decoration: none; color: var(--ink-2); transition: color .2s; }
.links a:hover { color: var(--ink); }
.menu { display: none; }
.btn-i { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 11px; background: var(--ink); color: var(--paper); font: 500 14px var(--mono); text-decoration: none; }

/* ---------- the first screen ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--paper); }
.stage { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.type { position: absolute; left: 0; top: 0; overflow: visible; }
.type .g { fill: var(--ink); }
.type .dotg { fill: var(--live); }
.type.dim { opacity: .1; }
.kick { position: absolute; z-index: 7; font: 26px/1 var(--disp); letter-spacing: -.02em; }
/* your agent: the green full stop, named */
.agent { position: absolute; z-index: 7; border-radius: 50%; background: var(--live); pointer-events: none; transform: translate(-50%, -50%); transition: background .4s; }
.agent::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--live); animation: listen 2.4s ease-out infinite; }
@keyframes listen { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.agent.busy::after { animation-duration: .9s; }
.agent .tag { position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%; padding: 4px 9px; border-radius: 99px; background: var(--live); color: #052e1c; font: 600 13px/1.2 var(--mono); white-space: nowrap; transition: opacity .3s; }
.agent.l .tag { left: auto; right: -4px; top: calc(100% + 14px); translate: 0 0; }
.agent.off { background: #b8b6ad; }
.agent.off::after { animation: none; opacity: 0; }
.agent.off .tag { opacity: 0; }
.offlab { position: absolute; z-index: 6; translate: 0 -50%; padding: 4px 10px; border-radius: 99px; background: rgba(11,11,12,.07); font: 500 14px var(--mono); color: var(--ink); white-space: nowrap; opacity: 0; transition: opacity .35s; pointer-events: none; }
.offlab.on { opacity: 1; }
/* the foot of the first screen: what It is in one sentence, the four claims with the one being shown
   lit, and the line to paste to your agent */
.h-say { position: absolute; z-index: 8; left: var(--pad); }
.h-lede { max-width: 40ch; margin-bottom: 16px; font: 400 clamp(17px, 1.25vw, 20px)/1.45 var(--text); color: var(--ink); letter-spacing: -.01em; }
.usps { list-style: none; display: grid; gap: 5px; font: 400 15.5px/1.35 var(--text); }
.usps li { position: relative; padding-left: 18px; color: var(--ink-3); transition: color .35s; }
.usps li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45; transition: background .35s, opacity .35s, box-shadow .35s; }
.usps li.on { color: var(--ink); font-weight: 550; }
.usps button { display: block; text-align: left; font: inherit; color: inherit; padding: 2px 0; }
.usps button:hover { color: var(--ink); }
.usps li.on::before { background: var(--live); opacity: 1; box-shadow: 0 0 0 4px rgba(52,211,153,.22); }
.usps em { font-style: normal; font-weight: 600; color: var(--live-ink); margin-left: 4px; }
.h-act { position: absolute; z-index: 8; right: var(--pad); bottom: clamp(24px, 4vh, 40px); display: grid; gap: 10px; justify-items: end; width: min(480px, 46vw); }
.h-act.left { right: auto; bottom: auto; justify-items: start; }
.h-links.n { display: none; }
.h-pause { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border-radius: 99px; background: rgba(251,250,246,.8); box-shadow: 0 0 0 1px var(--rule); font: 500 12.5px var(--mono); color: var(--ink-2); backdrop-filter: blur(6px); }
.h-pause i { position: relative; width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero.paused .h-pause i { width: 0; height: 0; border-left: 9px solid currentColor; border-right: 0; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.h-pause:hover { color: var(--ink); }
.cmdbox.sm { width: 100%; padding: 12px 12px 12px 16px; border-radius: 15px; gap: 4px 12px; }
.cmdbox.sm code { font-size: 14px; }
.cmdbox.sm button { height: 36px; padding: 0 14px; font-size: 13px; }
.h-links { display: flex; gap: 20px; align-items: center; font-size: 14px; }
.h-links a { color: var(--ink-2); text-underline-offset: 4px; }
.h-film { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink) !important; font-weight: 500; }
.h-film i { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.h-film i::after { content: ""; position: absolute; left: 8.5px; top: 6.5px; border-left: 7px solid var(--paper); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
/* a letter's window, swollen into the screen a page belongs on */
/* the screens' own room: it clips them once, at its edge, so that none ever crosses the line */
.room { position: absolute; z-index: 6; overflow: hidden; pointer-events: none; }
.sw { position: absolute; background: #0b0b0c; box-shadow: 0 0 0 1px rgba(11,11,12,.25); }
/* the deep shadow only while a screen stands still: a moving one is never repainted with it */
.sw::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 40px 90px -20px rgba(30,25,15,.45); opacity: 0; transition: opacity .35s; }
.sw.rest::before { opacity: 1; }
/* what you say to your agent, written where you can see it */
.said { position: absolute; z-index: 7; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--rule), 0 12px 30px -18px rgba(0,0,0,.35); font: 500 15px/1.35 var(--mono); color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .35s var(--ease); pointer-events: none; }
.said::before { content: "you ›"; color: var(--ink-3); font-weight: 400; }
.said.on { opacity: 1; transform: none; }
@media (max-width: 760px) { .said { font-size: 12.5px; padding: 7px 11px; } }
.sw[hidden] { display: none; }
.sw .scr { position: relative; width: 100%; height: 100%; overflow: hidden; background: #111; }
.sw video, .sw img, .sw .ov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sw .ov[hidden] { display: none; }
.sw .scr::after { content: ""; position: absolute; inset: 0; background: #0b0b0c; opacity: 0; transition: opacity .35s; pointer-events: none; }
.sw.off .scr::after { opacity: .94; }
.sw .base { position: absolute; left: -6%; right: -6%; top: 100%; height: calc(14px * var(--k, 0)); border-radius: 0 0 14px 14px; background: linear-gradient(#3a3a40, #121215); opacity: var(--k, 0); display: none; }
.sw.laptop .base { display: block; }
.sw.tv .base { display: block; left: 40%; right: 40%; height: calc(12px * var(--k, 0)); border-radius: 0 0 6px 6px; background: linear-gradient(#1d1d21, #0b0b0d); }
.sw .lab { position: absolute; left: 50%; top: calc(100% + 24px); translate: -50% 0; font: 400 13.5px var(--mono); color: var(--ink-2); white-space: nowrap; opacity: var(--k, 0); }
.sw.phone .lab { top: calc(100% + 14px); }

/* ---------- the films ---------- */
.films { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); grid-template-rows: auto 1fr; gap: 28px clamp(28px, 4vw, 72px); align-items: start; }
.f-head { grid-column: 1; }
.f-player { grid-column: 2; grid-row: 1 / 3; position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 40px 90px -30px rgba(30,25,15,.45); }
.f-player video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.f-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.f-poster:hover img { transform: scale(1.02); }
.f-go { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 99px; background: rgba(251,250,246,.94); color: var(--ink); font: 500 14px var(--mono); }
.f-play { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); }
.f-play::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 14px solid var(--paper); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.f-pick { grid-column: 1; display: grid; gap: 12px; align-self: end; }
.fp { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: 16px; text-align: left; box-shadow: 0 0 0 1px var(--rule); transition: background .2s, box-shadow .2s; }
.fp img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; }
.fp-t b { display: block; font: 24px/1 var(--disp); letter-spacing: -.02em; font-weight: 400; }
.fp-t span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.fp-len { font-size: 13px; color: var(--ink-3); }
.fp.on { background: var(--card); box-shadow: 0 0 0 1.5px var(--ink); }

/* ---------- the four claims, each with its own page ---------- */
.usp { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(64px, 11vh, 130px) var(--pad); border-top: 1px solid var(--rule); }
.usp.flip .u-txt { order: 2; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 var(--pad) clamp(56px, 9vh, 110px); }
.usp.card { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: start; padding: clamp(28px, 3vw, 48px); border: 0; border-radius: 28px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.usp.card.night { background: var(--night); box-shadow: none; }
.usp.card .dv.phone { width: 100%; max-width: 260px; justify-self: end; }
.usp.card .u-talk { min-height: 0; }
.usp.card .u-states li { grid-template-columns: 14px minmax(0, 1fr); }
.usp.card .u-states span { grid-column: 2; }
#task { padding-bottom: clamp(40px, 6vh, 72px); }
.usp.night { background: var(--night); color: var(--paper); border-top: 0; }
.night .u-m, .night .lede { color: rgba(236,235,228,.8); }

.u-m { margin-top: 22px; max-width: 44ch; font: 400 18px/1.55 var(--text); color: var(--ink-2); letter-spacing: -.005em; }
.u-talk { margin-top: 26px; min-height: 7em; display: flex; flex-direction: column; gap: 10px; font: 400 15px/1.45 var(--mono); }
.u-talk p { display: flex; align-items: flex-start; gap: 10px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease); }
.u-talk p.in { opacity: 1; transform: none; }
.u-talk .you::before { content: "›"; color: var(--live); font-weight: 700; }
.u-talk .ag img { width: 22px; height: 22px; border-radius: 6px; background: #fff; object-fit: contain; padding: 2px; flex: none; margin-top: 1px; box-shadow: 0 0 0 1px rgba(11,11,12,.1); }
.u-talk .ag b { font-weight: 600; white-space: nowrap; }
.u-talk .ag b::after { content: ":"; }
.u-states { list-style: none; margin-top: 28px; display: grid; gap: 10px; font-size: 15px; }
.u-states li { display: grid; grid-template-columns: 14px 150px minmax(0, 1fr); gap: 10px; align-items: center; }
.u-states i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(236,235,228,.4); }
.u-states i.on { background: var(--live); box-shadow: 0 0 0 4px rgba(52,211,153,.2); }
.u-states i.half { background: linear-gradient(90deg, var(--live) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--live); }
.u-states b { font-weight: 600; }
.u-states span { color: rgba(236,235,228,.75); }
.u-logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.u-logos img { width: 46px; height: 46px; border-radius: 13px; background: #fff; object-fit: contain; padding: 7px; box-shadow: 0 0 0 1px rgba(11,11,12,.1); transition: transform .35s var(--ease), box-shadow .35s, opacity .35s; }
.u-logos img[alt="T3 Code"], .u-logos img[alt="Hermes Agent"] { padding: 0; }
.u-logos:has(.lit) img:not(.lit) { opacity: .35; }
.u-logos img.lit { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 2px var(--live), 0 10px 24px rgba(16,185,129,.25); }
/* devices, each holding its page's recorded moment */
.dv { position: relative; justify-self: center; background: #0b0b0c; box-shadow: 0 0 0 1px rgba(11,11,12,.2), 0 40px 90px -30px rgba(30,25,15,.45); }
.night .dv { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 100px -20px rgba(0,0,0,.8); }
.dv-scr { position: relative; overflow: hidden; width: 100%; height: 100%; background: #fff; }
.dv video, .dv .ov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dv .ov[hidden] { display: none; }
.dv.laptop { width: 100%; padding: 1.6%; border-radius: 18px; }
.dv.laptop .dv-scr { aspect-ratio: 1280 / 800; border-radius: 6px; }
.dv-base { position: absolute; left: -7%; right: -7%; top: 100%; height: 16px; border-radius: 0 0 16px 16px; background: linear-gradient(#3a3a40, #121215); }
.dv.phone { width: min(290px, 80%); padding: 10px; border-radius: 46px; }
.dv.phone .dv-scr { aspect-ratio: 390 / 844; border-radius: 37px; }
.usp.wide { grid-template-columns: 1fr; }
.usp.wide .u-txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 72px); align-items: end; }
.usp.wide h2 { grid-column: 1; }
.usp.wide .u-m { grid-column: 2; grid-row: 1; margin-top: 0; }
.u-room img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px rgba(11,11,12,.08), 0 40px 90px -30px rgba(40,30,10,.35); }
.usp.nums { grid-template-columns: 1fr; }
.u-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.u-nums b { display: block; font: clamp(76px, 10vw, 180px)/.9 var(--pix); letter-spacing: -.01em; font-weight: 400; }
.u-nums span { display: block; margin-top: 14px; font: 400 16px/1.4 var(--text); color: var(--ink-2); }
.u-foot { font: 400 14px var(--text); color: var(--ink-3); }

/* ---------- how people work with agents ---------- */
.cmp { margin-top: 44px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); overflow: hidden; }
.cr { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); align-items: center; border-top: 1px solid var(--rule); }
.cr:first-child { border-top: 0; }
.cr > * { padding: 16px 18px; font-size: 15px; color: var(--ink-2); }
.cr b { font-weight: 550; color: var(--ink); }
.ch > * { padding-top: 20px; padding-bottom: 14px; font: 400 13px var(--mono); color: var(--ink-3); }
.ch .ci { font: 30px/1 var(--disp); color: var(--paper); letter-spacing: -.02em; }
.cr .ci { align-self: stretch; display: flex; align-items: center; background: var(--ink); color: var(--paper); }
.cr .yes, .cr .no { font-size: 0; }
.cr .yes::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23ecebe4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.cr .ci.yes::before { background-color: var(--live); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23052e1c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cr .no::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: rgba(11,11,12,.28); margin-left: 3px; }
.cr .yes, .cr .no { display: flex; align-items: center; }
.quote { margin-top: clamp(48px, 8vh, 90px); }
.quote blockquote { max-width: 26ch; font: 400 clamp(26px, 2.6vw, 44px)/1.12 var(--disp); letter-spacing: -.02em; }
.quote figcaption { margin-top: 16px; font-size: 14px; color: var(--ink-3); }

/* ---------- pages agents made ---------- */
.mg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-top: 36px; }
.mg figure { margin: 0; }
.mg button { display: block; width: 100%; border-radius: 18px; cursor: zoom-in; }
.mg button:hover img { transform: scale(1.012); }
.mg img { transition: transform .5s var(--ease); width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 18px; box-shadow: 0 0 0 1px var(--rule), 0 24px 50px -30px rgba(30,25,15,.35); background: #fff; }
.mg img.tall { object-fit: contain; padding: 18px 0; background: var(--paper-2); }
.mg figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; }
.mg figcaption b { font: 24px/1 var(--disp); letter-spacing: -.02em; font-weight: 400; white-space: nowrap; }
.mg figcaption span { font: 400 15px/1.45 var(--text); color: var(--ink-2); }

.pv { margin: auto; max-width: min(1200px, 94vw); max-height: 94vh; padding: 0; border: 0; border-radius: 24px; background: var(--card); color: var(--ink); box-shadow: 0 40px 120px -20px rgba(0,0,0,.5); }
.pv::backdrop { background: rgba(11,11,12,.6); backdrop-filter: blur(6px); }
.pv-in { position: relative; display: grid; gap: 16px; padding: 22px; }
.pv-ask { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding-right: 90px; }
.pv-ask span { font: 400 13px var(--mono); color: var(--ink-3); }
.pv-ask b { font: 500 16px/1.4 var(--mono); }
.pv-ask b::before { content: "› "; color: var(--live-ink); }
.pv img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 12px; box-shadow: 0 0 0 1px var(--rule); background: #fff; }
.pv.tall img { width: auto; max-width: 100%; margin: 0 auto; }
.pv-cap { font-size: 15px; color: var(--ink-2); }
.pv-x { position: absolute; top: 16px; right: 16px; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 500 13px var(--mono); }

/* ---------- a room for every job ---------- */
.jgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 18px; margin-top: 40px; }
.jk { display: flex; flex-direction: column; gap: 8px; }
.jk h3 { margin-bottom: 4px; font: 24px/1 var(--disp); letter-spacing: -.02em; font-weight: 400; }
.jk button { text-align: left; color: var(--ink); padding: 10px 13px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); font: 400 14px/1.35 var(--mono); transition: background .2s, box-shadow .2s, transform .15s; }
.jk button:hover { background: #fff; box-shadow: 0 0 0 1px rgba(11,11,12,.25); }
.jk button:active { transform: scale(.98); }
.jk button.done { box-shadow: 0 0 0 1.5px var(--live-ink); }
.jk button.done::after { content: " · copied"; color: var(--live-ink); font-weight: 600; }

/* ---------- install ---------- */
.inst { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.i-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; font-size: 14.5px; }
.i-facts li { padding: 6px 12px; border-radius: 99px; box-shadow: 0 0 0 1px var(--rule); }
.i-box { display: grid; gap: 14px; }
.cmdbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l b" "c b"; gap: 6px 14px; align-items: center; padding: 16px 16px 16px 20px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.c-l { grid-area: l; font: 400 12.5px var(--mono); color: var(--ink-3); }
.cmdbox code { grid-area: c; font: 500 15px/1.4 var(--mono); overflow-wrap: anywhere; }
.cmdbox button { grid-area: b; height: 40px; padding: 0 16px; border-radius: 11px; background: var(--ink); color: var(--paper); font: 500 14px var(--mono); }
.i-send { justify-self: start; height: 44px; padding: 0 16px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 500; font-size: 15px; }
.i-send[hidden] { display: none; }
.i-more summary { cursor: pointer; padding: 10px 0; font-size: 15px; color: var(--ink-2); }
.i-more[open] summary { margin-bottom: 10px; }
.i-more .cmdbox + .cmdbox { margin-top: 10px; }
.i-fine { font-size: 14px; color: var(--ink-3); }

/* ---------- the close, writing to us, and the footer ---------- */
.foot { padding: 0 var(--pad) 32px; border-top: 1px solid var(--rule); }
.close { padding: clamp(80px, 14vh, 160px) 0 clamp(64px, 10vh, 120px); }
/* the close: "can it do that?" becomes "it can do that." */
.cl-stage { position: relative; height: 1em; font: 400 clamp(64px, 12vw, 220px)/1 var(--disp); letter-spacing: -.05em; }
.cl-line { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; }
.cl-line.live { height: 1em; }
.cl-p, .cl-g, .cl-meter, .cl-line .cl-dot { position: absolute; left: 0; top: 0; white-space: pre; }
.cl-meter { visibility: hidden; }
.cl-p, .cl-line .cl-dot { opacity: 0; }
.cl-line .cl-dot { margin: 0; transform-origin: 0 0; }
.cl-line.run .cl-p, .cl-line.run .cl-dot { will-change: transform, opacity; }
.hdot { display: inline-block; position: relative; width: .2em; height: .2em; margin-left: .04em; }
.hdot i { position: absolute; inset: 0; border-radius: 50%; background: var(--live); }
.hdot::after { content: ""; position: absolute; inset: -60%; border-radius: 50%; border: .03em solid var(--live); opacity: 0; }
.hdot.ping::after { animation: ring 1.1s var(--ease); }
@keyframes ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.cl-sub { margin-top: 22px; font: 400 clamp(18px, 1.5vw, 24px) var(--text); color: var(--ink-2); letter-spacing: -.01em; }
.cl-sub span { color: var(--live-ink); }
.cl-cta { display: flex; gap: 10px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border-radius: 13px; background: var(--ink); color: var(--paper); font: 550 15.5px var(--text); text-decoration: none; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
/* writing to us: one wide page of It's own under its heading. On the left, what it is about, as tiles to tap,
   with the address as the last of them; on the right, It's answer to the tile tapped, and the box to write in */
.write { padding: clamp(56px, 8vh, 96px) 0; border-top: 1px solid var(--rule); }
.write-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: clamp(22px, 3.2vh, 36px); }
.write-h { font: 400 clamp(36px, 4vw, 64px)/1 var(--disp); letter-spacing: -.04em; }
.write-or { font-size: 16px; color: var(--ink-2); }
.wpage { --rule2: rgba(12,12,12,.11); position: relative; border-radius: 28px; background: var(--card); color: var(--ink); overflow: hidden; box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -30px rgba(30,25,15,.35); }
.wbar { position: relative; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--rule2); }
.wm { font: 700 24px/1 Logo, "Inter Display", Inter, sans-serif; letter-spacing: -.045em; }
.wm i { position: relative; display: inline-block; width: .22em; height: .22em; border-radius: 50%; background: var(--live); margin-left: .04em; }
.wm i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); opacity: 0; }
.wm i.ping::after { animation: wping 900ms var(--ease); }
@keyframes wping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.wbar-t { font-weight: 600; font-size: 14px; }
.wbar-s { margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.wpage[data-state="failed"] .wbar-s { color: #c8372d; }
.wbar-line { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; overflow: hidden; opacity: 0; transition: opacity 200ms; }
.wbar-line::before { content: ""; position: absolute; top: 0; left: 0; width: 34%; height: 100%; border-radius: 2px; background: var(--live); transform: translateX(-100%); }
.wpage[data-state="sending"] .wbar-line { opacity: 1; }
.wpage[data-state="sending"] .wbar-line::before { animation: wline 1100ms cubic-bezier(.65,0,.35,1) infinite; }
@keyframes wline { to { transform: translateX(300%); } }
.wform { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 24px clamp(24px, 3vw, 48px); padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2.2vw, 30px) 0; }
.wpick { display: grid; gap: 16px; align-content: start; }
.wwrite { display: grid; gap: 12px; align-content: start; }
.wask { font: 400 clamp(24px, 2.2vw, 32px)/1.05 var(--disp); letter-spacing: -.02em; }
.wabout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wchip { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 132px; padding: 16px 16px 15px; border-radius: 18px; text-align: left; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule2); color: var(--ink); transition: background .2s, color .2s, box-shadow .25s, transform .25s var(--ease), opacity .3s; }
.wchip b { display: block; font: 600 16px/1.2 var(--text); letter-spacing: -.01em; }
.wt > span { display: block; margin-top: 3px; font: 400 13px/1.35 var(--text); color: var(--ink-3); transition: color .2s; }
.wico { display: block; width: 40px; height: 40px; fill: currentColor; transform-origin: 50% 80%; }
.wico rect { transform-box: fill-box; transform-origin: center; }
.wpage.pre .wico rect { transform: scale(0); }
.wpage.built .wico rect { animation: wcell .5s var(--ease) backwards; }
@keyframes wcell { from { transform: scale(0); } 60% { transform: scale(1.3); } to { transform: none; } }
.wchip:hover .wico { animation: whop .55s var(--ease); }
.wchip[aria-pressed="true"] .wico { animation: wpop .45s var(--ease); }
@keyframes whop { 40% { transform: translateY(-4px) rotate(-8deg); } 70% { transform: translateY(0) rotate(4deg); } }
@keyframes wpop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.wmail { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 132px; padding: 16px; border-radius: 18px; border: 1.5px dashed var(--rule2); font-size: 13px; color: var(--ink-3); }
.wmail .wico { color: var(--ink-3); }
.wmt { display: grid; gap: 3px; }
.wmail a { font: 500 14px/1.3 var(--mono); color: var(--ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.wmail a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.wmail:hover { border-color: var(--ink-3); }
/* It answers the tile tapped, on the page, before anything is sent */
.wreply { display: flex; gap: 10px; align-items: baseline; align-self: start; justify-self: start; max-width: 100%; min-height: 37px; padding: 8px 13px; border-radius: 12px 12px 12px 4px; background: rgba(12,12,12,.88); color: #fff; font-size: 14.5px; line-height: 1.4; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease); }
.wreply.in { opacity: 1; transform: none; }
.wreply span { flex: none; font-size: 12px; color: rgba(255,255,255,.5); }
.wreply b { font-weight: 400; min-width: 0; }
.wreply b:empty::after { content: "…"; }
.wchip:hover { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1px rgba(12,12,12,.2), 0 16px 30px -18px rgba(30,25,15,.45); }
.wchip:active { transform: scale(.96); }
.wchip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; transform: none; }
.wchip[aria-pressed="true"] .wt > span { color: inherit; opacity: .62; }
.wfield { display: block; width: 100%; min-width: 0; padding: 14px 16px; border: 0; border-radius: 16px; background: rgba(236,235,228,.5); box-shadow: inset 0 0 0 1px var(--rule2); font: 400 15.5px/1.45 var(--mono); color: var(--ink); outline: 0; transition: box-shadow 160ms, background 160ms; }
textarea.wfield { min-height: 124px; resize: none; }
.wfield::placeholder { color: var(--ink-3); }
.wfield:hover { box-shadow: inset 0 0 0 1px rgba(12,12,12,.24); }
.wfield:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.wfield.wrong { box-shadow: inset 0 0 0 1.5px #c8372d; }
.wfield[readonly] { background: transparent; color: var(--ink-2); }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.wsend { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; min-width: 124px; padding: 0 22px; border-radius: 16px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform 160ms, background 160ms, opacity 160ms; }
.wsend:hover { background: #26272b; }
.wsend:active { transform: scale(.97); }
.wsend[disabled] { opacity: .55; cursor: progress; }
.wsend svg { flex: none; transition: transform 300ms var(--ease); }
.wsend:hover svg { transform: translateY(-2px); }
.wpage[data-state="sent"] .wsend { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(12,12,12,.24); }
.wpage[data-state="sent"] .wsend svg { display: none; }
.wpage[data-state="sent"] .wchip { pointer-events: none; }
.wpage[data-state="sent"] .wchip:not([aria-pressed="true"]) { opacity: .4; }
.wsaid { font-size: 14px; line-height: 1.45; color: #c8372d; }
.wsaid:empty { display: none; }
.write-hold { position: absolute; left: -200vw; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (min-width: 1001px) { .wwrite textarea.wfield { min-height: 196px; } }
@media (max-width: 1000px) { .wform { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .wabout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wchip, .wmail { min-height: 108px; padding: 13px 13px 12px; gap: 14px; }
  .wico { width: 34px; height: 34px; }
  .wchip b { font-size: 15px; }
  .wt > span { font-size: 12.5px; }
  .wmail a { font-size: 13px; }
}
.wlog { display: grid; grid-template-rows: 0fr; padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px); transition: grid-template-rows 520ms var(--ease); }
.wlog-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wlog-in::before { content: ""; flex: none; height: 12px; }
.wpage[data-state="sending"] .wlog, .wpage[data-state="sent"] .wlog { grid-template-rows: 1fr; }
.wpage[data-state="sending"] .wlog-in, .wpage[data-state="sent"] .wlog-in { min-height: 96px; }
.wlog p { display: flex; gap: 10px; align-items: baseline; max-width: 100%; padding: 8px 13px; border-radius: 12px; background: rgba(12,12,12,.88); color: #fff; font-size: 13.5px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity 350ms, transform 450ms var(--ease); }
.wlog p.in { opacity: 1; transform: none; }
.wlog p span { flex: none; font-size: 12px; color: rgba(255,255,255,.5); }
.wlog .wl-you span { color: var(--live); }
.wlog p b { font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.wlog .wl-you b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 48px; padding: clamp(48px, 7vh, 80px) 0; border-top: 1px solid var(--rule); }
.f-brand p { margin-top: 14px; color: var(--ink-2); }
.f-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.f-cols h3 { margin-bottom: 14px; font: 22px/1 var(--disp); letter-spacing: -.02em; font-weight: 400; }
.f-cols a, .f-cols span { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.f-cols a:hover { color: var(--ink); }
.works img { width: 18px; height: 18px; border-radius: 5px; object-fit: contain; background: #fff; }
.f-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); }
.f-terms { display: flex; gap: 18px; }
.f-terms a, .f-legal .url { color: var(--ink-2); text-underline-offset: 3px; }
.f-legal .url { margin-left: auto; font: 20px/1 var(--disp); text-decoration: none; color: var(--ink); }
.f-pat { margin-top: 18px; font-size: 12.5px; color: var(--ink-3); }
.toast { position: fixed; z-index: 70; left: 50%; top: 82px; translate: -50% -14px; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .35s var(--ease); }
.toast.show { opacity: 1; translate: -50% 0; }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  .links { gap: 18px; font-size: 13.5px; }
  .jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .usp, .usp.wide .u-txt, .films, .inst, .write { grid-template-columns: 1fr; }
  .usp.flip .u-txt { order: 0; }
  .usp.wide .u-m { grid-column: 1; grid-row: auto; margin-top: 18px; }
  .f-player, .f-pick, .f-head { grid-column: 1; grid-row: auto; }
  .u-nums { grid-template-columns: 1fr 1fr; }
  .u-talk { min-height: 0; }
  .mg { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .h-say { top: auto !important; right: var(--pad); bottom: 18px; width: auto !important; }
  .h-act { display: none; }
  .h-links.n { display: flex; margin-top: 6px; }
  .usps li:not(.on) { display: none; }
  .kick { display: none; }
}
@media (max-width: 900px) {
  .links { display: none; position: absolute; z-index: 2; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 6px var(--pad) 14px; background: rgba(236,235,228,.97); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rule), 0 20px 30px -20px rgba(0,0,0,.2); font-size: 16px; }
  .links a { display: block !important; padding: 13px 0; border-top: 1px solid var(--rule); color: var(--ink); }
  .links a:first-child { border-top: 0; }
  .bar.open { background: rgba(236,235,228,.97); }
  .bar.open .links { display: flex; }
  .btn-i { margin-left: auto; }
  .menu { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; }
  .menu i, .menu i::before, .menu i::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .2s; }
  .menu i { position: relative; }
  .menu i::before, .menu i::after { content: ""; position: absolute; left: 0; }
  .menu i::before { top: -6px; } .menu i::after { top: 6px; }
  .bar.open .menu i { background: transparent; }
  .bar.open .menu i::before { transform: translateY(6px) rotate(45deg); }
  .bar.open .menu i::after { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 760px) {

  .agent .tag { font-size: 11px; }
  .h-lede { font-size: 15.5px; margin-bottom: 8px; }
  .h-links a { padding: 11px 0; }
  .usps { font-size: 14.5px; }
  .cmdbox.sm code { font-size: 13px; }
  .h-links { gap: 16px; font-size: 13.5px; }
  .jgrid, .f-cols { grid-template-columns: 1fr 1fr; }
  .mg figcaption { flex-direction: column; gap: 6px; }
  .u-states li { grid-template-columns: 14px minmax(0, 1fr); }
  .u-states span { grid-column: 2; }
  .f-legal .url { margin-left: 0; }
  .f-cols a, .f-cols span { padding: 11px 0; }
  .f-terms a { padding: 10px 0; }
  .cr { grid-template-columns: 1fr 1fr; gap: 0; }
  .ch { display: none; }
  .cr b { grid-column: 1 / -1; padding-bottom: 6px; }
  .cr > span { display: flex; flex-direction: column; align-items: flex-start !important; gap: 6px; padding-top: 8px; font-size: 14px; }
  .cr > span::after { content: attr(data-c); order: -1; font: 400 11.5px var(--mono); color: var(--ink-3); }
  .cr .ci::after { color: rgba(236,235,228,.6); }
  .cr .yes, .cr .no { font-size: 0; }
  .cr .yes::after, .cr .no::after { font-size: 11.5px; }
  .cr .ci { border-radius: 0; }
}
@media (max-width: 480px) {
  .jgrid { grid-template-columns: 1fr; }
  .wrow { grid-template-columns: 1fr; }
  .cmdbox:not(.sm) { grid-template-areas: "l" "c" "b"; grid-template-columns: 1fr; }
  .cmdbox:not(.sm) button { justify-self: start; }
}

/* fixes */
.fp img { height: auto; }
.dv.laptop { width: calc(100% - 10%); margin: 0 5%; }
.usp { overflow-x: clip; }
.quote blockquote { font: 400 clamp(20px, 1.9vw, 30px)/1.3 var(--mono); letter-spacing: -.01em; max-width: 36ch; }

/* ---------- the page that is not there ---------- */
.nf { min-height: 100vh; display: grid; place-items: center; }
.nf-in { display: grid; justify-items: start; gap: 22px; padding: 48px var(--pad); max-width: 900px; }
.nf-mark { font-size: 48px; }
.nf-h { font: 400 clamp(44px, 7vw, 96px)/.98 var(--disp); letter-spacing: -.04em; }
.nf-sub { color: var(--ink-2); }

/* a room for every job, on a phone: one card per kind, saying one thing at a time */
.jnext { display: none; }
@media (max-width: 760px) {
  .jk { position: relative; padding: 16px 16px 12px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
  .jk > button:not(.jnext) { display: none; padding: 4px 0 0; background: none; box-shadow: none; font-size: 15px; min-height: 3.2em; }
  .jk > button.cur { display: block; animation: jin .45s var(--ease); }
  .jk > button:not(.jnext):hover { background: none; box-shadow: none; }
  .jk > button.done { box-shadow: none; color: var(--live-ink); }
  .jnext { display: inline-flex !important; align-items: center; gap: 8px; align-self: flex-start; height: 40px; margin-top: 4px; padding: 0 12px !important; border-radius: 10px !important; background: rgba(11,11,12,.06) !important; box-shadow: none !important; font: 500 13px var(--mono) !important; color: var(--ink-2) !important; }
}
@keyframes jin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the agents, named under their marks */
.u-logos .lg { display: grid; justify-items: center; gap: 7px; width: 84px; }
.u-logos .lg b { font: 400 12.5px/1.2 var(--text); color: var(--ink-2); text-align: center; }

/* every screen at once, to try */

/* the comparison: a note under each column's name */
.ch small { display: block; margin-top: 4px; font: 400 12px/1.3 var(--text); color: var(--ink-3); letter-spacing: 0; text-transform: none; }
.next .quote { margin: 0 0 clamp(28px, 5vh, 48px); }
.next .quote blockquote { font-size: clamp(18px, 1.5vw, 24px); color: var(--ink-2); }

/* install: the steps, and the answers beside the line */
.i-steps { list-style: none; counter-reset: st; display: grid; gap: 12px; margin-top: 26px; }
.i-steps li { counter-increment: st; position: relative; padding-left: 40px; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.i-steps li::before { content: counter(st); position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 500 13px var(--mono); }
.i-steps b { color: var(--ink); font-weight: 600; }

/* on a phone, long lists show their first few */
.more { display: none; }
@media (max-width: 760px) {
  .more:not([hidden]) { display: block; margin-top: 18px; height: 46px; padding: 0 18px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 500; }
  .mg.short figure:nth-child(n+5), .jgrid.short .jk:nth-child(n+5) { display: none; }
  .u-logos .lg { width: 70px; }
  .cmp { margin-top: 28px; }
  .cr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ch { display: grid; }
  .ch > :first-child { display: none; }
  .ch > * { padding: 12px 6px 8px; font-size: 10.5px; line-height: 1.25; }
  .ch small { display: none; }
  .ch .ci { font-size: 22px; padding-left: 10px; }
  .cr b { grid-column: 1 / -1; padding: 12px 12px 4px; font-size: 14px; }
  .cr > span { display: flex; flex-direction: column; justify-content: center; padding: 6px 8px 12px; font-size: 12px; line-height: 1.3; }
  .cr > span::after { content: none; }
  .cr .yes, .cr .no { font-size: 0; }
  .cr .ci { padding-left: 10px; }
  .h-links { gap: 18px; }
}

@media (max-width: 900px) {
  .pair { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .usp.card { grid-template-columns: 1fr; }
  .usp.card .dv.phone { justify-self: center; max-width: 240px; }
  .h-pause { top: 76px; }
}

.h-note { font: 400 12.5px var(--mono); color: var(--ink-3); }
.usp.card .u-logos { display: grid; grid-template-columns: repeat(3, 84px); }

/* round 5 */
.hero .agent { opacity: 0; transition: opacity .3s, background .4s; }
.hero.ready .agent { opacity: 1; }
.hero.paused .agent::after { animation-play-state: paused; }
.h-links { flex-wrap: wrap; }
.h-pause { height: 30px; font-size: 12px; background: transparent; backdrop-filter: none; }
.h-pause.n { display: none; }
@media (max-width: 1000px) { .h-pause.n { display: inline-flex; } .h-pause:not(.n) { display: none; } }

/* how it works: your screens, It on your computer, your agent, and what passes between them */
.how .how-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 72px); align-items: end; }
.how .how-head .lede { margin-top: 0; }
.dg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .55fr) minmax(0, .9fr) minmax(90px, .55fr) minmax(0, 1fr); align-items: center; margin-top: 44px; padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.dg-n { display: grid; justify-items: center; gap: 12px; padding: 22px 14px; border-radius: 20px; text-align: center; }
.dg-k { font: 400 12.5px var(--mono); color: var(--ink-3); }
.dg-s { font-size: 14px; line-height: 1.4; color: var(--ink-2); max-width: 22ch; }
.dg-it { background: var(--ink); color: var(--paper); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.dg-it .dg-k, .dg-it .dg-s { color: rgba(236,235,228,.7); }
.dg-mark { font-size: 60px; color: var(--paper); }
.dg-dev { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.dg-dev button { display: block; border: 3px solid var(--ink); border-radius: 6px; background: #fff; }
.dg-dev .d-lap { width: 62px; height: 40px; border-bottom-width: 7px; }
.dg-dev .d-tv { width: 78px; height: 50px; }
.dg-dev .d-ph { width: 24px; height: 44px; border-radius: 7px; }
.dg-logos { display: grid; grid-template-columns: repeat(3, 34px); gap: 6px; }
.dg-logos img { width: 34px; height: 34px; border-radius: 10px; background: #fff; padding: 5px; box-shadow: 0 0 0 1px var(--rule); object-fit: contain; }
.dg-l { display: grid; gap: 8px; justify-items: center; }
.dg-a { font: 400 12px var(--mono); color: var(--ink-2); white-space: nowrap; }
.dg-a.r::after { content: " →"; color: var(--live-ink); }
.dg-a.l::before { content: "← "; color: var(--live-ink); }
.dg-line { position: relative; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, rgba(11,11,12,.25) 0 6px, transparent 6px 11px); }
.dg-line i { position: absolute; left: 0; top: 50%; width: 100%; height: 10px; margin-top: -5px; animation: dgrun 2.6s linear infinite; }
.dg-line i::after { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(52,211,153,.2); }
@keyframes dgrun { 0% { transform: translateX(0); } 48%, 52% { transform: translateX(calc(100% - 10px)); } 100% { transform: translateX(0); } }
.how-steps { list-style: none; counter-reset: hs; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.how-steps li { counter-increment: hs; position: relative; padding-top: 40px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.how-steps li::before { content: counter(hs); position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 500 13px var(--mono); }
.how-steps b { color: var(--ink); font-weight: 600; }
.how-fine { margin-top: 22px; font-size: 14.5px; color: var(--ink-3); }

/* the two claims, as cards of their own */
.usp.card { grid-template-columns: 1fr; }
.tl { list-style: none; display: grid; gap: 0; margin-top: 26px; border-left: 2px solid rgba(236,235,228,.18); }
.tl li { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 0 0 16px 18px; font-size: 15px; line-height: 1.45; color: rgba(236,235,228,.82); }
.tl li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #6b6a64; }
.tl li.ag::before { background: var(--live); box-shadow: 0 0 0 4px rgba(52,211,153,.2); }
.tl time { font: 400 13px/1.7 var(--mono); color: rgba(236,235,228,.55); }
.tl li.ag span { color: #fff; }
.any-or { margin-top: 18px; font-size: 14.5px; color: var(--ink-3); }
#any .u-logos { grid-template-columns: repeat(3, minmax(0, 96px)); gap: 18px 10px; margin-top: 28px; }
#any .u-logos .lg img { width: 58px; height: 58px; border-radius: 16px; padding: 9px; }
#any .u-logos .lg img[alt="T3 Code"], #any .u-logos .lg img[alt="Hermes Agent"] { padding: 0; }

/* install: the facts two by two */
.i-facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); }
@media (max-width: 760px) { .i-facts { display: flex; } }

@media (max-width: 900px) {
  .how .how-head { grid-template-columns: 1fr; }
  .how .how-head .lede { margin-top: 14px; }
  .dg { grid-template-columns: 1fr; gap: 6px; }
  .dg-l { grid-template-columns: auto auto; gap: 14px; padding: 4px 0; }
  .dg-line { display: none; }
  .dg-a.r::after { content: " ↓"; } .dg-a.l::before { content: "↑ "; }
  .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-steps li { padding: 0 0 0 40px; }
  /* the page a phone opens can be moved around, to read the small print */
  .pv-in { padding: 14px; }
  .pv .pv-zoom { overflow: auto; max-height: 64vh; border-radius: 12px; box-shadow: 0 0 0 1px var(--rule); }
  .pv:not(.tall) .pv-zoom img { width: 860px; max-width: none; max-height: none; box-shadow: none; border-radius: 0; }
  .pv-hint { display: block; font: 400 12px var(--mono); color: var(--ink-3); }
  /* every screen at once, on a phone: the laptop and the phone in one view */
}
.pv-hint { display: none; }

/* round 6: fewer words; the claims as three cards; try it on one screen */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 0 var(--pad) clamp(56px, 9vh, 110px); }
.trio .usp.card { padding: clamp(24px, 2.4vw, 40px); }
.trio h2 { font-size: clamp(28px, 2.6vw, 44px); }
.ask { margin-top: 18px; font: 500 17px/1.4 var(--mono); color: var(--ink); }
.ask::before { content: "you › "; color: var(--ink-3); font-weight: 400; }
.tvmini { position: relative; margin-top: 22px; padding: 2.2%; border-radius: 10px; background: #0b0b0c; box-shadow: 0 24px 50px -26px rgba(30,25,15,.5); }
.tvmini img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 3px; }
.tvmini i { position: absolute; left: 42%; right: 42%; top: 100%; height: 10px; border-radius: 0 0 5px 5px; background: #1d1d21; }
.trio .tl { margin-top: 22px; }
.trio #any .u-logos { margin-top: 24px; }
@media (max-width: 1180px) { .trio { grid-template-columns: 1fr 1fr; } .trio #any { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .trio { grid-template-columns: 1fr; }
  /* try it on a phone: the laptop and the phone in one view, and nothing over the words */
}
.usp.card { grid-template-columns: minmax(0, 1fr); }
.usp.card .u-txt { min-width: 0; }
.tvmini img { height: auto; }
.cl-base { display: inline-block; width: 1px; height: 0; vertical-align: baseline; }

/* the tv in the first screen: you tap Merge now, and the board turns merged under your agent's answer */
.sw .ov.after { display: block; opacity: 0; transition: opacity .55s; }
.sw.merged .ov.after { opacity: 1; }
.sw .tap { position: absolute; left: 80.1%; top: 67.2%; width: 4.4%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: rgba(11,11,12,.82); box-shadow: 0 0 0 3px rgba(255,255,255,.9); opacity: 0; pointer-events: none; }
.sw .tap::after { content: "you"; position: absolute; left: 115%; top: -55%; padding: 2px 7px; border-radius: 7px; background: var(--ink); color: var(--paper); font: 600 11px/1.3 var(--mono); }
.sw.tapped .tap { animation: tapit 1s var(--ease) forwards; }
@keyframes tapit { 0% { opacity: 0; transform: scale(1.8); } 30% { opacity: 1; transform: scale(1); } 55% { transform: scale(.82); } 100% { opacity: 0; transform: scale(1); } }
.sw.off .scr::after { opacity: .55; }
section[id], .usp[id] { scroll-margin-top: 84px; }

/* round 7 */
.kind { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 99px; background: rgba(11,11,12,.07); font: 500 11.5px/1.5 var(--mono); font-style: normal; color: var(--ink-2); vertical-align: 3px; }
.kind.real { background: var(--ink); color: var(--paper); }
.i-does { font-size: 14.5px; color: var(--ink-2); }
.i-does code { font: 500 13.5px var(--mono); padding: 1px 6px; border-radius: 6px; background: rgba(11,11,12,.06); }
.cl-cta .btn { border: 0; cursor: pointer; }

/* the calm first screen: the line, one sentence, two buttons; one screen, one caption, three dots */
.kick, .h-act, .usps, .h-links { display: none !important; }
.h-say { position: absolute; z-index: 8; left: var(--pad); }
.h-lede { max-width: 34ch; margin: 0; font: 400 clamp(17px, 1.3vw, 20px)/1.45 var(--text); color: var(--ink-2); }
.h-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.h-cta .btn { height: 46px; }
.h-film { display: inline-flex; align-items: center; gap: 9px; font: 500 15px var(--text); color: var(--ink); text-decoration: none; }
.h-film i { position: relative; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.h-film i::after { content: ""; position: absolute; left: 10px; top: 8px; border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.h-scene { position: absolute; z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.h-scene > * { pointer-events: auto; }
.h-cap { font: 400 20px/1.2 var(--disp); letter-spacing: -.01em; color: var(--ink); text-align: center; }
.h-dots { display: flex; align-items: center; gap: 2px; }
.h-dots button { position: relative; width: 26px; height: 26px; }
.h-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%; border-radius: 99px; background: rgba(11,11,12,.22); transition: width .3s var(--ease), background .3s; }
.h-dots button.on::before { width: 20px; background: var(--ink); }
.h-dots .h-pause { margin-left: 6px; height: 26px; padding: 0; background: none; box-shadow: none; color: var(--ink-3); }
.h-dots .h-pause::before { display: none; }
.h-dots .h-pause i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero.paused .h-dots .h-pause i { width: 0; height: 0; border-left: 8px solid currentColor; border-right: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.said { font-size: 17px; padding: 11px 17px; }
.said b { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 1000px) { .said { font-size: 14px; padding: 8px 13px; } }
@media (max-width: 1000px) {
  .h-say { top: auto !important; right: var(--pad); bottom: 20px; width: auto !important; }
  .h-lede { font-size: 15.5px; max-width: none; }
  .h-cta { margin-top: 14px; gap: 10px 18px; }
  .h-cta .btn { height: 44px; }
  .h-cap { font-size: 17px; }
}
.h-film i { background: none !important; }
.said { translate: -50% 0; }

/* the line in It Pixel, drawn as dots on one canvas */
canvas.dots { position: absolute; left: 0; top: 0; pointer-events: none; }
.sw { z-index: 3; }
.agent { z-index: 5; }

.cl-stage { font-family: var(--pix); letter-spacing: -.02em; }
@media (max-width: 760px) { .said { white-space: nowrap; font-size: 12px; } }
.cl-stage { font-size: clamp(46px, 11.5vw, 210px); }

/* ---------- the first screen's line above the dots ---------- */
.h-kick { position: absolute; z-index: 7; margin: 0; font: 600 clamp(15px, 1.2vw, 19px)/1.2 var(--text); letter-spacing: -.01em; color: var(--ink-2); opacity: 0; transition: opacity .6s .2s; }
.hero.ready .h-kick { opacity: 1; }

/* ---------- ask for it, watch it get built: the Deal Desk ---------- */
.dk-stage { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 4vh, 48px); align-items: stretch; }
.dk-chat { display: flex; flex-direction: column; min-height: 0; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -40px rgba(11,11,12,.35); }
.dk-who { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font: 600 14px/1 var(--text); }
.dk-who img { width: 22px; height: 22px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--rule); padding: 2px; }
.dk-log { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 200px; max-height: 420px; overflow: hidden; padding: 14px 0; font: 400 13px/1.45 var(--mono); justify-content: flex-end; -webkit-mask-image: linear-gradient(transparent, #000 2.4em); mask-image: linear-gradient(transparent, #000 2.4em); }
.dk-log p { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease); }
.dk-log p.in { opacity: 1; transform: none; }
.dk-log .you { align-self: flex-end; max-width: 92%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--ink); color: var(--paper); font-family: var(--text); font-size: 14px; }
.dk-log .ag b { display: block; font-weight: 600; font-size: 12px; color: var(--live-ink); margin-bottom: 2px; }
.dk-log .ag.busy span::after { content: "…"; display: inline-block; animation: dkdots 1s steps(4) infinite; width: 1.2em; overflow: hidden; vertical-align: bottom; }
.dk-log .ag.busy b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--live); animation: dkpulse 1s ease-in-out infinite; }
@keyframes dkdots { from { width: 0; } to { width: 1.2em; } }
@keyframes dkpulse { 50% { opacity: .3; } }
.dk-log .step { color: var(--ink-3); font-size: 12.5px; }
.dk-log .step::before { content: "✓ "; color: var(--live-ink); font-weight: 700; }
.dk-log .tap { color: var(--ink-2); font-size: 12.5px; }
.dk-log .tap::before { content: "› "; color: var(--live-ink); font-weight: 700; }
.dk-in { display: flex; align-items: flex-end; gap: 8px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.dk-in p { flex: 1; min-height: 2.9em; font: 400 14px/1.45 var(--text); color: var(--ink); }
.dk-in p:empty::before { content: "Ask Claude Code"; color: var(--ink-3); }
.dk-send { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.dk-send svg { width: 16px; height: 16px; fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dk-send[disabled] { opacity: .35; cursor: default; }
.dk-send.hint::after, .dd-card.hint .dd-go::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 3px var(--live); animation: dkring 1.3s ease-out infinite; pointer-events: none; }
@keyframes dkring { from { opacity: 1; transform: scale(.92); } to { opacity: 0; transform: scale(1.18); } }
.dk-win { min-width: 0; border-radius: 18px; overflow: hidden; background: #121212; box-shadow: 0 0 0 1px rgba(11,11,12,.35), 0 50px 90px -50px rgba(11,11,12,.6); }
.dk-chrome { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #1b1b1b; border-bottom: 1px solid rgba(255,255,255,.06); }
.dk-chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.dk-chrome span { margin-left: 10px; font: 500 12px var(--text); color: rgba(255,255,255,.5); }
.dk-fine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
.dk-again { height: 36px; padding: 0 14px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; font-size: 14px; color: var(--ink); }
.dk-again[hidden] { display: none; }

/* the Deal Desk itself: sized from its own width, so it reads the same at any size */
.dd { position: relative; container-type: inline-size; --o: #ff7a59; --fg: #f3f3f1; --mu: #9b9b98; --cd: #1e1e1e; display: grid; gap: .95em; padding: 1em 1.4em 1.3em; font: 400 clamp(8px, 1.14cqw, 12.5px)/1.35 var(--text); color: var(--fg); }
/* before Claude Code has built anything, the window is waiting */
.dd::after { content: "waiting for Claude Code"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 13px var(--mono); color: rgba(255,255,255,.28); transition: opacity .3s; pointer-events: none; }
.dd:not(.pre)::after { opacity: 0; }
.dd .bk { opacity: 0; transform: translateY(.6em); transition: opacity .35s, transform .5s var(--ease), background-color .5s; }
.dd .bk > * { transition: opacity .35s; }
.dd .bk.sk { opacity: 1; transform: none; background-color: rgba(255,255,255,.06); }
.dd .bk.sk:not(.on) { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%); background-size: 200% 100%; animation: dkshim 1.1s linear infinite; }
.dd .bk.sk:not(.on) > * { opacity: 0; }
.dd .bk.on { opacity: 1; transform: none; background-color: transparent; }
@keyframes dkshim { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.dd-top { display: flex; align-items: center; gap: .3em; padding: .3em; border-radius: .9em; }
.dd-logo { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .6em; background: var(--fg); color: #121212; font-size: .8em; font-weight: 800; }
.dd-name { margin: 0 .8em 0 .4em; font-weight: 700; font-size: 1.05em; }
.dd-tab { padding: .45em .8em; border-radius: 99px; color: var(--mu); font-weight: 500; white-space: nowrap; }
.dd-tab.on { background: rgba(255,255,255,.1); color: var(--fg); }
.dd-tab u { text-decoration: none; display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; margin-left: .3em; border-radius: 99px; background: var(--o); color: #1a0f0b; font-size: .8em; font-weight: 700; }
.dd-sync { margin-left: auto; color: var(--mu); font-size: .9em; white-space: nowrap; }
.dd-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.6fr); gap: 1em; align-items: center; }
.dd-hello { border-radius: .8em; padding: .2em 0; }
.dd-hello h3 { font: 700 2.4em/1.05 var(--text); letter-spacing: -.03em; }
.dd-hello p { margin-top: .35em; color: var(--mu); }
.dd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; }
.dd-tile { display: grid; gap: .25em; padding: .9em 1em; border-radius: 1em; }
.dd-tile b { font: 700 2.3em/1 var(--text); letter-spacing: -.03em; }
.dd-tile span { color: rgba(243,243,241,.75); }
.dd-tile p { display: flex; align-items: center; margin-top: .3em; }
.dd-tile p em { margin-left: .5em; font-style: normal; color: var(--mu); font-size: .9em; }
.dd .dd-tile.t1.on { background-color: #3b2a22; } .dd .dd-tile.t2.on { background-color: #2e2843; } .dd .dd-tile.t3.on { background-color: #36321f; } .dd .dd-tile.t4.on { background-color: #1f2a44; }
.dd-bars { gap: .25em; align-items: flex-end !important; height: 1.8em; }
.dd-bars i { width: .55em; border-radius: .15em; background: rgba(243,243,241,.55); }
.dd-bars i:nth-child(1) { height: 100%; } .dd-bars i:nth-child(2) { height: 70%; } .dd-bars i:nth-child(3) { height: 85%; } .dd-bars i:nth-child(4) { height: 55%; } .dd-bars i:nth-child(5) { height: 75%; }
.av { display: inline-grid; place-items: center; width: 2em; height: 2em; margin-right: -.22em; border-radius: 50%; box-shadow: 0 0 0 .15em #121212; font: 700 .72em/1 var(--text); font-style: normal; color: #fff; }
.av.c1 { background: #2f7d4f; } .av.c2 { background: #2b6f78; } .av.c3 { background: #6b5b2e; } .av.c4 { background: #6a3f8f; } .av.c5 { background: #8f3f55; } .av.c6 { background: #3f5a8f; }
.dd-now { display: flex; align-items: center; gap: .5em; border-radius: .8em; }
.dd-now b { font-weight: 700; } .dd-now span { color: var(--mu); margin-right: .6em; }
.dd-now i { font-style: normal; padding: .4em .85em; border-radius: 99px; background: rgba(255,255,255,.07); color: var(--mu); }
.dd-now i.on { background: var(--fg); color: #121212; font-weight: 600; }
.dd-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; }
.dd-card { position: relative; display: grid; align-content: start; gap: .25em; padding: .9em 1em 1em; border-radius: 1em; transition: opacity .35s, transform .5s var(--ease), background-color .5s, box-shadow .4s; }
.dd .dd-card.on { background-color: var(--cd); }
.dd .dd-card.hot.on { background-color: #2a2540; }
.dd-card .dd-k { display: flex; align-items: center; gap: .5em; margin-bottom: .45em; color: var(--mu); font-size: .88em; }
.dd-card .dd-k .av { margin-right: 0; }
.dd-card .dd-k em { margin-left: auto; padding: .2em .6em; border-radius: 99px; background: var(--o); color: #1a0f0b; font-style: normal; font-weight: 700; font-size: .9em; }
.dd-card .dd-k em.q { background: rgba(255,255,255,.1); color: var(--mu); }
.dd-card > b { font-weight: 700; font-size: 1.05em; }
.dd-card > span { color: var(--mu); min-height: 2.7em; }
.dd-go { position: relative; justify-self: start; margin-top: .55em; padding: .6em 1.1em; border-radius: 99px; background: var(--o); color: #1a0f0b; font-weight: 700; font-size: 1em; white-space: nowrap; }
.dd-go.ghost { background: rgba(255,255,255,.08); color: var(--fg); font-weight: 600; }
button.dd-go:not([disabled]):hover { filter: brightness(1.08); }
.dd-card.sent { box-shadow: inset 0 0 0 .15em var(--live); }
.dd-card.sent .dd-go { background: var(--live); color: #052e1c; }
.dd-card.sent .dd-go::before { content: "✓ "; }
.dd-card.sent .dd-k em { background: var(--live); color: #052e1c; }
.dd-card.hint .dd-go::before { content: "← tap it"; position: absolute; left: calc(100% + .6em); top: 50%; translate: 0 -50%; padding: .3em .7em; border-radius: 99px; background: var(--live); color: #052e1c; font-size: .85em; font-weight: 700; white-space: nowrap; animation: dkbob 1.3s ease-in-out infinite; }
@keyframes dkbob { 50% { transform: translateX(.3em); } }
.dd-pipe { padding: 1em 1.1em 1.2em; border-radius: 1em; }
.dd .dd-pipe.on { background-color: var(--cd); }
.dd-ph { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.dd-ph span { color: var(--mu); margin-right: auto; }
.dd-ph i { display: inline-flex; align-items: center; gap: .35em; font-style: normal; color: var(--mu); font-size: .88em; }
.dd-ph i::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; }
.dd-ph .k1::before { background: var(--o); } .dd-ph .k2::before { background: #a5543f; } .dd-ph .k3::before { background: #4a4a48; }
.dd-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: .9em; }
.dd-cols > div { display: grid; align-content: start; gap: .15em; padding: 0 .9em; border-left: 1px solid rgba(255,255,255,.07); }
.dd-cols > div:first-child { border-left: 0; padding-left: 0; }
.dd-cols b { font-weight: 650; } .dd-cols span { color: var(--mu); font-size: .88em; }
.dd-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35em; min-height: 5.8em; padding-top: .7em; }
.dd-dots i { border-radius: 50%; transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.dd-dots i.on { transform: none; }
.dd-dots .k1 { background: var(--o); } .dd-dots .k2 { background: #a5543f; } .dd-dots .k3 { background: #4a4a48; }

@media (max-width: 900px) {
  .dk-stage { grid-template-columns: 1fr; }
  .dk-log { min-height: 0; height: 150px; flex: none; }
  .dk-chat { padding: 12px 14px; }
}
@container (max-width: 560px) {
  .dd { font-size: 11px; gap: 1em; padding: 1em; min-height: 0; }
  .dd-tab:not(.on), .dd-sync { display: none; }
  .dd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-row { grid-template-columns: 1fr; }
  .dd-cards { grid-template-columns: 1fr 1fr; }
  .dd-cards > :nth-child(n+3) { display: none; }
  .dd-now i:nth-of-type(n+3) { display: none; }
  .dd-cols > div:nth-child(n+4) { display: none; }
  .dd-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dd-ph i { display: none; }
}

/* ---------- light or dark ---------- */
/* The switch in the bar: a small round one, half paper and half ink, that turns over with the page. */
.theme { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink-2); transition: color .2s; }
.theme:hover { color: var(--ink); }
.theme i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; background: linear-gradient(90deg, transparent 50%, currentColor 50%); transition: transform .5s var(--ease); }
[data-theme="dark"] .theme i { transform: rotate(180deg); }
.bar .theme { margin: 0 -14px; }
@media (max-width: 900px) {
  .bar .theme { margin: 0 -14px 0 auto; }
  .bar .theme + .btn-i { margin-left: 0; }
}

/* The same page at night, set by js/theme.js from your pick or your system's. The paper goes dark and
   the ink goes light, so whatever was ink on paper, the buttons, It's column, the box It sits in, turns
   to paper on ink. The devices stay black and are ringed so they still stand out; the dark card stays
   darker than the page; and the green is still only the agent's. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111110; --paper-2: #181816; --card: #1a1a18; --ink: #ecebe4; --ink-2: #b0aea6; --ink-3: #8c8a82; --rule: rgba(236,235,228,.11);
  --live-ink: #34d399; --night: #070707;
}
[data-theme="dark"] .bar.solid, [data-theme="dark"] .bar.open { background: rgba(17,17,16,.97); }
@media (max-width: 900px) { [data-theme="dark"] .links { background: rgba(17,17,16,.97); } }
[data-theme="dark"] .agent.off { background: #55544f; }
[data-theme="dark"] .offlab { background: rgba(236,235,228,.1); }
[data-theme="dark"] .h-dots button::before { background: rgba(236,235,228,.25); }
[data-theme="dark"] .h-dots button.on::before { background: var(--ink); }
[data-theme="dark"] .sw { box-shadow: 0 0 0 1px rgba(236,235,228,.16); }
[data-theme="dark"] .sw::before { box-shadow: 0 40px 90px -20px rgba(0,0,0,.7); }
[data-theme="dark"] .dv, [data-theme="dark"] .night .dv { box-shadow: 0 0 0 1px rgba(236,235,228,.14), 0 40px 100px -20px rgba(0,0,0,.8); }
[data-theme="dark"] .tvmini, [data-theme="dark"] .dk-win { box-shadow: 0 0 0 1px rgba(236,235,228,.14), 0 40px 90px -40px rgba(0,0,0,.8); }
[data-theme="dark"] .f-go { background: rgba(17,17,16,.9); }
[data-theme="dark"] .usp.night { color: #ecebe4; }
[data-theme="dark"] .usp.card.night { box-shadow: 0 0 0 1px var(--rule); }
[data-theme="dark"] .cr .yes::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23111110' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-theme="dark"] .cr .ci.yes::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23052e1c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-theme="dark"] .cr .no::before { background: rgba(236,235,228,.3); }
[data-theme="dark"] .dg-it .dg-k, [data-theme="dark"] .dg-it .dg-s { color: rgba(17,17,16,.68); }
[data-theme="dark"] .dg-dev button { background: #262624; }
[data-theme="dark"] .dg-line { background: repeating-linear-gradient(90deg, rgba(236,235,228,.25) 0 6px, transparent 6px 11px); }
[data-theme="dark"] .kind { background: rgba(236,235,228,.1); }
[data-theme="dark"] .kind.real { background: var(--ink); }
[data-theme="dark"] .i-does code { background: rgba(236,235,228,.08); }
[data-theme="dark"] .pv::backdrop { background: rgba(0,0,0,.7); }
[data-theme="dark"] .jk button:hover { background: #232321; box-shadow: 0 0 0 1px rgba(236,235,228,.25); }
@media (max-width: 760px) {
  [data-theme="dark"] .jk > button:not(.jnext):hover { background: none; box-shadow: none; }
  [data-theme="dark"] .jnext { background: rgba(236,235,228,.08) !important; }
}
[data-theme="dark"] .wpage { --rule2: rgba(236,235,228,.12); }
[data-theme="dark"] .wchip { background: #222220; }
[data-theme="dark"] .wchip:hover { background: #2a2a27; box-shadow: inset 0 0 0 1px rgba(236,235,228,.22), 0 16px 30px -18px rgba(0,0,0,.7); }
[data-theme="dark"] .wchip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
[data-theme="dark"] .wreply { background: #2a2a27; }
[data-theme="dark"] .wfield { background: rgba(0,0,0,.25); }
[data-theme="dark"] .wfield:hover { box-shadow: inset 0 0 0 1px rgba(236,235,228,.24); }
[data-theme="dark"] .wfield:focus { background: #0d0d0c; box-shadow: inset 0 0 0 1.5px var(--ink); }
[data-theme="dark"] .wfield.wrong { box-shadow: inset 0 0 0 1.5px #f07a6e; }
[data-theme="dark"] .wfield[readonly] { background: transparent; }
[data-theme="dark"] .wsend { color: var(--paper); }
[data-theme="dark"] .wsend:hover { background: #d6d5ce; }
[data-theme="dark"] .wpage[data-state="sent"] .wsend { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(236,235,228,.24); }
[data-theme="dark"] .wpage[data-state="failed"] .wbar-s, [data-theme="dark"] .wsaid { color: #f07a6e; }
[data-theme="dark"] .wlog p { background: #2a2a27; }

/* ---------- the big numbers, drawn cell by cell (js/alive.js) ---------- */
.u-nums b.drawn { line-height: 1; }
.pxn { display: block; height: .76em; width: auto; max-width: 100%; overflow: visible; fill: currentColor; cursor: crosshair; touch-action: manipulation; }
.pxn rect { transform-box: fill-box; transform-origin: center; transition: transform .25s var(--ease); }
.usp.nums:not(.built) .pxn rect { transform: scale(0); }
.usp.nums.built .pxn rect { animation: pxin .55s var(--ease) backwards; }
.usp.nums.built .pxn rect.still { animation: none; }
.usp.nums.built .pxn rect.wave { animation: pxwave .6s var(--ease) both; }
@keyframes pxin { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: none; } }
@keyframes pxwave { 0% { transform: none; } 35% { transform: scale(1.6); } 100% { transform: none; } }

/* ---------- how it works: tap a screen (js/alive.js) ---------- */
.dg.live .dg-line i { animation: none; opacity: 0; }
.dg-line i.ink::after { background: var(--ink); box-shadow: 0 0 0 4px rgba(11,11,12,.14); }
[data-theme="dark"] .dg-line i.ink::after { box-shadow: 0 0 0 4px rgba(236,235,228,.16); }
.dg-a { transition: color .25s; }
.dg-a.hot { color: var(--ink); font-weight: 600; }
.dg-dev button { position: relative; overflow: hidden; cursor: pointer; transition: transform .2s var(--ease), box-shadow .3s; }
.dg-dev button:hover { transform: translateY(-3px); }
.dg-dev button.press { transform: scale(.88); }
/* the page your agent built, arriving on the screen you tapped */
.dg-dev button::before { content: ""; position: absolute; inset: 3px; border-radius: 2px; background: linear-gradient(var(--ink) 0 3px, transparent 3px 7px, rgba(11,11,12,.28) 7px 9px, transparent 9px 12px, rgba(11,11,12,.28) 12px 14px, transparent 14px); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
[data-theme="dark"] .dg-dev button::before { background: linear-gradient(var(--ink) 0 3px, transparent 3px 7px, rgba(236,235,228,.3) 7px 9px, transparent 9px 12px, rgba(236,235,228,.3) 12px 14px, transparent 14px); }
.dg-dev button.lit::before { opacity: 1; transform: none; }
.dg-dev button.lit { box-shadow: 0 8px 20px -10px rgba(11,11,12,.45); }
.dg.invite .dg-dev button:not(.lit) { animation: dginvite 1.6s ease-in-out infinite; }
.dg.invite .dg-dev button:nth-child(2) { animation-delay: .2s; } .dg.invite .dg-dev button:nth-child(3) { animation-delay: .4s; }
@keyframes dginvite { 50% { transform: translateY(-4px); } }
.dg-it.ping .dg-mark .dot { animation: dgping .7s var(--ease); }
.dg-it { transition: transform .3s var(--ease); }
.dg-it.ping { animation: dgbump .5s var(--ease); }
@keyframes dgbump { 40% { transform: scale(1.04); } }
@keyframes dgping { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.7); } 100% { box-shadow: 0 0 0 14px rgba(52,211,153,0); } }
.dg-logos img { transition: transform .3s var(--ease), box-shadow .3s; }
.dg-logos img.think { transform: translateY(-4px) scale(1.12); box-shadow: 0 0 0 2px var(--live), 0 8px 18px rgba(16,185,129,.25); animation: dgthink .7s ease-in-out; }
@keyframes dgthink { 30% { rotate: -6deg; } 60% { rotate: 6deg; } }

/* ---------- pages agents made: a closer look (js/alive.js) ---------- */
.mg button { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--rule), 0 24px 50px -30px rgba(30,25,15,.35); }
.mg button img { box-shadow: none; transition: transform .45s var(--ease); }
.mg button:hover img { transform: none; }
.mg button.near img { transform: scale(1.9); transition: transform .35s var(--ease); }
.mg-ask { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(11,11,12,.86); color: #fff; font: 500 13.5px/1.4 var(--mono); text-align: left; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; backdrop-filter: blur(6px); }
.mg-ask::before { content: "you › "; color: rgba(255,255,255,.55); font-weight: 400; }
.mg button.near .mg-ask { opacity: 1; transform: none; }

/* ---------- the comparison ticks itself (js/alive.js) ---------- */
.cmp.live .cr:not(.ch) { opacity: 0; transform: translateY(10px); }
.cmp.live.seen .cr:not(.ch) { opacity: 1; transform: none; transition: opacity .45s, transform .55s var(--ease), background .2s; transition-delay: calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), 0s; }
.cmp.live .cr .ci.yes::before { transform: scale(0); }
.cmp.live.seen .cr .ci.yes::before { transform: none; animation: ctick .5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 110ms + 380ms); }
.cmp.live.seen .cr:not(.ch):hover { background: rgba(11,11,12,.035); }
[data-theme="dark"] .cmp.live.seen .cr:not(.ch):hover { background: rgba(236,235,228,.04); }
.cmp.live.seen .cr:not(.ch):hover .ci.yes::before { animation: ctick2 .5s var(--ease); }
.cmp.live.seen .cr:not(.ch):hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
@keyframes ctick { from { transform: scale(0) rotate(-45deg); } 60% { transform: scale(1.35); } to { transform: none; } }
@keyframes ctick2 { 0% { transform: none; } 40% { transform: scale(1.35) rotate(-8deg); } to { transform: none; } }

/* ---------- a room for every job: icons, and things said to your agent (js/alive.js) ---------- */
.jk h3 { display: flex; align-items: center; gap: 10px; }
.jk h3 svg { flex: none; width: 26px; height: 26px; fill: currentColor; }
.jk h3 svg rect { transform-box: fill-box; transform-origin: center; }
.jobs.live:not(.built) .jk h3 svg rect { transform: scale(0); }
.jobs.live.built .jk h3 svg rect { animation: wcell .5s var(--ease) backwards; }
.jk > button:not(.jnext)::before { content: "you › "; color: var(--ink-3); }
@media (hover: hover) and (min-width: 761px) {
  .jk > button:not(.jnext):not(.done):hover { transform: translateY(-2px); }
  .jk > button:not(.jnext):not(.done):hover::after { content: ""; display: inline-block; width: .5em; height: 1.05em; margin-left: 3px; vertical-align: -2px; background: var(--ink); animation: caret .8s steps(2) infinite; }
}
.jk > button.done { animation: jsent .5s var(--ease); }
.jk > button.done::before { content: "✓ "; color: var(--live-ink); }
@keyframes jsent { 0% { transform: scale(.96); } 55% { transform: scale(1.03); } 100% { transform: none; } }
.jk > button.done::after { content: none; }

/* ---------- install: the line lit, the steps one by one (js/alive.js) ---------- */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cmdbox.beam { position: relative; isolation: isolate; }
.cmdbox.beam::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 19.5px; padding: 1.5px; background: conic-gradient(from var(--beam), transparent 0 62%, var(--ink-3) 80%, var(--ink) 86%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .6s; pointer-events: none; }
.cmdbox.beam.on::before { opacity: 1; animation: beam 3.6s linear infinite; }
@keyframes beam { to { --beam: 360deg; } }
.cmdbox.flash { animation: cflash .7s var(--ease); }
@keyframes cflash { 0% { box-shadow: 0 0 0 1px var(--rule), 0 0 0 0 rgba(11,11,12,.25); transform: scale(1); } 30% { transform: scale(1.015); } 100% { box-shadow: 0 0 0 1px var(--rule), 0 0 0 14px rgba(11,11,12,0); transform: none; } }
.cmdbox.flash [data-copy-btn] { animation: jsent .5s var(--ease); }
.i-steps.live li::before { transform: scale(0); }
.i-steps.live.seen li::before { transform: none; animation: ctick .5s var(--ease) backwards; }
.i-steps.live li { opacity: .25; transition: opacity .5s; }
.i-steps.live.seen li { opacity: 1; }
.i-steps.live li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: -10px; width: 2px; background: rgba(11,11,12,.3); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.i-steps.live.seen li:not(:last-child)::after { transform: none; }
.i-steps.live.seen li:nth-child(1), .i-steps.live.seen li:nth-child(1)::before { transition-delay: 0s; animation-delay: 0s; }
.i-steps.live.seen li:nth-child(1)::after { transition-delay: .25s; }
.i-steps.live.seen li:nth-child(2), .i-steps.live.seen li:nth-child(2)::before { transition-delay: .45s; animation-delay: .45s; }
.i-steps.live.seen li:nth-child(2)::after { transition-delay: .7s; }
.i-steps.live.seen li:nth-child(3), .i-steps.live.seen li:nth-child(3)::before { transition-delay: .9s; animation-delay: .9s; }
.i-steps.live.seen li:nth-child(3)::after { transition-delay: 1.15s; }
.i-steps.live.seen li:nth-child(4), .i-steps.live.seen li:nth-child(4)::before { transition-delay: 1.35s; animation-delay: 1.35s; }
.i-steps li:hover::before { animation: ctick2 .5s var(--ease); }
[data-theme="dark"] .i-steps.live li:not(:last-child)::after { background: rgba(236,235,228,.3); }

/* ---------- the films: the play button comes to the pointer (js/alive.js) ---------- */
.f-go { transition: transform .35s var(--ease), background .2s; will-change: transform; }
.f-poster.follow { cursor: none; }
.f-poster.follow .f-go { transition: transform .12s linear; }
.f-poster.follow .f-play { animation: fplay 1.2s ease-in-out infinite; }
@keyframes fplay { 50% { transform: scale(1.08); } }
.fp { transition: background .2s, box-shadow .2s, transform .3s var(--ease); }
.fp img { transition: transform .5s var(--ease); }
.fp:hover { transform: translateY(-2px); }
.fp:hover img { transform: scale(1.04); }
.fp { overflow: hidden; }

/* ---------- small things (js/alive.js) ---------- */
.btn, .btn-i { transition: transform .25s var(--ease), background .2s; }
.btn.flash { animation: jsent .5s var(--ease); }
/* the mark's green dot is your agent: point at the mark and it answers */
.mark .dot { transition: transform .3s var(--ease); }
.mark:hover .dot { animation: markdot .7s var(--ease); }
@keyframes markdot { 0% { transform: none; } 30% { transform: translateY(-.32em) scale(1.1); } 55% { transform: translateY(0) scale(1.25, .8); } 75% { transform: translateY(-.08em); } 100% { transform: none; } }
.works span img { transition: transform .3s var(--ease); }
.works span:hover img { transform: translateY(-3px) rotate(-6deg) scale(1.12); }
.f-cols a { transition: color .2s, transform .25s var(--ease); }
.f-cols a:hover { transform: translateX(3px); }
@keyframes caret { 50% { opacity: 0; } }