/* ==========================================================================
   TruNorth Systems — theme layer over Bootstrap 5
   Palette and rhythm modelled on a navy/white legal-services layout.
   ========================================================================== */

:root {
  --navy-900: #0C2044;
  --navy-800: #002263;
  --navy-700: #002B5C;
  --navy-600: #062866;
  --blue-400: #1a4d8c;
  --mint:     #8FE890;

  --soft:   #f5f8ff;
  --grad:   #eef3f9;
  --line:   #cdd6e5;

  --ink:    #374151;
  --ink-dim:#6b7280;

  --r-lg: 24px;
  --r-xl: 28px;

  --shell-pad: 1rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { text-decoration: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #fff; color: var(--navy-800);
  padding: .75rem 1.25rem; border-radius: 0 0 12px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   HERO SHELL — padded frame; nav + hero float on a darkened image
   ========================================================================== */
.hero-shell {
  position: relative;
  padding: var(--shell-pad);
  isolation: isolate;
}
.hero-media,
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Flat 42% dark plus a left-weighted ramp, so the headline keeps contrast
   over the bright part of the image without flattening the whole photo. */
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(4, 14, 36, .72) 0%, rgba(4, 14, 36, .45) 55%, rgba(4, 14, 36, .3) 100%),
    rgba(0, 0, 0, .42);
}

