/* enroll.camgreet.com in CamGreet's reception look (web/live/styles.css): warm paper, deep green
   ink, an orange action color, Iowan Old Style for headings, square corners. Phone first. */
:root {
  --cream: #f4f0e8;
  --paper: #fffdf8;
  --ink: #0b211a;
  --green: #315f4d;
  --deep: #071c16;
  --orange: #ec501d;
  --mat: #eee9df;
  --line: rgb(11 33 26 / 14%);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--cream); color: var(--ink); font: 17px/1.5 var(--text); }
button, input { font: inherit; color: inherit; }
button, label.secondary { cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
h1:focus { outline: none; }

.brand { display: flex; align-items: center; gap: 10px; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); background: var(--deep); color: var(--paper); font: 20px var(--display); }
.card { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
.eyebrow { margin: 0 0 6px; font: 700 11px/1.3 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
h1 { margin: 0 0 14px; font: 30px/1.15 var(--display); }
.lead { font-size: 18px; }
.note { color: var(--green); font-size: 15px; }
.optional { color: var(--green); font-weight: 400; }

.facts { margin: 20px 0; padding: 4px 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.facts dt { margin-top: 14px; font: 700 11px/1.3 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.facts dd { margin: 4px 0 14px; }

form label { display: block; margin: 16px 0 6px; font-weight: 600; }
form input:not([type="checkbox"]) { width: 100%; padding: 12px; border: 0; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }
form input:focus { box-shadow: inset 0 0 0 2px var(--green); outline: none; }
.agree { display: flex !important; gap: 12px; align-items: flex-start; padding: 16px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; }
.agree input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--orange); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.primary, .secondary { display: inline-block; border: 0; padding: 14px 22px; font-weight: 600; text-align: center; }
.primary { background: var(--orange); color: var(--paper); flex: 1 1 auto; }
.primary:disabled { opacity: 0.45; cursor: default; }
.secondary { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.link { border: 0; background: none; padding: 0; color: var(--green); text-decoration: underline; }
.file { position: absolute; width: 1px; height: 1px; opacity: 0; }

.frame { aspect-ratio: 3 / 4; max-height: 60vh; margin: 16px auto; overflow: hidden; background: var(--deep); box-shadow: 0 0 0 8px var(--mat); }
.preview { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.thumbs figure { margin: 0; text-align: center; }
.thumbs img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 0 0 4px var(--mat); margin-bottom: 8px; }