/* Trial code screen (site/gate). House style: plum #5E2B87, Archivo and Inter. */
@font-face { font-family: "Archivo"; src: url("/Fonts/Archivo/Archivo-VariableFont_wdth-wght.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/Fonts/Inter/Inter-VariableFont_opsz-wght.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #F4F1F8; color: #0B2545; font: 400 1.05rem/1.5 "Inter", system-ui, sans-serif; padding: 16px; }
.gate { background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(11,37,69,.12); padding: 36px 32px; width: 100%; max-width: 460px; text-align: center; }
.gate-logo { height: 44px; margin-bottom: 18px; }
h1 { font: 800 1.45rem/1.2 "Archivo", sans-serif; margin: 0 0 8px; }
.gate-tag { display: inline-block; background: #5E2B87; color: #fff; border-radius: 99px; padding: 4px 14px; font-size: .85rem; margin: 0 0 22px; }
.gate-form { text-align: left; }
label { display: block; font-weight: 700; font-size: 1.1rem; }
.gate-hint { margin: 4px 0 10px; color: #4A5568; font-size: .95rem; }
input { width: 100%; font: 700 1.5rem/1 "Inter", monospace; letter-spacing: .12em; text-transform: uppercase; padding: 12px 14px; border: 2px solid #8A939E; border-radius: 10px; }
input:focus { outline: 3px solid #5E2B87; outline-offset: 2px; border-color: #5E2B87; }
button { margin-top: 14px; width: 100%; font: 700 1.15rem/1 "Archivo", sans-serif; padding: 14px; border: 0; border-radius: 10px; background: #5E2B87; color: #fff; cursor: pointer; }
button:focus { outline: 3px solid #0B2545; outline-offset: 2px; }
.gate-error { background: #FDECEC; color: #8A1C1C; border-left: 4px solid #B42318; padding: 8px 12px; border-radius: 6px; margin: 0 0 10px; }
.gate-foot { margin: 22px 0 0; font-size: .8rem; color: #4A5568; }