/* Device claim screen (t.html). A focused, one-screen task: no site menu or footer,
   left-aligned type on a steady grid, short steps, and one clear action per screen.
   Loads after styles.css, site.css and hiring.css and overrides their claim rules. */

body.claim-focus{overflow-x:hidden}
body.claim-focus .nav,
body.claim-focus .mobile-menu,
body.claim-focus footer.sf{display:none}
body.claim-focus .pg-main{padding-top:0}

#claim-state.claim{
  max-width:none;width:100%;padding:0 20px;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
}
#claim-state[hidden]{display:none}

/* wordmark, top left of the same column as the card */
#claim-state .claim__logo{
  display:block;width:100%;max-width:440px;
  padding:calc(20px + env(safe-area-inset-top,0px)) 0 0;
}
#claim-state .claim__logo img{height:22px;width:auto}

/* the card sits in the middle of whatever space is left */
#claim-state .claim__card{
  width:100%;max-width:440px;margin:auto;
  padding:26px 24px 22px;text-align:left;
  background:var(--bg-raised);border:1px solid var(--line);border-radius:18px;
}
#claim-state .claim__card::before{height:4px}

/* progress: segments + a plain label */
#claim-state .claim-top{display:flex;align-items:center;gap:14px;margin:0 0 20px}
#claim-state .claim-top[hidden]{display:none}
#claim-state .claim-progress{display:flex;gap:6px;flex:1;margin:0}
#claim-state .claim-progress__dot{flex:1;width:auto;height:3px;border-radius:2px;background:var(--line)}
#claim-state .claim-progress__dot.is-active,
#claim-state .claim-progress__dot.is-done{background:var(--fg)}
#claim-state .claim-progress__label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap}

/* the big outlined numerals from the old wizard are gone */
#claim-state .claim-step::before{display:none !important;content:none !important}

/* type */
#claim-state .claim-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);margin:0 0 6px;
}
#claim-state .claim-step h1{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:30px;line-height:1.05;letter-spacing:.005em;margin:0 0 8px;text-align:left;
}
#claim-state .claim-lede{
  font-size:15px;line-height:1.5;color:var(--fg-muted);margin:0 0 22px;text-align:left;
}
#claim-state .claim-note{
  font-size:13.5px;color:var(--fg);margin:-10px 0 18px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;text-align:left;overflow-wrap:anywhere;
}
#claim-state .claim-note[hidden]{display:none}

/* device picture: capped so the first screen never needs to scroll */
#claim-state .claim-product-preview{
  width:100%;height:clamp(150px,26dvh,230px);aspect-ratio:auto;
  margin:0 0 20px;border-radius:12px;
}

/* fields */
#claim-state .field{margin:0 0 16px}
#claim-state .field label{
  display:block;font-size:13px;font-weight:600;color:var(--fg);margin:0 0 7px;text-align:left;
}
#claim-state .claim-hint{font-weight:400;color:var(--fg-muted);margin-left:6px}
#claim-state .field input{
  width:100%;height:52px;padding:0 16px;font-size:16px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--fg);
}
#claim-state .field input:focus{outline:2px solid var(--fg);outline-offset:1px;border-color:var(--fg)}
#claim-state .claim-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#claim-state .claim-row .field{margin:0 0 16px}
@media (max-width:359px){#claim-state .claim-row{grid-template-columns:1fr;gap:0}}

/* actions */
#claim-state .btn--full{width:100%;height:54px;font-size:16px;white-space:normal;line-height:1.2}
#claim-state .claim-back{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;border-radius:0;padding:4px 0;margin:-6px 0 14px;
  color:var(--fg-muted);font:600 14px var(--font-body);cursor:pointer;
}
#claim-state .claim-back:hover{color:var(--fg)}
#claim-state .claim-alt{
  font-size:14px;color:var(--fg-muted);text-align:center;margin:16px 0 0;
}
#claim-state .claim-alt[hidden]{display:none}
#claim-state .claim-link{
  background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--fg);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
#claim-state .hire-link{margin-top:16px}

/* first screen: two equal choices. On a phone that has signed in before, "I already
   have an account" moves to the top. */
#claim-state .claim-choices{display:flex;flex-direction:column;gap:10px}
#claim-state .claim-choices--returning #claim-have-account{order:-1}
#claim-state .claim-choices .btn--outline{border:1px solid var(--fg-muted);color:var(--fg);background:none}
#claim-state .claim-choices .btn--outline:hover{border-color:var(--fg)}

/* status line: sits under the progress bar, only takes space when it has something to say */
#claim-state #claim-msg{
  margin:0 0 16px;padding:10px 12px;font-size:14px;line-height:1.4;text-align:left;
  border:1px solid var(--line);border-radius:10px;
}
#claim-state #claim-msg:empty{display:none}
#claim-state #claim-msg.form-msg--error{border-color:#5a2e2e;color:#e0a0a0}
#claim-state #claim-msg.form-msg--ok{border-color:#2f4a38;color:#a9d3b5}

/* footer row */
#claim-state .claim__legal{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;
  width:100%;max-width:440px;margin:0;
  padding:18px 0 calc(20px + env(safe-area-inset-bottom,0px));
  font-size:12.5px;
}
#claim-state .claim__legal a{color:var(--fg-muted)}
#claim-state .claim__legal a:hover{color:var(--fg)}

@media (prefers-reduced-motion:reduce){#claim-state *{transition:none !important}}