/* Uptime Crew design system, shared by every page in this service.
   Tokens lifted from the CDA-3D kit: _ds/colors_and_type.css.
   Navy is wallpaper, blue is structure, orange is the only action colour,
   mint is a SHAPE accent and never sets type.

   Page-specific rules stay in the page. Anything a second page would want
   belongs here, because two copies of a design system is no design system. */
:root{
  --uc-navy:#131751; --uc-navy-deep:#0c0f38; --uc-ink:#070D2A; --uc-ink-lift:#0A1238;
  --uc-white:#FFFFFF; --uc-text:#E7ECFF;
  --uc-muted:rgba(231,236,255,.62);   /* 6.1:1 on navy */
  --uc-mute-2:rgba(231,236,255,.42);  /* 3.5:1 — large or non-text only */
  --uc-blue:#5BB6FF; --uc-blue-hi:#9CD8FF; --uc-blue-deep:#2580E0;
  --uc-orange:#FF9B49; --uc-orange-soft:#FFB878;
  --uc-mint:#38E0A4;
  --uc-hairline:rgba(255,255,255,.09); --uc-hairline-strong:rgba(255,255,255,.18);
  --uc-wash-white:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.012) 100%);
  --uc-backdrop:
    radial-gradient(1100px 760px at 88% 1%,rgba(91,182,255,.18),transparent 58%),
    radial-gradient(950px 680px at 2% 26%,rgba(37,128,224,.13),transparent 56%),
    radial-gradient(1050px 760px at 98% 56%,rgba(91,182,255,.11),transparent 56%),
    radial-gradient(1000px 720px at 6% 82%,rgba(56,224,164,.07),transparent 56%),
    radial-gradient(1300px 900px at 50% 101%,rgba(37,128,224,.16),transparent 60%),
    linear-gradient(180deg,#0b0e36 0%,#131751 24%,#171c60 50%,#131751 76%,#0b0e36 100%);
  --uc-shadow-card:0 26px 64px -36px rgba(0,0,0,.7);
  --uc-r-sm:8px; --uc-r-md:14px; --uc-r-lg:18px; --uc-r-xl:22px; --uc-r-pill:999px;
  --uc-display:'Titillium Web','Helvetica Neue Condensed',Helvetica,Arial,system-ui,sans-serif;
  --uc-body:'Montserrat','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --uc-mono:'SF Mono',SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --uc-ease:cubic-bezier(.45,0,.4,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
/* [hidden] is only a UA `display:none`, so any rule that sets display beats it.
   .verified is inline-flex and a.back is block, which meant both showed through
   the hidden attribute: every candidate was told their access code had been
   recognised before they typed one. Make the attribute win. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;background:var(--uc-navy);color:var(--uc-text);
  font:16px/1.6 var(--uc-body);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;position:relative;overflow-x:hidden;
  /* Safe areas. On a notched phone in landscape the sides are physically
     obscured, and the home indicator owns a 21pt strip along the bottom that
     nothing else may sit in. max() keeps the normal padding when the insets
     are zero, which is every desktop. */
  padding:clamp(24px,5vh,56px) max(20px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom) + 21px) max(20px,env(safe-area-inset-left));
  /* iOS paints its own grey flash on tap. We give every control an :active
     state instead, which we control and which matches the design. */
  -webkit-tap-highlight-color:transparent;
}

/* ---------- the backdrop: glows, then a 72px grid faded by a radial mask ---- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--uc-backdrop)}
.grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(91,182,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(91,182,255,.16) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(900px 620px at 50% 12%,#000,transparent 72%);
  mask-image:radial-gradient(900px 620px at 50% 12%,#000,transparent 72%);
  opacity:.5;
}

/* ---------- the 3D scene, behind the content ------------------------------ */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene .ring{position:absolute;left:50%;top:34%;translate:-50% -50%;border-radius:50%;
  border:1px solid rgba(156,216,255,.13)}
