@font-face {
  font-family: "Noto Sans";
  src: url("assets/NotoSans-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("assets/NotoSans-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  --paper: #fafaf2;
  --ink: #20351f;
  --muted: #4f604b;
  --green: #24562f;
  --line: #dce3cf;
  --lime: #89ad35;
  --soft: #edf3e0;
  --amber: #fbf1d5;
  --ochre: #735319;
  font-family: "Noto Sans", system-ui, sans-serif;
  color: var(--ink);
  background: #e9ede4;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #8f6320;
  outline-offset: 3px;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.frame {
  width: min(100%, 56.25dvh, 1080px);
  min-width: min(100%, 390px);
  min-height: 100dvh;
  margin: auto;
  background: var(--paper);
  container-type: inline-size;
  box-shadow: 0 0 40px #24392310;
}
:root:has(#screen[data-page="cpf"]) { background: var(--paper); }
.frame:has(#screen[data-page="cpf"]) { box-shadow: none; }
main, footer { padding-inline: 7cqw; }
main { padding-block: 6.1cqw 6cqw; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4cqw;
}
.site-header.center { justify-content: center; }
.brand { width: 23.6cqw; height: auto; }
#screen[data-page="cpf"] .brand { width: 34cqw; }
.back {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  padding-inline: 2cqw;
  min-height: max(44px, 6.65cqw);
  border: 1px solid var(--line);
  border-radius: 100px;
  background: white;
  color: var(--green);
  font-weight: 700;
  font-size: max(12px, 2.5cqw);
}
.back svg { width: max(13px, 2.4cqw); }
h1 { margin: 0; font-size: 6.3cqw; line-height: 1.13; }
h1:focus { outline: none; }
p { color: var(--muted); line-height: 1.4; }
.subtitle { margin: 2.1cqw 0 0; font-size: max(14px, 3.43cqw); }
.welcome-photo {
  width: 51.85cqw;
  height: auto;
  margin: 1.1cqw auto 2.6cqw;
}
.welcome-title { text-align: center; font-size: 5.74cqw; }
form { margin-top: 3.25cqw; }
.entry, .otp-digits span {
  width: 100%;
  min-height: max(46px, 10.46cqw);
  border: max(1px, .18cqw) solid var(--line);
  border-radius: 2.5cqw;
  background: white;
  color: var(--ink);
  text-align: center;
  font-size: 5.1cqw;
}
.entry { border-color: var(--lime); padding: 1cqw 2cqw; }
.entry::placeholder { color: var(--muted); opacity: 1; }
.keys {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.3cqw;
  margin-block: 3.2cqw;
}
.key {
  min-height: max(44px, 9.17cqw);
  border: 1px solid var(--line);
  border-radius: 2.13cqw;
  background: white;
  color: var(--green);
  font-size: max(18px, 4cqw);
  font-weight: 700;
}
.key.action { background: var(--soft); font-size: max(12px, 2.4cqw); }
.key:active, .secondary:active, .back:active { background: #dce9cc; }
.primary, .secondary {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: max(46px, 9.9cqw);
  border: 1px solid var(--green);
  border-radius: 2.5cqw;
  padding: 1cqw 6cqw;
  background: var(--green);
  color: white;
  font-size: max(15px, 3.43cqw);
  font-weight: 700;
  text-align: center;
}
.primary:is(:hover,:active) { background: #194324; }
.primary svg, .secondary svg {
  position: absolute;
  right: 4.2cqw;
  width: max(15px, 2.8cqw);
  height: auto;
}
.secondary { margin-top: 2cqw; background: white; color: var(--green); border-color: var(--line); }
.hero {
  width: 100%;
  height: auto;
  border-radius: 3.33cqw;
  margin-block: 4.9cqw 5.45cqw;
}
.visit-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 2.4cqw;
  margin-top: 4.35cqw;
}
.visit-grid.single > button { grid-column: 1 / -1; width: calc((100% - 2.4cqw) / 2); justify-self: center; }
.visit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 71.1cqw;
  padding: 2.3cqw;
  border: 1px solid var(--line);
  border-radius: 3.5cqw;
  background: white;
  color: var(--ink);
  text-align: center;
}
.visit-card.clinical { --tint: var(--amber); --accent: var(--ochre); }
.visit-card:not(.clinical) { --tint: var(--soft); --accent: var(--green); }
.visit-card:is(:hover,:active) { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.visit-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 24.55cqw;
  background: var(--tint);
  border-radius: 2.7cqw;
}
.visit-art img { width: 24.25cqw; height: 21cqw; object-fit: contain; }
.visit-name { margin-block: 4.3cqw 4cqw; font-size: max(12px, 3.98cqw); line-height: 1.15; }
.visit-date { color: var(--muted); font-size: max(12px, 3.15cqw); }
.visit-time { color: var(--green); font-size: 7.4cqw; line-height: 1.1; font-weight: 700; }
.visit-plan, .pill {
  border-radius: 100px;
  background: var(--tint, var(--soft));
  color: var(--accent, var(--green));
  font-size: max(10px, 2.68cqw);
  font-weight: 700;
  padding: .65cqw 2cqw;
}
.visit-plan { margin-block: 3.2cqw 3.1cqw; }
.visit-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  width: 100%;
  margin-top: auto;
  padding: .9cqw;
  border-radius: 1.85cqw;
  background: var(--green);
  color: white;
  font-size: max(12px, 2.87cqw);
  font-weight: 700;
}
.visit-action svg { width: max(12px, 2.5cqw); height: auto; }
.help {
  margin: 5.3cqw 0 0;
  border-top: 1px solid var(--line);
  padding-top: 3.9cqw;
  font-size: max(12px, 2.85cqw);
}
.validation-heading { margin-top: 8.8cqw; }
.validation-heading h1 { font-size: 6.67cqw; }
.tile {
  display: grid;
  place-items: center;
  width: 9cqw;
  aspect-ratio: 1;
  flex: none;
  border-radius: 2.68cqw;
  background: var(--soft);
  color: var(--green);
}
.tile svg { width: 4.8cqw; height: 4.8cqw; }
.insurer-logo { width: 21.3cqw; height: auto; margin-block: 2.2cqw 2.65cqw; }
.insurer-name { display: block; margin-block: 2.2cqw 2.65cqw; font-size: max(14px, 3cqw); color: var(--green); font-weight: 700; }
.validation-heading .subtitle { margin-top: 2.1cqw; }
#screen[data-page=token] form { margin-top: 4.1cqw; }
.label { display: block; margin-bottom: 1.35cqw; color: var(--green); font-size: max(12px, 2.6cqw); font-weight: 700; }
.otp { position: relative; }
.otp input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.otp-digits {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 1.75cqw;
  pointer-events: none;
}
.otp-digits span { display: grid; place-items: center; min-height: max(46px, 11.6cqw); }
.otp-digits .current { border-color: var(--lime); border-width: max(2px, .28cqw); }
.otp:focus-within .current { outline: 2px solid var(--green); outline-offset: 2px; }
.otp:focus-within .current:empty::after { content: ""; height: 4.2cqw; border-left: 2px solid var(--green); }
.error { color: #9c1c1c; font-weight: 700; font-size: max(13px, 2.7cqw); margin-top: 2cqw; }
.error:empty { display: none; }
.appointment {
  display: flex;
  align-items: center;
  gap: 2.1cqw;
  margin-block: 3.8cqw;
  padding: 2.65cqw;
  border: 1px solid var(--line);
  border-radius: 2.78cqw;
  background: white;
  font-size: max(12px, 3.33cqw);
  text-align: left;
}
.appointment-copy { flex: 1; }
.appointment-copy small { display: block; margin-top: .6cqw; color: var(--muted); font-size: max(11px, 2.87cqw); }
.appointment .pill { text-align: center; }
.confirmation { text-align: center; }
.confirmation .hero { margin-block: 9.1cqw 9.4cqw; border-radius: 4.35cqw; }
.confirmation h1 { font-size: 6.48cqw; }
.confirmation .subtitle { margin-top: 3.2cqw; font-size: max(14px, 3.88cqw); }
.confirmation .appointment { margin-block: 6cqw 9.2cqw; }
.spinner {
  width: 36px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--green);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.camera {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 170px;
  height: 40cqw;
  margin: 3cqw 0;
  overflow: hidden;
  border-radius: 3cqw;
  background: #183625;
  color: var(--soft);
}
.camera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-guide { position: relative; display: grid; place-items: center; width: 112px; aspect-ratio: 1; border: 2px dashed var(--soft); border-radius: 12px; }
.camera.live .scan-guide svg { visibility: hidden; }
.qr-demo { width: 100px; height: 100px; image-rendering: pixelated; margin: 8px 0; }
.details-qr { margin-top: 2cqw; }
footer { padding-block: 0 5cqw; }
details { padding: .65em .8em; border: 1px solid var(--line); border-radius: 12px; background: white; font-size: max(12px, 2.6cqw); }
summary { color: var(--green); cursor: pointer; font-weight: 700; }
.samples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sample { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: inherit; }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }