/* Production forms under the 171 design.
   The 171 pages load pages-171.css, which sizes every <input> as an 18px
   checkbox and defines no --sans/--white tokens or .btn class. The contact
   dialog (contact-dialog.css), the /training registration form and the
   /assessment share form come from the earlier site, so this file gives them
   what they expect. Hand-maintained; promote_171.py links it on every page. */
:root{--sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--white:#fff}

/* Text fields: undo the global 18px checkbox sizing from pages-171.css. */
.contact-form input:not([type=radio]):not([type=checkbox]),
.registration input:not([type=radio]):not([type=checkbox]),
.registration textarea,
.assessment-share input:not([type=radio]):not([type=checkbox]),
.assessment-share select{width:100%;height:auto;min-height:48px;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--white);color:var(--ink);font:16px/1.4 var(--sans)}
.registration textarea{min-height:0;padding:12px;resize:vertical}
.contact-form textarea{box-sizing:border-box}
.contact-form fieldset input{width:18px;height:18px}

/* .btn as used by the dialog and production scripts, matching .button. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:4px;padding:15px 23px;background:var(--red);color:#fff;font:600 14px/1.2 var(--sans);text-decoration:none;cursor:pointer}
.btn-dark{background:var(--ink)}
.btn:hover{filter:brightness(.92)}
.btn:disabled{cursor:wait;opacity:.62}
.contact-dialog .kicker{margin:0 0 10px;color:var(--red);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.contact-dialog h2{font-family:Georgia,serif;font-weight:400;line-height:1.1}
.contact-close .icon{width:20px;height:20px}
.contact-back{display:inline-flex;align-items:center;gap:6px}

/* Icons the dialog needs that icons-171.css does not define. */
.icon-x{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
.icon-arrow-left{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5 m6-6-6 6 6 6'/%3E%3C/svg%3E")}

/* /training registration of interest. */
.register-section{scroll-margin-top:96px}
.registration{max-width:600px;margin:0 auto;padding:36px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.registration h2{font:400 35px/1.15 Georgia,serif;margin:10px 0 6px}
.registration .register-price{font-weight:600;margin:0 0 10px}
.registration label{display:block;font-size:14px;font-weight:600;margin:18px 0 6px}
.registration .button{width:100%;margin-top:24px;border:0;cursor:pointer;font-family:var(--sans)}
.registration .button:disabled{cursor:wait;opacity:.62}
.registration .success{margin-top:20px;padding:14px 16px;border-left:3px solid var(--red);background:var(--sage)}
.registration .contact-error{margin:18px 0 0;padding:12px 14px;border-left:3px solid var(--red);background:#f4e6e2;color:#7d211c;font-size:14px}
.registration [hidden],.contact-error[hidden]{display:none}
@media(max-width:650px){.registration{padding:24px 20px}}

.form-trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.booking-fallback a{font-weight:600}
.turnstile-stage{position:fixed;right:12px;bottom:12px;z-index:2147483647}

/* Statement wrapping. Closing panels (and section headings) are short,
   centred statements: balance their lines so no word such as "it" is left
   alone on the last line. promote_171.py also joins the last two words with a
   no-break space for browsers without text-wrap support. Body copy uses
   "pretty", which avoids single-word last lines without rebalancing. */
.closing h2,.closing p{text-wrap:balance}
main p,main li,main figcaption{text-wrap:pretty}
main blockquote p{text-wrap:balance}


/* Homepage "Try it for yourself" cards: the phone and chat demos are external
   to the site, so they are charcoal buttons with the up-right (external) icon,
   distinct from the red in-site actions such as Discovery call. */
.experiences .experience-action{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:15px 23px;border-radius:4px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;line-height:1.2;text-decoration:none}
.experiences .experience-action:hover{background:#000;color:#fff}
.experiences .experience-action:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.experiences .experience-action .icon{width:15px;height:15px}
.experiences .experience-action span:empty:not(.icon){display:none}

/* Mobile menu: "Discovery call" near the top is an ordinary link (it used to
   be a sticky charcoal block that floated mid-menu while scrolling). The menu
   ends with a red Discovery call button that opens the Cal.com calendar. */
.appbar-menu>nav>.mobile-discovery{position:static;margin:0;padding:13px 15px;background:none;color:inherit!important;border-radius:0}
@media(max-width:650px){.appbar-menu>nav>.mobile-discovery{padding:15px 0}}
.appbar-menu>nav>.mobile-discovery .icon{display:none}
.appbar-menu>nav>a.mobile-booking{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 4px;padding:15px 20px;border:0;border-radius:4px;background:var(--red);color:#fff!important;font-size:15px;font-weight:600;text-decoration:none}
.appbar-menu>nav>a.mobile-booking:hover{filter:brightness(.92);color:#fff}
.appbar-menu>nav>a.mobile-booking[aria-busy="true"]{opacity:.7;cursor:progress}

/* Homepage phone demo: the trigger is a <button> styled like the other
   experience actions, and the dialog reuses the contact dialog. The demo
   number arrives only from contact.php after the Turnstile check. */
.experiences button.experience-action{border:0;font-family:inherit;cursor:pointer}
.phone-demo-dialog{width:min(540px,calc(100% - 30px))}
.phone-demo-dialog [hidden]{display:none!important}
.phone-demo-dialog .contact-card>p#phone-demo-intro{margin-top:4px}
.phone-demo-check{margin-top:22px;max-width:100%;overflow:hidden}
.phone-demo-check:empty{margin-top:0}
.phone-demo-status{min-height:1.5em;margin:18px 0 0;color:var(--muted);font-size:15px}
.phone-demo-dialog[data-state=checking] .phone-demo-status::before{content:"";display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-2px;border:2px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:phone-demo-spin .8s linear infinite}
@keyframes phone-demo-spin{to{transform:rotate(360deg)}}
.phone-demo-dialog[data-state=revealed] .phone-demo-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.phone-demo-problem .contact-error{margin-top:6px}
.phone-demo-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.phone-demo-result{margin-top:14px;padding-top:22px;border-top:1px solid var(--line)}
.phone-demo-dialog .phone-demo-label{margin:0;color:var(--red);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.phone-demo-dialog .phone-demo-number{margin:8px 0 0;color:var(--ink);font:400 clamp(30px,6vw,40px)/1.15 Georgia,serif;font-variant-numeric:tabular-nums}
.phone-demo-call{margin-top:20px}
.phone-demo-call .icon{width:15px;height:15px}
.phone-demo-dialog .phone-demo-tip{margin:20px 0 0;padding-left:14px;border-left:2px solid var(--line);color:var(--muted);font-size:14px}
.phone-demo-dialog :focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media(max-width:650px){.phone-demo-dialog{width:min(100% - 18px,540px)}.phone-demo-call,.phone-demo-actions .btn{display:flex;width:100%}}
@media(prefers-reduced-motion:reduce){.phone-demo-dialog[data-state=checking] .phone-demo-status::before{animation:none}}
/* Outside New Zealand is information, not an error. */
.phone-demo-problem[data-kind=region] .contact-error{border-left-color:var(--ink);background:#efede7;color:var(--ink)}
/* Turnstile staged inside an open modal (contact.js), where the page behind is
   inert. Shown in the dialog's flow only when a challenge needs the visitor. */
.turnstile-stage.turnstile-inline{position:static;margin-top:18px;max-width:100%;overflow:hidden}
.turnstile-stage.turnstile-inline:empty{margin-top:0}