/* Design C, "Try it" (SPEC-044): the home page at / and the one crawlers, link
   previews and the static fallback get. The fonts come from /fonts.css.

   Site rules this file keeps (SPEC-035 / SPEC-044): nothing is position: fixed
   (the menu bar is sticky and the notch hangs from it; the ghost cursor and the
   skip link are absolute), and every animation is transform / opacity work that
   pauses off-screen. */

:root {
  --ink: #0e0e14;
  --text: #f4f4f8;
  --text-2: rgba(235, 235, 245, 0.76);
  --text-3: rgba(235, 235, 245, 0.62);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --value-rgb: 255 100 130;  /* raspberry - the value you copied */
  --match-rgb: 255 214 10;   /* lemon     - the moment it matches */
  --field-rgb: 94 158 255;   /* blueberry - the field it belongs in */
  --value: rgb(var(--value-rgb));
  --match: rgb(var(--match-rgb));
  --field: rgb(var(--field-rgb));
  --value-soft: color-mix(in srgb, var(--value) 72%, #fff);
  --field-soft: color-mix(in srgb, var(--field) 62%, #fff);
  --lime: #30d158;
  --card: #26262d;
  --cardstroke: rgba(255, 255, 255, 0.08);
  --display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
  --body: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bar-h: 38px;
  --notch-w: 188px;
  --shell: 1240px;
  --pad-x: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ink); color: var(--text); -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--ink); padding: 8px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 52px; }
.shell { width: min(100% - 2 * var(--pad-x), var(--shell)); margin-inline: auto; }
.mark { display: block; flex: none; }

/* ================================================================ menu bar ==
   The nav is a macOS menu bar, sticky rather than fixed (nothing on the site is
   position: fixed). Its negative bottom margin takes it out of the flow, so the
   hero still starts under it at the top of the page. The notch is its absolute
   child and hangs from it. */
.menubar {
  position: sticky; top: 0; z-index: 50; height: var(--bar-h); margin-bottom: calc(-1 * var(--bar-h));
  display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--notch-w) + 36px) minmax(0, 1fr);
  align-items: center; padding: 0 12px;
  background: rgba(42, 42, 56, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--body);
}
.menubar__side { display: flex; align-items: center; gap: 2px; min-width: 0; }
.menubar__side--right { justify-content: flex-end; grid-column: 3; }
.brand { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; text-decoration: none; font: 700 15.5px/1 var(--display); letter-spacing: -0.01em; border-radius: 7px; }
.menubar a.mlink { padding: 5px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.menubar a.mlink:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.bar-cta { margin-left: 8px; display: inline-flex; align-items: center; height: 26px; padding: 0 13px; border-radius: 13px; background: var(--text); color: var(--ink); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.15s; }
.bar-cta:hover { background: #fff; }
/* the on-device claim: a menu-bar status item; short below 1240, out of sight below 700 */
.nav__claim { display: inline-flex; align-items: center; gap: 6px; margin: 0 2px 0 10px; font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.nav__claim svg { flex: none; color: var(--lime); }
.nav__claim-short { display: none; }

/* ==================================================================== notch ==
   The closed notch (__base) is always drawn at its exact size. The open island
   (__bg) is drawn at full size and SCALED down onto it, so opening and closing
   are transform + opacity only: compositor work, never a clip-path or a resize
   repainted on the main thread (a clip-path transition cost frames mid-scroll).
   --csx / --csy (closed size / open size) come only from notchScale() in
   main.js, read from the layout at every breakpoint; with JS off the notch
   never opens.
   The hints open it at every width; the offer only above 600px, where it hangs
   from the bar (at 600 and below .offer shows it above the field instead). */
.notch {
  --isl-w: 420px; --isl-h: 94px;
  position: absolute; z-index: 1;
  top: var(--vv, 0px); left: calc(50% - var(--isl-w) / 2);
  width: var(--isl-w); height: var(--isl-h);
  pointer-events: none;
}
.notch__base { position: absolute; top: 0; left: calc(50% - var(--notch-w) / 2); width: var(--notch-w); height: var(--bar-h); background: #000; border-radius: 0 0 12px 12px; }
.notch__bg {
  position: absolute; inset: 0; overflow: hidden; background: #000; border-radius: 0 0 26px 26px;
  transform-origin: 50% 0; transform: scale(var(--csx), var(--csy)); opacity: 0;
  transition: transform 0.34s var(--ease-out), opacity 0s linear 0.34s;
}
.notch[data-state="hint"] .notch__bg {
  transform: none; opacity: 1;
  transition: transform 0.56s var(--ease-out), opacity 0s;
}
.notch__glow { position: absolute; inset: 0; background: radial-gradient(70% 130% at 50% 110%, rgb(var(--match-rgb) / 0.3), transparent 70%); opacity: 0; transition: opacity 0.4s; }
.offer[data-state="done"] .notch__glow { opacity: 1; }
.notch__panel {
  position: absolute; left: 0; right: 0; top: var(--bar-h); bottom: 0;
  display: flex; align-items: center; gap: 12px; padding: 0 22px 4px;
  opacity: 0; visibility: hidden; transition: opacity 0.14s, visibility 0s linear 0.14s;
  pointer-events: auto;
}
.notch[data-state="hint"] .notch__hint { opacity: 1; visibility: visible; transition: opacity 0.3s 0.14s, visibility 0s; }
@media (min-width: 601px) {
  .notch[data-state="offer"] .notch__bg, .notch[data-state="done"] .notch__bg {
    transform: none; opacity: 1;
    transition: transform 0.56s var(--ease-out), opacity 0s;
  }
  .notch[data-state="done"] .notch__glow { opacity: 1; }
  .notch[data-state="offer"] .notch__offer,
  .notch[data-state="done"] .notch__offer { opacity: 1; visibility: visible; transition: opacity 0.3s 0.14s, visibility 0s; }
}
.notch__offer { appearance: none; border: 0; margin: 0; background: transparent; text-align: left; cursor: pointer; width: 100%; border-radius: 0 0 26px 26px; }
.notch__offer:hover { background: rgba(255, 255, 255, 0.05); }
.notch__offer:focus-visible { outline: 2px solid var(--field); outline-offset: -5px; border-radius: 0 0 24px 24px; }
.notch__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.notch__label { font: 500 10px/1.45 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(235, 235, 245, 0.64); }
.notch__value { font: 500 15px/1.35 var(--system); color: var(--value); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notch__text { font: 500 14px/1.35 var(--system); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notch__arrow { font: 600 16px/1 var(--system); color: var(--text-3); }
.notch[data-state="hint"] .notch__arrow { animation: nudge 1.2s var(--ease) infinite; }
.notch[data-hint="copy"] .notch__arrow { display: none; }
.notch__keys { display: flex; gap: 4px; transition: opacity 0.2s; }
.kbd, .notch__keys kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 6px; background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.16); border-bottom-width: 2px;
  font: 500 11.5px/1 var(--system); color: var(--text);
}
.notch__tap { display: none; font: 600 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--value); padding: 6px 9px; border-radius: 999px; transition: opacity 0.2s; }
.notch__check { position: absolute; right: 22px; top: 50%; margin-top: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--match); color: var(--ink); display: grid; place-items: center; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.4s var(--pop); }
:is(.notch, .offer)[data-state="done"] .notch__check { opacity: 1; transform: none; }
:is(.notch, .offer)[data-state="done"] :is(.notch__keys, .notch__tap) { opacity: 0; }
.lbl-done { display: none; color: var(--match); }
:is(.notch, .offer)[data-state="done"] .lbl-fill { display: none; }
:is(.notch, .offer)[data-state="done"] .lbl-done { display: inline; }
@media (pointer: coarse) { .notch__keys { display: none; } .notch__tap { display: inline-block; } }

/* ============================================================ inline offer ==
   600px and below: the offer pops up directly above the focused email field, as
   the notch's black island, because a phone's keyboard would hide the top bar.
   Absolute, so the form never moves under the caret. */
.offer { display: none; }
@media (max-width: 600px) {
  .offer {
    position: absolute; z-index: 3; left: -4px; right: -4px; bottom: calc(100% + 8px);
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 7px 16px 7px 18px; overflow: hidden;
    appearance: none; margin: 0; border: 0; border-radius: 20px; background: #000; color: var(--text); text-align: left; cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 36px -14px rgba(0, 0, 0, 0.9);
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.94); transform-origin: 50% 100%;
    transition: opacity 0.16s, transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .offer[data-state="offer"], .offer[data-state="done"] { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.42s var(--ease-out), visibility 0s; }
  .offer:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; border-radius: 20px; }
  .offer > :not(.notch__glow) { position: relative; }
  .offer .notch__check { position: absolute; right: 16px; }
  /* the island in the bar never opens for the offer here, and its button is out of reach */
  .notch__offer { display: none; }
  .field { position: relative; }
}
.only-narrow { display: none; }
@media (max-width: 600px) { .only-narrow { display: inline; } .only-wide { display: none; } }

/* ==================================================================== ghost ==
   The idle demo pointer, absolute in the hero (which clips it, so it never
   widens the page). Positioned with a CSS transition on transform; JS only
   writes --gx / --gy (hero coordinates) and classes. */
.ghost { position: absolute; left: 0; top: 0; z-index: 80; pointer-events: none; opacity: 0; transform: translate(var(--gx, -80px), var(--gy, -80px)); transition: transform 0.95s cubic-bezier(0.45, 0.05, 0.2, 1), opacity 0.3s; }
.ghost.is-jump { transition: opacity 0.3s; }
.ghost.is-on { opacity: 1; }
.ghost svg { position: absolute; left: -3px; top: -2px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); transform-origin: 3px 2px; }
.ghost.is-click svg { animation: press 0.32s var(--ease); }
.ghost__ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); opacity: 0; }
.ghost.is-click .ghost__ring { animation: ring-out 0.55s ease-out; }
.ghost__tag { position: absolute; left: 20px; top: 22px; font: 600 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); background: rgba(14, 14, 20, 0.88); border: 1px solid var(--line-2); padding: 5px 7px; border-radius: 6px; white-space: nowrap; }

