*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #faf6ee;
  --surface: #ffffff;
  --border: #e6ddca;
  --accent: #2f7a6b;
  --accent-light: #3f9382;
  --text: #2a2620;
  --muted: #756c5c;
  --green: #2f8f5a;
  --red: #b23f3f;
  --radius: 12px;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  padding-bottom: 3rem;
}
a { color: var(--accent); }
header.site {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  max-width: 640px; margin: 0 auto;
}
.logo { font-weight: 700; font-size: 1.15rem; color: var(--text); text-decoration: none; }
main { max-width: 640px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
h1 { font-size: 1.9rem; line-height: 1.3; margin-bottom: .75rem; font-weight: 700; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p.lede { color: var(--muted); font-size: 1.05rem; margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------------
   Landing
--------------------------------------------------------------------- */
#landing { text-align: center; padding: 1rem 0 .5rem; }
#landing .lede { max-width: 46ch; margin-left: auto; margin-right: auto; }
.why {
  color: var(--text); font-size: .92rem; line-height: 1.5;
  max-width: 42ch; margin: 0 auto 1.6rem;
}

.arm-illustration-label {
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin: 1.6rem 0 0;
}
.arm-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: .4rem auto 1.6rem;
  padding: 2.5rem 1rem;
}
.arm-illustration-shape {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 60px;
  background: linear-gradient(180deg, #efe7d6, #e3d9c2);
  border: 1px solid var(--border);
  border-radius: 999px 999px 30px 30px;
}
.arm-illustration-highlight {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 1.5px dashed var(--accent);
  border-radius: 6px;
  padding: .3rem .6rem;
  font-family: ui-monospace, monospace;
  font-size: .78rem;
  color: var(--accent);
  white-space: nowrap;
}

.reassurance { color: var(--muted); font-size: .85rem; margin-top: .75rem; }

/* The gap after the CTA already has the trust line's own margin plus
   #landing's bottom padding — the default .content-block top margin on
   top of that reads as dead air rather than a deliberate break. */
#how-it-works.content-block { margin-top: 1.6rem; }

/* ---------------------------------------------------------------------
   Progress
--------------------------------------------------------------------- */
.scan-progress {
  display: flex;
  list-style: none;
  gap: .5rem;
  margin: 1.5rem 0;
  font-size: .78rem;
  color: var(--muted);
}
.scan-progress .step {
  flex: 1;
  text-align: center;
  padding: .5rem .3rem;
  border-bottom: 3px solid var(--border);
}
.scan-progress .step.active { color: var(--text); border-color: var(--accent); font-weight: 700; }
.scan-progress .step.done { color: var(--green); border-color: var(--green); }

/* ---------------------------------------------------------------------
   Scan steps (capture panels + results)
--------------------------------------------------------------------- */
.scan-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 2px rgba(42,38,32,.04);
}
.scan-step h2 { margin-top: 0; }
.scan-step .hint { font-size: .88rem; color: var(--muted); margin-bottom: .85rem; }

/* Guided flow: only show capture controls before a photo exists, and only
   show post-capture controls (Retake/Continue/Adjust) once a photo
   exists — toggled via the .has-photo class set by scan-glasses-ui.js. */
.scan-step .after-photo-only { display: none; }
.scan-step.has-photo .after-photo-only { display: block; }
.scan-step.has-photo .before-photo-only { display: none; }

.upload-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .75rem; }
.primary-actions { margin-bottom: .5rem; }

button, .btn {
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: .65rem 1.1rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
button:hover, .btn:hover { border-color: var(--accent); }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-light); }
button.primary:disabled, button:disabled { opacity: .4; cursor: not-allowed; }
button.ghost { background: transparent; border-color: var(--border); }
button.big-cta {
  display: block;
  width: 100%;
  font-size: 1.05rem;
  padding: 1rem;
  margin-bottom: .5rem;
}
.arm-adjust-panel { margin-top: .75rem; }
input[type="file"] { display: none; }

.canvas-wrap {
  position: relative;
  background: #1c1a16;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: .75rem;
  max-width: 100%;
  display: none;
}
.canvas-wrap.visible { display: block; }
canvas.preview { display: block; max-width: 100%; height: auto; touch-action: none; }

.quality-msgs { list-style: none; margin: .5rem 0; display: flex; flex-direction: column; gap: .35rem; }
.quality-msgs li {
  font-size: .84rem;
  padding: .5rem .65rem;
  border-radius: 6px;
  background: rgba(178,63,63,.08);
  color: var(--red);
  border: 1px solid rgba(178,63,63,.25);
}
.quality-override { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--muted); margin-top: .5rem; }
.quality-override[hidden] { display: none; }

