/* The studio's website. White, one typeface, the name as large as the screen allows, pastel blocks and the 3D objects
   as the only ornaments. It stands alone (it does not load the platform's stylesheet) so the first paint stays light. */
@font-face { font-family: Geist; src: url(/fonts/Geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #ffffff; --ink: #111012; --ink-2: #4d4850; --line: #e7e2e4; --line-2: #cfc8cc; --soft: #f7f3f4;
  --rose: #f6bfcb; --butter: #fce588; --mint: #bfe9d4; --sky: #bfdcf6; --lilac: #d9c8f2; --on: #111012;
  --sans: Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g: clamp(16px, 3vw, 44px); --ease: cubic-bezier(.2, .8, .2, 1); --pop: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #0f0e10; --ink: #f7f4f5; --ink-2: #bdb6ba; --line: #2a262b; --line-2: #3d373e; --soft: #19171a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--sans); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 24px; border-radius: 99px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 16px; white-space: nowrap; transition: translate .3s var(--ease); }
.btn:hover { translate: 0 -2px; }
.btn:active { scale: .98; }
.btn .go { transition: translate .3s var(--ease); }
.btn:hover .go { translate: 4px 0; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
.btn.big { height: 66px; padding: 0 34px; font-size: 18px; }
.btn.wide { width: 100%; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink); transition: background .2s; }
.icon-btn:hover { background: var(--soft); }
.icon-btn[disabled] { opacity: .25; pointer-events: none; }

.sw-skip { position: absolute; left: var(--g); top: -60px; z-index: 30; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 600; }
.sw-skip:focus { top: 10px; }

/* ---- the bar */
.sw-nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 68px; padding-inline: var(--g); background: var(--bg); }
.sw-brand { justify-self: start; font-weight: 700; font-size: 17px; letter-spacing: -.035em; white-space: nowrap; }
.sw-links { display: flex; gap: clamp(14px, 2.2vw, 34px); font-size: 15.5px; font-weight: 500; }
.sw-links a, .sw-foot nav a, .sw-live { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px; transition: background-size .35s var(--ease); padding-bottom: 2px; }
.sw-links a:hover, .sw-foot nav a:hover, .sw-live:hover { background-size: 100% 1.5px; }
.sw-nav-r { justify-self: end; display: flex; align-items: center; gap: 6px; }
.sw-nav-r .btn { margin-left: 8px; }
.sw-lang { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 13.5px; font-weight: 600; transition: background .2s; }
.sw-lang:hover { background: var(--soft); }

/* ---- the name. Two lines on a wide screen, three on a phone, always as wide as the page. */
/* the first screen is the hero alone: what comes next starts below the fold, on any screen */
.sw-hero { min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); padding: calc(clamp(6px, 1.2vw, 20px) + 90px) var(--g) clamp(8px, 2vw, 32px); }
.sw-mark-w { position: relative; container-type: inline-size; max-width: 1760px; margin-inline: auto; }
.sw-mark { font-size: 17.2vw; font-size: calc(100cqw / 5.58); font-weight: 700; line-height: .84; letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; user-select: none; }
.sw-line { display: block; }
/* Each letter of a big title is its own box, so its weight can change without pulling the whole line apart. */
.ch { display: inline-block; }
[data-soft] { contain: layout; }
.sw-w { display: inline-block; }
/* A letter O is a box as wide as the letter and as tall as a capital, standing on the baseline. The object goes inside. */
.oo { position: relative; display: inline-block; width: .776em; height: .719em; margin-right: -.055em; vertical-align: baseline; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.oo-a { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .6s var(--pop), opacity .25s linear; will-change: transform, opacity; }
.oo-a.pre { transform: scale(.4) rotate(24deg); opacity: 0; transition: none; }
.oo-a.out { transform: scale(.4) rotate(-24deg); opacity: 0; transition: transform .3s cubic-bezier(.5, 0, .9, .4), opacity .3s linear; }
.oo-i { position: absolute; left: 50%; bottom: 0; height: calc(.719em * var(--k, 1.3)); width: auto; max-width: none; transform: translate(calc(var(--cx, 50%) * -1), var(--dy, 0%)); pointer-events: none; }
@media (hover: hover) { .oo:hover .oo-a:not(.pre):not(.out) { transform: scale(1.08) rotate(-6deg); } }
.oo.bare { border: .125em solid currentColor; border-radius: 50%; }

.sw-side { position: absolute; right: 0; bottom: 1.3cqw; width: 50%; display: grid; gap: clamp(14px, 1.6vw, 26px); justify-items: start; }
.sw-pitch { font-size: clamp(18px, 1.75vw, 29px); line-height: 1.22; letter-spacing: -.03em; font-weight: 500; max-width: 22em; text-wrap: balance; }
.sw-by { display: inline-flex; padding: 6px 12px; border-radius: 99px; background: var(--butter); color: var(--on); font-size: 14px; font-weight: 600; }
.sw-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- shared pieces of every section */
.sw-sec, .sw-say { padding: clamp(64px, 9vw, 150px) var(--g) 0; max-width: calc(1760px + 2 * var(--g)); margin-inline: auto; }
/* the hero already fills the first screen, so the idea right after it needs only a little room on top */
.sw-say { padding-top: clamp(16px, 2.4vw, 40px); }
.sw-sec { container-type: inline-size; }
.sw-k { display: inline-flex; align-items: center; gap: 9px; margin-bottom: clamp(14px, 1.6vw, 24px); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.sw-k::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 1.5px var(--ink); }
/* The word that opens each section: very large and tight, like the name. */
.sw-xl { font-size: 7.8vw; font-size: clamp(34px, 8.7cqw, 150px); font-weight: 700; line-height: .8; letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; user-select: none; margin-left: -.04em; margin-bottom: clamp(22px, 3vw, 48px); }
.sw-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--g); align-items: start; margin-bottom: clamp(28px, 4vw, 60px); }
.sw-head h2 { font-size: clamp(26px, 3.4vw, 56px); font-weight: 600; letter-spacing: -.048em; line-height: 1; text-wrap: balance; max-width: 14em; }
.sw-head > h2:only-child { grid-column: 1 / -1; }
/* in prices the right side holds the included pills, so it gets more room and the pills wrap in fewer lines */
.sw-head:has(> .sw-inc) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.sw-head > .sw-inc { margin-left: -50px; }
/* the English title is shorter, so its pills get more room */
html[lang="en"] .sw-head:has(> .sw-inc) { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); }
.sw-lead { font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-2); max-width: 34em; }

