/*
 * tanzaku.io — marketing page (LP) styles, shared by index.html (ja) and en.html (en).
 * Served as /assets/lp.css: a new URL for the redesign, so no browser or edge cache pairs the new pages with the
 * old /styles.css (or the old en.html with this file).
 *
 * Frosted-glass redesign (#347). Values follow design-proposal/2026-10-frosted-glass/
 * (tokens/tokens.css, prototype/lp, spec/lp.md). Key colour #FFD800 is used only for the primary
 * button, the "now" light dots and the backdrop light; never for text or icons.
 *
 * 404.html, report.html and legal/ keep their own inline styles.
 */

/* ---------- Tokens ----------
   The subset of design-proposal/2026-10-frosted-glass/tokens/tokens.css (shared with the dashboard) that the LP
   uses, plus the LP's own additions at the end. Differences: --ink-2 is a shade darker here, because LP copy sits
   directly on the moving backdrop; the font stacks add Linux / Windows system faces. No web fonts anywhere. */
:root {
  color-scheme: light;

  /* Colour */
  --ink: #16181d; /* body text, headings, icons */
  --ink-2: #5a606b; /* secondary text (AA on glass and on the moving backdrop) */
  --ink-3: #8a909a; /* symbols only: arrows, bullets, separators */
  --line: rgba(22, 24, 29, 0.08);
  --line-2: rgba(22, 24, 29, 0.14);

  --key: #ffd800; /* key colour: primary button and "now" light dots only; never text or icons */
  --key-press: #f2cc00;

  /* Backdrop (same values as assets/tanzaku-backdrop.js) */
  --bg-top: #fcfcfe; /* also the html / body background */
  --bg-bottom: #f4f4f9;

  /* Glass */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.4)); /* back pane */
  --glass-front: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52)); /* front pane */
  --blur: blur(22px) saturate(160%);
  --edge: rgba(255, 255, 255, 0.75);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --hi-front: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  --well: rgba(255, 255, 255, 0.5);
  --well-sh: inset 0 1px 3px rgba(22, 24, 29, 0.07);
  --well-edge: rgba(22, 24, 29, 0.08);

  /* Shadow (depth = importance) */
  --sh-back: 0 10px 30px rgba(40, 40, 20, 0.06);
  --sh-front: 0 24px 56px rgba(40, 40, 20, 0.11), 0 2px 6px rgba(40, 40, 20, 0.05);

  /* Radius (buttons are pills: 999px) */
  --r-panel: 22px;
  --r-inner: 14px;
  --r-ctl: 12px;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Noto Sans CJK JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* LP additions: the wordmark is live text in a Latin system face; page gutter */
  --sans-latin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gut: 32px;
}

html:lang(en) {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP",
    "Noto Sans CJK JP", sans-serif;
}

/* Latin body copy reads double-spaced at the Japanese line heights */
html:lang(en) .hero-lead,
html:lang(en) .sec-lead,
html:lang(en) .cta-card p,
html:lang(en) .points p {
  line-height: 1.6;
}

html:lang(en) .hero h1 {
  letter-spacing: -0.01em;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg-top);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky top bar covers 16–76px: anchors and focused controls scroll in below it (WCAG 2.4.11) */
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-top);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul,
figure,
pre {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 650;
  font-feature-settings: "palt";
  letter-spacing: 0.01em;
  word-break: auto-phrase;
  text-wrap: balance;
}

