/*
 * Title system for the server-rendered public pages: tool runners (/make-qr,
 * /pdf-to-md, /remove-bg, /product-shot, /product-reel, /tools/*), tool SEO
 * pages, legal, invite, OAuth consent, media upload, and the data-plane host.
 * Same tokens as /landing.html and /design/title. Each page links this after
 * its own <style>, so it remaps that page's colour variables and restyles the
 * shared vocabulary (brand, h1/h2, lead, dropzone, buttons, code, footer).
 * Pages with body.tp-public are the title card (crop marks, corner labels,
 * opening frame, then a credits column) — the same structure as the landing.
 */
:root {
  --black: #050505;
  --white: #f3f0e8;
  --grey: #8d8a83;
  --dim: #5d5b56;
  --ink-on-white: #3b3a37;
  --line: rgba(243, 240, 232, 0.22);
  /* Same gold as title.css. Premium and money only. #E6B325 on #050505 is 10.52:1. */
  --gold: #E6B325;

  --display: "Bahnschrift Condensed", "Bahnschrift", "Helvetica Neue Condensed", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --track: "Futura", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --frame: 41.667ms;
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --cut: calc(12 * var(--frame));
  --beat: calc(2 * var(--frame));
  --hover: calc(6 * var(--frame));

  /* The pages' own variables, remapped. */
  --bg0: var(--black);
  --bg1: var(--black);
  --bg: var(--black);
  --ink: var(--white);
  --text: var(--white);
  --muted: var(--grey);
  --accent: var(--white);
  --accent2: var(--grey);
  --accent-text: var(--black);
  --card: transparent;
  --border: var(--line);
  --code: transparent;

  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  :root { --frame: 0.01ms; }
  h1, h1 + .lead, h1 + p { animation: none; }
}

@keyframes tp-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tp-wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

*:where(:not([class*="cl-"], [class*="cl-"] *)) { border-radius: 0 !important; }
[hidden] { display: none !important; }
html { background: var(--black); }
/* Headings size to their column, so narrow columns never clip a word. */
main, .page, .wrap { container-type: inline-size; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--track);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--white); color: var(--black); }
:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }
.mesh { display: none; }

a { color: var(--white); text-decoration-thickness: 1px; text-underline-offset: 4px; }
p, li { color: inherit; }
strong { font-weight: 600; color: var(--white); }
.lead, .muted, .honest, .prose, .hint, .msg, .missing { color: var(--grey); }
.lead, .prose { letter-spacing: 0.02em; line-height: 1.6; }

/* ——— Corner labels: brand, account, back to app ——— */
.top {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.brand, p.brand, h1.brand {
  margin: 0;
  font-family: var(--track);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--white);
}
.brand a:where(:not(.primary, .btn, .cta)),
.brand span { color: var(--white); text-decoration: none; font-weight: 400; }
.tracked, .kicker {
  font-family: var(--track);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}