.sw-big { font-size: clamp(30px, 5.6vw, 92px); font-weight: 600; letter-spacing: -.052em; line-height: 1.02; max-width: 17em; }
.js [data-reveal] .w { opacity: .13; transition: opacity .6s linear; }
.js [data-reveal].in .w { opacity: 1; }
/* Things rise into place as they come into view. */
.js [data-rv] { opacity: 0; translate: 0 34px; transition: opacity .7s linear, translate .8s var(--ease), rotate .5s var(--ease); }
.js [data-rv].in { opacity: 1; translate: 0 0; }
.js [data-rv]:nth-child(2) { transition-delay: .08s; } .js [data-rv]:nth-child(3) { transition-delay: .16s; } .js [data-rv]:nth-child(4) { transition-delay: .24s; }

/* ---- the designs: a rail that runs off the right edge */
.sw-rail { margin-inline: calc(var(--g) * -1); }
.sw-track { display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); padding: 4px var(--g) 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
.sw-track::-webkit-scrollbar { display: none; }
.sw-card { flex: none; width: clamp(280px, 31vw, 520px); scroll-snap-align: start; display: grid; gap: 16px; align-content: start; }
.sw-shot { display: block; border-radius: 20px; overflow: hidden; border: 1.5px solid var(--ink); background: var(--soft); }
.sw-shot-bar { display: flex; gap: 6px; padding: 11px 13px; border-bottom: 1.5px solid var(--ink); background: var(--bg); }
.sw-shot-bar i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.sw-shot-bar i:first-child { background: var(--rose); } .sw-shot-bar i:nth-child(2) { background: var(--butter); } .sw-shot-bar i:nth-child(3) { background: var(--mint); }
.sw-shot img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; transition: scale .7s var(--ease); }
.sw-card:hover .sw-shot img { scale: 1.04; }
.sw-card-b { display: grid; gap: 4px; }
.sw-card h3 { font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.sw-card p { font-size: 15px; color: var(--ink-2); }
.sw-card-a { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 10px; }
.sw-live { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; font-weight: 600; }
.sw-live .ic { width: 15px; height: 15px; }
.sw-rail-nav { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 6px var(--g) 0; }
.sw-drag { margin-right: 8px; font-size: 14.5px; font-weight: 600; }
/* The rail can be pulled with the mouse; while it is held it does not snap and nothing in it is selected. */
@media (hover: hover) and (pointer: fine) { .sw-track { cursor: grab; } }
.sw-track.held { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.sw-track a, .sw-track img { -webkit-user-drag: none; }
.sw-rail-nav .icon-btn { width: 52px; height: 52px; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background .2s, color .2s; }
.sw-rail-nav .icon-btn:hover { background: var(--ink); color: var(--bg); }

/* ---- how it works: four pastel cards, a little crooked until you point at them */
.sw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.sw-step { position: relative; display: grid; align-content: end; gap: 10px; min-height: clamp(380px, 34vw, 560px); padding: clamp(20px, 2vw, 30px); border-radius: clamp(22px, 2.4vw, 34px); background: var(--rose); color: var(--on); rotate: -1.4deg; }
.sw-step:nth-child(2) { background: var(--butter); rotate: 1.1deg; } .sw-step:nth-child(3) { background: var(--mint); rotate: -.8deg; } .sw-step:nth-child(4) { background: var(--sky); rotate: 1.5deg; }
@media (hover: hover) { .js .sw-step.in:hover, .sw-step:hover { rotate: 0deg; translate: 0 -8px; transition-delay: 0s; } }
.sw-step-n { position: absolute; top: clamp(14px, 1.6vw, 24px); left: clamp(20px, 2vw, 30px); font-size: clamp(84px, 10vw, 170px); font-weight: 700; letter-spacing: -.07em; line-height: .8; }
.sw-step h3 { font-size: clamp(22px, 2vw, 32px); font-weight: 600; letter-spacing: -.045em; line-height: 1.04; }
.sw-step p { font-size: 15.5px; line-height: 1.42; }

/* ---- prices */
.sw-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.sw-pack { display: grid; gap: 6px; align-content: start; padding: clamp(20px, 2.2vw, 34px); border-radius: clamp(22px, 2.4vw, 34px); background: var(--mint); color: var(--on); }
.sw-pack:nth-child(2) { background: var(--ink); color: var(--bg); } .sw-pack:nth-child(3) { background: var(--lilac); }
.sw-pack h3 { font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; letter-spacing: -.04em; }
.sw-pack-p { font-size: 15.5px; }
.sw-pack-n { display: grid; margin-block: clamp(26px, 4.4vw, 76px) 18px; }
.sw-pack-n b { font-size: clamp(48px, 6.4vw, 108px); font-weight: 700; letter-spacing: -.065em; line-height: .9; font-variant-numeric: tabular-nums; }
.sw-pack-n span { margin-top: 8px; font-size: 14.5px; }
.sw-pack .btn { background: var(--on); color: #fff; }
.sw-pack:nth-child(2) .btn { background: var(--bg); color: var(--ink); }
/* what every site includes on one side, everything you can add on the other: two straight pastel cards; the
   packs are chips to tap, the totals count up and the bundle discount pops out. Only transform and opacity move. */
.sw-x { margin-top: clamp(28px, 4vw, 60px); display: grid; }
/* what every site includes: one line of small pills with a check, above the three packages; they pop in one after another */
.sw-inc { display: grid; gap: 14px; align-content: start; }
.sw-inc h3 { font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; letter-spacing: -.03em; }
.sw-inc ul { display: flex; flex-wrap: wrap; gap: 6px 5px; }
.sw-inc li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 5px; border-radius: 99px; background: var(--soft); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.sw-inc .ic { flex: none; width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: var(--rose); color: var(--on); stroke-width: 2.6; }
.js .sw-inc li { opacity: 0; translate: 0 8px; }
.sw-inc.in li { animation: x-rise .45s var(--pop) both; }
.sw-inc.in li:nth-child(2) { animation-delay: .04s; } .sw-inc.in li:nth-child(3) { animation-delay: .08s; } .sw-inc.in li:nth-child(4) { animation-delay: .12s; }
.sw-inc.in li:nth-child(5) { animation-delay: .16s; } .sw-inc.in li:nth-child(6) { animation-delay: .2s; } .sw-inc.in li:nth-child(7) { animation-delay: .24s; }
.sw-inc.in li:nth-child(8) { animation-delay: .28s; } .sw-inc.in li:nth-child(9) { animation-delay: .32s; } .sw-inc.in li:nth-child(10) { animation-delay: .36s; }
.sw-inc.in li:nth-child(11) { animation-delay: .4s; } .sw-inc.in li:nth-child(12) { animation-delay: .44s; } .sw-inc.in li:nth-child(n+13) { animation-delay: .48s; }
.sw-x-card { display: grid; gap: 16px; padding: clamp(20px, 2.2vw, 34px); border-radius: clamp(22px, 2.4vw, 34px); color: var(--on); transition: rotate .5s var(--pop), translate .5s var(--pop); }
@keyframes x-rise { to { opacity: 1; translate: 0 0; } }
.sw-x-add { background: var(--butter); }
@media (hover: hover) { .sw-x-card:hover { translate: 0 -4px; } }
.sw-x h3 { font-size: clamp(24px, 2.2vw, 38px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.sw-x h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sw-x-badge { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 99px; background: var(--rose); color: var(--on); font-size: 12.5px; font-weight: 700; opacity: 1; }
.sw-x-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.sw-x-head > div { display: grid; gap: 6px; }
.sw-x-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px clamp(20px, 3vw, 48px); }
.sw-x-group { display: grid; gap: 8px; align-content: start; }
.sw-x-head p { font-size: 14.5px; line-height: 1.45; opacity: .78; }
/* each side shows its chips in exactly two rows, in tidy columns; narrower screens just let them wrap */
.sw-chips { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start; gap: 8px; }
.sw-chips .sw-chip { justify-content: flex-start; }
/* what each service or extra does, in a small dark bubble over the chip; it fades and rises in (opacity and transform only) */
.sw-chip { position: relative; }
.sw-chip::after { content: attr(data-info); position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 260px; padding: 9px 12px; border-radius: 12px; background: var(--on); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.35; text-align: left; white-space: normal; opacity: 0; translate: -50% 6px; pointer-events: none; transition: opacity .18s ease, translate .25s var(--pop); }
.sw-chip:hover::after, .sw-chip:focus-visible::after, .sw-chip[aria-pressed="true"]::after { opacity: 1; translate: -50% 0; }
@media (max-width: 1400px) { .sw-chips { display: flex; flex-wrap: wrap; } }
.sw-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 6px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--on); color: var(--on); font-size: 14.5px; font-weight: 600; transition: translate .25s var(--pop), rotate .25s var(--pop), background .2s, color .2s; }
@media (hover: hover) { .sw-chip:hover { translate: 0 -2px; } }
.sw-chip[aria-pressed="true"] { background: var(--on); color: #fff; }
.sw-chip-ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--rose); color: var(--on); stroke-width: 2; }
.sw-x-group + .sw-x-group .sw-chip-ic { background: var(--mint); }
.sw-chip[aria-pressed="true"] .sw-chip-ic { background: #fff; }
.sw-chip.pop { animation: chip-pop .38s var(--pop); }
@keyframes chip-pop { 40% { scale: 1.1; } }
.sw-x-sub { margin: -2px 0 6px; font-size: 14px; line-height: 1.4; opacity: .75; }
@media (max-width: 900px) { .sw-x-groups { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sw-x-card, .sw-chip { transition: none; } .sw-chip.pop, .sw-inc.in li { animation: none; } .js .sw-inc li { opacity: 1; translate: none; } }
.sw-more { margin-top: clamp(18px, 2vw, 28px); font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-2); max-width: 40em; }

/* ---- questions as a chat: tap a question, it goes out as your message, the answer comes back after a moment */
.ch-wrap { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--g); align-items: start; }
.ch-intro { position: relative; z-index: 2; display: grid; gap: 14px; }
/* the big word lives in the text column, so the scene beside it starts at the same height */
.ch-intro > .sw-xl { margin-bottom: clamp(8px, 2vw, 34px); }
.ch-intro .sw-lead { max-width: 24em; }
.ch-more { display: grid; gap: 12px; max-width: 24em; margin-top: clamp(8px, 1.6vw, 24px); font-size: clamp(16px, 1.15vw, 18.5px); line-height: 1.55; }
.ch-intro h2 { font-size: clamp(26px, 3.4vw, 56px); font-weight: 600; letter-spacing: -.048em; line-height: 1; text-wrap: balance; max-width: 12em; }
.chat { display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: min(620px, 78vh); border-radius: 28px; overflow: hidden; background: var(--soft); border: 1.5px solid var(--ink); }
/* the chat lives on the screen of the iPad in the scene (the pink cup with the logo, the iPad and the pencil, on white);
   the screen was measured on the picture, and the chat covers it */
.tablet { position: relative; z-index: 1; width: min(1000px, 100%, calc((100vh - 64px) * 1544 / 1018)); justify-self: end; aspect-ratio: 1544 / 1018; container-type: inline-size; }
.tab-img { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.tablet .chat { position: absolute; z-index: 3; left: 40.42%; top: 5.6%; width: 39.76%; height: 80.95%; border: 0; border-radius: 2.8% / 2.08%; }
/* the picture has a white floor: in dark mode it shows as a white card */
@media (min-width: 761px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tablet { background: #fff; border-radius: 28px; overflow: hidden; } }
@media (min-width: 761px) { :root[data-theme="dark"] .tablet { background: #fff; border-radius: 28px; overflow: hidden; } }
/* the eyes in the O's of the cup look one way and then the other: two pink sockets laid over the picture's own, each with
   its pupil (positions measured on the picture); only the pupil moves, with transform */
.cup-eyes i { position: absolute; z-index: 2; overflow: hidden; border-radius: 50%; pointer-events: none; }
.cup-eyes i:first-child { left: 21.762%; top: 62.181%; width: 1.166%; height: 3.34%; background: #dea9ae; }
.cup-eyes i:last-child { left: 24.741%; top: 62.279%; width: 1.166%; height: 3.242%; background: #c79599; }
.cup-eyes i::after { content: ''; position: absolute; left: 33%; top: 74%; width: 51%; height: 34%; translate: -50% -50%; border-radius: 50%; background: #181618; animation: cup-look 5s ease-in-out infinite; }
@keyframes cup-look { 0%, 20% { transform: translateX(0); } 32%, 70% { transform: translateX(66%); } 82%, 100% { transform: translateX(0); } }
.ch-status { display: flex; justify-content: space-between; align-items: center; padding: 9px 20px 3px; background: var(--bg); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-bat { position: relative; width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3.5px; opacity: .85; }
.ch-bat::before { content: ''; position: absolute; inset: 1.5px 4px 1.5px 1.5px; border-radius: 1px; background: currentColor; }
.ch-bat::after { content: ''; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.ch-av i { width: 68%; height: 46%; background: currentColor; -webkit-mask: url(/img/brand/avatar.svg) center / contain no-repeat; mask: url(/img/brand/avatar.svg) center / contain no-repeat; }
.tablet .ch-top { padding: 10px 16px; }
.tablet .ch-b { font-size: clamp(12.5px, 1.5cqw, 15px); }
.tablet .ch-chip { padding: .6em .95em; font-size: clamp(11.5px, 1.35cqw, 13.5px); }
.ch-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg); border-bottom: 1px solid var(--line); }
.ch-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: var(--on); font-weight: 700; flex: none; }
.ch-top b { display: block; font-size: 15.5px; } .ch-top small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.ch-top small::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2fb36b; }
.ch-thread { display: flex; flex-direction: column; gap: 8px; padding: 18px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: none; }
.ch-thread::-webkit-scrollbar { display: none; }
.ch-pair { display: contents; }
.ch-b { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 15.5px; line-height: 1.42; }
.ch-b.in { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 6px; box-shadow: 0 1px 0 var(--line); }
.ch-b.out { align-self: flex-end; background: var(--rose); color: var(--on); border-bottom-right-radius: 6px; font-weight: 500; }
.ch-b.pop { animation: ch-pop .35s var(--ease) both; }
@keyframes ch-pop { from { opacity: 0; translate: 0 10px; scale: .97; } }
.ch-dots { align-self: flex-start; display: inline-flex; gap: 4px; padding: 13px 14px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--bg); }
.ch-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); animation: ch-dot 1s ease-in-out infinite; }
.ch-dots i:nth-child(2) { animation-delay: .15s; } .ch-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ch-dot { 50% { opacity: .25; translate: 0 -3px; } }
/* the questions sit in the conversation, right under the greeting and later under each answer */
.ch-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 4px; }
.ch-chip { padding: 9px 14px; border-radius: 99px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 14px; font-weight: 600; text-align: left; transition: background .2s, color .2s; }
.ch-chip:hover { background: var(--ink); color: var(--bg); }
.ch-chip.again { background: var(--butter); color: var(--on); box-shadow: none; }

/* ---- the close: one pastel block with the name again, and the foot */
.sw-end-w { padding: clamp(64px, 9vw, 150px) var(--g) var(--g); }
.sw-end { position: relative; overflow: hidden; container-type: inline-size; display: grid; justify-items: center; text-align: center; gap: clamp(14px, 1.8vw, 26px); max-width: 1760px; margin-inline: auto; padding: clamp(56px, 9vw, 160px) clamp(16px, 3vw, 48px); border-radius: clamp(28px, 4vw, 60px); background: var(--rose); color: var(--on); }
/* Pink sugar pearls pour in behind the words and pile up until the block is full. Drawn on a canvas, only while they move. */
.sw-pearls { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sw-end h2 { position: relative; font-size: 10vw; font-size: calc(100cqw / 8.45); font-weight: 700; letter-spacing: -.06em; line-height: .86; white-space: nowrap; text-transform: uppercase; }
.sw-end p { position: relative; font-size: clamp(18px, 1.75vw, 29px); font-weight: 500; letter-spacing: -.03em; }
.sw-end .btn { position: relative; background: var(--on); color: #fff; }
.sw-foot { margin: 0 var(--g); padding: clamp(36px, 5vw, 84px) clamp(20px, 3.4vw, 60px) 22px; border-radius: clamp(28px, 4vw, 60px) clamp(28px, 4vw, 60px) 0 0; background: var(--lilac); color: var(--on); }
.sw-foot-in { display: grid; grid-template-columns: minmax(0, 2.1fr) repeat(3, minmax(0, 1fr)); gap: var(--g); max-width: 1640px; margin-inline: auto; }
.sw-foot-l { display: grid; gap: clamp(14px, 1.6vw, 24px); justify-items: start; align-content: start; }
.sw-foot-b { font-size: 15.5px; font-weight: 700; letter-spacing: -.03em; }
.sw-foot-t { font-size: clamp(26px, 3.3vw, 56px); font-weight: 600; letter-spacing: -.05em; line-height: 1; max-width: 13em; text-wrap: balance; }
.sw-foot .btn { background: var(--on); color: #fff; }
.sw-foot nav { display: grid; gap: 10px; justify-items: start; align-content: start; font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.03em; }
.sw-foot h3 { font-size: 13.5px; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.sw-foot-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; max-width: 1640px; margin: clamp(40px, 6vw, 96px) auto 0; padding-top: 18px; border-top: 1.5px solid var(--on); font-size: 14.5px; font-weight: 500; }
.sw-foot-end a { font-weight: 700; }

/* Sections far below the fold are laid out when they come near. */
#prices, #faq, .sw-end-w, .sw-foot { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* beside the text, the scene starts level with the big word, sits 130 px closer to the centre and is 10% bigger (it grows
   from its top right corner, so the chat reads better without moving the text) */
@media (min-width: 1301px) { .tablet { translate: -130px -16px; scale: 1.1; transform-origin: 100% 0; margin-bottom: 70px; } }
/* in dark mode the scene is a white card: it stays in its own column so it never sits under the big word */
@media (min-width: 1301px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tablet { translate: 0 -16px; scale: 1; margin-bottom: 0; } }
@media (min-width: 1301px) { :root[data-theme="dark"] .tablet { translate: 0 -16px; scale: 1; margin-bottom: 0; } }
/* below 1300 px the scene goes under the text, as wide as it can, so the chat stays readable */
@media (max-width: 1300px) { .ch-wrap { grid-template-columns: minmax(0, 1fr); } .tablet { width: min(1000px, 100%); justify-self: center; } }
@media (max-width: 1100px) {
  .sw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-step { min-height: clamp(300px, 44vw, 420px); }
}
@media (max-width: 899px) {
  .sw-nav { grid-template-columns: 1fr auto; }
  .sw-links { display: none; }
  .sw-mark { font-size: 33vw; font-size: calc(100cqw / 2.87); line-height: .86; }
  .sw-w { display: block; }
  .sw-side { position: static; width: auto; margin-top: clamp(20px, 5vw, 36px); }
  .sw-pitch { font-size: clamp(20px, 5.2vw, 30px); }
  .sw-head { grid-template-columns: minmax(0, 1fr); }
  .sw-packs, .ch-wrap { grid-template-columns: minmax(0, 1fr); }
  .ch-intro { position: static; }
  .chat { height: min(560px, 82vh); }
  .sw-foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sw-foot-in > div { grid-column: 1 / -1; }
  .sw-foot { margin: 0; }
}
@media (max-width: 760px) {
  /* on a phone the iPad would leave the text too small: the chat stands on its own */
  .tab-img, .ch-status, .cup-eyes { display: none; }
  .tablet { width: 100%; aspect-ratio: auto; }
  .tablet .chat { position: static; width: auto; height: min(560px, 82vh); border: 1.5px solid var(--ink); border-radius: 22px; }
}
@media (max-width: 620px) {
  .sw-steps { grid-template-columns: minmax(0, 1fr); }
  .sw-step { min-height: 300px; rotate: -1deg; } .sw-step:nth-child(even) { rotate: 1deg; }
  .sw-card { width: 82vw; }
  .sw-cta .btn { flex: 1 1 auto; }
}
@media (max-width: 430px) {
  .sw-nav-r [data-act='theme'], .sw-nav .btn .ic { display: none; }
  .sw-nav .btn { padding: 0 13px; font-size: 14px; margin-left: 2px; }
  .sw-brand { font-size: 15.5px; }
  .sw-nav { gap: 8px; }
}
@media (hover: none) { .sw-drag { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oo-a, .oo-a.out, .btn, .btn .go, .sw-shot img, .sw-step { transition: none; }
  .ch-b.pop, .ch-dots i, .cup-eyes i::after { animation: none; }
  .js [data-reveal] .w, .js [data-rv] { opacity: 1; translate: 0 0; transition: none; }
}

/* ---- the logo, drawn by Brian: GOOD on top, SITES small, ONLY below. His eyeless version is the drawing, painted in the
   text colour; the pupils in the O's are two dots of the same colour that look one way and then the other (positions
   measured on his file), so touching the ring never shows. Only the pupils move, with transform. */
.logo { position: relative; display: inline-block; height: 42px; aspect-ratio: 681.1 / 568.9; flex: none; vertical-align: middle; }
.logo .lg-art { position: absolute; inset: 0; background: currentColor; -webkit-mask: url(/img/brand/logo-plain.svg) center / contain no-repeat; mask: url(/img/brand/logo-plain.svg) center / contain no-repeat; }
.logo .lg-eye { position: absolute; top: 24.5%; left: 33%; width: 4.7%; height: 5.6%; border-radius: 50%; background: currentColor; animation: logo-look 5s ease-in-out infinite; }
.logo .lg-eye + .lg-eye { left: 57.72%; }
@keyframes logo-look { 0%, 20% { transform: translateX(0); } 32%, 70% { transform: translateX(72%); } 82%, 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .logo .lg-eye { animation: none; } }
@media (forced-colors: active) { .logo .lg-art, .logo .lg-eye { forced-color-adjust: none; background: CanvasText; } }
.sw-brand .logo { height: 50px; }
.sw-foot-b .logo { height: clamp(64px, 7vw, 104px); }

/* ---- where each object sits inside its letter (made by the build script from the images) */
.oo-i[data-o="neon"] { --k: 1.112; --cx: 50.00%; --dy: 5.04%; }
.oo-i[data-o="wheel"] { --k: 1.111; --cx: 50.00%; --dy: 4.98%; }
.oo-i[data-o="like-gold"] { --k: 1.111; --cx: 50.00%; --dy: 5.01%; }
.oo-i[data-o="grass"] { --k: 1.112; --cx: 50.00%; --dy: 5.05%; }
.oo-i[data-o="pool"] { --k: 0.580; --cx: 50.00%; --dy: -36.16%; }
.oo-i[data-o="steel"] { --k: 1.111; --cx: 50.00%; --dy: 5.01%; }
.oo-i[data-o="like-red"] { --k: 1.112; --cx: 50.00%; --dy: 5.03%; }
.oo-i[data-o="like-badge"] { --k: 1.112; --cx: 50.00%; --dy: 5.02%; }
.oo-i[data-o="marquee"] { --k: 1.112; --cx: 50.00%; --dy: 5.04%; }
.oo-i[data-o="ribbon"] { --k: 1.112; --cx: 50.00%; --dy: 5.03%; }
.oo-i[data-o="hat"] { --k: 0.655; --cx: 50.00%; --dy: -26.36%; }
.oo-i[data-o="rock"] { --k: 1.111; --cx: 50.00%; --dy: 5.00%; }
.oo-i[data-o="spheres"] { --k: 1.112; --cx: 50.00%; --dy: 5.03%; }
.oo-i[data-o="thumb"] { --k: 1.111; --cx: 50.00%; --dy: 5.01%; }
.oo-i[data-o="like-coin"] { --k: 1.112; --cx: 50.00%; --dy: 5.02%; }
.oo-i[data-o="splash"] { --k: 1.112; --cx: 50.00%; --dy: 5.05%; }
.oo-i[data-o="donut"] { --k: 1.112; --cx: 50.00%; --dy: 5.02%; }
.oo-i[data-o="unicorn"] { --k: 1.112; --cx: 50.00%; --dy: 5.05%; }
.oo-i[data-o="zero"] { --k: 1.112; --cx: 50.00%; --dy: 5.03%; }
.oo-i[data-o="slime"] { --k: 1.112; --cx: 50.00%; --dy: 5.03%; }