/*
 * hcs-signin.css — sign-in page styles
 * Ported from /home/marco-maher/Downloads/HonCar Templetes/signin.html
 * All selectors scoped under .hcs-signin-wrap so they cannot leak into
 * Kadence theme chrome or the homepage / dashboard pages.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* FULL-BLEED — break out of Kadence's .entry-content-wrap padding and
   .content-area margins so the sign-in page truly fills the viewport,
   matching the mockup edge-to-edge. */
body:has(.hcs-signin-wrap){background:#fff}
body:has(.hcs-signin-wrap) .hcs-app.hcs-header-wrap,
body:has(.hcs-signin-wrap) .hcs-app.hcs-footer-wrap,
body:has(.hcs-signin-wrap) .hcs-footer,
body:has(.hcs-signin-wrap) .site-header,
body:has(.hcs-signin-wrap) .site-footer,
body:has(.hcs-signin-wrap) footer.site-footer,
body:has(.hcs-signin-wrap) [data-elementor-type="footer"],
body:has(.hcs-signin-wrap) [data-elementor-location="footer"],
body:has(.hcs-signin-wrap) #wpadminbar{display:none !important}
body:has(.hcs-signin-wrap) .content-area,
body:has(.hcs-signin-wrap) .site-container,
body:has(.hcs-signin-wrap) .entry-content-wrap,
body:has(.hcs-signin-wrap) .entry-content,
body:has(.hcs-signin-wrap) .entry.single-entry,
body:has(.hcs-signin-wrap) .entry{
  margin:0 !important;padding:0 !important;
  max-width:none !important;box-shadow:none !important;background:transparent !important;
}
body:has(.hcs-signin-wrap) .entry-header,
body:has(.hcs-signin-wrap) .entry-hero,
body:has(.hcs-signin-wrap) .page-title,
body:has(.hcs-signin-wrap) .entry-title{display:none !important}
html:has(.hcs-signin-wrap){margin-top:0 !important}

.hcs-signin-wrap{
  --blue-900:#0A2540;
  --blue-800:#0F3A6B;
  --blue-700:#1E5AA8;
  --blue-600:#2563C9;
  --blue-500:#3B7BE0;
  --blue-100:#DCE8F5;
  --blue-50:#EEF4FB;
  --ink:#0A2540;
  --ink-2:#475569;
  --ink-3:#748094;
  --line:#E3E8EF;
  --bg:#FFFFFF;
  --bg-2:#F7F9FC;
  --bg-3:#F0F4F9;
  --green:#0F8B4F;
  --green-50:#E6F4EE;
  --amber:#B45309;
  --amber-50:#FEF3E0;
  --red:#C53030;
  --red-50:#FEE;
  --shadow-sm:0 1px 2px rgba(10,37,64,.06);
  --shadow-md:0 4px 14px rgba(10,37,64,.08);
  --shadow-lg:0 18px 40px rgba(10,37,64,.14);
  --shadow-xl:0 30px 60px -15px rgba(10,37,64,.25);

  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--bg-2);
  /* Full-bleed: span the viewport width even when the parent is content-width */
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
@media (max-width:920px){
  .hcs-signin-wrap{grid-template-columns:1fr; min-height:100dvh;}
}

.hcs-signin-wrap *,
.hcs-signin-wrap *::before,
.hcs-signin-wrap *::after{box-sizing:border-box;margin:0;padding:0}
.hcs-signin-wrap a{color:inherit;text-decoration:none}
.hcs-signin-wrap button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;box-shadow:none}
.hcs-signin-wrap button:hover,
.hcs-signin-wrap button:focus,
.hcs-signin-wrap button:active{box-shadow:none}
.hcs-signin-wrap input,
.hcs-signin-wrap select,
.hcs-signin-wrap textarea{font:inherit;color:inherit;background:#fff}
.hcs-signin-wrap ul{list-style:none}

/* THEME-BLEED RESETS — Kadence/WP set defaults like
   `h1{color:var(--global-palette3); font-family:Poppins}` and
   `input{padding:.4em .5em}` that override my scoped styles via
   higher-specificity selectors. Pin headings + form controls back
   to the mockup's Inter + token colours. */
.hcs-signin-wrap h1,
.hcs-signin-wrap h2,
.hcs-signin-wrap h3,
.hcs-signin-wrap h4,
.hcs-signin-wrap h5,
.hcs-signin-wrap h6{font-family:'Inter', system-ui, -apple-system, sans-serif;color:inherit}
.hcs-signin-brand h1,
.hcs-signin-brand h2,
.hcs-signin-brand h3,
.hcs-signin-brand p,
.hcs-signin-brand strong,
.hcs-signin-brand small,
.hcs-signin-brand a{color:#fff}
.hcs-signin-form h2{color:var(--blue-900)}
.hcs-signin-wrap input[type="text"],
.hcs-signin-wrap input[type="email"],
.hcs-signin-wrap input[type="password"],
.hcs-signin-wrap input[type="tel"]{padding:13px 14px 13px 44px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;font-weight:500;background:#fff;line-height:1.55}
.hcs-signin-wrap input[type="text"]:focus,
.hcs-signin-wrap input[type="email"]:focus,
.hcs-signin-wrap input[type="password"]:focus,
.hcs-signin-wrap input[type="tel"]:focus{outline:0;border-color:var(--blue-700);box-shadow:0 0 0 3px rgba(30,90,168,.15)}

/* Bumped-specificity button states — Kadence applies `.entry-content button:hover`
   with box-shadow + bg change at specificity (0,2,0). The .hcs-signin-wrap prefix
   below pushes us to (0,2,1) so we always win. */
.hcs-signin-wrap .hcs-btn-primary{background:var(--blue-700);color:#fff;border:0}
.hcs-signin-wrap .hcs-btn-primary:hover,
.hcs-signin-wrap .hcs-btn-primary:focus,
.hcs-signin-wrap .hcs-btn-primary:active{background:var(--blue-800);color:#fff;box-shadow:none}
.hcs-signin-wrap .hcs-btn-social{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.hcs-signin-wrap .hcs-btn-social:hover,
.hcs-signin-wrap .hcs-btn-social:focus,
.hcs-signin-wrap .hcs-btn-social:active{border-color:var(--ink-2);background:var(--bg-2);color:var(--ink);box-shadow:none}
.hcs-signin-wrap .hcs-role-btn{background:transparent;border:0}
/* Pin the hover/focus colour to near-black — Kadence's `.entry-content
   button:hover{color:#fff}` would otherwise whiten the inactive tab's
   label on hover. The .hcs-signin-wrap prefix outscores the theme rule. */
.hcs-signin-wrap .hcs-role-btn:hover,
.hcs-signin-wrap .hcs-role-btn:focus,
.hcs-signin-wrap .hcs-role-btn:active{background:transparent;box-shadow:none;color:var(--blue-900)}

/* LEFT — brand panel */
.hcs-signin-brand{
  background:linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 50%, var(--blue-700) 100%);
  background-size:200% 200%;
  animation:hcsHeroShift 22s ease infinite;
  color:#fff;
  padding:48px 56px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
}
@keyframes hcsHeroShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.hcs-signin-brand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(500px 350px at 80% 20%, rgba(59,123,224,.32), transparent 60%),
    radial-gradient(450px 320px at 20% 85%, rgba(30,90,168,.4), transparent 60%);
  animation:hcsGlowDrift 14s ease-in-out infinite;
}
@keyframes hcsGlowDrift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-20px,15px)}
}
.hcs-signin-brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 30% 50%, black 30%, transparent 80%);
          mask-image:radial-gradient(ellipse 90% 70% at 30% 50%, black 30%, transparent 80%);
}
.hcs-signin-brand > *{position:relative;z-index:2}

