/* GX-P1: the teaser as it was built — the camera turning in the dark and a terminal line —
   with the site header above it and nothing else. There is no product, no section stack and
   no footer: the page is one screen, and its only action is the line.

   The type, colours and placement below are the published teaser's own values, kept
   deliberately: --text-x/--text-y put the block to the right of the body, clear of it at
   every width, and the two accent colours are the only ones on the page. */
body[data-page=gxp1]{background:#000}
.gxp1-stage{
  --text-x:65%;--text-y:39.5%;
  --prompt-gap:1.95rem;
  --wordmark-size:clamp(18px,3vw,34px);
  --prompt-size:clamp(13px,1.5vw,16px);
  --wordmark-track:.42em;--prompt-track:.04em;
  --wordmark-scale-y:1.06;--prompt-scale-y:1.04;
  --teaser-ink:#8e8e8e;--teaser-ok:#7ec8c0;--teaser-bad:#d08b8b;
  position:relative;overflow:hidden;background:#000;
  height:calc(100svh - 92px);min-height:520px;
  font:var(--prompt-size)/1.2 var(--mono)
}
/* The global img rule does not reach <video>. The clip is 2.39:1 in a taller box, so it
   covers and crops at the sides; the body stays centred because the source is centred. */
.gxp1-stage video{display:block;width:100%;height:100%;object-fit:cover}
.gxp1-overlay{position:absolute;z-index:3;left:var(--text-x);top:var(--text-y);width:max-content;max-width:calc(100vw - var(--text-x) - 3vw);color:var(--teaser-ink);user-select:none}
/* Anchored by its top edge, never centred: the line below changes width as it is typed into,
   and a centred block would move the wordmark every keystroke. */
.gxp1-wordmark{margin:0 0 var(--prompt-gap);font:300 var(--wordmark-size)/1 var(--font-sans);letter-spacing:var(--wordmark-track);white-space:nowrap;opacity:.92;transform:scaleY(var(--wordmark-scale-y));transform-origin:left top}
.gxp1-signup{width:max-content;height:1.2em;font:var(--prompt-size)/1.2 var(--mono);transform:scaleY(var(--prompt-scale-y));transform-origin:left top}
.gxp1-line{position:relative;display:inline-flex;align-items:center;width:max-content;height:1.2em;line-height:1.2;white-space:nowrap;cursor:text}
.gxp1-prompt{all:unset;display:inline-block;color:var(--teaser-ink);font:inherit;letter-spacing:var(--prompt-track);white-space:nowrap;cursor:text}
.gxp1-prompt:focus-visible{outline:1px dotted #9fb3bb73;outline-offset:3px}
.gxp1-typed,.gxp1-feedback{display:inline-block;color:var(--teaser-ink);font:inherit;letter-spacing:var(--prompt-track)}
.gxp1-typed{white-space:pre}
.gxp1-feedback{white-space:nowrap}
.gxp1-feedback[data-state=done]{color:var(--teaser-ok)}
.gxp1-feedback[data-state=error]{color:var(--teaser-bad)}
/* The return arrow appears only once something has been typed: on a phone the keyboard can
   be dismissed, and then it is the only way left to send. */
.gxp1-submit{all:unset;display:inline-grid;place-items:center;flex:0 0 auto;min-width:2.75em;min-height:2.75em;margin:-.775em -.65em -.775em .05em;color:var(--teaser-ink);font:inherit;line-height:1;opacity:.86;cursor:pointer;touch-action:manipulation}
.gxp1-submit:hover{opacity:1}
.gxp1-submit:focus-visible{outline:1px dotted #9fb3bb8c;outline-offset:-.45em}
/* The real field: it takes the typing, the autofill and the keyboard, and paints nothing.
   What the reader sees is .gxp1-typed mirroring its value. */
.gxp1-capture{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;padding:0;border:0;outline:0;opacity:0;pointer-events:none;font-size:16px}
.gxp1-caret{display:inline-block;flex:0 0 auto;width:.55em;height:1.05em;background:var(--teaser-ink);transform:translateY(.08em);animation:gxp1Blink 1.05s steps(1) infinite}
@keyframes gxp1Blink{50%{opacity:0}}
.gxp1-hidden{display:none!important}
@media(prefers-reduced-motion:reduce){.gxp1-caret{animation:none}}

@media(max-width:700px){
  .gxp1-stage{--text-x:74%;--text-y:42%;--wordmark-size:clamp(21px,6vw,30px);--prompt-size:clamp(13px,4vw,16px);--prompt-gap:.85rem;height:calc(100svh - 76px)}
  /* Centres the whole left-aligned group on the screen without centring the text itself. */
  .gxp1-overlay{max-width:90vw;transform:translateX(-50%)}
  /* A long private-relay address scrolls rather than spilling off the edge of the phone. */
  .gxp1-line{max-width:90vw;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .gxp1-line::-webkit-scrollbar{display:none}
}