.kicker {
  margin: 28px 0 0;
  color: var(--grey);
}
.account { font-size: 13px; }
.account #identity { color: var(--grey); font-family: var(--mono); font-size: 12px; }
.app-back a:where(:not(.primary, .btn, .cta)),
.other-tools a:where(:not(.primary, .btn, .cta)) {
  color: var(--white);
  font-weight: 400;
}
.app-back a {
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

/* ——— Display type ——— */
h1 {
  margin: 0;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: clamp(32px, 9cqi, 76px);
  line-height: 0.9;
  overflow-wrap: break-word;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  animation: tp-wipe-up var(--cut) var(--ease) both;
  animation-delay: calc(4 * var(--frame));
}
h1:focus { outline: none; }
body > h1 { font-size: clamp(32px, 6vw, 56px); }
h1 + .lead, h1 + p { animation: tp-wipe var(--cut) var(--ease) both; animation-delay: calc(12 * var(--frame)); }
h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
}
section h2, body > h2, main > h2, .group > h2, .page > h2 {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
section { margin: 0; }
section ol, section ul, .prose-list, .related {
  padding-left: 1.4em;
  color: var(--grey);
  line-height: 1.7;
}
section ol li::marker, .prose-list li::marker, .related li::marker { color: var(--dim); font-family: var(--mono); font-size: 12px; }

/* ——— Buttons: fill wipes to outline, outline wipes to fill ——— */
button:where(:not([class*="cl-"], [class*="cl-"] *)), .btn, .cta, a.cta, a.primary, a.btn, .primary {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid var(--white);
  background: linear-gradient(var(--black), var(--black)) left / 0% 100% no-repeat var(--white);
  box-shadow: none;
  color: var(--black);
  font-family: var(--track);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  text-decoration: none;
  filter: none;
  cursor: pointer;
  transition: background-size var(--hover) var(--ease), color var(--hover) var(--ease), border-color var(--hover) var(--ease), opacity var(--hover) var(--ease);
}
button:where(:not([class*="cl-"], [class*="cl-"] *)):where(:hover:not(:disabled), :focus-visible),
:where(.btn, .cta, a.primary, .primary):where(:hover, :focus-visible) { background-size: 100% 100%; color: var(--white); filter: none; }
button.ghost:where(:not([class*="cl-"], [class*="cl-"] *)), .ghost, .cta.ghost, button.secondary:where(:not([class*="cl-"], [class*="cl-"] *)), .secondary, .banner button {
  background: linear-gradient(var(--white), var(--white)) left / 0% 100% no-repeat transparent;
  color: var(--white);
  border-color: var(--white);
}
button.ghost:where(:hover:not(:disabled), :focus-visible),
:where(.ghost, .secondary, .banner button):where(:hover:not(:disabled), :focus-visible) { background-size: 100% 100%; color: var(--black); }
button:where(:not([class*="cl-"], [class*="cl-"] *)):disabled { opacity: 0.4; cursor: not-allowed; }
.linkish, button.linkish {
  padding: 4px 0;
  border: 0;
  background: linear-gradient(var(--white), var(--white)) left bottom / 0% 1px no-repeat;
  color: var(--grey);
}
.linkish:where(:hover:not(:disabled)) { background-size: 100% 1px; color: var(--white); }
.qr-presets button { padding: 7px 12px; font-size: 10.5px; font-weight: 400; letter-spacing: 0.3em; }
main > section > h2:first-child { margin-top: 0; }

/* ——— Inputs: underline, mono ——— */
input[type="text"]:where(:not([class*="cl-"], [class*="cl-"] *)),
input[type="url"]:where(:not([class*="cl-"], [class*="cl-"] *)),
input[type="email"]:where(:not([class*="cl-"], [class*="cl-"] *)),
input[type="search"]:where(:not([class*="cl-"], [class*="cl-"] *)),
input:where(:not([class*="cl-"], [class*="cl-"] *)):not([type]),
.text-field, select:where(:not([class*="cl-"], [class*="cl-"] *)) {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--grey);
  background: transparent;
  color: var(--white);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color var(--hover) var(--ease);
}
.text-field:focus,
input:where(:not([class*="cl-"], [class*="cl-"] *)):focus,
select:where(:not([class*="cl-"], [class*="cl-"] *)):focus { outline: none; border-color: var(--white); border-bottom-color: var(--white); }
::placeholder { color: var(--grey); }
select option { background: var(--black); color: var(--white); }
textarea:where(:not([class*="cl-"], [class*="cl-"] *)) {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  padding: 12px 14px;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--white); }
label:where(:not([class*="cl-"], [class*="cl-"] *)) { color: var(--grey); }
.qr-row label, .format-row label, .bg-picker label { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; }
.qr-swatch { border: 1px solid var(--line); }

/* ——— Drop zone: the slate with crop marks ——— */
.dropzone, .zone {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--white), var(--white)) left top / 18px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left top / 1px 18px no-repeat,
    linear-gradient(var(--white), var(--white)) right top / 18px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) right top / 1px 18px no-repeat,
    linear-gradient(var(--white), var(--white)) left bottom / 18px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--white), var(--white)) right bottom / 1px 18px no-repeat,
    transparent;
  color: var(--grey);
  font-size: 11px;
  letter-spacing: 0.36em;
  line-height: 1.9;
  text-transform: uppercase;
  transition: border-color var(--hover) var(--ease), color var(--hover) var(--ease), background-color var(--hover) var(--ease);
}
.dropzone:hover, .dropzone.drag, .zone:hover, .zone.drag { border-color: var(--white); color: var(--white); background-color: rgba(243, 240, 232, 0.04); }

