/* Zozo AI
   Layout: one calm column on a soft off-white field; serif display for voice, Geist for interface,
   a single dark-violet accent. Navigation is a floating glass pill anchored to the bottom. */
:root {
  --bg: #f7f6f9;
  --surface: #ffffff;
  --ink: #15111c;
  --ink-2: #5a5466;
  --ink-3: #8e889a;
  --line: rgba(21, 17, 28, .09);
  --line-strong: rgba(21, 17, 28, .16);
  --accent: #491385;          /* main accent: dark violet, sampled from the lotus reference */
  --accent-hover: #3a0e6c;
  --accent-text: #491385;
  --accent-soft: rgba(73, 19, 133, .07);
  --on-accent: #ffffff;
  --glass: rgba(255, 255, 255, .5);
  --glass-line: rgba(255, 255, 255, .7);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 40px -12px rgba(21, 17, 28, .22), 0 2px 6px -2px rgba(21, 17, 28, .08);
  --glow: rgba(143, 39, 213, .16);

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --gutter: clamp(16px, 5vw, 56px);
  --max: 1120px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --turn: 0deg;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0910; --surface: #14111a; --ink: #ece8f2; --ink-2: #a39cb0; --ink-3: #736c80;
    --line: rgba(236, 232, 242, .08); --line-strong: rgba(236, 232, 242, .15);
    --accent: #5b1fa3; --accent-hover: #6b29bd; --accent-text: #c69af2; --accent-soft: rgba(198, 154, 242, .10); --on-accent: #ffffff;
    --glass: rgba(24, 19, 32, .5); --glass-line: rgba(255, 255, 255, .09);
    --glass-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 44px -12px rgba(0, 0, 0, .6);
    --glow: rgba(143, 39, 213, .22);
    --turn: 180deg;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0910; --surface: #14111a; --ink: #ece8f2; --ink-2: #a39cb0; --ink-3: #736c80;
    --line: rgba(236, 232, 242, .08); --line-strong: rgba(236, 232, 242, .15);
    --accent: #5b1fa3; --accent-hover: #6b29bd; --accent-text: #c69af2; --accent-soft: rgba(198, 154, 242, .10); --on-accent: #ffffff;
    --glass: rgba(24, 19, 32, .5); --glass-line: rgba(255, 255, 255, .09);
    --glass-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 44px -12px rgba(0, 0, 0, .6);
    --glow: rgba(143, 39, 213, .22);
    --turn: 180deg;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.6 var(--sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 12px; z-index: 100; background: var(--ink); color: var(--bg); padding: .6em 1em; border-radius: 999px; }
.skip:focus { left: 12px; }
/* ---------- theme switch: top right corner of every page, scrolls away with it ---------- */
.theme { display: none; position: absolute; z-index: 50; top: calc(env(safe-area-inset-top, 0px) + clamp(12px, 2.4vw, 22px)); right: calc(env(safe-area-inset-right, 0px) + clamp(12px, 2.4vw, 22px)); width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .25s, background .25s; }
.js .theme { display: grid; }
.theme::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid var(--line-strong); transition: border-color .25s, background .25s; }
.theme:hover { color: var(--ink); }
.theme:hover::before { border-color: var(--ink-3); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.theme svg { position: relative; width: 18px; height: 18px; transform: rotate(var(--turn)); transition: transform .6s var(--ease); }
.theme:active svg { transform: rotate(var(--turn)) scale(.9); }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.display { font-family: var(--serif); font-weight: 380; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem); line-height: 1.02; letter-spacing: -.028em; font-variation-settings: "opsz" 72; }
.display em, .h2 em { font-style: italic; color: var(--accent-text); font-weight: 360; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -.022em; font-variation-settings: "opsz" 60; }
.h3 { font-family: var(--sans); font-weight: 550; font-size: 1.06rem; letter-spacing: -.012em; }
.lede { font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 36em; letter-spacing: -.01em; }
.label { font: 500 .74rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.label a { transition: color .25s; }
.label a:hover { color: var(--ink); }
.muted { color: var(--ink-2); }

/* ---------- top bar (static) ---------- */
.top { padding-block: 22px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { display: inline-flex; align-items: center; color: var(--ink); }
/* the brand lockup (flower + "zozo ai"), painted in the text colour through a mask; set its size with height */
.logo { height: 26px; aspect-ratio: 4034.5 / 872; flex: none; background: currentColor; -webkit-mask: url(/assets/zozo-ai.svg) center / contain no-repeat; mask: url(/assets/zozo-ai.svg) center / contain no-repeat; }
/* product wordmarks (the name only, no flower): the same mask with another file and its proportions */
.logo.chat { aspect-ratio: 4106.47 / 872; -webkit-mask-image: url(/assets/zozo-chat-wordmark.svg); mask-image: url(/assets/zozo-chat-wordmark.svg); }
.logo.studio { aspect-ratio: 4817.13 / 872; -webkit-mask-image: url(/assets/zozo-studio-wordmark.svg); mask-image: url(/assets/zozo-studio-wordmark.svg); }
.logo.agent { aspect-ratio: 4661.47 / 872; -webkit-mask-image: url(/assets/zozo-agent-wordmark.svg); mask-image: url(/assets/zozo-agent-wordmark.svg); }
.top .entity { font: 400 .78rem/1 var(--mono); color: var(--ink-3); letter-spacing: .02em; }
@media (max-width: 560px) { .top .entity { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; height: 46px; padding: 0 1.25rem; border-radius: 999px; font: 500 .95rem/1 var(--sans); letter-spacing: -.01em; transition: background .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s; cursor: pointer; border: 0; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px -8px rgba(73, 19, 133, .5); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet { color: var(--ink); padding-inline: .4rem; }
.btn-quiet .arr { transition: transform .3s var(--ease); }
.btn-quiet:hover .arr { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn .logo { height: 14px; margin-left: -.2em; } /* a product wordmark in a button label, sized to the label's letters */

/* ---------- sections ---------- */
.view { padding-bottom: clamp(1rem, 3vw, 2rem); }
.view[hidden] { display: none !important; }
/* ---------- hero: one full screen, the tagline in front and the lotus looming behind it ---------- */
.hero { --s: min(108svh, 135vw, 1400px); position: relative; isolation: isolate; overflow: clip; background: var(--bg); min-height: 100svh; display: grid; place-items: center; padding-block: clamp(4rem, 9vh, 7rem); }
/* the text ignores the pointer (except its links), so the lotus behind it can still be dragged and tapped */
.hero-text { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; pointer-events: none; }
.hero-text a { pointer-events: auto; }
.hero-text::before { content: ""; position: absolute; z-index: -1; inset: -30% 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 72%, transparent) 35%, transparent); }
/* the haze only helps the light text in the dark theme; in light mode the lotus shows through clean */
.hero-text::before { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-text::before { display: block; } }
:root[data-theme="dark"] .hero-text::before { display: block; }
.hero .display { margin-top: 1.3rem; font-size: clamp(2.5rem, min(1rem + 7.4vw, 14svh), 8rem); line-height: .98; }
/* light theme: the headline turns light wherever it crosses the lotus, and stays dark everywhere else. lotus.js adds this layer and
   draws the lotus's silhouette (white on black) into its canvas every frame. The layer is a copy of the headline in light ink on
   black, multiplied by that silhouette (so only the letters over the lotus are left) and then lightened onto the page. */
.hero-ink { position: absolute; left: calc(50% - var(--s) / 2); top: calc(74% - var(--s) / 2); width: var(--s); height: var(--s); overflow: hidden; z-index: 2; background: #000; mix-blend-mode: lighten; pointer-events: none; user-select: none; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.hero-ink.on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.hero-ink canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.hero-ink .display { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, auto); margin: 0; text-align: center; color: #fbf9ff; }
.hero-ink .display em { color: #d9c4ff; }
.hero .lede { margin-top: 1.8rem; max-width: 31em; color: color-mix(in srgb, var(--ink) 78%, var(--ink-2)); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.hero .actions { margin-top: 2.3rem; justify-content: center; }
.hero .btn-primary { background: var(--ink); color: var(--bg); box-shadow: none; }
.hero .btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--accent-text)); }
.page-head .label + .display { margin-top: .2rem; }

/* ---------- stained-glass lotus ----------
   A square larger than the screen is comfortable with, centred low in the hero and clipped by it. Its edges are the page
   colour (see lotus.js), and the bottom of the hero fades out, so it has no visible frame. */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 10rem), transparent); mask-image: linear-gradient(#000 calc(100% - 10rem), transparent); }
.lotus { position: absolute; left: calc(50% - var(--s) / 2); top: calc(74% - var(--s) / 2); width: var(--s); height: var(--s); margin: 0; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.lotus.grabbing { cursor: grabbing; }
.lotus canvas, .lotus-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the poster shows the flower's first frame: the canvas fades in over it (.ready), then the poster is dropped and the flower starts to move (.live) */
.lotus { --soft: calc(var(--s) * .0025); } /* the poster is 760px drawn up to 1400px: a little blur hides that it is upscaled */
.lotus canvas { opacity: 0; filter: blur(var(--soft)); transition: opacity .8s ease-in-out, filter .8s ease-in-out; }
.lotus-poster { pointer-events: none; filter: blur(var(--soft)); background: url(lotus-poster-closed-light.webp) center / contain no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lotus-poster { background-image: url(lotus-poster-closed-dark.webp); } }
:root[data-theme="dark"] .lotus-poster { background-image: url(lotus-poster-closed-dark.webp); }
@media (prefers-reduced-motion: reduce) {
  .lotus-poster { background-image: url(lotus-poster-open-light.webp); }
  :root[data-theme="dark"] .lotus-poster { background-image: url(lotus-poster-open-dark.webp); }
}
@media (prefers-reduced-motion: reduce) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lotus-poster { background-image: url(lotus-poster-open-dark.webp); } }
/* the canvas starts out as soft as the poster and sharpens while it fades in, so the two dissolve into each other without the poster ever showing through crisper or blurrier than what is in front of it */
.lotus.ready canvas { opacity: 1; filter: none; }
.lotus.live .lotus-poster { visibility: hidden; }
/* the lotus is bigger than the screen, so keyboard focus is drawn just inside the hero instead of around it */
.lotus:focus-visible { outline: none; }
.hero:has(.lotus:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: -8px; border-radius: 14px; }
/* scrolling on: the lotus lags behind the page and dims */
@supports (animation-timeline: scroll()) {
  .lotus { animation: lotus-away linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  @keyframes lotus-away { to { opacity: .12; translate: 0 16svh; } }
}

.page-head { padding-block: clamp(4.5rem, 11vw, 7.5rem) clamp(2rem, 4vw, 3rem); display: grid; gap: 1.2rem; }
.page-head .display { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); max-width: 16ch; }
/* the About title is the tight hero lockup (no field) under the "Company" label, on a band that reaches up to the very top of the page:
   violet in light, near-black in dark, the same fields as the brand's hero files. */
.about-hero { background: #491385; padding-block: clamp(4.5rem, 11vw, 7.5rem) clamp(2rem, 4vw, 3rem); }
.about-hero .wrap { display: grid; gap: 1.2rem; }
.about-hero .label { position: relative; z-index: 1; display: block; color: rgba(255, 255, 255, .7); }
.about-hero h1 { margin-top: .2rem; }
.about-hero img { display: block; height: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); width: auto; max-width: 100%; } /* the same height as the other title lockups; the tight hero file has the same height as the plain lockup */
.about-hero .night { display: none; }
.about-hero .lede { color: rgba(255, 255, 255, .85); }
:root[data-theme="dark"] .about-hero { background: #0b0910; }
:root[data-theme="dark"] .about-hero .label { color: var(--ink-3); }
:root[data-theme="dark"] .about-hero .lede { color: var(--ink-2); }
:root[data-theme="dark"] .about-hero .day { display: none; }
:root[data-theme="dark"] .about-hero .night { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .about-hero { background: #0b0910; }
  :root:not([data-theme="light"]) .about-hero .label { color: var(--ink-3); }
  :root:not([data-theme="light"]) .about-hero .lede { color: var(--ink-2); }
  :root:not([data-theme="light"]) .about-hero .day { display: none; }
  :root:not([data-theme="light"]) .about-hero .night { display: block; }
}
/* the theme switch sits over the violet band in light theme, so it turns white there */
body:has(.view[data-path="/company/"]:not([hidden])) .theme { color: rgba(255, 255, 255, .8); }
body:has(.view[data-path="/company/"]:not([hidden])) .theme::before { border-color: rgba(255, 255, 255, .35); }
body:has(.view[data-path="/company/"]:not([hidden])) .theme:hover { color: #fff; }
:root[data-theme="dark"] body:has(.view[data-path="/company/"]:not([hidden])) .theme { color: var(--ink-2); }
:root[data-theme="dark"] body:has(.view[data-path="/company/"]:not([hidden])) .theme::before { border-color: var(--line-strong); }
:root[data-theme="dark"] body:has(.view[data-path="/company/"]:not([hidden])) .theme:hover { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:has(.view[data-path="/company/"]:not([hidden])) .theme { color: var(--ink-2); }
  :root:not([data-theme="light"]) body:has(.view[data-path="/company/"]:not([hidden])) .theme::before { border-color: var(--line-strong); }
  :root:not([data-theme="light"]) body:has(.view[data-path="/company/"]:not([hidden])) .theme:hover { color: var(--ink); }
}
:root[data-theme="dark"] .about-hero { background: #0b0910; }
:root[data-theme="dark"] .about-hero .day { display: none; }
:root[data-theme="dark"] .about-hero .night { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .about-hero { background: #0b0910; }
  :root:not([data-theme="light"]) .about-hero .day { display: none; }
  :root:not([data-theme="light"]) .about-hero .night { display: block; }
}
.page-head .display .logo.suite { display: block; height: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); max-width: 100%; aspect-ratio: 5283.3 / 872; -webkit-mask-image: url(/assets/zozo-suite.svg); mask-image: url(/assets/zozo-suite.svg); }
.page-head .display .logo.lockup { display: block; height: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); max-width: 100%; aspect-ratio: 5131.7 / 872; -webkit-mask-image: url(/assets/zozo-chat.svg); mask-image: url(/assets/zozo-chat.svg); }
section.sec { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sec-head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 40rem; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- product window ---------- */
.stage { position: relative; padding-bottom: clamp(1rem, 3vw, 2rem); }
.stage::before { content: ""; position: absolute; inset: 8% 10% -6% 10%; background: radial-gradient(60% 60% at 50% 40%, var(--glow), transparent 70%); filter: blur(30px); z-index: 0; pointer-events: none; }
.window { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(21, 17, 28, .35), 0 2px 8px -4px rgba(21, 17, 28, .08); display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 420px; }
.win-side { border-right: 1px solid var(--line); padding: 14px 10px; display: grid; align-content: start; gap: 2px; background: color-mix(in srgb, var(--surface) 92%, var(--bg)); }
.win-side .label { padding: 8px 10px 10px; }
.persona { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; font-size: .88rem; }
.persona b { font-weight: 550; display: block; letter-spacing: -.01em; }
.persona div span { color: var(--ink-3); font-size: .78rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona.on { background: var(--accent-soft); }
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 .78rem/1 var(--sans); color: var(--on-accent); }
.av.t1 { background: var(--accent); } .av.t2 { background: #6b5b45; } .av.t3 { background: #3c4a66; }
.win-main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.win-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.win-bar b { font-weight: 550; }
.chip { display: inline-flex; align-items: center; gap: .45em; font: 500 .72rem/1 var(--mono); letter-spacing: .03em; color: var(--accent-text); background: var(--accent-soft); padding: .5em .75em; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.thread { padding: 22px 18px; display: grid; gap: 14px; align-content: start; }
.msg { max-width: 78%; padding: 11px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.5; }
.msg.me { justify-self: end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.msg.ai { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); border-bottom-left-radius: 6px; }
.typing { display: inline-flex; gap: 4px; padding: 13px 14px; border-radius: 16px; border-bottom-left-radius: 6px; background: color-mix(in srgb, var(--ink) 5%, var(--surface)); width: max-content; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: blink 1.4s infinite both; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.composer { margin: 0 14px 14px; border: 1px solid var(--line-strong); border-radius: 14px; padding: 11px 12px 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: .8rem; color: var(--ink-3); font-size: .9rem; }
.composer .send { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.composer .send svg { width: 14px; height: 14px; stroke: var(--on-accent); }
@media (max-width: 760px) { .window { grid-template-columns: minmax(0, 1fr); min-height: 0; } .win-side { display: none; } .msg { max-width: 90%; } }

/* ---------- columns of short statements ---------- */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.col { padding: 1.6rem 1.6rem 0 0; display: grid; gap: .55rem; align-content: start; min-width: 0; }
.col + .col { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.col p { color: var(--ink-2); font-size: .97rem; }
@media (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); } .col, .col + .col { padding: 1.4rem 0; border-left: 0; } .col + .col { border-top: 1px solid var(--line); } }

/* features: two-column list */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); }
.feat { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--line); min-width: 0; }
.feat p { color: var(--ink-2); font-size: .97rem; }
@media (max-width: 860px) { .feats { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .feat { grid-template-columns: minmax(0, 1fr); gap: .35rem; } }

/* ---------- products ---------- */
.suite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prod { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; padding: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; min-width: 0; min-height: 15.5rem; transition: border-color .25s; }
.prod h3 { font: 400 clamp(1.7rem, 1.4rem + 1vw, 2.1rem)/1.05 var(--serif); letter-spacing: -.022em; font-variation-settings: "opsz" 60; margin-top: 1.6rem; }
.prod h3 .logo { display: block; height: 30px; }
.prod p { color: var(--ink-2); font-size: .97rem; }
.prod .more { margin-top: auto; padding-top: .6rem; font: 500 .92rem/1 var(--sans); color: var(--accent-text); display: inline-flex; gap: .45em; }
.prod .arr { transition: transform .3s var(--ease); }
a.prod:hover { border-color: var(--accent-text); }
a.prod:hover .arr { transform: translateX(3px); }
.prod.soon { background: transparent; border-style: dashed; }
.tag.quiet { color: var(--ink-3); background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (max-width: 860px) { .suite { grid-template-columns: minmax(0, 1fr); } .prod { min-height: 0; } .prod h3 { margin-top: .8rem; } }

/* one row per product */
.rows { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.row { padding-block: clamp(1rem, 2.5vw, 1.6rem); }
.row .tag { display: inline-block; margin-bottom: 1rem; }
.row .h2 .logo { display: block; height: 38px; max-width: 100%; -webkit-mask-position: left; mask-position: left; }
/* the text column starts level with the wordmark, not with the tag above it */
@media (min-width: 861px) { .row.two > :last-child { padding-top: 2.9rem; } }
.row .actions { margin-top: 1.6rem; }

/* closing line */
.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line); }

/* facts */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.facts div { padding: 1.05rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.5rem; min-width: 0; }
.facts dt { color: var(--ink-3); font-size: .9rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts a { color: var(--accent-text); }
@media (max-width: 420px) { .facts div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }

.prose { display: grid; gap: 1.1rem; max-width: 40rem; color: var(--ink-2); font-size: 1.05rem; }
.prose p:first-child { color: var(--ink); }
.prose a, .legal a, .faq a, .fine a, .contact .h3 + p a { color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.two { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- pricing ---------- */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); margin-bottom: 1.8rem; }
.seg button, .seg a { position: relative; z-index: 1; border: 0; background: none; font: 500 .9rem/1 var(--sans); color: var(--ink-2); padding: .7rem 1.15rem; border-radius: 999px; cursor: pointer; white-space: nowrap; text-align: center; transition: color .25s; }
.seg [aria-pressed="true"], .seg [aria-current] { color: var(--ink); }
.seg .thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgba(21, 17, 28, .12), 0 0 0 1px var(--line); transition: transform .4s var(--ease), width .4s var(--ease); }
.seg small { font: 500 .7rem var(--mono); color: var(--accent-text); margin-left: .35rem; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.plan { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.plan.pick { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.6rem; }
.plan h3 { font: 550 1.05rem/1 var(--sans); letter-spacing: -.015em; }
.tag { font: 500 .68rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); padding: .45em .65em; border-radius: 999px; white-space: nowrap; }
.price { display: flex; align-items: baseline; gap: .35rem; font-variant-numeric: tabular-nums; }
.price .amt { font: 400 2.9rem/1 var(--serif); letter-spacing: -.03em; font-variation-settings: "opsz" 60; }
.price .per { color: var(--ink-3); font-size: .88rem; }
.billed { font: 400 .78rem/1.3 var(--mono); color: var(--ink-3); margin-top: -.5rem; }
.plan ul { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .55rem; font-size: .9rem; color: var(--ink-2); }
.plan li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .5rem; }
.plan li::before { content: ""; width: 9px; height: 5px; margin-top: .45rem; border-left: 1.5px solid var(--accent-text); border-bottom: 1.5px solid var(--accent-text); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; justify-content: center; height: 42px; font-size: .9rem; }
.btn-line { border: 1px solid var(--line-strong); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink-3); }
@media (max-width: 1000px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan li .tag { margin-left: .4rem; padding: .35em .55em; font-size: .6rem; vertical-align: .1em; }
.fine { margin-top: 1.4rem; font-size: .86rem; color: var(--ink-3); max-width: 46rem; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.15rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 500; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details p { padding: 0 0 1.2rem; color: var(--ink-2); max-width: 40rem; font-size: .97rem; }

/* ---------- contact ---------- */
.contacts { border-top: 1px solid var(--line); }
.contact { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.contact .h3 + p { color: var(--ink-3); font-size: .88rem; margin-top: .25rem; }
.contact .val { font: 400 1.05rem/1.5 var(--mono); letter-spacing: -.01em; overflow-wrap: anywhere; }
.contact .acts { display: flex; gap: .4rem; }
.mini { font: 500 .82rem/1 var(--sans); color: var(--ink); padding: .6rem .9rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; transition: border-color .2s, background .2s; }
.mini:hover { border-color: var(--ink-3); }
@media (max-width: 760px) { .contact { grid-template-columns: minmax(0, 1fr); gap: .6rem; } }
/* .end: the address sits against its buttons. On a phone it goes back to the left and the buttons become plain links right beside it. */
.contact.end .val { text-align: end; }
@media (max-width: 760px) {
  .contact.end { grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1.1rem; }
  /* the heading and its note become rows of their own, so the address can sit between them */
  .contact.end > :first-child { display: contents; }
  .contact.end .h3, .contact.end .h3 + p { grid-column: 1 / -1; }
  .contact.end .h3 + p { order: 1; margin-top: 0; }
  .contact.end .val { text-align: start; }
  .contact.end .acts { gap: .9rem; }
  .contact.end .mini { border: 0; border-radius: 0; padding: .45rem 0; color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
}

/* ---------- legal ----------
   One page: the product switcher and that product's documents sit under the "Legal" label, and only the document below changes. */
.legal-head { padding-top: clamp(4rem, 10vw, 6.5rem); display: grid; gap: 1.1rem; justify-items: start; }
.legal-head .seg { margin-bottom: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 0 1.7rem; width: 100%; border-bottom: 1px solid var(--line); }
.tabs[hidden] { display: none; }
.tabs a, .tabs button { padding: .6rem 0 .85rem; margin-bottom: -1px; font: 500 .92rem/1 var(--sans); color: var(--ink-2); border-bottom: 1.5px solid transparent; white-space: nowrap; transition: color .25s, border-color .25s; }
.tabs a:hover, .tabs button:hover:not(:disabled) { color: var(--ink); }
.tabs a[aria-current], .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent-text); }
.tabs button { background: none; border-width: 0 0 1.5px; border-style: solid; border-color: transparent; cursor: pointer; }
.tabs button:disabled { color: var(--ink-3); opacity: .65; cursor: not-allowed; }
.tabs button small { font: 500 .62rem var(--mono); letter-spacing: .05em; text-transform: uppercase; margin-left: .35rem; }
.legal-body { padding-block: clamp(2rem, 4vw, 2.8rem) clamp(3rem, 7vw, 5rem); }
.legal { max-width: 42rem; display: grid; gap: 1rem; color: var(--ink-2); }
.legal[hidden] { display: none; }
.legal.swap { animation: doc-in .45s var(--ease) both; }
@keyframes doc-in { from { opacity: 0; transform: translateY(8px); } }
.legal h1 { font: 400 clamp(1.7rem, 1.35rem + 1.3vw, 2.3rem)/1.1 var(--serif); color: var(--ink); letter-spacing: -.02em; font-variation-settings: "opsz" 60; }
.legal h2 { font: 550 1.15rem/1.3 var(--sans); color: var(--ink); letter-spacing: -.015em; margin-top: 1.4rem; scroll-margin-top: 1.5rem; }
.legal strong { color: var(--ink); font-weight: 550; }
.legal ul, .prose ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; }
.legal .note { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; color: var(--ink); }
.legal .updated { font: 400 .78rem/1 var(--mono); color: var(--ink-3); }
.legal .note ul { margin-top: .7rem; }
.legal .toc { border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; display: grid; gap: .9rem; }
.legal .toc ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2.2rem; font-size: .93rem; }
.legal .toc li { break-inside: avoid; padding-block: .18rem; }
@media (max-width: 560px) { .legal .toc ol { columns: 1; } }
.legal address { font-style: normal; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); margin-top: 0; padding-block: 2.6rem calc(130px + env(safe-area-inset-bottom, 0px)); font-size: .88rem; color: var(--ink-2); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 2rem; }
.foot address { font-style: normal; line-height: 1.6; margin-top: 1rem; color: var(--ink-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot .label { display: block; margin-bottom: 1rem; }
.foot a:hover { color: var(--ink); }
.foot .soon { color: var(--ink-3); }
.foot li .logo { display: inline-block; height: 14px; vertical-align: middle; color: var(--ink); }
.foot .soon small { font: 500 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-left: .3rem; }
.foot .copy { grid-column: 1 / -1; padding-top: 1.6rem; border-top: 1px solid var(--line); font: 400 .76rem/1.5 var(--mono); color: var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
@media (max-width: 960px) { .foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot .wrap > :first-child { grid-column: 1 / -1; } }

/* ---------- floating glass pill nav ---------- */
.dock {
  position: fixed; z-index: 60; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 5px;
  border-radius: 999px; background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  max-width: calc(100vw - 24px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dock { background: var(--surface); } }
.dock a { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: 999px; font: 500 .88rem/1 var(--sans); letter-spacing: -.01em; color: var(--ink-2); white-space: nowrap; transition: color .3s var(--ease); }
.dock a:hover, .dock a[aria-current="page"] { color: var(--ink); }
.dock .home { padding: 0 16px 0 12px; color: var(--ink); }
.dock .home .logo { height: 16px; }
.dock .home:hover { color: var(--ink); }
.dock .sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 4px; flex: none; }
.dock .go { background: var(--accent); color: var(--on-accent); padding: 0 13px 0 16px; gap: .4rem; }
.dock .go:hover { color: var(--on-accent); background: var(--accent-hover); }
.dock .go svg { width: 13px; height: 13px; flex: none; stroke: currentColor; }
.dock .pill { position: absolute; z-index: 0; top: 5px; left: 0; height: 40px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); opacity: 0; transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; pointer-events: none; }
@media (max-width: 520px) {
  .dock { bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
  .dock a { padding: 0 9px; font-size: .8rem; height: 38px; }
  .dock .home { padding: 0 11px 0 9px; }
  .dock .pill { height: 38px; }
  .dock .sep { margin: 0 2px; }
  .dock .go { padding: 0 10px 0 13px; }
}
@media (max-width: 350px) {
  .dock a { padding: 0 6px; font-size: .78rem; }
  .dock .home { padding: 0 8px 0 7px; }
  .dock .sep { margin: 0 1px; }
  .dock .go { padding: 0 8px 0 10px; gap: .3rem; }
}

/* ---------- page transitions ----------
   Navigating animates #main with classes (.out, .in below). Only the theme switch is a view transition: the whole page cross-fades
   in place. Nothing is given a view-transition-name, so the dock is part of the page's snapshot, photographed with its glass over what
   is behind it. A named dock would be lifted out as a flat translucent image with nothing to blur, and fade through muddy colours. */
::view-transition-old(root) { animation: theme-out .45s ease both; }
::view-transition-new(root) { animation: theme-in .45s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }
@keyframes theme-out { to { opacity: 0; } }
@keyframes theme-in { from { opacity: 0; } }
/* page change: the outgoing page fades up, then the new one rises in (see go/swap in app.js) */
#main.out { opacity: 0; transform: translateY(-8px); filter: blur(3px); transition: opacity .2s var(--ease), transform .2s var(--ease), filter .2s; }
#main.in { animation: page-in .5s var(--ease) both; }
/* first load */
.load .hero-text > *, .load .page-head > *, .load .legal-head > * { animation: page-in .8s var(--ease) both; }
/* home: the tagline arrives alone, the rest of the text follows, then the lotus comes up out of the dark behind it */
.load .hero-text > .label, .load .hero-text > .lede, .load .hero-text > .actions { animation-delay: .55s; }
.load .hero-text > .display { animation-delay: 0s; animation-duration: 1s; }
.load .lotus { animation: lotus-in 1.5s ease-out .7s both; }
@keyframes lotus-in { from { opacity: 0; scale: .96; } }
.load .page-head > :nth-child(2), .load .legal-head > :nth-child(2) { animation-delay: .06s; }
.load .page-head > :nth-child(3), .load .legal-head > :nth-child(n+3) { animation-delay: .12s; }
.load .legal-body { animation: page-in .9s var(--ease) .18s both; }
.load .stage { animation: page-in 1s var(--ease) .24s both; }
.load .dock { animation: dock-in .9s var(--ease) .3s both; }
.load .theme { animation: theme-in .8s ease .6s both; }
@keyframes dock-in { from { opacity: 0; transform: translate(-50%, 24px) scale(.96); } }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); transform: translate(-50%, 8px); background: var(--ink); color: var(--bg); font-size: .84rem; padding: .6rem 1rem; border-radius: 999px; opacity: 0; pointer-events: none; transition: .3s var(--ease); z-index: 70; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- plan comparison ---------- */
.compare .tabs { margin-bottom: 1.4rem; }
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); }
.cmp { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .92rem; }
.cmp th, .cmp td { padding: 1rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { font: 550 .95rem/1.2 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.cmp tbody th { font-weight: 500; color: var(--ink); width: 16%; }
.cmp td { width: 21%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }