/* Official Taps v3, color block. Rules: docs/design/design-system-v3.md */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --blue: #1f3a93; /* Card navy: the band on the physical card (Jonah's pick, 2026-10-05) */
  --ink: #0b0b0c;
  --paper: #ffffff;
  --paper-2: #f1f2f5;
  --fg: var(--ink);
  --fg-2: #4a4b55;
  --line: var(--ink);
  --focus: var(--ink);
  --pill: var(--ink);
  --pill-ink: #ffffff;
  --pill-ink-2: #b9bccb;
  /* Navy reads on white but not on near-black, so dark card pages swap in a light navy for small marks and focus. */
  --mark: var(--blue);
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Blocks of color. Each sets its own text, line and focus colors so contrast holds inside it. */
.on-blue { background: var(--blue); --fg: #ffffff; --fg-2: #dfe5ff; --line: #ffffff; --focus: #ffffff; color: var(--fg); }
.on-ink { background: var(--ink); --fg: #ffffff; --fg-2: #b9bccb; --line: #ffffff; --focus: #ffffff; --pill: #ffffff; --pill-ink: var(--ink); color: var(--fg); }
.on-white { background: var(--paper); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--fg); font: 400 17px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
figure { margin: 0; }
/* Every page was designed and approved while browsers ran it in quirks mode (no doctype until 2026-10-12), which adds
   1em under each form. Kept so standards mode looks the same; drop it only as a deliberate spacing change. */
form { margin-block-end: 1em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
h1, h2, h3 { font-family: var(--font); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; margin: 0; text-wrap: balance; }
p { margin: 0; }

/* Buttons: pills only. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 999px; border: 0;
  font: 700 17px/1 var(--font); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--pill); color: var(--pill-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--pill) 84%, var(--blue)); }
.btn-light { background: #ffffff; color: var(--ink); }
.btn-light:hover { background: #e6eafa; }
.btn-block { width: 100%; }

/* ---------- Card pages (what a customer sees after a tap): design-system-v5 "Chrome" ---------- */
/* The partner's 2026-10-06 mockup: a 3D chrome sphere on near-black, a big left-aligned question, split-glass choices.
   Always dark: the artwork is made for it. Silver, the founders' pick (2026-10-06); purple and gold are in
   docs/design/archive/v5-tones/. */
.card-body {
  --c-bg: #000000; --c-ink: #f7f5fa; --c-ink-2: rgb(247 245 250 / 0.72);
  --c-edge: rgb(255 255 255 / 0.13); --c-glow: 0.95;
  --g-blue: #4285f4; --g-red: #ea4335; --g-yellow: #fbbc05; --g-green: #34a853;
  --t-a: #ffffff; --t-b: #b8c1cf; --t-ring: rgb(222 230 242 / 0.5); --t-glow: rgb(205 218 238 / 0.26);
  --t-tint: rgb(205 218 240 / 0.06); --t-icon: #e9eef6; --t-img: url("/img/sphere-silver-v2.webp");
  /* Partner (2026-10-06): a silver ombre across the accent word, white to brushed silver. */
  --accent-fill: linear-gradient(100deg, #ffffff 0%, #e8ebf0 45%, #bcc4cf 100%);
  --fg: var(--c-ink); --fg-2: var(--c-ink-2); --paper: var(--c-bg); --paper-2: rgb(255 255 255 / 0.07); --focus: #ffffff; --mark: var(--t-icon);
  --art-x: min(9vw, 54px);
  color-scheme: dark; position: relative; isolation: isolate;
  min-height: 100dvh; display: flex; flex-direction: column; background: var(--c-bg); color: var(--c-ink);
  overflow-x: clip;
}
/* The sphere: full width on a phone, a fixed column on anything wider, faded at the edges there. The still sits under
   the video (it shows until the video plays, and is all that shows with reduced motion); a left-side scrim above both
   keeps the question readable where the rings pass behind it. */
.card-body::before, .card-bg, .card-body::after {
  position: absolute; top: clamp(30px, 9svh, 96px); left: 50%; translate: -50% 0;
  width: min(100%, 600px); aspect-ratio: 1520 / 2688; pointer-events: none;
}
/* The artwork is shifted right inside its box, so the sphere sits beside the question, not behind it (decoration never
   has to rescue the type), and nothing is ever wider than the screen. */
.card-body::before { content: ""; z-index: -3; background: var(--t-img) var(--art-x) top / cover no-repeat; }
.card-bg { z-index: -2; height: auto; object-fit: cover; object-position: var(--art-x) top; background: transparent; }
.card-body::after { content: ""; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.12) 40%, transparent 58%); }
/* iOS Low Power Mode refuses autoplay and would draw a play button over the still; hide it. */
.card-bg::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
@media (min-width: 601px) {
  .card-body::before, .card-bg { mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .card-bg { display: none; }
}
.card-shell { flex: 1; width: 100%; max-width: 460px; margin: 0 auto; padding: 0 24px 4px; display: flex; flex-direction: column; gap: 28px; }

.biz { flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-top: max(30px, calc(env(safe-area-inset-top) + 18px)); }
.biz-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.biz-mark {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.02));
  border: 1px solid var(--t-ring); color: var(--t-icon); box-shadow: 0 0 16px -4px var(--t-glow);
  font: 650 13px/1 var(--font); letter-spacing: 0.02em;
}
.biz-mark img { width: 100%; height: 100%; object-fit: cover; }
.biz-rule { width: 1px; height: 26px; background: var(--c-edge); flex: none; }
.biz-name { font: 550 12.5px/1.35 var(--font); letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-ink); min-width: 0; overflow-wrap: break-word; }
/* "experience?" / "experiencia?" is the longest word; the size keeps it on one line at 320px. */
.card-h1 {
  margin-top: clamp(56px, 13svh, 120px); max-width: 8.6ch;
  font: 750 clamp(40px, 12.4vw, 56px)/0.98 var(--font); letter-spacing: -0.035em; color: var(--c-ink); text-wrap: initial;
}
/* Partner (2026-10-06): the end of "experience?" vanished into the sphere. A thin white stroke and a soft shadow keep
   every letter readable over any part of the artwork. */