p,
li,
small {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

code,
pre {
  font-family: var(--mono);
}

b,
strong {
  font-weight: 600;
}

img {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.i {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Visibility glyph (28×20 frosted window): public = clear pane, protected = frosted pane with a lock */
.vw {
  display: inline-block;
  flex: none;
  width: 28px;
  height: 20px;
  vertical-align: middle;
  color: var(--ink);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nw {
  white-space: nowrap;
}

.ib {
  display: inline-block;
}

.wrap {
  max-width: 1136px;
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---------- Backdrop ----------
   assets/tanzaku-backdrop.js mounts a WebGL canvas into [data-tz-backdrop] and hides the children below.
   The children are the fallback when WebGL is unavailable: still light (yellow top, tint bottom-left). */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

.bd-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.bd-key {
  top: -300px;
  left: 8%;
  width: 760px;
  height: 640px;
  background: radial-gradient(
    closest-side,
    rgba(255, 232, 115, 0.55),
    rgba(255, 243, 184, 0.35) 45%,
    rgba(255, 243, 184, 0) 72%
  );
}

.bd-tint {
  bottom: -280px;
  left: -220px;
  width: 720px;
  height: 680px;
  background: radial-gradient(
    closest-side,
    rgba(196, 232, 236, 0.75),
    rgba(214, 238, 240, 0.45) 40%,
    rgba(214, 238, 240, 0) 70%
  );
}

.bd-air {
  top: 30%;
  right: -160px;
  width: 560px;
  height: 560px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
}

.top,
main,
.foot {
  position: relative;
  z-index: 1;
}

/* ---------- Glass ---------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--edge);
  border-radius: var(--r-panel);
  box-shadow: var(--hi), var(--sh-back);
}

.glass.front {
  background: var(--glass-front);
  box-shadow: var(--hi-front), var(--sh-front);
}

/* Without the blur (no support, or the OS asks for less transparency) the panes turn nearly opaque, so nothing
   behind them shows through as sharp text */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass.front,
  .pane,
  .p1,
  .p2 {
    background: rgba(255, 255, 255, 0.92);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass.front,
  .pane,
  .p1,
  .p2 {
    background: rgba(255, 255, 255, 0.96);
  }
}

/* ---------- Buttons (pill, same as the dashboard) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: 600 15px/1 var(--sans);
  font-feature-settings: "palt";
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s,
    box-shadow 0.15s,
    transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  background: #fff;
}

.btn:active {
  transform: translateY(1px);
}

.btn-key {
  border-color: transparent;
  background: var(--key);
  box-shadow:
    0 1px 2px rgba(90, 70, 0, 0.14),
    0 8px 18px -8px rgba(90, 70, 0, 0.35);
}

.btn-key:hover {
  background: var(--key-press);
}

.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}

.btn-quiet:hover {
  background: rgba(22, 24, 29, 0.06);
  color: var(--ink);
}

.btn-sm {
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.btn-sm .i {
  width: 16px;
  height: 16px;
}

.btn-lg {
  height: 48px;
  padding: 0 24px;
}

.btn .ic-done,
.btn.is-done .ic-copy {
  display: none;
}

.btn.is-done .ic-done {
  display: inline-block;
}

.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(22, 24, 29, 0.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.link:hover {
  text-decoration-color: var(--ink);
}

/* ---------- Wordmark lockup ----------
   The wordmark is live text in a system font (the outlined SVG wordmark is not shipped).
   Proportions follow the proposal's lockup: gap 0.3 × mark, text 1.22 × mark, baseline just above the mark's foot. */
.lockup {
  --mark: 22px;
  display: inline-block;
  color: var(--ink);
  font: 600 calc(var(--mark) * 1.22) / 1 var(--sans-latin);
  letter-spacing: -0.006em;
  white-space: nowrap;
}

.lockup img {
  display: inline-block;
  width: var(--mark);
  height: var(--mark);
  margin-right: calc(var(--mark) * 0.3);
  vertical-align: calc(var(--mark) * -0.065);
}

/* ---------- Top bar (floating glass) ---------- */
.top {
  position: sticky;
  top: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: calc(100% - 32px);
  max-width: 1104px;
  height: 60px;
  margin: 16px auto 0;
  padding: 0 10px 0 16px;
  border-radius: var(--r-panel);
}

/* The top bar is the one pane that floats over any content (including the dark showcase art), so its glass is
   denser than --glass-front, and its quiet links use ink: they stay AA over anything, even where the blur does not
   render. Size, weight and the yellow button keep them quieter than the primary action. */
.top.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.84));
}

.top .btn-quiet {
  color: var(--ink);
}

.brand {
  display: flex;
  align-items: center;
  height: 44px;
  border-radius: 12px;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-lang {
  font-size: 13px;
  font-weight: 500;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 48px 0 32px;
  overflow-x: clip;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: 52px;
  line-height: 1.24;
  letter-spacing: 0.005em;
}

.hero-lead {
  max-width: 30em;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.8;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-note {
  margin-top: 24px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
  font-feature-settings: "palt";
}

/* ---------- Hero motion: layers of glass (1em = --u) ----------
   Still state = the last frame of the story: request (back) / checked and saved (middle) / the published
   site in front with its light dot. The 14 s loop lives under prefers-reduced-motion: no-preference. */
.stage-wrap {
  --u: 18px;
  --fs-l: 0.75em;
  --fs-u: 0.7em;
  --fs-c: 0.8em;
  --fs-s: 0.72em;
  position: relative;
  font-size: var(--u);
  line-height: 1.5;
}

.stage {
  position: relative;
  height: 29em;
}

/* Still lights behind the layers. Hidden while the moving backdrop runs (it takes over their role). */
.h-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.h-orb-key {
  top: -1.2em;
  left: calc(50% + 3.4em);
  width: 13em;
  height: 13em;
  background: radial-gradient(
    closest-side,
    rgba(255, 216, 0, 0.24),
    rgba(255, 216, 0, 0.2) 80%,
    rgba(255, 216, 0, 0.08) 93%,
    rgba(255, 216, 0, 0)
  );
}

.h-orb-tint {
  top: 2.4em;
  left: calc(50% - 16.6em);
  width: 12em;
  height: 12em;
  background: radial-gradient(
    closest-side,
    rgba(196, 228, 234, 0.95),
    rgba(210, 234, 238, 0.92) 80%,
    rgba(210, 234, 238, 0.35) 93%,
    rgba(210, 234, 238, 0)
  );
}

.tz-backdrop-on .h-orb {
  display: none;
}

/* Stop motion (top-right of the stage; shown only when there is motion to stop) */
.motion-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-2);
  font-size: 15px;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.motion-btn:hover {
  background: #fff;
  color: var(--ink);
}

.motion-btn .i {
  width: 16px;
  height: 16px;
}

/* 44px touch target around the 32px button */
.motion-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.pane {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  transform-origin: 50% 0;
  border: 1px solid var(--edge);
  border-radius: 1.2em;
  background: var(--glass-front);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow:
    var(--hi-front),
    0 1.2em 2.8em rgba(40, 40, 20, 0.1),
    0 2px 6px rgba(40, 40, 20, 0.05);
}

/* The two layers that step back use the base glass (white 58%); only the front window is white 72% */
.p1,
.p2 {
  background: var(--glass);
}

/* P1: the request to the agent. Front 9.1em → middle (−4.8em, .95) → back (−8.1em, .90) */
.p1 {
  top: 9.1em;
  width: 22em;
  padding: 1em 1.25em;
  transform: translateY(-8.1em) scale(0.9);
  opacity: 0.92;
}

.p-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ink-2);
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.p-label .i {
  width: 1.35em;
  height: 1.35em;
  color: var(--ink);
}

.prompt {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 0.45em;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  font-feature-settings: "palt";
}

.prompt-mark {
  color: var(--ink-3);
  font-weight: 400;
}

.typed {
  position: relative;
  display: inline-block;
}

.ch {
  position: relative;
}

.ch::after,
.caret0 {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.14em;
  width: 2px;
  border-radius: 1px;
  background: var(--ink);
  opacity: 0;
}

.ch::after {
  right: -0.1em;
}

.caret0 {
  left: 0;
}

/* P2: Tanzaku receives, checks and stores. Front 8.8em → middle (−3.55em, .95) */
.p2 {
  top: 8.8em;
  width: 22em;
  padding: 1em 1.25em 0.5em;
  transform: translateY(-3.55em) scale(0.95);
  opacity: 0.97;
}

.p2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  height: 1.5em;
}

/* In stage units: an em here would resolve against the lockup's own (1.22×) font size and inflate the mark */
.p2-head .lockup {
  --mark: calc(var(--u) * 1.05);
}

.p2-st {
  display: grid;
  justify-items: end;
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.st {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: 0.35em;
}

.st .i {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 2;
}

.st-a {
  color: var(--ink-2);
  opacity: 0;
}

.files {
  margin-top: 0.5em;
  opacity: 0;
}

.files li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 2.25em;
  border-top: 1px solid var(--line);
}

.files .i {
  width: 1.1em;
  height: 1.1em;
  color: var(--ink-2);
}

.files code {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-c);
}

