/* ===================== hp-auth.css — the sign-in / sign-up look (auth redesign, locked Sep 30 2026) =====================
   From the locked mock-up's auth.css (hero/auth/auth.css): the same tokens and components. Removed: the mock-up toast and the
   ?hp / ?iab / ?state / ?invite review toggles (identity renders those states server-side). Added at the end: the guards
   against Materialize (main.min.css stays loaded until every view has moved, Step 2e), the validation hooks for the new
   views, and the bridge that dresses the views not yet redone in the new card. Class names keep the hp- prefix. */
:root{
  --text:#fff; --text-2:rgba(255,255,255,.76); --text-3:rgba(255,255,255,.56);
  --card:rgba(23,23,27,.92); --card-line:rgba(255,255,255,.08);              /* the homepage save sheet */
  --hair:rgba(255,255,255,.09); --ghost:rgba(255,255,255,.08); --ghost-hover:rgba(255,255,255,.12);
  --field:rgba(255,255,255,.045); --field-line:rgba(255,255,255,.14); --field-focus:rgba(0,255,194,.6);   /* contact form .ct-in */
  --teal:#00FFC2; --blue:#0F6FFF; --fb:#1877F2; --spin:#38BDF8;
  --err:#FCA5A5; --err-strong:#FECACA; --err-line:rgba(248,113,113,.72); --err-bg:rgba(248,113,113,.10);
  --ok-bg:rgba(0,255,194,.07); --ok-line:rgba(0,255,194,.26);
}
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input{font-family:inherit}
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── background: the site's dot grid (v3.css "B", .24 dots) fading out at the edges + the site-wide film grain ── */
.hp-dots{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.24) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 15%,transparent 80%);mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 15%,transparent 80%)}
.filmgrain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:70;opacity:.12;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:240px 240px;animation:filmjit .8s steps(5) infinite}
@keyframes filmjit{0%{transform:translate(0,0)}20%{transform:translate(-3%,-5%)}40%{transform:translate(-7%,2%)}60%{transform:translate(4%,-6%)}80%{transform:translate(-2%,7%)}100%{transform:translate(5%,1%)}}

/* ── top bar: the site nav's glass pill, cut down to the logo + one way out ── */
.hp-top{position:relative;z-index:5;width:min(1120px,calc(100% - 28px));height:54px;margin:14px auto 0;display:flex;align-items:center;gap:16px;padding:0 10px 0 18px;border-radius:14px;
  background:rgba(14,14,16,.55);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(255,255,255,.07)}
