/* getsitebase.com, the home page. Rebuilt October 7, 2026 with Squarespace's
   front page as the north star: a film behind the first words that changes
   with the website in the row below, black and white sections with big quiet
   type, one thing per card, and the plans. Our words, our websites, our
   films. See docs/WEBSITE.md, "The page since October 7, 2026". */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans.woff2") format("woff2"); }
:root {
  --ink: #111214; --body: #33363c; --muted: #555962; --line: #e4e4e0; --soft: #f3f3f1; --paper: #ffffff; --night: #0b0b0c;
  --accent: #3454d1; --accent-dark: #2a44b0; --accent-ink: #8ea2ff;
  --paper-ink: #111214; --paper-muted: #5d616a; --paper-line: #e4e4e0; --paper-soft: #f3f3f1;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --frame-w: min(960px, 48vw);
  --frame-h: calc(var(--frame-w) * 0.625);
  --overhang: calc(var(--frame-h) * 0.42);
}
* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.55 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(36px, 4.8vw, 68px); }
h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.025em; line-height: 1.12; }
.center { text-align: center; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 860px; }
.lede { margin: 18px 0 0; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--body); max-width: 680px; text-wrap: pretty; }
.lede.center { margin-left: auto; margin-right: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--ink); padding: 8px 12px; border-radius: 4px; z-index: 100; }
.skip:focus { left: 8px; }
main > section { position: relative; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { background: #2b2e36; transform: translateY(-1px); }
.btn.big { height: 58px; padding: 0 30px; font-size: 18px; border-radius: 5px; }
.btn.white { background: #fff; color: var(--ink); }
.btn.white:hover { background: #ededeb; }
.btn.plain { background: #fff; color: var(--ink); border: 1.5px solid var(--line); height: 54px; padding: 0 22px; font-size: 17px; border-radius: 5px; }
.btn.plain:hover { border-color: var(--ink); background: #fff; }

/* ---- nav: see-through over the film, white once the page is scrolled ---- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 16px 28px; color: #fff; transition: background .3s, color .3s, box-shadow .3s; }
.nav.solid { background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: inherit; }
.brand img { width: 34px; height: 34px; border-radius: 4px; }
.links { display: flex; align-items: center; gap: 26px; margin-left: 12px; }
.links a, .nav .quiet { text-decoration: none; font-size: 15.5px; font-weight: 500; color: inherit; opacity: .92; }
.links a:hover, .nav .quiet:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
/* "What it does" opens a panel with the twelve things, the way the big names' first tab does (October 27, 2026).
   It opens on hover or a click, closes when the pointer leaves or on Escape, and the whole card is one white sheet
   under the bar. On phones it is a list inside the burger menu instead. */
.links-item { position: relative; display: flex; align-items: center; }
.links-item > a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 0; }
.links-item .chev { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.links-item.open .chev { transform: rotate(180deg); }
.links-item.open > a { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
/* the panel hangs from the link itself, its left edge a little left of the words, and runs out to the right from there, so on a wide screen it is where the eye is, not in the middle of the window */
.panel { position: absolute; left: -22px; top: 100%; z-index: 31; display: flex; padding: 10px 0 24px; pointer-events: none; }
.panel[hidden] { display: none; }
.links-item.open .panel { pointer-events: auto; }
.panel-card { position: relative; width: max-content; max-width: min(1060px, calc(100vw - 300px)); background: #fff; color: var(--ink); border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .05); padding: 30px 34px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 28px; text-align: left; opacity: 0; transform: translateY(-8px); transition: opacity .18s var(--ease), transform .22s var(--ease); }
.links-item.open .panel-card { opacity: 1; transform: none; }
.panel-col > b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 8px 12px; }
.panel-col a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: inherit; }
.panel-col a:hover { background: var(--soft); }
.panel-col a i { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 5px; background: #eef1fb; color: var(--blue, #3454d1); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.panel-col a i svg { width: 20px; height: 20px; }
.panel-col a span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel-col a span b { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.panel-col a span small { font-size: 17px; line-height: 1.3; color: var(--muted); }
.panel-all { grid-column: 1 / -1; margin-top: 12px; padding: 16px 12px 4px; border-top: 1px solid rgba(0, 0, 0, .07); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; }
.panel-all svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.panel-all:hover svg { transform: translateX(3px); }
@media (max-width: 1180px) { .panel-card { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: min(640px, calc(100vw - 300px)); } }
.menu-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; padding: 0 6px 8px 18px; }
.menu-sub a { font-size: 17px; font-weight: 500; color: var(--muted); padding: 8px 10px; border-radius: 5px; white-space: nowrap; }
.menu { max-height: calc(100vh - 90px); overflow-y: auto; }
.nav-acts { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav .btn { background: #fff; color: var(--ink); height: 42px; }
.nav .btn:hover { background: #ededeb; }
.nav.solid .btn { background: var(--ink); color: #fff; }
.nav.solid .btn:hover { background: #2b2e36; }
.burger { display: none; width: 42px; height: 42px; border: 0; background: none; color: inherit; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu { position: fixed; top: 74px; left: 16px; right: 16px; z-index: 29; background: #fff; color: var(--ink); border-radius: 6px; padding: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu a { text-decoration: none; padding: 14px 16px; border-radius: 5px; font-size: 18px; font-weight: 500; }
.menu a:hover { background: var(--soft); }
.menu a.btn { margin-top: 6px; justify-content: center; height: 52px; }

/* ---- the first screen ---- */
.hero { position: relative; min-height: 86svh; background: var(--night); color: #fff; display: flex; flex-direction: column; align-items: center; overflow: visible; padding: 0 0 0; }
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
/* The film that comes in dissolves over the one going out, which stays whole underneath until the new one is all there, so there is no dark dip between them. */
.hero-media .media { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 0; transition: opacity 0s linear .45s; }
.hero-media .media.active { opacity: 1; z-index: 1; transition: opacity .42s ease; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media .media.active img { animation: sb-ken 14s linear both; }
.hero-media video { display: none; }
.hero-media .media.has-video video { display: block; }
.hero-media .media.has-video img { display: none; }
@keyframes sb-ken { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, .35) 60%, var(--night) 100%); }
.hero-content { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: clamp(210px, 21vh, 330px) 24px clamp(120px, 13vh, 210px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; flex: 1; justify-content: center; }
.hero-content > * { animation: sb-arrive .9s var(--ease) both; }
.hero-content > h1 { animation-delay: .1s; } .hero-content > .sub { animation-delay: .25s; } .hero-content > .box { animation-delay: .4s; } .hero-content > .trust { animation-delay: .55s; }
@keyframes sb-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
h1 { font-size: clamp(40px, 5.3vw, 78px); letter-spacing: -0.045em; line-height: 1; max-width: 1100px; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.sub { margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, .86); max-width: 620px; text-wrap: pretty; }
.trust { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .82); }
/* under the box, since October 29, 2026: the way in for someone who has a website already (/better) */
.better { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 16px; font-weight: 600; color: #a9baff; text-decoration: none; border-bottom: 1.5px solid rgba(169, 186, 255, .85); padding-bottom: 2px; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); transition: border-color .2s, color .2s; }
.better:hover { color: #fff; border-color: #fff; }
.better svg { transition: transform .2s var(--ease); } .better:hover svg { transform: translateX(3px); }
.hero-content > .better { animation-delay: .7s; }

/* the box: the same one the builder opens from, white on the film */
.box { width: 100%; max-width: 720px; margin-top: 6px; background: var(--paper); color: var(--paper-ink); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); padding: 14px 16px 10px; text-align: left; }
.box:focus-within { box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 2px rgba(52, 84, 209, .55); }
.step { display: none; }
.box[data-step="prompt"] .step-prompt { display: block; }
.field { position: relative; }
.box textarea { width: 100%; min-height: 46px; max-height: 220px; resize: none; border: 0; outline: none; background: transparent; color: var(--paper-ink); font: inherit; font-size: 18px; line-height: 1.5; padding: 0; margin: 0; display: block; }
.ghost { position: absolute; inset: 0; font-size: 18px; line-height: 1.5; color: #8a8f98; pointer-events: none; white-space: pre-wrap; overflow: hidden; }
.ghost.off { display: none; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; background: var(--accent); vertical-align: -0.18em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.hint { flex: 1; min-height: 1em; font-size: 13px; color: var(--paper-muted); }
.hint.bad { color: #b02a37; }
.send { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s; }
.send:hover { background: var(--accent-dark); transform: translateY(-1px); }
.send:disabled { opacity: .6; cursor: default; transform: none; }
.mic { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--paper-line); border-radius: 12px; background: #fff; color: var(--paper-muted); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; }
.mic:hover { color: var(--paper-ink); background: var(--paper-soft); }
.mic.on { background: #fde8e8; border-color: #f3b4b4; color: #b02a37; animation: micpulse 1.4s ease-in-out infinite; }
.mic[hidden] { display: none; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(176, 42, 55, .35); } 50% { box-shadow: 0 0 0 7px rgba(176, 42, 55, 0); } }
.send:focus-visible, .go:focus-visible, .pill:focus-visible, .dots button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

/* the row of websites, hanging over the bottom edge of the first screen */
.frames { position: relative; z-index: 3; width: 100%; height: var(--frame-h); margin-bottom: calc(-1 * var(--overhang)); overflow-x: clip; overflow-y: visible; }
.track { position: relative; width: 100%; height: 100%; }
.frame { position: absolute; left: 50%; top: 0; width: var(--frame-w); margin: 0; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 40px 100px rgba(0, 0, 0, .55); transform: translate(-50%, 8%) scale(.7); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .5s var(--ease); will-change: transform; }
.frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.frame.is-active { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; z-index: 3; }
.frame.is-prev, .frame.is-next { opacity: .95; pointer-events: auto; cursor: pointer; z-index: 2; }
.frame.is-prev { transform: translate(calc(-50% - 104%), 5%) scale(.92); }
.frame.is-next { transform: translate(calc(-50% + 104%), 5%) scale(.92); }
.frame.is-prev:hover, .frame.is-next:hover { opacity: 1; }
.frame-tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; flex-direction: column; gap: 1px; padding: 9px 13px; border-radius: 5px; background: rgba(17, 18, 20, .82); color: #fff; font-size: 13px; line-height: 1.3; backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s; }
.frame-tag b { font-size: 14px; }
.frame.is-active .frame-tag { opacity: 1; }
/* no arrows: over a neighbouring website the cursor becomes a word, Next or Previous, that follows the mouse (row() in home.js); a click brings that website to the middle */
.frame-cue { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; transform: translate(-50%, -50%); padding: 13px 20px; border-radius: 999px; background: rgba(17, 18, 20, .9); color: #fff; font-size: 17px; font-weight: 500; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity .15s; backdrop-filter: blur(8px); }
.frame-cue.on { opacity: 1; }
.frames.cue-on .frame.is-prev, .frames.cue-on .frame.is-next { cursor: none; }

/* ---- the numbers ---- */

/* everything to grow and run the business: six pills, then one big dark blue panel per feature in a slider, the next
   ones peeking in at the edges. The feature's headline sits inside its panel, top left; its line sits under the panel.
   The product pictures are drawn in HTML at a fixed 920 wide and scaled to the panel (suite() in home.js), and each
   panel takes the height of its picture, so nothing is left empty. */
.suite { background: linear-gradient(180deg, #ffffff 0%, #f6f6f4 100%); padding: 110px 0 100px; text-align: center; overflow: hidden; --slide-w: min(1400px, calc(100vw - 96px)); --slide-gap: 24px; }
.suite-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 38px -48px 0; }
.suite-tab { border: 0; background: transparent; font: inherit; font-size: 18px; font-weight: 500; color: var(--ink); padding: 11px 13px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.suite-tab:hover { background: var(--soft); }
.suite-tab.active { background: var(--ink); color: #fff; }
.suite-stage { position: relative; margin-top: 44px; transition: height .5s var(--ease); }
.suite-track { align-items: flex-start; }
.suite-track { display: flex; gap: var(--slide-gap); transition: transform .6s var(--ease); will-change: transform; }
.suite-slide { flex: 0 0 var(--slide-w); width: var(--slide-w); }
.suite-panel { position: relative; height: var(--panel-h, 720px); border-radius: 10px; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, #26305a 0%, #0f1220 60%); box-shadow: 0 30px 80px rgba(0, 0, 0, .18); transition: opacity .5s; }
.suite-panel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: radial-gradient(60% 80% at 50% 100%, rgba(52, 84, 209, .45), transparent 70%); pointer-events: none; }
.suite-slide:not(.active) .suite-panel { opacity: .45; }
.suite-vis { position: absolute; left: 50%; top: 210px; width: 920px; height: 580px; transform-origin: 0 0; font-size: 13px; line-height: 1.35; color: #1a1b1f; z-index: 1; text-align: left; }
.suite-vis > * { position: absolute; }
.suite-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .95); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: transform .2s var(--ease), background .2s; }
.suite-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.suite-nav.prev { left: max(16px, calc((100% - var(--slide-w)) / 2 - 26px)); }
.suite-nav.next { right: max(16px, calc((100% - var(--slide-w)) / 2 - 26px)); }
.suite-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.suite-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d5d5d1; cursor: pointer; transition: background .2s; }
.suite-dots button.on { background: var(--ink); }
.suite-cap { margin: 26px auto 0; max-width: 62ch; font-size: 19px; line-height: 1.5; color: var(--body); min-height: 58px; padding: 0 24px; text-wrap: pretty; }
.suite-cap b { display: block; font-size: clamp(26px, 2.2vw, 32px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin-bottom: 10px; text-wrap: balance; }
.suite-cap a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--ink); }
/* the dashboard window */
.sv-dash { left: 0; top: 0; width: 920px; height: 580px; background: #fff; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); display: grid; grid-template-columns: 180px 1fr; overflow: hidden; }
.sv-side { background: #0f1526; color: #c9cedb; padding: 18px 14px; }
.sv-brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 13px; margin-bottom: 18px; }
.sv-brand i { width: 22px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, #5b7cff, #3454d1); flex: none; }
.sv-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sv-side li { padding: 7px 10px; border-radius: 4px; font-size: 13px; }
.sv-side li.on { background: rgba(255, 255, 255, .12); color: #fff; }
.sv-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sv-head { display: flex; align-items: center; justify-content: space-between; }
.sv-head b { font-size: 18px; font-weight: 600; }
.sv-btn { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; font-size: 12.5px; padding: 7px 12px; border-radius: 4px; white-space: nowrap; }
.sv-btn.quiet { background: #f1f1ef; color: #1a1b1f; }
/* the week */
.sv-wk { display: flex; flex-direction: column; gap: 6px; }
.sv-wk-h { display: grid; grid-template-columns: 34px repeat(6, 1fr); gap: 6px; font-size: 11.5px; font-weight: 600; color: #6b7080; text-align: center; }
.sv-wk-g { display: grid; grid-template-columns: 34px repeat(6, 1fr); gap: 6px; height: 440px; }
.sv-wk-t { display: flex; flex-direction: column; }
.sv-wk-t i { flex: 1; font-style: normal; font-size: 10.5px; color: #9a9fab; text-align: right; padding-right: 6px; border-top: 1px solid #ecece9; }
.sv-wk-c { position: relative; border-left: 1px solid #ecece9; background: repeating-linear-gradient(to bottom, #ecece9 0 1px, transparent 1px calc(100% / 8)); }
.sv-wk-c s { position: absolute; left: 4px; right: 4px; top: calc(var(--a) * 12.5%); height: calc(var(--h) * 12.5% - 4px); text-decoration: none; background: #e8ecfb; color: #1d2a5a; border-left: 3px solid #3454d1; border-radius: 4px; padding: 5px 7px; font-size: 11px; font-weight: 600; overflow: hidden; }
.sv-wk-c s small { display: block; font-weight: 500; color: #4a567f; font-size: 10.5px; }
.sv-wk-c s.hi { background: #3454d1; color: #fff; } .sv-wk-c s.hi small { color: rgba(255, 255, 255, .8); }
.sv-wk-c s.call { background: #e3f5ea; border-color: #0a7a2f; color: #0a4d20; } .sv-wk-c s.call small { color: #2f7a4c; }
.sv-wk-c s.open { background: #f6f6f4; border-color: #d5d5d1; color: #9a9fab; text-align: center; font-weight: 500; }
.sv-wk-c s.new { background: #fff; border: 1.5px dashed #3454d1; border-left: 3px solid #3454d1; color: #1d2a5a; }
/* the phone */
.sv-ph { width: 250px; background: #fff; border-radius: 19px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 8px #0f1526, 0 0 0 9px #2a3147; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.sv-ph-top { display: flex; flex-direction: column; } .sv-ph-top b { font-size: 14px; } .sv-ph-top span { font-size: 11.5px; color: #6b7080; }
.sv-ph-svc { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid #3454d1; background: #eef1fb; border-radius: 6px; padding: 8px 10px; }
.sv-ph-svc b { font-size: 12.5px; } .sv-ph-svc small { display: block; color: #6b7080; font-size: 10.5px; } .sv-ph-svc em { font-style: normal; font-weight: 700; }
.sv-ph-month { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.sv-ph-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 11px; }
.sv-ph-days i { font-style: normal; color: #9a9fab; font-size: 10px; } .sv-ph-days b { font-weight: 500; padding: 5px 0; border-radius: 4px; }
.sv-ph-days b.dim { color: #c4c7cf; } .sv-ph-days b.on { background: #0f1526; color: #fff; }
.sv-ph-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.sv-ph-slots span { border: 1px solid #e4e4e0; border-radius: 5px; padding: 6px 0; text-align: center; font-size: 11.5px; font-weight: 600; }
.sv-ph-slots span.on { border-color: #3454d1; background: #eef1fb; color: #3454d1; }
.sv-ph-cta { background: var(--accent); color: #fff; text-align: center; font-weight: 700; padding: 10px; border-radius: 6px; font-size: 13px; }
.sv-ph-cta.black { background: #0f1526; } .sv-ph-cta.apple { background: #000; }
.sv-ph-inv div { display: flex; justify-content: space-between; font-size: 12px; padding: 7px 0; border-bottom: 1px solid #ecece9; }
.sv-ph-inv div.tot { font-weight: 700; border-bottom: 0; font-size: 13px; } .sv-ph-inv em { font-style: normal; }
.sv-ph.dark { background: linear-gradient(180deg, #1a2140, #0f1526); color: #fff; }
.sv-call { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 0 2px; }
.sv-call small { color: rgba(255, 255, 255, .6); font-size: 11px; } .sv-call b { font-size: 18px; } .sv-call > span { font-size: 12px; color: rgba(255, 255, 255, .75); }
.sv-wave { display: flex; align-items: center; gap: 3px; height: 28px; margin: 8px 0; }
.sv-wave i { width: 4px; border-radius: 2px; background: #7c9bff; height: 40%; } .sv-wave i:nth-child(2n) { height: 90%; } .sv-wave i:nth-child(3n) { height: 60%; } .sv-wave i:nth-child(5n) { height: 100%; }
.sv-tr { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.sv-tr p { margin: 0; font-size: 11.5px; background: rgba(255, 255, 255, .08); border-radius: 5px; padding: 7px 9px; line-height: 1.35; }
.sv-tr em { display: block; font-style: normal; font-size: 10px; color: #9fb3ff; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* the inbox, and the payments list */
.sv-inb { background: #fff; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.sv-row { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid #ecece9; }
.sv-row:first-child { border-top: 0; } .sv-row.hi { background: #f7f8fe; }
.sv-row > div { flex: 1; min-width: 0; } .sv-row .sv-ic, .sv-row .sv-tag, .sv-row .sv-amt, .sv-row .sv-act { flex: none; white-space: nowrap; }
.sv-row b { font-size: 13.5px; font-weight: 600; } .sv-row small { display: block; color: #6b7080; font-size: 11.5px; } .sv-row p { margin: 4px 0 0; font-size: 12.5px; color: #33363c; }
.sv-act { display: flex; gap: 6px; }
.sv-ic { width: 36px; height: 36px; border-radius: 50%; display: block; }
.sv-ic.call { background: #d6f8df; } .sv-ic.chat { background: #ece9fb; } .sv-ic.form { background: #fdf1e3; } .sv-ic.pay { background: #e3f5ea; }
.sv-tag { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; } .sv-tag.ok { background: #d6f8df; color: #0a7a2f; } .sv-tag.wait { background: #fdf1e3; color: #a35a12; }
.sv-amt { font-size: 14px; font-weight: 700; margin-right: 6px; }
.sv-pay { display: flex; flex-direction: column; gap: 14px; }
.sv-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sv-sum > div { background: #f6f6f4; border-radius: 5px; padding: 12px 14px; } .sv-sum small { color: #6b7080; font-size: 11.5px; }
.sv-sum b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .sv-sum em { font-style: normal; font-size: 11.5px; color: #0a7a2f; }
.sv-pay .sv-inb { box-shadow: none; border: 1px solid #ecece9; }
/* the reviews, the way Google shows them: a summary with the bars, and three reviews with the G */
.sv-glogo { width: 18px; height: 18px; flex: none; }
.sv-gstars { color: #FBBC04; font-size: 16px; letter-spacing: 1px; line-height: 1; }
.sv-gsum { left: 0; top: 0; width: 300px; height: 580px; background: #fff; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); padding: 24px 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.sv-gsum-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5f6368; margin-bottom: 10px; } .sv-gsum-top .sv-glogo { width: 22px; height: 22px; }
.sv-gsum > b { font-size: 56px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: #202124; }
.sv-gsum > .sv-gstars { font-size: 22px; letter-spacing: 2px; }
.sv-gsum > small { font-size: 13px; color: #5f6368; }
.sv-gbars { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.sv-gbars div { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #5f6368; }
.sv-gbars i { flex: 1; height: 8px; border-radius: 4px; background: #e8eaed; position: relative; overflow: hidden; }
.sv-gbars i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: #FBBC04; border-radius: 4px; }
.sv-gsum-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #e8eaed; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #5f6368; }
.sv-gsum-foot em { font-style: normal; color: #0a7a2f; font-weight: 600; font-size: 14px; }
.sv-grev { left: 324px; width: 596px; height: 180px; background: #fff; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); padding: 18px 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; color: #202124; }
.sv-grev-top { display: flex; align-items: center; gap: 12px; } .sv-grev-top > div { flex: 1; }
.sv-grev-top i { width: 40px; height: 40px; border-radius: 50%; font-style: normal; font-weight: 600; font-size: 16px; color: #fff; display: grid; place-items: center; flex: none; }
.sv-grev-top i.rose { background: #c2185b; } .sv-grev-top i.sky { background: #1a73e8; } .sv-grev-top i.mint { background: #188038; }
.sv-grev-top b { display: block; font-size: 14px; font-weight: 600; } .sv-grev-top small { font-size: 12px; color: #5f6368; }
.sv-grev p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #3c4043; }
/* the website in a browser, with a chat over it */
.sv-brw { left: 0; top: 0; width: 920px; background: #fff; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.sv-brw-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3f3f1; font-size: 12px; color: #6b7080; }
.sv-brw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5d5d1; } .sv-brw-bar span { margin-left: 8px; }
.sv-brw img { display: block; width: 100%; height: 540px; object-fit: cover; object-position: top; }
/* where each piece sits */
.v-book .sv-ph { right: 0; bottom: 0; }
.sv-toast { left: 230px; top: 24px; background: #0f1526; color: #fff; border-radius: 5px; padding: 10px 14px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); white-space: nowrap; }
.sv-toast i { width: 8px; height: 8px; border-radius: 50%; background: #8ff0b0; } .sv-toast b { font-weight: 700; }
.v-call .sv-ph { left: 0; top: 0; width: 272px; height: 580px; box-sizing: border-box; } .v-call .sv-inb { left: 330px; top: 0; width: 590px; height: 580px; }
.sv-ph.tall .sv-call { height: 100%; } .sv-ph.tall .sv-tr { margin-top: auto; }
.sv-ph-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 10px; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.sv-ph-foot i { width: 44px; height: 44px; border-radius: 50%; background: #e5484d; display: block; }
.sv-inb-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; } .sv-inb-head b { font-size: 18px; font-weight: 600; }
.sv-inb.wide .sv-row { padding: 15px 16px; } .sv-inb.wide .sv-row:first-of-type { border-top: 0; }
.sv-ic.text { background: #fdf1e3; }
.v-pay .sv-ph { right: 0; bottom: 0; }

/* ---- what it does: pills, then the cards in a row ---- */
.grow { background: linear-gradient(180deg, #ffffff 0%, #f6f6f4 100%); padding: 110px 0 100px; text-align: center; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 38px auto 0; max-width: 1120px; }
.pill { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; padding: 11px 16px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.pill:hover { background: var(--soft); }
.pill.active { background: var(--ink); color: #fff; }
.cards { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; padding: 40px max(24px, calc((100vw - 1200px) / 2 + 24px)) 30px; scrollbar-width: none; -webkit-overflow-scrolling: touch; text-align: left; }
.cards::-webkit-scrollbar { display: none; }
.gcard { position: relative; flex: 0 0 min(420px, 84vw); scroll-snap-align: center; display: flex; flex-direction: column; height: 560px; padding: 30px 28px 0; border-radius: 8px; background: var(--soft); color: var(--ink); text-decoration: none; overflow: hidden; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.gcard:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0, 0, 0, .16); }
.gcard.active { box-shadow: 0 0 0 2px var(--ink), 0 24px 60px rgba(0, 0, 0, .12); }
.gcard h3 { font-size: 28px; max-width: 80%; }
.gcard > p { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--body); max-width: 32ch; }
.gart { margin-top: auto; padding-top: 22px; transform: translateY(14%); transition: transform .5s var(--ease); }
.gcard:hover .gart { transform: translateY(6%); }
.gart .art { max-width: none; font-size: 13.5px; padding: 18px; border-radius: 6px 6px 0 0; border-bottom: 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .12); }
.gart .art-phone { border-radius: 19px 19px 0 0; padding-bottom: 0; }
.gart .art-screen { border-radius: 14px 14px 0 0; min-height: 0; }
.gart .art-line { font-size: 13.5px; margin-bottom: 8px; }
.gart .art-top { margin-bottom: 10px; font-size: 12px; }
.gart .art-btn { padding: 8px 12px; font-size: 13px; }
.gart .art-slots { margin: 8px 0 10px; }
.gart .art-slot, .gart .art-days span { font-size: 12.5px; padding: 7px 0; }
.gart .bubble-t { font-size: 13.5px; }
.gcard .arrow { position: absolute; right: 22px; top: 24px; width: 40px; height: 40px; border-radius: 8px; background: rgba(255, 255, 255, .9); color: var(--ink); display: grid; place-items: center; font-size: 20px; line-height: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .1); transition: transform .3s var(--ease); }
.gcard:hover .arrow { transform: translateX(4px); }

/* ---- the websites ---- */
.examples { background: linear-gradient(180deg, #ebe5da 0%, #f5f2ec 45%, #ffffff 100%); padding: 110px 0 90px; text-align: center; }
.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 50px; text-align: left; }
.ex { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.ex-shot { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: #e4e4e0; box-shadow: 0 20px 50px rgba(0, 0, 0, .1); margin-bottom: 14px; }
.ex-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.6s var(--ease); }
.ex:hover .ex-shot img { transform: translateY(-12%); }
.ex-k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ex h3 { font-size: 24px; }
.ex p { margin: 2px 0 0; font-size: 17px; line-height: 1.5; color: var(--body); }
.ex-you { position: relative; overflow: hidden; justify-content: flex-end; align-items: flex-start; background: radial-gradient(120% 80% at 50% 110%, #15192b 0%, var(--night) 60%); color: #fff; border-radius: 6px; padding: 36px 32px; min-height: 420px; }
.ex-you > * { position: relative; z-index: 1; }
.ex-you .ex-k { color: rgba(255, 255, 255, .6); }
.ex-you p { color: rgba(255, 255, 255, .72); }
.ex-you .btn { margin-top: 22px; background: #fff; color: var(--ink); }
.ex-you:hover .btn { background: #ededeb; }

/* ---- one thing per row ---- */
/* the ten things, one band each, edge to edge: the number and the words on one side, the product acting its story out on
   a dark blue panel that runs off the other edge; the sides alternate. The scenes are the page's scene engine. */
.ten { background: #fff; padding: 100px 0 90px; overflow: hidden; }
.ten > .wrap > h2 { text-align: center; }
.ten-lede { margin: 16px auto 0; text-align: center; font-size: 18px; color: var(--muted); }
/* the showcase: the names down the left, the picked one's picture on the right, a still */
.show-wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 24px; }
.show-in { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: stretch; margin-top: 44px; }
.show-list { display: flex; flex-direction: column; gap: 2px; }
.show-tab { display: flex; gap: 14px; align-items: center; width: 100%; padding: 10px 14px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: background .15s; }
.show-tab:hover { background: #f8f8f6; }
.show-tab.on { background: var(--soft); padding: 14px; }
.show-tab i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 5px; background: #eef1fb; color: var(--accent); }
.show-tab i svg { width: 18px; height: 18px; }
.show-tab b { display: block; font-size: 18px; font-weight: 500; }
.show-tab small { display: none; margin-top: 3px; font-size: 17px; line-height: 1.4; color: var(--muted); }
.show-tab.on small { display: block; }
.show-tab:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.show-stage { position: relative; min-height: 724px; border-radius: 10px; background: var(--soft); overflow: hidden; }
.show-pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.show-pane.on { opacity: 1; visibility: visible; transition: opacity .25s; }
.show .scene.ten-vis { left: 50%; top: calc(50% - 36px); transform: translate(-50%, -50%) scale(var(--show-s, .78)); transform-origin: 50% 50%; }
/* the website builder's still: the dashboard's Website page, the chat where two changes were typed, and the live site beside it with those two spots marked */
.v-edit .sv-main { padding: 16px 18px; gap: 12px; }
.sv-edit { flex: 1; min-height: 0; display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 14px; }
.sv-chat { display: flex; flex-direction: column; gap: 8px; background: #f3f3f1; border-radius: 5px; padding: 12px; min-height: 0; }
.sv-chat p { margin: 0; padding: 8px 10px; border-radius: 5px; font-size: 12px; line-height: 1.35; background: #fff; max-width: 94%; align-self: flex-start; color: #1a1b1f; }
.sv-chat p b { font-weight: 600; }
.sv-chat p.you { align-self: flex-end; background: var(--accent); color: #fff; }
.sv-chat-in { margin-top: auto; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e4e4e0; border-radius: 5px; padding: 8px 10px; font-size: 12px; color: #8a8f99; }
.sv-chat-in i { margin-left: auto; width: 22px; height: 22px; border-radius: 4px; background: var(--accent); flex: none; }
.sv-prev { display: flex; flex-direction: column; min-height: 0; border-radius: 5px; overflow: hidden; border: 1px solid #e4e4e0; background: #f3f3f1; }
.sv-prev-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #e4e4e0; font-size: 11px; color: #6b7080; }
.sv-prev-bar i { width: 8px; height: 8px; border-radius: 4px; background: #e2e2de; }
.sv-prev-bar span { margin-left: 6px; background: #f3f3f1; border-radius: 999px; padding: 3px 10px; }
.sv-prev-shot { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sv-prev-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.sv-mark { position: absolute; border: 2px solid var(--accent); border-radius: 4px; box-shadow: 0 0 0 4px rgba(52, 84, 209, .18); }
.sv-mark b { position: absolute; left: -2px; top: -24px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 5px; white-space: nowrap; line-height: 1.3; }
.show-more { position: absolute; left: 28px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 500; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.show-more:hover { background: var(--ink); color: #fff; }
.show-learn { position: absolute; right: 28px; bottom: 34px; display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; }
.show-learn:hover { text-decoration: underline; text-underline-offset: 4px; }
.ten-vis { position: absolute; left: 0; top: 0; width: 920px; height: 580px; transform-origin: 0 0; font-size: 13px; line-height: 1.35; color: #1a1b1f; z-index: 1; text-align: left; }
.ten .scene.ten-vis > * { position: absolute; }
.ten .scene.ten-vis { position: absolute; padding: 0; min-height: 0; max-width: none; width: 920px; height: 580px; border-radius: 0; box-shadow: none; background: transparent; display: block; overflow: visible; }
.ten .scene::before { display: none; }
.ten-vis.v-call .sv-ph { left: 0; top: 0; width: 272px; height: 580px; box-sizing: border-box; } .ten-vis.v-call .sv-inb { left: 330px; top: 0; width: 590px; }
.ten-vis.v-book .sv-ph { right: 0; bottom: 0; }
.ten-vis .sv-ph.full { height: 560px; } /* a phone that stands as tall as the others, so every band's picture is about the same size */
.ten-vis.v-pay .sv-ph { right: 0; bottom: 0; }
.ten-vis .sv-toast { left: 230px; top: 24px; }
.ten-vis .sv-tr p[data-at], .ten-vis .sv-row[data-at], .ten-vis .sv-wk-c s[data-at] { transition-duration: .5s; }
.rows { background: linear-gradient(180deg, #ffffff 0%, #f7f7f5 100%); padding: 110px 0 60px; }
.rows > .wrap > h2, .rows > .wrap > .lede { text-align: center; }
.feat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 70px 0; }
.feat.flip .feat-text { order: 2; }
.feat-k { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.feat h3 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.04; }
.feat .lede { font-size: 18px; margin-top: 16px; }
.checks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checks li { position: relative; padding-left: 36px; font-size: 17.5px; line-height: 1.45; color: var(--ink); }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 5px; background: #dcf5e4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a63e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.feat .btn.big { margin-top: 28px; }
.feat-note { margin: 22px 0 0; font-size: 16.5px; color: var(--body); }
.feat-art { display: flex; justify-content: center; position: relative; }
.feat-art > * { position: relative; z-index: 1; }

/* the mocks: the product as it is, on paper */
.art { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--paper-line); border-radius: 8px; box-shadow: 0 30px 70px rgba(20, 33, 61, .14); padding: 20px; color: var(--paper-ink); font-size: 15px; line-height: 1.45; }
.art-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--paper-muted); }
.art-top .art-pill + span, .art-top .art-title + span { margin-left: auto; }
.art-title { font-size: 17px; color: var(--paper-ink); }
.art-line { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--paper-ink); }
.art-sm { font-size: 13px; color: var(--paper-muted); }
.art-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--paper-line); flex-wrap: wrap; }
.art-row > span:first-child { flex: 1; }
.art-row .art-btn { flex: none; }
.art-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.art-total { font-weight: 700; border-top-width: 2px; }
.art-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.art-pill.ok { background: #d6f8df; color: #0a7a2f; }
.art-pill.wait { background: #fdf1e3; color: #a35a12; }
.art-btn { display: inline-block; padding: 9px 14px; border-radius: 5px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
.art-btn.quiet { background: #f3f3f1; color: var(--paper-ink); }
.art-days { display: flex; gap: 8px; margin-top: 4px; }
.art-days span { flex: 1; text-align: center; padding: 8px 0; border-radius: 5px; border: 1px solid var(--paper-line); font-weight: 600; font-size: 14px; }
.art-days span.on { background: var(--paper-ink); color: #fff; border-color: var(--paper-ink); }
.art-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; }
.art-slot { border: 1px solid var(--paper-line); border-radius: 5px; padding: 9px 0; text-align: center; font-weight: 600; font-size: 14px; }
.art-slot.on { border-color: var(--accent); background: #eef1fb; color: #3454d1; }
.art-chat { display: flex; flex-direction: column; gap: 10px; }
.art-chat .art-row { margin-top: 4px; }
.art-google { padding: 16px; }
.g-bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--paper-line); border-radius: 999px; padding: 9px 14px; font-size: 14px; color: var(--paper-ink); margin-bottom: 14px; }
.g-bar span { width: 16px; height: 16px; border-radius: 4px; border: 2px solid #4285f4; border-right-color: #ea4335; border-bottom-color: #fbbc05; border-left-color: #34a853; flex: none; }
.g-result { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.g-url { font-size: 12.5px; color: #1f6b2a; }
.g-title { font-size: 17px; color: #1a0dab; }
.g-desc { font-size: 13.5px; color: var(--paper-muted); line-height: 1.45; }
.art-phone { width: 300px; max-width: 100%; margin: 0 auto; background: #0f1526; border-radius: 21px; padding: 14px; box-shadow: 0 30px 70px rgba(20, 33, 61, .22); }
.art-screen { background: #fff; border-radius: 15px; padding: 18px 14px; min-height: 320px; display: flex; flex-direction: column; gap: 10px; }
.bubble-t { max-width: 88%; padding: 10px 13px; border-radius: 6px; font-size: 14.5px; line-height: 1.4; color: var(--paper-ink); }
.bubble-t.them { background: #f0f0ee; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble-t.me { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble-time { font-size: 11.5px; color: var(--paper-muted); text-align: center; }

/* ---- the stages: each example is a small stage where the product does its thing, on a loop, when it is on screen ---- */
.scene { position: relative; width: 100%; max-width: 540px; min-height: 500px; border-radius: 10px; padding: 60px 26px 26px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 70% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.scene > * { position: relative; }
.scene.t-sky { background: linear-gradient(160deg, #e2ecff 0%, #f2f6ff 100%); }
.scene.t-slate { background: linear-gradient(160deg, #e6eaf0 0%, #f4f6f9 100%); }
.scene.t-sand { background: linear-gradient(160deg, #f5e7d0 0%, #fbf5ec 100%); }
.scene.t-mint { background: linear-gradient(160deg, #d9f3e4 0%, #f0faf4 100%); }
.scene.t-lilac { background: linear-gradient(160deg, #e7e2fb 0%, #f5f3fd 100%); }
.scene.t-rose { background: linear-gradient(160deg, #fbe2dd 0%, #fdf3f1 100%); }
.scene.t-night { background: radial-gradient(90% 90% at 80% 0%, #223058 0%, #121828 60%); color: #fff; box-shadow: none; }
.scene.t-night::before { background: radial-gradient(60% 50% at 70% 0%, rgba(52, 84, 209, .45), rgba(52, 84, 209, 0) 70%); }
.scene .art { max-width: none; box-shadow: 0 24px 60px rgba(20, 33, 61, .16); }
.scene .review, .scene .confirm, .scene .summary { margin: -22px 0 0 auto; width: 84%; }
.t-night .art { background: #1a2238; border-color: rgba(255, 255, 255, .1); color: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.t-night .art-sm { color: rgba(255, 255, 255, .62); }
.t-night .art-line { color: #fff; }
.t-night .art-row { border-color: rgba(255, 255, 255, .1); }
.t-night .art-btn.quiet { background: rgba(255, 255, 255, .12); color: #fff; }
.t-night .bubble-t.them { background: rgba(255, 255, 255, .1); color: #fff; }
.chat { display: flex; flex-direction: column; gap: 10px; }
/* things that arrive, in order */
.scene [data-at] { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.scene [data-at].on { opacity: 1; transform: none; }
.scene .swap:not(.on) { display: none; }
.scene .star[data-at] { display: inline-block; transform: scale(.3); transition: opacity .2s, transform .4s cubic-bezier(.3, 1.7, .5, 1); }
.scene [data-pop].on { animation: sb-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sb-pop { from { transform: scale(.5); } to { transform: none; } }
.scene [data-type].typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: currentColor; vertical-align: -.15em; animation: blink 1s steps(1) infinite; }
.tap { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 5px rgba(52, 84, 209, .35); pointer-events: none; opacity: 0; transform: none; transition: none; }
.tap.on { animation: sb-tap .75s var(--ease) both; }
@keyframes sb-tap { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.art-btn { position: relative; }
.toast { position: absolute; right: 18px; top: 18px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px 10px 10px; border-radius: 6px; background: #111214; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); white-space: nowrap; }
.toast.second { top: 68px; }
.toast[data-at] { transform: translate(14px, 0); }
.toast i { width: 20px; height: 20px; border-radius: 5px; flex: none; background: #1d7a45 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ok-dot { display: inline-block; width: 17px; height: 17px; border-radius: 4px; margin-right: 8px; vertical-align: -3px; background: #1d7a45 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.avatar { width: 32px; height: 32px; border-radius: 6px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.who { display: block; font-size: 14.5px; color: var(--paper-ink); }
.g-mark { margin-left: auto; font-weight: 800; font-size: 20px; color: #4285f4; }
.stars { display: flex; gap: 4px; font-size: 30px; line-height: 1; color: #f5b301; margin: 2px 0 12px; }
.g-result.you { position: relative; background: #eef1fb; border-radius: 5px; padding: 10px 104px 10px 12px; margin: 0 -4px 4px; }
.g-you { position: absolute; right: 10px; top: 10px; font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; padding: 3px 8px; border-radius: 999px; }
.art-days span.on { background: var(--paper-ink); color: #fff; border-color: var(--paper-ink); }
.ring { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.ring i { width: 10px; height: 10px; border-radius: 5px; background: #4ade80; animation: sb-ring 1.1s ease-out infinite; }
@keyframes sb-ring { from { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } to { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } }
.slot { display: grid; }
.slot > * { grid-area: 1 / 1; justify-self: end; }
.dots { display: inline-flex; gap: 4px; padding: 12px 13px; background: var(--accent); border-radius: 6px; border-bottom-right-radius: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .85); animation: sb-dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sb-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.mini { background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid var(--paper-line); box-shadow: 0 18px 44px rgba(20, 33, 61, .12); font-size: 11px; color: var(--paper-ink); }
.mini-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f6f6f4; transition: background .7s var(--ease), color .7s var(--ease); }
.mini-head b { font-size: 12.5px; margin-right: 6px; } .mini-head span { opacity: .75; }
.mini-head em { margin-left: auto; font-style: normal; background: #e8a33d; color: #1b1d21; padding: 4px 9px; border-radius: 4px; font-weight: 700; }
.mini-head.on { background: #1f3a5f; color: #fff; }
.mini-hero { padding: 16px 12px 14px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, #fff, #f7f7f5); }
.mini-h1 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; max-width: 250px; }
.mini-btns { display: flex; gap: 6px; } .mini-btns span { width: 66px; height: 14px; border-radius: 4px; background: #1f3a5f; } .mini-btns span + span { background: #e5e5e2; }
.mini-foot { display: flex; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--paper-line); color: var(--paper-muted); font-size: 10.5px; }
.mini-sat { color: #1f3a5f; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .scene [data-at] { opacity: 1; transform: none; transition: none; } .ring i, .dots i, .tap.on, .scene [data-pop].on { animation: none; } .tap { display: none; } }

/* ---- a person on the other end ---- */
.support { background: radial-gradient(90% 120% at 80% 0%, #1b2440 0%, var(--night) 55%); color: #fff; padding: 100px 0; }
.support-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.support .feat-k { color: var(--accent-ink); }
.support h2 { font-size: clamp(34px, 4vw, 56px); }
.support p { margin: 20px 0 0; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 520px; }
.support a { color: #fff; }
.support-words small { display: block; margin-top: 22px; font-size: 17px; color: rgba(255, 255, 255, .5); }
/* the first two weeks as three steps: a line down the left, a dot per step, the last one lit */
.trial-steps { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; }
.trial-steps::before { content: ""; position: absolute; left: 112px; top: 18px; bottom: 18px; width: 2px; background: rgba(255, 255, 255, .12); }
.trial-steps li { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 0 42px; padding: 14px 0; }
.trial-steps li::before { content: ""; position: absolute; left: 91px; top: 18px; width: 12px; height: 12px; border-radius: 4px; background: var(--night); border: 2px solid rgba(255, 255, 255, .45); }
.trial-steps li.last::before { background: var(--accent); border-color: var(--accent-ink); box-shadow: 0 0 0 6px rgba(52, 84, 209, .25); }
.trial-steps span { font-size: 17px; font-weight: 600; color: var(--accent-ink); padding-top: 2px; white-space: nowrap; }
.trial-steps div { font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, .66); }
.trial-steps div b { display: block; font-size: 19px; font-weight: 500; color: #fff; margin-bottom: 2px; }

/* ---- the facts ---- */
.facts { background: var(--night); color: #fff; padding: 100px 0 96px; text-align: center; }
.facts h2 { color: #fff; }
.facts-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 56px; text-align: left; }
.facts-big { position: relative; display: grid; place-items: center; justify-self: center; }
.facts-big b { position: absolute; font-size: clamp(72px, 8vw, 128px); font-weight: 400; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.facts-lead p { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.02em; margin: 0; text-wrap: pretty; }
.facts-lead small { display: block; margin-top: 14px; font-size: 17px; color: rgba(255, 255, 255, .5); }
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.facts-item { text-align: left; display: flex; flex-direction: column; gap: 10px; }
.facts-top { position: relative; display: grid; place-items: center; width: 96px; height: 96px; }
.facts-top b { position: absolute; font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.facts-top b.frac { font-size: 20px; letter-spacing: -.02em; }
.facts-item p { margin: 0; font-size: 17.5px; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.facts-item small { font-size: 17px; color: rgba(255, 255, 255, .5); margin-top: auto; }
.facts-lead p u, .facts-item p u { text-decoration: underline; text-decoration-color: #9fb3ff; text-decoration-thickness: .08em; text-underline-offset: .16em; }
.facts-src { margin: 36px auto 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .38); text-align: center; max-width: 900px; }
.facts-ring { display: block; }
.facts-ring-bg { fill: none; stroke: rgba(255, 255, 255, .12); }
.facts-ring-fill { fill: none; stroke: currentColor; stroke-linecap: round; stroke-dasharray: 0 var(--c); transition: stroke-dasharray 1.6s var(--ease) .2s; }
.in .facts-ring-fill, .facts-item.in .facts-ring-fill { stroke-dasharray: var(--d) var(--c); }
.facts-ring.blue { color: #9fb3ff; } .facts-ring.mint { color: #8ff0b0; } .facts-ring.rose { color: #ffa3b5; } .facts-ring.amber { color: #ffd166; } .facts-ring.lilac { color: #d3cbf4; }

/* ---- the plans ---- */
.plans-wrap { background: linear-gradient(180deg, #f3f3f1 0%, #ebe8e1 100%); padding: 110px 0; text-align: center; }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; text-align: left; margin-top: 44px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--paper); border: 1px solid var(--paper-line); border-radius: 8px; padding: 28px 26px 24px; }
.plan-card.lead { border-color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .12), 0 0 0 1.5px var(--ink) inset; }
.plan-tag { position: absolute; top: -15px; left: 26px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; }
.plan-k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); }
.plan-card strong { font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; margin-top: 4px; }
.plan-card strong small { font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--paper-muted); }
.plan-h { font-size: 20px; font-weight: 600; margin-top: 10px; letter-spacing: -0.01em; }
.plan-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.plan-list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; color: var(--paper-ink); }
.plan-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 5px; background: #dcf5e4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a63e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan-list li.plan-all { font-weight: 700; }
.plan-list li.plan-all::before { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.plan-list b { font-weight: 700; }
.plan-fine { margin-top: 16px; font-size: 14px; color: var(--paper-muted); }
.plan-card .btn { margin-top: 14px; }
.plan-card .btn.big { height: 54px; font-size: 17px; }
.plans-foot { margin: 18px auto 0; font-size: 16px; line-height: 1.55; color: var(--body); max-width: 720px; }
.payback { margin-top: 56px; text-align: left; }
.payback h3 { text-align: center; font-size: 26px; }
.payback-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.payback-grid div { background: var(--paper); border: 1px solid var(--paper-line); border-radius: 6px; padding: 22px 22px 20px; }
.payback-grid b { display: block; font-size: 18px; margin-bottom: 6px; }
.payback-grid p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--body); }

/* ---- questions ---- */
.faq-wrap { background: var(--paper); padding: 110px 0; }
.faq-list { margin-top: 36px; display: flex; flex-direction: column; }
.faq-wrap details { border-top: 1px solid var(--line); }
.faq-wrap details:last-child { border-bottom: 1px solid var(--line); }
.faq-wrap summary { cursor: pointer; list-style: none; font-weight: 500; font-size: 21px; color: var(--ink); padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary::after { content: "+"; font-size: 28px; font-weight: 300; color: var(--muted); transition: transform .2s var(--ease); flex: none; }
.faq-wrap details[open] summary::after { transform: rotate(45deg); }
.faq-wrap details p { margin: 0 0 24px; font-size: 18px; line-height: 1.55; color: var(--body); max-width: 64ch; }

/* ---- the last ask ---- */
.final { position: relative; min-height: 72vh; display: grid; place-items: center; text-align: center; color: #fff; background: var(--night); overflow: hidden; padding: 100px 24px; }
.final-media { position: absolute; inset: 0; z-index: 0; }
.final-media img, .final-media video { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.final-media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.final-media video { display: none; }
.final-media.has-video video { display: block; } .final-media.has-video img { display: none; }
.final-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.final h2 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.045em; }
.final p { margin: 0; font-size: 19px; color: rgba(255, 255, 255, .8); }
.final-in { width: 100%; max-width: 760px; margin: 0 auto; }
.final .box { text-align: left; margin-top: 10px; }
.final .trust { margin-top: 2px; }
.box.box-again { view-transition-name: none; }

/* ---- footer ---- */
.foot { background: var(--night); color: #fff; padding: 72px 0 36px; font-size: 15.5px; }
.foot-in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand p { margin: 16px 0 0; color: rgba(255, 255, 255, .72); max-width: 36ch; line-height: 1.55; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 6px; }
.foot-col a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-end { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .5); font-size: 14px; }

/* ---- the sheet behind the microphone ---- */
.sheet-back { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sheet-back[hidden] { display: none; }
.sheet { position: relative; width: min(640px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--paper); color: var(--paper-ink); border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); padding: 22px 22px 18px; text-align: left; }
.sheet h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.sheet .lede { margin: 0 0 14px; font-size: 14px; color: var(--paper-muted); }
.sheet .talk { display: flex; gap: 14px; align-items: flex-start; }
.talk-mic { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--paper-line); background: #fff; color: var(--paper-ink); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; }
.talk-mic.on { background: #fde8e8; border-color: #f3b4b4; color: #b02a37; animation: micpulse 1.4s ease-in-out infinite; }
.sheet textarea { width: 100%; min-height: 84px; font: inherit; font-size: 15px; border: 1px solid var(--paper-line); border-radius: 5px; padding: 10px 12px; background: #fff; resize: vertical; }
.sheet .status { min-height: 18px; font-size: 12.5px; color: var(--paper-muted); margin-top: 4px; }
.sheet .status.live { color: #b02a37; }
.asks { list-style: none; margin: 10px 0 14px; padding: 0; }
.ask { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--paper-line); animation: askin .4s ease-out both; }
.ask:nth-child(2) { animation-delay: 55ms; } .ask:nth-child(3) { animation-delay: 110ms; } .ask:nth-child(4) { animation-delay: 165ms; } .ask:nth-child(5) { animation-delay: 220ms; } .ask:nth-child(6) { animation-delay: 275ms; } .ask:nth-child(7) { animation-delay: 330ms; }
@keyframes askin { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.ask-ring { width: 22px; height: 22px; flex-shrink: 0; border-radius: 5px; border: 2px solid var(--paper-line); display: grid; place-items: center; color: #fff; }
.ask-ring svg { display: none; }
.ask.on .ask-ring { background: #1d7a45; border-color: #1d7a45; animation: askpop .38s ease-out; }
.ask.on .ask-ring svg { display: block; }
@keyframes askpop { 0% { transform: scale(.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.ask-q { display: block; font-size: 14.5px; font-weight: 600; }
.ask.on .ask-q { color: #1d7a45; }
.ask.skip .ask-ring { background: #d99a1b; border-color: #d99a1b; animation: askpop .38s ease-out; }
.ask.skip .ask-ring svg { display: block; }
.ask.skip .ask-q { color: #a9730f; }
.ask-eg { display: block; font-size: 12.5px; color: var(--paper-muted); }
.ask-heard { display: block; font-size: 13.5px; color: var(--paper-ink); }
.ask.on .ask-eg { display: none; }
.ask-logo .ask-words { flex: 1; min-width: 0; }
.ask-logo .ask-heard { display: none; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 500; }
.ask-logo.on .ask-heard { display: inline-flex; }
.ask-logo .ask-heard img { height: 22px; width: auto; max-width: 96px; border-radius: 4px; padding: 2px; background: repeating-conic-gradient(#e4e4e4 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.swatches { display: inline-flex; gap: 4px; }
.swatches i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(20, 33, 61, .2); }
.ask-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sheet .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.go { height: 46px; padding: 0 16px; border: 0; border-radius: 5px; background: var(--accent); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.go:hover { background: var(--accent-dark); }
.sheet .quiet-btn { height: 44px; padding: 0 14px; border: 1px solid var(--paper-line); border-radius: 5px; background: #fff; color: var(--paper-ink); font: inherit; font-size: 15px; cursor: pointer; }
.sheet .quiet-btn.small { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 4px; }
.text-btn { border: 0; background: none; font: inherit; font-size: 13px; color: var(--paper-muted); cursor: pointer; padding: 0; text-decoration: underline; }
.text-btn[hidden] { display: none; }
.sheet.handing .talk, .sheet.handing .asks, .sheet.handing h2, .sheet.handing .lede { opacity: .35; pointer-events: none; transition: opacity .3s ease; }
.handing-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--paper-ink); }
.sheet.handing .handing-note { display: flex; }
.handing-bar { width: 180px; height: 4px; border-radius: 2px; background: var(--paper-line); overflow: hidden; position: relative; }
.handing-bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--accent); animation: handslide 1s ease-in-out infinite; }
@keyframes handslide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---- arriving ---- */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(18px); }

/* ---- phones and tablets ---- */
@media (max-width: 1100px) {
  :root { --frame-w: min(700px, 60vw); }
  .frame.is-prev { transform: translate(calc(-50% - 104%), 5%) scale(.92); }
  .frame.is-next { transform: translate(calc(-50% + 104%), 5%) scale(.92); }
  .foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .links { display: none; }
  .panel { display: none; }
  .ten { padding-top: 64px; }
  .show-in { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .show-list { flex-direction: row; overflow-x: auto; gap: 8px; padding: 2px 2px 8px; scrollbar-width: none; }
  .show-list::-webkit-scrollbar { display: none; }
  .show-tab, .show-tab.on { flex: none; width: auto; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; }
  .show-tab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .show-tab i, .show-tab small, .show-tab.on small { display: none; }
  .show-tab b { font-size: 17px; white-space: nowrap; }
  .show-stage { min-height: 0; padding: 20px 16px 24px; }
  .show-pane { position: relative; inset: auto; display: none; }
  .show-pane.on { display: block; }
  .show .scene.ten-vis { left: 0; top: 0; }
  .show-more { position: static; margin-top: 18px; }
  .show-learn { position: static; display: flex; margin-top: 16px; }
  .ten-vis.v-edit .sv-dash { display: block; height: auto; }
  .v-edit .sv-side { display: none; }
  .sv-edit { grid-template-columns: 1fr; }
  .sv-prev-shot { height: 240px; }
  .ten .scene.ten-vis, .ten-vis { position: relative; width: auto; height: auto; transform: none !important; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-right: 16px; }
  .ten .scene.ten-vis > *, .ten-vis.v-call .sv-inb, .ten-vis.v-call .sv-ph, .ten-vis.v-book .sv-ph, .ten-vis.v-pay .sv-ph { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-width: 420px; height: auto; }
  .ten-vis [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .ten-vis .sv-dash, .ten-vis .sv-toast, .ten-vis.v-rev .sv-g { display: none; }
  .ten-vis .sv-grev { top: auto !important; }
  .ten-vis .sv-ph { width: 100%; max-width: 300px; }
  .sv-row .sv-act { display: none; }
  .ten { padding-bottom: 24px; }
  .who { padding: 64px 0 56px; }
  .who-strip { margin-top: 32px; }
  .who-card { width: 240px; height: 320px; }
  .proof { padding: 64px 0 48px; }
  .proof-tiles { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .proof-tile { padding: 24px 20px 20px; }
  .proof-rating { font-size: 18px; gap: 10px; }
  .lg { padding: 0 26px; font-size: 18px; }
  .suite { --slide-w: calc(100vw - 48px); --slide-gap: 12px; }
  .suite-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 24px 6px; margin: 28px -24px 0; max-width: none; }
  .suite-tabs::-webkit-scrollbar { display: none; }
  .suite-tab { flex: none; font-size: 16px; }
  .suite-stage { margin-top: 28px; }
  .suite-panel { height: auto; border-radius: 8px; padding: 24px 0 24px 20px; display: flex; flex-direction: column; gap: 18px; }
  .suite-vis { position: relative; left: 0; top: 0; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-right: 20px; }
  .suite-vis:not(.v-week) { transform: none !important; }
  .suite-vis > *, .suite-vis.v-call .sv-inb, .suite-vis.v-call .sv-ph, .suite-vis.v-book .sv-ph, .suite-vis.v-pay .sv-ph { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .suite-vis .sv-dash, .suite-vis .sv-toast { display: none; }
  .suite-vis .sv-inb, .suite-vis.v-call .sv-inb { width: 100%; max-width: 420px; } .sv-row .sv-act { display: none; }
  .suite-vis .sv-brw, .suite-vis .sv-gsum, .suite-vis .sv-grev, .suite-vis.v-call .sv-ph { width: 100%; max-width: 420px; height: auto; }
  .suite-vis .sv-grev { top: auto !important; left: auto; }
  .sv-brw img { height: 220px; }
  .suite-vis.v-week { display: block; width: 920px; height: 580px; padding: 0; transform-origin: top left; }
  .suite-vis.v-week .sv-dash { display: grid; position: absolute; left: 0; top: 0; }
  .suite-nav { display: none; }
  .suite-cap { font-size: 18px; }
  .nav { padding: 12px 16px; gap: 14px; }
  .nav .quiet { display: none; }
  .nav .btn { height: 38px; padding: 0 14px; font-size: 15px; }
  .burger { display: flex; }
  .hero-content { padding: 150px 20px 60px; gap: 16px; }
  :root { --frame-w: 88vw; --overhang: calc(var(--frame-h) * 0.3); }
  .frame.is-prev { transform: translate(calc(-50% - 92%), 7%) scale(.86); }
  .frame.is-next { transform: translate(calc(-50% + 92%), 7%) scale(.86); }
  .frame-cue { display: none; }
  .frame-tag { font-size: 12px; left: 10px; bottom: 10px; }
  .ex-grid, .plan-cards, .payback-grid { grid-template-columns: 1fr; }
  .facts-hero { grid-template-columns: 1fr; gap: 28px; text-align: center; margin-top: 40px; } .facts-lead p { text-align: center; }
  .facts-row { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
  .facts { padding: 72px 0 64px; }
  .logos { padding-top: calc(var(--overhang) + 36px); }
  .feat { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .scene { min-height: 420px; padding: 54px 16px 16px; border-radius: 8px; }
  .mini-head span { display: none; }
  .toast { right: 12px; top: 12px; font-size: 12.5px; }
  .toast.second { top: 58px; }
  .feat.flip .feat-text { order: 0; }
  .support-in { grid-template-columns: 1fr; gap: 32px; }
  .trial-steps { padding-left: 0; }
  .trial-steps li { grid-template-columns: 80px 1fr; gap: 0 28px; }
  .trial-steps::before { left: 93px; }
  .trial-steps li::before { left: 88px; }
  .grow, .examples, .rows, .facts, .plans-wrap, .faq-wrap { padding-top: 80px; padding-bottom: 80px; }
  .pills { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 0 24px 6px; max-width: none; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .pill { white-space: nowrap; }
  .gcard { min-height: 500px; }
  .plan-card.lead { order: -1; }
  .ex-you { min-height: 260px; }
  .foot-in { grid-template-columns: 1fr; gap: 28px; }
  .foot-end { flex-direction: column; gap: 6px; }
}
@media (max-width: 560px) {
  .sheet .talk { flex-direction: column; }
  h1 { font-size: clamp(38px, 11vw, 56px); }
  .box { border-radius: 16px; padding: 12px 12px 8px; }
  .gcard { flex-basis: 86vw; padding: 22px 20px 20px; }
  .art-phone { width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
  .facts-ring-fill { transition: none; }
  .who-track, .who-pills-track { animation: none; }
  html { scroll-behavior: auto; }
  .hero-media .media.active img { animation: none; }
  .frame, .hero-media .media, .ex-shot img, .gart .art { transition: none; }
  .ask, .ask.on .ask-ring, .talk-mic.on, .mic.on { animation: none; }
  .handing-bar::after { animation: none; width: 100%; }
  .js .reveal:not(.in) { opacity: 1; transform: none; }
}

/* ---- say it, watch it build ---- */
/* the proof: trusted by the pros, three number tiles, the ratings line, and a logo bar edge to edge that scrolls on
   a loop (paused under the mouse). The numbers are placeholders until the real ones exist. */
.proof { background: linear-gradient(180deg, #ffffff 0%, #f6f6f4 100%); padding: 80px 0 64px; text-align: center; }
.proof h2 em { font-style: normal; color: var(--accent); display: block; }
.proof-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px auto 0; max-width: 1100px; }
.proof-tile { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 32px 24px 26px; box-shadow: 0 10px 30px rgba(0, 0, 0, .05); }
.proof-tile b { display: block; font-size: clamp(52px, 5.6vw, 84px); font-weight: 400; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.proof-tile span { display: block; margin-top: 12px; font-size: 18px; color: var(--body); }
.proof-tile small { display: block; margin-top: 8px; font-size: 17px; color: var(--muted); }
.proof-rating { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 34px; font-size: 19px; }
.proof-rating b { font-weight: 600; }
.proof-rating .sep { color: #c9c9c5; }
.proof-stars { color: #FBBC04; font-size: 24px; letter-spacing: 2px; line-height: 1; }
.proof-tp { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.proof-tp i { font-style: normal; color: #00b67a; font-size: 22px; line-height: 1; }
.pf-g { width: 22px; height: 22px; }
.proof-note { margin: 14px 0 0; font-size: 17px; color: var(--muted); }
.logos { background: #111214; color: #fff; padding: calc(var(--overhang) + 44px) 0 36px; overflow: hidden; }
.logos-h { text-align: center; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 22px; }
.logos-track { display: flex; width: max-content; animation: logos-roll 40s linear infinite; }
.logos:hover .logos-track { animation-play-state: paused; }
.lg { display: inline-flex; align-items: center; gap: 8px; padding: 0 44px; height: 44px; white-space: nowrap; color: rgba(255, 255, 255, .88); font-size: 22px; letter-spacing: -.01em; }
.lg small { font-size: 10px; letter-spacing: .14em; opacity: .7; margin-left: 4px; }
.lg.serif { font-family: Georgia, "Times New Roman", serif; } .lg.serif i { font-style: italic; }
.lg.serif2 { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.lg.sans { font-weight: 500; letter-spacing: .06em; font-size: 18px; } .lg.sans b { font-weight: 800; }
.lg.bold { font-weight: 800; letter-spacing: -.02em; font-style: italic; } .lg.bold b { font-weight: 400; font-style: normal; }
.lg.round { font-weight: 600; }
.lg .dot { width: 12px; height: 12px; border-radius: 50%; background: #7c9bff; display: inline-block; }
.lg .drop { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #f08a2a; display: inline-block; margin-right: 4px; }
@keyframes logos-roll { to { transform: translateX(-50%); } }
/* who it is for: the people from the films as tall cards scrolling across the whole page on a loop, the trades as pills
   scrolling the other way under them; both pause under the mouse and hold still with motion off */
.who { padding: 96px 0 80px; background: #fff; text-align: center; overflow: hidden; }
.who h2 u { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.who-strip { overflow: hidden; margin-top: 48px; }
.who-track { display: flex; gap: 18px; width: max-content; animation: who-roll 55s linear infinite; padding-left: 18px; }
/* the rows stop only under the mouse: over the people or over the trades, not over the heading or the air around them */
.who-strip:hover .who-track, .who-pills:hover .who-pills-track { animation-play-state: paused; }
.who:has(.who-strip:hover, .who-pills:hover) .who-track, .who:has(.who-strip:hover, .who-pills:hover) .who-pills-track { animation-play-state: paused; }
.who-card { position: relative; margin: 0; width: 320px; height: 420px; border-radius: 8px; overflow: hidden; background: #111; flex: none; box-shadow: 0 20px 50px rgba(0, 0, 0, .14); }
.who-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.who-card:hover img { transform: scale(1.04); }
.who-card figcaption { position: absolute; inset: auto 0 0 0; padding: 70px 20px 20px; text-align: left; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0)); }
.who-card b { display: block; font-size: 20px; font-weight: 600; }
.who-card span { display: block; font-size: 17px; color: rgba(255, 255, 255, .9); margin-top: 2px; }
.who-card small { display: block; font-size: 17px; color: rgba(255, 255, 255, .65); margin-top: 6px; }
.who-pills { overflow: hidden; margin-top: 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.who-pills-track { display: flex; gap: 10px; width: max-content; animation: who-roll 70s linear infinite reverse; }
.who-pill { flex: none; padding: 11px 18px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 17px; font-weight: 500; color: var(--ink); background: #fff; white-space: nowrap; }
@keyframes who-roll { to { transform: translateX(-50%); } }
/* the slider's panels are scenes: the scene engine brings the pieces in, in order, and loops. The pieces sit at their
   drawn places in the 920 by 580 picture; the reset below undoes what .scene would otherwise do to the box. */
.suite .scene.suite-vis { position: absolute; padding: 0; min-height: 0; max-width: none; width: 920px; height: 580px; border-radius: 0; box-shadow: none; background: transparent; display: block; overflow: visible; justify-content: normal; gap: 0; }
.suite .scene.suite-vis::before { display: none; }
.suite .scene.suite-vis > * { position: absolute; }
.suite .scene .sv-row[data-at], .suite .scene .sv-tr p[data-at], .suite .scene .sv-wk-c s[data-at] { transition-duration: .5s; }
.sv-btn { position: relative; } .sv-ph-cta { position: relative; }
.sv-say { left: 0; top: 20px; width: 360px; height: 540px; min-height: 0; padding: 24px 22px; gap: 18px; }
.sv-say .say-field { font-size: 15.5px; min-height: 54px; padding: 11px 15px; } .sv-say .say-field img { width: 24px; height: 24px; }
.sv-say .say-steps li { font-size: 14.5px; } .sv-say .say-steps em { font-size: 12.5px; }
.scene .say-steps li.on { color: #fff; }
.scene .say-steps li.on i { background: #1d7a45 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; border-color: #1d7a45; }
.sv-say .say-live { font-size: 13.5px; }
.suite .made { left: 380px; top: 100px; width: 540px; height: 380px; min-height: 0; }
.scene .made.on .made-shot img { animation: sb-draw 1.5s var(--ease) forwards; }
.scene .made.on .made-scan { animation: sb-scan 1.5s var(--ease) forwards; }
.sv-ring { display: flex; justify-content: center; min-height: 28px; margin: 4px 0; }
.sv-tr.light { text-align: left; } .sv-tr.light p { background: #f3f3f1; color: #1a1b1f; } .sv-tr.light p em { color: #6b7080; }
.sv-tr.light p.me { background: var(--accent); color: #fff; } .sv-tr.light p.me em { color: rgba(255, 255, 255, .75); }
.sv-tr.light p.them { background: #eef1fb; } .sv-tr.light p.them em { color: #3454d1; }
.sv-tr.light u { color: #3454d1; text-decoration-thickness: 1px; position: relative; }
.v-call .sv-ph.sv-owner { left: 330px; top: 60px; width: 300px; height: auto; }
.v-call .sv-ph.dark { left: 0; top: 0; width: 272px; height: 580px; box-sizing: border-box; }
.v-book .sv-ph { left: 0; top: 40px; } .v-book .sv-dash { left: 290px; width: 630px; height: 580px; grid-template-columns: 150px 1fr; } .v-book .sv-confirm { left: 300px; top: 330px; width: 330px; max-width: none; }
.v-book .sv-ph-top strong { color: #1a1b1f; font-weight: 700; }
.sv-sm { font-size: 12px; color: #6b7080; }
.sv-ic.card { background: #ece9fb; }
.sv-sum.sv-sum-one { grid-template-columns: 1fr; } .sv-sum-one em { color: #0a7a2f; }
.sv-gmark { margin-left: auto; font-weight: 800; font-size: 20px; color: #4285f4; }
.sv-stars-live { display: flex; gap: 3px; font-size: 26px; line-height: 1; color: #FBBC04; margin: 8px 0; }
.scene .sv-stars-live .star[data-at].on { transform: none; }
.sv-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 0 2px; }
.sv-bars i { flex: 1; height: var(--h); background: #c9d3f5; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.sv-bars i.hi { background: var(--accent); }
.scene .sv-bars i[data-at] { opacity: 1; transform: scaleY(0); transition: transform .7s var(--ease); }
.scene .sv-bars i[data-at].on { transform: none; }
.sv-bars-x { display: flex; gap: 8px; padding: 0 2px; } .sv-bars-x span { flex: 1; text-align: center; font-size: 11px; color: #9a9fab; }
.suite .lede { max-width: none; font-size: 17px; color: var(--muted); }
@media (max-width: 900px) {
  .suite .scene.suite-vis, .suite-vis { position: relative; width: auto; height: auto; transform: none !important; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-right: 20px; }
  .suite .scene.suite-vis > *, .suite-vis.v-call .sv-ph.dark, .v-book .sv-ph, .v-book .sv-confirm, .sv-owner, .suite .made, .sv-say { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; max-width: 420px; height: auto; }
  .sv-say { min-height: 0; } .suite .made { height: 300px; } .suite .made-shot img { object-position: 0 0; }
  .suite-vis .sv-dash, .suite-vis .sv-toast { display: none; }
  .v-book .sv-dash { display: none; }
  .sv-bars { display: none; } .sv-bars-x { display: none; }
}
.demo { background: linear-gradient(180deg, #ebe5da 0%, #f6f4ef 55%, #ffffff 100%); padding: 110px 0 90px; text-align: center; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 22px; align-items: stretch; width: 100%; max-width: 1200px; margin: 48px auto 0; padding: 0 24px; text-align: left; }
.say { position: relative; background: #0b0b0c; color: #fff; border-radius: 8px; padding: 30px 28px; min-height: 420px; display: flex; flex-direction: column; gap: 26px; box-shadow: 0 40px 100px rgba(0, 0, 0, .25); overflow: hidden; }
.say::after { content: ""; position: absolute; inset: auto -30% -40% -30%; height: 60%; background: radial-gradient(closest-side, rgba(52, 84, 209, .35), rgba(52, 84, 209, 0)); pointer-events: none; }
.say-field { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 999px; background: #1a1b20; border: 1px solid rgba(255, 255, 255, .1); font-size: 20px; line-height: 1.3; min-height: 64px; }
.say-field img { width: 28px; height: 28px; border-radius: 4px; flex: none; }
.say-text { white-space: pre-wrap; }
.say-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent-ink); animation: blink 1s steps(1) infinite; flex: none; }
.say-steps { list-style: none; margin: 0; padding: 0 6px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.say-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; color: rgba(255, 255, 255, .42); transition: color .3s; }
.say-steps li i { width: 22px; height: 22px; border-radius: 5px; border: 2px solid rgba(255, 255, 255, .22); flex: none; margin-top: 1px; transition: background .3s, border-color .3s; }
.say-steps li.doing { color: #fff; }
.say-steps li.doing i { border-color: var(--accent-ink); border-top-color: transparent; animation: spin .9s linear infinite; }
.say-steps li.done { color: #fff; }
.say-steps li.done i { background: #1d7a45 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: #1d7a45; animation: none; }
.say-steps em { display: block; font-style: normal; font-size: 14.5px; color: rgba(255, 255, 255, .62); margin-top: 2px; min-height: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.say-live { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .72); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; position: relative; z-index: 1; }
.say-live.on { opacity: 1; transform: none; }
.made { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, .18); border: 1px solid rgba(0, 0, 0, .06); display: flex; flex-direction: column; min-height: 420px; }
.made-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.made-bar i { width: 10px; height: 10px; border-radius: 5px; background: #e2e2de; }
.made-bar span { margin-left: 8px; background: var(--soft); border-radius: 999px; padding: 4px 12px; }
.made-shot { position: relative; flex: 1; background: #f3f3f1; overflow: hidden; }
.made-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; clip-path: inset(0 0 100% 0); }
.made.in .made-shot img { animation: sb-draw 1.5s var(--ease) forwards; }
.made-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(52, 84, 209, 0), var(--accent), rgba(52, 84, 209, 0)); opacity: 0; }
.made.in .made-scan { animation: sb-scan 1.5s var(--ease) forwards; }
.made.out .made-shot img, .made.out .made-scan { animation: none; clip-path: inset(0 0 100% 0); opacity: 0; }
@keyframes sb-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sb-scan { 0% { top: 0; opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.demo-note { margin: 22px auto 0; font-size: 15.5px; color: var(--muted); }

/* ---- the trades, drifting by ---- */
.trades { margin-top: 70px; text-align: center; }
.trades-h { margin: 0 0 18px; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.trades-strip { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.trades-track { display: flex; gap: 10px; width: max-content; animation: sb-marquee 60s linear infinite; }
.trades-strip:hover .trades-track { animation-play-state: paused; }
.trades-track span { display: inline-block; padding: 11px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; }
@keyframes sb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; margin-top: 36px; }
  .say { min-height: 0; padding: 22px 20px; gap: 20px; }
  .say-field { font-size: 17px; padding: 12px 16px; min-height: 56px; }
  .say-steps li { font-size: 15.5px; }
  .made { min-height: 300px; }
  .made-shot { min-height: 240px; }
  .demo { padding: 80px 0 70px; }
  .trades { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content > * { animation: none; }
  .trades-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .trades-strip { -webkit-mask-image: none; mask-image: none; }
  .say-steps li.doing i { animation: none; }
  .made.in .made-shot img { animation: none; clip-path: inset(0); }
  .made.in .made-scan { animation: none; }
}

/* each card's own world */
.tone-sky { background: linear-gradient(160deg, #e6f0fb 0%, #c9dcf5 100%); }
.tone-sand { background: linear-gradient(160deg, #f6efe3 0%, #ead9bf 100%); }
.tone-mint { background: linear-gradient(160deg, #e3f5ea 0%, #bfe6cd 100%); }
.tone-amber { background: linear-gradient(160deg, #fdf0dc 0%, #f6d6a0 100%); }
.tone-lilac { background: linear-gradient(160deg, #ece9fb 0%, #d3cbf4 100%); }
.tone-peach { background: linear-gradient(160deg, #fdebe3 0%, #f6c9b6 100%); }
.tone-slate { background: linear-gradient(160deg, #edf0f4 0%, #d4dbe6 100%); }
.tone-night { background: radial-gradient(120% 90% at 100% 0%, #26305a 0%, #0f1220 60%); color: #fff; }
.tone-night > p { color: rgba(255, 255, 255, .78); }
.tone-night .arrow { background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(6px); }
.tone-night.active { box-shadow: 0 0 0 2px var(--accent-ink), 0 24px 60px rgba(0, 0, 0, .3); }

/* hear it answer a call */
.listen { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 14px; border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); position: relative; z-index: 2; }
.listen[hidden] { display: none; }
.listen-btn { width: 48px; height: 48px; flex: none; border-radius: 8px; border: 0; background: #fff; color: var(--night); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease), background .2s; }
.listen-btn:hover { transform: scale(1.06); }
.listen-btn .ic-pause { display: none; }
.listen.playing .listen-btn .ic-play { display: none; }
.listen.playing .listen-btn .ic-pause { display: block; }
.listen-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.listen-body b { font-size: 15px; font-weight: 600; color: #fff; }
.listen-bars { display: flex; align-items: center; gap: 2px; height: 22px; }
.listen-bars i { flex: 1; height: 30%; border-radius: 2px; background: rgba(255, 255, 255, .28); transition: background .2s; }
.listen-bars i.on { background: var(--accent-ink); }
.listen.playing .listen-bars i.on:nth-child(3n) { animation: sb-bar .9s ease-in-out infinite; }
.listen.playing .listen-bars i.on:nth-child(3n+1) { animation: sb-bar 1.1s ease-in-out infinite .2s; }
@keyframes sb-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.8); } }
.listen-time { font-size: 12.5px; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .listen.playing .listen-bars i.on { animation: none; } .gart, .gcard:hover .gart { transform: translateY(10%); } }
@media (max-width: 900px) { .gcard { height: 520px; } }

/* the sun in the last card: a blue orb that breathes and drifts, the way the dashboard's light does */
.orb { position: absolute; z-index: 0; left: 50%; top: 34%; width: 220px; height: 220px; margin: -110px 0 0 -110px; pointer-events: none; animation: orb-drift 18s ease-in-out infinite; }
.orb i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #f4f6ff 0%, #c9d3ff 10%, #8aa0f5 24%, #4a66dc 40%, rgba(52, 84, 209, .75) 52%, rgba(52, 84, 209, .3) 62%, rgba(52, 84, 209, 0) 70%); filter: blur(1.5px); box-shadow: 0 0 70px 24px rgba(90, 120, 240, .45), 0 0 180px 70px rgba(52, 84, 209, .3), 0 0 320px 140px rgba(52, 84, 209, .14); animation: orb-breathe 7s ease-in-out infinite; }
.orb i::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 45% 40%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); filter: blur(6px); }
@keyframes orb-drift { 0% { transform: translate(0, 0); } 30% { transform: translate(22px, -14px); } 55% { transform: translate(-12px, 12px); } 80% { transform: translate(-22px, -6px); } 100% { transform: translate(0, 0); } }
@keyframes orb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .orb, .orb i { animation: none; } }
@media (max-width: 900px) { .ex-you { min-height: 380px; } .orb { top: 32%; width: 180px; height: 180px; margin: -90px 0 0 -90px; } }

/* ---- the box as a chat, full screen (bc-*: .chat is taken by the feature pictures) ----
   The same as the dashboard's home: the page clears to the chat, the box
   glides to the bottom by the browser's view transition, bubbles pop in
   from their corner with a small spring the way phone messages do. */
.box { view-transition-name: build-box; }
html.bc-open .hero .box { view-transition-name: none; }
html.bc-open .bc-box { view-transition-name: build-box; }
::view-transition-group(build-box) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
/* One look with the dashboard's (dashboard/src/styles.css, .chat-focus):
   the same night, the same two glows, the same dark box and bubbles. */
.bc { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow: hidden; color: #eef1f8; text-align: left; background: #0b0f1a; font-size: 14px; line-height: 1.5; }
.bc[hidden] { display: none; }
.bc > :not(.bc-glow) { position: relative; z-index: 1; }
.bc-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(130px); }
.bc-glow.a { left: 50%; top: -180px; width: 1040px; height: 640px; transform: translateX(-50%); background: #3454d1; opacity: .38; }
.bc-glow.b { right: -260px; bottom: -280px; width: 760px; height: 560px; background: #d4561c; opacity: .14; filter: blur(150px); }
.bc-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px; }
.bc-title { flex: 1; font-size: 14px; font-weight: 600; color: #c7cfe2; }
.bc-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #8a94ad; display: grid; place-items: center; cursor: pointer; padding: 0; }
.bc-close:hover { background: rgba(255, 255, 255, .08); color: #eef1f8; }
.bc-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.bc-thread { margin-top: auto; width: 100%; max-width: 760px; align-self: center; box-sizing: border-box; padding: 24px 24px 16px; display: flex; flex-direction: column; gap: 10px; }
.bc .bc-box { align-self: center; width: calc(100% - 48px); max-width: 712px; margin: 0 0 28px; box-sizing: border-box; background: rgba(15, 20, 33, .86); color: #eef1f8; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; padding: 18px 18px 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.bc .bc-box:focus-within { box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.bc .bc-box textarea { min-height: 64px; max-height: 160px; color: #ffffff; font-size: 18px; }
.bc .bc-box textarea::placeholder { color: #7f8aa6; }
.bc .bc-box .row { margin-top: 8px; gap: 12px; }
.bc .bc-box .hint { font-size: 13px; color: #6f7a94; }
.bc .bc-box .mic { width: 44px; height: 44px; border: 1px solid #222b44; background: transparent; color: #8a94ad; }
.bc .bc-box .mic:hover { background: rgba(255, 255, 255, .06); color: #eef1f8; }
.bc .bc-box .mic.on { background: rgba(255, 107, 107, .14); border-color: rgba(255, 123, 123, .5); color: #ff7b7b; }
.bc .bc-box .send { width: 44px; height: 44px; background: #3454d1; opacity: 1; transform: none; }
.bc .bc-box .send:not(:disabled):hover { background: #5b7cff; }
.bc .bc-box .send:disabled { background: #2a3350; opacity: .5; }
.bc-line { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; transform-origin: bottom left; animation: bc-pop .42s cubic-bezier(.34, 1.4, .64, 1) both; }
.bc-line.you { align-items: flex-end; transform-origin: bottom right; }
.bc-bubble { margin: 0; max-width: 80%; padding: 11px 16px; border-radius: 8px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; text-align: left; }
.bc-line.you .bc-bubble { background: #3454d1; color: #ffffff; border-bottom-right-radius: 6px; }
.bc-line.us .bc-bubble { background: rgba(28, 35, 56, .92); border: 1px solid rgba(255, 255, 255, .1); color: #eef1f8; border-bottom-left-radius: 6px; }
.bc-bubble.problem { color: #f0b35c; }
.bc-skip { padding: 2px 6px; border: 0; background: none; font: inherit; font-size: 13px; color: #8a94ad; cursor: pointer; animation: bc-fade .3s .25s ease-out both; }
.bc-skip:hover { color: #eef1f8; text-decoration: underline; }
.bc-dots { display: inline-flex; gap: 5px; padding: 5px 2px; }
.bc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8a94ad; animation: bc-dot 1.2s ease-in-out infinite; }
.bc-dots i:nth-child(2) { animation-delay: .16s; }
.bc-dots i:nth-child(3) { animation-delay: .32s; }
.bc-starting { display: inline-flex; align-items: center; gap: 10px; }
.bc-live { width: 8px; height: 8px; border-radius: 4px; background: #5b7cff; animation: bc-dot 1.2s ease-in-out infinite; }
@keyframes bc-pop { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes bc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bc-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
@media (max-width: 640px) { .bc-thread { padding: 16px 16px 12px; } .bc .bc-box { width: calc(100% - 32px); margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .bc-line, .bc-dots i, .bc-skip, .bc-live { animation: none; } }