:root {
  --paper: #eef0f3;
  --card: #ffffff;
  --ink: #0f1012;
  --ink-2: #5a5e66;
  --ink-3: #8b9099;
  --line: #d9dce2;
  --yellow: #ffe14a;
  --coral: #ff8a68;
  --ink-soft: #2a2c31;
  --head: "Cabinet Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --wrap: 1200px;
  --blob: 46% 54% 42% 58% / 58% 46% 54% 42%;
}
* { box-sizing: border-box; margin: 0; }
/* Lining figures on every element: each `font` shorthand on the page resets the feature. */
* { font-feature-settings: "lnum" !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }

/* Type */
h1, h2, h3 { font-family: var(--head); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(42px, 6.8vw, 94px); line-height: 1.14; }
h2 { font-size: clamp(38px, 5.2vw, 72px); }
h3 { font-size: 25px; letter-spacing: -0.02em; line-height: 1.1; }
.lead { font-size: 19px; color: var(--ink-2); max-width: 560px; text-wrap: pretty; }

/* A soft blob behind a phrase and a hand-drawn ink loop around it. The loop draws itself
   once when the phrase comes on screen. */
.loop { --c: var(--yellow); position: relative; isolation: isolate; white-space: nowrap; margin: 0 0.2em 0 0.06em; }
.loop::before { content: ""; position: absolute; z-index: -1; inset: 0.06em -0.12em -0.02em -0.1em; background: var(--c); border-radius: 0.5em 0.6em 0.45em 0.55em / 0.45em 0.5em 0.5em 0.4em; transform: rotate(-1.5deg); }
.loop svg { position: absolute; z-index: 1; left: -0.24em; top: -0.1em; width: calc(100% + 0.52em); height: calc(100% + 0.28em); overflow: visible; pointer-events: none; }
.loop path, .scrib path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.motion .draw:not(.seen) path { stroke-dashoffset: 1; }
.motion .draw path { transition: stroke-dashoffset 1.1s cubic-bezier(.6,.1,.3,1) .2s; }
/* A scribbled underline in a colour. */
.scrib { position: relative; white-space: nowrap; }
.scrib svg { position: absolute; left: -0.04em; bottom: -0.2em; width: calc(100% + 0.08em); height: 0.34em; overflow: visible; }
.scrib path { stroke: var(--c, var(--yellow)); stroke-width: 9; }
/* After "yes.", the Approve button of a review. A cursor comes and presses it, it turns yellow
   with a tick and a small burst, then the loop starts again. */