/* A soft dark halo that travels with the question, so on any screen shape the letters have dark behind them, wherever
   the sphere lands (Jonah 2026-10-06: the end of "experience?" blended with the sphere on some phones). */
.card-h1 { position: relative; }
.card-h1::before {
  content: ""; position: absolute; z-index: -1; inset: -40px -84px -40px -32px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.92), rgb(0 0 0 / 0.78) 60%, rgb(0 0 0 / 0) 100%);
}
.card-h1 .accent {
  /* Brushed metal, the way Apple sets "Titanium": one quiet fade from white to mid silver, no outline, no shadow
     (Jonah 2026-10-06: outline + dark ombre "looks cheap"). Legibility comes from the scrim behind the text. */
  background: var(--accent-fill); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em;
}
.card-sub { margin-top: 18px; max-width: 15ch; font: 400 clamp(19px, 5.4vw, 22px)/1.3 var(--font); color: var(--c-ink-2); }

/* The two choices: one component, so equal weight. A pane of frosted glass split by a hairline. */
.choices { display: grid; gap: 14px; }
/* Google's colors as soft light that travels around the public review button (Jonah, 2026-10-06: "a
   glow rotating around the button, premium, the Google colors"; "only on the top one"). No filter blur: Safari on
   iPhone cut blur under the frosted glass into a hard box (seen twice on Jonah's phone); stacked coloured shadows
   muddied the four colours; a feathered conic band looked boxed in. */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.choice {
  position: relative; isolation: isolate; display: flex; align-items: center; min-height: 86px; padding: 12px 20px 12px 12px;
  border-radius: 28px; color: var(--c-ink); text-decoration: none;
  transition: transform 180ms var(--ease);
}
.choice.lit::before, .ring::before {
  /* A thin line of Google colours on the button's own edge, turning slowly, the way Google's and Apple's
     assistant buttons glow (Jonah 2026-10-06: big drifting blobs "look cheap"). Masked to a ring: no blur. */
  content: ""; position: absolute; inset: calc(-1 * var(--ring-w)); z-index: 0; pointer-events: none;
  border-radius: calc(var(--ring-r, 28px) + var(--ring-w)); padding: var(--ring-w);
  background: conic-gradient(from var(--spin), #4285f4, #ea4335 25%, #fbbc05 50%, #34a853 75%, #4285f4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.choice.lit { --ring-w: 1.5px; }
.ring { position: relative; isolation: isolate; --ring-w: 1.5px; --ring-r: 999px; }
/* A soft bloom that hugs the edge, a touch of each Google colour on its own side (box-shadow renders soft on
   iPhone, unlike filter blur under frosted glass). */
.choice.lit::after {
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), -7px 0 18px -9px rgb(66 133 244 / 0.55),
    0 -7px 18px -9px rgb(234 67 53 / 0.5), 7px 0 18px -9px rgb(251 188 5 / 0.5), 0 7px 18px -9px rgb(52 168 83 / 0.5),
    0 22px 40px -24px rgb(0 0 0 / 0.9);
}
.choice.lit::after { background-color: rgb(10 10 14 / 0.9); }
/* Any light under the private button would show through its glass; keep that glass more solid. */
.choice:not(.lit)::after { background-color: rgb(10 10 14 / 0.94); }
.choice::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.02)), rgb(10 10 14 / 0.84);
  border: 1px solid var(--t-ring);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 24px -10px var(--t-glow), 0 22px 40px -24px rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  transition: background-color 180ms var(--ease);
}
.choice:hover::after { background-color: rgb(24 24 30 / 0.84); }
.choice:active { transform: scale(0.985); }
.choice:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
/* Only the public review choice carries the light (founders, 2026-10-06). */
@media (prefers-reduced-motion: no-preference) {
  .choice.lit::before, .ring::before { animation: spin 7s linear infinite; }
}
@keyframes spin { to { --spin: 360deg; } }
.chip {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.02) 70%);
  border: 1px solid var(--t-ring); color: var(--t-icon); box-shadow: inset 0 0 14px -4px var(--t-glow);
}
.chip .icon { width: 24px; height: 24px; }
.choice-label {
  flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  margin-left: 16px; padding-left: 18px; border-left: 1px solid var(--c-edge);
  font: 650 17px/1.2 var(--font); letter-spacing: -0.012em; text-align: left;
}
.choice-label small { font: 420 13.5px/1.3 var(--font); letter-spacing: 0; color: var(--c-ink-2); }
.choice > .icon { width: 22px; height: 22px; margin-left: 10px; color: var(--c-ink); }

/* Short screens (iPhone Duo folded or sideways, small phones, any phone with Safari's toolbars showing): tighter
   spacing and a headline sized by height too, so both choices are always on screen without scrolling. */
