/* Public pages: the landing (/) and the Sign in / identity pages (DS v2 Phase 4). Artwork is lightweight CSS. */

/* Field illustration (landing and Sign in). */
.field-illustration { position: relative; isolation: isolate; min-width: 0; height: 430px; overflow: hidden; border-radius: 18px; background: #252d29; color: #ebeee6; }
.field-grid { position: absolute; inset: 0; background-image: linear-gradient(#d4dfb909 1px, transparent 1px), linear-gradient(90deg,#d4dfb909 1px, transparent 1px); background-size: 30px 30px; }
.field-coordinate { position: absolute; left: 24px; top: 22px; letter-spacing: .16em; color: #a8b3a4; font: 9px ui-monospace, monospace; }
.field-orbit { position: absolute; width: 430px; height: 300px; border: 1px solid #d9e3b31a; border-radius: 50%; transform: rotate(-28deg); }
.orbit-one { left: 8%; top: 8%; }
.orbit-two { left: 20%; top: -5%; width: 540px; height: 400px; }
.terrain { position: absolute; left: -2%; right: -2%; bottom: 60px; height: 220px; }
.terrain-back { background: #7a856038; clip-path: polygon(0 31%,15% 17%,34% 35%,57% 8%,72% 27%,100% 18%,100% 100%,0 100%); }
.terrain-middle { bottom: 32px; background: #81946630; clip-path: polygon(0 25%,20% 36%,40% 14%,62% 40%,82% 27%,100% 35%,100% 100%,0 100%); }
.terrain-front { bottom: -5px; background: linear-gradient(155deg,#71805b36,#252d29); clip-path: polygon(0 28%,27% 40%,48% 25%,66% 47%,83% 31%,100% 40%,100% 100%,0 100%); }
.field-borehole { position: absolute; width: 1px; background: linear-gradient(#e8b931b3,#e8b93110); top: 190px; bottom: 66px; }
.borehole-one { left: 23%; }
.borehole-two { left: 72%; }
.field-borehole span { position: absolute; top: 12px; left: -3px; width: 7px; height: 7px; background: #e8b931; box-shadow: 0 55px 0 #e8b93188,0 110px 0 #e8b93144; border-radius: 50%; }
.field-device { position: absolute; top: 109px; display: grid; gap: 3px; padding: 12px 14px 12px 30px; background: #303a33ee; border: 1px solid #9bb57e40; border-radius: 8px; box-shadow: 0 8px 22px #1119; }
.device-slope { left: 7%; transform: rotate(-3deg); }
.device-water { right: 6%; top: 154px; transform: rotate(3deg); }
.field-device small { color: #a6b699; font-size: 7px; letter-spacing: .1em; }
.field-device strong { font-size: 12px; font-weight: 500; }
.sensor-dot { position: absolute; left: 13px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: #c5d99d; box-shadow: 0 0 0 4px #c5d99d15; }
.field-router { position: absolute; left: 14%; right: 12%; top: 268px; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #dfe7c947; background: #202824ed; border-radius: 10px; box-shadow: 0 12px 32px #1115; }
.router-glyph { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; color: #e8b931; background: #e8b93115; }
.router-glyph svg { width: 22px; height: 22px; }
.field-router small { display: block; color: #acb69f; font-size: 8px; letter-spacing: .13em; margin-bottom: 4px; }
.field-router strong { font-size: 11px; font-weight: 500; }
.router-pulse { width: 6px; height: 6px; border-radius: 50%; background: #e8b931; margin-left: auto; flex: none; }
.field-baseline { position: absolute; bottom: 40px; left: 24px; right: 24px; display: flex; justify-content: space-between; color: #a4b098; font: 8px ui-monospace, monospace; letter-spacing: .12em; }
.field-caption { position: absolute; bottom: 16px; left: 24px; color: #a4b098; font-size: 9px; }
@media (max-width: 991.98px) { .field-router { left: 7%; right: 7%; padding: 12px; } .field-device { padding-right: 10px; } .field-device small { font-size: 6px; } }
@media (max-width: 359.98px) { .field-router { left: 4%; right: 4%; gap: 8px; } .field-router strong { font-size: 10px; } }

/* Public landing: Figma 788:161 desktop and 788:230 mobile (replaces the 594:327/594:343 splash). */
body.landing-page { margin: 0; min-height: 100dvh; background: #252d29; color: #f2f3eb; }
.landing { min-height: 100dvh; max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 36px 64px 32px; }
.landing a:focus-visible { outline: 2px solid #e5c961; outline-offset: 3px; }
.landing-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.landing-brand { display: inline-flex; align-items: center; gap: 12px; color: #f2f3eb; text-decoration: none; }
.landing-brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #0b6847; color: #fff; font-size: 22px; font-weight: 600; line-height: 1; }
.landing-brand strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.15; }
.landing-brand small { display: block; color: #b5bfb2; font-size: 12px; }
.landing-header-signin { padding: 9px 18px; border: 1px solid #f2f3eb66; border-radius: 8px; color: #f2f3eb; font-size: 14px; font-weight: 500; text-decoration: none; }
.landing-header-signin:hover { color: #fff; border-color: #f2f3ebaa; }
.landing-hero { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 560px); justify-content: space-between; align-items: center; gap: 72px; }
.landing-eyebrow { margin: 0 0 24px; color: #e5c961; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.landing-copy h1 { margin: 0; color: #f2f3eb; font-size: clamp(36px, 3.8vw, 54px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.landing-copy h1 em { color: #e5c961; font-family: Georgia, serif; font-weight: 400; }
.landing-lead { max-width: 540px; margin: 24px 0; color: #b5bfb2; font-size: 18px; line-height: 1.5; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.landing-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 8px; font-size: 15px; text-decoration: none; }
.landing-primary { border: 1px solid #0b6847; background: #0b6847; color: #fff; font-weight: 600; }
.landing-primary:hover { border-color: #095a3d; background: #095a3d; color: #fff; }
.landing-secondary { border: 1px solid #f2f3eb66; color: #f2f3eb; font-weight: 500; }
.landing-secondary:hover { border-color: #f2f3ebaa; color: #fff; }
.landing-points { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 24px 0 0; padding: 0; list-style: none; color: #d6dccf; font-size: 13px; font-weight: 500; }
.landing-points li { display: flex; align-items: center; gap: 8px; }
.landing-points li::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #e5c961; }
.landing .field-illustration { width: 100%; height: 430px; background: #1f2622; }
.landing-footer { color: #8f9a8c; font-size: 12px; }
@media (max-width: 1199.98px) { .landing { padding-inline: 40px; } .landing-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }
@media (max-width: 767.98px) {
  .landing { gap: 28px; padding: 20px 20px 24px; }
  .landing-brand { gap: 10px; }
  .landing-brand-mark { width: 34px; height: 34px; border-radius: 8px; font-size: 19px; }
  .landing-brand strong { font-size: 16px; }
  .landing-brand small { font-size: 11px; }
  .landing-header-signin { padding: 7px 14px; font-size: 13px; }
  .landing-hero { grid-template-columns: 1fr; gap: 0; }
  .landing-eyebrow { margin-bottom: 20px; font-size: 11px; }
  .landing-copy h1 { font-size: 36px; }
  .landing-lead { margin: 20px 0; font-size: 16px; }
  .landing-actions { flex-direction: column; gap: 10px; }
  .landing-button { width: 100%; }
  .landing-points { flex-direction: column; gap: 10px; margin-top: 20px; }
  .landing .field-illustration { display: none; }
  .landing-footer { font-size: 11px; }
}

/* Sign in and identity pages: Design System v2 Phase 4 (Figma 868:161). Tokens from hma-shell.css. */
body.auth-page { min-height: 100dvh; margin: 0; background: var(--hma-bg-canvas); color: var(--hma-text-primary); }
.auth-page a { color: var(--hma-text-link); font-weight: 600; text-decoration: none; }
.auth-page a:hover { text-decoration: underline; }
.auth-page a:focus-visible { outline: 2px solid var(--hma-focus); outline-offset: 2px; }
.auth-page a.v2-btn { text-decoration: none; }
.auth-page a.v2-btn-secondary { color: var(--hma-text-primary); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--hma-text-primary); font-weight: 400; }
.auth-page a.auth-brand { font-weight: 400; }
.auth-page a.auth-brand:hover { text-decoration: none; }
.auth-brand strong { display: block; color: var(--hma-text-primary); font-size: 14px; font-weight: 600; line-height: 18px; }
.auth-brand small { display: block; color: var(--hma-text-secondary); font-size: 12px; line-height: 16px; }
.auth-top { padding: 32px 64px 0; }
.auth-main { display: grid; justify-items: center; gap: 20px; padding: 64px 16px 48px; }
.auth-card { display: grid; gap: 16px; width: min(480px, 100%); min-width: 0; padding: 32px; border: 1px solid var(--hma-border-default); border-radius: var(--hma-radius-lg); background: var(--hma-bg-surface); overflow-wrap: anywhere; }
.auth-card h1, .auth-form-wrap h1 { margin: 0; color: var(--hma-text-primary); font-size: 26px; font-weight: 700; line-height: 32px; letter-spacing: -.3px; }
.auth-heading { display: grid; gap: 6px; }
.auth-eyebrow { margin: 0; color: var(--hma-text-secondary); font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .6px; text-transform: uppercase; }
.auth-intro, .auth-note { margin: -10px 0 0; color: var(--hma-text-secondary); font-size: 14px; line-height: 20px; }
.auth-note { margin: 0; }
.auth-card > .auth-intro:focus { outline: 0; }
.auth-form { display: grid; gap: 16px; min-width: 0; }
.auth-field { display: grid; gap: 6px; min-width: 0; }
.auth-help { color: var(--hma-text-secondary); font-size: 12px; line-height: 16px; }
.auth-field-error { color: var(--hma-status-danger); font-size: 12px; line-height: 16px; }
.auth-field-error[hidden] { display: none; }
.hma-v2 .auth-form .v2-input[aria-invalid="true"] { border-color: var(--hma-status-danger); }
.auth-forgot { justify-self: end; font-size: 13px; }
.hma-v2 .auth-submit { width: 100%; height: var(--hma-control-lg); font-size: 14px; font-weight: 600; }
.auth-alt, .auth-below { margin: 0; color: var(--hma-text-secondary); font-size: 14px; line-height: 20px; text-align: center; }
.auth-facts { min-width: 0; }
.hma-v2 .auth-facts > div:last-child { border-bottom: 1px solid var(--hma-border-default); }
.hma-v2 .auth-facts dt { flex-basis: 120px; }
.hma-v2 .auth-facts dd { font-weight: 500; }
.auth-card .v2-check a { font-weight: 600; }
.turnstile-field { min-height: 65px; }
.auth-page [data-identity-followup][hidden] { display: none; }

/* Sign in: brand panel + form panel (Figma 868:168 / 868:245). */
.auth-split { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); min-height: 100dvh; }
.auth-story { display: flex; flex-direction: column; gap: 40px; min-width: 0; padding: 40px 48px; background: var(--hma-shell-bg); color: var(--hma-shell-text); }
.auth-story .auth-brand strong { color: var(--hma-shell-text); }
.auth-story .auth-brand small { color: var(--hma-shell-text-muted); }
.auth-headline { margin: 0; color: var(--hma-shell-text); font-size: clamp(34px, 3.2vw, 46px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.auth-headline em { color: var(--hma-shell-accent); font-family: Georgia, serif; font-weight: 400; }
.auth-story .field-illustration { width: 100%; max-width: 504px; height: 388px; flex: none; background: var(--hma-shell-bg-raised); }
.auth-story .field-coordinate, .auth-story .field-baseline { display: none; }
.auth-story .field-device { top: 60px; }
.auth-story .device-water { top: 110px; }
.auth-story .field-borehole { top: 135px; }
.auth-story .field-router { top: 215px; }
.auth-story .field-caption { bottom: 22px; }
.auth-panel { display: grid; place-items: center; min-width: 0; padding: 48px 32px; }
.auth-form-wrap { display: grid; gap: 16px; width: min(400px, 100%); min-width: 0; }
.auth-form-wrap .v2-alert { margin: 0; }
@media (min-width: 768px) and (max-height: 820px) { .auth-story .field-illustration { display: none; } }
@media (max-width: 1099.98px) { .auth-split { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); } .auth-story { padding: 32px; } }

@media (max-width: 767.98px) {
  .auth-top { padding: 16px; background: var(--hma-shell-bg); }
  .auth-top .auth-brand strong { color: var(--hma-shell-text); }
  .auth-top .auth-brand small { color: var(--hma-shell-text-muted); }
  .auth-main { padding: 24px 16px 40px; }
  .auth-card { padding: 24px 20px; }
  .auth-card h1, .auth-form-wrap h1 { font-size: 22px; line-height: 28px; letter-spacing: -.2px; }
  .hma-v2 .auth-form .v2-input, .hma-v2 .auth-form .password-toggle { height: var(--hma-control-lg); font-size: 16px; }
  .auth-forgot, .auth-below a, .auth-alt a, .auth-intro a { display: inline-flex; align-items: center; min-height: 44px; }
  .auth-card .v2-check { min-height: 44px; }
  .hma-v2 .auth-facts > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hma-v2 .auth-facts dt { flex-basis: auto; }
  .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-story { padding: 16px; }
  .auth-headline, .auth-story .field-illustration { display: none; }
  .auth-panel { place-items: start stretch; padding: 32px 16px 24px; }
  .auth-form-wrap { width: 100%; }
}