/* ============================================================
   FORM DELIVERY + DEMO NOTICE
   ============================================================ */
.waitlist{flex-wrap:wrap}
.sent-note{flex-basis:100%;width:100%;margin-top:14px;padding:12px 16px;
  background:var(--fg-mist-100);border:1px solid var(--fg-hairline);
  border-inline-start:3px solid var(--fg-swiss-red);border-radius:var(--r-sm);
  font-size:14px;line-height:1.6;color:var(--fg-ink)}
.sent-note p{margin:0}
.sent-note__alt{margin-top:6px;font-size:13px;color:var(--fg-steel-500)}
.sent-note__alt a{color:var(--fg-navy-800);text-decoration:underline;text-underline-offset:3px}
.sent-note__alt a:hover{color:var(--fg-swiss-red)}
.section--navy .sent-note,.on-navy .sent-note{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.section--navy .sent-note__alt a,.on-navy .sent-note__alt a{color:#fff}

.demobar{display:flex;align-items:flex-start;gap:12px;
  padding:14px 20px;background:#FFFBEB;border-bottom:1px solid #F0E2B6;
  font-size:14px;line-height:1.65;color:#5A4A16}
.demobar b{color:#3D3308}
.demobar__dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--fg-swiss-red);margin-top:7px}
.field-warn{display:block;margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--fg-steel-500)}

/* the six-digit step — one field, deliberately large, nothing to compete
   with it, because it is the only thing being asked for on that screen */
/* the quieter sibling of .field-warn: this one is information, not a warning */
.field-note{font-size:13.5px;line-height:1.6;color:var(--fg-ink-muted);margin:6px 0 14px}
.nopass{margin-top:14px;font-size:13px;line-height:1.6;color:var(--fg-ink-muted)}
.code-h{margin-top:8px;font-size:22px}
html[dir="rtl"] .code-h{line-height:1.4}
.code-p{margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--fg-ink-muted)}
.code-field{margin-top:22px}
.code-field input{
  font-family:var(--font-mono);font-size:27px;letter-spacing:.32em;text-align:center;
  padding-block:14px;
}
.code-field input::placeholder{color:var(--fg-steel-400);letter-spacing:.32em}
.code-alt{margin-top:16px;text-align:center}
.linkbtn{
  background:transparent;border:0;padding:4px;cursor:pointer;font:inherit;font-size:14px;
  color:var(--fg-ink-muted);text-decoration:underline;text-underline-offset:3px;
}
.linkbtn:hover{color:var(--fg-ink)}
.linkbtn:focus-visible{outline:2px solid var(--fg-navy-600);outline-offset:2px;border-radius:4px}


/* ---- accessibility helpers ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--fg-navy-800);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
  font-size:15px;text-decoration:none}
.skip:focus{inset-inline-start:0}
/* comfortable touch targets without changing the type size */
@media (max-width:768px){
  .tlink,.footer a,.ubar a{min-height:44px;display:inline-flex;align-items:center}
  /* The rule above is a blanket over every link in the footer, and the two
     social buttons are links in the footer. It replaced their own
     `display:grid; place-items:center` with `inline-flex; align-items:center`
     — which centres the icon vertically and says nothing at all about the
     horizontal axis, because `justify-items` is ignored in a flex container.
     So on a phone the icon sat 1px from the left edge of a 38px box with 20px
     of empty space to its right, and the box itself had grown to 38x44. The
     client found it by opening the site on his phone.

     The 44px floor stays — it is a real tap target and the reason the blanket
     rule exists. What changes is that the button becomes a 44px SQUARE and
     centres on both axes. This has to be written after the blanket rule and
     not beside the base rule 1900 lines above: both selectors are one class
     and one type, so they carry identical specificity and source order is the
     only thing that decides which one wins. */
  .socials a{min-width:44px;min-height:44px;justify-content:center}
  .demobar{padding:10px 16px;font-size:12.5px;line-height:1.55;gap:9px}
  .demobar__dot{width:6px;height:6px;margin-top:6px}
  .demobar .demo-long{display:none}
}