@media (max-height: 640px) {
  .biz { padding-top: max(16px, calc(env(safe-area-inset-top) + 10px)); }
  .card-h1 { margin-top: clamp(18px, 5svh, 36px); font-size: min(clamp(40px, 12.4vw, 56px), 7.6svh); }
  .card-sub { margin-top: 10px; font-size: 18px; }
  .card-shell { gap: 18px; }
  .choices { gap: 10px; }
  .choice { min-height: 72px; padding: 8px 16px 8px 8px; }
  .chip { width: 50px; height: 50px; }
  .card-foot { padding-top: 18px; }
}
/* Narrow phones (iPhone SE, small Androids): smaller chip and labels so each label stays on one line. */
@media (max-width: 380px) {
  .card-shell { padding-left: 18px; padding-right: 18px; }
  .choice { padding-right: 14px; }
  .chip { width: 44px; height: 44px; }
  .chip .icon { width: 21px; height: 21px; }
  .choice-label { margin-left: 12px; padding-left: 12px; font-size: 15.5px; }
  .choice-label small { font-size: 12.5px; }
  .choice > .icon { margin-left: 6px; width: 20px; height: 20px; }
}
.card-foot {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 20px max(26px, env(safe-area-inset-bottom));
  font: 550 10.5px/1 var(--font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-ink-2);
}
.card-foot a { color: var(--c-ink-2); text-decoration: none; }
.card-foot a:hover { color: var(--c-ink); }
.powered { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.powered .icon { width: 24px; height: 24px; color: var(--t-icon); }
.card-foot > a:last-child::before { content: ""; display: block; width: 26px; height: 1px; margin: 0 auto 12px; background: var(--c-edge); }

.biz.compact { flex: none; }
.form-title { margin-top: clamp(36px, 8svh, 64px); font: 750 clamp(32px, 9vw, 40px)/1.02 var(--font); letter-spacing: -0.03em; }
.form-sub { color: var(--c-ink-2); font-size: 16px; max-width: 34ch; margin-top: 12px; }
.card-shell .panel {
  padding: 22px 20px 20px; border-radius: 28px; background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025));
  border: 1px solid var(--c-edge); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.card-body .btn-primary { background: linear-gradient(95deg, var(--t-a), var(--t-b)); color: #0b0a0d; }
.card-body .btn-primary:hover { filter: brightness(1.06); }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font: 700 15px/1.2 var(--font); }
.field .opt { font-weight: 450; color: var(--fg-2); }
.field input, .field textarea {
  width: 100%; min-height: 56px; padding: 15px 16px; border-radius: 16px; border: 1px solid var(--c-edge);
  background: var(--paper-2); color: var(--fg); font: 450 16px/1.4 var(--font);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--t-icon); box-shadow: 0 0 0 3px var(--t-glow); }
.hint { font-size: 14px; color: var(--fg-2); }
.alert { padding: 12px 14px; border-radius: 14px; border-left: 4px solid #e5484d; background: color-mix(in srgb, #e5484d 18%, var(--c-bg)); color: var(--fg); font-weight: 650; margin-bottom: 18px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Reading pages (the privacy policy): the card frame without the sphere, a soft silver light at the top instead.
   After Apple's privacy page (promises first, as a checklist) and Linear's policy (big title, numbered contents,
   ruled sections). */
.card-body.plain::before { display: block; content: ""; position: absolute; z-index: -3; inset: 0 0 auto; height: 520px;
  translate: none; width: auto; aspect-ratio: auto; left: 0; top: 0;
  background: radial-gradient(70% 60% at 85% 0%, rgb(205 214 228 / 0.16), transparent 70%); }
.card-body.plain::after { display: none; }
.policy { padding: max(48px, calc(env(safe-area-inset-top) + 32px)) 0 8px; }
.policy-eyebrow, .policy-date, .policy-n {
  font: 600 11px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.16em; text-transform: uppercase;
}
/* Block-level so standards mode adds no text line around it (as inline-flex it sat in a 25px line, not 16px). */
.policy-eyebrow { display: flex; width: fit-content; align-items: center; gap: 8px; color: var(--c-ink-2); }
.policy-eyebrow .icon { width: 16px; height: 16px; color: var(--t-icon); }
.policy h1 {
  margin-top: 22px; font: 750 clamp(44px, 13vw, 64px)/0.96 var(--font); letter-spacing: -0.04em;
  background: linear-gradient(100deg, #ffffff 0%, #e8ebf0 45%, #bcc4cf 100%); -webkit-background-clip: text;
  background-clip: text; color: transparent; padding-bottom: 0.06em;
}
.policy-date { margin-top: 18px; color: var(--c-ink-2); }
.policy-lede { margin-top: 22px; font-size: 18px; line-height: 1.5; color: var(--c-ink); max-width: 34ch; }
/* The promises, as one glass panel of checked rows. */
.policy-glance {
  list-style: none; margin: 34px 0 0; padding: 6px 18px; border-radius: 24px; border: 1px solid var(--c-edge);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
}
.policy-glance li {
  display: flex; align-items: center; gap: 14px; padding: 15px 0; font: 550 15.5px/1.35 var(--font); color: var(--c-ink);
}
.policy-glance li + li { border-top: 1px solid rgb(255 255 255 / 0.08); }
.policy-glance .icon { width: 22px; height: 22px; color: #e9eef6; flex: none; }
.policy-toc { margin-top: 40px; padding: 22px 0; border-block: 1px dashed rgb(255 255 255 / 0.16); }
.policy-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.policy-toc a { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; color: var(--c-ink-2); text-decoration: none; font-size: 15.5px; }
.policy-toc a:hover { color: var(--c-ink); }
.policy-n { color: rgb(247 245 250 / 0.42); }
.policy-sec { padding: 36px 0 6px; scroll-margin-top: 24px; }
.policy-sec + .policy-sec { border-top: 1px dashed rgb(255 255 255 / 0.12); }
.policy-sec h2 { display: grid; gap: 10px; font: 700 25px/1.12 var(--font); letter-spacing: -0.025em; margin-bottom: 14px; }
.policy-sec p { color: var(--c-ink-2); font-size: 16px; line-height: 1.6; margin-bottom: 14px; max-width: 62ch; }
.policy-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 18px 20px;
  border-radius: 22px; border: 1px solid var(--t-ring); color: var(--c-ink); text-decoration: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02));
}
.policy-contact span { display: grid; gap: 4px; font-size: 13.5px; color: var(--c-ink-2); }
.policy-contact strong { font: 650 17px/1.2 var(--font); color: var(--c-ink); letter-spacing: -0.01em; }
.policy-contact .icon { width: 22px; height: 22px; }
.policy-contact:hover { background-color: rgb(255 255 255 / 0.04); }
/* The company homepage: the card pages' look, one quiet page (partner, 2026-10-06). */
.card-body.home::before, .card-body.home::after { display: none; }
/* The hero mark: the tap waves in liquid metal, on the right, partly off the edge, behind the words. */
.home-hero { position: relative; isolation: isolate; }
.home-metal { position: absolute; z-index: -1; top: max(330px, 40svh); right: calc(-1 * min(12vw, 80px));
  width: min(62vw, 310px); aspect-ratio: 1; pointer-events: none; }
