/* MarkSentry public site. One stylesheet for every page; the embedded app has
   its own styles in src/ui/embedded-layout.ts and never loads this file. */
:root {
  color-scheme: light;
  --paper: #f6f4ee;
  --paper-2: #efece3;
  --card: #ffffff;
  --ink: #12201c;
  --ink-2: #33433e;
  --muted: #5d6b66;
  --line: #dcd8cc;
  --line-2: #e8e5dc;
  --green: #0e7c66;
  --green-deep: #0a5c4c;
  --green-soft: #e1f0ea;
  --red: #b42318;
  --red-soft: #fdecea;
  --amber: #a15c07;
  --amber-soft: #fdf3e2;
  --ok: #0e7c66;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 14px;
  --head-h: 76px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--sans); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--green-deep); text-underline-offset: 3px; }
a:hover { color: var(--green); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--paper-2); padding: 1px 6px; border-radius: 6px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 200; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid #f2b84b; outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

/* ---------- Header ---------- */
/* Same shape as bins-usa.com: full width, white, logo left, links centred, English/Español
   right, and a coloured line under it. */
.site-head { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 2px solid #e2e8f0; box-shadow: 0 2px 0 0 var(--green); }
.head-row { display: flex; align-items: center; gap: 24px; min-height: var(--head-h); padding: 0 40px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #1e293b; flex-shrink: 0; }
.brand img { width: 52px; height: 52px; border-radius: 12px; display: block; }
.brand span { font-family: var(--sans); font-weight: 800; font-size: 23px; letter-spacing: -0.01em; }
.brand:hover { color: #1e293b; }
.brand-sm img { width: 36px; height: 36px; border-radius: 9px; }
.brand-sm span { font-size: 20px; }
.site-nav { display: flex; align-items: center; flex: 1; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 32px; flex: 1; }
.nav-links > a { color: #64748b; text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .2s; }
.nav-links > a:hover { color: #1e293b; }
.nav-links > a[aria-current="page"] { color: var(--green-deep); font-weight: 600; }
.nav-end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.lang { flex-shrink: 0; display: inline-flex; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #fff; }
.lang button { font: 700 13px var(--sans); padding: 6px 12px; border: 0; background: transparent; color: #64748b; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--green); color: #fff; }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; cursor: pointer; position: relative; }
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { position: absolute; left: 13px; width: 20px; height: 2px; background: #1e293b; content: ""; transition: transform .2s, opacity .2s; }
.menu-btn .bars { top: 23px; }
.menu-btn .bars::before { left: 0; top: -7px; }
.menu-btn .bars::after { left: 0; top: 7px; }
.site-head.open .menu-btn .bars { background: transparent; }
.site-head.open .menu-btn .bars::before { transform: translateY(7px) rotate(45deg); }
.site-head.open .menu-btn .bars::after { transform: translateY(-7px) rotate(-45deg); }
/* Pages cached before the bins-usa header (5 Oct 2026) still have the links straight
   inside .site-nav and an Install button in the bar; style them like the new header. */
.site-nav > a { color: #64748b; text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; margin: 0 16px; }
.site-nav > a:hover { color: #1e293b; }
.site-nav > a[aria-current="page"] { color: var(--green-deep); font-weight: 600; }
.site-nav > a:first-child { margin-left: auto; }
.site-nav > a + .nav-end { margin-left: auto; }
.site-head .nav-cta { display: none; }
@media (max-width: 1360px) { .nav-links { gap: 22px; } .head-row { padding: 0 24px; } }
@media (max-width: 1180px) {
  :root { --head-h: 68px; }
  .head-row { padding: 0 16px; }
  .brand img { width: 42px; height: 42px; border-radius: 10px; }
  .brand span { font-size: 20px; }
  .menu-btn { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 2px solid var(--green); flex-direction: column; align-items: stretch; padding: 8px 16px 20px; box-shadow: 0 18px 30px -18px rgba(18, 32, 28, .35); max-height: calc(100vh - var(--head-h)); overflow-y: auto; }
  .site-head.open .site-nav { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > a { margin: 0; font-size: 17px; min-height: 52px; padding: 12px 8px; display: flex; align-items: center; border-bottom: 1px solid #eef2f6; }
  .nav-links > a { font-size: 17px; min-height: 52px; padding: 12px 8px; display: flex; align-items: center; border-bottom: 1px solid #eef2f6; }
  .nav-links > a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--green); padding-left: 16px; }
  .nav-end { margin-top: 16px; }
  .lang button { padding: 10px 16px; font-size: 14px; }
}
/* The full name fits with the links only on wide screens; in between and on phones the bar shows MarkSentry. */
@media (max-width: 560px), (min-width: 1181px) and (max-width: 1480px) { .brand-sub { display: none; } }
@media (max-width: 420px) { .brand span { font-size: 18px; } .brand { gap: 10px; } .brand img { width: 40px; height: 40px; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 16.5px var(--sans); padding: 13px 22px; min-height: 48px; border-radius: 11px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; white-space: nowrap; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); color: #fff; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--green-deep); }
.btn-light:hover { background: var(--green-soft); color: var(--green-deep); }
.btn-outline-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- Type helpers ---------- */
.eyebrow { font: 500 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--green); }
.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-2); max-width: 640px; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section.tint { background: var(--paper-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(30px, 4.2vw, 44px); margin-bottom: 14px; }
.section-head p { color: var(--ink-2); font-size: 18px; margin: 0; }
.page-head { padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px); }
.page-head h1 { font-size: clamp(38px, 6vw, 64px); max-width: 900px; margin-bottom: 18px; letter-spacing: -0.02em; }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 100px); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } }
.hero h1 { font-size: clamp(40px, 6.4vw, 72px); letter-spacing: -0.025em; margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--green-deep); }
.hero .lead { margin-bottom: 30px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { margin-top: 18px; font-size: 14.5px; color: var(--muted); }

/* ---------- Inspection card (the honest illustration) ---------- */
.specimen-label { position: absolute; top: -13px; left: 22px; z-index: 2; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 4px 10px; border-radius: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px var(--sans); padding: 4px 11px; border-radius: 999px; border: 1px solid; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.infringes { color: var(--red); background: var(--red-soft); border-color: #f5c2bd; }
.chip.review { color: var(--amber); background: var(--amber-soft); border-color: #f1d3a3; }
.chip.clean { color: var(--ok); background: var(--green-soft); border-color: #b6dccf; }
.caption { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-2 { display: grid; gap: 22px; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card h3 { font-size: 22px; margin-bottom: 10px; }
.card p { color: var(--ink-2); margin: 0; }
.card p + p { margin-top: 10px; }
.card .tag { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 14px; }
.icon { width: 44px; height: 44px; border-radius: 11px; background: var(--green-soft); display: grid; place-items: center; margin-bottom: 18px; }
.icon svg { width: 24px; height: 24px; }
a.card { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; display: block; }
a.card:hover { border-color: var(--green); transform: translateY(-2px); }

.problem { display: grid; gap: 36px; }
@media (min-width: 900px) { .problem { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }
.problem h2 { font-size: clamp(30px, 4.2vw, 44px); }
.problem-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.problem-list li { padding: 18px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; gap: 14px; color: var(--ink-2); }
.problem-list li b { color: var(--ink); display: block; font-size: 18px; margin-bottom: 2px; }
.problem-list .n { font: 500 14px var(--mono); color: var(--green-deep); padding-top: 3px; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 30px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n { font: 600 34px/1 var(--serif); color: var(--green); }
.step h3 { font-size: 26px; margin-bottom: 10px; }
.step p { color: var(--ink-2); max-width: 700px; }
.step ul { color: var(--ink-2); margin: 0; padding-left: 20px; }
.step li { margin-bottom: 6px; }
@media (max-width: 899px) { .step ul { grid-column: 2; } }
@media (min-width: 900px) { .step { grid-template-columns: 110px 1fr 1fr; gap: 36px; } .step-n { font-size: 48px; } }
.diagram { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; overflow-x: auto; }
.diagram svg { display: block; min-width: 760px; width: 100%; height: auto; }

/* ---------- Pricing ---------- */
.price-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; }
.plan h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.plan .amount { font: 600 38px/1.1 var(--serif); margin: 4px 0; }
.plan .amount small { font: 500 15px var(--sans); color: var(--muted); }
.plan .quota { font: 500 14px var(--mono); color: var(--green-deep); margin: 6px 0 12px; }
.plan p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.plan.feature { border: 2px solid var(--green); }
.three { display: grid; gap: 18px; }
@media (min-width: 860px) { .three { grid-template-columns: repeat(3, 1fr); } }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-2); }
tbody tr:last-child td { border-bottom: 0; }
th { font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
td.num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq h2.group { font-size: 26px; margin: 44px 0 14px; }
.faq h2.group:first-child { margin-top: 0; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
details summary { cursor: pointer; font-weight: 600; font-size: 17.5px; padding: 18px 52px 18px 20px; list-style: none; position: relative; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 500 24px var(--mono); color: var(--green); }
details[open] summary::after { content: "\2212"; }
details .ans { padding: 0 20px 18px; color: var(--ink-2); }
details .ans p:last-child { margin-bottom: 0; }

/* ---------- Notes ---------- */
.note { background: var(--green-soft); border-left: 4px solid var(--green); border-radius: 0 12px 12px 0; padding: 18px 22px; color: var(--ink-2); }
.note p:last-child { margin: 0; }
.note.warn { background: var(--amber-soft); border-color: var(--amber); }
.limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.limits li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 16px 50px; position: relative; color: var(--ink-2); }
.limits li::before { content: "!"; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 50%; background: var(--amber-soft); color: var(--amber); font: 700 14px/22px var(--mono); text-align: center; }
.limits li b { color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--green-deep); color: #fff; padding: clamp(48px, 7vw, 80px) 0; background-image: radial-gradient(circle at 92% 20%, rgba(255,255,255,.09) 0 120px, transparent 121px), radial-gradient(circle at 92% 20%, transparent 0 150px, rgba(255,255,255,.06) 151px 158px, transparent 159px); }
.cta-inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,.85); margin: 0; font-size: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Blog ---------- */
.posts { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.post-card:hover { border-color: var(--green); transform: translateY(-2px); color: inherit; }
.post-card .art { aspect-ratio: 16 / 9; display: block; border-bottom: 1px solid var(--line-2); }
.post-card .art svg { width: 100%; height: 100%; display: block; }
.post-card .body { padding: 20px 22px 24px; }
.post-card h3 { font-size: 22px; margin: 6px 0 10px; }
.post-card p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.date { font: 500 12.5px var(--mono); color: var(--muted); letter-spacing: .04em; }
.article { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 0 40px; }
.article .date { display: block; margin-top: 4px; }
.article h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.02em; margin: 10px 0 18px; }
.article .dek { font-size: 20px; color: var(--ink-2); margin-bottom: 28px; }
.article .art { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 36px; aspect-ratio: 16 / 9; }
.article .art svg { width: 100%; height: 100%; display: block; }
.prose { font-size: 18px; line-height: 1.75; }
.prose h2 { font-size: 30px; margin: 44px 0 14px; }
.prose h3 { font-size: 22px; margin: 32px 0 10px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.post-foot { max-width: 760px; margin: 0 auto 64px; }
.back { display: inline-block; margin-top: 24px; font-weight: 600; }

/* ---------- Legal ---------- */
.legal { max-width: 800px; padding: clamp(40px, 6vw, 72px) 0 72px; }
.legal h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 8px; }
.legal h2 { font-size: 24px; margin: 36px 0 10px; }
.legal li { margin-bottom: 8px; }

/* ---------- Contact ---------- */
.contact-cards { display: grid; gap: 18px; }
@media (min-width: 860px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.contact-cards .card a.big { font: 600 19px var(--sans); word-break: break-all; }
.contact-form-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .contact-form-grid { grid-template-columns: 0.75fr 1.25fr; gap: 56px; } }
.contact-form-intro h2 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 12px; }
.contact-form-intro p { color: var(--ink-2); margin: 0; }
.form-state { margin-bottom: 18px; }
.form-state:focus { outline: none; }
.contact-form { display: grid; gap: 18px; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: 15px; color: var(--ink); }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: 16px/1.5 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 13px; min-height: 48px; width: 100%; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; min-height: 150px; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.field [aria-invalid="true"] { border-color: var(--red); }
.field-error { color: var(--red); font-size: 14.5px; margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-actions .btn[disabled] { opacity: .6; cursor: progress; }
.form-fine { color: var(--muted); font-size: 14px; margin: 0; flex: 1 1 220px; }
@media (max-width: 480px) { .contact-form.card { padding: 20px; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); color: #c9d3cf; padding: 64px 0 28px; font-size: 15.5px; }
.site-foot a { color: #e7eeeb; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot .brand span { color: #fff; }
.foot-grid { display: grid; gap: 36px; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.foot-brand p { margin: 16px 0 0; max-width: 360px; }
.foot-brand .disclaimer { color: #9fb0aa; font-size: 14px; }
.site-foot nav { display: flex; flex-direction: column; gap: 10px; }
.site-foot nav a { word-break: break-word; min-height: 28px; }
.site-foot h2 { font: 500 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8ea39c; margin-bottom: 6px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding-top: 22px; font-size: 13.5px; color: #8ea39c; }

/* ---------- Testimonial ---------- */
.testimonial { margin: 0 auto; max-width: 880px; display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 40px); }
.t-logo { width: 96px; height: 96px; border-radius: 18px; display: block; }
.testimonial blockquote { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(19px, 2.2vw, 24px); line-height: 1.45; color: var(--ink); }
.testimonial figcaption { font-size: 16px; color: var(--ink); }
.t-note { display: block; color: var(--muted); font-size: 14.5px; margin-top: 2px; }
@media (max-width: 600px) { .testimonial { grid-template-columns: 1fr; gap: 16px; } .t-logo { width: 72px; height: 72px; } }

/* ---------- Product images: hero, screenshots, promo video ---------- */
picture { display: block; }
picture img { display: block; width: 100%; height: auto; }
.hero-shot { position: relative; margin: 0; max-width: 560px; justify-self: center; width: 100%; }
.hero-shot .specimen-label { top: 6px; left: auto; right: 10px; }

/* The hero, animated (index.html). A layer the size of the hero image, drawn in its
   own 770-unit grid (1 unit = 100cqw / 770), over the image: the red scan line sweeps
   the photo top to bottom and left to right, then the detection box and the finding
   appear, hold, and the loop starts again (7 s). The same laser as the app's photo
   test (src/routes/app.ts, .laser). The image underneath paints first; reduced motion
   shows the final state and no laser. */
.hero-stage { position: relative; container-type: inline-size; }
.hero-anim { position: absolute; inset: 0; z-index: 1; background: var(--paper); overflow: hidden; pointer-events: none; }
/* While it scans, the photo sits in the middle of the column; it moves to the left
   as the finding comes in, to where the static image has it. */
.ha-photo { position: absolute; left: 3.9%; top: 3.95%; width: 51.95%; height: 63.16%; border-radius: calc(100cqw * 24 / 770); background: #eef2f0; box-shadow: 0 calc(100cqw * 24 / 770) calc(100cqw * 48 / 770) -30px rgba(18,32,28,.35); overflow: hidden; transform: translateX(38.7%); animation: ha-slide 7s ease infinite; }
.ha-example { position: absolute; right: 4.5%; top: 4%; z-index: 1; background: var(--ink); color: #fff; font: 500 calc(100cqw * 13 / 770) / 1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: calc(100cqw * 8 / 770) calc(100cqw * 10 / 770); border-radius: calc(100cqw * 7 / 770); }
/* With the animated layer, the Example badge rides on the photo's corner instead. */
@supports (width: 1cqw) { .hero-shot > .specimen-label { display: none; } }
.ha-tee { position: absolute; inset: 0; width: 100%; height: 100%; }
.ha-tag { position: absolute; left: 4.5%; top: 4%; z-index: 1; background: #12201c; color: #fff; font: 600 calc(100cqw * 13 / 770) / 1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: calc(100cqw * 8 / 770) calc(100cqw * 10 / 770); border-radius: calc(100cqw * 7 / 770); }
.ha-lh, .ha-lv { position: absolute; background: #ff1a1a; box-shadow: 0 0 10px 3px rgba(255,26,26,.6); }
.ha-lh { left: 0; right: 0; top: 0; height: 3px; animation: ha-down 7s linear infinite; }
.ha-lv { top: 0; bottom: 0; left: 0; width: 3px; animation: ha-across 7s linear infinite; }
.ha-box { opacity: 0; animation: ha-box 7s ease infinite; }
.ha-card { position: absolute; left: 35.06%; top: 52.63%; width: 61.04%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: calc(100cqw * 6 / 770); padding: calc(100cqw * 28 / 770) calc(100cqw * 30 / 770); background: #fff; border: 1px solid var(--line); border-radius: calc(100cqw * 22 / 770); box-shadow: 0 calc(100cqw * 30 / 770) calc(100cqw * 60 / 770) -30px rgba(18,32,28,.45); opacity: 0; animation: ha-card 7s ease infinite; }
.ha-chip { display: inline-flex; align-items: center; gap: .45em; font: 600 calc(100cqw * 18 / 770) / 1 var(--sans); color: #b42318; background: #fdecea; border-radius: 999px; padding: .55em .9em; margin-bottom: calc(100cqw * 10 / 770); }
.ha-chip::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.ha-kicker { font: 500 calc(100cqw * 13 / 770) / 1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ha-title { font: 700 calc(100cqw * 24 / 770) / 1.2 var(--sans); color: var(--ink); }
.ha-reason { font: 400 calc(100cqw * 17 / 770) / 1.45 var(--sans); color: var(--ink-2); }
.ha-btns { display: flex; gap: calc(100cqw * 10 / 770); margin-top: calc(100cqw * 14 / 770); }
.ha-btn { font: 600 calc(100cqw * 16 / 770) / 1 var(--sans); padding: .75em 1.05em; border-radius: calc(100cqw * 8 / 770); border: 1px solid var(--line); color: var(--ink); background: #fff; }
.ha-btn.dark { background: #12201c; border-color: #12201c; color: #fff; }
@keyframes ha-down { 0% { top: 0; opacity: 1; } 40% { top: calc(100% - 3px); opacity: 1; } 45%, 100% { top: calc(100% - 3px); opacity: 0; } }
@keyframes ha-across { 0% { left: 0; opacity: 1; } 40% { left: calc(100% - 3px); opacity: 1; } 45%, 100% { left: calc(100% - 3px); opacity: 0; } }
@keyframes ha-slide { 0%, 44% { transform: translateX(38.7%); } 54%, 90% { transform: none; } 98%, 100% { transform: translateX(38.7%); } }
@keyframes ha-box { 0%, 42% { opacity: 0; } 48%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ha-card { 0%, 46% { opacity: 0; transform: translateY(4%); } 55%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(2%); } }
@media (prefers-reduced-motion: reduce) {
  .ha-lh, .ha-lv { display: none; }
  .ha-box, .ha-card, .ha-photo { animation: none; opacity: 1; transform: none; }
}
/* Browsers without container units keep the static image alone. */
@supports not (width: 1cqw) { .hero-anim { display: none; } }
.shot { margin: 0; }
.shot picture img { border-radius: 12px; border: 1px solid var(--line); background: #fff; box-shadow: 0 18px 40px -28px rgba(18,32,28,.4); }
.shot-n { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; font: 600 14px/30px var(--sans); text-align: center; }
.walk-tabs { display: none; }
.walk-on .walk-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }
@media (min-width: 720px) { .walk-on .walk-tabs { grid-template-columns: repeat(4, 1fr); } }
.walk-tabs button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; font: 600 15.5px var(--sans); color: var(--ink-2); text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.walk-tabs button .shot-n { flex-shrink: 0; background: var(--paper-2); color: var(--ink-2); }
.walk-tabs button[aria-selected="true"] { border-color: var(--green); color: var(--ink); box-shadow: 0 0 0 1px var(--green); }
.walk-tabs button[aria-selected="true"] .shot-n { background: var(--green); color: #fff; }
.walk-tabs button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.walk-panel { display: grid; gap: 14px; }
.walk-panel + .walk-panel { margin-top: 40px; }
.walk-on .walk-panel + .walk-panel { margin-top: 0; }
.walk-panel picture { width: 100%; max-width: 920px; margin: 0 auto; }
.walk-email picture { max-width: 520px; }
.walk-panel figcaption { text-align: center; color: var(--ink-2); max-width: 720px; margin: 0 auto; }
.walk-panel figcaption b { color: var(--ink); }
.split { display: grid; gap: 22px; align-items: center; padding: 32px 0; border-top: 1px solid var(--line); }
.split:first-of-type { border-top: 0; }
.split h3 { font-size: 24px; margin-bottom: 10px; }
.split p { color: var(--ink-2); margin: 0; }
@media (min-width: 900px) { .split { grid-template-columns: 1.15fr 1fr; gap: 48px; } .split:nth-of-type(even) .shot { order: 2; } }
.step-shot { margin-top: 6px; max-width: 640px; }
@media (min-width: 900px) { .step-shot { grid-column: 2 / -1; } }
@media (max-width: 899px) { .step-shot { grid-column: 1 / -1; } }
.video { margin: 0 0 40px; }
html[lang="es"] .video-play .only-en, html:not([lang="es"]) .video-play .only-es { display: none; }
.video-play, .video iframe { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #000; }
.video-play { padding: 0; cursor: pointer; }
.video-play picture, .video-play img { width: 100%; height: 100%; object-fit: cover; }
.video-icon { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(18,32,28,.82); box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .15s, background .15s; }
.video-icon::after { content: ""; position: absolute; left: 34px; top: 26px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff; }
.video-play:hover .video-icon, .video-play:focus-visible .video-icon { background: var(--green); transform: scale(1.06); }
.video-play:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.shot-tall picture { max-width: 440px; }

/* Katya's launcher on phones (public/katya.js draws it with inline styles): smaller and
   clear of the home indicator, with room at the end of the page so it never sits on
   the last lines of text. Behaviour unchanged. */
@media (max-width: 600px) {
  #katyaLauncher { width: 48px !important; height: 48px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  #katyaBubble { right: 70px !important; bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; max-width: calc(100vw - 96px) !important; }
  #katyaPanel { right: 12px !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; max-width: calc(100vw - 24px) !important; }
  .foot-legal { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}