/* ===================================================================== hero == */
.hero { position: relative; overflow: hidden; overflow: clip; padding: calc(var(--bar-h) + clamp(44px, 8vh, 92px)) 0 clamp(72px, 10vh, 120px); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(48% 60% at 80% 34%, rgb(var(--field-rgb) / 0.16), transparent 70%),
    radial-gradient(38% 40% at 62% 4%, rgb(var(--value-rgb) / 0.13), transparent 70%),
    radial-gradient(26% 26% at 8% 66%, rgb(var(--match-rgb) / 0.05), transparent 70%); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: clamp(36px, 5vw, 76px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); font: 500 12.5px/1 var(--mono); letter-spacing: 0.03em; color: var(--text-2); }
h1 { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-size: clamp(42px, 4.75vw, 74px); line-height: 0.98; letter-spacing: -0.032em; margin: 22px 0 24px; }
h1 em { font-style: normal; }
.h1-a, .h1-b { display: block; }
.h1-a { color: rgba(235, 235, 245, 0.6); }
.h1-a em { color: var(--value); }
.h1-b em { color: var(--field); }
.lede { font-size: clamp(17px, 1.32vw, 19.5px); line-height: 1.55; color: var(--text-2); max-width: 33em; margin: 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 32px 0 20px; }
/* Hover on anything in the page flow is INSTANT, with no lift: as the page
   scrolls under a still pointer, hover comes and goes, and a transition there
   (a transform re-layering a full-width button, or a background repainting it
   for 0.2 s) dropped frames mid-scroll. One repaint is free; twelve are not. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0 24px; border-radius: 999px; font: 600 15.5px/1 var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn--primary { background: var(--text); color: var(--ink); box-shadow: 0 14px 34px -14px rgba(255, 255, 255, 0.45); }
.btn--primary:hover { background: #fff; }
.btn--ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn--block { width: 100%; }
.textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15.5px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line-2); padding: 4px 0; }
.textlink:hover { border-color: var(--text); }
.req { margin: 0; font-size: 13.5px; color: var(--text-3); }

/* ---------------------------------------------------------- the stage ----- */
.stage { position: relative; isolation: isolate; }
.aurora { position: absolute; inset: -22% -24% -20% -22%; z-index: -1; pointer-events: none; }
.aurora__glow { position: absolute; inset: 0;
  background:
    radial-gradient(30% 28% at 68% 22%, rgb(var(--value-rgb) / 0.55), transparent 72%),
    radial-gradient(24% 26% at 20% 50%, rgb(var(--match-rgb) / 0.32), transparent 72%),
    radial-gradient(36% 22% at 62% 80%, rgb(var(--field-rgb) / 0.58), transparent 72%); }