/* The mark hangs past the right edge on purpose; never let it make the page scroll sideways. */
html:has(> body.home) { overflow-x: clip; }
/* Short screens: the space between the words and the buttons is small, so a smaller mark sits beside the sentence. */
@media (max-height: 700px) {
  .home-metal { top: max(190px, 33svh); width: min(40vw, 210px); right: calc(-1 * min(12vw, 48px)); }
}
.home-metal img, .home-metal canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-metal.is-live img { visibility: hidden; }
.home-shell { max-width: 520px; gap: 0; }
.home-hero { min-height: calc(100svh - 24px); display: flex; flex-direction: column; padding: max(30px, calc(env(safe-area-inset-top) + 18px)) 0 36px; }
.home-hero .biz-mark .icon { width: 20px; height: 20px; }
.home .card-h1 { max-width: 11.5ch; }
/* The wider headline would push its halo past the screen edge. */
.home .card-h1::before { inset: -40px -16px -40px -32px; }
.home-sub { max-width: 18ch; position: relative; }
.home-sub::before { content: ""; position: absolute; z-index: -1; inset: -24px -40px -24px -32px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.6) 60%, rgb(0 0 0 / 0) 100%); }
.home-ctas { margin-top: auto; padding-top: 40px; display: grid; gap: 12px; }
.home-ctas .btn { min-height: 60px; font-size: 17px; }
.home-btn-ghost { color: var(--c-ink); border: 1px solid var(--c-edge); background: rgb(255 255 255 / 0.04);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.home-btn-ghost:hover { background: rgb(255 255 255 / 0.08); }
.home-sec { padding: 44px 0; border-top: 1px dashed rgb(255 255 255 / 0.14); }
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.home-steps li { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; }
.home-steps li > span:last-child { display: grid; gap: 4px; align-content: start; color: var(--c-ink-2); font-size: 16.5px; line-height: 1.45; }
.home-steps strong { font: 700 26px/1.1 var(--font); letter-spacing: -0.025em; color: var(--c-ink); }
.home-product { display: grid; justify-items: center; padding-bottom: 0; overflow: hidden; }
.home-product .mini-phone { margin: 0; border: 1px solid rgb(255 255 255 / 0.14); border-bottom: 0;
  box-shadow: 0 -20px 60px -30px rgb(205 218 238 / 0.35); }
.home-h2 { font: 750 clamp(32px, 9vw, 42px)/1.04 var(--font); letter-spacing: -0.03em; }
.home-lede { color: var(--c-ink-2); font-size: 16.5px; line-height: 1.5; margin: 12px 0 24px; max-width: 36ch; }
.home .sent { display: flex; gap: 12px; align-items: center; padding: 20px; border-radius: 20px; border: 1px solid var(--c-edge);
  background: rgb(255 255 255 / 0.05); color: var(--c-ink); font-weight: 650; }
.home-foot { flex-direction: row; gap: 18px; justify-content: center; }
.home-foot > a:last-child::before { display: none; }
/* The homepage on computers and tablets in landscape: a wide page at full scale, not a phone column (Fable review,
   2026-10-06: "a phone layout centered in a 1440 canvas"; proportions after Apple product pages, Linear and Nothing). */
@media (min-width: 900px) {
  .home-shell { max-width: 1280px; padding: 0 clamp(48px, 5.5vw, 80px); display: grid; grid-template-columns: 0.82fr 1fr;
    column-gap: 56px; }
  .home-hero { grid-column: 1 / -1; min-height: min(82vh, 860px); display: grid; grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto 1fr auto auto auto 1fr; column-gap: 32px; padding-top: 36px; padding-bottom: 40px; }
  .home-hero > .biz-id { grid-column: 1 / -1; grid-row: 1; }
  .home-hero > .card-h1 { grid-column: 1; grid-row: 3; margin-top: 0; max-width: 13ch;
    font-size: clamp(64px, 6.2vw, 92px); line-height: 0.95; letter-spacing: -0.03em; }
  .home-hero > .home-sub { grid-column: 1; grid-row: 4; max-width: 420px; font-size: 22px; line-height: 1.4; margin-top: 28px; }
  .home-hero > .home-ctas { grid-column: 1; grid-row: 5; align-self: start; margin-top: 0; padding-top: 40px; display: flex; gap: 20px; }
  .home-ctas .btn { min-height: 58px; padding: 0 30px; font-size: 18px; }
  /* The mark is the brand: big, vertically centred, bleeding past the page edge. */
  .home-metal { position: relative; z-index: 0; top: auto; right: auto; grid-column: 2; grid-row: 2 / 7; align-self: center;
    justify-self: end; width: min(46vw, 620px); margin-right: calc(-1 * clamp(40px, 5vw, 90px));
    /* Optical centring: the big outer arc carries the weight high, so sit the box a little lower. */
    translate: 0 4%; }
  .home .card-h1::before, .home-sub::before { display: none; }
  .home-sec[aria-label="How it works"] { grid-column: 1 / -1; padding: 80px 0; }
  .home-steps { grid-template-columns: repeat(3, 1fr); gap: 56px; }
  .home-steps li { grid-template-columns: 1fr; gap: 16px; align-items: start; align-content: start; }
  .home-steps strong { font-size: 32px; }
  .home-steps li > span:last-child { font-size: 18px; gap: 8px; }
  .home-product { grid-column: 1; align-self: stretch; align-content: center; padding: 80px 0; border-top: 1px dashed rgb(255 255 255 / 0.14); }
  .home-product .mini-phone { transform: scale(1.45); transform-origin: center; margin: 120px 0; }
  #contact.home-sec { grid-column: 2; padding: 80px 0; }
  .home-h2 { font-size: 52px; }
  .home-lede { font-size: 19px; }
  .home .field label { font-size: 16px; }
}
/* Thanks, not found and similar. */
.status {
  flex: 1; padding: max(64px, calc(env(safe-area-inset-top) + 44px)) 0 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; text-align: left;
}
.status-icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.02) 70%);
  border: 1px solid var(--t-ring); color: var(--t-icon); box-shadow: 0 0 22px -6px var(--t-glow);
}
.status-icon .icon { width: 28px; height: 28px; }
.status h1 { font: 750 clamp(32px, 9vw, 42px)/1.02 var(--font); letter-spacing: -0.03em; max-width: 12ch; }
.status p { color: var(--c-ink-2); font-size: 17px; max-width: 32ch; }
.status .choices { margin-top: 18px; width: 100%; }


/* ---------- Company site ---------- */
body.site { overflow-x: hidden; }
.w { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 18px; }

.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 750 21px/1 var(--font); letter-spacing: -0.025em; }
.brand .icon { width: 22px; height: 22px; }
.s-nav .w { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.s-nav .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }
.s-nav-links { display: none; gap: 30px; font: 650 15px/1 var(--font); }
.s-nav-links a { text-decoration: none; }
.s-nav-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

.s-hero { padding: 6px 0 56px; }
.s-hero .w { display: grid; gap: 30px; }
.s-hero-copy { display: grid; gap: 18px; align-content: start; }
.s-hero h1 { font-size: clamp(40px, 11vw, 92px); max-width: 12ch; }
.s-hero-sub { font-size: 19px; color: var(--fg-2); max-width: 30ch; }
.s-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.s-hero-media { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; }
.s-hero-media img { width: 100%; height: 100%; object-fit: cover; }

.marquee { overflow: hidden; padding: 20px 0; }
.marquee-track { display: flex; width: max-content; }
.marquee-item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font: 700 24px/1 var(--font); letter-spacing: -0.025em; white-space: nowrap; }
.marquee-item::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }

.s-sec { padding: 84px 0; }
.s-title { font-size: clamp(36px, 9.6vw, 80px); max-width: 13ch; }
.s-lead { font-size: 19px; color: var(--fg-2); max-width: 44ch; margin-top: 18px; }

.how { display: grid; gap: 32px; margin-top: 40px; }
.how-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; }
.how-photo img { width: 100%; height: 100%; object-fit: cover; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.how-step { display: grid; grid-template-columns: 52px 1fr; gap: 6px 14px; padding: 24px 0; border-top: 2px solid var(--line); }
.how-step:last-child { border-bottom: 2px solid var(--line); }
.how-step .n { grid-row: span 2; font: 750 46px/0.85 var(--font); letter-spacing: -0.04em; color: var(--blue); }
.how-step h3 { font-size: 24px; line-height: 1.05; }
.how-step p { color: var(--fg-2); }

.ways { display: grid; gap: 14px; margin-top: 40px; }
.way { border-radius: 28px; padding: 26px 22px 0; display: grid; gap: 14px; align-content: start; overflow: hidden; }
.way:nth-child(1) { background: var(--blue); color: #ffffff; --fg-2: #dfe5ff; }
.way:nth-child(2) { background: #ffffff; color: var(--ink); --fg-2: #4a4b55; }
.way-tag { justify-self: start; padding: 8px 13px; border-radius: 999px; font: 750 13px/1 var(--font); background: color-mix(in srgb, currentColor 13%, transparent); }
.way h3 { font-size: clamp(30px, 8vw, 46px); }
.way > p { color: var(--fg-2); max-width: 40ch; }
/* The phone rises out of the bottom edge of its card. */
.mini-phone { margin: 16px auto 0; width: 248px; height: 400px; border-radius: 40px 40px 0 0; padding: 10px 10px 0; background: #0b0b0c; }
/* The homepage mockup shows the real customer page (design-system-v5), scaled to the phone drawing. */
.mini-screen {
  position: relative; isolation: isolate; height: 100%; border-radius: 31px 31px 0 0; overflow: hidden; display: flex; flex-direction: column; color-scheme: dark;
  --c-bg: #000000; --c-ink: #f7f5fa; --c-ink-2: rgb(247 245 250 / 0.72); --c-edge: rgb(255 255 255 / 0.13); --c-glow: 0.95;
  --g-blue: #4285f4; --g-red: #ea4335; --g-yellow: #fbbc05; --g-green: #34a853;
  --t-a: #ffffff; --t-b: #b8c1cf; --t-ring: rgb(222 230 242 / 0.5); --t-glow: rgb(205 218 238 / 0.26);
  --t-tint: rgb(205 218 240 / 0.06); --t-icon: #e9eef6; --mark: var(--t-icon);
  --accent-fill: linear-gradient(100deg, #ffffff 0%, #e8ebf0 45%, #bcc4cf 100%);
  background: var(--c-bg) url("/img/sphere-silver-v2.webp") 34px top / 100% auto no-repeat; color: var(--c-ink); --fg: var(--c-ink); --fg-2: var(--c-ink-2);
}
.mini-screen .card-shell { padding: 0 13px 4px; gap: 10px; }
.mini-screen .biz { padding-top: 26px; }
.mini-screen .biz-id { gap: 7px; }
.mini-screen .biz-mark { width: 20px; height: 20px; font-size: 7.5px; }
.mini-screen .biz-rule { height: 14px; }
.mini-screen .biz-name { font-size: 7px; }
.mini-screen .card-h1 { margin-top: 34px; font-size: 27px; }
.mini-screen .card-sub { margin-top: 9px; font-size: 11px; }
.mini-screen .choices { gap: 7px; }
.mini-screen .choice { min-height: 46px; padding: 6px 10px 6px 6px; border-radius: 15px; }
.mini-screen .chip { width: 30px; height: 30px; }
.mini-screen .chip .icon { width: 13px; height: 13px; }
.mini-screen .choice-label { margin-left: 8px; padding-left: 9px; font-size: 9.5px; gap: 2px; }
.mini-screen .choice-label small { font-size: 7.5px; }
.mini-screen .choice > .icon { width: 12px; height: 12px; }
.mini-screen .card-foot { font-size: 6px; padding: 10px 6px 10px; gap: 6px; }
.mini-screen .powered { gap: 6px; }
.mini-screen .powered .icon { width: 13px; height: 13px; }
.way-photo { margin: 8px -22px 0; aspect-ratio: 5 / 4; }
.way-photo img { width: 100%; height: 100%; object-fit: cover; }

.photo-band { display: grid; gap: 28px; }
.photo-band img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.photo-band h2 { font-size: clamp(36px, 9.6vw, 76px); max-width: 11ch; }
.photo-band p { color: var(--fg-2); font-size: 19px; margin-top: 16px; max-width: 36ch; }

.bento { display: grid; gap: 12px; margin-top: 36px; }
.cell { border-radius: 28px; padding: 28px 24px; background: var(--paper-2); display: grid; gap: 10px; align-content: start; }
.cell h3 { font-size: 26px; line-height: 1.05; }
.cell p { color: var(--fg-2); max-width: 46ch; }
.cell-hero { background: var(--blue); color: #ffffff; --fg-2: #dfe5ff; padding: 32px 24px; }
.cell-hero h3 { font-size: clamp(34px, 9vw, 64px); line-height: 0.98; }
.cell-hero div { display: grid; gap: 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.stats div { padding: 12px; border-radius: 16px; background: #ffffff; }
.stats strong { display: block; font: 750 28px/1 var(--font); letter-spacing: -0.035em; color: var(--blue); }
.stats span { font-size: 12.5px; line-height: 1.25; color: var(--fg-2); display: block; margin-top: 4px; }
.example { font-size: 12px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

.promise { display: grid; gap: 24px; }
.promise h2 { font-size: clamp(38px, 10.5vw, 92px); max-width: 11ch; }
.promise p { color: var(--fg-2); font-size: 19px; max-width: 44ch; }

.faq { margin-top: 32px; border-top: 2px solid var(--line); }
.faq details { border-bottom: 2px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; font: 750 20px/1.25 var(--font); letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 26px; height: 26px; transition: transform 220ms var(--ease); flex: none; }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { color: var(--fg-2); padding: 0 0 24px; max-width: 62ch; }

.contact { display: grid; gap: 28px; }
.contact .panel { background: #ffffff; color: var(--ink); border-radius: 28px; padding: 24px; --fg: var(--ink); --fg-2: #4a4b55; --focus: var(--ink); --pill: var(--ink); --pill-ink: #ffffff; --paper: #ffffff; }
.contact .row { display: grid; gap: 0 14px; }
.sent { display: flex; gap: 12px; align-items: center; padding: 20px; border-radius: 20px; background: #ffffff; color: var(--ink); font-weight: 700; }
.sent .icon { color: var(--blue); }

.s-foot { padding: 64px 0 40px; overflow: hidden; }
.s-foot-mark { font: 750 clamp(52px, 16vw, 200px)/0.9 var(--font); letter-spacing: -0.04em; color: var(--blue); }
.s-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; font-size: 14px; color: var(--fg-2); }
.s-foot-row a { color: var(--fg-2); }

.doc { max-width: 720px; padding: 56px 18px 88px; margin: 0 auto; }
.doc h1 { font-size: 42px; margin-bottom: 14px; }
.doc h2 { font-size: 26px; margin: 34px 0 10px; }
.doc p { color: var(--fg-2); margin-bottom: 14px; }

/* ---------- Motion (every piece motivated; all off for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slide { to { transform: translateX(-50%); } }
  .card-shell > * { animation: rise 420ms var(--ease) both; }
  .card-shell > .biz, .card-shell > .status { animation-name: fade; }
  .card-shell > *:nth-child(2) { animation-delay: 80ms; }
  .rise { animation: rise 700ms var(--ease) both; }
  .r1 { animation-delay: 60ms; } .r2 { animation-delay: 140ms; } .r3 { animation-delay: 220ms; } .r4 { animation-delay: 320ms; }
  .marquee-track { animation: slide 30s linear infinite; }
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Larger screens ---------- */
@media (min-width: 760px) {
  .w { padding: 0 32px; }
  .s-sec { padding: 120px 0; }
  .how { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
  .ways { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr 1fr; }
  .cell-hero { grid-column: 1 / -1; padding: 48px; }
  .photo-band { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 48px; }
  .contact { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .contact .row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .s-nav-links { display: flex; }
  .s-hero { padding: 24px 0 96px; }
  .s-hero .w { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 56px; }
  .s-hero h1 { font-size: clamp(56px, 5vw, 84px); max-width: 13ch; }
  .s-hero-sub { font-size: 21px; }
  .s-hero-media { aspect-ratio: auto; height: min(680px, 74vh); }
}

/* ---------- Founders' dashboard (/admin) ---------- */
/* Dark, in the card pages' family (partner, 2026-10-09: "dark mode also so it feels part of the same family as our
   customers landing pages and our website"). Near-black, silver type, quiet glass panels. No backdrop-filter or filter
   blur: nothing sits behind the panels, and iPhone Safari draws filter blur under glass as a hard box. */
body.adm {
  --c-bg: #141518; --c-edge: rgb(255 255 255 / 0.15); --t-icon: #e9eef6; --t-glow: rgb(205 218 238 / 0.26);
  --fg: #f4f5f8; --fg-2: rgb(236 239 245 / 0.62); --paper-2: rgb(255 255 255 / 0.08); --focus: #ffffff; --mark: #e9eef6;
  --pill: #f4f5f8; --pill-ink: #0b0a0d; --panel: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.05));
  --silver: #dfe6f1;
  color-scheme: dark; min-height: 100dvh; color: var(--fg);
  /* Charcoal, not black (Jonah picked B of three, 2026-10-09: black "looks HELLA dark"). */
  background: radial-gradient(90% 460px at 85% -60px, rgb(214 222 236 / 0.2), transparent 70%) no-repeat, #141518;
}
body.adm .btn-primary { background: linear-gradient(95deg, #ffffff, #b8c1cf); color: #0b0a0d; }
body.adm .btn-primary:hover { filter: brightness(1.06); }
body.adm .btn-light { background: rgb(255 255 255 / 0.07); color: var(--fg); box-shadow: inset 0 0 0 1px var(--c-edge); }
body.adm .btn-light:hover { background: rgb(255 255 255 / 0.12); }
body.adm .alert { background: rgb(229 72 77 / 0.14); }
.adm-hero { color: var(--fg); padding: max(14px, env(safe-area-inset-top)) 18px 18px; display: grid; gap: 6px; max-width: 640px; margin: 0 auto; }
.adm-bar { display: flex; justify-content: space-between; align-items: center; min-height: 40px; margin-bottom: 14px; }
.adm-brand { color: var(--fg); text-decoration: none; font: 750 17px/1 var(--font); letter-spacing: -0.02em; }
.adm-textbtn { background: none; border: 0; color: var(--fg-2); font: 600 14px/1 var(--font); cursor: pointer; padding: 8px 0; }
.adm-textbtn:hover { color: var(--fg); }
.adm-hero small { font: 550 11px/1.2 var(--font); letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-2); }
/* The card pages' silver ombre, white to brushed silver, on the page title. */
.adm-hero h1 {
  font-size: clamp(30px, 8.5vw, 42px); font-weight: 750; letter-spacing: -0.035em; padding-bottom: 0.06em;
  background: linear-gradient(100deg, #ffffff 0%, #e8ebf0 45%, #bcc4cf 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.adm-tabs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; margin: 4px auto 0; padding: 0 18px; }
.adm-tabs a { padding: 9px 16px; border-radius: 999px; background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px var(--c-edge); color: var(--fg); text-decoration: none; font: 650 14px/1 var(--font); }
.adm-tabs a:hover { background: rgb(255 255 255 / 0.12); }
.adm-main { max-width: 640px; margin: 0 auto; padding: 16px 18px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* Jonah, 2026-10-07: a review screen with a long Google link grew to 3,404px on a phone (Publish off screen). Nothing
   on a dashboard page may be wider than the screen: grid children may shrink, and long text breaks anywhere. */
.adm-main > *, .adm-card, .adm-form, .adm-strip { min-width: 0; }
.adm-main li, .adm-main p, .adm-main code, .adm-main span, .adm-notice { overflow-wrap: anywhere; }
.adm-form { display: grid; gap: 4px; background: var(--panel); border: 1px solid var(--c-edge); border-radius: 24px; padding: 20px; }
.adm-meta { font-size: 13.5px; color: var(--fg-2); }
.adm-meta a { color: var(--silver); font-weight: 650; }
.adm-strip { display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: rgb(251 188 5 / 0.08); border: 1px solid rgb(251 188 5 / 0.22); color: #f1d9a6; font-size: 14px; }
.adm-strip.adm-passkey { background: var(--panel); border-color: var(--c-edge); color: var(--fg); }
.adm-strip ul { margin: 0; padding-left: 18px; }
.adm-card { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: var(--panel); color: var(--fg); text-decoration: none; border: 1px solid var(--c-edge); }
a.adm-card:hover { border-color: rgb(255 255 255 / 0.28); }
.adm-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-name { font: 700 18px/1.15 var(--font); letter-spacing: -0.02em; }
.adm-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 650 12px/1.3 var(--font); white-space: nowrap; }
.adm-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.h-live { background: rgb(52 168 83 / 0.16); color: #86e0a4; }
.h-quiet { background: rgb(251 188 5 / 0.13); color: #f3cd78; }
.h-test, .h-off { background: rgb(255 255 255 / 0.08); color: rgb(236 239 245 / 0.7); }
.h-lapsed { background: rgb(66 133 244 / 0.16); color: #a8c4ff; }
.adm-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-variant-numeric: tabular-nums; }
.adm-nums div { display: grid; gap: 2px; }
.adm-nums strong { font: 700 24px/1 var(--font); letter-spacing: -0.03em; color: var(--silver); }
.adm-nums span { font-size: 12.5px; color: var(--fg-2); }
.adm-does { font-size: 14.5px; }
.adm-code { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / 0.035); border: 1px dashed rgb(255 255 255 / 0.2); }
.adm-archived { margin-top: 18px; }
.adm-archived > summary { cursor: pointer; font: 650 15px/1.3 var(--font); padding: 10px 0; color: var(--fg-2); }
/* The home page groups (Open, Potentials, No's) hold the shop cards, so they need the list's own 12px gap. */
.adm-archived > .adm-card { margin-bottom: 12px; }
.adm-nfc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
/* .btn sets display, which would beat the browser's own [hidden]; the write button shows only on Android. */
.adm-nfc [hidden] { display: none; }
.adm-nfc .hint { flex-basis: 100%; margin: 0; }
.adm-code span { font: 650 12px/1.2 var(--font); color: var(--fg-2); }
.adm-code code { font: 500 13px/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.adm-preview { min-height: 44px; font-size: 15px; justify-self: start; background: var(--paper-2); }
.adm-message { font-size: 15.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-mask { font: 500 12.5px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.adm-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 14.5px; }
.adm-dl dt { color: var(--fg-2); }
.adm-dl dd { margin: 0; overflow-wrap: anywhere; }.adm-notice { padding: 12px 14px; border-radius: 14px; background: rgb(52 168 83 / 0.13); border: 1px solid rgb(52 168 83 / 0.3); color: #9fe7b6; font-weight: 650; font-size: 14.5px; }
.adm-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.adm-choice { border: 0; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.adm-choice legend { font: 700 15px/1.2 var(--font); margin-bottom: 8px; padding: 0; }
.adm-choice label, .adm-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.adm-check { margin-bottom: 14px; }
.adm-choice input, .adm-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: #e9eef6; }
.adm-more { margin: 4px 0 16px; }
.adm-more summary { cursor: pointer; font: 650 14.5px/1.3 var(--font); color: var(--silver); padding: 6px 0; }
.adm-more[open] summary { margin-bottom: 10px; }
.adm-barlinks { display: flex; align-items: center; gap: 18px; }
.adm-barlinks form { margin: 0; }
.adm-barlinks a.adm-textbtn { display: inline-block; text-decoration: none; }
.adm-passkey { margin-bottom: 12px; }
.adm-or { text-align: center; color: var(--fg-2); font-size: 14px; margin: 4px 0 12px; }
.adm-inapp { margin-bottom: 12px; }
.adm-prefix { display: flex; align-items: center; min-height: 56px; padding-left: 16px; border-radius: 16px; border: 1px solid var(--c-edge); background: var(--paper-2); }
.adm-prefix span { flex: none; color: var(--fg-2); font: 450 16px/1.4 var(--font); }
.field .adm-prefix input { min-width: 0; flex: 1; min-height: 52px; padding-left: 0; border: 0; background: transparent; box-shadow: none; }
.adm-prefix:focus-within { border-color: var(--mark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark) 30%, transparent); }
.field select { width: 100%; min-height: 56px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--c-edge); background: var(--paper-2); color: var(--fg); font: 450 16px/1.4 var(--font); }
.adm-actions { border-top: 1px solid var(--c-edge); padding-top: 10px; }
.adm-actions summary { cursor: pointer; font: 650 14.5px/1.3 var(--font); color: var(--silver); padding: 6px 0; }
.adm-actions[open] summary { margin-bottom: 8px; }
.adm-action { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.07); margin-top: 8px; }
.adm-action .btn { min-height: 46px; font-size: 15px; white-space: normal; text-align: center; }
.adm-action .btn-light { background: rgb(255 255 255 / 0.07); }
/* Open / Potential / No: one row of three, so filing a shop does not push its cards down the page. */
.adm-stage { grid-template-columns: repeat(3, 1fr); }
.adm-stage .hint { grid-column: 1 / -1; margin: 0; }
.adm-stage .btn { min-height: 44px; padding: 0 8px; }
/* A shop on the home list: the link opens it; the row of buttons under it files it (partner, 2026-10-09). */
.adm-shop-link { display: grid; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.adm-shop:has(.adm-shop-link:hover) { border-color: rgb(255 255 255 / 0.28); }
.adm-stage-mini { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--c-edge); }
.adm-stage-mini .btn { min-height: 36px; font-size: 14px; }
.adm-find { justify-self: start; margin-top: 4px; }
.adm-review-preview { color: var(--fg); overflow-wrap: anywhere; }
.adm-review-preview[hidden] { display: none; }
.adm-action .field { margin-bottom: 4px; }
.adm-action .field input, .adm-action .field select { background: rgb(255 255 255 / 0.06); }