/* tesr.health - coming soon
   ─────────────────────────────────────────────────────────────────────────
   The page IS the material. Light falls from the top-left; every element is
   either raised out of the surface or pressed into it. There is deliberately
   no card, no frame and no device bezel - those belonged to the mockups.
   Full-bleed means the browser window itself is the surface the logotype is
   embossed into, which is the stronger reading of the same idea.

   Sizing rule: anything that could grow tall enough to push the form
   off-screen is clamped against viewport HEIGHT as well as width. That is
   what guarantees a single screen on mobile - construction, not tuning.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --lo:#c6cbd4;          /* shadow side of the material */
  --hi:#ffffff;          /* lit side */
  --ink:#282b31;
  --slate:#71757e;
  --red:#E7262B;
  --card:#edf0f5;        /* raised chips, inputs, buttons */
  --emboss:#eef1f6;      /* surface colour of shapes raised from nothing */
  --cast:116,123,136;    /* shared shadow hue, rgb parts */

  /* The vw ramp is tuned for the SMALL end and capped for the large one.
     A ramp tuned for desktop (~15vw) collapses to its minimum on a 390px
     phone and stops scaling; 30vw gives 117px at 390px - matching the
     authored mobile design - and still caps at 184px on desktop.
     The min() against vh is what guarantees a single screen: on a
     height-starved viewport the logotype shrinks rather than overflowing. */
  --logo-size:min(clamp(84px,30vw,184px),22vh);
  --gap:clamp(13px,3.2vh,36px);
}

*{margin:0;padding:0;box-sizing:border-box}

html{height:100%}

body{
  min-height:100vh;
  min-height:100dvh;            /* excludes mobile browser chrome */
  background:radial-gradient(125% 105% at 50% 20%,#eef1f6,#e0e3ea);
  background-attachment:fixed;
  font-family:'Google Sans','Google Sans Text',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

input{font-family:inherit}
input:focus{outline:none}
input::placeholder{color:#a8acb4}

@keyframes pulseDot{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ══ layout ══ */

.page{
  min-height:100vh;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  gap:var(--gap);
  padding:clamp(64px,9vh,88px) clamp(18px,4vw,48px) clamp(24px,6vh,64px);
}

/* ══ status pill ══
   Pinned to the viewport corner now that there is no card to sit inside. */

.pill{
  position:fixed;
  top:clamp(14px,2.4vh,34px);
  right:clamp(14px,2.4vw,38px);
  z-index:2;
  display:inline-flex;align-items:center;gap:clamp(7px,2vw,10px);
  font-size:clamp(10px,2.7vw,12px);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  padding:clamp(8px,1.1vh,10px) clamp(13px,1.5vw,18px);
  border-radius:999px;background:var(--card);
  box-shadow:6px 6px 15px var(--lo),-6px -6px 15px var(--hi);
}
.pill-dot{
  width:clamp(7px,.7vw,8px);aspect-ratio:1;border-radius:50%;background:var(--red);
  animation:pulseDot 1.8s ease-in-out infinite;
}

/* ══ logotype ══
   Everything below is expressed in `em`, so the whole glyph - the mark, its
   three shapes, and the five-layer emboss - scales from --logo-size alone.
   Hard-coding pixels per breakpoint is what forced the old duplicated
   media-query block; this replaces all of it. */

.logo{
  font-family:'Figtree',sans-serif;font-weight:800;
  font-size:var(--logo-size);
  letter-spacing:-.038em;line-height:1;
  color:var(--emboss);
  text-shadow:
    -.033em -.033em .060em #ffffff,
    -.011em -.011em .016em #ffffff,
     .038em  .049em .087em rgba(var(--cast),.9),
     .016em  .022em .038em rgba(var(--cast),.65),
     .005em  .005em .005em rgba(var(--cast),.55);
  display:flex;align-items:center;justify-content:center;
}

.logo-mark{position:relative;display:inline-block;width:.576em;height:.717em;margin-left:.054em}
.mark-ball{
  position:absolute;left:.054em;bottom:0;width:.212em;aspect-ratio:1;border-radius:50%;
  background:var(--emboss);
  box-shadow:
    -.022em -.022em .043em #ffffff,
    -.005em -.005em .011em #ffffff,
     .027em  .033em .065em rgba(var(--cast),.85),
     .011em  .016em .027em rgba(var(--cast),.6);
}
.mark-dot{
  position:absolute;left:.054em;bottom:.266em;width:.234em;aspect-ratio:1;border-radius:50%;
  background:var(--red);
  box-shadow:
    -.022em -.022em .043em rgba(255,255,255,.55),
     .033em  .043em .076em rgba(var(--cast),.85),
     .011em  .016em .033em rgba(var(--cast),.6);
}
.mark-tri-wrap{position:absolute;left:.272em;bottom:.424em}
.mark-tri{
  display:block;width:0;height:0;
  border-left:.147em solid transparent;border-right:.147em solid transparent;
  border-bottom:.234em solid var(--red);
  transform:rotate(52deg);
  filter:drop-shadow(.011em .016em .027em rgba(var(--cast),.85))
         drop-shadow(-.011em -.011em .016em rgba(255,255,255,.4));
}

/* ══ the loop ══
   train / eat / sleep raised, repeat pressed in and red. The pressed state is
   the whole point - you are always already back at the start. */

.chips{display:flex;flex-wrap:wrap;gap:clamp(7px,.85vw,11px);justify-content:center;list-style:none}
.chip{
  font-weight:600;font-size:clamp(13.5px,3.7vw,16px);letter-spacing:-.2px;color:var(--slate);
  padding:clamp(7px,1vh,9px) clamp(14px,4vw,19px);
  border-radius:999px;background:var(--card);
  box-shadow:5px 5px 11px var(--lo),-5px -5px 11px var(--hi),inset 0 1px 0 rgba(255,255,255,.6);
}
.chip-pressed{
  color:var(--red);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi);
}

/* ══ lede ══
   Two blocks, four lines, both set in the same slate at the same weight.
   The copy concedes before it claims, and the gap between the blocks is the
   only thing marking that turn: no colour shift, no bolding. On a surface
   this soft, a jump to near-black reads as a different element rather than
   the same voice continuing.

   Each line is its own block-level span rather than a <br>. A <br> forces the
   same break at every width and orphans a word on a narrow phone; a span
   renders as one clean line where there is room and wraps gracefully where
   there is not. */

.lede{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(11px,1.8vh,18px);
  max-width:min(560px,90vw);
}
.lede p{
  font-size:clamp(14.5px,3.9vw,18px);
  line-height:1.5;
}
.lede span{display:block;text-wrap:balance}

.lede-quiet,
.lede-claim{color:var(--slate)}

/* ══ signup ══ */

.cta{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:clamp(2px,1.2vh,10px)}

.signup{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,14px);width:100%}
.signup[hidden]{display:none}   /* a class selector outranks the UA [hidden] rule */

.eyebrow{
  font-size:clamp(11px,3vw,12px);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);
}

.signup-row{display:flex;gap:12px;align-items:center;position:relative;width:100%;justify-content:center}

.signup-input{
  width:min(300px,72vw);
  padding:clamp(13px,1.8vh,16px) 20px;border:none;border-radius:16px;background:var(--card);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi);
  font-size:15px;color:var(--ink);              /* never below 15px: iOS zooms the page otherwise */
}
.signup-input:focus-visible{
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi),0 0 0 2px var(--red);
}