/* ——— Settings drawer, notices, results ——— */
.qr-settings, details {
  padding: 16px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.qr-settings > summary, details > summary {
  color: var(--grey);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--hover) var(--ease);
}
.qr-settings > summary:hover, details[open] > summary, details > summary:hover { color: var(--white); }
#quota, [data-testid$="-quota"] { color: var(--grey); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; }
.error, .msg.error {
  padding: 2px 0 2px 12px;
  border: 0;
  border-left: 1px solid var(--white);
  background: transparent;
  color: var(--white);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
}
.ok {
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--white);
}
.banner {
  border: 0;
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  padding: 14px 0;
}
#result img {
  background-color: var(--black);
  background-image:
    linear-gradient(45deg, #1a1a19 25%, transparent 25%),
    linear-gradient(-45deg, #1a1a19 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1a19 75%),
    linear-gradient(-45deg, transparent 75%, #1a1a19 75%);
  border: 1px solid var(--line);
}
#result pre, #result .md, pre.code, .code, pre {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--white);
  font-family: var(--mono);
  font-size: 12.5px;
}
code { font-family: var(--mono); color: var(--white); background: transparent; }
/* Long URLs and code in legal/docs prose and runner address boxes wrap instead of widening the page. */
body.tp-public .tp-read,
body.tp-public pre.code,
body.tp-public pre.code code {
  overflow-wrap: anywhere;
}
body.tp-public pre.code,
body.tp-public pre.code code {
  white-space: pre-wrap;
  max-width: 100%;
}
body.tp-public .mcp-url pre.code {
  min-width: 0;
}
#result .md th, #result .md td { border-color: var(--line); }
#result video { background: var(--black); border: 1px solid var(--line); }
.card {
  border: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}

/* ——— Product reel / shot: filmstrip plates and the agent caption ——— */
.plate {
  border-color: var(--line);
  background-color: var(--black);
  background-image:
    linear-gradient(45deg, #151514 25%, transparent 25%),
    linear-gradient(-45deg, #151514 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #151514 75%),
    linear-gradient(-45deg, transparent 75%, #151514 75%);
}
.thumb figcaption { color: var(--grey); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.thumb.active .plate { border-color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.filmstrip.loading .thumb[data-role="original"] .plate::after {
  background: linear-gradient(105deg, transparent 15%, rgba(243, 240, 232, 0.14) 50%, transparent 85%);
}
.agent-bubble { border-color: var(--line); background: transparent; font-family: var(--mono); font-size: 11.5px; }
.agent-bubble .who { color: var(--grey); font-family: var(--track); font-size: 10px; font-weight: 400; letter-spacing: 0.36em; text-transform: uppercase; }
.hop-result { color: var(--white); font-family: var(--mono); }

/* ——— Tool SEO index: credit rows ——— */
.tool-list { border-top: 1px solid var(--line); }
.tool-list li { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.tool-link {
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 30px);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
}
.tool-link:hover { color: var(--white); text-decoration: underline; }

/* ——— Footer: a ruled credits block ——— */
footer, .footer-nav, .legal-nav {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--grey);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  line-height: 2;
}
.legal-nav { padding: 0 0 14px; border-top: 0; border-bottom: 1px solid var(--line); }
/* Link color must not paint a primary/ghost anchor. a.primary and .footer-nav a
   share specificity, and this rule used to come later, so the pricing Get started
   link was bone type on the bone fill. */
footer a:where(:not(.primary, .btn, .cta)),
.footer-nav a:where(:not(.primary, .btn, .cta)),
.legal-nav a:where(:not(.primary, .btn, .cta)) { color: var(--white); text-decoration: none; }
.cookie-notice a:where(:not(.primary, .btn, .cta)),
.related a:where(:not(.primary, .btn, .cta)) { color: var(--white); text-decoration: underline; text-decoration-color: var(--grey); }
footer a:where(:not(.primary, .btn, .cta)):hover,
.footer-nav a:where(:not(.primary, .btn, .cta)):hover,
.legal-nav a:where(:not(.primary, .btn, .cta)):hover { text-decoration: underline; }
.other-tools h2 {
  padding: 0;
  border: 0;
  color: var(--grey);
  font-family: var(--track);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.42em;
}
.other-tools ul { gap: 0 24px; border-top: 1px solid var(--line); }
.other-tools li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.locales [aria-current="true"] { color: var(--white); font-weight: 400; text-decoration: underline; }
.cookie-notice { color: var(--dim); font-size: 12px; letter-spacing: 0.02em; }

/* ——— Legal pages: Markdown in a reading column ——— */
body > h1:first-of-type ~ h2 { font-size: clamp(20px, 2.2vw, 28px); }
body > p, body > ul li { color: #c9c6be; line-height: 1.7; }

/* ——— Title card: opening frame, then the reel. Opt in with body.tp-public. ——— */
body.tp-public, body.tp-public *, body.tp-public *::before, body.tp-public *::after { box-sizing: border-box; }
body.tp-public {
  display: block;
  margin: 0;
  max-width: none;
  padding: 0;
  min-height: 100vh;
}
body.tp-public .tp-opening {
  container-type: inline-size;
  position: relative;
  min-height: 42svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 88px 20px 36px;
}
body.tp-public .crop { position: absolute; width: 22px; height: 22px; border: 0 solid var(--grey); pointer-events: none; }
body.tp-public .crop.tl { top: 22px; left: 22px; border-top-width: 1px; border-left-width: 1px; }
body.tp-public .crop.tr { top: 22px; right: 22px; border-top-width: 1px; border-right-width: 1px; }
body.tp-public .crop.bl { bottom: 22px; left: 22px; border-bottom-width: 1px; border-left-width: 1px; }
body.tp-public .crop.br { bottom: 22px; right: 22px; border-bottom-width: 1px; border-right-width: 1px; }
body.tp-public .corner { position: absolute; max-width: 46%; color: var(--grey); }
body.tp-public .corner.tl { top: 28px; left: 52px; text-align: left; }
body.tp-public .corner.tr { top: 22px; right: 52px; text-align: right; }
body.tp-public .corner.bl { bottom: 22px; left: 52px; }
body.tp-public .corner.br { bottom: 22px; right: 52px; }
body.tp-public .corner a { color: inherit; text-decoration: none; }
body.tp-public .corner a:hover,
body.tp-public .corner a:focus-visible { color: var(--white); }
body.tp-public .corner .account {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
body.tp-public .corner.tr button,
body.tp-public .corner.tr .ghost {
  padding: 10px 12px;
  letter-spacing: 0.16em;
  white-space: normal;
}
body.tp-public .tp-opening .brand { margin: 0; }
body.tp-public .tp-opening .app-back { margin: 0 0 16px; }
body.tp-public .tp-opening h1 { max-width: min(18ch, 100%); }
body.tp-public .tp-opening .lead,
body.tp-public .tp-opening .honest {
  max-width: 36rem;
  margin: 16px 0 0;
}
body.tp-public .tp-opening .cta-row { margin: 22px 0 0; }
body.tp-public main.tp-reel > section:first-child > h2,
body.tp-public main.tp-read > section:first-child > h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
body.tp-public .presents { margin: 0 0 18px; color: var(--grey); }
body.tp-public main.tp-reel,
body.tp-public .tp-reel {
  width: min(56rem, 100%);
  max-width: 56rem;
  margin: 0 auto;
  padding: 8px clamp(16px, 4vw, 48px) 72px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
body.tp-public main.tp-read {
  width: min(44rem, 100%);
  max-width: 44rem;
}
body.tp-public main.tp-read p,
body.tp-public main.tp-read li { color: #c9c6be; line-height: 1.7; }
body.tp-public main.tp-read h2 { font-size: clamp(20px, 2.2vw, 28px); }
@media (max-width: 640px) {
  body.tp-public .tp-opening { min-height: 0; padding: 72px 16px 28px; }
  body.tp-public .corner.tl { left: 16px; }
  body.tp-public .corner.tr { right: 16px; }
  body.tp-public .crop.tl, body.tp-public .crop.bl { left: 12px; }
  body.tp-public .crop.tr, body.tp-public .crop.br { right: 12px; }
}
@media (min-width: 900px) {
  body.tp-public .tp-opening { min-height: 56svh; padding-top: 96px; }
}

/* ——— /pricing: the landing admission reel, on its own URL ——— */
body.tp-public .plan-grid { width: 100%; border-top: 1px solid var(--line); }
body.tp-public .plan-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
body.tp-public .plan-card[hidden] { display: none; }
body.tp-public [data-testid="landing-plan-pro"] { border-color: var(--gold); }
body.tp-public [data-testid="landing-plan-pro"] h3 { color: var(--gold); }
body.tp-public .plan-card > * { grid-column: 2; }
body.tp-public .plan-card .price {
  grid-column: 1;
  grid-row: 1 / span 4;
  margin: 0;
  text-align: right;
  color: var(--white);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
}
body.tp-public .plan-card h3 {
  margin: 0;
  font-family: var(--display);
  font-stretch: condensed;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1;
  text-transform: uppercase;
}
body.tp-public .plan-card ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--grey);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.8;
}
body.tp-public .plan-card .muted { margin: 10px 0 0; }
body.tp-public .ea-badge {
  justify-self: start;
  margin-bottom: 10px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  color: var(--grey);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
body.tp-public .calc {
  max-width: 36rem;
  margin: 8px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}
body.tp-public .calc label,
body.tp-public .calc > p:first-child {
  display: block;
  margin: 0 0 12px;
  font-family: var(--track);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--grey);
}
body.tp-public .calc input[type="range"] { width: 100%; accent-color: var(--white); }
body.tp-public .iso-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
body.tp-public .iso-presets button {
  padding: 8px 12px;
  border-color: var(--line);
  background: transparent;
  color: var(--white);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
}
body.tp-public .iso-presets button:hover,
body.tp-public .iso-presets button:focus-visible { border-color: var(--white); background-size: 0% 100%; color: var(--white); }
body.tp-public .iso-presets button[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }
body.tp-public .faq { max-width: 44rem; margin: 12px 0 0; color: var(--grey); line-height: 1.6; font-size: 14px; }
body.tp-public .faq dt { margin-top: 22px; color: var(--white); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; }
body.tp-public .faq dd { margin: 6px 0 0; }
body.tp-public main.tp-pricing { width: min(72rem, 100%); max-width: 72rem; }
@media (max-width: 640px) {
  body.tp-public .plan-card { grid-template-columns: 1fr; }
  body.tp-public .plan-card .price,
  body.tp-public .plan-card > * { grid-column: 1; grid-row: auto; text-align: left; }
  button:where(:not([class*="cl-"], [class*="cl-"] *)),
  .btn, .cta, a.cta, a.primary, a.btn, summary,
  .qr-presets button, .iso-presets button, .linkish {
    min-height: 44px;
  }
  .linkish { display: inline-flex; align-items: center; }
  input:where(:not([class*="cl-"], [class*="cl-"] *)):not([type="password"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select:where(:not([class*="cl-"], [class*="cl-"] *)),
  textarea:where(:not([class*="cl-"], [class*="cl-"] *)) {
    min-height: 44px;
    scroll-margin-bottom: calc(24px + env(keyboard-inset-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  }
  .cta, button:where(:not([class*="cl-"], [class*="cl-"] *)) { max-width: 100%; }
}

input:where(:not([class*="cl-"], [class*="cl-"] *)):focus-visible,
select:where(:not([class*="cl-"], [class*="cl-"] *)):focus-visible,
textarea:where(:not([class*="cl-"], [class*="cl-"] *)):focus-visible {
  outline: 1px solid var(--white);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --frame: 0.01ms; }
  h1, h2, h1 + .lead, h1 + p, .lead, .presents {
    animation: none !important;
    transition: none !important;
  }
}

/* Primary cue: three pulses, then still. Consent Allow/Sign in and the pricing Get started link.
   Clerk (.cl-*) is not a target. title-primary-cue.js sets data-tp-cue="settled" on interaction. */
@keyframes tp-primary-cue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 240, 232, 0); }
  45% { box-shadow: 0 0 0 3px rgba(243, 240, 232, 0.55); }
}
body.tp-consent .tp-btn-primary:not(:disabled):not([class*="cl-"]),
body.tp-public main.tp-pricing a.tp-btn-primary:not([class*="cl-"]) {
  animation: tp-primary-cue calc(24 * var(--frame)) ease-in-out 3;
}
html[data-tp-cue="settled"] body.tp-consent .tp-btn-primary,
html[data-tp-cue="settled"] body.tp-public main.tp-pricing a.tp-btn-primary,
body.tp-cue-settled.tp-consent .tp-btn-primary,
body.tp-cue-settled main.tp-pricing a.tp-btn-primary {
  animation: none;
}
body.tp-consent .tp-btn-primary:active:not(:disabled):not([class*="cl-"]),
body.tp-public main.tp-pricing a.tp-btn-primary:active {
  transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
  body.tp-consent .tp-btn-primary,
  body.tp-public main.tp-pricing a.tp-btn-primary {
    animation: none !important;
    transform: none !important;
  }
}

/* Anchor primaries. The button hover above is wrapped in :where(), so it loses
   to a.primary and the label stays black when the fill wipes to black.
   Ghost and secondary anchors invert the other way: bone type on a bone fill. */
a.primary:is(:hover, :focus-visible),
a.btn:not(.ghost):not(.secondary):is(:hover, :focus-visible),
a.cta:not(.ghost):not(.secondary):is(:hover, :focus-visible) {
  background-size: 100% 100%;
  color: var(--white);
  text-decoration: none;
}
a.ghost:is(:hover, :focus-visible),
a.secondary:is(:hover, :focus-visible) {
  background-size: 100% 100%;
  color: var(--black);
  text-decoration: none;
}