/* Demo page v9. The form is a preview and never sends (no live form without owner approval). Comp 6 Oct 2026. */
.dm h1 { font-size: clamp(38px, 5vw, 58px); margin-top: 20px; }
.dm .lead { margin: 20px 0 34px; }
/* steps as green road signs on a short road */
.dm-road { position: relative; padding-left: 46px; display: grid; gap: 22px; }
.dm-road::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 18px; background: #2B3A35; border-radius: 9px; }
.dm-road::after { content: ''; position: absolute; left: 20px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(#E9EEF2 0 10px, transparent 10px 20px); opacity: .7; }
.dm-sign { display: grid; gap: 6px; }
.dm-sign .plate { width: max-content; background: #0F6B3E; color: #fff; border: 3px solid #fff; outline: 2px solid #0F6B3E; border-radius: 6px; padding: 7px 14px 6px; display: flex; gap: 10px; align-items: baseline; }
.dm-sign .plate span { font: 700 12px var(--mono); opacity: .85; } .dm-sign .plate b { font: 700 17px var(--rf-font); }
.dm-sign.end .plate { background: #F5C518; color: #06120F; border-color: #06120F; outline-color: #F5C518; }
.dm-sign p { margin: 0; color: var(--soft); font-size: 15px; }
.dm-mail { margin-top: 30px; font: 500 13px var(--mono); color: var(--muted); } .dm-mail b { color: var(--head); font-weight: 500; }
/* A: refreshed form */
.dm-form .field label, .dm-size label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: #33404a; }
.dm-form input.in, .dm-form textarea.in { width: 100%; box-sizing: border-box; font: inherit; color: #1b262e; background: #fff; }
.dm-form textarea.in { resize: vertical; }
.dm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.dm-form .chips { flex-wrap: wrap; } .dm-form .chip { background: #fff; cursor: pointer; font: 500 14px var(--rf-font); color: #33404a; }
.dm-a .dm-size { margin-bottom: 18px; } .dm-size[hidden] { display: none; }
.dm-badge { position: absolute; right: 22px; top: 22px; font: 600 10.5px var(--mono); color: #0B6B58; background: #DDF7F0; border: 1px solid #9FE3D2; border-radius: 999px; padding: 5px 10px; }
.dm-done { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #FFF3D6; color: #8A5A00; font-size: 14px; }
.dm-note { display: block; margin-top: 14px; color: #6b7680; font-size: 13px; }
/* B: paper appointment card */
.apt-wrap { display: grid; place-items: start center; }
.apt { position: relative; width: 100%; max-width: 560px; box-sizing: border-box; background: #F4F1EA; color: #2A2823; border-radius: 6px; padding: 30px 34px 30px; transform: rotate(-1.2deg); box-shadow: 0 30px 50px -26px rgba(0,0,0,.85); }
.apt .punch { position: absolute; left: 50%; top: -10px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--bg); }
.apt .h { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #2A2823; padding-bottom: 8px; margin-bottom: 8px; }
.apt .h b { font: 700 17px var(--rf-font); letter-spacing: .08em; } .apt .h span { font: 600 12px var(--mono); color: #B23B2E; }
.apt .ln { display: flex; gap: 10px; align-items: baseline; border-bottom: 1px dotted #8A826F; padding: 12px 0 3px; font-size: 13px; color: #6B6455; }
.apt .ln span { white-space: nowrap; }
.apt .ln input { flex: 1; min-width: 0; border: 0; background: none; font: 600 18px var(--rf-font); color: #1F3C8A; outline: none; padding: 2px 0; }
.apt .ln input::placeholder { color: rgba(31,60,138,.32); font-weight: 500; }
.apt .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 18px; }
.apt .boxes, .apt .dm-size { padding: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 13px; color: #6B6455; }
.apt .dm-size { display: block; } .apt .dm-size label { color: #6B6455; font-weight: 400; font-size: 13px; margin-bottom: 6px; } .apt .dm-size[hidden] { display: none; }
.apt .boxes.inline { display: flex; padding: 0; gap: 10px 18px; }
.apt .lbl { width: 100%; }
.apt .tickbox, .apt .boxes.inline .pick { display: inline-flex; gap: 8px; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; font: 500 15px var(--rf-font); color: #2A2823; }
.apt .tickbox i, .apt .boxes.inline .pick::before { content: ''; width: 18px; height: 18px; border: 2px solid #2A2823; border-radius: 3px; display: inline-block; position: relative; flex: none; }
.apt .tickbox.on i::after, .apt .boxes.inline .pick.on::before { content: '✓'; }
.apt .tickbox.on i::after { position: absolute; left: 1px; top: -9px; font: 700 22px/1 'Caveat', cursive; color: #1F7A55; }
.apt .boxes.inline .pick.on::before { font: 700 20px/14px 'Caveat', cursive; color: #1F7A55; text-align: center; }
.apt .foot { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; margin-top: 18px; }
.apt .dm-note { margin: 0; color: #6B6455; }
.stampbtn { width: 108px; height: 108px; border-radius: 50%; border: 0; cursor: pointer; background: #3A3F45; box-shadow: 0 10px 0 #22262A, 0 18px 24px -10px rgba(0,0,0,.6); display: grid; place-items: center; transition: transform .12s, box-shadow .12s; }
.stampbtn span { color: #fff; font: 700 14px/1.1 var(--rf-font); letter-spacing: .08em; text-align: center; }
.stampbtn:active, .apt.done .stampbtn { transform: translateY(8px); box-shadow: 0 2px 0 #22262A, 0 8px 14px -8px rgba(0,0,0,.6); }
.booked { position: absolute; right: 156px; bottom: 96px; display: none; width: 132px; height: 132px; border: 4px solid #1F7A55; border-radius: 50%; color: #1F7A55; place-items: center; text-align: center; font: 700 22px/1 var(--rf-font); letter-spacing: .1em; transform: rotate(-14deg); opacity: .85; }
.booked::after { content: ''; position: absolute; inset: 7px; border: 1.5px solid currentColor; border-radius: 50%; }
.booked small { display: block; font: 600 10px var(--mono); letter-spacing: .04em; margin-top: 4px; }
.apt.done .booked { display: grid; animation: dm-press .45s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes dm-press { from { transform: rotate(-14deg) scale(1.5); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .apt.done .booked { animation: none; } }
@media (max-width: 760px) { .dm-two, .apt .two { grid-template-columns: 1fr; } .apt { transform: none; padding: 26px 20px; } .booked { right: 20px; } }
.dm-a .dm-size .chips { margin-bottom: 0; }
/* stamp lands in its own space above the small print */
.apt .foot { margin-top: 84px; }
.booked { left: 70px; right: auto; bottom: 92px; width: 112px; height: 112px; font-size: 19px; }

/* Live forms by email app (11 Oct 2026) */
.apt .dm-sent { grid-column: 1 / -1; margin: 6px 0 0; padding: 10px 12px; border: 1.5px dashed #1F7A55; border-radius: 4px; color: #1F4D3A; font-size: 14px; line-height: 1.45; }
.apt .dm-sent b { font-weight: 600; }
.rf-ok .need { display: none; }
.need-ok .rf-ok .need { display: block; color: #B3261E; font-size: 13px; margin-top: 4px; }
.need-ok .rf-ok i { outline: 2px solid #B3261E; outline-offset: 2px; }
.apt input:user-invalid { border-bottom-color: #B3261E; }
.apt.done .dm-note { display: none; }
.apt .booked, .rf-slip .booked { bottom: 150px; }
.need-ok .rf-ok { flex-wrap: wrap; }
.need-ok .rf-ok .need { flex-basis: 100%; text-align: left; padding-left: 26px; }
@media (max-width: 760px) { .apt .booked, .rf-slip .booked { bottom: 170px; } }
.apt .foot .stampbtn { grid-column: 2; grid-row: 1; }
[dir="rtl"] .apt input[type="tel"], [dir="rtl"] .apt input[type="email"] { direction: ltr; text-align: left; } /* numbers and addresses read left to right */
[dir="rtl"] .apt input[type="email"]::placeholder { font-size: .82em; }

/* UI review fix 4 + 5 (owner "A", 2 Nov 2026) */
html:not(.trial) .if-trial, html.trial .if-demo { display: none; }
/* placeholders in grey so they never look like a typed answer; the line under the field you are typing in turns blue */
.apt .ln input::placeholder { color: #736C5B; font-weight: 400; opacity: 1; }
.apt .ln:focus-within { border-bottom: 2px solid #1F3C8A; padding-bottom: 2px; }
.apt .tickbox:focus-visible, .apt .boxes.inline .pick:focus-visible, .stampbtn:focus-visible { outline: 2px solid #1F3C8A; outline-offset: 3px; }