/* ---------- navbar ---------- */
.nav-bar {
  position: relative;
  z-index: 10;
  background: var(--navy-800);
  border-radius: 14px;
  padding: .5rem 0;
  backdrop-filter: blur(10px);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.nav-bar.stuck {
  position: fixed;
  top: var(--shell-pad);
  left: var(--shell-pad);
  right: var(--shell-pad);
  z-index: 1030;
  background: rgba(0, 34, 99, .93);
  box-shadow: 0 12px 34px rgba(0, 20, 60, .32);
  animation: dropIn .38s var(--ease);
}
@keyframes dropIn { from { transform: translateY(-115%); } to { transform: none; } }

.nav-bar .container-fluid { min-height: 64px; }

/* Brand lockup — "Systems" stacked beneath the wordmark.
   The logo PNG reads "trunorth" only; the registered name is TruNorth Systems.
   No web font matches the wordmark's typeface convincingly, so rather than fake
   it, "Systems" is a letterspaced descriptor tracked to the wordmark's width —
   which reads as intentional rather than as a failed match.

   Geometry measured off the PNG's alpha channel (600x199):
     compass mark  x0–189      wordmark  x209–599  (34.83% in, 65% wide)
     wordmark ink  y52–151     baseline  75.9% down, NOT the bottom edge
   The descriptor must align to the wordmark, not the image box, or it drifts
   left under the compass. Offsets are percentages of the image width, so both
   the 34px nav logo and the 44px footer logo scale from one rule. */
.brand {
  color: #fff;
  display: inline-block;
  line-height: 0;              /* no descender gap under the img */
}
.brand img { display: block; }

.brand-suffix {
  display: block;
  margin-left: 34.83%;         /* wordmark's left edge */
  width: 65%;                  /* wordmark's width */
  /* Pull up through the PNG's dead space below the baseline (48 of 199px). */
  margin-top: -7.6%;
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  /* Solved, not guessed: "SYSTEMS" sets 44.3px naturally at 9px, and six gaps
     must carry it to the wordmark's 66.6px -> (66.6-44.3)/6 = 3.71px = .412em.
     The negative margin cancels the trailing letter-space CSS adds after the
     final S, which would otherwise push the visual width 4px past the wordmark. */
  letter-spacing: .412em;
  margin-right: -.412em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .92;
}

.nav-links { gap: .35rem; }
.nav-links .nav-link {
  color: rgba(255, 255, 255, .88);
  font-size: 15px;
  font-weight: 500;
  padding: .45rem .7rem;
  border-radius: 8px;
  position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links .nav-link:hover,
.nav-links .nav-link.active { color: #fff; }
.nav-links .nav-link::after {
  content: "";
  position: absolute;
  left: .7rem; right: .7rem; bottom: .18rem;
  height: 2px;
  background: var(--mint);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-links .nav-link:hover::after,
.nav-links .nav-link.active::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: .6rem; }

.btn-ghost-pill,
.btn-white-pill {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  padding: .5rem 1.35rem;
  white-space: nowrap;
  transition: transform .2s var(--ease), background .2s var(--ease),
              color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-ghost-pill { color: #fff; border: 1.5px solid rgba(255, 255, 255, .8); }
.btn-ghost-pill:hover { background: #fff; color: var(--navy-800); transform: translateY(-1px); }

.btn-white-pill { background: #fff; color: var(--navy-800); border: 1.5px solid #fff; }
.btn-white-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  color: var(--navy-800);
}

/* hamburger */
.navbar-toggler { border: 0; padding: .35rem; box-shadow: none !important; }
.toggler-bars { display: block; width: 26px; }
.toggler-bars span {
  display: block; height: 2px; margin: 5px 0;
  background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .toggler-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767.98px) {
  .navbar-collapse { padding: .5rem .25rem 1rem; }
  .nav-links { gap: 0; margin-bottom: .85rem; }
  .nav-links .nav-link { padding: .6rem .25rem; font-size: 16px; }
  .nav-links .nav-link::after { left: .25rem; right: auto; width: 22px; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
  .nav-actions .btn { width: 100%; padding: .7rem 1rem; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 5;
  min-height: 600px;
  display: flex;
  align-items: center;
  border-radius: var(--r-lg);
  margin-top: 1rem;
  overflow: hidden;
}
.hero-inner { padding: 5rem 1.5rem; }

.hero-title {
  color: #fff;
  font-size: clamp(2.4rem, 7vw, 4.1rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.028em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}
.hero-sub {
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  margin-bottom: 1rem;
  max-width: 46ch;
}
.hero-note {
  color: var(--mint);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 500;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0;
}

@media (max-width: 767.98px) {
  .hero { min-height: 470px; margin-top: .75rem; }
  .hero-inner { padding: 3rem 1.1rem; }
}

/* ==========================================================================
   HERE TO HELP
   ========================================================================== */
.section-white { background: #fff; padding: 5rem 0; }

.h-lead {
  color: var(--navy-700);
  font-size: clamp(1.75rem, 3.4vw, 2.35rem);
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
}
.p-lead {
  color: #4b5563;
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  line-height: 1.75;
  margin: 0;
}

.feature-list { display: flex; flex-direction: column; gap: 2rem; }
.feature { display: flex; align-items: flex-start; gap: 1rem; }

.feature-ico {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--grad);
  color: var(--navy-600);
  border: 1px solid var(--line);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.feature-ico svg { width: 24px; height: 24px; }
.feature:hover .feature-ico {
  background: var(--navy-600);
  color: #fff;
  transform: translateY(-2px);
}
.feature-title {
  color: var(--navy-700);
  font-size: 1.14rem;
  font-weight: 700;
  margin: .1rem 0 .4rem;
}
.feature-copy { color: var(--ink-dim); font-size: .98rem; line-height: 1.65; margin: 0; }

@media (max-width: 767.98px) { .section-white { padding: 3.25rem 0; } }

/* ==========================================================================
   PAYMENT EXAMPLE — glass card
   ========================================================================== */
.pay-wrap { padding: 2rem 1rem; }
@media (min-width: 768px) { .pay-wrap { padding: 2rem; } }
@media (min-width: 992px) { .pay-wrap { padding: 2rem 3.5rem; } }

.pay-card {
  position: relative;
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(12, 32, 68, .18);
}
.pay-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pay-glass {
  position: absolute; inset: 1rem;
  background: rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--r-xl);
  z-index: 1;
}
.pay-ring {
  position: absolute; inset: 1rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-xl);
  z-index: 2;
  pointer-events: none;
}
.pay-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 880px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--navy-900);
}
.pay-title {
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 2.5rem;
}

.pay-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 768px) { .pay-row { flex-direction: row; gap: 0; } }

.pay-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
  margin: 0 0 .35rem;
}
.pay-amount {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .pay-owed { text-align: left; } }

.pay-arrow {
  width: 120px; height: 24px;
  color: var(--navy-900);
  opacity: .55;
  flex: 0 0 auto;
}
@media (max-width: 767.98px) { .pay-arrow { transform: rotate(90deg); width: 70px; } }

.pay-pill {
  background: var(--navy-900);
  color: #fff;
  border-radius: 20px;
  padding: 1.35rem 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  box-shadow: 0 14px 34px rgba(12, 32, 68, .3);
}
@media (min-width: 576px) { .pay-pill { gap: 2.5rem; padding: 1.5rem 2.5rem; } }

.pay-stat { display: flex; flex-direction: column; align-items: center; }
.pay-stat-num {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pay-stat-lbl {
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: .3rem;
}
.pay-div { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .28); }

.pay-fine {
  font-size: .72rem;
  line-height: 1.6;
  color: rgba(12, 32, 68, .8);
  margin: 2.25rem 0 0;
}
.pay-fine a { color: var(--navy-900); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   CONTROL / CTA
   ========================================================================== */
.control {
  background: #fff;
  padding: 5rem 0;
  border-top: 4px solid var(--navy-600);
}
.control-title {
  color: var(--navy-600);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
.control-copy {
  color: #4b5563;
  font-size: clamp(.96rem, 1.3vw, 1rem);
  line-height: 1.8;
  max-width: 68ch;
  margin: 0 auto;
}
.control-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--navy-600);
  font-weight: 500;
  border-bottom: 1px solid var(--navy-600);
  padding-bottom: .25rem;
  transition: opacity .2s var(--ease), gap .2s var(--ease);
}
.link-btn svg { width: 18px; height: 18px; }
.link-btn:hover { opacity: .7; gap: .8rem; color: var(--navy-600); }

@media (max-width: 767.98px) { .control { padding: 3.25rem 0; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  padding: 3rem 0;
  background: linear-gradient(to bottom, #fff, var(--grad));
}
@media (min-width: 768px) { .faq { padding: 5rem 0; } }
@media (min-width: 992px) { .faq { padding: 6rem 0; } }

.faq-head { margin-bottom: 2.5rem; }
@media (min-width: 768px) { .faq-head { margin-bottom: 3.5rem; } }

.faq-title {
  color: var(--navy-700);
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0;
}
.faq-title span { color: var(--blue-400); }
.faq-sub {
  color: var(--ink-dim);
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
  max-width: 60ch;
  margin: 1rem auto 0;
  line-height: 1.65;
}

/* tabs */
.faq-tabs { margin-bottom: 2.5rem; }
@media (min-width: 992px) { .faq-tabs { margin-bottom: 3.5rem; } }

.faq-tabs-scroll {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .25rem .5rem .6rem;
  scrollbar-width: none;
  justify-content: flex-start;
}
.faq-tabs-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .faq-tabs-scroll { justify-content: center; gap: .75rem; } }

.faq-tab {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy-700);
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .2s var(--ease);
}
.faq-tab:hover { border-color: var(--navy-600); transform: translateY(-1px); }
.faq-tab.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* accordion cards */
.faq-col { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 768px) { .faq-col { gap: 1.5rem; } }

.qa {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 20, 60, .05);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
  overflow: hidden;
}
.qa:hover { box-shadow: 0 10px 26px rgba(0, 20, 60, .1); }
.qa.open { border-color: var(--navy-600); }
.qa[hidden] { display: none; }

.qa-q {
  width: 100%;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  padding: 1.25rem 1.4rem;
  color: var(--navy-700);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.qa-ico {
  flex: 0 0 auto;
  position: relative;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--navy-600);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.qa-ico::before,
.qa-ico::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: var(--navy-600);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.qa-ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa.open .qa-ico { background: var(--navy-600); transform: rotate(180deg); }
.qa.open .qa-ico::before,
.qa.open .qa-ico::after { background: #fff; }
.qa.open .qa-ico::after { transform: translate(-50%, -50%) rotate(0deg); }

.qa-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.qa.open .qa-a { grid-template-rows: 1fr; }
.qa-a-in {
  overflow: hidden;
  color: var(--ink-dim);
  font-size: .95rem;
  line-height: 1.7;
  padding: 0 1.4rem;
  transition: padding .35s var(--ease);
}
.qa.open .qa-a-in { padding-bottom: 1.35rem; }

.faq-empty {
  text-align: center;
  color: var(--ink-dim);
  margin: 2.5rem 0 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft { background: var(--soft); border-top: 1px solid #bfdbfe; padding-top: 3rem; color: var(--navy-800); }
.ft-top { padding-bottom: 3rem; }
.ft-logo { display: inline-block; margin-bottom: 1rem; color: var(--navy-800); }
/* Logo is 44px here vs 34px in the nav. Tracking is re-solved rather than reused:
   glyph advances don't scale perfectly linearly across sizes, so 55.9px natural
   -> 86.2px target gives (86.2-55.9)/6 = 5.05px = .435em, not the nav's .412em. */
.ft-logo .brand-suffix {
  font-size: 11.6px;
  letter-spacing: .435em;
  margin-right: -.435em;
}

.ft-about { font-size: .875rem; line-height: 1.7; color: var(--navy-800); margin: 0; }

.ft-h { font-size: 1.06rem; font-weight: 600; margin-bottom: 1rem; color: var(--navy-800); }
.ft-list { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.ft-list a {
  color: var(--navy-800);
  font-size: .92rem;
  transition: opacity .2s var(--ease), padding-left .2s var(--ease);
}
.ft-list a:hover { opacity: .65; padding-left: 4px; }

.ft-lbl { display: block; font-size: .875rem; margin-bottom: .5rem; }
.ft-input-row { display: flex; align-items: center; gap: .75rem; }
.ft-input {
  width: 100%;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-800);
  border: 1px solid #d1d5db;
  outline: none;
  font-size: .92rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ft-input:focus { border-color: var(--navy-800); box-shadow: 0 0 0 3px rgba(0, 34, 99, .12); }
.ft-input.err { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

.ft-sub {
  flex: 0 0 auto;
  padding: .75rem 1.5rem;
  background: #fff;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  font-weight: 600;
  color: var(--navy-800);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.ft-sub:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); transform: translateY(-1px); }

.ft-msg { font-size: .8rem; margin: .6rem 0 0; min-height: 1.1em; }
.ft-msg.ok { color: #15803d; }
.ft-msg.no { color: #dc2626; }

.ft-social { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.ft-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--navy-800);
  border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.ft-social svg { width: 18px; height: 18px; }
.ft-social a:hover { background: var(--navy-800); color: #fff; transform: translateY(-2px); }

.ft-bar { border-top: 1px solid #bfdbfe; padding: 1.5rem 0; }
.ft-bar-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--navy-800);
  text-align: center;
}
@media (min-width: 768px) { .ft-bar-in { flex-direction: row; text-align: left; } }

.ft-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--navy-800);
  font-size: .85rem;
  transition: opacity .2s var(--ease);
}
.ft-meta:hover { opacity: .65; color: var(--navy-800); }
.ft-meta svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ft-copy { font-size: .85rem; margin: 0; opacity: .85; }

/* ==========================================================================
   LOGIN MODAL
   ========================================================================== */
.login-card {
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 20, 60, .35);
}

.login-head {
  background: var(--navy-800);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* The lockup's suffix inherits nav sizing; the modal logo is 30px, so re-solve
   the tracking for it the same way (natural 39.4px -> wordmark 58.8px). */
.login-brand .brand-suffix { font-size: 8px; letter-spacing: .409em; margin-right: -.409em; }

.login-x {
  background: none; border: 0; padding: .35rem;
  color: rgba(255, 255, 255, .75);
  border-radius: 8px; cursor: pointer; line-height: 0;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.login-x svg { width: 20px; height: 20px; }
.login-x:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.login-body { padding: 1.75rem 1.5rem 1.5rem; }

.login-title {
  color: var(--navy-700);
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 .35rem;
}
.login-sub { color: var(--ink-dim); font-size: .9rem; margin: 0 0 1.25rem; }

.fld { margin-bottom: 1rem; }
.fld-lbl {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--navy-700); margin-bottom: .35rem;
}
.fld-wrap { position: relative; }
.fld-in {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .95rem;
  color: var(--navy-900);
  background: #fff;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fld-wrap .fld-in { padding-right: 2.9rem; }
.fld-in::placeholder { color: #9aa3b2; }
.fld-in:focus { border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(6, 40, 102, .13); }
.fld-in.err { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

.fld-eye {
  position: absolute; top: 50%; right: .5rem;
  transform: translateY(-50%);
  background: none; border: 0; padding: .35rem;
  color: var(--ink-dim); cursor: pointer; line-height: 0;
  border-radius: 6px;
  transition: color .2s var(--ease);
}
.fld-eye svg { width: 19px; height: 19px; }
.fld-eye:hover { color: var(--navy-700); }

.fld-err { color: #dc2626; font-size: .76rem; margin: .35rem 0 0; }

.login-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: .25rem 0 1.25rem;
}
.login-remember {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; color: var(--ink); cursor: pointer;
}
.login-remember input { accent-color: var(--navy-800); width: 15px; height: 15px; }
.login-forgot { font-size: .84rem; color: var(--navy-600); font-weight: 500; }
.login-forgot:hover { text-decoration: underline; }

.login-submit {
  width: 100%;
  padding: .8rem 1rem;
  background: var(--navy-800);
  color: #fff;
  border: 0; border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.login-submit:hover { background: #001a4d; transform: translateY(-1px); }
.login-submit:disabled { opacity: .6; cursor: default; transform: none; }

.login-msg { font-size: .8rem; margin: .8rem 0 0; min-height: 1.1em; text-align: center; color: var(--ink-dim); }
.login-msg.ok { color: #15803d; }
.login-msg.no { color: #dc2626; }
.login-msg.info { color: var(--navy-600); }

.login-foot {
  text-align: center; font-size: .84rem;
  color: var(--ink-dim); margin: 1.25rem 0 0;
}
.login-foot a { color: var(--navy-600); font-weight: 600; }
.login-foot a:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
  .login-body { padding: 1.5rem 1.15rem 1.25rem; }
  .login-row { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* ==========================================================================
   LEGAL PAGES (privacy policy, terms)
   Long-form prose: narrower measure, generous leading, clear heading hierarchy.
   ========================================================================== */
.legal-shell { padding: var(--shell-pad); background: var(--navy-800); }
.legal-nav { background: transparent; }
.legal-nav .container-xl { min-height: 56px; }

.legal-back {
  color: rgba(255, 255, 255, .85);
  font-size: .88rem;
  font-weight: 500;
  transition: color .2s var(--ease);
}
.legal-back:hover { color: #fff; }

.legal { background: #fff; padding: 3rem 1.25rem 4rem; }
.legal-wrap { max-width: 760px; margin: 0 auto; }   /* ~75ch measure */

.legal-h1 {
  color: var(--navy-700);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 .5rem;
}
.legal-date { color: var(--ink-dim); font-size: .88rem; margin: 0 0 1.75rem; }

.legal-lead {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #4b5563;
  margin: 0 0 2.25rem;
}

.legal h2 {
  color: var(--navy-700);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 2.5rem 0 .85rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.legal h3 {
  color: var(--navy-600);
  font-size: 1rem;
  font-weight: 600;
  margin: 1.5rem 0 .5rem;
}
.legal p, .legal li { color: #4b5563; font-size: .96rem; line-height: 1.8; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.legal li { margin-bottom: .5rem; }
.legal a { color: var(--navy-600); font-weight: 500; text-decoration: underline; }
.legal a:hover { color: var(--navy-800); }

/* The carrier-checked mobile clause — visually separated because it is the
   operative language for 10DLC/A2P review, not ordinary body copy. */
.legal-callout {
  background: var(--grad);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy-600);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 1rem 0 1.5rem;
}
.legal-callout p { margin-bottom: .75rem; }
.legal-callout strong { color: var(--navy-700); }

.legal-contact { list-style: none; padding-left: 0; }
.legal-contact li { margin-bottom: .3rem; }

@media (max-width: 575.98px) {
  .legal { padding: 2rem 1rem 3rem; }
  .legal h2 { font-size: 1.15rem; }
}

/* ==========================================================================
   OPT-IN / CONTACT PAGE
   Reuses the login form field styles (.fld, .fld-in, .login-submit, .login-msg).
   ========================================================================== */
.optin { background: linear-gradient(to bottom, #fff, var(--grad)); padding: 3rem 1.25rem 4rem; }
.optin-wrap { max-width: 620px; margin: 0 auto; }
.optin-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.25rem 2rem;
  box-shadow: 0 18px 50px rgba(0, 20, 60, .1);
}
@media (max-width: 575.98px) { .optin-card { padding: 1.5rem 1.15rem; } }

.optin-title {
  color: var(--navy-700);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
.optin-sub { color: var(--ink-dim); font-size: .95rem; line-height: 1.6; margin: 0 0 1.75rem; }

.fld-opt { font-weight: 400; color: var(--ink-dim); font-size: .82em; }
textarea.fld-in { resize: vertical; min-height: 84px; line-height: 1.5; }

/* Standalone SMS consent — visually distinct so it reads as a deliberate,
   separate choice rather than part of the form's normal fields. */
.optin-consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  background: var(--grad);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem 1rem;
  margin: .5rem 0 1.25rem;
}
.optin-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: .15rem;
  accent-color: var(--navy-800);
  cursor: pointer;
}
.optin-consent label {
  font-size: .82rem;
  line-height: 1.6;
  color: #4b5563;
  cursor: pointer;
}
.optin-consent strong { color: var(--navy-700); }
.optin-consent a { color: var(--navy-600); font-weight: 600; text-decoration: underline; }
.optin-consent.err { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .1); }

/* Honeypot — off-screen, not display:none (some bots skip hidden fields). */
.optin-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.optin-foot {
  text-align: center;
  font-size: .85rem;
  color: var(--ink-dim);
  margin: 1.5rem 0 0;
}
.optin-foot a { color: var(--navy-600); font-weight: 600; }