.hcs-brand-top{display:flex;align-items:center;gap:10px;color:#fff}
.hcs-brand-logo-img{
  /* Plugin-shipped logo (SVG). Height-locked, width:auto. !important
     locks out Kadence's `.entry-content img{height:auto}` rule that
     would otherwise let the SVG render at its intrinsic ~320px size. */
  height:70px !important;width:auto !important;max-width:none;display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
@media (max-width:920px){
  .hcs-brand-logo-img{height:56px !important}
}

.hcs-brand-middle h1{
  font-weight:800;font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.02em;line-height:1.15;
  margin-bottom:14px;
}
.hcs-brand-middle p{font-size:16px;color:rgba(255,255,255,.78);max-width:440px;line-height:1.5}

.hcs-brand-features{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.hcs-feat-row{display:flex;align-items:center;gap:14px}
.hcs-feat-row .hcs-ic{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;color:#fff;
  backdrop-filter:blur(10px);
}
.hcs-feat-row .hcs-text strong{display:block;font-size:14.5px;font-weight:700;color:#fff}
.hcs-feat-row .hcs-text small{font-size:13px;color:rgba(255,255,255,.7)}

.hcs-brand-bottom{display:flex;align-items:center;gap:18px;font-size:13px;color:rgba(255,255,255,.65)}
.hcs-brand-bottom a{color:#fff;font-weight:500;border-bottom:1px dashed rgba(255,255,255,.4);padding-bottom:1px}
.hcs-brand-bottom a:hover{color:var(--blue-100);border-color:var(--blue-100)}

@media (max-width:920px){
  .hcs-signin-brand{padding:32px 24px;min-height:auto}
  .hcs-brand-middle{margin:24px 0}
  .hcs-brand-features{margin-top:18px}
  .hcs-brand-bottom{display:none}
}
@media (max-width:560px){
  .hcs-brand-features{display:none}
  .hcs-brand-middle p{font-size:14.5px}
}

/* RIGHT — form panel */
.hcs-signin-form{
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 56px;background:#fff;position:relative;
}
@media (max-width:920px){.hcs-signin-form{padding:36px 24px}}

.hcs-form-inner{max-width:440px;width:100%;margin:0 auto}

.hcs-mobile-back{
  display:none;position:absolute;top:18px;left:18px;
  padding:8px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--ink-2);
  transition:all .15s;
}
.hcs-mobile-back:hover{background:var(--bg-2);color:var(--blue-700)}
@media (max-width:920px){.hcs-mobile-back{display:flex;align-items:center;gap:6px}}

.hcs-form-head{margin-bottom:24px}
.hcs-form-head h2{
  font-weight:800;font-size:clamp(24px,2.8vw,30px);
  color:var(--blue-900);letter-spacing:-.02em;
  margin-bottom:6px;line-height:1.2;
}
.hcs-form-head p{font-size:15px;color:var(--ink-2)}

.hcs-role-toggle{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--bg-2);
  padding:5px;border-radius:12px;
  margin-bottom:24px;position:relative;
}
.hcs-role-btn{
  position:relative;z-index:2;
  padding:11px 14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:9px;
  font-size:14px;font-weight:600;color:var(--ink-2);
  transition:color .25s;
}
.hcs-role-btn .hcs-ic{width:18px;height:18px;display:grid;place-items:center;color:currentColor}
.hcs-role-btn.is-active{color:var(--blue-900)}
.hcs-role-indicator{
  position:absolute;z-index:1;top:5px;left:5px;
  width:calc(50% - 5px);height:calc(100% - 10px);
  background:#fff;border-radius:9px;
  box-shadow:var(--shadow-sm);
  transition:left .25s cubic-bezier(.4,0,.2,1);
}
.hcs-role-toggle.is-mechanic .hcs-role-indicator{left:calc(50%)}

.hcs-signin-form.is-mechanic .hcs-form-head h2 .hcs-role-label{color:var(--blue-700)}
.hcs-role-pill{
  display:inline-block;font-size:11px;font-weight:700;
  background:var(--blue-50);color:var(--blue-700);
  padding:3px 9px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:12px;transition:background .2s;
}
.hcs-signin-form.is-mechanic .hcs-role-pill{background:#FEF3E0;color:#B45309}

.hcs-field{margin-bottom:14px;animation:hcsPaneFade .25s ease}
.hcs-field-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.hcs-field label{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.hcs-field-label-row a{font-size:13px;color:var(--blue-700);font-weight:600}
.hcs-field-label-row a:hover{color:var(--blue-900)}

.hcs-input-wrap{position:relative}
.hcs-input-wrap .hcs-leading{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);pointer-events:none;
}
.hcs-input-wrap .hcs-trailing{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:6px;
  display:grid;place-items:center;color:var(--ink-3);
  transition:all .15s;
}
.hcs-input-wrap .hcs-trailing:hover{background:var(--bg-2);color:var(--ink)}

.hcs-text-input{
  width:100%;padding:13px 14px 13px 44px;
  border:1.5px solid var(--line);border-radius:10px;
  font-size:15px;font-weight:500;background:#fff;
  transition:all .15s;
}
.hcs-text-input:focus{outline:0;border-color:var(--blue-700);box-shadow:0 0 0 3px rgba(30,90,168,.15)}
.hcs-text-input::placeholder{color:var(--ink-3)}
.hcs-text-input.hcs-no-icon{padding-left:14px}
.hcs-text-input.hcs-with-trailing{padding-right:46px}

.hcs-field.has-error .hcs-text-input{border-color:var(--red);box-shadow:0 0 0 3px rgba(197,48,48,.1)}
/* color + display set with explicit values so Kadence's global `.hcs-field-error{color:#fff}`
 * style (it ships on some section variants) can't make them invisible. */
.hcs-field-error{display:none;font-size:12.5px;color:#C53030 !important;margin-top:5px;font-weight:600}
.hcs-field.has-error .hcs-field-error{display:block !important}

.hcs-checkbox-row{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;font-size:13.5px;color:var(--ink-2);
  margin-bottom:18px;
  /* Prevent the click from selecting the label text on every press
     (caused the "drag to toggle" feel some users reported). */
  user-select:none;-webkit-user-select:none;
}
.hcs-checkbox-row > *{pointer-events:none}
.hcs-checkbox-row a{pointer-events:auto}
/* Visually hide the real <input type="checkbox"> but keep it interactable
 * — using `hidden`/`display:none` here breaks the label→input click pairing
 * in some browsers and means the user has to "drag" the text to fire the
 * click. CSS-only hiding keeps the native label behaviour intact. */
.hcs-checkbox-row .hcs-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hcs-checkbox-row .hcs-cb{
  width:18px;height:18px;border-radius:5px;border:2px solid var(--line);
  display:grid;place-items:center;flex-shrink:0;transition:all .15s;
}
.hcs-checkbox-row.is-checked .hcs-cb{background:var(--blue-700);border-color:var(--blue-700)}
.hcs-checkbox-row .hcs-cb svg{opacity:0;color:#fff}
.hcs-checkbox-row.is-checked .hcs-cb svg{opacity:1}

.hcs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:10px;font-weight:600;font-size:15px;transition:all .15s;cursor:pointer;white-space:nowrap}
.hcs-btn-block{width:100%}
.hcs-btn-primary{background:var(--blue-700);color:#fff}
.hcs-btn-primary:hover{background:var(--blue-800)}
.hcs-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.hcs-btn-primary .hcs-spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:hcsSpin .8s linear infinite}
.hcs-btn-primary.is-loading .hcs-spinner{display:inline-block}
.hcs-btn-primary.is-loading .hcs-label{display:none}
@keyframes hcsSpin{to{transform:rotate(360deg)}}

.hcs-btn-social{
  background:#fff;border:1.5px solid var(--line);
  color:var(--ink);font-weight:600;padding:11px 16px;
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;font-size:14px;cursor:pointer;transition:all .15s;
}
.hcs-btn-social:hover{border-color:var(--ink-2);background:var(--bg-2)}

.hcs-divider{
  display:flex;align-items:center;gap:14px;
  margin:20px 0;font-size:12.5px;color:var(--ink-3);font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;
}
.hcs-divider::before, .hcs-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.hcs-social-row{display:flex;gap:8px}

.hcs-alt-method{
  margin-top:14px;padding:14px;
  background:var(--bg-2);border-radius:10px;
  font-size:13px;color:var(--ink-2);text-align:center;
}
.hcs-alt-method a{color:var(--blue-700);font-weight:600}
.hcs-alt-method a:hover{color:var(--blue-900)}

.hcs-form-foot{margin-top:24px;text-align:center;font-size:14px;color:var(--ink-2)}
.hcs-form-foot a{color:var(--blue-700);font-weight:600}
.hcs-form-foot a:hover{color:var(--blue-900)}

.hcs-mech-banner{
  display:none;
  padding:12px 14px;background:#FEF3E0;border:1px solid #FCD9A8;border-radius:8px;
  font-size:13px;color:var(--amber);line-height:1.5;
  margin-bottom:18px;align-items:flex-start;gap:10px;
  animation:hcsPaneFade .25s ease;
}
.hcs-signin-form.is-mechanic .hcs-mech-banner{display:flex}
.hcs-mech-banner svg{flex-shrink:0;margin-top:2px}
.hcs-mech-banner strong{display:block;font-weight:700;margin-bottom:2px}

.hcs-toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--blue-900);color:#fff;
  padding:12px 20px;border-radius:10px;
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);
  z-index:300;display:flex;align-items:center;gap:10px;
  opacity:0;transition:all .25s ease;pointer-events:none;
}
.hcs-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.hcs-toast.is-error{background:var(--red)}
.hcs-toast svg{color:#67E8B8}
.hcs-toast.is-error svg{color:#fff}

@keyframes hcsPaneFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .hcs-signin-wrap *,
  .hcs-signin-wrap *::before,
  .hcs-signin-wrap *::after{animation:none!important;transition:none!important}
}

/* Brand logo link on signin (added 2026-05-27 for back-to-home nav) */
.hcs-signin-wrap .hcs-brand-logo-link{display:inline-block;line-height:0}
.hcs-signin-wrap .hcs-brand-logo-link:hover{opacity:.92}

/* ============ FORGOT-PASSWORD MODAL ============ */
.hcs-fp-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(15,23,42,.55);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.hcs-fp-modal[hidden]{display:none}
.hcs-fp-card{
  background:#fff;border-radius:14px;
  width:100%;max-width:420px;
  padding:24px 22px 20px;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  font-family:inherit;
}
.hcs-fp-card h3{margin:0 0 6px;font-size:18px;color:var(--ink-1,#0f172a)}
.hcs-fp-help{font-size:13px;color:var(--ink-2,#475569);margin:0 0 14px;line-height:1.45}
.hcs-fp-card label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2,#475569);margin-bottom:6px}
.hcs-fp-card input[type=tel],
.hcs-fp-card input[type=text],
.hcs-fp-card input[type=password]{
  width:100%;box-sizing:border-box;
  padding:11px 12px;border:1.5px solid var(--line,#e2e8f0);border-radius:9px;
  font-size:14px;background:#fff;color:var(--ink-1,#0f172a);
  margin-bottom:8px;
}
.hcs-fp-card input:focus{outline:none;border-color:var(--blue-700,#1d4ed8);box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.hcs-fp-err{display:none;color:#C53030;font-size:12.5px;font-weight:600;margin-bottom:8px}
.hcs-fp-close{
  position:absolute;top:10px;right:12px;
  background:none;border:0;font-size:24px;line-height:1;color:#94a3b8;
  cursor:pointer;padding:4px 8px;
}
.hcs-fp-close:hover{color:var(--ink-1,#0f172a)}
.hcs-fp-link{
  background:none;border:0;color:var(--blue-700,#1d4ed8);
  font-size:13px;font-weight:600;cursor:pointer;margin-top:10px;padding:6px;width:100%;
}
.hcs-fp-link:hover{text-decoration:underline}

/* ============================================================
   CONSOLIDATED MOBILE PASS — reskinned 1:1 from signin.html
   (HonCar Templetes/signin.html, 2026-05-29). Mapped to the
   hcs- prefixed classes. Appended last so it wins on source
   order over the earlier, simpler 920/560 blocks above.
   ============================================================ */

/* ≤920px — single column; brand becomes a compact banner */
@media (max-width:920px){
  .hcs-signin-wrap{grid-template-columns:1fr;min-height:100dvh}

  .hcs-signin-brand{padding:26px 24px 22px;min-height:auto;animation:none}
  .hcs-signin-brand::before{animation:none}
  .hcs-brand-logo-img{height:48px !important}
  .hcs-brand-middle{margin:18px 0 0}
  .hcs-brand-middle h1{font-size:22px;line-height:1.2;margin-bottom:8px}
  .hcs-brand-middle p{font-size:14px;max-width:none}
  .hcs-brand-features{margin-top:18px;gap:11px}
  .hcs-feat-row{gap:11px}
  .hcs-feat-row .hcs-ic{width:34px;height:34px}
  .hcs-feat-row .hcs-ic svg{width:16px;height:16px}
  .hcs-feat-row .hcs-text strong{font-size:13.5px}
  .hcs-feat-row .hcs-text small{font-size:12.5px}
  .hcs-brand-bottom{display:none}

  .hcs-signin-form{padding:28px 22px 36px}
  .hcs-form-inner{max-width:none}
}

/* ≤560px — strip the brand to a slim banner, give the form the room */
@media (max-width:560px){
  .hcs-signin-brand{padding:18px 18px 20px}
  .hcs-brand-top{font-size:15.5px;gap:9px}
  .hcs-brand-logo-img{height:40px !important}
  .hcs-brand-middle{margin:14px 0 0}
  .hcs-brand-middle h1{
    font-size:18px;line-height:1.25;margin-bottom:4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .hcs-brand-middle p{font-size:13px;line-height:1.45}
  .hcs-brand-features{display:none}

  .hcs-signin-form{padding:22px 18px 32px}
  .hcs-form-head{margin-bottom:18px}
  .hcs-form-head h2{font-size:22px;line-height:1.2}
  .hcs-form-head p,
  .hcs-form-sub{font-size:14px}

  /* Stack the role tabs into two centred rows (no longer a 2-col grid).
     The sliding indicator now travels vertically (top) instead of
     horizontally (left): full inner width, one-row tall. Row geometry —
     5px top/bottom padding + 5px gap → each row = calc(50% - 7.5px),
     second row starts at calc(50% + 2.5px). */
  .hcs-role-toggle{margin-bottom:18px;grid-template-columns:1fr;gap:5px}
  .hcs-role-indicator{
    width:calc(100% - 10px);height:calc(50% - 7.5px);
    left:5px;top:5px;
    transition:top .25s cubic-bezier(.4,0,.2,1);
  }
  .hcs-role-toggle.is-mechanic .hcs-role-indicator{left:5px;top:calc(50% + 2.5px)}
  .hcs-role-btn{padding:10px 8px;font-size:13.5px;gap:6px}
  .hcs-role-btn .hcs-ic,
  .hcs-role-btn svg{width:16px;height:16px}

  .hcs-mech-banner{padding:11px 12px;font-size:12.5px;gap:8px;margin-bottom:14px}
  .hcs-mech-banner svg{width:15px;height:15px}

  .hcs-field{margin-bottom:12px}
  .hcs-label,
  .hcs-field-label-row label{font-size:12.5px}
  .hcs-field-label-row a{font-size:12.5px}
  .hcs-text-input{padding:12px 13px 12px 42px;font-size:15px}
  .hcs-text-input.hcs-with-trailing{padding-right:44px}
  .hcs-input-wrap .hcs-leading{left:13px}
  .hcs-input-wrap .hcs-leading svg{width:15px;height:15px}

  .hcs-checkbox-row{font-size:12.5px;margin-bottom:14px}

  .hcs-btn{padding:12px 18px;font-size:14.5px}
  .hcs-btn-social{padding:10px 12px;font-size:13.5px;gap:6px}
  .hcs-btn-social svg{width:15px;height:15px}

  .hcs-divider{margin:16px 0;font-size:11px}
  /* Icon-only social buttons on mobile — hide the text label, centre the logo */
  .hcs-social-row{gap:8px}
  .hcs-social-label{display:none}
  .hcs-btn-social{justify-content:center;gap:0;padding:11px}
  .hcs-alt-method{padding:12px;font-size:12.5px}
  .hcs-form-foot{margin-top:18px;font-size:13.5px}

  .hcs-toast{left:14px;right:14px;transform:translateY(20px);max-width:none;justify-content:center}
  .hcs-toast.show{transform:translateY(0)}

  /* Mobile back becomes a top-bar button rather than absolute */
  .hcs-mobile-back{position:static;display:inline-flex;padding:6px 10px;margin-bottom:14px;font-size:12.5px;top:auto;left:auto}
}

/* ≤420px — extra tightening on small phones */
@media (max-width:420px){
  .hcs-signin-brand{padding:14px 16px 16px}
  .hcs-brand-logo-img{height:36px !important}
  .hcs-brand-middle{margin:10px 0 0}
  .hcs-brand-middle h1{font-size:17px}
  .hcs-brand-middle p{font-size:12.5px}

  .hcs-signin-form{padding:18px 16px 28px}
  .hcs-form-head h2{font-size:20px}

  .hcs-role-btn{padding:10px 6px;font-size:12.5px;gap:5px}
  .hcs-btn-social{padding:9px 10px;font-size:12.5px}
  .hcs-field-label-row{margin-bottom:5px}
}

/* Short-height (landscape phones) — minimise vertical space */
@media (max-height:600px) and (max-width:920px){
  .hcs-signin-brand{padding:14px 22px}
  .hcs-brand-middle{margin:8px 0 0}
  .hcs-brand-middle h1{font-size:16px;margin-bottom:3px}
  .hcs-brand-middle p{display:none}
  .hcs-brand-features{display:none}
  .hcs-signin-form{padding:16px 22px 24px}
  .hcs-form-head{margin-bottom:14px}
  .hcs-form-head h2{font-size:20px}
}