.files .sz {
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
}

.files .ck {
  width: 1.2em;
  height: 1.2em;
  color: var(--ink);
  stroke-width: 2;
}

/* P3: the published site (browser window) */
.p3 {
  top: 8.15em;
  width: 24em;
  padding: 0.625em;
}

.p3-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  height: 2.25em;
  padding: 0 0.5em;
  font-size: var(--fs-l);
  white-space: nowrap;
}

.p3-note .vw {
  width: 1.9em;
  height: 1.36em;
}

.vis {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--ink);
}

.done {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--ink);
  font-weight: 600;
}

.done .i {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 2;
}

/* ---------- Window (a preview of the user's site, same shape as the dashboard) ---------- */
.win {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(22, 24, 29, 0.09);
  border-radius: 0.78em;
  background: #fff;
  box-shadow: 0 1px 2px rgba(40, 40, 20, 0.05);
  container-type: inline-size;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 2em;
  padding: 0 0.75em;
  border-bottom: 1px solid rgba(22, 24, 29, 0.06);
  background: rgba(247, 247, 245, 0.95);
}

.dots {
  display: flex;
  flex: none;
  gap: 0.3em;
  width: 2.2em;
}

.dots i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: rgba(22, 24, 29, 0.13);
}

.win-url {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 0;
  padding-right: 2.2em;
  color: var(--ink-2);
  font: var(--fs-u, 0.7em) / 1 var(--mono);
  white-space: nowrap;
}

.u-stack {
  display: grid;
  align-items: center;
  justify-items: center;
  min-width: 0;
}

.u-stack > span {
  grid-area: 1 / 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-url b {
  color: var(--ink);
  font-weight: 600;
}

.u-skel {
  width: 13em;
  height: 0.9em;
  border-radius: 1em;
  background: rgba(22, 24, 29, 0.07);
  opacity: 0;
}

/* The publish signal: a yellow light dot left of the URL (the dashboard's "now" dot) */
.u-dot {
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--key);
  box-shadow:
    0 0 0 0.22em rgba(255, 216, 0, 0.22),
    0 0 0.8em 0.15em rgba(255, 216, 0, 0.6);
}

.win-body {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f6f3ee;
}

/* Frost: a white veil + blur in front of the content. Clearing and fogging only change its opacity. */
.frost {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(var(--fb, 8px)) saturate(0.85);
  backdrop-filter: blur(var(--fb, 8px)) saturate(0.85);
  opacity: 0;
  pointer-events: none;
}

/* In the hero the veil is thinner, so the artwork's colours show through before it clears */
.stage .frost {
  --fb: 11px;
  background: rgba(255, 255, 255, 0.4);
}

/* The sample portfolio (the user's site: ink, grey-blue and sand only, never the key colour) */
.pf {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.35em;
  padding: 0 6.5%;
  background: #faf9f6;
  color: #23262d;
  font-size: clamp(6px, 2.05cqw, 14px);
  line-height: 1.3;
}

.pf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
}

.pf-name {
  font: 600 2em/1 "Avenir Next", Futura, var(--sans-latin);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.pf-role {
  margin-top: 0.45em;
  color: #6e737d;
  font: 500 0.74em/1.2 "Avenir Next", var(--sans-latin);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.pf-nav {
  display: flex;
  gap: 1.3em;
  margin-bottom: 0.15em;
  color: #6e737d;
  font: 500 0.8em/1 "Avenir Next", var(--sans-latin);
  white-space: nowrap;
}

.pf-nav b {
  color: #23262d;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1em;
}

.pf-grid li {
  display: grid;
  gap: 0.55em;
  min-width: 0;
}

.pf-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 0.45em;
}

.pf-t {
  display: flex;
  justify-content: space-between;
  gap: 0.4em;
  color: #3a3f48;
  font: 500 0.74em/1.2 "Avenir Next", var(--sans-latin);
  white-space: nowrap;
  word-break: normal;
}

.pf-t span {
  color: #8c919a;
}

/* ---------- Sections ---------- */
.sec {
  position: relative;
  padding-top: 96px;
}

.sec-head {
  max-width: 760px;
  margin-bottom: 32px;
}

.sec h2 {
  font-size: 32px;
  line-height: 1.4;
}

.sec-lead {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.85;
}

.card {
  padding: 32px;
}

.fine {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.fine .i {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--ink);
}

/* How it works: two ways */
.how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.how-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* The closing note sits on the bottom edge, so the two side-by-side cards end together */
.how-card > :nth-last-child(2) {
  margin-bottom: auto;
}

.how-card > * {
  min-width: 0;
}

.how-card h3 {
  font-size: 22px;
  line-height: 1.4;
}

.how-sub {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 15px;
}

.steps {
  display: grid;
  gap: 12px;
}

.steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 15px;
  line-height: 1.6;
}

.num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  font: 600 12px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}

.steps small {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}

.steps .u {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font: 13px/1.6 var(--mono);
  overflow-wrap: anywhere;
}

.code {
  overflow-x: auto;
  padding: 12px 16px;
  border: 1px solid var(--well-edge);
  border-radius: var(--r-inner);
  background: var(--well);
  box-shadow: var(--well-sh);
  color: var(--ink);
  font: 13px/1.75 var(--mono);
  white-space: pre;
  tab-size: 2;
}

.code .k {
  color: var(--ink-2);
}

.how-card .fine {
  margin-top: -8px;
}