.status { font-size: .85rem; margin-top: .5rem; color: var(--muted); }
.status[data-state="ok"] { color: var(--green); }
.status[data-state="error"] { color: var(--red); }

/* ---------------------------------------------------------------------
   Results
--------------------------------------------------------------------- */
.results-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 560px) { .results-grid { grid-template-columns: 1fr 1fr; } }
.result-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.result-panel img { max-width: 100%; border-radius: 6px; margin-bottom: .6rem; }

.size-heading { margin-top: 1.5rem; margin-bottom: .25rem; }

.field-group { margin: 1rem 0; }
.field-group label { display: block; font-size: .84rem; color: var(--muted); margin-bottom: .35rem; font-weight: 600; }
.field-group input,
.field-group textarea,
.field-group select {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 1rem; padding: .65rem .8rem;
}
.field-group textarea { min-height: 9rem; resize: vertical; }

/* Netlify Forms honeypot — off-screen rather than display:none, so the field
   stays in the submitted payload while remaining invisible to people. */
.honeypot { position: absolute; left: -9999px; }

.ambiguous-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.ambiguous-chip {
  font-size: .78rem; padding: .3rem .6rem; border-radius: 20px;
  background: rgba(47,122,107,.08); border: 1px solid rgba(47,122,107,.3); color: var(--accent);
  cursor: pointer;
}
.ambiguous-chip[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* De-emphasized: the original transcription is reference material, not
   the primary thing the user is meant to look at (the editable fields
   above are). Small and quiet on purpose — not a code/terminal block. */
.original-text-note { margin: 1.25rem 0; }
.raw-text-small {
  font-family: ui-monospace, monospace;
  font-size: .78rem;
  color: var(--muted);
  word-break: break-word;
}

.retake-banner {
  background: rgba(178,63,63,.08); border: 1px solid rgba(178,63,63,.3); border-radius: var(--radius);
  padding: .9rem 1.1rem; margin: 1rem 0; font-size: .92rem;
}
.warnings-list { margin: .75rem 0; padding-left: 1.1rem; font-size: .86rem; color: var(--muted); }
.warnings-list li { margin-bottom: .3rem; }

.confirm-row { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
/* The confirmation is the most important tap in the flow and it is made with
   a thumb, one-handed, often while holding the glasses in the other hand. */
.confirm-row button { min-height: 48px; padding-left: 1.1rem; padding-right: 1.1rem; }
.confirmed-banner {
  background: rgba(47,143,90,.08); border: 1px solid rgba(47,143,90,.3); border-radius: var(--radius);
  padding: 1rem; margin-top: 1rem; font-size: .92rem;
}
.frame-disclaimer { font-size: .84rem; color: var(--muted); margin-top: .5rem; }

/* ── FRAME ID CARD ───────────────────────────────────────────────────
   Should read as a reusable identity document, not as raw OCR output. */
.frame-id-card {
  background: var(--surface); border: 2px solid var(--accent);
  border-radius: var(--radius); padding: 1.25rem 1.1rem; margin-top: 1.5rem;
}
.frame-id-card[hidden] { display: none; }

.frame-id-eyebrow {
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); margin-bottom: .3rem;
}

.frame-id-shared-notice {
  background: rgba(47,122,107,.08); border: 1px solid rgba(47,122,107,.3);
  border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: 1rem; font-size: .88rem;
}
.frame-id-shared-notice[hidden] { display: none; }
.frame-id-shared-notice a { color: inherit; }

/* Pre-capture guidance — sits before the photo is taken, gone once it is.
   The goal is a readable photo, not a longer page, so this stays compact:
   a title, four short lines, one closing fact. No new capture mechanism,
   no photo assets — see run notes for why. */
.photo-tips {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem 1rem; margin: .9rem 0 1.1rem;
}
.photo-tips-title { font-weight: 700; font-size: .92rem; margin-bottom: .5rem; }
.photo-tips-list { list-style: none; display: grid; gap: .4rem; }
.photo-tips-list li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .88rem; color: var(--text); line-height: 1.45;
}
.photo-tips-icon {
  flex: 0 0 auto; width: 1.4rem; text-align: center;
  color: var(--accent); font-size: .95rem; line-height: 1.45;
}
.photo-tips-note {
  font-size: .82rem; color: var(--muted); margin-top: .65rem;
  padding-top: .6rem; border-top: 1px solid var(--border);
}
.photo-tips-reminder { color: var(--muted); font-size: .85rem; margin-top: -.4rem; }

/* Shared view: the confirmed-fields form, photo panels, warnings and the
   confirm button all belong to a fresh scan on THIS page load, which a
   shared link never had. Rather than hide each one individually in JS,
   #scan-results gets a class and everything except the card itself
   disappears — a shared link is deliberately card-only. */
#scan-results.shared-mode > *:not(.frame-id-card) { display: none; }
.frame-id-identity {
  font-size: 1.5rem; line-height: 1.25; font-weight: 700;
  margin-bottom: .9rem; overflow-wrap: anywhere;
}

.frame-id-headline {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  padding: .85rem 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); margin-bottom: .9rem;
}
.frame-id-headline dt {
  font-size: .74rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem;
}
.frame-id-headline dd {
  margin-left: 0; font-size: 1.1rem; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.frame-id-headline dd.value-missing {
  font-family: inherit; font-weight: 400; font-size: .95rem; color: var(--muted);
}

.frame-id-fields { list-style: none; margin: 0 0 1rem; }
.frame-id-field {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem;
}
.frame-id-field:last-child { border-bottom: 0; }
.frame-id-field-name { color: var(--muted); }
.frame-id-field-value {
  grid-column: 1; font-weight: 600; overflow-wrap: anywhere;
}
.frame-id-field.is-missing .frame-id-field-value {
  font-weight: 400; color: var(--muted); font-style: italic;
}
.frame-id-field-status {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap;
}
.frame-id-field.is-confirmed .frame-id-field-status {
  background: rgba(47,143,90,.12); color: var(--green); border: 1px solid rgba(47,143,90,.3);
}
.frame-id-field.is-missing .frame-id-field-status {
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
}

.frame-id-card textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88rem; line-height: 1.55; min-height: 0; resize: vertical;
}

.frame-id-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.frame-id-actions button { min-height: 48px; flex: 1 1 auto; }
.frame-id-actions button:disabled { opacity: .4; cursor: not-allowed; }

/* Short trust line under the primary actions: what was confirmed, and the
   privacy fact that matters most here, in one line instead of scattered. */
.frame-id-confirm-note {
  font-size: .82rem; color: var(--muted); text-align: center;
  margin: .6rem 0 0;
}

/* "Edit the values" reads as an escape hatch, not a third action of equal
   weight to Copy/Share — a text-style control keeps that hierarchy honest
   while staying a real 44px+ tap target. */
.frame-id-edit-link {
  display: block; margin: .5rem auto 0; padding: .6rem .5rem;
  background: none; border: none; color: var(--accent);
  font-size: .88rem; text-decoration: underline; cursor: pointer;
  min-height: 44px;
}
.frame-id-edit-link:hover { color: var(--accent-dark, var(--accent)); }
.frame-id-edit-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* The Google search action plus its "copy the text instead" fallback,
   grouped so hiding/showing both together (frame-id-search-wrap) never
   leaves one visible without the other. */
#frame-id-search-wrap[hidden] { display: none; }
.next-action-copy-link {
  display: block; width: 100%; margin: -.4rem .6rem .6rem;
  background: none; border: none; color: var(--muted);
  font-size: .8rem; text-decoration: underline; text-align: left;
  cursor: pointer; padding: .3rem 1rem .6rem; min-height: 36px;
}
.next-action-copy-link:disabled { opacity: .4; cursor: not-allowed; text-decoration: none; }

/* Point-of-click affiliate disclosure, on the eBay action itself — see the
   HTML comment above this element for why it exists alongside the general
   .next-disclosure paragraph rather than instead of it. */
.next-action-sponsored-tag {
  display: block; font-size: .78rem; color: var(--muted);
  margin: .15rem 0 .6rem; font-style: italic;
}

.frame-id-warning {
  background: rgba(178,63,63,.06); border: 1px solid rgba(178,63,63,.25);
  border-radius: var(--radius); padding: .85rem 1rem; margin-top: .9rem; font-size: .88rem;
}
.frame-id-warning[hidden] { display: none; }

.frame-id-next { margin-top: 1.4rem; }
.frame-id-next h3 { font-size: 1rem; margin-bottom: .6rem; }

.next-action {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9rem 1rem; margin-bottom: .6rem; min-height: 48px;
}
.next-action[hidden] { display: none; }
a.next-action:hover { border-color: var(--accent); }
a.next-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.next-action-title { display: block; font-weight: 600; margin-bottom: .2rem; color: var(--accent); }
.next-action-static .next-action-title { color: var(--text); }
.next-action-body { display: block; font-size: .87rem; color: var(--muted); line-height: 1.5; }

/* Affiliate note directly under "What to do next", above the links it
   describes — FTC guidance is that a disclosure is close to and before the
   link, not only on a separate page. */
.next-disclosure {
  font-size: .82rem; color: var(--muted); line-height: 1.5;
  margin: 0 0 .7rem;
}

/* eBay secondary action. The link inside a static card needs its own
   accent colour and focus ring — .next-action-static greys titles out,
   which is right for the optician note but wrong for a real link. */