.say-yes { white-space: nowrap; }
.obj.ok-btn { position: relative; display: inline-grid; margin: 0 0 0 0.6em; font: 600 0.34em/1 var(--body); letter-spacing: 0; }
.ok-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; padding: 0.62em 0.9em; border-radius: 0.6em; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.ok-a { background: var(--ink); color: #fff; }
.ok-b { background: var(--yellow); color: var(--ink); opacity: 0; transform: scale(.8); }
.ok-b svg { width: 1.15em; height: 1.15em; fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ok-burst { position: absolute; inset: -0.35em; pointer-events: none; opacity: 0; border-radius: 0.9em; border: 0.14em solid var(--yellow); }
.ok-hand { position: absolute; left: 70%; top: 62%; width: 1.3em; height: 1.3em; fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; opacity: 0; }
.motion .ok-hand { animation: ok-hand 4s cubic-bezier(.5,0,.2,1) infinite; }
.motion .ok-a { animation: ok-a 4s infinite; }
.motion .ok-b { animation: ok-b 4s cubic-bezier(.3,1.6,.5,1) infinite; }
.motion .ok-burst { position: absolute; inset: -0.35em; pointer-events: none; opacity: 0; border-radius: 0.9em; border: 0.14em solid var(--yellow); }
@keyframes ok-hand { 0% { opacity: 0; transform: translate(2.5em, 2em); } 12% { opacity: 1; } 34% { transform: none; } 38% { transform: scale(.8); } 42% { transform: none; } 60% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translate(1.5em, 1.5em); } }
@keyframes ok-a { 0%, 38% { opacity: 1; transform: none; } 36% { transform: scale(.94); } 42%, 92% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes ok-b { 0%, 39% { opacity: 0; transform: scale(.8); } 46%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes ok-burst { 0%, 39% { opacity: 0; transform: scale(.6); } 44% { opacity: 1; } 60%, 100% { opacity: 0; transform: scale(1.35); } }
.reduce .ok-b { opacity: 1; transform: none; }
.reduce .ok-a { opacity: 0; }

/* App icons: the same rounded tile for every AI app, at any size. */
.app { --s: 64px; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 23%; background: var(--card); outline: 1px solid rgb(0 0 0 / .08); outline-offset: -1px; transition: transform .35s cubic-bezier(.2,.9,.3,1.4); }
.app img { width: 58%; height: 58%; }
.app:hover { transform: translateY(-6px) rotate(-6deg); }

/* Objects inside a headline. Each sits on the text line and scales with the type. */
.obj { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; white-space: nowrap; }
.o-apps { gap: 0.08em; margin: 0 0.12em; }
.o-apps .app { --s: 0.78em; }
.o-apps .app:nth-child(2) { transform: rotate(-4deg); }
.o-apps .app:nth-child(3) { transform: rotate(5deg); }
.o-apps .app:hover { transform: translateY(-0.08em) rotate(0); }
/* A plan meter made of blocks: they fill one by one, and the last ones warn. */
.o-meter { gap: 0.05em; padding: 0.07em; margin: 0 0.08em; border-radius: 0.16em; outline: 0.035em solid var(--ink); background: var(--card); }
.o-meter i { width: 0.16em; height: 0.46em; border-radius: 0.05em; background: rgb(0 0 0 / .08); transition: background .2s; }
.o-meter i.on { background: var(--yellow); }
.o-meter i.on.hot { background: var(--coral); }

/* Buttons: no shadow, no lift. A hover changes the fill. */
.btn { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 12px; font: 600 15px/1 var(--body); background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s, color .15s; white-space: nowrap; }
.btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn.primary { color: #fff; box-shadow: none; }
/* The fill is a background of the button itself, so one layer draws the shape and no dark
   edge shows at the corners. */
.btn.primary { --fill: var(--yellow); background: linear-gradient(var(--fill), var(--fill)) left / 0% 100% no-repeat, var(--ink); transition: background-size .22s cubic-bezier(.4,0,.2,1), color .15s; }
.btn.primary:hover { background-size: 100% 100%, auto; color: var(--ink); }
.btn .go { display: inline-block; width: 0; overflow: hidden; opacity: 0; transform: translateX(-8px); transition: width .22s cubic-bezier(.4,0,.2,1), opacity .15s, transform .22s cubic-bezier(.4,0,.2,1); }
.btn:hover .go { width: 1em; opacity: 1; transform: none; }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn svg { width: 17px; height: 17px; margin-top: -2px; }

/* Header: flat and as wide as the window. The name sits in an ink block in the corner. Once
   the page scrolls, the bar keeps its place and gets a line and a light fill, and the name
   folds to "A." */
.nav { position: sticky; top: 0; z-index: 30; }
.nav .bar { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 64px; padding: 0 24px 0 0; background: transparent; transition: height .35s cubic-bezier(.7,0,.2,1), background .3s; }
.nav.folded .bar { height: 56px; background: rgb(238 240 243 / .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.brand { display: flex; align-items: center; gap: 9px; margin-right: 18px; font: 800 23px/1 var(--head); letter-spacing: -0.03em; }
.brand img { width: 26px; height: 26px; }
/* The header logo, built as Ditto builds theirs: eight copies of the name, white letters on
   an ink block that fits them, stacked in one place. On hover each copy drops a little
   further than the one before, so a thin top slice of every copy shows above the next. */
.nav .brand { --fs: 62px; --step: 11px; flex: none; align-self: flex-start; margin: 16px 32px 0 24px; transition: --fs .35s cubic-bezier(.7,0,.2,1), margin-top .35s cubic-bezier(.7,0,.2,1); }
/* The folded bar is 56px high, so the logo gets smaller to keep space above and below it.
   --fs is registered as a length so that the size change animates. */
@property --fs { syntax: "<length>"; inherits: true; initial-value: 62px; }
.nav.folded .brand { --fs: 38px; margin-top: 14px; }
.logo { position: relative; display: block; }
.lw { display: flex; align-items: flex-end; height: calc(var(--fs) * .76); color: #f4f3ef; font: 800 var(--fs)/1 var(--head); letter-spacing: -0.02em; text-transform: uppercase; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.lw + .lw { position: absolute; left: 0; top: 0; z-index: var(--k); }
.lt { display: block; flex: none; height: 100%; overflow: hidden; line-height: calc(var(--fs) * .82); background: var(--ink); }
.lt:first-child { padding-left: calc(var(--fs) * .1); }
/* The dot sits in its own shorter block, so the right edge of the logo steps down. */
.ld { position: relative; flex: none; width: calc(var(--fs) * .36); height: calc(var(--fs) * .4); background: var(--ink); }
.ld::before { content: ""; position: absolute; left: calc(var(--fs) * .04); bottom: calc(var(--fs) * .06); width: calc(var(--fs) * .26); height: calc(var(--fs) * .26); border-radius: 50%; background: var(--yellow); }
.nav .brand:hover .lw { transform: translateY(calc(var(--k) * var(--step))); }
.rest { max-width: 6em; white-space: nowrap; transition: max-width .35s cubic-bezier(.7,0,.2,1); }
/* Scrolled: the name folds to "A." in a smaller block. */
.nav.folded .rest { max-width: 0; }
.nav-links { position: relative; margin-left: auto; margin-right: 12px; display: flex; gap: 2px; font-size: 14px; font-weight: 500; }
.nav-links a { position: relative; z-index: 1; display: block; padding: 8px 13px; color: var(--ink-2); transition: color .2s; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.roll { display: block; height: 1.3em; line-height: 1.3em; overflow: hidden; }
.roll span { display: block; transition: transform .38s cubic-bezier(.7,0,.2,1); }
/* The copy is decoration: the empty alt text keeps screen readers from reading it twice. */
.roll span::after { content: attr(data-t); content: attr(data-t) / ""; display: block; }
.nav-links a:hover .roll span, .nav-links a:focus-visible .roll span { transform: translateY(-50%); }
.glide { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; width: var(--w, 0); border-radius: 10px; background: var(--gc, var(--yellow)); opacity: 0; transform: translateX(var(--x, 0)); transition: transform .38s cubic-bezier(.7,0,.2,1), width .38s cubic-bezier(.7,0,.2,1), background .3s, opacity .2s; pointer-events: none; }
.nav-links.on .glide { opacity: 1; }
.nav-end { display: flex; align-items: center; gap: 14px; }

/* Hero: the promise in the middle, then the apps on top of one library, joined by lines
   that carry each change both ways. */
.hero { padding: 140px 0 0; text-align: center; }
.hero > .wrap { position: relative; }
.hero h1 { max-width: 1060px; margin-inline: auto; }
.hero .lead { margin: 30px auto 0; max-width: 780px; font: 500 22px/1.45 var(--body); letter-spacing: -0.01em; color: var(--ink); opacity: .72; text-wrap: balance; }
/* The headline holds an app icon that pops from one AI app to the next. Each icon has its
   own rounded tile and a darker bottom edge, as a key on a keyboard. */
.hero-title { position: relative; }
.swap { position: relative; display: inline-block; width: 0.84em; height: 0.84em; vertical-align: -0.08em; margin: 0 0.06em; }
.swap .app { --s: 0.84em; position: absolute; inset: 0; border-radius: 24%; outline: 0; box-shadow: inset 0 -0.07em 0 rgb(0 0 0 / .28); opacity: 0; transform: translateY(0.18em) scale(.7) rotate(-8deg); transition: opacity .25s, transform .45s cubic-bezier(.3,1.5,.5,1); }
.swap .app.on { opacity: 1; transform: none; }
.swap .app.on { transition-delay: .12s; }
.swap .app.out { opacity: 0; transform: translateY(-0.2em) scale(.8) rotate(8deg); transition: opacity .1s, transform .2s ease-in; }
.swap .app .mark, .swap .app img { width: 54%; height: 54%; margin-top: -0.04em; }
/* Above the headline, one short story plays in a loop: a teammate improves a skill, a
   cursor clicks Update, and the note says where the new version went. */
.scene { position: absolute; left: 50%; top: -96px; margin-left: -470px; text-align: left; transform: rotate(-2.5deg); }
.note-up { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: 16px; background: var(--card); outline: 1px solid var(--line); outline-offset: -1px; font: 500 14px/1.25 var(--body); white-space: nowrap; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .3s, transform .45s cubic-bezier(.3,1.4,.5,1); }
.note-up img { width: 36px; height: 36px; border-radius: 50%; }
.note-up b { font-weight: 650; }
.note-up small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.msg, .ubtn { display: grid; }
.msg > span, .ubtn > span { grid-area: 1 / 1; transition: opacity .25s, transform .3s; }
.m2, .b2 { opacity: 0; transform: translateY(6px); }
.ubtn { position: relative; place-items: center; min-width: 84px; height: 38px; padding: 0 14px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; text-align: center; transition: background .25s, color .25s, transform .12s; }
.hand { position: absolute; left: 62%; top: 58%; width: 24px; height: 24px; fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; opacity: 0; transform: translate(70px, 60px); transition: transform .9s cubic-bezier(.5,0,.2,1), opacity .3s; }
.scene[data-step="1"] .note-up, .scene[data-step="2"] .note-up, .scene[data-step="3"] .note-up, .scene[data-step="4"] .note-up { opacity: 1; transform: none; }
.scene[data-step="2"] .hand, .scene[data-step="3"] .hand { opacity: 1; transform: translate(0, 0); }
.scene[data-step="3"] .hand { transform: translate(0, 0) scale(.85); transition-duration: .12s; }
.scene[data-step="3"] .ubtn { transform: scale(.94); }
.scene[data-step="4"] .hand { opacity: 0; transform: translate(40px, 40px); }
.scene[data-step="4"] .m1, .scene[data-step="4"] .b1 { opacity: 0; transform: translateY(-6px); }
.scene[data-step="4"] .m2, .scene[data-step="4"] .b2 { opacity: 1; transform: none; }
.scene[data-step="4"] .ubtn { background: var(--yellow); color: var(--ink); }
.reduce .scene .note-up { opacity: 1; transform: none; }
.hero .ctas { display: flex; gap: 10px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.hero .fine { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.tile.hub { margin-top: 96px; padding: 56px 56px 0; text-align: left; }
/* The apps float across the first screen, beside the headline and the lead, each at its
   own height, size and tilt. A dashed line runs from each app down to the library. */
.hub-apps { list-style: none; padding: 0; margin: 0; }
.hub-apps li { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: rotate(var(--r)); }
.hub-apps .app { --s: var(--z, 60px); }
.motion .hub-apps li { animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--z) * -0.07s); }
@keyframes bob { 50% { translate: 0 -8px; } }
.hub-lines { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hub-lines path { fill: none; stroke: url(#wire); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 7; }
.motion .hub-lines path { animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -18; } }
/* An app's own icon colours: its tile, and its mark drawn in its own ink. */
.app.real { overflow: hidden; background: var(--bg); outline-color: rgb(0 0 0 / .14); }
.app img.full { width: 100%; height: 100%; object-fit: cover; }
.app .mark { width: 56%; height: 56%; background: var(--fg); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.hub-body { position: relative; z-index: 2; }
.hub-body .m-grid { grid-template-columns: repeat(3, 1fr); }

/* Media tiles: a flat colour with one edge that steps in blocks. The stepped side changes
   from tile to tile (right, left or top) and has square corners. */
.tile { --c: var(--ink-soft); position: relative; background-color: var(--c); border-radius: 24px; overflow: hidden; }
.tile.steps::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.tile.right::after { top: 0; right: 0; bottom: 0; width: 64px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='256'%3E%3Cg fill='%23eef0f3'%3E%3Crect x='32' y='0' width='32' height='32'/%3E%3Crect x='32' y='64' width='32' height='32'/%3E%3Crect x='0' y='96' width='64' height='32'/%3E%3Crect x='32' y='160' width='32' height='64'/%3E%3C/g%3E%3C/svg%3E") repeat-y right top / 64px 256px; }
.tile.left::after { top: 0; left: 0; bottom: 0; width: 64px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='256'%3E%3Cg fill='%23eef0f3'%3E%3Crect x='0' y='0' width='32' height='32'/%3E%3Crect x='0' y='64' width='32' height='32'/%3E%3Crect x='0' y='96' width='64' height='32'/%3E%3Crect x='0' y='160' width='32' height='64'/%3E%3C/g%3E%3C/svg%3E") repeat-y left 0 top 128px / 64px 256px; }
.tile.top::after { top: 0; left: 0; right: 0; height: 64px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='64'%3E%3Cg fill='%23eef0f3'%3E%3Crect x='0' y='0' width='32' height='32'/%3E%3Crect x='64' y='0' width='32' height='32'/%3E%3Crect x='96' y='0' width='32' height='64'/%3E%3Crect x='160' y='0' width='64' height='32'/%3E%3C/g%3E%3C/svg%3E") repeat-x left 64px top / 256px 64px; }
.tile.right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tile.left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tile.top { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Sections */
section.block { padding: 152px 0 0; }
.head { max-width: 820px; }
.head .lead { margin-top: 24px; }
/* A chapter with a full-width picture: the title on the left, the lead on the right. */
.head.wide { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: end; max-width: none; }
.head.wide .lead { margin-top: 0; }
.tile.shot { margin-top: 52px; padding: 56px 56px 0; }
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split .tile { min-height: 560px; display: grid; place-items: center; padding: 56px 40px; }
/* Room for the steps on the stepped side. */
.tile.right { padding-right: 88px; } .tile.left { padding-left: 88px; } .tile.top { padding-top: 88px; }
.points { list-style: none; padding: 0; margin-top: 30px; border-top: 1px solid var(--line); }
.points li { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.points b { color: var(--ink); font-weight: 600; }

/* Safety */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border-top: 2px solid var(--ink); }
.rules div { padding: 30px 28px 0 0; }
.rules div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.rules h3 { margin-bottom: 10px; }
.rules p { color: var(--ink-2); }

/* Who it is for: one row of names, and the chosen one's setup under it. */
.names { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 48px; }
.names button { border: 0; background: transparent; padding: 4px 16px 10px; font: 800 clamp(30px, 4.2vw, 58px)/1 var(--head); letter-spacing: -0.03em; color: var(--ink-3); cursor: pointer; border-radius: var(--blob); transition: color .2s, background .2s; }
.names button:hover { color: var(--ink); }
.names button[aria-selected="true"] { background: var(--c); color: var(--ink); }
.panel { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 28px; background: var(--ink-soft); color: #fff; border-radius: 24px; padding: 40px; }
.panel[hidden] { display: none; }
.panel h3 { font-size: 34px; }
.panel p { color: rgb(255 255 255 / .65); margin-top: 14px; text-wrap: pretty; }
.panel ul { list-style: none; padding: 0; }
.panel li { padding: 14px 0; border-top: 1px solid rgb(255 255 255 / .14); font-weight: 600; }
.panel li:first-child { border-top: 0; padding-top: 0; }
.panel li span { display: block; font-weight: 400; color: rgb(255 255 255 / .6); font-size: 14px; }
/* Real logos of the tools in a setup, on white tiles. */
.panel li:has(.ic-row) { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: center; }
.panel li:has(.ic-row) > span:not(.ic-row) { grid-column: 1; }
.ic-row { display: flex !important; gap: 6px; grid-column: 2; grid-row: 1 / 3; }
.brand-ic { --s: 34px; background: #fff; outline: 0; border-radius: 9px; }
.brand-ic .mark { width: 56%; height: 56%; background: var(--fg); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.panel code { font: 13px var(--mono); color: var(--yellow); }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 52px; }
.plan { background: var(--card); border-radius: 24px; padding: 38px; display: flex; flex-direction: column; outline: 1px solid var(--line); outline-offset: -1px; }
.plan.team { background: var(--ink-soft); color: #fff; outline: 0; }
.plan.team .note, .plan.team .price small { color: rgb(255 255 255 / .6); }
.plan.team ul, .plan.team li { border-color: rgb(255 255 255 / .14); }
.plan.team .btn.primary { --fill: #fff; background: linear-gradient(#fff, #fff) left / 0% 100% no-repeat, var(--yellow); color: var(--ink); }
.plan.team .btn.primary:hover { background-size: 100% 100%, auto; }
.plan .price { display: flex; align-items: baseline; gap: 10px; font: 800 88px/1 var(--head); letter-spacing: -0.04em; margin: 18px 0 8px; }
.plan .price small { font: 500 15px/1.2 var(--body); letter-spacing: 0; color: var(--ink-2); }
.plan .note { color: var(--ink-2); font-size: 14px; }
.plan ul { list-style: none; padding: 0; margin: 28px 0 34px; border-top: 1px solid var(--line); }
.plan li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.plan .btn { margin-top: auto; align-self: flex-start; }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 72px; align-items: start; }
.faq .head .lead a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--yellow); }
.faq .head { position: sticky; top: 120px; }
.faq .list { display: grid; gap: 10px; }
/* Each question is a card. The open one turns ink, and its answer slides open. */
.faq details { border-radius: 22px; background: var(--card); transition: background-color .3s, color .3s; interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s cubic-bezier(.3,.8,.3,1), content-visibility .4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details[open] { background: var(--ink-soft); color: #fff; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 22px 22px 28px; font: 700 21px/1.3 var(--head); letter-spacing: -0.01em; display: grid; grid-template-columns: 1fr 40px; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat, var(--paper); transition: transform .35s cubic-bezier(.3,1.5,.5,1), background-color .3s, color .3s; }
.faq summary:hover::after { transform: scale(1.1); }
.faq details[open] summary:hover::after { transform: rotate(135deg) scale(1.1); }
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--yellow); color: var(--ink); }
/* Focus: one ink ring for the keyboard, set off from the element and following its corners.
   It turns yellow on dark surfaces. A question shows the ring on its whole card. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav-links a, .foot-row a, .faq .lead a { border-radius: 10px; }
.nav .brand:focus-visible { outline-offset: 4px; }
footer :focus-visible, .plan.team :focus-visible { outline-color: var(--yellow); }
.foot-row a:focus-visible, .faq .lead a:focus-visible { outline-offset: 6px; }
.faq summary:focus-visible { outline: none; }
.faq details:has(summary:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.faq details p { padding: 0 84px 26px 28px; color: rgb(255 255 255 / .72); }
.motion .faq details[open] p { animation: faq-in .45s cubic-bezier(.3,.8,.3,1) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }

/* Close */
.close { padding: 168px 0 140px; text-align: center; }
.close h2 { font-size: clamp(46px, 7.8vw, 108px); line-height: 1.14; }
.close .ctas { margin-top: 40px; display: flex; justify-content: center; }

/* Footer: the apps drift past, and the name is made of letters you can play with. */
/* A floating card with the same space on the sides and below. */
footer { position: relative; background: var(--ink-soft); color: #fff; padding: 0 0 28px; overflow: hidden; margin: 0 16px 16px; border-radius: 32px; }
.drift { display: flex; padding: 36px 0; width: max-content; }
.motion .drift { animation: drift var(--time, 48s) linear infinite; }
.drift .app { --s: 56px; flex: none; margin-right: 14px; }
@keyframes drift { to { transform: translateX(calc(-1 * var(--period, 0px))); } }
.foot-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; padding: 26px 0 0; font: 500 17px/1 var(--body); }
.foot-row a { color: rgb(255 255 255 / .78); background: linear-gradient(var(--yellow), var(--yellow)) left bottom / 0% 2px no-repeat; padding-bottom: 4px; transition: background-size .2s, color .2s; }
.foot-row a:hover { color: #fff; background-size: 100% 2px; }
.word { position: relative; z-index: 0; isolation: isolate; display: flex; justify-content: space-between; margin-top: 36px; font: 800 clamp(84px, 20.6vw, 300px)/0.82 var(--head); letter-spacing: -0.04em; user-select: none; }
.word span { position: relative; display: inline-block; transition: transform .35s cubic-bezier(.2,.9,.3,1.5), color .2s; cursor: default; }
.word span::before { content: ""; position: absolute; z-index: -1; inset: 18% -6% 4%; border-radius: var(--blob); background: var(--c); transform: scale(0) rotate(-12deg); transition: transform .35s cubic-bezier(.2,.9,.3,1.4); }
.word span:hover { transform: translateY(-0.08em) rotate(var(--r)); color: var(--ink); }
.word span:hover::before { transform: scale(1) rotate(-6deg); }
.legal { margin: 24px 0 0; text-align: center; font: 500 12px/1 var(--mono); color: rgb(255 255 255 / .45); text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 1180px) {
  .hub-apps, .hub-lines, .scene { display: none; }
}
@media (max-width: 960px) {
  footer { margin: 0 10px 10px; border-radius: 24px; }
      .faq summary { font-size: 19px; padding: 18px 16px 18px 22px; }
  .faq details p { padding: 0 22px 22px; }
  .nav-links { display: none; }
  .nav-end { margin-left: auto; }
  .nav .brand { --fs: 40px; --step: 7px; margin: 12px auto 0 12px; }
  .nav.folded .brand { --fs: 40px; margin-top: 12px; }
  .nav .bar { height: 56px; padding-right: 12px; }
  .hero { padding-top: 56px; }
  .scene { display: none; }
  .split, .faq, .plans, .head.wide, .panel { grid-template-columns: 1fr; gap: 32px; }
  .faq .head { position: static; }
  .split.flip > :first-child { order: 0; }
  .tile.hub { padding: 24px 18px 0; margin-top: 48px; }
  .hub-apps, .hub-lines { display: none; }
  .hub-body .m-grid { grid-template-columns: 1fr; }
  .hub-body { width: auto; }
  .hub-body, .hub-body .m-grid { grid-template-columns: 1fr; }
  .hub-body .m-grid .m-card:nth-child(n+4) { display: none; }
  .tile.shot { padding: 20px 18px 0; }
  .split .tile { min-height: 0; padding: 28px 18px; }
  .tile.steps::after { display: none; }
  .tile.right, .tile.left { padding-right: 18px; padding-left: 18px; }
  .tile.top { padding-top: 28px; }
  .rules { grid-template-columns: 1fr; }
  .rules div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 24px; }
  section.block { padding-top: 112px; }
  .close { padding: 120px 0 96px; }
  .foot-row { gap: 16px 22px; }
}
@media (max-width: 420px) {
  .nav .brand { --fs: 30px; --step: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .app, .btn, .word span, .word span::before, .roll span, .glide, .faq details, .faq details::details-content, .faq summary::after { transition: none; }
}
.swap .app img.full { width: 100%; height: 100%; margin: 0; }
/* Dark app tiles keep a thin light edge on the dark footer. */
.drift .app.real { outline: 1px solid rgb(255 255 255 / .16); outline-offset: -1px; }