.cmds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.cmd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.cmd-l {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

/* Commands wrap only at spaces (never inside an option or the URL) */
.cmd-line {
  display: block;
}

.cmd-code {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--well-edge);
  border-radius: var(--r-ctl);
  background: var(--well);
  box-shadow: var(--well-sh);
  color: var(--ink);
  font: 13px/1.7 var(--mono);
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Visibility: frost density = who can see it */
.scope {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 48px;
  align-items: start;
}

.sc-list {
  display: grid;
  gap: 8px;
}

.sc {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  padding: 16px 40px 16px 16px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 1px 2px rgba(40, 40, 20, 0.06),
    0 10px 24px rgba(40, 40, 20, 0.07),
    inset 0 0 0 1px rgba(22, 24, 29, 0.5);
  opacity: 0;
}

/* Hover previews the slab without the selected ring */
.sc:hover::before {
  box-shadow:
    0 1px 2px rgba(40, 40, 20, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.sc > * {
  position: relative;
}

.sc .vw {
  margin-top: 3px;
}

.sc b {
  display: block;
  font-size: 17px;
  line-height: 1.5;
}

.sc-desc {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

.sc-url {
  display: block;
  margin-top: 6px;
  color: var(--ink-2);
  font: 13px/1.5 var(--mono);
  overflow-wrap: anywhere;
}

.sc-url em {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}

.here {
  position: absolute;
  top: 25px;
  right: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--key);
  box-shadow:
    0 0 0 3px rgba(255, 216, 0, 0.2),
    0 0 12px 2px rgba(255, 216, 0, 0.65);
  opacity: 0;
}

.sc:hover::before {
  opacity: 0.5;
}

.scope[data-state="pub"] .sc-a:hover::before,
.scope[data-state="pro"] .sc-b:hover::before {
  box-shadow:
    0 1px 2px rgba(40, 40, 20, 0.06),
    0 10px 24px rgba(40, 40, 20, 0.07),
    inset 0 0 0 1px rgba(22, 24, 29, 0.5);
}

@media (forced-colors: active) {
  .sc {
    border: 1px solid ButtonText;
  }

  .sc[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

.scope-uses {
  margin-top: 24px;
}

.scope-card {
  padding: 12px;
}

.scope-card .win {
  font-size: 16px;
}

.scope-card .frost {
  --fb: 9px;
}

.scope-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px 4px;
  color: var(--ink-2);
  font-size: 13px;
}

.scope-cap .i {
  width: 16px;
  height: 16px;
  color: var(--ink);
}

.sc-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}

.lock-card {
  display: grid;
  justify-items: center;
  gap: 0.55em;
  width: 36%;
  padding: 1.1em 1em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.08);
  font-size: clamp(6px, 1.9cqw, 13px);
}

.lock-card .i {
  width: 2em;
  height: 2em;
  color: var(--ink);
}

.lock-card b {
  color: var(--ink);
  font: 600 0.9em/1.3 var(--sans);
}

.lock-field,
.lock-submit {
  display: block;
  width: 100%;
  height: 2.2em;
}

.lock-field {
  border: 1px solid rgba(22, 24, 29, 0.18);
  border-radius: 0.5em;
  background: #fff;
}

.lock-submit {
  border-radius: 99em;
  background: #1d1f24;
}

.win-url .u-b {
  opacity: 0;
}

/* State (still and after a click). Default: password protected */
.scope[data-state="pro"] .u-a {
  opacity: 0;
}

.scope[data-state="pro"] .u-b,
.scope[data-state="pro"] .scope-card .frost,
.scope[data-state="pro"] .sc-lock {
  opacity: 1;
}

.scope[data-state="pub"] .sc-a::before,
.scope[data-state="pro"] .sc-b::before,
.scope[data-state="pub"] .sc-a .here,
.scope[data-state="pro"] .sc-b .here {
  opacity: 1;
}

.scope .u,
.scope .frost,
.scope .sc-lock,
.sc::before,
.sc .here {
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}

/* Under the hood: one path from the agent to the visitor */
.flow-card {
  padding: 32px 32px 36px;
}

.flow {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px
    minmax(0, 1fr);
  align-items: center;
}

.fl-label {
  position: relative;
  grid-row: 1;
  margin-bottom: 16px;
  padding-bottom: 14px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.fl-label::after {
  content: "";
  position: absolute;
  right: 14%;
  bottom: 0;
  left: 14%;
  height: 8px;
  border: 1.5px solid var(--line-2);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.fl-label.a {
  grid-column: 1 / 6;
}

.fl-label.b {
  grid-column: 5 / 10;
}

.fl-label.a::after {
  right: calc(14% + 3px);
}

.fl-label.b::after {
  left: calc(14% + 3px);
}

.node {
  position: relative;
  display: grid;
  grid-row: 2;
  align-self: stretch;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 16px 12px;
  border: 1px solid rgba(22, 24, 29, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(40, 40, 20, 0.05);
  text-align: center;
}

/* Baseline-aligned so the node's baseline comes from its text, not the lock icon (matters in the vertical layout) */
.node b {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  line-height: 1.4;
}

.node b .i {
  align-self: center;
  width: 16px;
  height: 16px;
}

.node small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.lamp {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(22, 24, 29, 0.12);
}

.lamp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--key);
  box-shadow:
    0 0 0 3px rgba(255, 216, 0, 0.2),
    0 0 12px 2px rgba(255, 216, 0, 0.7);
  opacity: 0;
}

.arr {
  position: relative;
  grid-row: 2;
  height: 12px;
  overflow: hidden;
}

.arr::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 1.5px;
  margin-top: -0.75px;
  background: rgba(22, 24, 29, 0.2);
}

.arr::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 7px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-top: 1.5px solid rgba(22, 24, 29, 0.34);
  border-right: 1.5px solid rgba(22, 24, 29, 0.34);
  transform: rotate(45deg);
}

/* At rest the particle (with its 2px white rim) sits fully outside its arrow */
.pk {
  position: absolute;
  inset: 0;
  transform: translateX(calc(-100% - 3px));
}

/* Publish particle = ink with a white rim / delivery particle = light ink */
.pk::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}

.l3 .pk::after,
.l4 .pk::after {
  background: rgba(22, 24, 29, 0.34);
  box-shadow: none;
}

.points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.points li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.points .i {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--ink);
}

.points h3 {
  font-size: 17px;
  line-height: 1.5;
}

.points p {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.8;
}

/* What you can build / sites already live (each card opens the real site) */
.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.cases li {
  min-width: 0;
}