.next-action-link { color: var(--accent); text-decoration: none; }
.next-action-static .next-action-link { color: var(--accent); }
.next-action-link:hover { text-decoration: underline; }
.next-action-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.next-action-note {
  display: block; font-size: .8rem; color: var(--muted);
  margin-top: .5rem; opacity: .85;
}

/* The user's own confirmed values, shown next to the action so they can
   be compared against a listing without scrolling back up. */
.ebay-check { margin: .55rem 0 .6rem; }
.ebay-check-lead { font-size: .85rem; margin: 0 0 .25rem; }
.ebay-check-list { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: 0; }
.ebay-check-list > div { display: flex; gap: .4rem; align-items: baseline; }
.ebay-check-list dt { font-size: .82rem; color: var(--muted); margin: 0; }
.ebay-check-list dd {
  font-size: .9rem; margin: 0; font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.frame-id-footnote {
  font-size: .82rem; color: var(--muted); margin-top: 1rem;
  padding-top: .8rem; border-top: 1px solid var(--border);
}

/* ── CONTENT SECTIONS ─────────────────────────────────────────────── */
.content-block { margin-top: 2.75rem; }
.content-block h2 { font-size: 1.3rem; margin-bottom: .7rem; line-height: 1.3; }
.content-block h3 { font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
.content-block p { margin-bottom: .85rem; }

/* Collapsed by default — the content is still real HTML (nothing is
   removed, nothing is loaded in on click), just not forced on every
   visitor's scroll. Search engines read <details> content whether it is
   open or closed, so nothing here costs SEO. */
.content-details summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .5rem;
}
.content-details summary::-webkit-details-marker { display: none; }
.content-details summary h2 { margin: 0; flex: 1 1 auto; }
.content-details summary::after {
  content: "+"; flex: 0 0 auto; font-size: 1.3rem; line-height: 1;
  color: var(--accent); font-weight: 700; width: 1.4rem; text-align: center;
}
.content-details[open] summary::after { content: "\2212"; } /* minus sign */
.content-details summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px;
}
.content-details[open] summary { margin-bottom: .3rem; }

.how-steps { margin: 0 0 1rem 1.15rem; }
.how-steps li { margin-bottom: .8rem; padding-left: .2rem; }
.how-steps strong { display: block; }

.example-marking { text-align: center; margin: 1.1rem 0 1.2rem; }
.example-marking .code-inline { font-size: 1.05rem; padding: .45rem .75rem; }

.measure-list { margin: 1rem 0 1.2rem; }
.measure-list dt {
  font-weight: 700; margin-top: .9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem;
}
.measure-list dd { margin-left: 0; color: var(--muted); margin-top: .2rem; }

.plain-list { margin: 0 0 1rem 1.15rem; }
.plain-list li { margin-bottom: .7rem; }

.callout {
  background: var(--surface); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .95rem 1.1rem; margin: 1.2rem 0;
}

.faq-item { border-top: 1px solid var(--border); padding-top: .9rem; margin-top: .9rem; }
.faq-item h3 { margin-top: 0; margin-bottom: .35rem; }
.faq-item p { margin-bottom: 0; color: var(--muted); }

.code-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: .05rem .35rem; font-size: .9em; white-space: nowrap;
}

/* ── MOBILE ───────────────────────────────────────────────────────────
   The camera flow is the primary use, so touch targets and a layout that
   does not shift when the result appears matter more than density. */
html, body { overflow-x: hidden; }
img, canvas, textarea { max-width: 100%; }

@media (max-width: 480px) {
  main { padding: 1.5rem 1rem 2.5rem; }
  .frame-id-identity { font-size: 1.3rem; }
  .frame-id-headline { grid-template-columns: 1fr; gap: .6rem; }
  .frame-id-actions button { flex: 1 1 100%; }
  .frame-id-field { grid-template-columns: 1fr; }
  .frame-id-field-status { grid-row: auto; grid-column: 1; justify-self: start; margin-top: .2rem; }
  .content-block h2 { font-size: 1.18rem; }

  /* On a short phone screen, the CTA is the thing that must be reachable
     without scrolling — the decorative illustration is the one element
     here with no functional cost to shrinking. */
  #landing { padding-top: .5rem; }
  h1 { font-size: 1.5rem; }
  p.lede { font-size: .95rem; margin-bottom: 1rem; }
  .why { font-size: .86rem; margin-bottom: 1rem; }
  .arm-illustration-label { margin-top: .9rem; }
  .arm-illustration { padding: 1.2rem 1rem; margin: .3rem auto .9rem; }
  .arm-illustration-shape { height: 48px; }
}

footer.site { max-width: 640px; margin: 2rem auto 0; padding: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; text-align: center; }
footer.site a { color: var(--muted); }

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