.slab { position: absolute; border-radius: 999px; }
.slab--r { width: 37%; height: 13%; top: 9%; right: 10%; background: linear-gradient(120deg, #ff8da3, #ff4f74 70%); rotate: -11deg; }
.slab--y { width: 33%; height: 13%; top: 44%; left: 10%; background: linear-gradient(120deg, #ffe76b, #ffc400 70%); rotate: 9deg; }
.slab--b { width: 47%; height: 15%; bottom: 9%; right: 15%; background: linear-gradient(120deg, #8fbcff, #3d82ff 70%); rotate: -5deg; }
.aurora.is-live .slab--r { animation: drift-a 14s ease-in-out infinite alternate; }
.aurora.is-live .slab--y { animation: drift-b 17s ease-in-out infinite alternate; }
.aurora.is-live .slab--b { animation: drift-a 19s ease-in-out -6s infinite alternate-reverse; }

/* ------------------------------------------------------- the playground --- */
.playground {
  position: relative; container: playground / inline-size; border-radius: 26px; padding: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 38%), rgba(18, 18, 28, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(28px) saturate(175%); backdrop-filter: blur(28px) saturate(175%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 50px 90px -40px rgba(0, 0, 0, 0.85);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .playground { background: rgba(26, 26, 38, 0.94); }
}
.pg-demo { position: absolute; left: 50%; top: calc(100% + 14px); translate: -50% 0; white-space: nowrap; font: 500 12.5px/1 var(--body); color: var(--text); background: rgba(14, 14, 20, 0.8); border: 1px solid var(--line-2); padding: 8px 12px; border-radius: 999px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
body.is-demo .pg-demo { opacity: 1; }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 0 2px 10px 6px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.steps li { --c: var(--value); --c-rgb: var(--value-rgb); display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text-3); transition: color 0.25s; }
.steps li:nth-child(2) { --c: var(--field); --c-rgb: var(--field-rgb); }
.steps li:nth-child(3) { --c: var(--match); --c-rgb: var(--match-rgb); }
.steps li + li::before { content: ""; width: 16px; height: 1.5px; border-radius: 1px; background: rgba(255, 255, 255, 0.22); margin-right: 1px; }
.steps__n { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px/1 var(--mono); color: var(--c); border: 1.5px solid var(--c); transition: background 0.25s, color 0.25s; }
.steps__n svg { display: none; }
.steps li[data-state="current"] { color: var(--text); }
.steps li[data-state="current"] .steps__n, .steps li[data-state="done"] .steps__n { background: var(--c); color: var(--ink); }
.steps li[data-state="current"] .steps__n::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--c); animation: ring-pulse 1.8s ease-out infinite; }
.steps li[data-state="done"] .steps__d { display: none; }
.steps li[data-state="done"] .steps__n svg { display: block; }
.steps li[data-state="done"] { color: var(--text-2); }
.pg-reset { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05); font-size: 12.5px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.pg-reset:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }

.copyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 10px; }
.chip { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 3px; min-width: 0; padding: 8px 8px 8px 14px; border-radius: 16px; background: rgb(var(--value-rgb) / 0.12); border: 1px solid rgb(var(--value-rgb) / 0.36); }
.chip__type { grid-column: 1; grid-row: 1; align-self: end; font: 500 9.5px/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.chip__value { grid-column: 1; grid-row: 2; align-self: start; min-width: 0; font: 500 15px/1.3 var(--system); color: var(--value-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-btn { grid-column: 2; grid-row: 1 / 3; position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 100px; gap: 7px; height: 38px; padding: 0 15px; border-radius: 11px; border: 0; background: var(--value); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.15s var(--ease), background 0.25s, color 0.25s; }
.copy-btn:active { transform: scale(0.95); }
.copy-btn svg { flex: none; }
.copy-btn .ic-check { display: none; }
.copy-btn.is-copied { background: rgba(255, 255, 255, 0.14); color: var(--text); }
.copy-btn.is-copied .ic-copy { display: none; }
.copy-btn.is-copied .ic-check { display: block; }
.playground[data-step="1"] .copy-btn::after { content: ""; position: absolute; inset: -5px; border-radius: 15px; border: 2px solid var(--value); animation: ring-pulse 1.8s ease-out infinite; }
/* main.js marks the playground is-off while it is off screen: its two ring pulses stop */
.playground.is-off .steps li .steps__n::after, .playground.is-off .copy-btn::after { animation-play-state: paused; }
.bubble { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 4px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--text); color: var(--ink); padding: 5px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.25s, translate 0.3s var(--ease-out); }
.bubble::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--text); }
.copy-btn.is-yourturn .bubble { opacity: 1; translate: -50% 0; }

.tray { --mini-w: 80px; width: calc(3 * var(--mini-w) + 2 * 6px + 16px); padding: 7px 8px 8px; border-radius: 14px; background: rgba(60, 60, 71, 0.64); border: 1px solid rgba(255, 255, 255, 0.1); }
.tray__label { display: flex; justify-content: space-between; margin: 0 2px 5px; font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.tray__cards { position: relative; height: 50px; margin: 0; padding: 0; list-style: none; overflow-x: clip; }
.mini { --i: 0; position: absolute; left: 0; top: 0; width: var(--mini-w); height: 50px; padding: 6px 7px; border-radius: 9px; background: var(--card); border: 1px solid var(--cardstroke); transform: translateX(calc(var(--i) * (var(--mini-w) + 6px))); transition: transform 0.5s var(--ease-out), opacity 0.3s; }
.mini[data-i="1"] { --i: 1; }
.mini[data-i="2"] { --i: 2; }
.mini[data-i="3"] { --i: 3; opacity: 0; }
.mini__type { display: block; font: 500 8.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.mini__val { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font: 500 10.5px/1.25 var(--system); color: var(--text-2); overflow-wrap: anywhere; }
.mini--new { border-color: rgb(var(--value-rgb) / 0.55); background: linear-gradient(rgb(var(--value-rgb) / 0.16), rgb(var(--value-rgb) / 0.06)), var(--card); animation: drop-in 0.64s var(--pop) backwards; }
.mini--new .mini__val { color: var(--value-soft); }
.mini--new.is-bump { animation: bump 0.4s var(--pop); }

/* a narrow playground stacks the chip over the tray */
@container playground (max-width: 560px) {
  .copyrow { grid-template-columns: minmax(0, 1fr); }
  .tray { width: auto; --mini-w: calc((100cqw - 18px - 12px) / 3); }
}

/* the browser window holding the real sign-up form */
.browser, .perm__pane { border-radius: 15px; overflow: hidden; background: rgba(17, 17, 25, 0.9); border: 1px solid rgba(255, 255, 255, 0.11); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8); }
.browser__bar, .perm__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: rgba(255, 255, 255, 0.045); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.browser__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.17); }
.browser__url { flex: 0 1 260px; margin: 0 auto; translate: -18px 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); font: 400 11.5px/1 var(--system); color: var(--text-3); }
.signup { padding: 16px 20px 18px; display: grid; gap: 11px; }
.signup h3 { margin: 0 0 2px; font: 600 17px/1.3 var(--system); letter-spacing: -0.012em; }
.field-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; }
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.field label { font: 500 12.5px/1.3 var(--system); color: var(--text-2); white-space: nowrap; }
.field__box { position: relative; height: 38px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.13); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.field__box:focus-within, .field.is-ghost-focus .field__box { border-color: var(--field); background: rgb(var(--field-rgb) / 0.07); box-shadow: 0 0 0 3px rgb(var(--field-rgb) / 0.3); }
.field input { appearance: none; display: block; width: 100%; height: 100%; margin: 0; padding: 0 34px 0 12px; border: 0; background: transparent; outline: none; color: var(--text); font: 400 14.5px/1 var(--system); }
.field input::placeholder { color: rgba(235, 235, 245, 0.5); }
.field.is-ghost-focus .field__box::before { content: ""; position: absolute; left: 12px; top: 10px; width: 1.5px; height: 17px; background: var(--field); animation: caret 1s steps(1) infinite; }
.field.is-ghost-focus.is-filled .field__box::before { display: none; }
.field__sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 46%; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(var(--match-rgb) / 0.42), transparent); transform: translateX(-110%); }
.field.is-paste .field__sweep { animation: sweep 0.7s var(--ease) both; }
.field.is-paste input { animation: reveal 0.55s var(--ease) both; }
.field.is-match .field__box { animation: match 1.15s ease-out; }
.field__tick { position: absolute; right: 9px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--value); color: var(--ink); display: grid; place-items: center; opacity: 0; transform: scale(0.3); transition: opacity 0.2s, transform 0.4s var(--pop); pointer-events: none; }
.field.is-filled .field__tick { opacity: 1; transform: none; }
.field__hint { font: 500 11.5px/1.3 var(--system); color: var(--text-3); white-space: nowrap; }
.field__hint > span { display: none; align-items: center; gap: 5px; }
.field[data-hint="from"] [data-k="from"], .field[data-hint="offer"] [data-k="offer"], .field[data-hint="copy"] [data-k="copy"] { display: inline-flex; animation: fade-up 0.3s var(--ease-out); }
[data-k="from"] { color: var(--text-2); }
[data-k="from"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--value); }
[data-k="offer"] { color: var(--field-soft); }
.up { display: inline-block; animation: nudge-up 1.1s var(--ease) infinite; }
.only-touch { display: none; }
@media (pointer: coarse) { .only-touch { display: inline; } .only-fine { display: none; } }
.continue { margin-top: 5px; height: 40px; border-radius: 10px; border: 0; background: var(--field); color: var(--ink); font: 600 14.5px/1 var(--system); cursor: pointer; }
.toast { margin: 0; font-size: 12.5px; color: var(--text-2); text-align: center; min-height: 0; }

