/* Harper visual identity: navy, royal blue, metallic gold and warm white. */
:root{--bg:#061b33;--bg-2:#092743;--surface:#0b2b4a;--surface2:#103857;--panel:#0b2b4a;--panel-alt:#103857;--panel-soft:#123e60;--line:#315775;--text:#f8f7ef;--ink:#f8f7ef;--muted:#bfcede;--muted-2:#9fb5ca;--accent:#f0b636;--accent-strong:#df9c20;--accent-soft:rgba(240,182,54,.14);--gold:#f0b636;--gold2:#ffda78;--shadow:0 16px 40px rgba(0,22,48,.2)}
body{background:linear-gradient(150deg,#04162b,#0b3557);color:var(--text)}
.topbar,.portal-topbar{background:#061d36;border-bottom:3px solid var(--gold)}
.portal-panel,.section-panel,.table-panel{background:var(--panel)}
.portal-hero{background:linear-gradient(125deg,#082746,#104879);border-color:#45627b}
.harper-emblem{display:block!important;flex:0 0 108px;width:108px;height:62px;background:transparent url('./assets/harper-dispatch-logo.png') left center/contain no-repeat}
.brand-copy,.alpha-brand>span:last-child{min-width:0}.brand-name{color:#fff}.brand-copy small{color:#c6d5e5}
.primary-button,.button-primary{background:linear-gradient(120deg,#ffda70,#e7a52b)!important;color:#06223d!important;border-color:#edb740!important}
input,select,textarea{accent-color:#e8aa2d}a:focus-visible,button:focus-visible{outline:3px solid #ffc54a;outline-offset:4px}
.harper-powered{background:#041629;color:#d7e2ed;border-top:2px solid #dca331;font-size:.85rem}
.harper-brand-banner{display:flex;gap:32px;align-items:center;background:#fffdf3!important;color:#08284b;border-top:3px solid #e6a72e}
.harper-brand-banner img{width:145px;height:auto;border-radius:4px}.harper-brand-banner p{color:#30516c}.harper-tagline{font-size:.72rem;font-weight:800;letter-spacing:.15em;margin-bottom:12px!important}
body.home-redesign{--bg:#fffdf6;--surface:#fff;--surface2:#edf4fa;--ink:#06284a;--muted:#486078;--line:#cedae5;--gold:#b9780b;--gold2:#996007;background:var(--bg);color:var(--ink)}
.home-redesign .home-header{background:rgba(255,253,246,.97);border-bottom:3px solid #e1a52d}.home-redesign .alpha-brand{min-width:0;max-width:none}.home-redesign .alpha-brand strong{font-size:.92rem;letter-spacing:.025em;line-height:1.25}.home-redesign .alpha-brand small{line-height:1.4;letter-spacing:.07em}.home-redesign .nav-shell{gap:20px;padding-block:10px}.home-redesign .home-nav{gap:18px}.home-redesign .hero-section{background:radial-gradient(ellipse at 95% 20%,#dcecf8,transparent 62%),#fffdf6;padding:52px 0 64px}.home-redesign .hero-layout{gap:45px;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.home-redesign h1,.home-redesign h2{color:#06284a}.home-redesign .hero-content h1{font-family:Georgia,serif;font-size:clamp(2.8rem,5vw,4.7rem);letter-spacing:-.04em}.home-redesign .hero-lede,.home-redesign .why-company-lede{color:#34506b!important}.home-redesign .button-secondary{border-color:#55718a;color:#06284a;background:#fff}.home-redesign .role-card-featured{background:linear-gradient(135deg,#eaf3fb,#fffdf6)}
.harper-company-art{margin:0;width:100%;aspect-ratio:956/1120;height:auto;max-height:580px;object-fit:cover;background:#061b33;box-shadow:0 20px 60px #092e491c;border-radius:8px}
.harper-board-art{margin:0 auto 28px;text-align:center}.harper-board-art img{width:min(100%,300px);height:auto;border-radius:8px;box-shadow:0 14px 35px #092e4920}
.home-redesign .product-window{background:#092846;color:#f6f8fc;--muted:#bbcede;--line:#31516d;--ink:#fff}.home-redesign .product-window .metric-row>div,.home-redesign .product-body aside{background:#0d3557}.home-redesign .home-footer{background:#06223e;color:#f6f8fc;--muted:#bdcfe0;--line:#375570}.home-footer .alpha-brand strong{color:#fff}.home-redesign .home-footer a{color:#e8eff6}.home-redesign .services-list article{border-top:3px solid #e6ac39}.home-redesign .plans-section{background:#edf4fa}.home-redesign .price-card{background:#fff}.home-redesign .partner-plans article{background:#fff}
@media(max-width:1100px){.home-redesign .nav-shell{flex-wrap:wrap}.home-redesign .home-nav{order:3;width:100%;justify-content:center;margin:0;flex-wrap:wrap}.home-redesign .nav-controls{margin-left:auto}}
@media(max-width:760px){.home-redesign .hero-layout{grid-template-columns:1fr}.harper-company-art{max-width:390px;margin-inline:auto}.harper-brand-banner{gap:16px}.harper-brand-banner img{width:95px}.harper-emblem{flex-basis:92px;width:92px;height:52px}.home-redesign .alpha-brand{max-width:240px}.home-redesign .alpha-brand strong{font-size:.8rem}.home-redesign .hero-section{padding-top:32px}.home-redesign .platform-layout{grid-template-columns:1fr}}
@media(max-width:440px){.harper-brand-banner{flex-direction:column;text-align:center}.home-redesign .nav-controls{width:100%;margin:0;justify-content:space-between}.home-redesign .home-nav{gap:14px;font-size:.8rem}}
@media(max-width:760px){.home-redesign .home-nav{display:flex!important}.home-redesign .portal-link{display:inline-flex!important}.home-redesign .hero-content h1{font-size:2.8rem}.home-redesign .home-nav a{font-size:.8rem}}
.home-redesign .plan-table .recommended{background:linear-gradient(145deg,#fff4d4,#fffdf7);border:2px solid #dba32b;box-shadow:0 12px 30px #ba811517}.board-emblem{flex:0 0 64px;width:64px;height:76px;background:transparent url("./assets/harper-load-board.png") center/contain no-repeat}

/* One navy canvas across every Harper page. */
html,body,body.home-redesign,body.harper-planning{background:#061b33;color:#f8f7ef}
body.home-redesign{--bg:#061b33;--surface:#0b2b4a;--surface2:#103857;--ink:#f8f7ef;--muted:#bfcede;--line:#315775;--gold:#f0b636;--gold2:#ffda78}
.home-redesign .home-header{background:#061b33;border-bottom-color:#e1a52d}
.home-redesign .hero-section,.home-redesign .plans-section,.home-redesign .home-footer,.harper-powered{background:#061b33}
.home-redesign h1,.home-redesign h2,.home-redesign .alpha-brand strong{color:#f8f7ef}
.home-redesign .hero-lede,.home-redesign .why-company-lede{color:#c7d6e5!important}
.home-redesign .home-nav a,.home-redesign .portal-link{color:#e2ebf5}
.home-redesign .button-secondary{background:#0b2b4a;color:#f8f7ef;border-color:#66809a}
.home-redesign .role-card-featured,.home-redesign .partner-plans article,.home-redesign .price-card{background:#0b2b4a}
.home-redesign .plan-table .recommended{background:#103857;border-color:#efb43c}
.harper-brand-banner{background:#0b2b4a!important;color:#f8f7ef}
.harper-brand-banner p{color:#c7d6e5}.harper-tagline{color:#ffcf65!important}
.harper-simple-header{padding:18px max(20px,calc((100% - 1180px)/2));background:#061b33;border-bottom:2px solid #dca331}
.harper-simple-header .brand{font-weight:700}.harper-simple-header small{display:block;font-size:.7rem;color:#bfcede;margin-top:5px}
.harper-planning header{background:#061b33}.harper-planning .hero,.harper-planning main{background:transparent}
.harper-planning details,.harper-planning .plan,.harper-planning .metric,.harper-planning .load{background:#0b2b4a;border-color:#315775;color:#f8f7ef}
.harper-planning .notice{background:#103857;color:#d9e5f1;border-color:#e6ad3b}
.harper-planning small,.harper-planning .muted,.harper-planning .metric span,.harper-planning footer{color:#bfcede}
.harper-planning .eyebrow,.harper-planning #status{color:#ffd16a}.harper-planning .brand{color:#f8f7ef}

/* Public homepage dropdown navigation */
.home-redesign .home-nav{display:flex;align-items:center}
.home-dropdown{position:relative}
.home-dropdown summary{list-style:none;cursor:pointer;padding:12px 4px;color:#e2ebf5;font-size:.9rem;font-weight:700;white-space:nowrap}
.home-dropdown summary::-webkit-details-marker{display:none}
/* Dropdown arrow marker removed on request: the labels stand on their own. */
/* Dropdown arrow markers intentionally removed. */
.home-dropdown summary:focus-visible{outline:2px solid #ffcf65;outline-offset:4px;border-radius:4px}
.home-dropdown-panel{position:absolute;top:100%;right:0;min-width:230px;padding:8px;background:#0b2b4a;border:1px solid #66809a;border-top:3px solid #efb43c;border-radius:8px;box-shadow:0 15px 35px #0006;z-index:60}
.home-redesign .home-dropdown-panel a{display:block;padding:12px;border-radius:4px;color:#f8f7ef;font-size:.9rem}
.home-redesign .home-dropdown-panel a:hover,.home-redesign .home-dropdown-panel a:focus-visible{background:#174663;color:#ffda78}
.home-redesign [id]{scroll-margin-top:150px}
@media(max-width:1100px){.home-dropdown:first-child .home-dropdown-panel{left:0;right:auto}}
@media(max-width:440px){.home-redesign .home-nav{justify-content:space-between;gap:8px}.home-dropdown-panel{min-width:220px;max-width:calc(100vw - 30px)}.home-dropdown:nth-child(2) .home-dropdown-panel{left:50%;right:auto;transform:translateX(-50%)}.home-redesign [id]{scroll-margin-top:230px}}
/* --- Homepage scroll reveal ---------------------------------------------
   Scrolling stays completely normal. Each section animates into view as it
   arrives, so the page feels like it moves in panels without hijacking the
   scroll or locking the viewport. Scoped to body.home-redesign.

   Nothing here is required for the page to work: if the observer is missing
   or animation is suppressed, every section is simply visible. */
/* Sections are VISIBLE by default. The animation is opt-in: only once the
   script confirms it can reveal them does it add .reveal-ready to <html>,
   which is the only thing that hides a section. If the script fails to load,
   is blocked, or throws, every section stays fully visible. */
html.reveal-ready .home-redesign .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .55s ease, transform .55s ease;
  will-change:opacity, transform;
}
html.reveal-ready .home-redesign .reveal.reveal-in{
  opacity:1;
  transform:none;
}
/* The opening section is revealed by script on load and must never animate in:
   a hero that fades up from invisible looks broken on a slow connection. */
html.reveal-ready .home-redesign .reveal.reveal-instant{
  opacity:1;
  transform:none;
  transition:none;
}

/* Give each panel comfortable breathing room without pinning it to a height. */
.home-redesign .section-flow > section{
  padding-block:56px;
}

/* Stagger children so a section arrives as a group, not one flat block. */
html.reveal-ready .home-redesign .reveal.reveal-in > *{
  animation:reveal-child .5s ease backwards;
}
html.reveal-ready .home-redesign .reveal.reveal-in > *:nth-child(2){animation-delay:.06s}
html.reveal-ready .home-redesign .reveal.reveal-in > *:nth-child(3){animation-delay:.12s}
html.reveal-ready .home-redesign .reveal.reveal-in > *:nth-child(4){animation-delay:.18s}
@keyframes reveal-child{
  from{opacity:.001;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* Respect a reduced-motion preference: never hide anything. */
@media(prefers-reduced-motion:reduce){
  html.reveal-ready .home-redesign .reveal{opacity:1;transform:none;transition:none}
  html.reveal-ready .home-redesign .reveal.reveal-in > *{animation:none}
}

/* --- Section progress rail ----------------------------------------------- */
/* A quiet marker on the right edge showing where the reader is. It only
   indicates; it never intercepts scrolling. */
.flip-controls{
  position:fixed;
  right:14px;
  top:50%;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 6px;
  background:rgba(4,22,43,.88);
  border:1px solid #315775;
  border-radius:999px;
  backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,12,26,.55);
  transform:translateY(-50%);
}
@media(max-height:640px){.flip-controls{display:none}}
@media(max-width:960px){.flip-controls{display:none}}
.flip-controls button{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid #5b7d9b;
  background:#0d3557;
  color:#ffda78;
  font-size:1rem;
  font-weight:800;
  cursor:pointer;
  line-height:1;
}
.flip-controls button:hover:not(:disabled){background:#174663;border-color:#ffda78}
.flip-controls button:disabled{opacity:.35;cursor:default}
.flip-controls button:focus-visible{outline:3px solid #ffc54a;outline-offset:2px}
.flip-dots{display:flex;flex-direction:column;gap:7px;align-items:center}
.flip-dots button{
  width:9px;height:9px;padding:0;
  border-radius:50%;
  border:1px solid #6c8ba8;
  background:transparent;
  cursor:pointer;
}
.flip-dots button[aria-current="true"]{background:#ffda78;border-color:#ffda78;height:18px;border-radius:6px}
.flip-progress{color:#dbe7f1;font-size:.68rem;font-weight:800;letter-spacing:.02em;writing-mode:vertical-rl;line-height:1}



/* --- Unified header navigation ------------------------------------------
   Every page loads this stylesheet, so the shared header menu is styled here
   rather than in a page-specific file. Covers both the public menu and the
   simpler menu on signed in pages. */
header nav.public-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px 18px;
  margin-left:auto;
}
.public-nav-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  padding-right:16px;
  border-right:1px solid #315775;
}
.public-nav-group:last-of-type{border-right:0;padding-right:0}
.public-nav a{
  color:#dbe5ef;
  text-decoration:none;
  font-weight:600;
  font-size:.92rem;
  white-space:nowrap;
}
.public-nav a:hover{color:#ffda78;text-decoration:underline}
.public-nav-cta{
  padding:8px 15px;
  border:1px solid #5b7d9b;
  border-radius:8px;
}
.public-nav-cta:hover{border-color:#ffda78;text-decoration:none}
.public-nav-signin{
  padding:9px 17px;
  background:linear-gradient(120deg,#ffda70,#e7a52b);
  color:#06223d !important;
  border-radius:8px;
  font-weight:800;
}
.public-nav-signin:hover{color:#06223d !important;text-decoration:none}

/* Brand block: stack the company name above the parent line. */
header .public-brand,
header .alpha-brand{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
header .public-brand > span:last-child,
header .alpha-brand > span:last-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.2;
  min-width:0;
}
header .public-brand strong,
header .alpha-brand strong{
  display:block;
  color:#ffffff;
  font-size:.96rem;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.25;
}
header .public-brand small,
header .alpha-brand small{
  display:block;
  color:#9fb5ca;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.3;
  margin-top:3px;
}
header .harper-emblem{align-self:center}

/* --- Signed in application header ---------------------------------------
   These pages use a three part topbar: brand, menu, and an action button.
   The menu needs to flex between them without pushing the button off screen. */
header.topbar nav.public-nav{
  flex:1 1 680px;
  min-width:0;
  justify-content:flex-end;
  /* The role-aware menu gains Admin and Intake review after sign-in. Let it
     wrap inside the header instead of forcing its last controls off-screen. */
  flex-wrap:wrap;
  overflow:visible;
}
header.topbar .public-nav-group{
  gap:8px 14px;
  flex-wrap:wrap;
}
header.topbar .public-nav a{font-size:.86rem}
/* The menu already links to the load board, so the duplicate action button
   is redundant on a narrow header and is dropped. */
header.topbar .header-actions{display:none}
/* The topbar must size to its content, not clip a taller menu. */
header.topbar{
  height:auto;
  min-height:110px;
  flex-wrap:wrap;
  align-items:center;
}

@media(max-width:1180px){
  header.topbar nav.public-nav{justify-content:flex-start}
}

/* Narrow screens: brand on its own row, menu beneath it. */
@media(max-width:980px){
  header{flex-wrap:wrap;gap:12px}
  header nav.public-nav{justify-content:flex-start;width:100%;margin-left:0}
  .public-nav-group{padding-right:0;border-right:0}
  header .public-brand strong,
  header .alpha-brand strong{font-size:.9rem}
  header .public-brand small,
  header .alpha-brand small{font-size:.62rem;letter-spacing:.08em}
}

/* --- Header layout -------------------------------------------------------
   public-preview.css constrains the header to a max width but never made it
   a flex container, so the nav links collapsed together with no gaps and
   drifted past the right edge of the page. These rules give the header a real
   two part layout that wraps instead of overflowing. */
header{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 20px;
  max-width:100%;
}
header nav.public-nav{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px 16px;
}
header nav.public-nav a{
  flex:0 0 auto;
  text-decoration:none;
}
@media(max-width:900px){
  header nav.public-nav{justify-content:flex-start}
}

/* --- Application menu dropdowns ------------------------------------------
   The signed in menu carried eleven links on one row, which cannot fit at any
   ordinary window width. They are grouped into three dropdowns so the header
   stays on one line, matching how the homepage already works. */
.public-dropdown{position:relative;display:inline-block}
.public-dropdown>summary{
  list-style:none;
  cursor:pointer;
  color:#dbe5ef;
  font-weight:600;
  font-size:.92rem;
  padding:8px 4px;
  white-space:nowrap;
  user-select:none;
}
.public-dropdown>summary::-webkit-details-marker{display:none}
.public-dropdown>summary:hover{color:#ffda78}
.public-dropdown[open]>summary{color:#ffda78}
/* Closed details must stay hidden. Setting display:flex unconditionally
   would override the browser and show every panel at once. */
.public-dropdown:not([open])>.public-dropdown-panel{display:none}
.public-dropdown[open]>.public-dropdown-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:80;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px;
  background:#0b2b4a;
  border:1px solid #315775;
  border-radius:10px;
  box-shadow:0 14px 34px rgba(0,12,26,.55);
}
.public-dropdown-panel a{
  display:block;
  padding:8px 10px;
  border-radius:6px;
  color:#dbe5ef;
  text-decoration:none;
  font-size:.9rem;
  white-space:nowrap;
}
.public-dropdown-panel a:hover{background:#123e60;color:#ffda78;text-decoration:none}
/* Never let a dropdown run off the right edge of the screen. */
.public-dropdown:last-of-type .public-dropdown-panel{left:auto;right:0}
@media(max-width:900px){
  .public-dropdown-panel{position:static;box-shadow:none;border:0;background:transparent;padding:4px 0 4px 12px}
}

/* --- Header width override ----------------------------------------------
   public-preview.css caps the header at 1150px and loads after this file, so
   its max-width won on every page and the eleven item menu overflowed it.
   These rules are deliberately more specific, and use !important on the cap
   alone, so the header can use the full width of the screen. */
body header,
body > header{
  max-width:100% !important;
  width:100%;
  box-sizing:border-box;
  flex-wrap:wrap;
}
body header nav.public-nav,
body > header nav.public-nav{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px 16px;
}
body header nav.public-nav > a,
body header nav.public-nav .public-nav-group > a{
  flex:0 0 auto;
  white-space:nowrap;
}

/* --- Guest navigation ---------------------------------------------------
   Public pages carry a fuller menu than the signed-in workspace. Give that
   menu a real flexible row so Member sign in stays reachable instead of
   being pushed past the right edge by the brand or grouped links. */
body:not(.home-redesign) > header:not(.topbar) nav.public-nav{
  flex:1 1 680px;
  margin-left:auto;
}
body:not(.home-redesign) > header:not(.topbar) .public-nav-group{
  flex:1 1 270px;
  min-width:0;
}
body:not(.home-redesign) > header:not(.topbar) .public-nav-signin{
  flex:0 0 auto;
}
@media(max-width:1180px){
  body:not(.home-redesign) > header:not(.topbar) nav.public-nav{
    flex-basis:100%;
    margin-left:0;
    justify-content:flex-start;
  }
}

/* --- Homepage conversion paths ----------------------------------------- */
.home-redesign .home-role-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:22px;
}
.home-redesign .home-role-links > span{
  color:var(--muted);
  font-size:.84rem;
  font-weight:700;
  margin-right:2px;
}
.home-redesign .home-role-links a{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font-size:.82rem;
  font-weight:700;
}
.home-redesign .home-role-links a:hover,
.home-redesign .home-role-links a:focus-visible{
  border-color:var(--gold);
  color:var(--gold2);
}
.home-redesign .process-action{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin-top:32px;
}
.home-redesign .process-signin{
  color:var(--gold2);
  font-weight:800;
}
@media(max-width:680px){
  .home-redesign .home-role-links{gap:7px}
  .home-redesign .home-role-links > span{width:100%}
  .home-redesign .process-action{align-items:flex-start;flex-direction:column;gap:14px}
}

/* Conversational assistant voice, staff workspace only. */
#assistantVoiceLog{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.18)}
#assistantVoiceLog:empty{display:none}
.assistant-voice-line{margin:0;font-size:.86rem;line-height:1.45}
.assistant-voice-you{color:var(--muted)}
.assistant-voice-harper{color:var(--ink)}
#assistantVoiceTalk.is-recording{background:var(--gold, #d9ae52);color:#12110e;border-color:var(--gold, #d9ae52)}
#assistantVoiceBudget{margin:6px 0 0}
@media (prefers-reduced-motion:reduce){#assistantVoiceTalk.is-recording{transition:none}}