.case {
  display: block;
  height: 100%;
  padding: 12px 12px 20px;
  transition:
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.case:hover {
  box-shadow: var(--hi-front), var(--sh-front);
  transform: translateY(-2px);
}

.case-win {
  overflow: hidden;
  border: 1px solid rgba(22, 24, 29, 0.09);
  border-radius: var(--r-inner);
  background: #fff;
  box-shadow: 0 1px 2px rgba(40, 40, 20, 0.05);
}

.case-win .win-bar {
  font-size: 16px;
}

/* Only the URL sits in these bars: drop the balancing space so the full address fits */
.case-win .win-url {
  padding-right: 0.8em;
}

.case-win svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
}

.case h3 {
  margin: 16px 8px 0;
  font-size: 17px;
  line-height: 1.5;
}

/* The cards open the live site in a new tab; the arrow says so on touch screens too (no hover there) */
.case .i-ext {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  color: var(--ink-2);
}

.case:hover .i-ext {
  color: var(--ink);
}

.case p {
  margin: 2px 8px 0;
  color: var(--ink-2);
  font-size: 13px;
}

/* Closing call to action */
.cta {
  padding-bottom: 96px;
  overflow-x: clip;
}

.cta-orb {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 760px;
  height: 560px;
  margin: -280px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 216, 0, 0.32),
    rgba(255, 216, 0, 0.2) 40%,
    rgba(255, 216, 0, 0) 72%
  );
  pointer-events: none;
}

.cta-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px;
  text-align: center;
}

.cta-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 24px;
}

.cta-card h2 {
  font-size: 32px;
  line-height: 1.4;
}

