/* Form and capture-page vocabulary for twelvetwo.co.za (added 2026-09-16 with /scan and the /events re-skin).
   site.css has no form rules; this file adds them on the brand tokens and is loaded only by pages with a form. */
.form{margin-top:8px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{margin-bottom:22px}
.field label{display:block;font-size:14px;font-weight:500;color:var(--colour-off-white);margin-bottom:9px}
.field .hint{display:block;font-weight:400;color:var(--colour-text-muted);font-size:13px;margin-top:4px;line-height:1.5}
.field input,.field select,.field textarea{width:100%;padding:15px 16px;font:inherit;font-size:16px;color:var(--colour-off-white);background:color-mix(in srgb,var(--colour-charcoal) 22%,var(--colour-deep-black));border:1px solid var(--colour-border-strong);border-radius:8px;transition:border-color .25s,box-shadow .25s}
.field input::placeholder,.field textarea::placeholder{color:var(--colour-text-subtle)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--colour-slate-blue) 50%),linear-gradient(135deg,var(--colour-slate-blue) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--colour-cyan);box-shadow:0 0 0 3px var(--colour-cyan-24)}
.field textarea{min-height:120px;resize:vertical}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--colour-orange)}
.err{display:none;color:var(--colour-orange);font-size:13px;margin-top:7px}
.field.bad .err,.err.show{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--colour-text-muted);line-height:1.55;margin:6px 0 26px}
.consent input{width:18px;height:18px;margin-top:3px;flex-shrink:0;accent-color:var(--colour-cyan)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.branch{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.branch button{flex:1 1 220px;padding:15px 18px;border-radius:8px;cursor:pointer;background:transparent;color:var(--colour-text-muted);border:1px solid var(--colour-border-strong);font-size:15px;transition:all .2s var(--ease-swift)}
.branch button[aria-pressed=true]{background:var(--colour-off-white);color:var(--colour-deep-black);border-color:var(--colour-off-white);font-weight:500}
.form .button{width:100%;font-size:13px;padding:18px 22px;cursor:pointer}
.form .button[disabled]{opacity:.55;cursor:progress}
.form .fine{font-size:13px;color:var(--colour-text-muted);margin-top:18px;line-height:1.6}
.result{display:none;margin-top:10px}
.result.show,.result[data-band]{display:block}
.result .panel{border-left:3px solid var(--colour-cyan);padding:30px 34px;background:linear-gradient(145deg,var(--panel),var(--colour-deep-black));border-radius:0 12px 12px 0;box-shadow:inset 0 1px var(--inset-highlight)}
.result[data-band=amber] .panel,.result[data-band=red] .panel{border-left-color:var(--colour-orange)}
.result .sent{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--colour-cyan);margin-bottom:16px}
.result h3{font-size:28px;margin-bottom:14px}
.result p{font-size:16px}
.result p+p{margin-top:12px}
/* Two-column capture layout: copy left, form right */
.capture{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,110px);align-items:start;padding-block:clamp(90px,10vw,150px);border-top:1px solid var(--colour-divider)}
.capture-copy h2{margin-bottom:24px}
.capture-copy p{font-size:17px}
.capture-copy p+p{margin-top:18px}
.capture-copy .list{list-style:none;margin:30px 0 0;padding:0}
.capture-copy .list li{padding:16px 0;border-top:1px solid var(--colour-divider);font-size:15px;color:var(--colour-text-muted)}
.capture-copy .list li strong{color:var(--colour-off-white);font-weight:500;display:block;margin-bottom:3px}
.capture-form{background:linear-gradient(145deg,var(--panel),var(--colour-deep-black));border:1px solid var(--colour-divider);border-radius:14px;padding:clamp(26px,3.5vw,44px);box-shadow:inset 0 1px var(--inset-highlight),0 25px 55px -30px var(--shadow)}
.capture-form h3{font-size:24px;margin-bottom:8px}
.capture-form>p{font-size:15px;margin-bottom:28px}
/* Plain list of numbered beats (what gets built) */
.beats{list-style:none;margin:0;padding:0;counter-reset:beat}
.beats li{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:18px;row-gap:0;padding:24px 0;border-top:1px solid var(--colour-divider)}
.beats li:before{grid-column:1;grid-row:1/3}
.beats strong,.beats p{grid-column:2}
.beats li:before{counter-increment:beat;content:counter(beat,decimal-leading-zero);font-family:var(--font-mono);font-size:12px;color:var(--colour-cyan);padding-top:6px}
.beats strong{display:block;font-weight:500;font-size:17px;color:var(--colour-off-white);margin-bottom:6px}
.beats p{font-size:15px}
/* Timed gates (the honest bit on /events) */
.gates{list-style:none;padding:0;margin:0}
.gates li{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--colour-divider)}
.gates .w{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--colour-orange);padding-top:4px}
.gates .t{font-size:15px;color:var(--colour-text-muted)}
.gates .t b{color:var(--colour-off-white);font-weight:500}
/* WhatsApp thread mockup (/events) */
.chat{max-width:460px;margin:0 auto;background:linear-gradient(160deg,var(--panel),var(--colour-deep-black));border:1px solid var(--colour-border-strong);border-radius:22px;padding:22px;box-shadow:inset 0 1px var(--inset-highlight),0 40px 80px -30px var(--shadow)}
.chat .top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--colour-divider);margin-bottom:16px}
.chat .av{width:38px;height:38px;border-radius:50%;background:var(--colour-cyan-24);color:var(--colour-cyan);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px}
.chat .who{font-size:14px;color:var(--colour-off-white)}
.chat .pres{font-size:11px;color:var(--colour-slate-blue);font-family:var(--font-mono)}
.chat .bub{background:color-mix(in srgb,var(--colour-cyan) 14%,var(--colour-deep-black));border:1px solid var(--colour-cyan-24);border-radius:14px 14px 4px 14px;padding:12px 14px;font-size:14px;color:var(--colour-off-white);margin:0 0 12px 34px;line-height:1.5}
.chat .bub .tm{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--colour-slate-blue);margin-top:8px;text-align:right}
.chat .done{font-family:var(--font-mono);font-size:11px;color:var(--colour-slate-blue);text-align:center;margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center}
.two.top{align-items:start}
.two.top>div:first-child{position:sticky;top:130px}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
.figure .n{font-family:var(--font-heading);font-size:clamp(56px,6vw,84px);letter-spacing:-.06em;line-height:1}
.figure .l{font-size:14px;color:var(--colour-text-muted);margin-top:12px;line-height:1.5}
.note{margin-top:34px;font-size:13px;color:var(--colour-slate-blue);line-height:1.6}
@media(max-width:800px){.capture,.two{grid-template-columns:1fr}.figures{grid-template-columns:1fr 1fr;gap:26px}.gates li{grid-template-columns:1fr;gap:6px}}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;gap:0}.figures{grid-template-columns:1fr}.beats li{grid-template-columns:40px 1fr;gap:12px}.result .panel{padding:22px}}