.ring-a{width:min(620px,120vw);height:min(620px,120vw);
  -webkit-mask-image:linear-gradient(160deg,#000 8%,transparent 52%);
  mask-image:linear-gradient(160deg,#000 8%,transparent 52%);animation:ucSweep 80s linear infinite}
.ring-b{width:min(880px,150vw);height:min(880px,150vw);border-color:rgba(156,216,255,.08);
  -webkit-mask-image:linear-gradient(20deg,#000 6%,transparent 46%);
  mask-image:linear-gradient(20deg,#000 6%,transparent 46%);animation:ucSweep 110s linear infinite reverse}
.orb{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(156,216,255,.28),rgba(37,128,224,.06) 62%,transparent 72%);
  animation:ucOrbSoft 17s ease-in-out infinite}
/* wireframe cube: four faces at ±Z, the semiconductor-precision motif */
.cube-wrap{position:absolute;perspective:900px}
.cube{width:56px;height:56px;position:relative;transform-style:preserve-3d;animation:ucSpin 46s linear infinite}
.cube i{position:absolute;inset:0;border:1px solid rgba(156,216,255,.26)}
.cube i:nth-child(1){transform:translateZ(28px)}
.cube i:nth-child(2){transform:translateZ(-28px)}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(28px);border-color:rgba(156,216,255,.2)}
.cube i:nth-child(4){transform:rotateY(90deg) translateZ(-28px);border-color:rgba(156,216,255,.2)}
/* the data-centre motif: a dotted plane laid down in Z */
.plane-wrap{position:absolute;perspective:900px}
.plane{width:150px;height:150px;
  background-image:linear-gradient(rgba(156,216,255,.22) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(156,216,255,.22) 1px,transparent 1px);
  background-size:22px 22px;transform:rotateX(50deg) rotateZ(-14deg);
  -webkit-mask-image:radial-gradient(circle at 30% 30%,#000,transparent 75%);
  mask-image:radial-gradient(circle at 30% 30%,#000,transparent 75%)}
.spark{position:absolute;border-radius:50%;background:var(--uc-blue-hi);animation:ucTwinkle 17s ease-in-out infinite}

@keyframes ucSweep{from{rotate:0deg}to{rotate:360deg}}
@keyframes ucSpin{from{transform:rotateX(18deg) rotateY(0)}to{transform:rotateX(18deg) rotateY(360deg)}}
@keyframes ucFloat{0%,100%{transform:rotateX(1deg) rotateY(-5deg)}50%{transform:rotateX(4deg) rotateY(5deg)}}
@keyframes ucSheen{0%{background-position:220% 0}55%,100%{background-position:-120% 0}}
@keyframes ucOrbSoft{0%,100%{transform:translate(0,0) scale(1);opacity:.45}50%{transform:translate(16px,-24px) scale(1.09);opacity:.8}}
@keyframes ucTwinkle{0%,100%{opacity:.12}50%{opacity:.85}}
@keyframes ucPulse{0%{box-shadow:0 0 0 0 rgba(56,224,164,.5)}70%{box-shadow:0 0 0 9px rgba(56,224,164,0)}100%{box-shadow:0 0 0 0 rgba(56,224,164,0)}}

.wrap{width:100%;max-width:660px;min-width:0;position:relative;z-index:2}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- masthead: the 3D extruded wordmark ---------------------------- */
header{display:flex;flex-direction:column;align-items:center;gap:14px;
       margin-bottom:clamp(26px,6vh,46px)}
.logo-viewport{perspective:1100px;display:flex;justify-content:center;width:100%}
.logo-stack{transform-style:preserve-3d;transition:transform .6s var(--uc-ease);
  will-change:transform;width:min(230px,58vw)}
/* Extrusion: twelve masked plates stepped through Z, an emissive bloom behind,
   a brushed-metal top face, then a sheen sweep and a floor shade. Same
   construction as the kit's Login artboard. */
.logo-3d{position:relative;width:100%;aspect-ratio:2.3;transform-style:preserve-3d;
  backface-visibility:hidden;animation:ucFloat 12s ease-in-out infinite}
.logo-3d>*{position:absolute;inset:0;
  -webkit-mask-image:var(--wm);mask-image:var(--wm);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.logo-3d .bloom{background:hsl(222 100% 55%);transform:translateZ(-19px) scale(1.018);
  filter:blur(9px);opacity:.6}
.logo-3d .face{position:relative;width:100%;height:100%;transform:translateZ(1px);
  /* In flow, so it needs its own size: height:auto on an empty block is 0, and a
     zero-height top face means the extrusion plates are all you ever see. */
  background:linear-gradient(108deg,#dbe4f2 0%,#aebdd6 22%,#f3f7ff 46%,#96a8c6 68%,#d3deee 88%,#b9c7dd 100%)}
.logo-3d .sheen{background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  background-size:300% 100%;animation:ucSheen 8s ease-in-out infinite;transform:translateZ(1.5px)}
.logo-3d .shade{background:linear-gradient(190deg,rgba(11,18,32,0) 55%,rgba(11,18,32,.28) 100%);
  transform:translateZ(1.6px)}
.kicker{font:700 11px/1 var(--uc-display);letter-spacing:.24em;text-transform:uppercase;
  color:var(--uc-muted)}

/* ---------- type ---------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
  font:700 12px/1 var(--uc-display);letter-spacing:.24em;text-transform:uppercase;color:var(--uc-orange)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--uc-orange);flex:none}
/* rem, not px: a px clamp ignores the reader's text-size setting entirely,
   and that setting is the single most used accessibility feature on a phone. */
h1{font-family:var(--uc-display);font-weight:700;font-size:clamp(2.125rem,6.4vw,3.25rem);
   line-height:1.05;letter-spacing:-.022em;margin:0 0 16px;color:var(--uc-white)}
.lede{font-size:1.125rem;line-height:1.6;color:var(--uc-muted);margin:0;max-width:60ch}
.lede b{color:var(--uc-text);font-weight:600}
.hero{margin-bottom:26px}

/* ---------- the signature card: hairline plus a top-down white wash -------- */
.card{background:var(--uc-wash-white);border:1px solid var(--uc-hairline);
  border-radius:var(--uc-r-xl);padding:clamp(22px,4vw,30px);
  transition:border-color .25s var(--uc-ease),transform .25s var(--uc-ease),box-shadow .25s var(--uc-ease)}
/* Hover behind a query: on a touch screen a :hover rule sticks after the tap,
   so a card stays lifted until something else is touched. */
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:var(--uc-hairline-strong);transform:translateY(-3px);box-shadow:var(--uc-shadow-card)}
}
label{display:block;font:600 13px/1 var(--uc-body);color:var(--uc-text);margin:0 0 9px}
/* The primary action sat flush against the field above it, on both pages: a
   field and the button that submits it read as one welded lump with no
   breathing room. Inside a confirm rail the flex gap already spaces them. */
.card>.go,.card>.open{margin-top:18px}
.confirm-row .go,.confirm-row .ghost{margin-top:0}
input[type=text]{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--uc-r-md);padding:14px 16px;font:16px var(--uc-body);color:var(--uc-white);outline:none;
  transition:border-color .2s var(--uc-ease),box-shadow .2s var(--uc-ease)}
input[type=text]:focus{border-color:rgba(156,216,255,.7);box-shadow:0 0 0 3px rgba(37,128,224,.22)}
/* Safari zooms the whole page when a field under 16px takes focus, and then
   leaves it zoomed. Any field that is smaller for looks goes back to 16px on a
   touch device. */
@media (pointer:coarse){ input,select,textarea{font-size:16px!important} }
input[type=text][aria-invalid=true]{border-color:var(--uc-orange)}

/* Action is orange, and the label on it is navy. White on this orange measures
   2.1:1 and is unreadable; navy measures 8.8:1. */
.go{width:100%;border:0;border-radius:var(--uc-r-pill);padding:16px 22px;cursor:pointer;
  font:700 16px/1 var(--uc-body);color:var(--uc-navy-deep);background:var(--uc-orange);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .2s var(--uc-ease),background .2s var(--uc-ease),box-shadow .2s var(--uc-ease)}
@media (hover:hover) and (pointer:fine){
  .go:hover:not(:disabled){transform:translateY(-2px);background:var(--uc-orange-soft);
    box-shadow:0 14px 32px -14px rgba(255,155,73,.55)}
  .go:hover:not(:disabled) svg{transform:translateX(3px)}
}
/* Touch has no hover, so the press itself has to answer. */
.go:active:not(:disabled){transform:scale(.98);background:var(--uc-orange-soft)}
.go:disabled{opacity:.6;cursor:not-allowed}
.go svg{transition:transform .2s var(--uc-ease)}
:where(a,button,input):focus-visible{outline:2px solid var(--uc-blue-hi);outline-offset:3px}
/* The headings carry tabindex="-1" only so focus can be moved to them when the
   screen changes, which is what makes a screen reader announce the new screen.
   They are not reachable by Tab, so the ring is noise: it drew a white box
   around the headline for every sighted user. */
h1[tabindex="-1"]:focus{outline:none}

.open{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;
  padding:15px 22px;border-radius:var(--uc-r-pill);text-decoration:none;
  font:700 16px/1 var(--uc-body);color:var(--uc-navy-deep);background:var(--uc-orange);
  transition:transform .2s var(--uc-ease),background .2s var(--uc-ease),box-shadow .2s var(--uc-ease)}
@media (hover:hover) and (pointer:fine){
  .open:hover{transform:translateY(-2px);background:var(--uc-orange-soft);
    box-shadow:0 14px 32px -14px rgba(255,155,73,.55)}
  .open:hover svg{transform:translateX(3px)}
}
.open:active{transform:scale(.98);background:var(--uc-orange-soft)}
.open svg{transition:transform .2s var(--uc-ease)}

.link{display:flex;gap:9px}
.link input{flex:1;min-width:0;font-family:var(--uc-mono);font-size:13.5px}
.link button{flex:none;padding:0 17px;border-radius:var(--uc-r-md);cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--uc-hairline-strong);color:var(--uc-text);
  font:600 14px var(--uc-body);transition:background .2s var(--uc-ease),color .2s var(--uc-ease)}
.link button:active,.ghost:active{background:rgba(255,255,255,.12)}
@media (hover:hover) and (pointer:fine){
  .link button:hover{background:rgba(255,255,255,.09);color:var(--uc-white)}
}

.note,.hint{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--uc-muted)}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 0;padding-top:18px;
  border-top:1px solid var(--uc-hairline);font:12px/1.5 var(--uc-mono);color:var(--uc-muted)}
.err{margin:0 0 14px;color:var(--uc-orange);font-size:14px;line-height:1.5;min-height:0}
.err:empty{display:none}

/* Ticket and status pills. Glassy chip, fully round, blurred. */
.ticket{display:inline-block;margin:0 0 16px;padding:7px 14px;border-radius:var(--uc-r-pill);
  background:rgba(255,255,255,.04);border:1px solid var(--uc-hairline-strong);backdrop-filter:blur(8px);
  font:700 11px/1 var(--uc-display);letter-spacing:.2em;text-transform:uppercase;color:var(--uc-text)}
.verified{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
  font-size:13.5px;color:var(--uc-muted)}
/* Mint is a shape here, never a letter: the dot carries the status. */
.dot{width:8px;height:8px;border-radius:50%;background:var(--uc-mint);flex:none;
  animation:ucPulse 2.2s ease-out infinite}


/* ---------- loading, and the quiet second action ---------- */
/* Holds roughly the height of the screen that replaces it. A one-line
   placeholder is honest about waiting but still jerks the footer up the page
   when the real content lands; reserving the space costs nothing and the
   measured layout shift goes to about zero. */
.boot{display:flex;align-items:flex-start;gap:12px;color:var(--uc-muted);font-size:15px;
  padding:44px 0 0;min-height:min(520px,62vh)}
.spinner{width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.16);
  border-top-color:var(--uc-blue-hi);animation:ucRotate .8s linear infinite;flex:none}
@keyframes ucRotate{to{rotate:360deg}}
.go .spinner{border-color:rgba(12,15,56,.28);border-top-color:var(--uc-navy-deep)}
.ghost{flex:none;padding:16px 22px;border-radius:var(--uc-r-pill);cursor:pointer;
  background:transparent;border:1px solid var(--uc-hairline-strong);color:var(--uc-text);
  font:600 15px/1 var(--uc-body);transition:background .2s var(--uc-ease),border-color .2s var(--uc-ease)}
@media (hover:hover) and (pointer:fine){
  .ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
}

footer{margin-top:44px;padding-top:22px;border-top:1px solid var(--uc-hairline);
  font-size:13px;color:var(--uc-muted);text-align:center}

/* Translucency is a preference, not a given: the same setting that turns off
   iOS's own glass turns off ours. Solid, same colour, no blur. */
@media (prefers-reduced-transparency:reduce){
  .ticket,.link button,.open-card,.ghost{backdrop-filter:none;background:var(--uc-ink-lift)}
  .card,.row{background:var(--uc-ink-lift)}
}
/* Increase Contrast: thicken every hairline and lift the secondary text. */
@media (prefers-contrast:more){
  :root{--uc-hairline:rgba(255,255,255,.28);--uc-hairline-strong:rgba(255,255,255,.42);
        --uc-muted:rgba(231,236,255,.86);--uc-mute-2:rgba(231,236,255,.7)}
  .card,.row{background:var(--uc-ink-lift)}
}

/* Restrained by default, silent on request. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .logo-stack{transition:none}
}
@media (max-width:560px){
  /* The parallax scene is decoration with a pointer it will never get, and it
     costs compositing on the device least able to afford it. */
  .scene{display:none}
  .link{flex-direction:column}
  .link button{padding:13px;min-height:44px}
  /* The masthead was taking a third of the first screen before any content. */
  header{gap:10px;margin-bottom:22px}
  .logo-stack{width:min(168px,46vw)}
  body{padding-top:20px}
  .card{padding:20px 18px}
}