.pg-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; padding: 2px 4px 0 6px; }
.pg-foot p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.fillall-btn { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 14px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.1); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.fillall-btn:hover { background: rgba(255, 255, 255, 0.16); }
.keys { display: inline-flex; gap: 3px; }
@media (pointer: coarse) { .keys { display: none; } .fillall-btn { padding-right: 14px; } }

/* ================================================================ Fill All ==
   A modal <dialog>: it sits in the top layer, positioned by the browser's own
   dialog:modal rule; JS only writes --sx / --sy. */
.sheet {
  inset: auto; margin: 0; left: var(--sx, 50%); top: var(--sy, 20%);
  width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 18px; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(26, 26, 36, 0.74);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 40px 90px -24px rgba(0, 0, 0, 0.85);
}
.sheet[open] { animation: sheet-in 0.36s var(--ease-out); }
.sheet::backdrop { background: rgba(6, 6, 12, 0.42); }
.sheet__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 2px; }
.sheet__head h2 { margin: 0; font: 600 16px/1.3 var(--system); }
.sheet__count { margin-left: auto; font: 500 11.5px/1 var(--mono); color: var(--text-2); background: rgba(255, 255, 255, 0.08); padding: 5px 8px; border-radius: 999px; }
.sheet__site { margin: 0; padding: 0 18px 10px 46px; font: 400 11.5px/1.3 var(--mono); color: var(--text-3); }
.sheet__rows { list-style: none; margin: 0; padding: 4px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.srow { position: relative; display: grid; grid-template-columns: 20px minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: center; gap: 12px; padding: 10px; border-radius: 10px; cursor: pointer; }
.srow:hover { background: rgba(255, 255, 255, 0.05); }
.srow input { position: absolute; left: 10px; top: 50%; margin: -10px 0 0; width: 20px; height: 20px; opacity: 0; cursor: pointer; }
.srow__box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, 0.35); display: grid; place-items: center; color: transparent; transition: background 0.15s, border-color 0.15s; }
.srow input:checked + .srow__box { background: var(--field); border-color: var(--field); color: var(--ink); }
.srow input:focus-visible + .srow__box { outline: 2px solid var(--field-soft); outline-offset: 2px; }
.srow__field { font: 500 13px/1.3 var(--system); color: var(--field-soft); }
.srow__value { font: 500 14px/1.3 var(--system); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow:has(input:not(:checked)) .srow__field, .srow:has(input:not(:checked)) .srow__value { opacity: 0.55; }
.srow.is-off { cursor: default; }
.srow.is-off:hover { background: transparent; }
.srow.is-off .srow__field, .srow.is-off .srow__value { color: var(--text-3); opacity: 1; }
.srow.is-off .srow__value { font-style: italic; }
.srow.is-off .srow__box { border-style: dashed; border-color: rgba(255, 255, 255, 0.25); }
.sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 14px 18px; flex-wrap: wrap; }
.sheet__foot p { margin: 0; font-size: 13px; color: var(--text-2); }
.sheet__btns { display: flex; gap: 8px; margin-left: auto; }
.sbtn { height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.08); font: 600 13.5px/1 var(--system); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.sbtn--go { background: var(--field); border-color: transparent; color: var(--ink); }
.sbtn--go kbd { font: 500 11px/1 var(--system); background: rgba(14, 14, 20, 0.16); padding: 3px 5px; border-radius: 5px; }
.sbtn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ================================================================ sections == */
section { position: relative; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
h2 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -0.028em; margin: 14px 0 0; text-wrap: balance; }
.sub { font-size: clamp(16.5px, 1.25vw, 18.5px); color: var(--text-2); max-width: 36em; margin: 18px 0 0; }