.cta-card p {
  max-width: 34em;
  margin: 12px auto 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.85;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.cta-card .cta-alt {
  margin-top: 20px;
  font-size: 13px;
}

/* Footer */
.foot {
  padding: 0 0 48px;
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.foot .lockup {
  --mark: 18px;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-left: auto;
  color: var(--ink-2);
  font-size: 13px;
}

.foot-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Second "stop motion" control (the backdrop moves page-wide, the hero button scrolls away). A small pill with the
   same glyph as the hero button, so it reads as a control rather than another legal link. */
.foot-motion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.foot-motion:hover {
  background: #fff;
  color: var(--ink);
}

.foot-motion .i {
  width: 14px;
  height: 14px;
}

@media (pointer: coarse) {
  .foot-motion {
    height: 44px;
    padding: 0 16px 0 14px;
  }

  .foot-nav {
    row-gap: 0;
  }

  .foot-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.foot-note {
  flex-basis: 100%;
  color: var(--ink-2);
  font-size: 12px;
}

/* ============================================================
   Motion (only when the OS does not ask for reduced motion).
   The defaults above are the still frame; animations use transform and opacity only.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Hero, 14 s loop. Starts on the finished composition (8.6 s into the loop), holds it 3.6 s, then plays.
     With js-io the hero stays paused until it is on screen, and pauses again when it leaves. */
  .stage-wrap {
    --t0: -8.6s;
  }

  .stage .p1 {
    animation: p1 14s var(--t0) infinite both;
  }

  .stage .p2 {
    animation:
      p2-move 14s var(--t0) infinite both,
      p2-fade 14s var(--t0) infinite both;
  }

  .stage .p3 {
    animation:
      p3-move 14s var(--t0) infinite both,
      p3-fade 14s var(--t0) infinite both;
  }

  .stage .caret0 {
    animation: caret-0 14s var(--t0) infinite both;
  }

  .stage .c0 {
    animation: chunk-0 14s var(--t0) infinite both;
  }

  .stage .c1 {
    animation: chunk-1 14s var(--t0) infinite both;
  }

  .stage .c2 {
    animation: chunk-2 14s var(--t0) infinite both;
  }

  .stage .c0::after {
    animation: caret-1 14s var(--t0) infinite both;
  }

  .stage .c1::after {
    animation: caret-2 14s var(--t0) infinite both;
  }

  .stage .c2::after {
    animation: caret-3 14s var(--t0) infinite both;
  }

  .stage .files {
    animation: files 14s var(--t0) infinite both;
  }

  .stage .files li {
    animation: file-row 14s var(--t0) infinite both;
  }

  .stage .files .ck {
    animation: file-check 14s var(--t0) infinite both;
  }

  .stage .files li:nth-child(2),
  .stage .files li:nth-child(2) .ck {
    animation-delay: calc(var(--t0) + 0.35s);
  }

  .stage .files li:nth-child(3),
  .stage .files li:nth-child(3) .ck {
    animation-delay: calc(var(--t0) + 0.7s);
  }

  .stage .st-a {
    animation: status-a 14s var(--t0) infinite both;
  }

  .stage .st-b {
    animation: status-b 14s var(--t0) infinite both;
  }

  .stage .p3 .frost {
    animation: frost-clear 14s var(--t0) infinite both;
  }

  .stage .u-txt {
    animation: url-in 14s var(--t0) infinite both;
  }

  .stage .u-skel {
    animation: url-out 14s var(--t0) infinite both;
  }

  .stage .u-dot {
    animation: dot-lit 14s var(--t0) infinite both;
  }

  .stage .vis,
  .stage .done {
    animation: published 14s var(--t0) infinite both;
  }

  .js-io .stage-wrap:not(.is-inview) .stage *,
  .js-io .stage-wrap:not(.is-inview) .stage *::after {
    animation-play-state: paused;
  }

  /* Visibility, 8 s loop while on screen. Picking a row stops it on that state. */
  :root:not(.js-io) .scope.is-auto .u-a,
  .scope.is-auto.is-run .u-a,
  :root:not(.js-io) .scope.is-auto .sc-a::before,
  .scope.is-auto.is-run .sc-a::before,
  :root:not(.js-io) .scope.is-auto .sc-a .here,
  .scope.is-auto.is-run .sc-a .here {
    animation: scope-public 8s infinite both;
  }

  :root:not(.js-io) .scope.is-auto .u-b,
  .scope.is-auto.is-run .u-b,
  :root:not(.js-io) .scope.is-auto .sc-b::before,
  .scope.is-auto.is-run .sc-b::before,
  :root:not(.js-io) .scope.is-auto .sc-b .here,
  .scope.is-auto.is-run .sc-b .here {
    animation: scope-protected 8s infinite both;
  }

  :root:not(.js-io) .scope.is-auto .scope-card .frost,
  .scope.is-auto.is-run .scope-card .frost {
    animation: scope-frost 8s infinite both;
  }

  :root:not(.js-io) .scope.is-auto .sc-lock,
  .scope.is-auto.is-run .sc-lock {
    animation: scope-lock 8s infinite both;
  }

  /* Under the hood, 8 s loop while on screen (starts with the publish particle) */
  :root:not(.js-io) .flow .l1 .pk,
  .flow.is-run .l1 .pk {
    animation: publish-1 8s infinite both;
  }

  :root:not(.js-io) .flow .l2 .pk,
  .flow.is-run .l2 .pk {
    animation: publish-2 8s infinite both;
  }

  :root:not(.js-io) .flow .n-api .lamp::after,
  .flow.is-run .n-api .lamp::after {
    animation: lamp 8s infinite both;
  }

  :root:not(.js-io) .flow .l3 .pk,
  .flow.is-run .l3 .pk {
    animation: deliver-3 4s 3s infinite both;
  }

  :root:not(.js-io) .flow .l4 .pk,
  .flow.is-run .l4 .pk {
    animation: deliver-4 3.2s 3.8s infinite both;
  }

  /* "Stop motion" drops every loop back to its authored still frame (the CSS defaults, the same frame as reduced
     motion) instead of freezing whatever frame was playing. The backdrop watches the same class. Resuming restarts
     the hero on its finished composition (--t0) and the other loops from 0 s. */
  .is-paused .stage *,
  .is-paused .stage *::after,
  .is-paused .scope *,
  .is-paused .scope *::before,
  .is-paused .flow *,
  .is-paused .flow *::after {
    animation: none !important;
  }

  .is-paused .lamp {
    display: none;
  }
}

/* Hero: front → middle (.95) → back (.90). Percentages are seconds / 14. */
@keyframes p1 {
  0% { transform: none; opacity: 1; }
  18.571% { transform: none; opacity: 1; animation-timing-function: var(--ease); }
  23.571% { transform: translateY(-4.8em) scale(0.95); opacity: 0.97; }
  44.286% { transform: translateY(-4.8em) scale(0.95); opacity: 0.97; animation-timing-function: var(--ease); }
  49.286% { transform: translateY(-8.1em) scale(0.9); opacity: 0.92; }
  87.143% { transform: translateY(-8.1em) scale(0.9); opacity: 0.92; animation-timing-function: ease-in-out; }
  90.714% { transform: translateY(-8.7em) scale(0.88); opacity: 0; }
  90.8%, 94.643% { transform: translateY(1.25em) scale(0.98); opacity: 0; animation-timing-function: var(--ease); }
  100% { transform: none; opacity: 1; }
}

@keyframes p2-move {
  0%, 20.357% { transform: translateY(1.25em) scale(0.98); animation-timing-function: var(--ease); }
  25.714% { transform: none; }
  44.286% { transform: none; animation-timing-function: var(--ease); }
  49.286% { transform: translateY(-3.55em) scale(0.95); }
  88% { transform: translateY(-3.55em) scale(0.95); animation-timing-function: ease-in-out; }
  91.571% { transform: translateY(-4.15em) scale(0.93); }
  91.65%, 100% { transform: translateY(1.25em) scale(0.98); }
}

@keyframes p2-fade {
  0%, 20.357% { opacity: 0; animation-timing-function: ease-out; }
  22.857% { opacity: 1; }
  88% { opacity: 1; animation-timing-function: ease-in-out; }
  91.571%, 100% { opacity: 0; }
}

@keyframes p3-move {
  0%, 46.071% { transform: translateY(1.25em) scale(0.98); animation-timing-function: var(--ease); }
  51.786% { transform: none; }
  89.286% { transform: none; animation-timing-function: ease-in-out; }
  96.071% { transform: translateY(-3em) scale(0.95); }
  96.15%, 100% { transform: translateY(1.25em) scale(0.98); }
}

@keyframes p3-fade {
  0%, 46.786% { opacity: 0; animation-timing-function: ease-out; }
  49.286% { opacity: 1; }
  89.286% { opacity: 1; animation-timing-function: ease-in; }
  94.286% { opacity: 0.3; animation-timing-function: linear; }
  96.071%, 100% { opacity: 0; }
}

/* The request types in phrase by phrase (0.30 / 0.90 / 1.50 s); the caret leaves at 2.5 s (sent) */
@keyframes chunk-0 {
  0%, 2.143% { opacity: 0; animation-timing-function: ease-out; }
  3.929%, 91.75% { opacity: 1; }
  91.786%, 100% { opacity: 0; }
}

@keyframes chunk-1 {
  0%, 6.429% { opacity: 0; animation-timing-function: ease-out; }
  7.857%, 91.75% { opacity: 1; }
  91.786%, 100% { opacity: 0; }
}

@keyframes chunk-2 {
  0%, 10.714% { opacity: 0; animation-timing-function: ease-out; }
  12.143%, 91.75% { opacity: 1; }
  91.786%, 100% { opacity: 0; }
}

@keyframes caret-0 {
  0%, 2.1% { opacity: 1; }
  2.143%, 91.75% { opacity: 0; }
  91.786%, 100% { opacity: 1; }
}

@keyframes caret-1 {
  0%, 2.1% { opacity: 0; }
  2.143%, 6.4% { opacity: 1; }
  6.429%, 100% { opacity: 0; }
}

@keyframes caret-2 {
  0%, 6.4% { opacity: 0; }
  6.429%, 10.69% { opacity: 1; }
  10.714%, 100% { opacity: 0; }
}

@keyframes caret-3 {
  0%, 10.69% { opacity: 0; }
  10.714%, 17.83% { opacity: 1; }
  17.857%, 100% { opacity: 0; }
}

/* Files arrive one row at a time from 3.45 s and leave before P3 rises (5.95–6.3 s) */
@keyframes files {
  0%, 42.5% { opacity: 1; animation-timing-function: ease-out; }
  45%, 91.65% { opacity: 0; }
  91.7%, 100% { opacity: 1; }
}

@keyframes file-row {
  0%, 24.643% { transform: translateX(-0.5em); opacity: 0; animation-timing-function: var(--ease); }
  27.143% { transform: none; opacity: 1; }
  91.65% { transform: none; opacity: 1; }
  91.7%, 100% { transform: translateX(-0.5em); opacity: 0; }
}

@keyframes file-check {
  0%, 27.857% { transform: scale(0.5); opacity: 0; animation-timing-function: var(--ease); }
  30.357% { transform: none; opacity: 1; }
  91.65% { transform: none; opacity: 1; }
  91.7%, 100% { transform: scale(0.5); opacity: 0; }
}

@keyframes status-a {
  0%, 35.714% { opacity: 1; }
  37.857% { opacity: 0; }
  91.65% { opacity: 0; }
  91.7%, 100% { opacity: 1; }
}

@keyframes status-b {
  0%, 35.714% { opacity: 0; }
  37.857% { opacity: 1; }
  91.65% { opacity: 1; }
  91.7%, 100% { opacity: 0; }
}

/* The frost clears and the blurred artwork turns crisp (7.3–8.15 s); URL 7.4–8.0 s; dot and "published" from 8.15 s */
@keyframes frost-clear {
  0%, 52.143% { opacity: 1; animation-timing-function: var(--ease); }
  58.214%, 100% { opacity: 0; }
}

@keyframes url-in {
  0%, 52.857% { opacity: 0; animation-timing-function: var(--ease); }
  57.143%, 100% { opacity: 1; }
}

@keyframes url-out {
  0%, 52.857% { opacity: 1; animation-timing-function: var(--ease); }
  57.143%, 100% { opacity: 0; }
}

@keyframes dot-lit {
  0%, 58.214% { transform: scale(0.4); opacity: 0; animation-timing-function: var(--ease); }
  61.071%, 100% { transform: none; opacity: 1; }
}

@keyframes published {
  0%, 58.214% { transform: translateY(0.3em); opacity: 0; animation-timing-function: var(--ease); }
  61.429%, 100% { transform: none; opacity: 1; }
}

/* Visibility: starts on password protected (the still state), anyone-can-view at 3.2 s, back at 7.2 s */
@keyframes scope-public {
  0%, 40% { opacity: 0; animation-timing-function: var(--ease); }
  48%, 90% { opacity: 1; animation-timing-function: var(--ease); }
  98%, 100% { opacity: 0; }
}

@keyframes scope-protected {
  0%, 40% { opacity: 1; animation-timing-function: var(--ease); }
  48%, 90% { opacity: 0; animation-timing-function: var(--ease); }
  98%, 100% { opacity: 1; }
}

@keyframes scope-frost {
  0%, 41% { opacity: 1; animation-timing-function: var(--ease); }
  50%, 90% { opacity: 0; animation-timing-function: var(--ease); }
  99%, 100% { opacity: 1; }
}

@keyframes scope-lock {
  0%, 40% { transform: none; opacity: 1; animation-timing-function: ease-in; }
  45%, 92% { transform: translateY(0.6em) scale(0.96); opacity: 0; animation-timing-function: var(--ease); }
  100% { transform: none; opacity: 1; }
}

/* Under the hood: one publish particle per loop (0.2–3.0 s), then delivery particles keep flowing */
@keyframes publish-1 {
  0%, 2.5% { transform: translateX(calc(-100% - 3px)); animation-timing-function: ease-in-out; }
  12.5%, 100% { transform: translateX(12px); }
}

@keyframes publish-2 {
  0%, 27.5% { transform: translateX(calc(-100% - 3px)); animation-timing-function: ease-in-out; }
  37.5%, 100% { transform: translateX(12px); }
}

@keyframes lamp {
  0%, 11% { opacity: 0; animation-timing-function: var(--ease); }
  14%, 30% { opacity: 1; animation-timing-function: ease-in-out; }
  36%, 100% { opacity: 0; }
}

@keyframes deliver-3 {
  0% { transform: translateX(calc(-100% - 3px)); animation-timing-function: ease-in-out; }
  20%, 100% { transform: translateX(12px); }
}

@keyframes deliver-4 {
  0% { transform: translateX(calc(-100% - 3px)); animation-timing-function: ease-in-out; }
  25%, 100% { transform: translateX(12px); }
}

@keyframes publish-1-y {
  0%, 2.5% { transform: translateY(calc(-100% - 3px)); animation-timing-function: ease-in-out; }
  12.5%, 100% { transform: translateY(12px); }
}

@keyframes publish-2-y {
  0%, 27.5% { transform: translateY(calc(-100% - 3px)); animation-timing-function: ease-in-out; }
  37.5%, 100% { transform: translateY(12px); }
}

@keyframes deliver-3-y {
  0% { transform: translateY(calc(-100% - 3px)); animation-timing-function: ease-in-out; }
  20%, 100% { transform: translateY(12px); }
}

@keyframes deliver-4-y {
  0% { transform: translateY(calc(-100% - 3px)); animation-timing-function: ease-in-out; }
  25%, 100% { transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  .lamp,
  .pk {
    display: none;
  }
}

/* Older browsers without overflow-x: clip would scroll sideways to the decorative lights */
@supports not (overflow-x: clip) {
  .h-orb,
  .cta-orb {
    display: none;
  }
}

/* ---------- Touch screens: 44px targets ---------- */
@media (pointer: coarse) {
  .top .btn {
    height: 44px;
  }

  .btn-sm {
    position: relative;
  }

  .btn-sm::before {
    content: "";
    position: absolute;
    inset: -6px -2px;
  }

  .cta-alt .link {
    display: inline-block;
    margin: -12px -6px;
    padding: 12px 6px;
  }
}

/* ---------- Narrow screens ---------- */
/* Two-column hero on smaller laptops: the headline scales down so it keeps its three phrase lines */
@media (min-width: 1041px) and (max-width: 1200px) {
  .hero h1 {
    font-size: clamp(44px, 4.3vw, 52px);
  }
}

@media (max-width: 1040px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .hero-text {
    max-width: 640px;
  }

  .stage-wrap {
    --u: clamp(12px, calc((100vw - 32px) / 24.6), 18px);
    width: 100%;
    max-width: 34em;
    margin: 0 auto;
  }

  .scope {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .points {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    max-width: 640px;
  }
}

@media (max-width: 960px) {
  .how {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  /* One column below three: two columns would leave the third card on its own row */
  .cases {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
  }

  /* The path turns vertical. "When publishing" / "When viewed" sit beside the first arrow of each half
     (S3 is the seam). */
  .flow {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin: 0 auto;
  }

  .flow > * {
    grid-column: 1;
  }

  .fl-label,
  .fl-label.a,
  .fl-label.b {
    grid-column: 1;
    align-self: center;
    justify-self: start;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .fl-label::after {
    display: none;
  }

  .n-agent {
    grid-row: 1;
  }

  .l1,
  .fl-label.a {
    grid-row: 2;
  }

  .n-api {
    grid-row: 3;
  }

  .l2 {
    grid-row: 4;
  }

  .n-s3 {
    grid-row: 5;
  }

  .l3,
  .fl-label.b {
    grid-row: 6;
  }

  .n-cf {
    grid-row: 7;
  }

  .l4 {
    grid-row: 8;
  }

  .n-vis {
    grid-row: 9;
  }

  .node {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    text-align: left;
  }

  .node small {
    text-align: right;
  }

  .lamp {
    top: 50%;
    right: 14px;
    margin-top: -3.5px;
  }

  .n-api small {
    padding-right: 18px;
  }

  .arr {
    justify-self: center;
    width: 12px;
    height: 40px;
  }

  .arr::before {
    top: 6px;
    right: auto;
    bottom: 6px;
    left: 50%;
    width: 1.5px;
    height: auto;
    margin: 0 0 0 -0.75px;
  }

  .arr::after {
    top: auto;
    right: auto;
    bottom: 7px;
    left: 50%;
    margin: 0 0 0 -3px;
    transform: rotate(135deg);
  }

  .pk {
    transform: translateY(calc(-100% - 3px));
  }

  .pk::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -4px;
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  /* Only the keyframe names change (same run conditions as above, so the clock does not start early) */
  :root:not(.js-io) .flow .l1 .pk,
  .flow.is-run .l1 .pk {
    animation-name: publish-1-y;
  }

  :root:not(.js-io) .flow .l2 .pk,
  .flow.is-run .l2 .pk {
    animation-name: publish-2-y;
  }

  :root:not(.js-io) .flow .l3 .pk,
  .flow.is-run .l3 .pk {
    animation-name: deliver-3-y;
  }

  :root:not(.js-io) .flow .l4 .pk,
  .flow.is-run .l4 .pk {
    animation-name: deliver-4-y;
  }
}

@media (max-width: 640px) {
  :root {
    --gut: 16px;
  }

  html {
    scroll-padding-top: 80px;
  }

  .top {
    top: 12px;
    width: calc(100% - 24px);
    height: 56px;
    margin-top: 12px;
    padding: 0 8px 0 14px;
  }

  .top .lockup {
    --mark: 20px;
  }

  .top .btn-quiet {
    padding: 0 8px;
  }

  .top .btn-key {
    padding: 0 14px;
  }

  .hero {
    padding-top: 24px;
  }

  .hero-grid {
    gap: 24px;
  }

  .hero h1 {
    font-size: 32px;
    line-height: 1.3;
  }

  .hero-lead {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.8;
  }

  .hero-cta {
    gap: 8px;
    margin-top: 24px;
  }

  .hero-cta .btn {
    flex: 1 1 0;
    padding: 0 12px;
  }

  .hero-note {
    margin-top: 16px;
    font-size: 12px;
  }

  /* The hero motion fits the first 390×844 screen; small labels stay around 12px */
  .stage-wrap {
    --u: min(13.5px, calc((100vw - 32px) / 24.4));
    --fs-l: 0.9em;
    --fs-u: 0.88em;
    --fs-c: 0.92em;
    --fs-s: 0.84em;
  }

  /* Keep mio-works.hosted-by.tanzaku.io unabridged: drop the balancing space on the right */
  .stage .win-url {
    padding-right: 0.8em;
  }

  .sec {
    padding-top: 72px;
  }

  .sec h2,
  .cta-card h2 {
    font-size: 24px;
    line-height: 1.45;
  }

  .sec-head {
    margin-bottom: 24px;
  }

  .card {
    padding: 24px 20px;
  }

  .how-card h3 {
    font-size: 20px;
  }

  .code {
    padding: 12px 10px;
    font-size: max(11px, min(12px, 2.9vw));
  }

  .cmd-code {
    padding: 10px;
    font-size: 12px;
  }

  .steps .u {
    font-size: 12px;
  }

  .sc {
    gap: 12px;
    padding: 14px 32px 14px 12px;
  }

  .here {
    right: 14px;
  }

  .sc-url {
    font-size: 12px;
  }

  .u-x {
    display: none;
  }

  .scope-card {
    order: -1;
    padding: 8px;
  }

  .scope-card .win {
    font-size: 13px;
  }

  .flow-card {
    padding: 24px 16px;
  }

  .points {
    margin-top: 32px;
  }

  .cases {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .cta {
    padding-bottom: 64px;
  }

  .cta-card {
    padding: 32px 20px;
  }

  .cta-row .btn {
    flex: 1 1 auto;
  }

  .foot-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .foot .lockup {
    margin-bottom: 4px;
  }

  .foot-nav {
    row-gap: 0;
    margin-left: 0;
  }

  .foot-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .foot-motion {
    height: 44px;
    padding: 0 16px 0 14px;
  }
}

@media (max-width: 520px) {
  /* The top bar keeps the wordmark, the language switch and the primary button. Sign-in stays in the closing
     CTA and the footer (the primary button leads to the same sign-in page). */
  .top-signin {
    display: none;
  }
}

@media (max-width: 420px) {
  .top .lockup {
    --mark: 18px;
  }

  .top .btn-key {
    padding: 0 12px;
  }

  .how-card {
    padding: 24px 16px;
  }
}

@media (max-width: 374px) {
  .top .btn {
    font-size: 14px;
  }

  /* The request card reaches the stage's right edge here: lift the stop button into the gap above it */
  .motion-btn {
    top: -22px;
  }

  .top .btn-quiet {
    padding: 0 6px;
  }

  .top .btn-key {
    padding: 0 10px;
  }
}

@media (max-width: 359px) {
  /* Too narrow for three items: the language switch stays in the footer */
  .top-lang {
    display: none;
  }
}