.hp-logo{display:flex;align-items:center;flex:none}
.hp-logo img{height:26px;width:auto;display:block}                /* the long HEROPOST logo, as supplied (CSS height only) */
.hp-top-r{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px;font-weight:500;color:var(--text-2)}
.hp-top-r .q{color:var(--text-3)}
.hp-top-r a.txt{color:rgba(255,255,255,.9);font-weight:600}
.hp-top-r a.txt:hover{color:#fff;text-decoration:none}
.btn-solid{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:9px;background:#fff;color:#0B0B0F!important;font-weight:700;font-size:13.5px;text-decoration:none!important}
.btn-solid:hover{filter:brightness(.92)}

/* ── the card: the homepage save sheet, full size ── */
.hp-main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 16px 36px}
.hp-card{position:relative;width:min(440px,100%);background:var(--card);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
  border:1px solid var(--card-line);border-radius:20px;padding:30px 32px 28px;box-shadow:0 40px 120px rgba(0,0,0,.55)}
.hp-head{display:flex;align-items:center;gap:12px}
.hp-h{font-family:'Rubik',sans-serif;font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-.015em;margin:0}
.hp-sub{font-size:15px;line-height:1.55;color:var(--text-2);margin:12px 0 0}
.hp-sub b{color:#fff;font-weight:600;word-break:break-word}
.hp-body{margin-top:22px}
.eyebrow2{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:6px 10px;background:rgba(255,255,255,.03);margin:0 0 16px}
.eyebrow2 i{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}

/* Hero_Agent entity (hero/assets/agents-teaser-alpha.webm) — the site's .entity states */
.entity{position:relative;width:44px;height:44px;flex:none}
.entity video{width:100%;height:100%;object-fit:cover;display:block}
.entity.idle video{animation:bob 6s ease-in-out infinite}
.entity.thinking video{filter:brightness(.72) saturate(.85);animation:think 2.6s ease-in-out infinite}
.entity.answering video{filter:brightness(1.15) saturate(1.12)}
.entity .ring{position:absolute;inset:3px;border-radius:50%;pointer-events:none;opacity:0;background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,159,110,.55) 88%,transparent 100%);
  -webkit-mask:radial-gradient(circle,transparent 86%,#000 90%);mask:radial-gradient(circle,transparent 86%,#000 90%)}
.entity.thinking .ring{opacity:1;animation:spin 1.6s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes think{0%,100%{transform:scale(.96)}50%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
/* icon tile for the utility pages (forgot, reset, errors…) */
.hp-tile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--teal)}
.hp-tile .ic{width:20px;height:20px}
.hp-tile.ok{background:rgba(0,255,194,.12);box-shadow:inset 0 0 0 1px rgba(0,255,194,.3)}
.hp-tile.warn{color:#FCD34D}

/* ── notes: the homepage-run line (hp_welcome), the in-app browser line ── */
.hp-note{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5;color:var(--text-2);background:var(--ghost);margin:0 0 16px}
.hp-note b{color:#fff;font-weight:600}
.hp-note .ic{width:17px;height:17px;margin-top:1px;color:var(--teal)}
.hp-note.teal{background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok-line)}
.hp-iab{font-size:12.5px;line-height:1.5;color:var(--text-3);text-align:center;margin:0 0 12px}

/* ── Google / Facebook: the save sheet's buttons, unchanged ── */
.sbtn{width:100%;height:48px;border-radius:12px;border:none;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none!important;transition:filter .15s}
.sbtn+.sbtn{margin-top:10px}
.sbtn.g{background:#fff;color:#0B0B0F}
.sbtn.g:hover{filter:brightness(.93)}
.sbtn.f{background:var(--fb);color:#fff}
.sbtn.f:hover{filter:brightness(1.08)}
.sbtn .fbdot{width:20px;height:20px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.sbtn .fbdot img{width:14px;height:14px;display:block}
.sbtn svg{flex:none}
.sbtn:focus-visible,.hp-btn:focus-visible,.hp-eye:focus-visible,.hp-links a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.hp-legal{font-size:12px;line-height:1.55;color:var(--text-3);text-align:center;margin:10px 0 0}
.hp-legal a{white-space:nowrap;color:rgba(255,255,255,.82);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:2px}
.hp-legal a:hover{color:#fff}
.hp-or{display:flex;align-items:center;gap:12px;margin:22px 0 18px;font-size:12.5px;color:var(--text-3);white-space:nowrap}
.hp-or::before,.hp-or::after{content:'';flex:1;height:1px;background:var(--hair)}

/* ── fields: the contact form's inputs, with visible labels ── */
.hp-field{margin:0 0 14px}
.hp-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;font-weight:600;color:rgba(255,255,255,.88);margin:0 0 7px}
.hp-label a{font-weight:500;font-size:13px}
.hp-input{width:100%;height:48px;background:var(--field);border:1px solid var(--field-line);border-radius:12px;padding:0 14px;color:#fff;font-size:15.5px;outline:none;
  transition:border-color .15s,background .15s,box-shadow .15s}
.hp-input::placeholder{color:rgba(255,255,255,.36)}
.hp-input:hover{border-color:rgba(255,255,255,.24)}
.hp-input:focus{border-color:var(--field-focus);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(0,255,194,.12)}
.hp-input[readonly]{opacity:.75;cursor:not-allowed}
.hp-field.err .hp-input{border-color:var(--err-line);box-shadow:0 0 0 3px rgba(248,113,113,.12)}
.hp-msg{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--err);margin:7px 0 0}
.hp-msg .ic{width:14px;height:14px;margin-top:1.5px}
.hp-help{font-size:12.5px;line-height:1.45;color:var(--text-3);margin:7px 0 0}
.hp-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp-pw{position:relative}
.hp-pw .hp-input{padding-right:50px}
.hp-eye{position:absolute;right:4px;top:4px;width:40px;height:40px;border:0;border-radius:9px;background:transparent;color:var(--text-3);display:grid;place-items:center;cursor:pointer}
.hp-eye:hover{color:#fff;background:var(--ghost)}
.hp-eye .off{display:none}.hp-eye.on .on-i{display:none}.hp-eye.on .off{display:block}
/* the password rule, shown up front and ticked as you type (7–20 chars, a letter, a number, a symbol, no spaces) */
.hp-rules{display:flex;flex-wrap:wrap;gap:5px 14px;list-style:none;margin:8px 0 0;padding:0;font-size:12.5px;color:var(--text-3)}
.hp-rules li{display:inline-flex;align-items:center;gap:6px}
.hp-rules li::before{content:'';width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);flex:none}
.hp-rules li.ok{color:rgba(255,255,255,.86)}
.hp-rules li.ok::before{box-shadow:none;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
/* checkbox (Terms, Keep me logged in) */
.hp-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--text-2);cursor:pointer;margin:2px 0 16px}
.hp-check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(255,255,255,.36);background:transparent;flex:none;margin:0;display:grid;place-items:center;cursor:pointer}
.hp-check input:checked{background:var(--teal);border-color:var(--teal)}
.hp-check input:checked::after{content:'';width:10px;height:5.5px;border:2.2px solid #000;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.hp-check input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.hp-check a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:2px}
.hp-check.err input{border-color:var(--err-line)}
.hp-check+.hp-msg{margin:-10px 0 14px 30px}

/* ── buttons ── */
.hp-btn{width:100%;height:48px;border-radius:12px;border:0;background:#fff;color:#0B0B0F;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none!important;transition:filter .15s,opacity .15s,background .15s}
.hp-btn:hover{filter:brightness(.92)}
.hp-btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hp-btn.ghost:hover{background:var(--ghost);filter:none}
.hp-btn[disabled],.hp-btn[aria-disabled="true"]{opacity:.45;cursor:default;filter:none}
.hp-btn+.hp-btn,.sbtn+.hp-btn,.hp-btn+.sbtn{margin-top:10px}
.hp-code{font:500 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.7);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 12px;margin:0 0 16px;word-break:break-all}
.hp-code b{color:#fff;font-weight:600}

/* ── alerts (the validation summary) ── */
.hp-alert{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5;margin:0 0 16px;background:var(--err-bg);box-shadow:inset 0 0 0 1px rgba(248,113,113,.36);color:var(--err-strong)}
.hp-alert .ic{width:17px;height:17px;margin-top:1px;color:#F87171}
.hp-alert a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ── small print, switches, link rows ── */
.hp-fine{font-size:12.5px;line-height:1.6;color:var(--text-3);text-align:center;margin:12px 0 0}
.hp-switch{text-align:center;font-size:14px;color:var(--text-2);margin:20px 0 0;padding-top:18px;border-top:1px solid var(--hair)}
.hp-switch a{font-weight:600}
.hp-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 20px;margin:14px 0 0;font-size:13.5px}
.hp-links a,.hp-links span{display:inline-flex;align-items:center;min-height:32px}
.hp-links .off{color:var(--text-3);cursor:default}
.hp-links .off:hover{text-decoration:none}
.hp-tip{font-size:12.5px;line-height:1.55;color:var(--text-3);text-align:center;margin:10px 0 0}

/* ── the 6-digit code: ONE real input (name="code", autocomplete="one-time-code") drawn as six boxes once JS runs ── */
.hp-otp{position:relative;margin:0 0 14px}
.hp-otp .boxes{display:none}
.hp-otp.js .boxes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;pointer-events:none}
.hp-otp.js .hp-input{position:absolute;inset:0;height:100%;opacity:0;z-index:2;cursor:text;font-size:16px}
.hp-otp .hp-input{letter-spacing:.35em;font-size:22px;font-weight:600;text-align:center}
.hp-otp .box{height:58px;border-radius:12px;background:var(--field);border:1px solid var(--field-line);display:grid;place-items:center;font:600 24px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;color:#fff;transition:border-color .15s,box-shadow .15s}
.hp-otp .box.on{border-color:var(--field-focus);box-shadow:0 0 0 3px rgba(0,255,194,.12)}
.hp-otp .box.on:empty::after{content:'';width:2px;height:26px;background:#fff;animation:blink 1s step-end infinite}
.hp-otp.err .box{border-color:var(--err-line)}
@keyframes blink{50%{opacity:0}}

/* ── spinner (the site's .spin) ── */
.hp-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--spin);animation:spin .9s linear infinite;flex:none}


/* ── footer ── */
.hp-foot{position:relative;z-index:2;text-align:center;font-size:12.5px;color:rgba(255,255,255,.45);padding:6px 16px 26px}
.hp-foot span{margin:0 7px;color:rgba(255,255,255,.25)}
.hp-foot a{color:rgba(255,255,255,.6)}
.hp-foot a:hover{color:#fff;text-decoration:none}


/* ── locked Sep 30 (Shaun) ── */
/* (1) the Hero_Agent entity is desktop only: hidden at ≤600px, and its 1.2 MB video is never fetched there —
   the <video> carries data-src, and auth.js sets src only when (min-width:601px) matches */
@media (max-width:600px){.entity{display:none!important}}
/* (6) team invite: email only — rendered server-side (no Google/Facebook, no divider, the invited address read-only) */
.hp-ro{position:relative}
.hp-ro .hp-input{padding-right:44px}
.hp-ro .ic{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3)}
/* (5) "Use Google instead" with its note right under it */
.hp-alt{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--hair);text-align:center}
.hp-alt a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff}
.hp-alt a:hover{color:#fff}
.hp-alt p{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-3)}

@media (max-width:520px){
  .hp-top{height:50px;margin-top:10px;width:calc(100% - 20px);padding:0 8px 0 14px}
  .hp-logo img{height:22px}
  .hp-top-r .q{display:none}
  .hp-main{justify-content:flex-start;padding:18px 10px 22px}
  .hp-card{padding:24px 20px 22px;border-radius:18px}
  .hp-h{font-size:22px}
  .hp-input,.sbtn,.hp-btn{height:52px}
  .hp-input{font-size:16px}                         /* iOS: no zoom on focus under 16px */
  .hp-row2{gap:10px}
  .hp-otp.js .boxes{gap:7px}
  .hp-otp .box{height:56px}
}
@media (prefers-reduced-motion:reduce){.filmgrain,.entity video,.entity .ring,.hp-spin{animation:none!important}}

/* #resend counts down with the disabled attribute (resend-countdown.js swaps in the enabled text and removes it at zero);
   a link ignores that attribute, so it is made inert here while it carries it (spec §4.4) */
a#resend[disabled],a.hp-btn[disabled]{pointer-events:none;cursor:default}
.hp-links a#resend[disabled]{color:var(--text-3)}
.hp-links a#resend[disabled]:hover{text-decoration:none}

/* ===================== identity: validation (jquery-validate + the server's ModelState) ===================== */
/* asp-validation-for renders an empty .field-validation-valid span; an error swaps in the text (no icon element), so the
   icon is drawn here. The field's own error state comes from the server (.hp-field.err) or the client (.input-validation-error). */
.hp-msg.field-validation-valid{display:none}
.hp-msg.field-validation-error::before,.hp-msg.hp-msg-i::before{content:'';width:14px;height:14px;margin-top:1.5px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FCA5A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat}
.hp-input.input-validation-error{border-color:var(--err-line);box-shadow:0 0 0 3px rgba(248,113,113,.12)}
.hp-check input.input-validation-error{border-color:var(--err-line)}
.hp-alert .validation-summary-errors ul,.hp-alert ul{margin:0;padding:0;list-style:none}
.hp-alert .validation-summary-errors li,.hp-alert li{list-style:none}
.hp-alert .validation-summary-valid{display:none}

/* ===================== identity: the Safari cross-site-tracking banner (until it goes, after the iPhone test) ===================== */
/* notification-cross-site-tracking.js builds it with Materialize's button classes (btn btn-small btn__primary); with Materialize
   gone, the banner's look is kept here: Inter 12.5 px text and a compact white button (its own CSS would make it 96vw on phones). */
.cross-site-tracking-modal{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
.cross-site-tracking-modal .cross-site-tracking-modal-wrap .cross-site-tracking-modal-content .cross-site-tracking-modal-message{font-size:12.5px;line-height:1.45}
.cross-site-tracking-modal .cross-site-tracking-modal-wrap .cross-site-tracking-modal-content .cross-site-tracking-modal-footer .buttons .btn.btn-got-it{
  display:inline-flex;align-items:center;justify-content:center;width:auto;height:48px;padding:0 20px;border:0;border-radius:12px;
  background:#fff;color:#0B0B0F;font:600 15px 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.cross-site-tracking-modal .btn.btn-got-it:focus-visible{outline:2px solid var(--teal);outline-offset:2px}