/* how it works */
.how { padding: clamp(84px, 12vh, 140px) 0 clamp(40px, 6vh, 72px); }
.how__steps { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.how__step { --c: var(--value); --c-rgb: var(--value-rgb); position: relative; padding: 26px 24px 28px; border-radius: 22px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); transition: border-color 0.4s, background 0.4s; }
.how__step:nth-child(2) { --c: var(--field); --c-rgb: var(--field-rgb); }
.how__step:nth-child(3) { --c: var(--match); --c-rgb: var(--match-rgb); }
.how__step[data-done] { border-color: rgb(var(--c-rgb) / 0.4); background: rgb(var(--c-rgb) / 0.05); }
.how__n { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--c); color: var(--ink); font: 800 21px/1 var(--display); }
.how__step h3 { margin: 22px 0 8px; font: 600 20px/1.25 var(--body); letter-spacing: -0.012em; }
.how__step p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.how__done { position: absolute; top: 30px; right: 22px; display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--mono); color: var(--c); background: rgb(var(--c-rgb) / 0.13); padding: 6px 9px; border-radius: 999px; opacity: 0; translate: 0 -4px; transition: opacity 0.35s, translate 0.35s var(--ease-out); }
.how__step[data-done] .how__done { opacity: 1; translate: 0 0; }

/* autofill */
.auto { padding: clamp(40px, 6vh, 72px) 0 clamp(84px, 12vh, 140px); }
.auto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.auto__more { margin: 18px 0 26px; color: var(--text-2); max-width: 34em; }
.roles { position: relative; display: flex; flex-wrap: wrap; gap: 10px; padding: 30px; border-radius: 26px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.role { padding: 9px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-2); background: rgb(var(--field-rgb) / 0.06); border: 1px solid rgb(var(--field-rgb) / 0.18); }
.role--in { color: var(--text); background: rgb(var(--field-rgb) / 0.16); border-color: rgb(var(--field-rgb) / 0.6); }
.roles__note { width: 100%; margin: 8px 0 0; font: 400 12.5px/1.4 var(--mono); color: var(--text-3); }

/* clipboard: the real Cmd+D panel, flat and to scale (SPEC-025, its DARK values;
   CSS px = pt). One row of 188 cards on the panel's glass, 12 apart. The strip
   is a plain native scroller: no perspective, no snap, no scroll handler, no
   per-card filter or blur. The edge fades are overlays (a mask would clip the
   keyboard focus ring), and they sit over the panel's gutter, so they only
   show once a card scrolls into it. */
.cb { padding: clamp(84px, 12vh, 140px) 0; overflow: hidden; overflow: clip; }
.cb::before { content: ""; position: absolute; inset: 10% 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 36% at 18% 56%, rgb(var(--value-rgb) / 0.3), transparent 70%),
    radial-gradient(28% 34% at 52% 46%, rgb(var(--match-rgb) / 0.16), transparent 70%),
    radial-gradient(32% 40% at 84% 62%, rgb(var(--field-rgb) / 0.34), transparent 70%); }