/* The authored button carries a `style-active` attribute - a Design-runtime
   hint that it depresses on press. Outside that runtime it only exists as a
   real :active rule. */
.signup-button{
  cursor:pointer;border:none;
  padding:clamp(13px,1.8vh,16px) clamp(22px,2.6vw,34px);
  border-radius:16px;background:var(--card);color:var(--slate);
  font-weight:700;font-size:clamp(12px,3.3vw,13px);
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  box-shadow:6px 6px 14px var(--lo),-6px -6px 14px var(--hi);
  transition:box-shadow .12s ease;
}
.signup-button:active{box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.signup-button:focus-visible{
  outline:none;
  box-shadow:6px 6px 14px var(--lo),-6px -6px 14px var(--hi),0 0 0 2px var(--red);
}
.signup-button[disabled]{opacity:.6;cursor:progress}

/* Off-screen, out of tab order, hidden from assistive tech - only an
   automated form-filler will ever put a value in it. */
.signup-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.signup-error{font-size:12.5px;color:var(--red)}
.signup-error:empty{display:none}

/* ══ success ══ */

.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(10px,1.6vh,14px);width:100%}
.done[hidden]{display:none}

.check-ring{
  width:clamp(52px,7vh,66px);aspect-ratio:1;border-radius:50%;background:var(--card);
  box-shadow:6px 6px 14px var(--lo),-6px -6px 14px var(--hi);
  display:flex;align-items:center;justify-content:center;
}
/* A tick drawn from two borders of an empty box, rotated. No icon font, no
   SVG, and it inherits the brand red directly. */
.check{
  width:26px;height:14px;
  border-left:5px solid var(--red);border-bottom:5px solid var(--red);
  transform:rotate(-45deg);margin-top:-5px;border-radius:1px;
}
.done-title{font-family:'Figtree',sans-serif;font-weight:800;font-size:clamp(20px,5.5vw,23px);letter-spacing:-.6px;color:var(--ink)}
.done-copy{font-size:clamp(13.5px,3.7vw,14.5px);line-height:1.55;color:var(--slate);max-width:min(300px,84vw)}
.done-copy b{color:var(--ink);overflow-wrap:anywhere}

/* ══ narrow screens ══
   Stack the form; the loop stays one row because the chips are already
   clamped small enough to fit 360px. */

@media (max-width:640px){
  .signup-row{flex-direction:column;gap:11px}
  .signup-input,.signup-button{width:min(330px,84vw)}
  .lede{max-width:min(340px,86vw)}
}

/* Landscape phones are height-starved: drop the lede rather than let the
   page scroll. The logotype and the loop carry the message on their own. */
@media (max-height:460px) and (orientation:landscape){
  .lede{display:none}
  .page{padding-top:clamp(46px,12vh,64px)}
}

/* Short portrait screens: tighten the lede a little. The chips stay - they
   are the brand motif, and measurement showed there is room for them. */
@media (max-width:640px) and (max-height:670px){
  .lede{font-size:14px;line-height:1.45}
}

/* The dot pulses forever; honouring the OS setting is the default. */
@media (prefers-reduced-motion:reduce){
  .pill-dot{animation:none}
  .signup-button{transition:none}
}