.cb__head { text-align: center; }
.cb__head .sub { margin-inline: auto; }
.cb-panel {
  /* Semantic (dark): textPrimary, textSecondary, separator, controlFill(+Hover), accentText */
  --p-text: #f4f4f8; --p-text-2: rgb(235 235 245 / 0.64); --p-sep: rgb(255 255 255 / 0.09);
  --p-ctl: rgb(255 255 255 / 0.09); --p-ctl-hover: rgb(255 255 255 / 0.13); --p-accent: #78aeff;
  --p-tint: rgb(28 28 35 / 0.86);  /* panelTint #1c1c23, inside its 0.60-0.95 range */
  --p-gutter: 32px;                 /* 18 panel padding + 14 row inset */
  position: relative; margin: 52px auto 0; max-width: 1180px; padding: 17px 18px 20px; border-radius: 24px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.045), transparent 34%), var(--p-tint);
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 40px 80px -44px rgb(0 0 0 / 0.9);
  font-family: var(--body); color: var(--p-text);
}
/* the one header line: search field, folder pills, settings gear */
.cb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-height: 35px; padding: 2px 4px 0; }
.cb-search { display: flex; align-items: center; gap: 6px; flex: 1 1 300px; min-width: 300px; max-width: 420px; height: 32px; padding: 0 4px 0 10px; border-radius: 10px; background: rgb(42 42 50 / 0.85); border: 1px solid rgb(255 255 255 / 0.05); color: var(--p-text-2); transition: border-color 0.18s, box-shadow 0.18s; }
.cb-search:focus-within { border-color: var(--field); box-shadow: 0 0 0 3px rgb(var(--field-rgb) / 0.32); }
.cb-search svg { flex: none; }
.cb-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none; font: 400 13.5px/1 var(--body); color: var(--p-text); text-overflow: ellipsis; }
.cb-search input::placeholder { color: rgb(235 235 245 / 0.56); }
.cb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cb-tagbtn { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--p-ctl); color: var(--p-text); }
.pills { display: flex; gap: 3px; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 0 13px; border: 0; border-radius: 10px; background: transparent; font: 500 13.5px/1 var(--body); color: var(--p-text); white-space: nowrap; cursor: pointer; }
.pill:hover { background: var(--p-ctl); }
.pill[aria-pressed="true"] { font-weight: 600; background: var(--p-ctl-hover); }
.pill:focus-visible { outline-offset: 1px; border-radius: 10px; }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.cb-gear { margin-left: auto; padding: 6px; color: var(--p-text); display: grid; }
/* the strip */
.cb-strip { position: relative; margin: 18px -18px 0; }
.cb-strip::before, .cb-strip::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: var(--p-gutter); pointer-events: none; }
.cb-strip::before { left: 0; background: linear-gradient(90deg, var(--p-tint) 25%, rgb(28 28 35 / 0)); }
.cb-strip::after { right: 0; background: linear-gradient(270deg, var(--p-tint) 25%, rgb(28 28 35 / 0)); }
/* keyboard focus on the row: its own ring, above the fades (which would dim an outline) */
.cb-focus { position: absolute; z-index: 3; inset: 1px 8px 12px; border: 2px solid var(--field); border-radius: 22px; opacity: 0; pointer-events: none; }
.cb-row:focus-visible ~ .cb-focus { opacity: 1; }
.cb-row {
  display: flex; gap: 12px; margin: 0; padding: 14px var(--p-gutter) 26px; list-style: none;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-padding-inline: var(--p-gutter);
  scrollbar-width: none; outline: none;
}
.cb-row::-webkit-scrollbar { display: none; }
.clip { --c: var(--p-text-2); position: relative; flex: none; width: 188px; height: 188px; border-radius: 17px; outline: 2.5px solid transparent; outline-offset: 2px; }
.clip__card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: inherit;
  background: rgb(42 42 50 / 0.94); border: 1px solid rgb(255 255 255 / 0.05); box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
  contain: layout paint; transition: transform 0.18s ease-out;
}
@media (hover: hover) {
  .cb-row:hover .clip__card { will-change: transform; }
  .clip:hover .clip__card { transform: translateY(-2px); }
}
/* selected: a 2.5 accentText ring 2 outside the card and a 3 lift, instantly (no animation) */
.clip[aria-selected="true"] { transform: translateY(-3px); outline-color: var(--p-accent); z-index: 1; }
.clip[aria-selected="true"] .clip__card { transform: none; transition: none; box-shadow: 0 6px 18px rgb(0 0 0 / 0.5); }
.cb-row:focus-visible .clip[aria-selected="true"] { outline-width: 3px; }
.t-email { --c: #ff7a96; } .t-link { --c: #6ea6ff; } .t-address { --c: #3fd46a; } .t-number { --c: #c77dff; } .t-text { --c: #a4aab3; }
.clip--suggest { --c: var(--p-accent); }
.clip--suggest .clip__card { background: linear-gradient(rgb(94 158 255 / 0.18), rgb(94 158 255 / 0.18)), #2a2a33; border-color: rgb(94 158 255 / 0.35); }
.clip__type { flex: none; display: flex; align-items: center; gap: 6px; height: 30px; padding: 4px 13px 0; color: var(--c); }
.clip__type svg { flex: none; }
.clip__word { font: 600 11.5px/1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip__time { margin-left: auto; padding-left: 6px; font: 500 11px/1 var(--body); color: var(--p-text-2); white-space: nowrap; }
.clip__x { margin-left: auto; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--p-ctl); color: var(--p-text-2); }
.clip__caption { margin: 0; padding: 0 13px; font: 400 11px/1.3 var(--body); color: var(--p-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 13px 4px; }
.clip__body > * { margin: 0; }
.clip__prose { font: 400 13.5px/18.6px var(--body); color: var(--p-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 6); overflow: hidden; overflow-wrap: anywhere; }
.clip__email { margin-block: auto; font: 500 15px/1.3 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip__phone { margin-block: auto; font: 500 20px/1.2 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clip__ltitle { font: 600 14px/18.5px var(--body); color: var(--p-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.clip__host { display: flex; align-items: center; gap: 5px; margin-top: 6px !important; font: 500 12px/1.25 var(--body); color: var(--c); white-space: nowrap; }
.clip__path { margin-top: 6px !important; font: 400 11px/1.3 var(--body); color: var(--p-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip__tags { flex: none; display: flex; align-items: center; gap: 5px; height: 22px; margin-bottom: 2px; padding: 0 13px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: rgb(var(--t) / 0.2); font: 600 10.5px/1.2 var(--body); color: var(--p-text); white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--t)); }
.clip__foot { flex: none; display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 13px; border-top: 1px solid var(--p-sep); font: 500 11px/1 var(--body); color: var(--p-text-2); white-space: nowrap; }
.app { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: var(--p-ctl); font: 600 8.5px/1 var(--body); color: var(--p-text-2); }
.clip__folder { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.clip__folder::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.keycap { margin-left: auto; padding: 2px 6px; border-radius: 5px; background: var(--p-ctl); font: 600 10.5px/1.3 var(--body); color: var(--p-text); }
.cb-div { flex: none; align-self: center; width: 1px; height: 124px; background: var(--p-sep); }
.cb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 228px; margin: 0; color: var(--p-text-2); }
.cb-empty p { margin: 0; font: 500 14px/1.3 var(--body); color: var(--p-text); }
/* under the panel: the buttons scroll the strip by whole cards */
.cb-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.cb-nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.07); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.cb-nav:hover { background: rgba(255, 255, 255, 0.14); }
.cb-nav[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.cb-nav[aria-disabled="true"]:hover { background: rgba(255, 255, 255, 0.07); }
.cb-foot p { margin: 0; font: 400 12.5px/1 var(--mono); color: var(--text-3); }

/* privacy */
.priv { padding: 0 0 clamp(84px, 12vh, 140px); }
.priv__grid { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.priv__grid li { padding: 22px 20px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.priv__grid svg { display: block; margin-bottom: 16px; color: var(--text-2); }
.priv__grid h3 { margin: 0; font: 600 15.5px/1.4 var(--body); }
.priv__grid p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.path { display: block; margin: 8px 0; font: 400 11.5px/1.4 var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
.priv__more { margin: 28px 0 0; font-size: 15.5px; color: var(--text-2); }
/* links inside running text: underlined, so they never rely on colour alone */
.priv__more a, .perm a, .faq__a a, .ticks a { color: var(--text); text-decoration: underline; text-decoration-color: rgb(var(--field-rgb) / 0.7); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.priv__more a:hover, .perm a:hover, .faq__a a:hover, .ticks a:hover { text-decoration-color: currentColor; }
.perm kbd { font: 500 0.82em/1 var(--system); display: inline-block; min-width: 1.6em; padding: 2px 5px; margin: 0 1px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); border-bottom-width: 2px; color: var(--text); text-align: center; }

/* the Accessibility explainer, beside a drawing of the one switch it is about */
.perm { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 44px; padding: clamp(22px, 3vw, 38px); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line-2); }
.perm__title { margin-left: 8px; font: 600 12.5px/1 var(--system); color: var(--text-2); }
.perm__row { display: flex; align-items: center; gap: 10px; padding: 14px; font: 500 14px/1.2 var(--system); }
.perm__switch { position: relative; margin-left: auto; width: 38px; height: 22px; border-radius: 999px; background: var(--field); }
.perm__switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.perm h3 { margin: 0 0 14px; font: 600 clamp(19px, 1.6vw, 23px)/1.3 var(--body); letter-spacing: -0.012em; }
.perm p { margin: 0 0 14px; font-size: 15.5px; color: var(--text-2); max-width: 46em; }
.perm p:last-child { margin-bottom: 0; }

/* pricing */
.pricing { padding: clamp(84px, 12vh, 140px) 0; border-top: 1px solid var(--line); }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.86fr); gap: 16px; margin-top: 48px; }
.pcard, .tool-card { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 28px; border-radius: 24px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
/* the spotlight: main.js writes --mx / --my on each card; registered as not
   inherited, so a pointer move restyles only the two pseudos that read them */
@property --mx { syntax: "<length>"; inherits: false; initial-value: -400px; }
@property --my { syntax: "<length>"; inherits: false; initial-value: -400px; }
.pcard::before, .tool-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; --mx: inherit; --my: inherit;
  background: radial-gradient(260px circle at var(--mx, -400px) var(--my, -400px), rgba(255, 255, 255, 0.85), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pcard::after, .tool-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; --mx: inherit; --my: inherit;
  background: radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(255, 255, 255, 0.055), transparent 60%); }
.pcard--pro { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)); border-color: rgba(255, 255, 255, 0.16); }
.pcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard h3, .tool-card h3 { margin: 0; font: 600 18px/1.3 var(--body); letter-spacing: -0.01em; }
.badge { font: 500 11px/1 var(--mono); letter-spacing: 0.05em; padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.badge--ok { color: var(--lime); background: rgba(48, 209, 88, 0.12); }
.badge--soon { color: var(--text-2); background: rgba(255, 255, 255, 0.07); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 22px 0 22px; }
.price__n { font: 800 54px/1 var(--display); letter-spacing: -0.03em; }
.price__s { font-size: 14.5px; color: var(--text-3); }
.ticks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; font-size: 15px; color: var(--text-2); }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.ticks svg { margin-top: 3px; }
.pcard .btn { margin-top: auto; }
.plans__tools { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.tool-card { padding: 22px 22px; justify-content: center; }
.tool-card .pcard__top { justify-content: flex-start; flex-wrap: wrap; }
.tool-card__name { white-space: nowrap; }
.tool-card .badge { margin-left: auto; }
.tool-card p { margin: 10px 0 0 38px; color: var(--text-3); font-size: 14.5px; }
.tool-card .mark { opacity: 0.85; }

/* closing */
.close { padding: clamp(100px, 16vh, 180px) 0 clamp(90px, 14vh, 160px); text-align: center; overflow: hidden; overflow: clip; }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 50% 40%, rgb(var(--field-rgb) / 0.16), transparent 70%), radial-gradient(26% 30% at 40% 28%, rgb(var(--value-rgb) / 0.14), transparent 70%); }
.stack { position: relative; width: 132px; height: 132px; margin: 0 auto 30px; }
.stack svg { position: absolute; inset: 0; }
.close h2 { font-size: clamp(40px, 6vw, 86px); max-width: 12em; margin-inline: auto; }
.close .sub { margin-inline: auto; }
.close .actions { justify-content: center; }

/* faq: the questions in a column beside the heading, each one a card that opens in place */
.faq { padding: clamp(84px, 12vh, 140px) 0; border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq__head h2 { margin-top: 14px; }
.faq__list { display: grid; gap: 10px; }
.faq__list details { border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); transition: border-color 0.25s, background 0.25s; }
.faq__list details[open] { border-color: rgb(var(--field-rgb) / 0.34); background: rgb(var(--field-rgb) / 0.045); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 18px 22px; border-radius: 18px; list-style: none; cursor: pointer; font: 600 16.5px/1.4 var(--body); letter-spacing: -0.006em; }
.faq__list summary::-webkit-details-marker { display: none; }
/* a plus that turns into a cross: two bars drawn as backgrounds, one rotation */
.faq__list summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--text-2);
  background: linear-gradient(currentColor 0 0) center / 11px 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 11px no-repeat, rgba(255, 255, 255, 0.07);
  transition: transform 0.3s var(--ease-out), background-color 0.25s; }
.faq__list details[open] summary::after { transform: rotate(45deg); color: var(--text); background-color: rgb(var(--field-rgb) / 0.22); }
.faq__list summary:hover::after { color: var(--text); }
.faq__a { padding: 0 22px 20px; }
.faq__a p { margin: 0 0 12px; max-width: 62ch; font-size: 15.5px; color: var(--text-2); }
.faq__a p:last-child { margin-bottom: 0; }

.footer { border-top: 1px solid var(--line); padding: 30px 0 40px; }
.footer__top { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.footer .brand { padding-left: 0; }
.footer__req { margin: 0; font-size: 14px; color: var(--text-3); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.footer__nav a { font-size: 14px; color: var(--text-2); text-decoration: none; }
.footer__nav a:hover { color: var(--text); text-decoration: underline; }
.footer__note { margin-top: 22px; margin-bottom: 0; font-size: 13px; color: var(--text-3); }

/* ============================================================== keyframes == */
@keyframes nudge { 50% { transform: translateY(3px); } }
@keyframes nudge-up { 50% { transform: translateY(-2px); } }
@keyframes ring-pulse { 0% { opacity: 0.85; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes ring-out { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes press { 50% { transform: scale(0.82); } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes drop-in { 0% { opacity: 0; transform: translate(0, -46px) rotate(-9deg) scale(0.8); } 55% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } }
@keyframes bump { 40% { transform: translateY(-6px) scale(1.04); } }
@keyframes sweep { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes match { 0%, 18% { border-color: var(--match); background: rgb(var(--match-rgb) / 0.13); box-shadow: 0 0 0 4px rgb(var(--match-rgb) / 0.55); } 100% { box-shadow: 0 0 0 12px rgb(var(--match-rgb) / 0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(3px); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes drift-a { to { translate: -14px 18px; rotate: -6deg; } }
@keyframes drift-b { to { translate: 18px -12px; rotate: 13deg; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise 0.6s var(--ease-out) backwards; }
  .hero__copy > :nth-child(2) { animation-delay: 0.05s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.1s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.15s; }
  .hero__copy > :nth-child(5) { animation-delay: 0.2s; }
  .stage { animation: rise 0.8s 0.1s var(--ease-out) backwards; }
}

/* Scroll-driven entrances. Without view() timelines everything is simply in
   place: the static fallback is the finished page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: enter linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .how__step:nth-child(2) { animation-range: entry 8% entry 78%; }
    .how__step:nth-child(3) { animation-range: entry 16% entry 86%; }
    .stack .s-r { animation: slab-in-l linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .stack .s-y { animation: slab-in-r linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
    .stack .s-b { animation: slab-in-l linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@keyframes enter { from { opacity: 0; transform: translateY(36px); } }
@keyframes slab-in-l { from { opacity: 0; transform: translateX(-90px) rotate(-14deg); } }
@keyframes slab-in-r { from { opacity: 0; transform: translateX(90px) rotate(12deg); } }

/* ============================================================= responsive == */
@media (max-width: 1239px) {
  .nav__claim-long { display: none; }
  .nav__claim-short { display: inline; }
}
@media (max-width: 1099px) {
  .menubar a.mlink { padding: 5px 7px; font-size: 12.5px; }
  .notch { --isl-w: 380px; }
}
@media (max-width: 999px) {
  .menubar__links { display: none; }
}
@media (max-width: 699px) {
  /* no room beside the notch: the claim stays for screen readers only */
  .nav__claim { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 979px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hero__copy { max-width: 660px; }
  .stage { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 860px) {
  .how__steps { grid-template-columns: minmax(0, 1fr); }
  .auto__grid { grid-template-columns: minmax(0, 1fr); }
  .price-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plans__tools { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .priv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perm { grid-template-columns: minmax(0, 1fr); }
  .perm__pane { width: min(100%, 340px); }
  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 639px) {
  :root { --bar-h: 46px; }
  .menubar { padding: 0 10px; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); }
  .brand { padding-left: 2px; }
  .bar-cta { margin-left: 0; padding: 0 11px; font-size: 12px; height: 28px; }
  /* the Dynamic Island: the same element, clipped to a pill */
  .notch { --isl-w: min(384px, calc(100vw - 14px)); --isl-h: 66px; top: calc(8px + var(--vv, 0px)); }
  .notch__base { left: calc(50% - 52px); width: 104px; height: 30px; border-radius: 15px; }
  .notch__bg { border-radius: 26px; }
  .notch__panel { top: 0; padding: 0 16px 0 18px; }
  .notch__offer { border-radius: 26px; }
  .notch__check { right: 16px; }
  .hero { padding-top: calc(var(--bar-h) + 36px); }
  .hero__inner { gap: 0; }
  .hero__copy { display: contents; }
  .hero__copy > .eyebrow { order: 1; justify-self: start; }
  .hero__copy > h1 { order: 2; }
  .stage { order: 3; margin: 14px 0 44px; }
  .slab--r { top: 16%; right: 4%; }
  .hero__copy > .lede { order: 4; }
  .hero__copy > .actions { order: 5; }
  .hero__copy > .req { order: 6; }
  h1 { font-size: clamp(38px, 11vw, 48px); margin: 18px 0 18px; }
  .actions { margin: 26px 0 16px; }
  .actions .btn--primary { width: 100%; }
  .playground { padding: 12px; border-radius: 22px; }
  .pg-head { padding: 2px 2px 10px; }
  .steps { gap: 4px; }
  .steps li { font-size: 12.5px; gap: 5px; }
  .steps li + li::before { width: 8px; }
  .pg-reset { position: absolute; right: 6px; bottom: calc(100% + 10px); background: rgba(14, 14, 20, 0.7); }
  .signup { padding: 14px 14px 16px; }
  .field input { font-size: 16px; }
  .browser__url { translate: -10px 0; }
  /* the panel re-composed for a phone: search on its own line, pills under it;
     the cards keep their real 188 size, so the row reads as a row to swipe */
  .cb-panel { --p-gutter: 24px; padding: 14px 12px 16px; margin-top: 40px; }
  .cb-bar { flex-wrap: wrap; gap: 8px; padding: 0; }
  .cb-search { flex: 1 1 100%; min-width: 0; max-width: none; height: 36px; }
  .cb-search input { font-size: 16px; }
  .cb-tagbtn { display: none; }
  .cb-strip { margin: 12px -12px 0; }
  .cb-row { padding: 12px var(--p-gutter) 22px; }
  .cb-gear { padding: 6px 4px; }
  .price-row, .plans__tools { grid-template-columns: minmax(0, 1fr); }
  .plans__tools { grid-column: auto; }
  .priv__grid { grid-template-columns: minmax(0, 1fr); }
  .pcard, .tool-card { padding: 24px; }
  .faq__list summary { padding: 16px 14px 16px 18px; font-size: 16px; }
  .faq__a { padding: 0 18px 18px; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__nav { margin-left: 0; }
}
@media (max-width: 349px) {
  .brand span { display: none; }
  /* a smaller button, so it clears the island */
  .bar-cta { padding: 0 8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .ghost { display: none; }
  /* the match is shown as a still state for as long as the class is on */
  .field.is-match .field__box { border-color: var(--match); box-shadow: 0 0 0 3px rgb(var(--match-rgb) / 0.5); }
}